Skip to content

Commit

Permalink
fix #968 Slider bubble cuts off text
Browse files Browse the repository at this point in the history
  • Loading branch information
vegegoku committed Oct 14, 2024
1 parent 7756618 commit d311152
Show file tree
Hide file tree
Showing 8 changed files with 189 additions and 55 deletions.
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -33,4 +33,5 @@ public interface UIConfig
DelayedActionConfig,
DatatableConfig,
CarouselConfig,
RichTextConfig {}
RichTextConfig,
SlidersConfig {}
Original file line number Diff line number Diff line change
Expand Up @@ -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;

/**
Expand Down Expand Up @@ -66,6 +68,8 @@ public class Slider extends BaseDominoElement<HTMLDivElement, Slider>
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.
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -449,6 +453,17 @@ public boolean hasChangeListener(ChangeListener<? super Double> 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.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Loading

0 comments on commit d311152

Please sign in to comment.