[*] update normally

heng30 · Aug 29, 2024 · bd993f4 · bd993f4
1 parent 5ad9c45
commit bd993f4
Show file tree

Hide file tree

Showing 11 changed files with 204 additions and 40 deletions.
diff --git a/ui/appwindow.slint b/ui/appwindow.slint
@@ -28,6 +28,8 @@ export component AppWindow inherits Window {
 
     if IconsDialogSetting.show: IconsDialog {
         is-prevent-event-forward: true;
+        column-count: Store.device-type == DeviceType.Desktop ? 6 : 5;
+        icon-size: Store.device-type == DeviceType.Desktop ? Theme.icon-size * 3 : Theme.icon-size;
         select-index(handle-type, index, user-data) => {
         }
     }

diff --git a/ui/base/confirm-dialog.slint b/ui/base/confirm-dialog.slint
@@ -20,6 +20,10 @@ export global ConfirmDialogSetting {
         self.handle-type = handle-type;
         self.user-data = user-data;
     }
+
+    public function hide() {
+        self.show = false;
+    }
 }
 
 export component ConfirmDialog inherits Rectangle {

diff --git a/ui/base/dialog.slint b/ui/base/dialog.slint
@@ -3,15 +3,24 @@ import { Store } from "../store.slint";
 import { Logic } from "../logic.slint";
 import { IconBtn } from "./icon-btn.slint";
 import { CenterLayout } from "./center-layout.slint";
-import { CancelBtn, ConfirmBtn } from "./btn.slint";
+import { TextBtn } from "./btn.slint";
 
 export component Dialog inherits Rectangle {
     in-out property <string> title;
     in-out property <color> title-bg: Theme.secondary-brand-color;
-    in-out property <bool> is-hide-btns: false;
-    in-out property <bool> is-hide-close-btns: false;
+    in-out property <bool> is-hide-close-btn: false;
+    in-out property <bool> is-hide-bottom-btns: false;
+    in-out property <bool> is-hide-confirm-btn: false;
+    in-out property <bool> is-hide-cancel-btn: false;
     in-out property <bool> is-prevent-event-forward: false;
 
+    in-out property <color> cancel-text-color: Theme.info-color;
+    in-out property <color> confirm-text-color: Theme.third-brand-color;
+
+    callback close <=> cancel-clicked;
+    callback canceled <=> cancel-clicked;
+    callback confirmed <=> ok-clicked;
+
     callback cancel-clicked();
     callback ok-clicked();
 
@@ -35,7 +44,7 @@ export component Dialog inherits Rectangle {
                 text: root.title;
             }
 
-            if is-hide-btns && !is-hide-close-btns: HorizontalLayout {
+            if !is-hide-close-btn: HorizontalLayout {
                 alignment: end;
                 padding-right: Theme.padding;
                 CenterLayout {
@@ -56,20 +65,28 @@ export component Dialog inherits Rectangle {
             @children
         }
 
-        if !is-hide-btns: HorizontalLayout {
-            alignment: center;
+        if !is-hide-bottom-btns: HorizontalLayout {
+            alignment: LayoutAlignment.end;
             spacing: Theme.spacing * 8;
-            padding: Theme.padding * 2;
+            padding: Theme.padding * 4;
 
-            cancel-btn := CancelBtn {
+            if !is-hide-cancel-btn: TextBtn {
+                icon: Icons.cancel;
                 text: Logic.tr("Cancel");
+                text-color: root.cancel-text-color;
+                colorize: self.text-color;
+
                 clicked => {
                     root.cancel-clicked();
                 }
             }
 
-            ConfirmBtn {
+            if !is-hide-confirm-btn: TextBtn {
+                icon: Icons.success;
                 text: Logic.tr("Confirm");
+                text-color: root.confirm-text-color;
+                colorize: self.text-color;
+
                 clicked => {
                     root.ok-clicked();
                 }

diff --git a/ui/base/icons-dialog.slint b/ui/base/icons-dialog.slint
@@ -80,16 +80,17 @@ export global IconsDialogSetting {
 export component IconsDialog inherits Dialog {
     title: Logic.tr("Icons");
     width: (icon-size + icon-spacing) * column-count - icon-spacing + Theme.padding * 2;
-    is-hide-btns: true;
+    is-hide-bottom-btns: true;
 
-    property <length> icon-size: 60px;
-    property <length> icon-spacing: Theme.spacing;
-    property <int> column-count: 5;
+    in-out property <length> icon-size: Theme.icon-size * 3;
+    in-out property <length> icon-spacing: Theme.spacing;
+    in-out property <int> column-count: 5;
+    in-out property <length> body-height: self.icon-size * 5;
 
     callback select-index(string, int, string); // (handle-type, icon-index, user-data) -> void
 
     flick := Flickable {
-        height: 300px;
+        height: root.body-height;
         viewport-height: (icon-size + icon-spacing) * Math.ceil(IconsDialogSetting.icons.length / column-count) - icon-spacing + Theme.padding * 2;
 
         vbox := VerticalLayout {

diff --git a/ui/base/icons/12.svg b/ui/base/icons/12.svg
diff --git a/ui/base/language-dialog.slint b/ui/base/language-dialog.slint
@@ -7,9 +7,16 @@ import { RadioBtn } from "./radio-btn.slint";
 
 export component LanguageDialog inherits Dialog {
     title: Logic.tr("Please select language");
-    is-hide-btns: true;
+    is-hide-bottom-btns: false;
+    is-hide-cancel-btn: true;
 
-    in-out property<string> language: "cn";
+    in-out property <string> language: "cn";
+
+    callback confirmed-language(string);
+
+    confirmed => {
+        confirmed-language(root.language);
+    }
 
     VerticalLayout {
         padding: Theme.padding * 4;
@@ -22,28 +29,18 @@ export component LanguageDialog inherits Dialog {
             cn-radio := RadioBtn {
                 text: "中文";
                 checked: root.language == "cn";
-                check => { root.language = "cn"; }
+                check => {
+                    root.language = "cn";
+                }
             }
 
             en-radio := RadioBtn {
                 text: "English";
                 checked: root.language == "en";
-                check => { root.language = "en"; }
-            }
-        }
-
-        HorizontalLayout {
-            alignment: end;
-
-            ConfirmBtn {
-                text: Logic.tr("Confirm");
-                clicked => {
-                    Store.setting-preference.language = root.language;
-                    Logic.set-setting-preference(Store.setting-preference);
-                    Store.is-first-run = false;
+                check => {
+                    root.language = "en";
                 }
             }
         }
     }
-
 }
diff --git a/ui/panel/desktop/examples/dialog.slint b/ui/panel/desktop/examples/dialog.slint
@@ -0,0 +1,140 @@
+import { Util, Theme, Icons, Logic, Store } from "../../def.slint";
+import { IconBtn, Dialog, ConfirmDialog, ConfirmDialogSetting, IconsDialog, IconsDialogSetting, LanguageDialog, ExampleComponent } from "../../../base/widgets.slint";
+
+export component DialogExample inherits Flickable {
+    viewport-height: vbox.preferred-height;
+    viewport-width: vbox.preferred-width;
+
+    vbox := VerticalLayout {
+        spacing: Theme.spacing * 20;
+        padding-top: Theme.padding * 5;
+        padding-bottom: Theme.padding * 5;
+        alignment: LayoutAlignment.center;
+
+        HorizontalLayout {
+            width: root.width;
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: Math.max(1000px, root.width * 0.8);
+
+                Dialog {
+                    title: "Title";
+                    title-bg: Theme.third-brand-color;
+                    background: Theme.secondary-background;
+
+                    Rectangle {
+                        width: 800px;
+                        height: 500px;
+                        background: Theme.secondary-background;
+                        border-radius: Theme.border-radius;
+                    }
+                }
+
+                code: "Dialog {\n    title: \"Title\";\n    title-bg: Theme.third-brand-color;\n    background: Theme.secondary-background;\n\n    Rectangle {\n        width: 800px;\n        height: 500px;\n        background: Theme.secondary-background;\n        border-radius: Theme.border-radius;\n    }\n}";
+            }
+        }
+
+        HorizontalLayout {
+            width: root.width;
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: Math.max(1000px, root.width * 0.8);
+
+                VerticalLayout {
+                    spacing: Theme.spacing * 10;
+
+                    IconBtn {
+                        icon: Icons.success;
+                        text: "Show ConfirmDialog";
+                        text-color: Colors.white;
+                        colorize: self.text-color;
+                        background: Theme.success-color;
+                        use-auto-size: true;
+                        auto-size-vpadding: Theme.padding * 2;
+
+                        clicked => {
+                            ConfirmDialogSetting.set(true,  Logic.tr("Warning"), Logic.tr("Delete or not?"), "remove-all-trash", "user-data");
+                        }
+                    }
+                }
+
+                code: "export component AppWindow inherits Window {\n    if ConfirmDialogSetting.show: ConfirmDialog {\n        is-prevent-event-forward: true;\n       width: Math.min(root.width * 0.9, self.vbox-preferred-width * 2);\n       background: Theme.secondary-background;\n    }\n\n    IconBtn {\n        icon: Icons.success;\n        text: \"Show ConfirmDialog\";\n        text-color: Colors.white;\n        colorize: self.text-color;\n        background: Theme.success-color;\n        use-auto-size: true;\n        auto-size-vpadding: Theme.padding * 2;\n\n        clicked => {\n            ConfirmDialogSetting.set(true,  Logic.tr(\"Warning\"), Logic.tr(\"Delete or not?\"), \"remove-all-trash\", \"user-data\");\n        }\n    }\n}";
+            }
+        }
+
+        HorizontalLayout {
+            width: root.width;
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: Math.max(1000px, root.width * 0.8);
+
+                VerticalLayout {
+                    spacing: Theme.spacing * 10;
+
+                    IconBtn {
+                        icon: Icons.success;
+                        text: "Show IconsDialog";
+                        text-color: Colors.white;
+                        colorize: self.text-color;
+                        background: Theme.success-color;
+                        use-auto-size: true;
+                        auto-size-vpadding: Theme.padding * 2;
+
+                        clicked => {
+                            IconsDialogSetting.set(true, "add-icon-to-list", "user-data");
+                        }
+                    }
+                }
+
+                code: "export component AppWindow inherits Window {\n    if IconsDialogSetting.show: IconsDialog {\n        is-prevent-event-forward: true;\n        column-count: 6;\n        select-index(handle-type, index, user-data) => {\n        }\n    }\n\n    IconBtn {\n        icon: Icons.success;\n        text: \"Show IconsDialog\";\n        text-color: Colors.white;\n        colorize: self.text-color;\n        background: Theme.success-color;\n        use-auto-size: true;\n        auto-size-vpadding: Theme.padding * 2;\n\n        clicked => {\n            IconsDialogSetting.set(true, \"add-icon-to-list\", \"user-data\");\n        }\n    }\n}";
+            }
+        }
+
+        HorizontalLayout {
+            width: root.width;
+            alignment: LayoutAlignment.center;
+
+            ExampleComponent {
+                width: Math.max(1000px, root.width * 0.8);
+
+                VerticalLayout {
+                    spacing: Theme.spacing * 10;
+
+                    ld := LanguageDialog {
+                        background: Theme.secondary-background;
+                        language: Store.setting-preference.language;
+
+                        close => {
+                            ld.visible = false;
+                        }
+
+                        confirmed-language(lang) => {
+                            Store.setting-preference.language = lang;
+                            Logic.set-setting-preference(Store.setting-preference);
+                            ld.visible = false;
+                        }
+                    }
+
+                    IconBtn {
+                        icon: Icons.success;
+                        text: "Show LanguageDialog";
+                        text-color: Colors.white;
+                        colorize: self.text-color;
+                        background: Theme.success-color;
+                        use-auto-size: true;
+                        auto-size-vpadding: Theme.padding * 2;
+
+                        clicked => {
+                            ld.visible = !ld.visible;
+                        }
+                    }
+                }
+
+                code: "VerticalLayout {\n    spacing: Theme.spacing * 10;\n\n    ld := LanguageDialog {\n        background: Theme.secondary-background;\n        language: Store.setting-preference.language;\n\n        close => {\n            ld.visible = false;\n        }\n\n        confirmed-language(lang) => {\n            Store.setting-preference.language = lang;\n            Logic.set-setting-preference(Store.setting-preference);\n            ld.visible = false;\n        }\n    }\n\n    IconBtn {\n        icon: Icons.success;\n        text: \"Show LanguageDialog\";\n        text-color: Colors.white;\n        colorize: self.text-color;\n        background: Theme.success-color;\n        use-auto-size: true;\n        auto-size-vpadding: Theme.padding * 2;\n\n        clicked => {\n            ld.visible = !ld.visible;\n        }\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/home.slint b/ui/panel/desktop/home.slint
@@ -36,6 +36,7 @@ import { BrandExample }  from "examples/brand.slint";
 import { EmptyExample }  from "examples/empty.slint";
 import { LandingPageExample }  from "examples/landing-page.slint";
 import { StatusBarExample }  from "examples/status-bar.slint";
+import { DialogExample }  from "examples/dialog.slint";
 
 component LeftPanel inherits Rectangle {
     background: Theme.secondary-background;
@@ -118,6 +119,7 @@ component RightPanel inherits Rectangle {
     if Store.current-component-index == ComponentIndex.Empty: EmptyExample { }
     if Store.current-component-index == ComponentIndex.LandingPage: LandingPageExample { }
     if Store.current-component-index == ComponentIndex.StatusBar: StatusBarExample { }
+    if Store.current-component-index == ComponentIndex.Dialog: DialogExample { }
 }
 
 export component Home inherits VerticalLayout {

diff --git a/ui/panel/setting/desktop.slint b/ui/panel/setting/desktop.slint
@@ -150,7 +150,7 @@ component Setting inherits Rectangle {
 
 export component SettingDialog inherits Dialog {
     title: Logic.tr("Setting");
-    is-hide-btns: true;
+    is-hide-bottom-btns: true;
     is-prevent-event-forward: true;
 
     in-out property <length> inner-height: 650px;
@@ -167,7 +167,7 @@ export component SettingDialog inherits Dialog {
 
 export component AboutDialog inherits Dialog {
     title: Logic.tr("About");
-    is-hide-btns: true;
+    is-hide-bottom-btns: true;
     is-prevent-event-forward: true;
 
     in-out property <length> inner-height: 650px;

diff --git a/ui/store.slint b/ui/store.slint
@@ -71,15 +71,12 @@ export enum ComponentIndex {
     Empty,
     LandingPage,
     StatusBar,
+    Dialog,
 
 ////////////
 
-    Dialog,
     CenterLayout,
-    ConfirmDialog,
-    IconsDialog,
     Head,
-    LanguageDialog,
     ListTile,
     News,
     SlideCard,
@@ -153,7 +150,7 @@ export global Store {
 
     //////////////////////////////// Logic Start ////////////////////////////////
 
-    in-out property <ComponentIndex> current-component-index: ComponentIndex.StatusBar;
+    in-out property <ComponentIndex> current-component-index: ComponentIndex.Dialog;
     in-out property <[{title: string, component-index: ComponentIndex}]> component-entries: [
         {
             title: is-cn ? "树" : "Tree",
@@ -279,6 +276,10 @@ export global Store {
             title: is-cn ? "顶部状态栏" : "StatusBar",
             component-index: ComponentIndex.StatusBar,
         },
+        {
+            title: is-cn ? "弹框" : "Dialog",
+            component-index: ComponentIndex.Dialog,
+        },
     ];
 
     //////////////////////////////// Logic End  ////////////////////////////////

diff --git a/ui/theme.slint b/ui/theme.slint
@@ -46,7 +46,7 @@ export global Theme {
     out property <color> invert-base-color: is-dark ? #FFFFFF : #000000;
     out property <color> base-background: is-dark ? #16161A : #FFFFFF;
     out property <color> secondary-background: is-dark ? #232429 : #F5F5F5;
-    out property <color> thirdly-background: is-dark ? #011627 : #EFEFEF;
+    out property <color> thirdly-background: is-dark ? #011627 : #E0E0E0;
     out property <color> hover-background: is-dark ? #262626 : #EFEFEF;
     out property <color> checked-background: is-dark ? #2D3F54 : #EAF5FF;
     out property <color> base-background-drop-shadow: is-dark ? #2D2D2D : #DBDBDB;