language-servers/slint
1
0
Fork 0
mirror of https://github.com/slint-ui/slint.git synced 2025-10-22 08:12:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Examples: Update fancy-switch with new rotation / scale properties (#9637)

Browse source
This commit is contained in:
Nigel Breslaw 2025-10-06 13:30:33 +02:00 • committed by GitHub
parent a2b4764b05
commit 640d25d53a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 39 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

30
examples/fancy-switches/DarkModeSwitch.slint
View file

@ -3,7 +3,6 @@
component RayThick { component RayThick {
in-out property colorize <=> i.colorize; in-out property colorize <=> i.colorize;
in-out property rotation <=> i.rotation-angle;
width: 0px; width: 0px;
height: 0px; height: 0px;
@ -18,7 +17,6 @@ component RayThick {
component RayThin { component RayThin {
in-out property colorize <=> i.colorize; in-out property colorize <=> i.colorize;
in-out property rotation <=> i.rotation-angle;
width: 0px; width: 0px;
height: 0px; height: 0px;
@ -37,14 +35,13 @@ component SunIcon {
property <length> sun-size: 28px; property <length> sun-size: 28px;
property <length> gap: 8px; property <length> gap: 8px;
in property <brush> color: black; in property <brush> color: black;
in property <float> scale: 1;
width: 80px; width: 80px;
height: self.width; height: self.width;
Rectangle { Rectangle {
width: 0px; width: 0px;
height: 0px; height: 0px;
Rectangle { Rectangle {
width: sun-size * scale; width: sun-size;
height: self.width; height: self.width;
border-radius: self.width / 2; border-radius: self.width / 2;
background: transparent; background: transparent;
@ -52,19 +49,16 @@ component SunIcon {
border-width: 5px; border-width: 5px;
} }
for i in rays: RayThick { for i in rays: RayThick {
property <angle> angle: i * 360deg / rays; x: (sun-size / 2 + gap) * self.rotation-angle.cos();
y: (sun-size / 2 + gap) * self.rotation-angle.sin();
colorize: root.color; colorize: root.color;
x: (sun-size / 2 + gap) * scale * angle.cos(); rotation-angle: i * 360deg / rays;
y: (sun-size / 2 + gap) * scale * angle.sin();
rotation: angle;
} }
for i in rays: RayThin { for i in rays: RayThin {
property <angle> angle: i * (360deg / rays) + 45deg; x: (sun-size / 2 + gap) * self.rotation-angle.cos();
y: (sun-size / 2 + gap) * self.rotation-angle.sin();
colorize: root.color; colorize: root.color;
x: (sun-size / 2 + gap) * angle.cos(); rotation-angle: i * (360deg / rays) + 45deg;
y: (sun-size / 2 + gap) * angle.sin();
rotation: angle;
} }
} }
} }
@ -129,13 +123,14 @@ export component DarkModeSwitch {
frameBacker.background: #2A2A2A; frameBacker.background: #2A2A2A;
moon.rotation-angle: -20deg; moon.rotation-angle: -20deg;
sun.color: #fc7a10; sun.color: #fc7a10;
sun.scale: 0.8; sun.scale-x: 0.8;
sun.scale-y: 0.8;
in { in {
animate thumb.x, thumb.background, frameBacker.background, sun.color { animate thumb.x, thumb.background, frameBacker.background, sun.color {
duration: 200ms; duration: 200ms;
easing: ease-out-sine; easing: ease-out-sine;
} }
animate moon.rotation-angle, sun.scale { animate moon.rotation-angle, sun.scale-x, sun.scale-y {
duration: 1200ms; duration: 1200ms;
easing: ease-out-elastic; easing: ease-out-elastic;
} }
@ -148,13 +143,14 @@ export component DarkModeSwitch {
frameBacker.background: transparent; frameBacker.background: transparent;
moon.rotation-angle: 20deg; moon.rotation-angle: 20deg;
sun.color: #2A2A2A; sun.color: #2A2A2A;
sun.scale: 1; sun.scale-x: 1;
sun.scale-y: 1;
in { in {
animate thumb.x, thumb.background, frameBacker.background, moon.rotation-angle { animate thumb.x, thumb.background, frameBacker.background, moon.rotation-angle {
duration: 200ms; duration: 200ms;
easing: ease-out-sine; easing: ease-out-sine;
} }
animate sun.scale { animate sun.scale-x, sun.scale-y {
duration: 1200ms; duration: 1200ms;
easing: ease-out-elastic; easing: ease-out-elastic;
} }

55
examples/fancy-switches/SunMoonSwitch.slint
View file

@ -7,13 +7,12 @@ global Utils {
} }
} }
component SunMoonThumb { component SunMoonThumb {
in property <float> scale: 1; in property <length> thumb-position: 50px;
in property <length> thumb-position: 50px * scale;
Rectangle { Rectangle {
width: 200px * scale; width: 200px;
height: 100px * scale; height: 100px;
border-radius: self.height / 2; border-radius: self.height / 2;
clip: true; clip: true;
Rectangle { Rectangle {
@ -21,21 +20,21 @@ component SunMoonThumb {
height: 0px; height: 0px;
x: root.thumb-position; x: root.thumb-position;
Rectangle { Rectangle {
width: 260px * scale; width: 260px;
height: self.width; height: self.width;
background: white; background: white;
border-radius: self.width / 2; border-radius: self.width / 2;
opacity: 0.05; opacity: 0.05;
} }
Rectangle { Rectangle {
width: 200px * scale; width: 200px;
height: self.width; height: self.width;
background: white; background: white;
border-radius: self.width / 2; border-radius: self.width / 2;
opacity: 0.05; opacity: 0.05;
} }
Rectangle { Rectangle {
width: 140px * scale; width: 140px;
height: self.width; height: self.width;
background: white; background: white;
border-radius: self.width / 2; border-radius: self.width / 2;
@ -43,21 +42,21 @@ component SunMoonThumb {
} }
clipper :=Rectangle { clipper :=Rectangle {
width: 85px * scale; width: 85px;
height: self.width; height: self.width;
border-radius: self.width / 2; border-radius: self.width / 2;
clip: true; clip: true;
sun := Rectangle { sun := Rectangle {
width: 85px * scale; width: 85px;
height: self.width; height: self.width;
background: @radial-gradient(circle,#ffce08 0%, #fdd224 80%, #fce37f 100%); background: @radial-gradient(circle,#ffce08 0%, #fdd224 80%, #fce37f 100%);
border-radius: self.width / 2; border-radius: self.width / 2;
} }
moon := Rectangle { moon := Rectangle {
x: Utils.MapRange(root.thumb-position, 50px * scale, 100px * scale, 85px * scale, 0px); x: Utils.MapRange(root.thumb-position, 50px, 100px, 85px, 0px);
width: 85px * scale; width: 85px;
height: self.width; height: self.width;
background: @radial-gradient(circle,#bcbcbc 0%, #e7e7e7 80%, #ffffff 100%); background: @radial-gradient(circle,#bcbcbc 0%, #e7e7e7 80%, #ffffff 100%);
border-radius: self.width / 2; border-radius: self.width / 2;
@ -72,9 +71,8 @@ component SunMoonThumb {
enum Theme { day, night } enum Theme { day, night }
export component SunMoonSwitch { export component SunMoonSwitch {
property <Theme> theme: Theme.night; property <Theme> theme: Theme.night;
in property <float> scale: 1; width: 200px;
width: 200px * scale; height: 100px;
height: 100px * scale;
frameBacker := Rectangle { frameBacker := Rectangle {
width: parent.width; width: parent.width;
@ -91,22 +89,22 @@ export component SunMoonSwitch {
border-radius: self.height / 2; border-radius: self.height / 2;
clouds-background :=Image { clouds-background :=Image {
x: 14px * scale; x: 14px;
y: -6px * scale; y: -6px;
width: 202px * scale; width: 202px;
source: @image-url("images/clouds-background.png"); source: @image-url("images/clouds-background.png");
} }
clouds-foreground := Image { clouds-foreground := Image {
x: 30px * scale; x: 30px;
y: 5px * scale; y: 5px;
width: 202px * scale; width: 202px;
source: @image-url("images/clouds-front.png"); source: @image-url("images/clouds-front.png");
} }
stars := Image { stars := Image {
x: 15px * scale; x: 15px;
y: 15px * scale; y: 15px;
width: 80px * scale; width: 80px;
source: @image-url("images/stars.png"); source: @image-url("images/stars.png");
} }
} }
@ -114,13 +112,12 @@ export component SunMoonSwitch {
Image { Image {
x: -1px * scale; x: -1px;
width: 202px * scale; width: 202px;
source: @image-url("images/shadow-frame.png"); source: @image-url("images/shadow-frame.png");
} }
thumb := SunMoonThumb { thumb := SunMoonThumb {
scale: root.scale;
} }
TouchArea { TouchArea {
@ -135,7 +132,7 @@ export component SunMoonSwitch {
states [ states [
nightMode when root.theme == Theme.night: { nightMode when root.theme == Theme.night: {
thumb.thumb-position: root.width - thumb.width - 50px * scale; thumb.thumb-position: root.width - thumb.width - 50px;
frameBacker.background: #1e2232; frameBacker.background: #1e2232;
clouds-background.y: 120px; clouds-background.y: 120px;
clouds-foreground.y: 120px; clouds-foreground.y: 120px;
@ -155,9 +152,9 @@ export component SunMoonSwitch {
} }
} }
dayMode when root.theme == Theme.day: { dayMode when root.theme == Theme.day: {
thumb.thumb-position: 50px * scale; thumb.thumb-position: 50px;
frameBacker.background: #3d85ba; frameBacker.background: #3d85ba;
stars.y: - 60px * scale; stars.y: - 60px;
stars.opacity: 0.4; stars.opacity: 0.4;
in { in {
animate frameBacker.background, stars.y, stars.opacity { animate frameBacker.background, stars.y, stars.opacity {

1
examples/fancy-switches/demo.slint
View file

@ -17,6 +17,5 @@ export component AppWindow inherits Window {
SunMoonSwitch { SunMoonSwitch {
x: 200px; x: 200px;
y: 250px; y: 250px;
scale: 1;
} }
} }