Silly tweak to example for animations

Move the minus button a little to the right when pressing. This isn't
great useabilty, but it demonstrates the concept easily for a moment ;-)
This commit is contained in:
Simon Hausmann 2020-06-24 16:03:09 +02:00
parent 3d85cb7f23
commit f14eb956bf

View file

@ -24,6 +24,7 @@ component TwoRectangle := Rectangle {
component ButtonRectangle := Rectangle { component ButtonRectangle := Rectangle {
property<string> button_text; property<string> button_text;
property<bool> pressed: button_area.pressed;
signal clicked; signal clicked;
width: 100; width: 100;
height: 75; height: 75;
@ -39,6 +40,9 @@ component ButtonRectangle := Rectangle {
color: black; color: black;
} }
color: { button_area.pressed ? red : #5898; } color: { button_area.pressed ? red : #5898; }
animate x {
duration: 200;
}
} }
Hello := Rectangle { Hello := Rectangle {
@ -86,17 +90,17 @@ Hello := Rectangle {
source: img!"../graphicstest/logo.png"; source: img!"../graphicstest/logo.png";
} }
ButtonRectangle { plus_button := ButtonRectangle {
color: blue; color: blue;
x: 50; x: { plus_button.pressed ? 100 : 50; }
y: 225; y: 225;
clicked => { counter += 1 } clicked => { counter += 1 }
button_text: "+"; button_text: "+";
} }
counter_label := Text { x: 100; y: 300; text: counter; color: black; } counter_label := Text { x: 100; y: 300; text: counter; color: black; }
ButtonRectangle { minus_button := ButtonRectangle {
color: yellow; color: yellow;
x: 50; x: { minus_button.pressed ? 100 : 50; }
y: 350; y: 350;
clicked => { minus_clicked() } clicked => { minus_clicked() }
button_text: "-"; button_text: "-";