Skip to content

Commit

Permalink
[+] add PopupAction
Browse files Browse the repository at this point in the history
  • Loading branch information
heng30 committed Aug 26, 2024
1 parent f1181d6 commit d62a79a
Show file tree
Hide file tree
Showing 10 changed files with 297 additions and 124 deletions.
2 changes: 2 additions & 0 deletions src/logic/mod.rs
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ use crate::slint_generatedAppWindow::AppWindow;
mod about;
mod clipboard;
mod confirm_dialog;
mod popup_action;
mod setting;
mod toast;
mod tr;
Expand All @@ -13,6 +14,7 @@ pub fn init(ui: &AppWindow) {
clipboard::init(ui);
toast::init(ui);
confirm_dialog::init(ui);
popup_action::init(ui);
about::init(ui);
setting::init(ui);
}
19 changes: 19 additions & 0 deletions src/logic/popup_action.rs
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
use crate::slint_generatedAppWindow::{AppWindow, Logic, PopupActionSetting};
use slint::ComponentHandle;

pub fn init(ui: &AppWindow) {
let ui_handle = ui.as_weak();
ui.global::<PopupActionSetting>()
.on_action(move |action, _user_data| {
let ui = ui_handle.unwrap();

#[allow(clippy::single_match)]
match action.as_str() {
"remove-all-cache" => {
println!("handel remove all cache");
ui.global::<Logic>().invoke_remove_all_cache();
}
_ => (),
}
});
}
10 changes: 5 additions & 5 deletions src/logic/tr.rs
Original file line number Diff line number Diff line change
Expand Up @@ -286,12 +286,12 @@ pub fn tr(text: &str) -> String {
("Window size", "窗口大小"),
("width", "宽"),
("height", "高"),
("setting","设置"),
("about","关于"),
("maximal","最大化"),
("setting", "设置"),
("about", "关于"),
("maximal", "最大化"),
("normal", "正常大小"),
("minimal","最小化"),
("close","关闭"),
("minimal", "最小化"),
("close", "关闭"),
("Jump to", "跳转到"),
]);

Expand Down
4 changes: 2 additions & 2 deletions ui/appwindow.slint
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Theme, Icons } from "./theme.slint";
import { Store, SettingDetailIndex, DeviceType, SettingProxy } from "./store.slint";
import { Panel } from "./panel/panel.slint";
import { SettingIconsBar } from "./panel/setting/desktop.slint";
import { LoadingStatus, Toast, IconsDialogSetting, IconsDialog, ConfirmDialogDialog, ConfirmDialogSetting, Blanket, LandingPage, AboutSetting, ToastSetting, ToastStatus, AppPosType } from "./base/widgets.slint";
import { LoadingStatus, Toast, IconsDialogSetting, IconsDialog, ConfirmDialogDialog, ConfirmDialogSetting, Blanket, LandingPage, AboutSetting, ToastSetting, ToastStatus, AppPosType, PopupActionSetting } from "./base/widgets.slint";

export component AppWindow inherits Window {
preferred-width: Theme.default-width;
Expand Down Expand Up @@ -68,5 +68,5 @@ export component AppWindow inherits Window {
}

export {
AppPosType, Util, Logic, Store, Theme, Icons, IconsDialogSetting, LoadingStatus, SettingDetailIndex, AboutSetting, ToastSetting, ToastStatus, DeviceType , SettingProxy
AppPosType, Util, Logic, Store, Theme, Icons, IconsDialogSetting, LoadingStatus, SettingDetailIndex, AboutSetting, ToastSetting, ToastStatus, DeviceType , SettingProxy, PopupActionSetting
}
119 changes: 119 additions & 0 deletions ui/base/popup-action.slint
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
import { ComponentPosition } from "def.slint";
import { Theme } from "../theme.slint";
import { Util } from "../util.slint";
import { Label } from "label.slint";
import { SettingEntryV2 } from "setting-entry.slint";
import { Divider } from "divider.slint";

// Example:
// Rectangle {
// background: red;
// width: 300px;
// height: 300px;
// ta := TouchArea {
// pointer-event(event) => {
// if (event.kind == PointerEventKind.down && event.button == PointerEventButton.right) {
// PopupActionSetting.show(parent.absolute-position.x + self.mouse-x, parent.absolute-position.y + self.mouse-y, [
// { icon: Icons.delete, text: "Delete", action: "delete-item" },
// { icon: Icons.add-fill, text: "Add", action: "add-item" },
// { icon: Icons.recover-from-trash, text: "Remove trash", action: "remove-all-cache" }
// ]);
// }
// }
// }
// }

export struct PopupActionEntry {
icon: image,
text: string,
action: string,
user-data: string,
}

export global PopupActionSetting {
in-out property <bool> is-show;
in-out property <[PopupActionEntry]> actions;
in-out property <length> pressed-absolute-x;
in-out property <length> pressed-absolute-y;

public function show(absolute-x: length, absolute-y: length, actions: [PopupActionEntry]) {
self.pressed-absolute-x = absolute-x;
self.pressed-absolute-y = absolute-y;
self.actions = actions;
self.is-show = true;
}

public function hide() {
is-show = false;
}

callback action(string, string);
}

export component PopupAction inherits Rectangle {
in-out property <length> window-width;
in-out property <length> window-height;
in-out property <length> spacing: Theme.spacing * 2;

in-out property <color> icon-colorize: Theme.icon-color;
in-out property <length> icon-size: Theme.icon-size;
in-out property <length> font-size: Theme.title3-font-size;

pure function calc-x() -> length {
return Math.clamp(PopupActionSetting.pressed-absolute-x + Theme.padding * 2, 0px, root.window-width - rect.width);
}

pure function calc-y() -> length {
return Math.clamp(PopupActionSetting.pressed-absolute-y + Theme.padding * 2, 0px, root.window-height - rect.height);
}

fs := FocusScope { }

TouchArea {
clicked => {
fs.focus();
PopupActionSetting.hide();
}
}

rect := Rectangle {
x: calc-x();
y: calc-y();

width: vbox.preferred-width + Theme.spacing * 2;
height: vbox.preferred-height + Theme.padding * 2;
background: Theme.base-background;
border-color: Theme.base-border-color;
border-width: 1px;
border-radius: Theme.border-radius;

vbox := VerticalLayout {
alignment: LayoutAlignment.center;
spacing: root.spacing;
width: self.preferred-width;
height: self.preferred-height;

for entry[index] in PopupActionSetting.actions: VerticalLayout {
SettingEntryV2 {
icon: entry.icon;
text: entry.text;
font-size: root.font-size;
icon-colorize: root.icon-colorize;
icon-size: root.icon-size;
background: self.has-hover ? Theme.secondary-background : Colors.transparent;

clicked => {
PopupActionSetting.hide();
PopupActionSetting.action(entry.action, entry.user-data);
}
}

if index != PopupActionSetting.actions.length - 1: HorizontalLayout {
padding-left: Theme.padding * 2;
padding-right: Theme.padding * 2;
Divider { }
}
}
}
}
}
57 changes: 38 additions & 19 deletions ui/base/search.slint
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,19 @@ import { Util } from "../util.slint";
import { LineInput } from "line-input.slint";
import { Label } from "label.slint";

// Example:
// Search {
// width: 500px;
// values: ["Hello", "World", "Nice", "Good"];
// enabled-popup: true;
// search(text) => {
// debug(text);
// }
// edited(text) => {
// debug(text);
// }
// }

export component Search inherits Rectangle {
in-out property text <=> input.text;

Expand All @@ -29,7 +42,6 @@ export component Search inherits Rectangle {
root.is-show-popup = false;
return;
}

matched-values = Util.search-str-items-by(root.values, text);
if (matched-values.length > 0) {
root.is-show-popup = true;
Expand All @@ -44,29 +56,36 @@ export component Search inherits Rectangle {
border-radius: Theme.border-radius;
border-color: Theme.focus-color;

fs := FocusScope {}

input := LineInput {
is-show-icon: true;
icon: Icons.search;
placeholder-text: Logic.tr("Search");
border-radius: root.border-radius;
font-size: root.font-size;

clicked => {
root.search(self.text);
fs := FocusScope {
key-pressed(event) => {
if (event.text == Key.Escape) {
fs.focus();
root.is-show-popup = false;
}
accept
}

accepted => {
root.search(self.text);
}
input := LineInput {
is-show-icon: true;
icon: Icons.search;
placeholder-text: Logic.tr("Search");
border-radius: root.border-radius;
font-size: root.font-size;

clicked => {
root.search(self.text);
}

edited => {
if (root.enabled-popup) {
root.inner-search(self.text);
accepted => {
root.search(self.text);
}

root.edited(self.text);
edited => {
if (root.enabled-popup) {
root.inner-search(self.text);
}
root.edited(self.text);
}
}
}

Expand Down
13 changes: 13 additions & 0 deletions ui/base/slider.slint
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,19 @@ import { Logic } from "../logic.slint";
import { ProgressBar } from "progress-bar.slint";
import { Label } from "label.slint";

// Example:
// Slider {
// value: 30;
// minimum: 20;
// maximum: 80;
// changed(value) => {
// debug(value);
// }
// released(value) => {
// debug(value);
// }
// }

export component Slider inherits Rectangle {
in-out property <float> value: 0;
in-out property <float> minimum: 0;
Expand Down
6 changes: 5 additions & 1 deletion ui/base/widgets.slint
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ import { Select } from "select.slint";
import { Slider } from "slider.slint";
import { Collapse, CollapseEntry } from "collapse.slint";
import { Search } from "search.slint";
import { PopupAction, PopupActionSetting, PopupActionEntry } from "popup-action.slint";

export {
AppPosType,
Expand Down Expand Up @@ -168,5 +169,8 @@ SwitchBtn,
Slider,
Collapse,
CollapseEntry,
Search
Search,
PopupAction,
PopupActionSetting,
PopupActionEntry
}
86 changes: 86 additions & 0 deletions ui/panel/desktop/home.slint
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { Theme, Icons } from "../../theme.slint";
import { Util } from "../../util.slint";
import { ProcessStep, CircleProgress, RecordIndicator, ProgressBar, ComponentPosition, Pagination, SkeletonType, Skeleton, PinCodes, Badge, Banner, CheckBtn, Select, ComponentPosition, Slider, CollapseEntry, Collapse, Search, PopupActionEntry, PopupActionSetting, IconBtn, Label } from "../../base/widgets.slint";
import { SettingIconsBar } from "../setting/desktop.slint";

export component Home inherits Rectangle {
VerticalLayout {
padding: Theme.padding * 2;
spacing: Theme.spacing * 5;
vertical-stretch: 1;
alignment: LayoutAlignment.center;

VerticalLayout {
alignment: center;
spacing: Theme.spacing * 10;

HorizontalLayout {
alignment: center;
CircleProgress {
ring-width: 15px;
progress: Util.progress-value(5s);
}
}

HorizontalLayout {
alignment: center;
height: 500px;

Search {
width: 500px;
values: ["Hello", "World", "Nice", "Good"];
enabled-popup: true;

search(text) => {
debug(text);
}

edited(text) => {
debug(text);
}
}
}
}

HorizontalLayout {
alignment: center;

ProcessStep {
steps: ["First Step", "Second Step", "Third Step", "Finished"];
current-step: Util.progress-value-int(self.steps.length, self.steps.length * 1s);
}
}

HorizontalLayout {
alignment: LayoutAlignment.center;

Rectangle {
background: red;
width: 300px;
height: 300px;

ta := TouchArea {
pointer-event(event) => {
if (event.kind == PointerEventKind.down && event.button == PointerEventButton.right) {
PopupActionSetting.show(parent.absolute-position.x + self.mouse-x, parent.absolute-position.y + self.mouse-y, [
{ icon: Icons.delete, text: "Delete", action: "delete-item" },
{ icon: Icons.add-fill, text: "Add", action: "add-item" },
{ icon: Icons.recover-from-trash, text: "Remove trash", action: "remove-all-cache" }
]);
}
}
}
}
}

HorizontalLayout {
alignment: LayoutAlignment.center;

SettingIconsBar {
background: Theme.secondary-background;
h-padding: Theme.spacing * 2;
h-spacing: Theme.padding * 5;
}
}
}
}
Loading

0 comments on commit d62a79a

Please sign in to comment.