[+] add Paragraph

src/logic/examples.rs

@@ -4,15 +4,51 @@ use slint::{ComponentHandle, Model, ModelRc, VecModel};
 pub fn init(ui: &AppWindow) {
     ui.global::<Logic>()
         .on_generate_search_values(move |entries| {
-            let values = entries.iter().map(|entry| entry.title).collect::<Vec<_>>();
+            let values = entries
+                .iter()
+                .map(|entry| {
+                    if entry.children.row_count() > 0 {
+                        entry
+                            .children
+                            .iter()
+                            .map(|item| item.title)
+                            .collect::<Vec<_>>()
+                    } else {
+                        vec![entry.category]
+                    }
+                })
+                .flatten()
+                .collect::<Vec<_>>();
             ModelRc::new(VecModel::from_slice(&values[..]))
         });
 
     ui.global::<Logic>()
-        .on_get_component_index_from_search_values(move |entries, text| {
+        .on_get_sidebar_key_from_search_values(move |entries, text| {
+            if text.is_empty() {
+                return Default::default();
+            }
+
             let entries = entries
                 .iter()
-                .filter(|item| item.title.to_lowercase().contains(text.to_lowercase().as_str()))
+                .map(|entry| {
+                    if entry.children.row_count() > 0 {
+                        entry
+                            .children
+                            .iter()
+                            .map(|item| (item.title, item.key))
+                            .collect::<Vec<_>>()
+                    } else {
+                        vec![(entry.category, entry.key)]
+                    }
+                })
+                .flatten()
+                .filter_map(|item| {
+                    if item.0.to_lowercase().contains(text.to_lowercase().as_str()) {
+                        Some(item.1)
+                    } else {
+                        None
+                    }
+                })
                 .collect::<Vec<_>>();
 
             if entries.is_empty() {

ui/base/badge.slint

@@ -25,7 +25,7 @@ export component Badge inherits Rectangle {
     in-out property <length> hpadding: Theme.padding * 4;
     in-out property <length> vpadding: Theme.padding;
 
-    background: Theme.third-brand-color;
+    background: Theme.thirdly-brand-color;
     border-width: 2px;
     border-radius: self.height / 2;
     border-color: Theme.base-color;

ui/base/btn.slint

@@ -11,18 +11,18 @@ export component CancelBtn inherits IconBtn {
     bg-color: Theme.info-color.brighter(50%);
     bg-pressed-color: self.bg-color.darker(30%);
     colorize: self.bg-pressed-color.darker(100%);
-    icon-valignment: LayoutAlignment.end;
+    icon-valignment: ImageVerticalAlignment.bottom;
     text: Logic.tr("Cancel");
 }
 
 export component ConfirmBtn inherits IconBtn {
     use-auto-size: true;
     icon: Icons.success;
     border-radius: Theme.border-radius;
-    bg-color: Theme.third-brand-color.darker(20%);
+    bg-color: Theme.thirdly-brand-color.darker(20%);
     bg-pressed-color: self.bg-color.darker(30%);
     colorize: Theme.light-text-color;
-    icon-valignment: LayoutAlignment.end;
+    icon-valignment: ImageVerticalAlignment.bottom;
     text: Logic.tr("Confirm");
 }
 

ui/base/check-btn.slint

@@ -31,7 +31,7 @@ export component CheckBtn inherits Rectangle {
                 height: self.width;
                 border-width: 2px;
                 border-radius: Theme.border-radius;
-                border-color: root.enabled ? (root.checked ? Theme.third-brand-color : Theme.secondary-text-color) : Theme.disabled-color;
+                border-color: root.enabled ? (root.checked ? Theme.thirdly-brand-color : Theme.secondary-text-color) : Theme.disabled-color;
 
                 if root.checked: Image {
                     width: 60%;

ui/base/circle-progress.slint

@@ -19,7 +19,7 @@ export component CircleProgress inherits Rectangle {
     in-out property <length> radius: 80px;
     in-out property <length> ring-width: 16px;
 
-    in-out property <color> finished-progress-color: Theme.third-brand-color;
+    in-out property <color> finished-progress-color: Theme.thirdly-brand-color;
     in-out property <color> unfinished-progress-color: Theme.secondary-background;
 
     in-out property <color> finished-text-background: Theme.success-color;

ui/base/def.slint

@@ -35,5 +35,20 @@ export struct TreeEntry {
     key: string,
     parent-node: string,
     current-node: string,
+    icon: image,
+}
+
+export struct SideBarChildEntry {
+    key: string,
+    title: string,
+    icon: image,
+}
+
+export struct SideBarEntry {
+    key: string,
+    is-open: bool,
+    category: string,
+    icon: image,
+    children: [SideBarChildEntry],
 }
 

ui/base/icon-btn.slint

@@ -27,7 +27,7 @@ export component IconBtn inherits Rectangle {
     in-out property <length> auto-size-hpadding: Theme.padding * 4;
 
     in-out property <length> spacing: Theme.spacing;
-    in-out property <LayoutAlignment> icon-valignment: LayoutAlignment.center;
+    in-out property <ImageVerticalAlignment> icon-valignment: ImageVerticalAlignment.center;
 
     in-out property <string> text;
     in-out property <length> font-size: Theme.title4-font-size;
@@ -76,20 +76,16 @@ export component IconBtn inherits Rectangle {
             text: root.text;
         }
 
-        VerticalLayout {
-            alignment: root.icon-valignment;
+        img := Image {
+            vertical-alignment: root.icon-valignment;
+            width: Theme.icon-size;
+            colorize: Theme.icon-color;
+            rotation-angle: 0;
 
-            img := Image {
-                vertical-alignment: center;
-                width: Theme.icon-size;
-                colorize: Theme.icon-color;
-                rotation-angle: 0;
-
-                animate rotation-angle {
-                    duration: Theme.default-animate-duration;
-                    easing: ease-in-out;
-                    iteration-count: root.rotation-type == RotationType.Auto ? -1 : root.icon-rotation-iteration-count;
-                }
+            animate rotation-angle {
+                duration: Theme.default-animate-duration;
+                easing: ease-in-out;
+                iteration-count: root.rotation-type == RotationType.Auto ? -1 : root.icon-rotation-iteration-count;
             }
         }
 

ui/base/line-input.slint

@@ -51,7 +51,7 @@ export component LineInput inherits Rectangle {
     forward-focus: text-input;
     border-radius: Theme.border-radius;
     border-width: text-input.has-focus ? 2px : 1px;
-    border-color: text-input.has-focus ? Theme.third-brand-color : Theme.base-border-color;
+    border-color: text-input.has-focus ? Theme.thirdly-brand-color : Theme.base-border-color;
 
     public function paste() {
         text-input.paste();

ui/base/link.slint

@@ -3,8 +3,10 @@ import { Theme } from "../theme.slint";
 export component Link inherits Text {
     in-out property <bool> is-read;
 
-    callback clicked <=> touch.clicked;
     out property has-hover <=> touch.has-hover;
+    in-out property enabled <=> touch.enabled;
+
+    callback clicked <=> touch.clicked;
 
     wrap: word-wrap;
     font-size: Theme.title5-font-size;

ui/base/log-in.slint

@@ -120,7 +120,7 @@ export component LogIn inherits Rectangle {
                     height: self.text-height + Theme.padding * 2;
                     text: Logic.tr("Log in");
                     font-size: Theme.title3-font-size;
-                    bg-color: Theme.third-brand-color;
+                    bg-color: Theme.thirdly-brand-color;
                     text-color: Theme.light-text-color;
 
                     clicked => {

ui/base/pagination.slint

@@ -55,7 +55,7 @@ export component Pagination inherits Rectangle {
             spacing: Theme.spacing * 4;
             for index in total-pages: TextBtnWithoutIcon {
                 is-circle: true;
-                background: root.real-current-page == index ? Theme.third-brand-color : Colors.transparent;
+                background: root.real-current-page == index ? Theme.thirdly-brand-color : Colors.transparent;
 
                 text: start-page + index + 1;
                 font-size: root.font-size;
@@ -117,7 +117,7 @@ export component Pagination inherits Rectangle {
                 spacing: Theme.spacing * 4;
                 for index in real-show-pages-half: TextBtnWithoutIcon {
                     is-circle: true;
-                    background: root.real-current-page == start-page + index ? Theme.third-brand-color : Colors.transparent;
+                    background: root.real-current-page == start-page + index ? Theme.thirdly-brand-color : Colors.transparent;
 
                     text: start-page + index + 1;
                     font-size: root.font-size;
@@ -154,8 +154,7 @@ export component Pagination inherits Rectangle {
                         is-circle: true;
                         text: inner-real-current-page + 1;
                         font-size: root.font-size;
-                        background: root.real-current-page == inner-real-current-page ? Theme.third-brand-color : Colors.transparent;
-                        text-color: root.real-current-page == inner-real-current-page ? Theme.light-text-color : root.text-color;
+                        background: root.real-current-page == inner-real-current-page ? Theme.thirdly-brand-color : Colors.transparent; text-color: root.real-current-page == inner-real-current-page ? Theme.light-text-color : root.text-color;
 
                         clicked => {
                             root.real-current-page = inner-real-current-page;

ui/base/paragraph.slint

@@ -0,0 +1,65 @@
+import { Theme } from "../theme.slint";
+import { Util } from "../util.slint";
+import { Label } from "label.slint";
+import { Link } from "link.slint";
+import { Divider } from "divider.slint";
+
+export struct ParagraphEntry {
+    title: string,
+    title-link: string,
+    text: string,
+    picture: image,
+}
+
+export component Paragraph inherits Rectangle {
+    in-out property <ParagraphEntry> entry;
+
+    in-out property <length> title-font-size: Theme.title1-font-size;
+    in-out property title-color <=> lb-title.color;
+
+    in-out property <length> text-font-size: Theme.default-font-size;
+    in-out property text-color <=> lb-text.color;
+
+    in-out property <length> picture-size: 300px;
+    in-out property <bool> is-show-divider;
+
+    preferred-height: vbox.preferred-height;
+
+    vbox := VerticalLayout {
+        HorizontalLayout {
+            padding-bottom: Theme.padding * 4;
+
+            lb-title := Link {
+                enabled: entry.title-link != "";
+                text: entry.title;
+                font-size: root.title-font-size;
+                font-weight: Theme.bold-font-weight;
+                color: entry.title-link != "" ? Theme.link-text-color : Theme.primary-text-color;
+
+                clicked => {
+                    Util.open-url("Default", entry.title-link);
+                }
+            }
+        }
+
+        lb-text := Label {
+            text: entry.text;
+            font-size: root.text-font-size;
+            wrap: word-wrap;
+        }
+
+        if entry.picture.width > 0: HorizontalLayout {
+            alignment: LayoutAlignment.center;
+
+            Image {
+                width: root.picture-size;
+                source: entry.picture;
+            }
+        }
+
+        if root.is-show-divider: HorizontalLayout {
+            padding-top: Theme.padding * 4;
+            Divider { }
+        }
+    }
+}

ui/base/pin-codes.slint

@@ -45,7 +45,7 @@ export component PinCodes inherits Rectangle {
             border-radius: Theme.border-radius;
             background: Theme.secondary-background;
             border-width: 2px;
-            border-color: tinput.has-focus ? Theme.third-brand-color : Theme.base-border-color;
+            border-color: tinput.has-focus ? Theme.thirdly-brand-color : Theme.base-border-color;
 
             tinput := TextInput {
                 input-type: root.input-type;

ui/base/process-step.slint

@@ -20,7 +20,7 @@ export component ProcessStep inherits Rectangle {
     in-out property <color> finished-color: Theme.success-color;
     in-out property <color> finished-number-color: Theme.base-color;
 
-    in-out property <color> process-color: Theme.third-brand-color;
+    in-out property <color> process-color: Theme.thirdly-brand-color;
     in-out property <color> process-number-color: Theme.light-text-color;
     in-out property <length> process-line-width: orientation == Orientation.horizontal ? 100px : Theme.default-font-size / 4;
     in-out property <length> process-line-height: orientation == Orientation.horizontal ? Theme.default-font-size / 4 : 100px;

ui/base/progress-bar.slint

@@ -20,7 +20,7 @@ export component ProgressBar inherits Rectangle {
     in-out property <bool> is-moving-text;
     in-out property <Orientation> orientation: Orientation.horizontal;
 
-    in-out property <color> finished-progress-color: Theme.third-brand-color;
+    in-out property <color> finished-progress-color: Theme.thirdly-brand-color;
     in-out property <color> unfinished-progress-color: Theme.secondary-background;
 
     in-out property <string> finished-text: Logic.tr("Finished");

ui/base/radio-btn.slint

@@ -31,7 +31,7 @@ export component RadioBtn inherits Rectangle {
                 height: self.width;
                 border-width: 2px;
                 border-radius: self.width / 2;
-                border-color: root.enabled ? (root.checked ? Theme.third-brand-color : Theme.secondary-text-color) : Theme.disabled-color;
+                border-color: root.enabled ? (root.checked ? Theme.thirdly-brand-color : Theme.secondary-text-color) : Theme.disabled-color;
 
                 if root.checked: Rectangle {
                     width: 60%;

ui/base/search.slint

@@ -65,6 +65,7 @@ export component Search inherits Rectangle {
         font-size: root.font-size;
 
         clicked => {
+            root.is-show-popup = false;
             root.search(self.text);
         }
 

ui/base/select.slint

@@ -109,7 +109,7 @@ export component Select inherits Rectangle {
                             overflow: elide;
                             text: value;
                             font-size: root.font-size;
-                            color: is-selected ? Theme.third-brand-color : Theme.primary-text-color;
+                            color: is-selected ? Theme.thirdly-brand-color : Theme.primary-text-color;
                         }
 
                         if is-selected: VerticalLayout {

ui/base/setting-entry.slint

@@ -47,26 +47,30 @@ export component SettingEntry inherits Rectangle {
 export component SettingEntryV2 inherits Rectangle {
     in-out property text <=> label.text;
     in-out property font-size <=> label.font-size;
+    in-out property text-color <=> label.color;
+    in-out property font-weight <=> label.font-weight;
+
     in-out property icon <=> img.source;
     in-out property icon-colorize <=> img.colorize;
     in-out property icon-size <=> img.width;
     out property has-hover <=> ta.has-hover;
 
     in-out property <bool> is-show-indicator;
-    in-out property <length> h-padding: Theme.padding * 2;
-    in-out property <length> v-padding: Theme.padding * 2;
+    in-out property <length> hpadding: Theme.padding * 2;
+    in-out property <length> vpadding: Theme.padding * 2;
 
     in-out property <bool> is-show-right-icon;
     in-out property <image> right-icon: Icons.star;
-    in-out property <color> right-icon-colorize;
+    in-out property <color> right-icon-colorize: label.color;
+    in-out property <length> right-icon-size;
 
     callback clicked();
 
     hbox := HorizontalLayout {
-        padding-left: h-padding;
-        padding-right: h-padding;
-        padding-top: v-padding;
-        padding-bottom: v-padding;
+        padding-left: hpadding;
+        padding-right: hpadding;
+        padding-top: vpadding;
+        padding-bottom: vpadding;
 
         alignment: LayoutAlignment.space-between;
 
@@ -101,7 +105,7 @@ export component SettingEntryV2 inherits Rectangle {
 
         if is-show-right-icon: Image {
             vertical-alignment: center;
-            width: root.icon-size;
+            width: root.right-icon-size;
             colorize: root.right-icon-colorize;
             source: root.right-icon;
         }