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 progressHeight;
// intentionally ignore background radius in calculation,
// because slider looks better this way
if (getSkinnable().getOrientation() == Orientation.HORIZONTAL) {
progressY = track.getLayoutY();
progressWidth = thumb.getLayoutX() - snappedLeftInset();
progressWidth = thumb.getLayoutX() - track.getLayoutX()
+ thumb.getLayoutBounds().getCenterX() - snappedLeftInset();
progressHeight = track.getHeight();
} else {
progressY = thumb.getLayoutY();
progressY = thumb.getLayoutY() + thumb.getLayoutBounds().getCenterY();
progressWidth = track.getWidth();
progressHeight =
track.getLayoutBounds().getMaxY() + track.getLayoutY() - thumb.getLayoutY() - snappedBottomInset();
progressHeight = track.getLayoutBounds().getMaxY() + track.getLayoutY()
- thumb.getLayoutY() - thumb.getLayoutBounds().getCenterY() - snappedBottomInset();
}
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() {
var slider = new Slider(0, 5, 3);
var slider = new Slider(1, 5, 3);
slider.setShowTickLabels(true);
slider.setShowTickMarks(true);
slider.setMajorTickUnit(1);

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

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