[*] update normally

ui/base/about.slint

@@ -40,7 +40,7 @@ export component About inherits SettingDetail {
             wrap: word-wrap;
         }
 
-        VerticalLayout {
+        if AboutSetting.sponsor != "": VerticalLayout {
             spacing: Theme.spacing * 2;
             HorizontalLayout {
                 alignment: center;

ui/base/head.slint

@@ -3,21 +3,28 @@ import { IconBtn } from "./icon-btn.slint";
 import { Divider } from "./divider.slint";
 
 export component Head inherits Rectangle {
-    height: Theme.header-height;
+    height: hbox.preferred-height;
     background: Theme.base-background;
 
     in-out property <bool> is-show-divider;
     in-out property <string> title;
+
     in-out property icon <=> ic.icon;
     in-out property icon-size <=> ic.icon-size;
+    in-out property icon-colorize <=> ic.colorize;
+
     in-out property <LayoutAlignment> hbox-alignment: LayoutAlignment.stretch;
+    in-out property <length> hpadding: Theme.padding;
+    in-out property <length> vpadding: Theme.padding;
 
     callback clicked <=> ic.clicked;
 
     hbox := HorizontalLayout {
         alignment: hbox-alignment;
-        padding-left: Theme.padding;
-        padding-right: Theme.padding;
+        padding-left: root.hpadding;
+        padding-right: root.hpadding;
+        padding-top: root.vpadding;
+        padding-bottom: root.vpadding;
 
         ic := IconBtn {
             icon-size: Theme.icon-size;

ui/base/news.slint

@@ -1,6 +1,16 @@
 import { Theme } from "../theme.slint";
 import { Link } from "./link.slint";
 
+// Example:
+// News {
+//     width: parent.width * 0.6;
+//     link-text: "How to learn Slint";
+//     pub-date: "12-15 10:12";
+//     summary: "the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the Key namespace";
+//     author: "Heng30";
+//     is-read: false;
+// }
+
 export component News inherits Rectangle {
     height: vbox.preferred-height;
 

ui/panel/desktop/examples/about.slint

@@ -0,0 +1,37 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { About, AboutSetting, ExampleComponent } from "../../../base/widgets.slint";
+
+export component AboutExample 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);
+
+                About {
+                    width: 60%;
+                    is-show-header: false;
+
+                    init => {
+                        AboutSetting.app-name = "About Example";
+                        AboutSetting.version = "1.0.0";
+                        AboutSetting.sponsor = "";
+                        AboutSetting.text = "A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. The opacity is applied to the tree of child elements as if they were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity. (default value: 1)";
+                    }
+                }
+
+                code: "About {\n    width: 60%;\n    is-show-header: false;\n\n    init => {\n        AboutSetting.app-name = \"About Example\";\n        AboutSetting.version = \"1.0.0\";\n        AboutSetting.sponsor = \"\";\n        AboutSetting.text = \"A value between 0 and 1 (or a percentage) that is used to draw the element and its children with transparency. 0 is fully transparent (invisible), and 1 is fully opaque. The opacity is applied to the tree of child elements as if they were first drawn into an intermediate layer, and then the whole layer is rendered with this opacity. (default value: 1)\";\n    }\n}";
+            }
+        }
+    }
+}

ui/panel/desktop/examples/drawer.slint

@@ -74,7 +74,6 @@ export component DrawerExample inherits Flickable {
                             text: "Show";
                             background: pink;
                             clicked => {
-                                drawer-top.position = DrawerPosition.Top;
                                 drawer-top.show();
                             }
                         }
@@ -97,7 +96,6 @@ export component DrawerExample inherits Flickable {
                                 text: "Show";
                                 background: pink;
                                 clicked => {
-                                    drawer-bottom.position = DrawerPosition.Bottom;
                                     drawer-bottom.show();
                                 }
                             }
@@ -126,7 +124,6 @@ export component DrawerExample inherits Flickable {
                                 text-color: white;
                                 background: blue;
                                 clicked => {
-                                    drawer-left.position = DrawerPosition.Left;
                                     drawer-left.show();
                                 }
                             }

ui/panel/desktop/examples/head.slint

@@ -0,0 +1,44 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { Head, ExampleComponent } from "../../../base/widgets.slint";
+
+export component HeadExample 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);
+
+                Head {
+                    width: parent.width * 0.6;
+                    background: Theme.secondary-background;
+                    icon: Icons.home-fill;
+                    title: "Head Example";
+                    hbox-alignment: LayoutAlignment.space-between;
+                    is-show-divider: true;
+                    icon-colorize: blue;
+
+                    Rectangle {
+                        background: red;
+                        width: 20%;
+                    }
+
+                    clicked => {
+                        debug("clicked")
+                    }
+                }
+
+                code: "Head {\n    width: parent.width * 0.6;\n    background: Theme.secondary-background;\n    icon: Icons.home-fill;\n    title: \"Head Example\";\n    hbox-alignment: LayoutAlignment.space-between;\n    is-show-divider: true;\n    icon-colorize: blue;\n\n    Rectangle {\n        background: red;\n        width: 20%;\n    }\n\n    clicked => {\n        debug(\"clicked\")\n    }\n}";
+            }
+        }
+    }
+}

ui/panel/desktop/examples/help.slint

@@ -0,0 +1,40 @@
+import { Util, Store, Theme, Icons } from "../../def.slint";
+import { Help, AboutSetting, ExampleComponent } from "../../../base/widgets.slint";
+
+export component HelpExample 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);
+
+                Help {
+                    width: 60%;
+                    is-show-header: false;
+                    background: Theme.secondary-background;
+                    border-radius: Theme.border-radius;
+
+                    entries: Store.is-cn ? [
+                        "配置文件保存目录: ~/.config/slint-template",
+                        "数据库保存目录: ~/.local/share/slint-template",
+                    ] : [
+                        "Config directory: ~/.config/slint-template",
+                        "Data directory: ~/.local/share/slint-template",
+                    ];
+                }
+
+                code: "Help {\n    width: 60%;\n    is-show-header: false;\n    background: Theme.secondary-background;\n    border-radius: Theme.border-radius;\n\n    entries: Store.is-cn ? [\n        \"配置文件保存目录: ~/.config/slint-template\",\n        \"数据库保存目录: ~/.local/share/slint-template\",\n    ] : [\n        \"Config directory: ~/.config/slint-template\",\n        \"Data directory: ~/.local/share/slint-template\",\n    ];\n}";
+            }
+        }
+    }
+}

ui/panel/desktop/examples/news.slint

@@ -0,0 +1,34 @@
+import { Util, Theme, Icons } from "../../def.slint";
+import { News, ExampleComponent } from "../../../base/widgets.slint";
+
+export component NewsExample 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);
+
+                News {
+                    width: parent.width * 0.6;
+                    link-text: "How to learn Slint";
+                    pub-date: "12-15 10:12";
+                    summary: "the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the Key namespace";
+                    author: "Heng30";
+                    is-read: false;
+                }
+
+                code: "News {\n    width: parent.width * 0.6;\n    link-text: \"How to learn Slint\";\n    pub-date: \"12-15 10:12\";\n    summary: \"the character will be either a control character, or it will be mapped to a private unicode character. The mapping of these non-printable, special characters is available in the Key namespace\";\n    author: \"Heng30\";\n    is-read: false;\n}";
+            }
+        }
+    }
+}

ui/panel/desktop/home.slint

@@ -41,6 +41,10 @@ import { CenterLayoutExample }  from "examples/center-layout.slint";
 import { SlideCardExample }  from "examples/slide-card.slint";
 import { ListTileExample }  from "examples/list-tile.slint";
 import { DrawerExample }  from "examples/drawer.slint";
+import { NewsExample }  from "examples/news.slint";
+import { HeadExample }  from "examples/head.slint";
+import { AboutExample }  from "examples/about.slint";
+import { HelpExample }  from "examples/help.slint";
 
 component LeftPanel inherits Rectangle {
     background: Theme.secondary-background;
@@ -128,6 +132,10 @@ component RightPanel inherits Rectangle {
     if Store.current-component-index == ComponentIndex.SlideCard: SlideCardExample { }
     if Store.current-component-index == ComponentIndex.ListTile: ListTileExample { }
     if Store.current-component-index == ComponentIndex.Drawer: DrawerExample { }
+    if Store.current-component-index == ComponentIndex.News: NewsExample { }
+    if Store.current-component-index == ComponentIndex.Head: HeadExample { }
+    if Store.current-component-index == ComponentIndex.About: AboutExample { }
+    if Store.current-component-index == ComponentIndex.Help: HelpExample { }
 }
 
 export component Home inherits VerticalLayout {

ui/store.slint

@@ -76,14 +76,14 @@ export enum ComponentIndex {
     SlideCard,
     ListTile,
     Drawer,
+    News,
+    Head,
+    About,
+    Help,
 
 ////////////
-    Head,
-    News,
     Mnemonic,
 
-    About,
-    Help,
     ResetPassword,
     AccountBalance,
 
@@ -149,7 +149,7 @@ export global Store {
 
     //////////////////////////////// Logic Start ////////////////////////////////
 
-    in-out property <ComponentIndex> current-component-index: ComponentIndex.Drawer;
+    in-out property <ComponentIndex> current-component-index: ComponentIndex.Help;
     in-out property <[{title: string, component-index: ComponentIndex}]> component-entries: [
         {
             title: is-cn ? "树" : "Tree",
@@ -295,6 +295,22 @@ export global Store {
             title: is-cn ? "抽屉" : "Drawer",
             component-index: ComponentIndex.Drawer,
         },
+        {
+            title: is-cn ? "新闻" : "News",
+            component-index: ComponentIndex.News,
+        },
+        {
+            title: is-cn ? "头部" : "Head",
+            component-index: ComponentIndex.Head,
+        },
+        {
+            title: is-cn ? "关于" : "About",
+            component-index: ComponentIndex.About,
+        },
+        {
+            title: is-cn ? "帮助" : "Help",
+            component-index: ComponentIndex.Help,
+        },
     ];
 
     //////////////////////////////// Logic End  ////////////////////////////////