From d3111523b6034b0a7470b879f500824f42d6d5ba Mon Sep 17 00:00:00 2001 From: "Ahmad K. Bawaneh" Date: Mon, 14 Oct 2024 14:19:28 +0300 Subject: [PATCH] fix #968 Slider bubble cuts off text --- .../domino/ui/config/SlidersConfig.java | 30 +++++++ .../dominokit/domino/ui/config/UIConfig.java | 3 +- .../dominokit/domino/ui/sliders/Slider.java | 17 +++- .../domino/ui/sliders/SliderStyles.java | 2 + .../domino/ui/sliders/ThumbStyle.java | 33 +++++++ .../dui-components/domino-ui-buttons.css | 4 +- .../dui-components/domino-ui-sliders.css | 67 ++++++++++++-- .../dui-components/domino-ui-spacing.css | 88 +++++++++---------- 8 files changed, 189 insertions(+), 55 deletions(-) create mode 100644 domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java create mode 100644 domino-ui/src/main/java/org/dominokit/domino/ui/sliders/ThumbStyle.java diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java b/domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java new file mode 100644 index 000000000..253cf0f0d --- /dev/null +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java @@ -0,0 +1,30 @@ +/* + * Copyright © 2019 Dominokit + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package org.dominokit.domino.ui.config; + +import org.dominokit.domino.ui.sliders.SliderStyles; +import org.dominokit.domino.ui.style.CssClass; + +public interface SlidersConfig extends ComponentConfig { + + /** + * @return the default sliders thumb style, one of {@link SliderStyles#dui_slider_thumb_rounded} + * or {@link SliderStyles#dui_slider_thumb_flat} + */ + default CssClass getDefaultSliderThumbStyle() { + return SliderStyles.dui_slider_thumb_rounded; + } +} diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/config/UIConfig.java b/domino-ui/src/main/java/org/dominokit/domino/ui/config/UIConfig.java index ba167e6c4..0c4069214 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/config/UIConfig.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/config/UIConfig.java @@ -33,4 +33,5 @@ public interface UIConfig DelayedActionConfig, DatatableConfig, CarouselConfig, - RichTextConfig {} + RichTextConfig, + SlidersConfig {} diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java index 7752970a4..5792dbb8d 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java @@ -35,8 +35,10 @@ import org.dominokit.domino.ui.elements.SpanElement; import org.dominokit.domino.ui.events.EventOptions; import org.dominokit.domino.ui.events.EventType; +import org.dominokit.domino.ui.style.SwapCssClass; import org.dominokit.domino.ui.utils.BaseDominoElement; import org.dominokit.domino.ui.utils.ChildHandler; +import org.dominokit.domino.ui.utils.DominoUIConfig; import org.dominokit.domino.ui.utils.HasChangeListeners; /** @@ -66,6 +68,8 @@ public class Slider extends BaseDominoElement private boolean mouseDown; private boolean withThumb; private boolean changeListenersPaused; + private SwapCssClass dui_thumb_style = + SwapCssClass.of(DominoUIConfig.CONFIG.getUIConfig().getDefaultSliderThumbStyle()); /** * Creates a slider with a specified maximum value. @@ -110,7 +114,7 @@ public static Slider create(double max, double min, double value) { public Slider(double max, double min, double value) { root = div() - .addCss(dui_slider) + .addCss(dui_slider, dui_thumb_style) .appendChild( input = input("range").addCss(dui_slider_input).setAttribute("step", "any")) .appendChild( @@ -449,6 +453,17 @@ public boolean hasChangeListener(ChangeListener changeListener) return changeListeners.contains(changeListener); } + /** + * Changes the thumb style for this slider + * + * @param thumbStyle {@link ThumbStyle} + * @return same slider instance + */ + public Slider setThumbStyle(ThumbStyle thumbStyle) { + this.addCss(dui_thumb_style.replaceWith(thumbStyle.getThumbStyle())); + return this; + } + /** * A functional interface to handle slider slide events. * diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/SliderStyles.java b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/SliderStyles.java index 4716273c2..e46c36450 100644 --- a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/SliderStyles.java +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/SliderStyles.java @@ -22,4 +22,6 @@ public interface SliderStyles { CssClass dui_slider_input = () -> "dui-slider-input"; CssClass dui_slider_thumb = () -> "dui-slider-thumb"; CssClass dui_slider_value = () -> "dui-slider-value"; + CssClass dui_slider_thumb_rounded = () -> "dui-slider-thumb-rounded"; + CssClass dui_slider_thumb_flat = () -> "dui-slider-thumb-flat"; } diff --git a/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/ThumbStyle.java b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/ThumbStyle.java new file mode 100644 index 000000000..bea1c6a58 --- /dev/null +++ b/domino-ui/src/main/java/org/dominokit/domino/ui/sliders/ThumbStyle.java @@ -0,0 +1,33 @@ +/* + * Copyright © 2019 Dominokit + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ +package org.dominokit.domino.ui.sliders; + +import org.dominokit.domino.ui.style.CssClass; + +public enum ThumbStyle { + ROUNDED(SliderStyles.dui_slider_thumb_rounded), + FLAT(SliderStyles.dui_slider_thumb_flat); + + private final CssClass thumbStyle; + + ThumbStyle(CssClass thumbStyle) { + this.thumbStyle = thumbStyle; + } + + public CssClass getThumbStyle() { + return thumbStyle; + } +} diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css index 1841a68ea..ac2a23438 100644 --- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css +++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css @@ -22,7 +22,7 @@ transition: var(--dui-btn-transition); background-color: var(--dui-btn-bg-clr, var(--dui-accent, buttonface)); --dui-btn-bg: var(--dui-bg, var(--dui-accent, buttonface)); - color: var(--dui-clr-white); + color: var(--dui-btn-fg-clr, var(--dui-clr-white)); text-decoration: none; width: fit-content; --dui-btn-text-height:28px; @@ -81,10 +81,12 @@ fieldset[disabled] .dui-btn { .dui.dui-btn.dui-ctx { --dui-btn-bg-clr: var(--dui-bg); + --dui-btn-fg-clr: var(--dui-clr-white); --dui-btn-hover-bg-clr: var(--dui-bg-l-4); } .dui-btn-group.dui-ctx { --dui-btn-bg-clr: var(--dui-bg); + --dui-btn-fg-clr: var(--dui-clr-white); --dui-btn-hover-bg-clr: var(--dui-bg-l-4); } .dui-btn-group .dui-btn:hover, diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-sliders.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-sliders.css index 5e1876a27..08b32fca5 100644 --- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-sliders.css +++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-sliders.css @@ -121,29 +121,80 @@ background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1)); position: absolute; border: var(--dui-slider-thumb-border); - transform-origin: var(--dui-slider-thumb-transform-origin); - transform: var(--dui-slider-thumb-transform); - border-radius: var(--dui-slider-thumb-value-radius); height: var(--dui-slider-thumb-value-height); - width: var(--dui-slider-thumb-value-width); top: var(--dui-slider-thumb-value-top); margin: var(--dui-slider-thumb-value-margin); -webkit-transition: var(--dui-slider-thumb-transition); transition: var(--dui-slider-thumb-transition); transition-property: var(--dui-slider-thumb-property); + transform-origin: var(--dui-slider-thumb-transform-origin); + transform: var(--dui-slider-thumb-transform); + border-radius: var(--dui-slider-thumb-value-radius); + width: var(--dui-slider-thumb-value-width); } .dui-slider-value { display: block; + text-align: center; + color: var(--dui-slider-thumb-value-color); + padding: var(--dui-slider-thumb-value-padding); + font: var(--dui-font-regular-sm); +} + +.dui-slider.dui-slider-thumb-rounded { + --dui-slider-thumb-transform: translate(-9px, 9px) rotate(-45deg); + --dui-slider-thumb-transform-origin: 50% 50%; + --dui-slider-thumb-value-transform: rotate(45deg); + + --dui-slider-thumb-value-padding: 5px 0 0 0; + --dui-slider-thumb-text-indent: 6px; + --dui-slider-thumb-value-height: 30px; + --dui-slider-thumb-radius: 25px; + --dui-slider-thumb-value-radius: 50% 50% 50% 0; +} + +.dui-slider.dui-slider-thumb-flat { + --dui-slider-thumb-transform: translate(-4px, 9px); + --dui-slider-thumb-transform-origin: 50% 50%; + --dui-slider-thumb-value-transform: none; + + --dui-slider-thumb-value-padding: var(--dui-spc-1); + --dui-slider-thumb-text-indent: 0; + --dui-slider-thumb-value-height: auto; + --dui-slider-thumb-radius: 25px; + --dui-slider-thumb-value-radius: 2px; +} + +.dui-slider.dui-slider-thumb-rounded .dui-slider-value { + transform: var(--dui-slider-thumb-value-transform); + text-indent: var(--dui-slider-thumb-text-indent); width: var(--dui-slider-thumb-value-width); overflow-x: hidden; white-space: nowrap; text-overflow: ellipsis; +} + +.dui-slider.dui-slider-thumb-flat .dui-slider-thumb:after { + content: ''; + position: absolute; + left: 2px; + top: 20px; + width: 0; + height: 0; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + border-top: 16px solid var(--dui-slider-thumb-background, var(--dui-accent-l-1)); + clear: both; +} + +.dui-slider.dui-slider-thumb-flat .dui-slider-thumb { + width: fit-content; text-align: center; + line-height: 100%; + min-width: 24px; +} + +.dui-slider.dui-slider-thumb-flat .dui-slider-value { transform: var(--dui-slider-thumb-value-transform); - color: var(--dui-slider-thumb-value-color); text-indent: var(--dui-slider-thumb-text-indent); - padding: var(--dui-slider-thumb-value-padding); - font: var(--dui-font-regular-sm); } - diff --git a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-spacing.css b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-spacing.css index 5317e9675..f4273dd29 100644 --- a/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-spacing.css +++ b/domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-spacing.css @@ -9650,220 +9650,220 @@ .dui.dui-font-size-0 { --dui-font-size: var(--dui-spc-0); - font-size: var(--dui-spc-0); + font-size: var(--dui-font-size); } .dui.dui-font-size-px { --dui-font-size: var(--dui-spc-px); - font-size: var(--dui-spc-px); + font-size: var(--dui-font-size); } .dui.dui-font-size-2px { --dui-font-size: var(--dui-spc-2px); - font-size: var(--dui-spc-2px); + font-size: var(--dui-font-size); } .dui.dui-font-size-4px { --dui-font-size: var(--dui-spc-4px); - font-size: var(--dui-spc-4px); + font-size: var(--dui-font-size); } .dui.dui-font-size-8px { --dui-font-size: var(--dui-spc-8px); - font-size: var(--dui-spc-8px); + font-size: var(--dui-font-size); } .dui.dui-font-size-0_5 { --dui-font-size: var(--dui-spc-0_5); - font-size: var(--dui-spc-0_5); + font-size: var(--dui-font-size); } .dui.dui-font-size-1 { --dui-font-size: var(--dui-spc-1); - font-size: var(--dui-spc-1); + font-size: var(--dui-font-size); } .dui.dui-font-size-1_5 { --dui-font-size: var(--dui-spc-1_5); - font-size: var(--dui-spc-1_5); + font-size: var(--dui-font-size); } .dui.dui-font-size-2 { --dui-font-size: var(--dui-spc-2); - font-size: var(--dui-spc-2); + font-size: var(--dui-font-size); } .dui.dui-font-size-2_5 { --dui-font-size: var(--dui-spc-2_5); - font-size: var(--dui-spc-2_5); + font-size: var(--dui-font-size); } .dui.dui-font-size-3 { --dui-font-size: var(--dui-spc-3); - font-size: var(--dui-spc-3); + font-size: var(--dui-font-size); } .dui.dui-font-size-3_5 { --dui-font-size: var(--dui-spc-3_5); - font-size: var(--dui-spc-3_5); + font-size: var(--dui-font-size); } .dui.dui-font-size-4 { --dui-font-size: var(--dui-spc-4); - font-size: var(--dui-spc-4); + font-size: var(--dui-font-size); } .dui.dui-font-size-5 { --dui-font-size: var(--dui-spc-5); - font-size: var(--dui-spc-5); + font-size: var(--dui-font-size); } .dui.dui-font-size-6 { --dui-font-size: var(--dui-spc-6); - font-size: var(--dui-spc-6); + font-size: var(--dui-font-size); } .dui.dui-font-size-7 { --dui-font-size: var(--dui-spc-7); - font-size: var(--dui-spc-7); + font-size: var(--dui-font-size); } .dui.dui-font-size-8 { --dui-font-size: var(--dui-spc-8); - font-size: var(--dui-spc-8); + font-size: var(--dui-font-size); } .dui.dui-font-size-9 { --dui-font-size: var(--dui-spc-9); - font-size: var(--dui-spc-9); + font-size: var(--dui-font-size); } .dui.dui-font-size-10 { --dui-font-size: var(--dui-spc-10); - font-size: var(--dui-spc-10); + font-size: var(--dui-font-size); } .dui.dui-font-size-11 { --dui-font-size: var(--dui-spc-11); - font-size: var(--dui-spc-11); + font-size: var(--dui-font-size); } .dui.dui-font-size-12 { --dui-font-size: var(--dui-spc-12); - font-size: var(--dui-spc-12); + font-size: var(--dui-font-size); } .dui.dui-font-size-14 { --dui-font-size: var(--dui-spc-14); - font-size: var(--dui-spc-14); + font-size: var(--dui-font-size); } .dui.dui-font-size-16 { --dui-font-size: var(--dui-spc-16); - font-size: var(--dui-spc-16); + font-size: var(--dui-font-size); } .dui.dui-font-size-20 { --dui-font-size: var(--dui-spc-20); - font-size: var(--dui-spc-20); + font-size: var(--dui-font-size); } .dui.dui-font-size-24 { --dui-font-size: var(--dui-spc-24); - font-size: var(--dui-spc-24); + font-size: var(--dui-font-size); } .dui.dui-font-size-28 { --dui-font-size: var(--dui-spc-28); - font-size: var(--dui-spc-28); + font-size: var(--dui-font-size); } .dui.dui-font-size-32 { --dui-font-size: var(--dui-spc-32); - font-size: var(--dui-spc-32); + font-size: var(--dui-font-size); } .dui.dui-font-size-36 { --dui-font-size: var(--dui-spc-36); - font-size: var(--dui-spc-36); + font-size: var(--dui-font-size); } .dui.dui-font-size-40 { --dui-font-size: var(--dui-spc-40); - font-size: var(--dui-spc-40); + font-size: var(--dui-font-size); } .dui.dui-font-size-44 { --dui-font-size: var(--dui-spc-44); - font-size: var(--dui-spc-44); + font-size: var(--dui-font-size); } .dui.dui-font-size-48 { --dui-font-size: var(--dui-spc-48); - font-size: var(--dui-spc-48); + font-size: var(--dui-font-size); } .dui.dui-font-size-52 { --dui-font-size: var(--dui-spc-52); - font-size: var(--dui-spc-52); + font-size: var(--dui-font-size); } .dui.dui-font-size-56 { --dui-font-size: var(--dui-spc-56); - font-size: var(--dui-spc-56); + font-size: var(--dui-font-size); } .dui.dui-font-size-60 { --dui-font-size: var(--dui-spc-60); - font-size: var(--dui-spc-60); + font-size: var(--dui-font-size); } .dui.dui-font-size-64 { --dui-font-size: var(--dui-spc-64); - font-size: var(--dui-spc-64); + font-size: var(--dui-font-size); } .dui.dui-font-size-72 { --dui-font-size: var(--dui-spc-72); - font-size: var(--dui-spc-72); + font-size: var(--dui-font-size); } .dui.dui-font-size-80 { --dui-font-size: var(--dui-spc-80); - font-size: var(--dui-spc-80); + font-size: var(--dui-font-size); } .dui.dui-font-size-96 { --dui-font-size: var(--dui-spc-96); - font-size: var(--dui-spc-96); + font-size: var(--dui-font-size); } .dui.dui-font-size-1_2p { --dui-font-size: var(--dui-spc-1_2p); - font-size: var(--dui-spc-1_2p); + font-size: var(--dui-font-size); } .dui.dui-font-size-1_3p { --dui-font-size: var(--dui-spc-1_3p); - font-size: var(--dui-spc-1_3p); + font-size: var(--dui-font-size); } .dui.dui-font-size-2_3p { --dui-font-size: var(--dui-spc-2_3p); - font-size: var(--dui-spc-2_3p); + font-size: var(--dui-font-size); } .dui.dui-font-size-1_4p { --dui-font-size: var(--dui-spc-1_4p); - font-size: var(--dui-spc-1_4p); + font-size: var(--dui-font-size); } .dui.dui-font-size-3_4p { --dui-font-size: var(--dui-spc-3_4p); - font-size: var(--dui-spc-3_4p); + font-size: var(--dui-font-size); } .dui.dui-font-size-full { --dui-font-size: var(--dui-spc-full); - font-size: var(--dui-spc-full); + font-size: var(--dui-font-size); } \ No newline at end of file