[*] improve ui

src/logic/ok_cancel_dialog.rs

@@ -8,13 +8,9 @@ pub fn init(ui: &AppWindow) {
             let ui = ui_handle.unwrap();
 
             match handle_type.as_str() {
-                "address-book-delete-item" => {
+                "remove-rss-all-entrys" => {
                     ui.global::<Logic>()
-                        .invoke_address_book_delete_item(handle_uuid);
-                }
-                "activity-delete-item" => {
-                    ui.global::<Logic>()
-                        .invoke_activity_delete_item(handle_uuid);
+                        .invoke_remove_all_entrys(handle_uuid);
                 }
                 _ => (),
             }

ui/appwindow.slint

@@ -3,13 +3,13 @@ import { Logic } from "./logic.slint";
 import { Store } from "./store.slint";
 import { Util } from "./util.slint";
 import { Panel } from "./panel/panel.slint";
-import { Message } from "./base/message.slint";
+import { Message, OkCancelDialog, Blanket } from "./base/widgets.slint";
 
 export component AppWindow inherits Window {
     default-font-size: Theme.default-font-size;
     default-font-family: Theme.default-font-family;
     // width: Theme.default-width;
-    // height: Theme.default-height;
+    height: Theme.default-height;
     background: Theme.base-background-dark;
     icon: @image-url("./images/icon.png");
     title: "rssbox";
@@ -23,6 +23,12 @@ export component AppWindow inherits Window {
 
     modal := Rectangle {
         function hide() { }
+
+        if oc-dialog.visible : Blanket { }
+
+        oc-dialog := OkCancelDialog {
+            width: root.width * 0.8;
+        }
     }
 
     msg := Message {

ui/base/blanket.slint

@@ -0,0 +1,7 @@
+import { Theme } from "../theme.slint";
+
+export component Blanket inherits Rectangle {
+    opacity: 0.3;
+    background: Theme.basic-black-color;
+    TouchArea { }
+}

ui/base/dialog.slint

@@ -0,0 +1,74 @@
+import { Theme, Icons } from "../theme.slint";
+import { Store } from "../store.slint";
+import { Logic } from "../logic.slint";
+import { IconBtn } from "./icon-btn.slint";
+import { CenterLayout } from "./center-layout.slint";
+
+import { Button } from "std-widgets.slint";
+
+export component Dialog inherits Rectangle {
+    in-out property title <=> txt.text;
+    in-out property<color> title-bg: Theme.brand-color;
+    in-out property<bool> is-hide-btns: false;
+
+    callback cancel-clicked();
+    callback ok-clicked();
+
+    visible: false;
+    width: 800px;
+    height: vbox.preferred-height;
+    background: Theme.base-background-light;
+
+    vbox := VerticalLayout {
+        alignment: space-between;
+
+        Rectangle {
+            height: txt.preferred-height * 1.33;
+            background: root.title-bg;
+            txt := Text {
+                color: Colors.white;
+                font-size: Theme.title3-font-size;
+            }
+
+            if (is-hide-btns) : HorizontalLayout {
+                alignment: end;
+                padding-right: Theme.padding;
+                CenterLayout {
+                    IconBtn {
+                        width: Theme.icon-size;
+                        icon: Icons.close;
+                        colorize: txt.color;
+                        clicked => { root.cancel-clicked(); }
+                    }
+                }
+             }
+        }
+
+        VerticalLayout {
+            @children
+        }
+
+        if (!is-hide-btns) : HorizontalLayout {
+            alignment: center;
+            spacing: Theme.spacing * 8;
+            padding: Theme.padding * 2;
+
+            cancel-btn := Button {
+                width: 120px;
+                text: Logic.tr(Store.is-cn, "取消");
+                icon: Icons.cancel;
+                colorize-icon: true;
+                clicked => { root.cancel-clicked(); }
+            }
+
+            Button {
+                width: 120px;
+                text: Logic.tr(Store.is-cn, "确认");
+                icon: Icons.success-fill;
+                primary: true;
+                colorize-icon: true;
+                clicked => { root.ok-clicked(); }
+            }
+        }
+    }
+}

ui/base/divider.slint

@@ -0,0 +1,6 @@
+import { Theme } from "../theme.slint";
+
+export component Divider inherits Rectangle {
+    height: 1px;
+    background: Theme.brand-border-color;
+}

ui/base/icon-btn.slint

@@ -6,14 +6,17 @@ export component IconBtn inherits Rectangle {
     in-out property colorize <=> img.colorize;
     in-out property icon-width <=> img.width;
     in-out property icon-rotation-angle <=> img.rotation-angle;
-    in-out property text <=> txt.text;
+    in-out property<bool> is-ltr: true;
+
+    in-out property<string> text;
+    in-out property<length> font-size: Theme.title4-font-size;
 
     callback clicked <=> touch.clicked;
 
     in-out property<color> bg-color: transparent;
     in-out property<color> bg-pressed-color: Theme.pressed-color;
 
-    width: hbox.preferred-width + Theme.padding;
+    border-radius: Theme.border-radius;
     background: touch.pressed ? bg-pressed-color : bg-color;
 
     animate background {
@@ -22,17 +25,24 @@ export component IconBtn inherits Rectangle {
     }
 
     hbox := HorizontalLayout {
-        spacing: txt.visible ? Theme.spacing * 2 : 0px;
+        spacing: Theme.spacing * 2;
+        alignment: center;
+
+        if !root.is-ltr && root.text != "" : Label {
+            color: img.colorize;
+            font-size: root.font-size;
+            text: root.text;
+        }
 
         img := Image {
             width: Theme.icon-size;
             colorize: Theme.icon-color;
         }
 
-        txt := Label {
-            visible: text != "";
-            width: self.visible ? self.preferred-width : 0px;
+        if root.is-ltr && root.text != "" : Label {
             color: img.colorize;
+            font-size: root.font-size;
+            text: root.text;
         }
     }
 

ui/base/link.slint

@@ -0,0 +1,13 @@
+import { Theme } from "../theme.slint";
+
+export component Link inherits Text {
+    in-out property <bool> is-read;
+
+    callback clicked <=> touch.clicked;
+
+    wrap: word-wrap;
+    font-size: Theme.title5-font-size;
+    color: root.is-read ? Theme.have-read-text-color : Theme.link-text-color;
+
+    touch := TouchArea { }
+}

ui/base/ok-cancel.slint

@@ -0,0 +1,35 @@
+import { Dialog } from "./dialog.slint";
+import { Store } from "../store.slint";
+import { Util } from "../util.slint";
+import { Logic } from "../logic.slint";
+import { Theme } from "../theme.slint";
+
+export component OkCancelDialog inherits Dialog {
+    visible: Store.ok-cancel-dialog-setting.body-text != "";
+    title: Store.ok-cancel-dialog-setting.title-text;
+    title-bg: Util.text-color(Store.ok-cancel-dialog-setting.title-type);
+    width: 450px;
+    height: 200px;
+    background: rect.background;
+
+    rect := Rectangle {
+        background: Theme.base-background-light;
+        Text {
+            width: 100%;
+            horizontal-alignment: center;
+            color: Theme.primary-text-color;
+            text: Store.ok-cancel-dialog-setting.body-text;
+            wrap: word-wrap;
+            font-size: Theme.title4-font-size;
+        }
+    }
+
+    ok-clicked => {
+        Logic.handle-ok-cancel-dialog(Store.ok-cancel-dialog-setting.handle-type, Store.ok-cancel-dialog-setting.handle-uuid);
+        Store.ok-cancel-dialog-setting.body-text = "";
+    }
+
+    cancel-clicked => {
+        Store.ok-cancel-dialog-setting.body-text = "";
+    }
+}

ui/base/tab-btn.slint

@@ -2,11 +2,13 @@ import { Theme } from "../theme.slint";
 
 export component TabBtn inherits Rectangle {
     in-out property icon <=> img.source;
-    in-out property colorize <=> img.colorize;
     in-out property icon-width <=> img.width;
     in-out property icon-rotation-angle <=> img.rotation-angle;
     in-out property text <=> txt.text;
 
+    in-out property<color> colorize: Theme.icon-color;
+    in-out property<bool> checked: false;
+
     callback clicked <=> touch.clicked;
 
     in-out property<color> bg-color: transparent;
@@ -25,14 +27,14 @@ export component TabBtn inherits Rectangle {
             alignment: center;
             img := Image {
                 width: Theme.icon-size;
-                colorize: Theme.icon-color;
+                colorize: root.checked ? Theme.brand-color : root.colorize;
             }
         }
 
         HorizontalLayout {
             alignment: center;
             txt :=  Text {
-                font-size: Theme.default-font-size * 0.6;
+                font-size: img.width * 0.4;
                 color: img.colorize;
             }
         }

ui/base/widget.slint → ui/base/widgets.slint

@@ -5,5 +5,10 @@ import { Label } from "./label.slint";
 import { Tag } from "./tag.slint";
 import { CenterLayout } from "./center-layout.slint";
 import { NoMessageImg } from "./no-message.slint";
+import { Divider } from "./divider.slint";
+import { Link } from "./link.slint";
+import { Dialog } from "./dialog.slint";
+import { OkCancelDialog } from "./ok-cancel.slint";
+import { Blanket } from "./blanket.slint";
 
-export { Message, TabBtn, IconBtn, Label, CenterLayout, Tag, NoMessageImg }
+export { Message, TabBtn, IconBtn, Label, CenterLayout, Tag, NoMessageImg, Divider, Link, Dialog, OkCancelDialog, Blanket }

ui/logic.slint

@@ -6,10 +6,14 @@ export global Logic {
     callback delete-rss(string);
     callback switch-rss(string, string);
     callback toggle-rss-mark(int, string);
-    callback sync-rss(string);
+
+    pure callback update-time-rss(string) -> string; // suuid
+    update-time-rss => { return "10-33 12:09:45"; }
+
+    callback sync-rss(string); // suuid
 
     callback remove-entry(string, string);
-    callback remove-all-entry(string);
+    callback remove-all-entrys(string);
     callback set-read-entry(string, string);
     callback open-url(string);