Skip to content

Commit d311152

Browse files
vegegokuvegegoku
committed
fix #968 Slider bubble cuts off text
1 parent 7756618 commit d311152

File tree

8 files changed

+189
-55
lines changed

8 files changed

+189
-55
lines changed

‎domino-ui/src/main/java/org/dominokit/domino/ui/config/SlidersConfig.java

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/*
2+
* Copyright © 2019 Dominokit
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package org.dominokit.domino.ui.config;
17+
18+
import org.dominokit.domino.ui.sliders.SliderStyles;
19+
import org.dominokit.domino.ui.style.CssClass;
20+
21+
public interface SlidersConfig extends ComponentConfig {
22+
23+
/**
24+
* @return the default sliders thumb style, one of {@link SliderStyles#dui_slider_thumb_rounded}
25+
* or {@link SliderStyles#dui_slider_thumb_flat}
26+
*/
27+
default CssClass getDefaultSliderThumbStyle() {
28+
return SliderStyles.dui_slider_thumb_rounded;
29+
}
30+
}

‎domino-ui/src/main/java/org/dominokit/domino/ui/config/UIConfig.java

+2-1
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,5 @@ public interface UIConfig
3333
DelayedActionConfig,
3434
DatatableConfig,
3535
CarouselConfig,
36-
RichTextConfig {}
36+
RichTextConfig,
37+
SlidersConfig {}

‎domino-ui/src/main/java/org/dominokit/domino/ui/sliders/Slider.java

+16-1
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,10 @@
3535
import org.dominokit.domino.ui.elements.SpanElement;
3636
import org.dominokit.domino.ui.events.EventOptions;
3737
import org.dominokit.domino.ui.events.EventType;
38+
import org.dominokit.domino.ui.style.SwapCssClass;
3839
import org.dominokit.domino.ui.utils.BaseDominoElement;
3940
import org.dominokit.domino.ui.utils.ChildHandler;
41+
import org.dominokit.domino.ui.utils.DominoUIConfig;
4042
import org.dominokit.domino.ui.utils.HasChangeListeners;
4143

4244
/**
@@ -66,6 +68,8 @@ public class Slider extends BaseDominoElement<HTMLDivElement, Slider>
6668
private boolean mouseDown;
6769
private boolean withThumb;
6870
private boolean changeListenersPaused;
71+
private SwapCssClass dui_thumb_style =
72+
SwapCssClass.of(DominoUIConfig.CONFIG.getUIConfig().getDefaultSliderThumbStyle());
6973

7074
/**
7175
* Creates a slider with a specified maximum value.
@@ -110,7 +114,7 @@ public static Slider create(double max, double min, double value) {
110114
public Slider(double max, double min, double value) {
111115
root =
112116
div()
113-
.addCss(dui_slider)
117+
.addCss(dui_slider, dui_thumb_style)
114118
.appendChild(
115119
input = input("range").addCss(dui_slider_input).setAttribute("step", "any"))
116120
.appendChild(
@@ -449,6 +453,17 @@ public boolean hasChangeListener(ChangeListener<? super Double> changeListener)
449453
return changeListeners.contains(changeListener);
450454
}
451455

456+
/**
457+
* Changes the thumb style for this slider
458+
*
459+
* @param thumbStyle {@link ThumbStyle}
460+
* @return same slider instance
461+
*/
462+
public Slider setThumbStyle(ThumbStyle thumbStyle) {
463+
this.addCss(dui_thumb_style.replaceWith(thumbStyle.getThumbStyle()));
464+
return this;
465+
}
466+
452467
/**
453468
* A functional interface to handle slider slide events.
454469
*

‎domino-ui/src/main/java/org/dominokit/domino/ui/sliders/SliderStyles.java

+2
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,6 @@ public interface SliderStyles {
2222
CssClass dui_slider_input = () -> "dui-slider-input";
2323
CssClass dui_slider_thumb = () -> "dui-slider-thumb";
2424
CssClass dui_slider_value = () -> "dui-slider-value";
25+
CssClass dui_slider_thumb_rounded = () -> "dui-slider-thumb-rounded";
26+
CssClass dui_slider_thumb_flat = () -> "dui-slider-thumb-flat";
2527
}

‎domino-ui/src/main/java/org/dominokit/domino/ui/sliders/ThumbStyle.java

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
* Copyright © 2019 Dominokit
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
package org.dominokit.domino.ui.sliders;
17+
18+
import org.dominokit.domino.ui.style.CssClass;
19+
20+
public enum ThumbStyle {
21+
ROUNDED(SliderStyles.dui_slider_thumb_rounded),
22+
FLAT(SliderStyles.dui_slider_thumb_flat);
23+
24+
private final CssClass thumbStyle;
25+
26+
ThumbStyle(CssClass thumbStyle) {
27+
this.thumbStyle = thumbStyle;
28+
}
29+
30+
public CssClass getThumbStyle() {
31+
return thumbStyle;
32+
}
33+
}

‎domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css

+3-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
transition: var(--dui-btn-transition);
2323
background-color: var(--dui-btn-bg-clr, var(--dui-accent, buttonface));
2424
--dui-btn-bg: var(--dui-bg, var(--dui-accent, buttonface));
25-
color: var(--dui-clr-white);
25+
color: var(--dui-btn-fg-clr, var(--dui-clr-white));
2626
text-decoration: none;
2727
width: fit-content;
2828
--dui-btn-text-height:28px;
@@ -81,10 +81,12 @@ fieldset[disabled] .dui-btn {
8181

8282
.dui.dui-btn.dui-ctx {
8383
--dui-btn-bg-clr: var(--dui-bg);
84+
--dui-btn-fg-clr: var(--dui-clr-white);
8485
--dui-btn-hover-bg-clr: var(--dui-bg-l-4);
8586
}
8687
.dui-btn-group.dui-ctx {
8788
--dui-btn-bg-clr: var(--dui-bg);
89+
--dui-btn-fg-clr: var(--dui-clr-white);
8890
--dui-btn-hover-bg-clr: var(--dui-bg-l-4);
8991
}
9092
.dui-btn-group .dui-btn:hover,

‎domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-sliders.css

+59-8
Original file line numberDiff line numberDiff line change
@@ -121,29 +121,80 @@
121121
background-color: var(--dui-slider-thumb-background, var(--dui-accent-l-1));
122122
position: absolute;
123123
border: var(--dui-slider-thumb-border);
124-
transform-origin: var(--dui-slider-thumb-transform-origin);
125-
transform: var(--dui-slider-thumb-transform);
126-
border-radius: var(--dui-slider-thumb-value-radius);
127124
height: var(--dui-slider-thumb-value-height);
128-
width: var(--dui-slider-thumb-value-width);
129125
top: var(--dui-slider-thumb-value-top);
130126
margin: var(--dui-slider-thumb-value-margin);
131127
-webkit-transition: var(--dui-slider-thumb-transition);
132128
transition: var(--dui-slider-thumb-transition);
133129
transition-property: var(--dui-slider-thumb-property);
130+
transform-origin: var(--dui-slider-thumb-transform-origin);
131+
transform: var(--dui-slider-thumb-transform);
132+
border-radius: var(--dui-slider-thumb-value-radius);
133+
width: var(--dui-slider-thumb-value-width);
134134
}
135135

136136
.dui-slider-value {
137137
display: block;
138+
text-align: center;
139+
color: var(--dui-slider-thumb-value-color);
140+
padding: var(--dui-slider-thumb-value-padding);
141+
font: var(--dui-font-regular-sm);
142+
}
143+
144+
.dui-slider.dui-slider-thumb-rounded {
145+
--dui-slider-thumb-transform: translate(-9px, 9px) rotate(-45deg);
146+
--dui-slider-thumb-transform-origin: 50% 50%;
147+
--dui-slider-thumb-value-transform: rotate(45deg);
148+
149+
--dui-slider-thumb-value-padding: 5px 0 0 0;
150+
--dui-slider-thumb-text-indent: 6px;
151+
--dui-slider-thumb-value-height: 30px;
152+
--dui-slider-thumb-radius: 25px;
153+
--dui-slider-thumb-value-radius: 50% 50% 50% 0;
154+
}
155+
156+
.dui-slider.dui-slider-thumb-flat {
157+
--dui-slider-thumb-transform: translate(-4px, 9px);
158+
--dui-slider-thumb-transform-origin: 50% 50%;
159+
--dui-slider-thumb-value-transform: none;
160+
161+
--dui-slider-thumb-value-padding: var(--dui-spc-1);
162+
--dui-slider-thumb-text-indent: 0;
163+
--dui-slider-thumb-value-height: auto;
164+
--dui-slider-thumb-radius: 25px;
165+
--dui-slider-thumb-value-radius: 2px;
166+
}
167+
168+
.dui-slider.dui-slider-thumb-rounded .dui-slider-value {
169+
transform: var(--dui-slider-thumb-value-transform);
170+
text-indent: var(--dui-slider-thumb-text-indent);
138171
width: var(--dui-slider-thumb-value-width);
139172
overflow-x: hidden;
140173
white-space: nowrap;
141174
text-overflow: ellipsis;
175+
}
176+
177+
.dui-slider.dui-slider-thumb-flat .dui-slider-thumb:after {
178+
content: '';
179+
position: absolute;
180+
left: 2px;
181+
top: 20px;
182+
width: 0;
183+
height: 0;
184+
border-left: 10px solid transparent;
185+
border-right: 10px solid transparent;
186+
border-top: 16px solid var(--dui-slider-thumb-background, var(--dui-accent-l-1));
187+
clear: both;
188+
}
189+
190+
.dui-slider.dui-slider-thumb-flat .dui-slider-thumb {
191+
width: fit-content;
142192
text-align: center;
193+
line-height: 100%;
194+
min-width: 24px;
195+
}
196+
197+
.dui-slider.dui-slider-thumb-flat .dui-slider-value {
143198
transform: var(--dui-slider-thumb-value-transform);
144-
color: var(--dui-slider-thumb-value-color);
145199
text-indent: var(--dui-slider-thumb-text-indent);
146-
padding: var(--dui-slider-thumb-value-padding);
147-
font: var(--dui-font-regular-sm);
148200
}
149-

0 commit comments

Comments
 (0)