tablet/atlantafx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix slider progress calc

Browse Source
This commit is contained in:
mkpaz 2023-02-23 13:03:56 +04:00
parent 3035a00c08
commit dca4d7c21e
3 changed files with 77 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
base/src/main/java/atlantafx/base/controls/ProgressSliderSkin.java
View File

@ -39,17 +39,16 @@ public class ProgressSliderSkin extends SliderSkin {
double progressWidth; double progressWidth;
double progressHeight; double progressHeight;
// intentionally ignore background radius in calculation,
// because slider looks better this way
if (getSkinnable().getOrientation() == Orientation.HORIZONTAL) { if (getSkinnable().getOrientation() == Orientation.HORIZONTAL) {
progressY = track.getLayoutY(); progressY = track.getLayoutY();
progressWidth = thumb.getLayoutX() - snappedLeftInset(); progressWidth = thumb.getLayoutX() - track.getLayoutX()
+ thumb.getLayoutBounds().getCenterX() - snappedLeftInset();
progressHeight = track.getHeight(); progressHeight = track.getHeight();
} else { } else {
progressY = thumb.getLayoutY(); progressY = thumb.getLayoutY() + thumb.getLayoutBounds().getCenterY();
progressWidth = track.getWidth(); progressWidth = track.getWidth();
progressHeight = progressHeight = track.getLayoutBounds().getMaxY() + track.getLayoutY()
track.getLayoutBounds().getMaxY() + track.getLayoutY() - thumb.getLayoutY() - snappedBottomInset(); - thumb.getLayoutY() - thumb.getLayoutBounds().getCenterY() - snappedBottomInset();
} }
progressTrack.resizeRelocate(progressX, progressY, progressWidth, progressHeight); progressTrack.resizeRelocate(progressX, progressY, progressWidth, progressHeight);

2
sampler/src/main/java/atlantafx/sampler/page/components/SliderPage.java
View File

@ -113,7 +113,7 @@ public class SliderPage extends AbstractPage {
} }
private Slider createTickSlider() { private Slider createTickSlider() {
var slider = new Slider(0, 5, 3); var slider = new Slider(1, 5, 3);
slider.setShowTickLabels(true); slider.setShowTickLabels(true);
slider.setShowTickMarks(true); slider.setShowTickMarks(true);
slider.setMajorTickUnit(1); slider.setMajorTickUnit(1);

113
styles/src/components/_slider.scss
View File

@ -20,7 +20,7 @@ $thumb-size: (
"large-w" : 12px "large-w" : 12px
) !default; ) !default;
$thumb-radius: 10em !default; $thumb-radius: 50px !default;
$thumb-border-width: 2px !default; $thumb-border-width: 2px !default;
$thumb-effect: none !default; $thumb-effect: none !default;
$thumb-effect-large: none !default; $thumb-effect-large: none !default;
@ -62,11 +62,7 @@ $tick-minor-size: 3px !default;
-fx-background-radius: $track-radius; -fx-background-radius: $track-radius;
} }
>.progress { // there's slightly noticeable difference between axis length and track length,
-fx-background-color: transparent, -color-slider-track-progress;
}
// there's slightly noticable difference between axis length and track length,
// because SliderSkin ignores track radius in layoutChildren() // because SliderSkin ignores track radius in layoutChildren()
>.axis { >.axis {
-fx-tick-label-fill: -color-slider-tick; -fx-tick-label-fill: -color-slider-tick;
@ -90,41 +86,32 @@ $tick-minor-size: 3px !default;
// center thumb over track horizontally // center thumb over track horizontally
&:horizontal { &:horizontal {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w"); -fx-padding: map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w")
map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w");
} }
>.track { >.track {
-fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0; -fx-padding: map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0; calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
-fx-background-radius: $track-radius 0 0 $track-radius;
}
>.progress {
-fx-background-radius: $track-radius;
-fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
-fx-background-radius: $track-radius 0 0 $track-radius;
} }
} }
&.small:horizontal { &.small:horizontal {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w"); -fx-padding: map-get($thumb-size, "small-h") map-get($thumb-size, "small-w")
map-get($thumb-size, "small-h") map-get($thumb-size, "small-w");
} }
>.track { >.track {
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0; -fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0; calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
} }
>.progress {
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
}
} }
&.large:horizontal { &.large:horizontal {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "smlargeall-w"); -fx-padding: map-get($thumb-size, "large-h") map-get($thumb-size, "large-w")
map-get($thumb-size, "large-h") map-get($thumb-size, "large-w");
-fx-effect: $thumb-effect-large; -fx-effect: $thumb-effect-large;
} }
>.track { >.track {
@ -132,11 +119,6 @@ $tick-minor-size: 3px !default;
-fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0 -fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0; calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
} }
>.progress {
-fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
}
} }
///////////////////////////////////////////////////////// /////////////////////////////////////////////////////////
@ -146,49 +128,96 @@ $tick-minor-size: 3px !default;
// center thumb over track vertically // center thumb over track vertically
&:vertical { &:vertical {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h") map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h"); -fx-padding: map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h")
map-get($thumb-size, "medium-w") map-get($thumb-size, "medium-h");
} }
>.track { >.track {
-fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h"); -fx-padding: 0 map-get($thumb-size, "medium-h") 0 map-get($thumb-size, "medium-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")); 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
} }
>.progress {
-fx-background-radius: $thumb-radius $thumb-radius $track-radius $track-radius;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
}
} }
&.small:vertical { &.small:vertical {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h") map-get($thumb-size, "small-w") map-get($thumb-size, "small-h"); -fx-padding: map-get($thumb-size, "small-w") map-get($thumb-size, "small-h")
map-get($thumb-size, "small-w") map-get($thumb-size, "small-h");
} }
>.track { >.track {
-fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h"); -fx-padding: 0 map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")); 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
} }
>.progress {
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
}
} }
&.large:vertical { &.large:vertical {
>.thumb { >.thumb {
-fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h") map-get($thumb-size, "large-w") map-get($thumb-size, "large-h"); -fx-padding: map-get($thumb-size, "large-w") map-get($thumb-size, "large-h")
map-get($thumb-size, "large-w") map-get($thumb-size, "large-h");
} }
>.track { >.track {
-fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h"); -fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) -fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")); 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
} }
}
/////////////////////////////////////////////////////////
// Progress //
/////////////////////////////////////////////////////////
&.progress-slider {
>.progress { >.progress {
-fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h"); -fx-background-color: transparent, -color-slider-track-progress;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) }
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
&:horizontal {
>.progress {
-fx-background-insets: 0, calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0
calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium")) 0;
-fx-background-radius: $track-radius 0 0 $track-radius;
}
}
&.small:horizontal {
>.progress {
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0
calc(map-get($thumb-size, "small-h") - map-get($track-size, "small")) 0;
}
}
&.large:horizontal {
>.progress {
-fx-padding: map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h") 0;
-fx-background-insets: 0, calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0
calc(map-get($thumb-size, "large-h") - map-get($track-size, "large")) 0;
}
}
&:vertical {
>.progress {
-fx-background-radius: 0 0 $track-radius $track-radius;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"))
0 calc(map-get($thumb-size, "medium-h") - map-get($track-size, "medium"));
}
}
&.small:vertical {
>.progress {
-fx-padding: map-get($thumb-size, "small-h") 0 map-get($thumb-size, "small-h") 0;
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"))
0 calc(map-get($thumb-size, "small-h") - map-get($track-size, "small"));
}
}
&.large:vertical {
>.progress {
-fx-padding: 0 map-get($thumb-size, "large-h") 0 map-get($thumb-size, "large-h");
-fx-background-insets: 0, 0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"))
0 calc(map-get($thumb-size, "large-h") - map-get($track-size, "large"));
}
} }
} }
} }