diff --git a/ui/base/news.slint b/ui/base/news.slint index 862116f..d02314d 100644 --- a/ui/base/news.slint +++ b/ui/base/news.slint @@ -1,5 +1,5 @@ -import { Theme, Icons } from "../theme.slint"; -import { Link } from "../link.slint"; +import { Theme } from "../theme.slint"; +import { Link } from "./link.slint"; export component News inherits Rectangle { height: vbox.preferred-height; diff --git a/ui/base/slide-card.slint b/ui/base/slide-card.slint index dfc4a59..b60224b 100644 --- a/ui/base/slide-card.slint +++ b/ui/base/slide-card.slint @@ -11,13 +11,14 @@ import { Label } from "./label.slint"; // { // icon: Icons.delete, // text: "Delete", +// colorize: Colors.red, // }, // { // icon: Icons.edit, // text: "Edit", +// colorize: Colors.red, // }, // ]; - // Rectangle { // height: 80px; // background: pink; @@ -29,9 +30,10 @@ export component SlideCard inherits Rectangle { callback icon-clicked(int); - in property <[{icon: image, text: string}]> icons; + in property <[{icon: image, text: string, colorize: color}]> icons; in property icons-background; in property hide-icons-after-clicked: true; + in property gap: 0px; private property max-move-pixels-up-bound: self.width * 0.04; private property max-move-pixels-low-bound: self.width * 0.02; @@ -39,7 +41,7 @@ export component SlideCard inherits Rectangle { private property is-hide-icons: true; public function show-icons() { - root.x = -icons-scope.width; + root.x = -icons-scope.width - gap; root.is-show-icons = true; root.is-hide-icons = false; } @@ -75,9 +77,10 @@ export component SlideCard inherits Rectangle { } icons-scope := Rectangle { - x: root.width; + x: root.width + gap; background: root.icons-background; width: Math.max(root.width * 0.15, Theme.icon-size * 2) * icons.length; + HorizontalLayout { spacing: Theme.spacing; for item[index] in root.icons: Rectangle { @@ -87,12 +90,14 @@ export component SlideCard inherits Rectangle { IconBtn { icon: item.icon; + colorize: item.colorize; } if item.text != "": HorizontalLayout { alignment: LayoutAlignment.center; Label { text: item.text; + color: item.colorize; } } } diff --git a/ui/panel/bodyer/rss.slint b/ui/panel/bodyer/rss.slint index 401eebc..743e270 100644 --- a/ui/panel/bodyer/rss.slint +++ b/ui/panel/bodyer/rss.slint @@ -3,11 +3,11 @@ import { Theme, Icons } from "../../theme.slint"; import { Store } from "../../store.slint"; import { Logic } from "../../logic.slint"; import { Util } from "../../util.slint"; -import { IconBtn, Head, Label, IconsDialogSetting, Tag, Link, Label, NoDataImg, ElevatedBtn, NoMessageImg, CenterLayout , Blanket, OkCancelDialogSetting} from "../../base/widgets.slint"; -import { Theme } from "../../theme.slint"; +import { IconBtn, Head, Label, IconsDialogSetting, Tag, Link, Label, NoDataImg, ElevatedBtn, NoMessageImg, CenterLayout, Loading, Blanket, OkCancelDialogSetting} from "../../base/widgets.slint"; component RHead inherits Head { callback scroll-to-top <=> ta.clicked; + callback hide-loading-indicator(); icon: Icons.menu; icon-width: Theme.icon-size * 1.2; @@ -35,6 +35,8 @@ component RHead inherits Head { icon: Icons.delete; clicked => { + root.hide-loading-indicator(); + OkCancelDialogSetting.title-type = "warning"; OkCancelDialogSetting.title-text = Logic.tr(Store.is-cn, "警告"); OkCancelDialogSetting.body-text = Logic.tr(Store.is-cn, "是否删除全部?"); @@ -263,6 +265,7 @@ export component Entry inherits Rectangle { export component EntryList inherits Rectangle { private property current-list-index: -1; + in-out property is-loading; clip: true; @@ -389,6 +392,7 @@ export component EntryList inherits Rectangle { colorize: Theme.danger-color; clicked => { + root.is-loading = false; current-list-index = Logic.current-rsslist-index(Store.current-rss-uuid); if (current-list-index >= 0 && current-list-index < Store.rss-lists.length) { Store.rss-lists[current-list-index].current-viewport-y = lv.viewport-y; @@ -405,13 +409,19 @@ export component EntryList inherits Rectangle { } } - if Store.rss-entrys.length == 0: CenterLayout { + if !is-loading && Store.rss-entrys.length == 0: CenterLayout { NoDataImg { width: root.width * 0.6; text: Logic.tr(Store.is-cn, "没有消息"); } } + if is-loading && Store.rss-entrys.length == 0: Loading { + icon-size: Theme.icon-size * 2; + colorize: Theme.brand-color; + loading-text: Logic.tr(Store.is-cn, "正在同步..."); + } + if !Store.is-show-side-rsslist: VerticalLayout { x: root.width - self.preferred-width - Theme.padding * 4; y: root.height - self.preferred-height - Theme.padding * 4; @@ -433,6 +443,7 @@ export component EntryList inherits Rectangle { enable-rotation-animation: true; clicked => { + root.is-loading = true; if (Store.rss-lists.length == 0) { Logic.load-all-rss(); } @@ -448,6 +459,7 @@ export component EntryList inherits Rectangle { component Body inherits Rectangle { in-out property is-show-rsslist <=> rsslist.is-show-list; + in-out property is-loading <=> entrylist.is-loading; public function entrylist-scroll-to-top() { entrylist.scroll-to-top(); @@ -469,6 +481,9 @@ export component Rss inherits VerticalLayout { scroll-to-top => { body.entrylist-scroll-to-top(); } + hide-loading-indicator => { + body.is-loading = false; + } } body := Body { }