yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix umb-range-slider merging overlapping tooltips (#12777)

Browse Source 
* Formatting CSS using Less syntax

* Fix merging overlapping tooltips from noUiSlider v15.5.0+
This commit is contained in:
Bjarne Fyrstenborg
2022-08-19 15:03:56 +02:00
committed by GitHub
parent 56e282946f
commit 1024b26cec
2 changed files with 60 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
View File

@@ -249,15 +249,15 @@ For extra details about options and events take a look here: https://refreshless
var isVertical = slider.noUiSlider.options.orientation === 'vertical';
var tooltips = slider.noUiSlider.getTooltips();
var origins = slider.noUiSlider.getOrigins();
// Move tooltips into the origin element. The default stylesheet handles this.
if(tooltips && tooltips.length !== 0){
tooltips.forEach(function (tooltip, index) {
if (tooltip) {
origins[index].appendChild(tooltip);
}
});
}
if(tooltips && tooltips.length !== 0){
tooltips.forEach(function (tooltip, index) {
if (tooltip) {
origins[index].appendChild(tooltip);
}
});
}
slider.noUiSlider.on('update', function (values, handle, unencoded, tap, positions) {
@@ -293,17 +293,17 @@ For extra details about options and events take a look here: https://refreshless
for (var j = 0; j < handlesInPool; j++) {
var handleNumber = pool[j];
if (j === handlesInPool - 1) {
var offset = 0;
poolPositions[poolIndex].forEach(function (value) {
offset += 1000 - 10 * value;
offset += 1000 - value;
});
var direction = isVertical ? 'bottom' : 'right';
var last = isRtl ? 0 : handlesInPool - 1;
var lastOffset = 1000 - 10 * poolPositions[poolIndex][last];
var lastOffset = 1000 - poolPositions[poolIndex][last];
offset = (textIsRtl && !isVertical ? 100 : 0) + (offset / handlesInPool) - lastOffset;
// Filter to unique values

92
src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less
View File

@@ -1,56 +1,58 @@
.umb-range-slider {
&.noUi-target {
background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
box-shadow: none;
border-radius: 20px;
height: 8px;
border: 1px solid @inputBorder;
.umb-range-slider.noUi-target {
background: linear-gradient(to bottom, @grayLighter 0%, @grayLighter 100%);
box-shadow: none;
border-radius: 20px;
height: 8px;
border: 1px solid @inputBorder;
&:focus, &:focus-within {
border-color: @inputBorderFocus;
&:focus, &:focus-within {
border-color: @inputBorderFocus;
}
}
}
.umb-range-slider .noUi-connects {
cursor: pointer;
height: 20px;
top: -6px;
}
.umb-range-slider .noUi-connect {
background-color: @purple-washed;
border: 1px solid @purple-l3;
}
.umb-range-slider .noUi-tooltip {
padding: 2px 6px;
}
.umb-range-slider .noUi-handle {
cursor: grab;
border-radius: 100px;
border: none;
box-shadow: none;
width: 20px !important;
height: 20px !important;
right: -10px !important; // half the handle width
background-color: @blueExtraDark;
}
.umb-range-slider .noUi-horizontal .noUi-handle {
top: -7px;
}
.noUi-connects {
cursor: pointer;
height: 20px;
top: -6px;
}
.umb-range-slider .noUi-handle::before {
display: none;
}
.noUi-connect {
background-color: @purple-washed;
border: 1px solid @purple-l3;
}
.umb-range-slider .noUi-handle::after {
display: none;
}
.noUi-tooltip {
padding: 2px 6px;
}
.umb-range-slider .noUi-marker-large.noUi-marker-horizontal {
height: 10px;
}
.noUi-handle {
cursor: grab;
border-radius: 100px;
border: none;
box-shadow: none;
width: 20px !important;
height: 20px !important;
right: -10px !important; // half the handle width
background-color: @blueExtraDark;
.umb-range-slider .noUi-marker.noUi-marker-horizontal {
width: 1px;
&::before, &::after {
display: none;
}
}
.noUi-horizontal .noUi-handle {
top: -7px;
}
.noUi-marker-large.noUi-marker-horizontal {
height: 10px;
}
.noUi-marker.noUi-marker-horizontal {
width: 1px;
}
}
.noUi-value {