7guis: modernier the timer example

- Use the new Timer element
 - Use the ProgressIndicator instead of a home-made one.
 - Fixup the paddings.

examples/7guis/Cargo.toml

@@ -14,10 +14,6 @@ rust-version.workspace = true
 path = "booker.rs"
 name = "booker"
 
-[[bin]]
-path = "timer.rs"
-name = "timer"
-
 [[bin]]
 path = "crud.rs"
 name = "crud"

examples/7guis/README.md

@@ -36,7 +36,6 @@ A simple timer where the duration is adjustable while running.
 ![Screenshot of the 7GUIs Timer](https://user-images.githubusercontent.com/22800467/168557131-68382191-9228-4d58-9683-6648ab5e7efd.png "Timer")
 
 [`.slint` code in web editor](https://slint.dev/editor/?load_url=https://raw.githubusercontent.com/slint-ui/slint/master/examples/7guis/timer.slint)
-(Note that the actual timer functionality is implemented in [Rust](./timer.rs).)
 
 ## [CRUD](https://7guis.github.io/7guis/tasks/#crud)
 Lets you create, read, update and delete names from a list as well as filter them by prefix.

examples/7guis/timer.rs

@@ -1,18 +0,0 @@
-// Copyright © SixtyFPS GmbH <info@slint.dev>
-// SPDX-License-Identifier: MIT
-use slint::{Timer, TimerMode};
-
-slint::slint!(export { MainWindow } from "timer.slint";);
-
-pub fn main() {
-    let main_window = MainWindow::new().unwrap();
-    let timer = Timer::default();
-    {
-        let main_window_weak = main_window.as_weak();
-        timer.start(TimerMode::Repeated, std::time::Duration::from_millis(10), move || {
-            let main_window = main_window_weak.unwrap();
-            main_window.invoke_tick(10);
-        });
-    }
-    main_window.run().unwrap();
-}

examples/7guis/timer.slint

@@ -1,39 +1,34 @@
 // Copyright © SixtyFPS GmbH <info@slint.dev>
 // SPDX-License-Identifier: MIT
 
-import { LineEdit, Button, Slider, HorizontalBox, VerticalBox } from "std-widgets.slint";
+import { LineEdit, Button, Slider, HorizontalBox, VerticalBox, ProgressIndicator } from "std-widgets.slint";
 
 export component MainWindow inherits Window {
     in-out property <duration> total-time: slider.value * 1s;
     in-out property <duration> elapsed-time;
 
-    callback tick(duration);
-    tick(passed-time) => {
-        root.elapsed-time += passed-time;
-        root.elapsed-time = min(root.elapsed-time, root.total-time);
+    Timer {
+        interval: 10ms;
+        triggered => {
+            root.elapsed-time += self.interval;
+            root.elapsed-time = min(root.elapsed-time, root.total-time);
+        }
     }
 
     VerticalBox {
         HorizontalBox {
-            padding-left: 0;
+            padding: 0;
             Text { text: "Elapsed Time:"; }
-            Rectangle {
-                min-width: 200px;
-                max-height: 30px;
-                background: gray;
-                Rectangle {
-                    x:0;
-                    height: 100%;
-                    width: parent.width * (root.elapsed-time/root.total-time);
-                    background: lightblue;
-                }
+            ProgressIndicator {
+                preferred-width: 100px;
+                progress: elapsed-time / total-time;
             }
         }
         Text{
             text: (root.total-time / 1s) + "s";
         }
         HorizontalBox {
-            padding-left: 0;
+            padding: 0;
             Text {
                 text: "Duration:";
                 vertical-alignment: center;