language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-08-03 18:29:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

visual clamp slider (#5967)

Browse source
This commit is contained in:
FloVanGH 2024-08-28 10:41:24 +00:00 • committed by GitHub
parent 35de15ce4b
commit 5b8f68f43b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 125 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

4
internal/compiler/widgets/cosmic/slider.slint
View file

@ -50,8 +50,8 @@ export component Slider {
}
thumb := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
y: base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
width: 20px;
height: self.width;
border-radius: 10px;

64
internal/compiler/widgets/cupertino/slider.slint
View file

@ -5,39 +5,39 @@ import { CupertinoPalette } from "styling.slint";
import { SliderBase } from "../common/slider-base.slint";
export component Slider {
in property <Orientation> orientation <=> i-base.orientation;
in property <float> maximum <=> i-base.maximum;
in property <float> minimum <=> i-base.minimum;
in property <bool> enabled <=> i-base.enabled;
out property <bool> has-focus <=> i-base.has-focus;
in-out property <float> value <=> i-base.value;
in property <Orientation> orientation <=> base.orientation;
in property <float> maximum <=> base.maximum;
in property <float> minimum <=> base.minimum;
in property <bool> enabled <=> base.enabled;
out property <bool> has-focus <=> base.has-focus;
in-out property <float> value <=> base.value;
callback changed <=> i-base.changed;
callback released <=> i-base.released;
callback changed <=> base.changed;
callback released <=> base.released;
min-width: i-base.vertical ? 20px : 0px;
min-height: i-base.vertical ? 0px : 20px;
vertical-stretch: i-base.vertical ? 1 : 0;
horizontal-stretch: i-base.vertical ? 0 : 1;
min-width: base.vertical ? 20px : 0px;
min-height: base.vertical ? 0px : 20px;
vertical-stretch: base.vertical ? 1 : 0;
horizontal-stretch: base.vertical ? 0 : 1;
accessible-role: slider;
accessible-value: root.value;
accessible-value-minimum: root.minimum;
accessible-value-maximum: root.maximum;
accessible-value-step: (root.maximum - root.minimum) / 100;
forward-focus: i-base;
forward-focus: base;
states [
disabled when !root.enabled : {
root.opacity: 0.5;
}
pressed when i-base.handle-pressed || root.has-focus : {
i-thumb.background: CupertinoPalette.pressed;
pressed when base.handle-pressed || root.has-focus : {
thumb.background: CupertinoPalette.pressed;
}
]
i-rail := Rectangle {
width: i-base.vertical ? 4px : parent.width;
height: i-base.vertical ? parent.height : 4px;
rail := Rectangle {
width: base.vertical ? 4px : parent.width;
height: base.vertical ? parent.height : 4px;
background: CupertinoPalette.alternate-control-background;
border-radius: 2px;
@ -48,18 +48,18 @@ export component Slider {
}
}
i-track := Rectangle {
x: i-base.vertical ? (parent.width - self.width) / 2 : 0;
y: i-base.vertical ? 0 : (parent.height - self.height) / 2;
width: i-base.vertical ? i-rail.width : i-thumb.x + (i-thumb.width / 2);
height: i-base.vertical ? i-thumb.y + (i-thumb.height / 2) : i-rail.height;
track := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : 0;
y: base.vertical ? 0 : (parent.height - self.height) / 2;
width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
background: CupertinoPalette.accent-background;
border-radius: i-rail.border-radius;
border-radius: rail.border-radius;
}
i-thumb := Rectangle {
x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
thumb := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
width: 20px;
height: self.width;
border-radius: 10px;
@ -71,12 +71,12 @@ export component Slider {
animate background { duration: 150ms; easing: linear; }
}
i-base := SliderBase {
base := SliderBase {
width: 100%;
height: 100%;
handle-x: i-thumb.x;
handle-y: i-thumb.y;
handle-width: i-thumb.width;
handle-height: i-thumb.height;
handle-x: thumb.x;
handle-y: thumb.y;
handle-width: thumb.width;
handle-height: thumb.height;
}
}

84
internal/compiler/widgets/fluent/slider.slint
View file

@ -5,69 +5,69 @@ import { FluentPalette } from "styling.slint";
import { SliderBase } from "../common/slider-base.slint";
export component Slider {
in property <Orientation> orientation <=> i-base.orientation;
in property <float> maximum <=> i-base.maximum;
in property <float> minimum <=> i-base.minimum;
in property <bool> enabled <=> i-base.enabled;
out property <bool> has-focus: i-base.has-focus;
in-out property <float> value <=> i-base.value;
in property <Orientation> orientation <=> base.orientation;
in property <float> maximum <=> base.maximum;
in property <float> minimum <=> base.minimum;
in property <bool> enabled <=> base.enabled;
out property <bool> has-focus: base.has-focus;
in-out property <float> value <=> base.value;
callback changed <=> i-base.changed;
callback released <=> i-base.released;
callback changed <=> base.changed;
callback released <=> base.released;
min-width: i-base.vertical ? 20px : 0px;
min-height: i-base.vertical ? 0px : 20px;
vertical-stretch: i-base.vertical ? 1 : 0;
horizontal-stretch: i-base.vertical ? 0 : 1;
min-width: base.vertical ? 20px : 0px;
min-height: base.vertical ? 0px : 20px;
vertical-stretch: base.vertical ? 1 : 0;
horizontal-stretch: base.vertical ? 0 : 1;
accessible-role: slider;
accessible-value: root.value;
accessible-value-minimum: root.minimum;
accessible-value-maximum: root.maximum;
accessible-value-step: (root.maximum - root.minimum) / 100;
forward-focus: i-base;
forward-focus: base;
states [
disabled when !root.enabled : {
i-track.background: FluentPalette.accent-disabled;
i-rail.background: FluentPalette.accent-disabled;
i-thumb-inner.background: FluentPalette.accent-disabled;
track.background: FluentPalette.accent-disabled;
rail.background: FluentPalette.accent-disabled;
thumb-inner.background: FluentPalette.accent-disabled;
}
pressed when i-base.handle-pressed || i-base.has-focus : {
i-thumb-inner.width: 10px;
i-thumb-inner.background: FluentPalette.tertiary-accent-background;
i-thumb.border-color: FluentPalette.border;
pressed when base.handle-pressed || base.has-focus : {
thumb-inner.width: 10px;
thumb-inner.background: FluentPalette.tertiary-accent-background;
thumb.border-color: FluentPalette.border;
}
hover when i-base.has-hover : {
i-thumb-inner.width: 14px;
i-thumb-inner.background: FluentPalette.secondary-accent-background;
hover when base.has-hover : {
thumb-inner.width: 14px;
thumb-inner.background: FluentPalette.secondary-accent-background;
}
]
i-rail := Rectangle {
width: i-base.vertical ? 4px : parent.width;
height: i-base.vertical ? parent.height : 4px;
rail := Rectangle {
width: base.vertical ? 4px : parent.width;
height: base.vertical ? parent.height : 4px;
background: FluentPalette.border;
border-radius: 2px;
}
i-track := Rectangle {
x: i-base.vertical ? (parent.width - self.width) / 2 : 0;
y: i-base.vertical ? 0 : (parent.height - self.height) / 2;
width: i-base.vertical ? i-rail.width : i-thumb.x + (i-thumb.width / 2);
height: i-base.vertical ? i-thumb.y + (i-thumb.height / 2) : i-rail.height;
track := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : 0;
y: base.vertical ? 0 : (parent.height - self.height) / 2;
width: base.vertical ? rail.width : thumb.x + (thumb.width / 2);
height: base.vertical ? thumb.y + (thumb.height / 2) : rail.height;
background: FluentPalette.accent-background;
border-radius: i-rail.border-radius;
border-radius: rail.border-radius;
}
i-thumb := Rectangle {
x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
y: i-base.vertical ? (parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
thumb := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
width: 20px;
height: self.width;
border-radius: 10px;
background: FluentPalette.control-solid;
i-thumb-border := Rectangle {
thumb-border := Rectangle {
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: 21px;
@ -77,7 +77,7 @@ export component Slider {
border-color: FluentPalette.circle-border;
}
i-thumb-inner := Rectangle {
thumb-inner := Rectangle {
width: 12px;
height: self.width;
border-radius: self.width / 2;
@ -87,12 +87,12 @@ export component Slider {
}
}
i-base := SliderBase {
base := SliderBase {
width: 100%;
height: 100%;
handle-x: i-thumb.x;
handle-y: i-thumb.y;
handle-width: i-thumb.width;
handle-height: i-thumb.height;
handle-x: thumb.x;
handle-y: thumb.y;
handle-width: thumb.width;
handle-height: thumb.height;
}
}

86
internal/compiler/widgets/material/slider.slint
View file

@ -7,67 +7,67 @@ import { SliderBase } from "../common/slider-base.slint";
// Allows to select a value from a range of values.
export component Slider {
in property <Orientation> orientation <=> i-base.orientation;
in property <float> maximum <=> i-base.maximum;
in property <bool> enabled <=> i-base.enabled;
in property <float> minimum <=> i-base.minimum;
out property <bool> has-focus <=> i-base.has-focus;
in-out property <float> value <=> i-base.value;
in property <Orientation> orientation <=> base.orientation;
in property <float> maximum <=> base.maximum;
in property <bool> enabled <=> base.enabled;
in property <float> minimum <=> base.minimum;
out property <bool> has-focus <=> base.has-focus;
in-out property <float> value <=> base.value;
callback changed <=> i-base.changed;
callback released <=> i-base.released;
callback changed <=> base.changed;
callback released <=> base.released;
min-width: i-base.vertical ? 20px : 0px;
min-height: i-base.vertical ? 0px : 20px;
min-width: base.vertical ? 20px : 0px;
min-height: base.vertical ? 0px : 20px;
accessible-role: slider;
accessible-value: root.value;
accessible-value-minimum: root.minimum;
accessible-value-maximum: root.maximum;
accessible-value-step: (root.maximum - root.minimum) / 100;
forward-focus: i-base;
forward-focus: base;
states [
disabled when !root.enabled : {
i-handle.background: MaterialPalette.control-foreground;
i-handle.drop-shadow-blur: Elevation.level0;
i-track.background: MaterialPalette.control-foreground;
i-background.background: MaterialPalette.control-foreground;
handle.background: MaterialPalette.control-foreground;
handle.drop-shadow-blur: Elevation.level0;
track.background: MaterialPalette.control-foreground;
background.background: MaterialPalette.control-foreground;
root.opacity: 0.38;
}
pressed when i-base.handle-pressed || i-base.has-focus : {
i-state-layer.opacity: 0.12;
i-handle.drop-shadow-blur: Elevation.level0;
pressed when base.handle-pressed || base.has-focus : {
state-layer.opacity: 0.12;
handle.drop-shadow-blur: Elevation.level0;
}
hover when i-base.has-hover : {
i-state-layer.background: MaterialPalette.control-foreground;
i-state-layer.opacity: 0.08;
hover when base.has-hover : {
state-layer.background: MaterialPalette.control-foreground;
state-layer.opacity: 0.08;
}
]
i-background := Rectangle {
background := Rectangle {
background: MaterialPalette.control-background-variant;
opacity: 0.38;
x: (parent.width - self.width) / 2;
y: (parent.height - self.height) / 2;
width: i-base.vertical ? 4px : parent.width;
height: i-base.vertical ? parent.height : 4px;
width: base.vertical ? 4px : parent.width;
height: base.vertical ? parent.height : 4px;
border-radius: 2px;
}
i-track := Rectangle {
track := Rectangle {
background: MaterialPalette.accent-background;
x: i-base.vertical ? (parent.width - self.width) / 2 : i-background.x;
y: i-base.vertical ? i-background.y : (parent.height - self.height) / 2;
width: i-base.vertical? i-background.width : i-handle.x + (i-handle.width / 2);
height: i-base.vertical? i-handle.y + (i-handle.height / 2) : i-background.height;
border-radius: i-background.border-radius;
x: base.vertical ? (parent.width - self.width) / 2 : background.x;
y: base.vertical ? background.y : (parent.height - self.height) / 2;
width: base.vertical? background.width : handle.x + (handle.width / 2);
height: base.vertical? handle.y + (handle.height / 2) : background.height;
border-radius: background.border-radius;
}
i-state-layer := Rectangle {
state-layer := Rectangle {
opacity: 0;
background: MaterialPalette.accent-background;
x: i-base.vertical ? (parent.width - self.width) / 2 : i-handle.x - (self.width - i-handle.width) / 2;
y: i-base.vertical ? i-handle.y - (self.height - i-handle.height) / 2 : (parent.height - self.height) / 2;
x: base.vertical ? (parent.width - self.width) / 2 : handle.x - (self.width - handle.width) / 2;
y: base.vertical ? handle.y - (self.height - handle.height) / 2 : (parent.height - self.height) / 2;
width: 40px;
height: 40px;
border-radius: max(self.width, self.height) / 2;
@ -75,12 +75,12 @@ export component Slider {
animate opacity { duration: 250ms; easing: ease; }
}
i-handle := Rectangle {
handle := Rectangle {
x: base.vertical ? (parent.width - self.width) / 2 : clamp((parent.width - self.width) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.width - self.width);
y: base.vertical ? clamp((parent.height - self.height) * (root.value - root.minimum) / (root.maximum - root.minimum), 0, root.height - self.height) : (parent.height - self.height) / 2;
background: MaterialPalette.accent-background;
x: i-base.vertical ? (parent.width - self.width) / 2 : (parent.width - i-handle.width) * (root.value - root.minimum) / (root.maximum - root.minimum);
y: i-base.vertical ? (parent.height - i-handle.height) * (root.value - root.minimum) / (root.maximum - root.minimum) : (parent.height - self.height) / 2;
width: i-base.vertical ? root.width : root.height;
height: i-base.vertical ? root.width : root.height;
width: base.vertical ? root.width : root.height;
height: base.vertical ? root.width : root.height;
border-radius: max(self.width, self.height) / 2;
drop-shadow-color: MaterialPalette.shadow;
drop-shadow-blur: Elevation.level1;
@ -89,12 +89,12 @@ export component Slider {
animate drop-shadow-blur { duration: 250ms; easing: ease; }
}
i-base := SliderBase {
base := SliderBase {
width: 100%;
height: 100%;
handle-x: i-handle.x;
handle-y: i-handle.y;
handle-width: i-handle.width;
handle-height: i-handle.height;
handle-x: handle.x;
handle-y: handle.y;
handle-width: handle.width;
handle-height: handle.height;
}
}