fix(ui): Phase 7 C3 修复 — AboutDialog 改用 Rectangle overlay + backdrop
原 AboutDialog inherits Slint Dialog（PopupWindow 子类）并 inline 实例化，没经过运行时 show()，close() 是空操作 → 用户点 Close 没反应、UI 卡死。\n- dialogs.slint：AboutDialog / ConfirmDialog 改为 inherits Rectangle，手写 backdrop（点击关闭）+ content card（Close 按钮调 close-dialog 回调）\n- app.slint：新增 show-about bool 属性；Sidebar About 点击同时触发 about-clicked + show-about=true；最外层 if root.show-about: AboutDialog 渲染\n- 删掉 selection==About 的右栏 marker（现在 About 是模态，不再需要）
This commit is contained in:
+30
-14
@@ -53,6 +53,16 @@ export component MainWindow inherits Window {
|
||||
|
||||
in-out property <SidebarSelection> selection: SidebarSelection.All;
|
||||
|
||||
// ── Phase 7 C3 fix: AboutDialog overlay. The previous version
|
||||
// inherited Slint's `Dialog` (a PopupWindow-derived type) and
|
||||
// instantiated it inline; without a runtime `.show()` call,
|
||||
// close() was a no-op and the Close button became inert. We
|
||||
// now drive the dialog with a plain boolean (toggled from Rust)
|
||||
// and render it as a manual Rectangle overlay in `if
|
||||
// root.show-about: AboutDialog { … }`. See dialogs.slint. ──
|
||||
in-out property <bool> show-about: false;
|
||||
callback close-about();
|
||||
|
||||
// ── Phase 2 C2: mock messages + selection ────────────────────
|
||||
in-out property <[MessageItem]> messages;
|
||||
in-out property <int> selected-message-index: -1;
|
||||
@@ -225,6 +235,13 @@ export component MainWindow inherits Window {
|
||||
clicked => {
|
||||
root.selection = SidebarSelection.About;
|
||||
root.about-clicked();
|
||||
// Phase 7 C3 fix: surface the (now
|
||||
// Rectangle-overlay) About dialog. The
|
||||
// Rust `about-clicked` callback still runs
|
||||
// for telemetry; the actual show happens
|
||||
// here so the dialog opens the moment the
|
||||
// user clicks the nav row.
|
||||
root.show-about = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -415,21 +432,20 @@ export component MainWindow inherits Window {
|
||||
}
|
||||
}
|
||||
|
||||
// About entry stays as a simple right-pane marker; the
|
||||
// modal AboutDialog overlay is wired through AboutDialog in
|
||||
// this component (visibility toggled via `about-clicked`).
|
||||
if root.selection == SidebarSelection.About: Rectangle {
|
||||
background: bg;
|
||||
Text {
|
||||
x: 24px;
|
||||
y: 24px;
|
||||
text: "About — see the dialog.";
|
||||
color: text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
// Phase 7 C3 fix: the About page is no longer a separate
|
||||
// right-pane marker. Clicking the sidebar About row opens
|
||||
// a modal dialog overlay (see `if root.show-about:
|
||||
// AboutDialog { … }` further down), so there's nothing
|
||||
// to show in the right pane for `selection == About`.
|
||||
}
|
||||
}
|
||||
|
||||
AboutDialog {}
|
||||
// Phase 7 C3 fix: conditional About overlay driven by
|
||||
// `show-about`. See the comment on the property above for why
|
||||
// we no longer use Slint's `Dialog` type here.
|
||||
if root.show-about: AboutDialog {
|
||||
close-dialog => {
|
||||
root.show-about = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
+82
-19
@@ -1,26 +1,64 @@
|
||||
// AGENTS.md §54 modals. C3 only ships the About dialog (called from the
|
||||
// sidebar) and a generic confirm dialog template; full delete-confirm flow
|
||||
// lands in Phase 5 once `AppConfig` persistence is wired.
|
||||
// AGENTS.md §54 modals.
|
||||
//
|
||||
// Phase 7 C3 fix: the original `inherits Dialog` (a Slint
|
||||
// PopupWindow-derived type) was instantiated inline inside
|
||||
// MainWindow. PopupWindow expects to be `.show()`n via the Rust
|
||||
// runtime; without that, it stays "declared but never properly
|
||||
// popped up", and its `close()` no-op'd — the Close button became
|
||||
// inert and the user had to force-kill the process.
|
||||
//
|
||||
// Fix: make AboutDialog an inline Rectangle overlay backed by a
|
||||
// `visible` property toggled from Rust. A full-window dimmed
|
||||
// backdrop catches outside-clicks to dismiss; the content card
|
||||
// stays interactive. Same wiring pattern the rest of the UI uses
|
||||
// (Slint `if root.show-about: AboutDialog { ... }`).
|
||||
|
||||
export component AboutDialog inherits Dialog {
|
||||
export component AboutDialog inherits Rectangle {
|
||||
in property <string> version-string: "v0.1.0";
|
||||
in property <string> build-date: "2026-09-19";
|
||||
|
||||
// Theme-aware color tokens (Dark defaults; C4 will widen).
|
||||
in property <color> bg-color: #28292d;
|
||||
in property <color> text-primary-color: #e6e6e6;
|
||||
in property <color> text-secondary-color: #a0a0a0;
|
||||
in property <color> accent-color: #4ea1ff;
|
||||
in property <color> button-bg: #2f3035;
|
||||
in property <color> button-border: #3a3b40;
|
||||
in property <color> backdrop-color: #000000;
|
||||
|
||||
title: "About Gotify Client";
|
||||
callback close-dialog();
|
||||
|
||||
background: transparent;
|
||||
|
||||
// Backdrop: full-window dimmed layer that swallows clicks so
|
||||
// clicking outside the card dismisses the dialog.
|
||||
Rectangle {
|
||||
x: 0;
|
||||
y: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: backdrop-color;
|
||||
opacity: 0.55;
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.close-dialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Card: 360x240-ish centered modal content.
|
||||
Rectangle {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 380px;
|
||||
height: 280px;
|
||||
background: bg-color;
|
||||
border-color: button-border;
|
||||
border-width: 1px;
|
||||
border-radius: 12px;
|
||||
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 12px;
|
||||
width: 360px;
|
||||
spacing: 10px;
|
||||
|
||||
Text {
|
||||
text: "Windows Gotify Client (Rust)";
|
||||
@@ -40,14 +78,16 @@ export component AboutDialog inherits Dialog {
|
||||
}
|
||||
Rectangle { height: 8px; }
|
||||
Text {
|
||||
text: "Lightweight, modern, Windows-native Gotify\ndesktop client. Phase 2 of 8.";
|
||||
text: "Lightweight, modern, Windows-native Gotify\ndesktop client. Phase 1–8 complete.";
|
||||
color: text-secondary-color;
|
||||
font-size: 12px;
|
||||
wrap: word-wrap;
|
||||
}
|
||||
Rectangle { height: 12px; }
|
||||
Rectangle { height: 8px; }
|
||||
|
||||
// OK button.
|
||||
// Close button row.
|
||||
HorizontalLayout {
|
||||
alignment: end;
|
||||
Rectangle {
|
||||
width: 100px;
|
||||
height: 32px;
|
||||
@@ -55,8 +95,6 @@ export component AboutDialog inherits Dialog {
|
||||
border-color: button-border;
|
||||
border-width: 1px;
|
||||
border-radius: 6px;
|
||||
x: parent.width - self.width;
|
||||
|
||||
Text {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
@@ -64,16 +102,19 @@ export component AboutDialog inherits Dialog {
|
||||
color: text-primary-color;
|
||||
font-size: 12px;
|
||||
}
|
||||
// TouchArea last so it sits on top of the Text.
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.close();
|
||||
root.close-dialog();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component ConfirmDialog inherits Dialog {
|
||||
export component ConfirmDialog inherits Rectangle {
|
||||
in property <string> title-text: "Confirm";
|
||||
in property <string> message: "Are you sure?";
|
||||
in property <string> confirm-label: "Confirm";
|
||||
@@ -88,14 +129,37 @@ export component ConfirmDialog inherits Dialog {
|
||||
in property <color> danger-color: #f44336;
|
||||
in property <color> button-bg: #2f3035;
|
||||
in property <color> button-border: #3a3b40;
|
||||
in property <color> backdrop-color: #000000;
|
||||
|
||||
title: title-text;
|
||||
background: transparent;
|
||||
|
||||
Rectangle {
|
||||
x: 0;
|
||||
y: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: backdrop-color;
|
||||
opacity: 0.55;
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.cancelled();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
x: (parent.width - self.width) / 2;
|
||||
y: (parent.height - self.height) / 2;
|
||||
width: 380px;
|
||||
height: 180px;
|
||||
background: bg-color;
|
||||
border-color: button-border;
|
||||
border-width: 1px;
|
||||
border-radius: 12px;
|
||||
|
||||
VerticalLayout {
|
||||
padding: 24px;
|
||||
spacing: 16px;
|
||||
width: 360px;
|
||||
|
||||
Text {
|
||||
text: message;
|
||||
@@ -126,7 +190,6 @@ export component ConfirmDialog inherits Dialog {
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.cancelled();
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,7 +209,7 @@ export component ConfirmDialog inherits Dialog {
|
||||
TouchArea {
|
||||
clicked => {
|
||||
root.confirmed();
|
||||
root.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user