[*] update normally

heng30 · Aug 28, 2024 · 02b9850 · 02b9850
1 parent a2568b3
commit 02b9850
Show file tree

Hide file tree

Showing 11 changed files with 333 additions and 59 deletions.
diff --git a/' b/'
diff --git a/ui/base/landing-page.slint b/ui/base/landing-page.slint
@@ -127,7 +127,7 @@ export component LandingPage inherits Rectangle {
             alignment: current-index == -1 ? LayoutAlignment.end : LayoutAlignment.space-between;
 
             if current-index > -1: TextBtn {
-                text: Logic.tr("Next");
+                text: Logic.tr("Prev");
                 colorize: Theme.have-read-text-color;
                 font-size: Theme.default-font-size - 2px;
                 clicked => {

diff --git a/ui/panel/desktop/examples/avatar.slint b/ui/panel/desktop/examples/avatar.slint
@@ -0,0 +1,35 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { Avatar, ExampleComponent } from "../../../base/widgets.slint";
+
+export component AvatarExample 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);
+
+                Avatar {
+                    width: 200px;
+                    background: Theme.secondary-background;
+                    icon: Icons.account;
+                    icon-size-rate: 0.6;
+
+                    clicked => {
+                    }
+                }
+
+                code: "Avatar {\n    width: 200px;\n    background: Theme.secondary-background;\n    icon: Icons.account;\n    icon-size-rate: 0.6;\n\n    clicked => {}\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/blanket.slint b/ui/panel/desktop/examples/blanket.slint
@@ -0,0 +1,39 @@
+import { Util, Theme } from "../../def.slint";
+import { Blanket, ExampleComponent } from "../../../base/widgets.slint";
+
+export component BlanketExample 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);
+
+                Rectangle {
+                    width: 400px;
+                    height: 400px;
+                    background: red;
+
+                    bl := Blanket { }
+
+                    TouchArea {
+                        clicked => {
+                            bl.visible = !bl.visible;
+                        }
+                    }
+                }
+
+                code: "Rectangle {\n    width: 400px;\n    height: 400px;\n    background: red;\n\n    bl := Blanket { }\n\n    TouchArea {\n        clicked => {\n            bl.visible = !bl.visible;\n        }\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/brand.slint b/ui/panel/desktop/examples/brand.slint
@@ -0,0 +1,30 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { Brand, ExampleComponent } from "../../../base/widgets.slint";
+
+export component BrandExample 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);
+
+                Brand {
+                    width: 500px;
+                    source: Icons.brand;
+                }
+
+                code: "Brand {\n    width: 500px;\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/divider.slint b/ui/panel/desktop/examples/divider.slint
@@ -0,0 +1,41 @@
+import { Util, Theme } from "../../def.slint";
+import { Divider, ExampleComponent } from "../../../base/widgets.slint";
+
+export component DividerExample 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);
+
+                VerticalLayout {
+                    spacing: Theme.spacing * 2;
+
+                    Divider {
+                        width: 500px;
+                        height: 5px;
+                        background: red;
+                    }
+
+                    Divider {
+                        width: 5px;
+                        height: 200px;
+                        background: blue;
+                    }
+                }
+
+                code: "VerticalLayout {\n    spacing: Theme.spacing * 2;\n\n    Divider {\n        width: 500px;\n        height: 5px;\n        background: red;\n    }\n\n    Divider {\n        width: 5px;\n        height: 200px;\n        background: blue;\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/empty.slint b/ui/panel/desktop/examples/empty.slint
@@ -0,0 +1,40 @@
+import { Util, Theme, Icons, Logic } from "../../def.slint";
+import { NoMessageImg, NoDataImg, ExampleComponent } from "../../../base/widgets.slint";
+
+export component EmptyExample 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);
+
+                HorizontalLayout {
+                    spacing: Theme.spacing * 10;
+
+                    NoMessageImg {
+                        width: 500px;
+                        img-width: 300px;
+                        text: Logic.tr("No Message");
+                    }
+
+                    NoDataImg {
+                        width: 500px;
+                        text: Logic.tr("No Data");
+                    }
+                }
+
+                code: "HorizontalLayout {\n    spacing: Theme.spacing * 10;\n\n    NoMessageImg {\n        width: 500px;\n        img-width: 300px;\n        text: Logic.tr(\"No Message\");\n    }\n\n    NoDataImg {\n        width: 500px;\n        text: Logic.tr(\"No Data\");\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/landing-page.slint b/ui/panel/desktop/examples/landing-page.slint
@@ -0,0 +1,65 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { Label, LandingPage, ExampleComponent } from "../../../base/widgets.slint";
+
+export component LandingPageExample 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);
+
+                Rectangle {
+                    height: 800px;
+
+                    lb := Label {
+                        visible: false;
+                        text: "Finished";
+                        font-size: Theme.title1-font-size;
+                    }
+
+                    TouchArea {
+                        enabled: lb.visible;
+                        clicked => {
+                            lb.visible = false;
+                            lp.visible = true;
+                        }
+                    }
+
+                    lp := LandingPage {
+                        details: [
+                            {
+                                picture: Icons.landing-account,
+                                description: "Landing Page 1",
+                            },
+                            {
+                                picture: Icons.landing-send,
+                                description: "Landing Page 2",
+                            },
+                            {
+                                picture: Icons.landing-welcome,
+                                description: "Landing Page 3",
+                            }
+                        ];
+
+                        skipped => {
+                            lp.visible = false;
+                            lb.visible = true;
+                        }
+                    }
+                }
+
+                code: "Rectangle {\n    height: 800px;\n\n    lb := Label {\n        visible: false;\n        text: \"Finished\";\n        font-size: Theme.title1-font-size;\n    }\n\n    TouchArea {\n        enabled: lb.visible;\n        clicked => {\n            lb.visible = false;\n            lp.visible = true;\n        }\n    }\n\n    lp := LandingPage {\n        details: [\n            {\n                picture: Icons.landing-account,\n                description: \"Landing Page 1\",\n            },\n            {\n                picture: Icons.landing-send,\n                description: \"Landing Page 2\",\n            },\n            {\n                picture: Icons.landing-welcome,\n                description: \"Landing Page 3\",\n            }\n        ];\n\n        skipped => {\n            lp.visible = false;\n            lb.visible = true;\n        }\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/examples/link.slint b/ui/panel/desktop/examples/link.slint
@@ -0,0 +1,32 @@
+import { Util, Theme } from "../../def.slint";
+import { Link, ExampleComponent } from "../../../base/widgets.slint";
+
+export component LinkExample 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);
+
+                Link {
+                    text: "Your blog's page";
+                    clicked => {
+                        debug("clicked");
+                    }
+                }
+
+                code: "Link {\n    text: \"Your blog's page\";\n    clicked => {\n        debug(\"clicked\");\n    }\n}";
+            }
+        }
+    }
+}
diff --git a/ui/panel/desktop/home.slint b/ui/panel/desktop/home.slint
@@ -28,6 +28,13 @@ import { LoadingExample } from "examples/loading.slint";
 import { TabBtnExample } from "examples/tab-btn.slint";
 import { PopupActionExample } from "examples/popup-action.slint";
 import { BannerExample } from "examples/banner.slint";
+import { DividerExample } from "examples/divider.slint";
+import { LinkExample } from "examples/link.slint";
+import { BlanketExample } from "examples/blanket.slint";
+import { AvatarExample } from "examples/avatar.slint";
+import { BrandExample }  from "examples/brand.slint";
+import { EmptyExample }  from "examples/empty.slint";
+import { LandingPageExample }  from "examples/landing-page.slint";
 
 component LeftPanel inherits Rectangle {
     background: Theme.secondary-background;
@@ -102,6 +109,13 @@ component RightPanel inherits Rectangle {
     if Store.current-component-index == ComponentIndex.TabBtn: TabBtnExample { }
     if Store.current-component-index == ComponentIndex.PopupAction: PopupActionExample { }
     if Store.current-component-index == ComponentIndex.Banner: BannerExample { }
+    if Store.current-component-index == ComponentIndex.Divider: DividerExample { }
+    if Store.current-component-index == ComponentIndex.Link: LinkExample { }
+    if Store.current-component-index == ComponentIndex.Blanket: BlanketExample { }
+    if Store.current-component-index == ComponentIndex.Avatar: AvatarExample { }
+    if Store.current-component-index == ComponentIndex.Brand: BrandExample { }
+    if Store.current-component-index == ComponentIndex.Empty: EmptyExample { }
+    if Store.current-component-index == ComponentIndex.LandingPage: LandingPageExample { }
 }
 
 export component Home inherits VerticalLayout {