feat: custom titlebar + glass-panel-as-window shell#228
Closed
lshw54 wants to merge 11 commits intopungin:codefrom
Closed
feat: custom titlebar + glass-panel-as-window shell#228lshw54 wants to merge 11 commits intopungin:codefrom
lshw54 wants to merge 11 commits intopungin:codefrom
Conversation
- Set decorations: false to remove OS titlebar - Set transparent: true for glass-panel-as-window effect - Set resizable: false to lock window size - Set initial window size to 560x480 (LoginRegionSelection) - Add permissions: core:window:allow-minimize, allow-close, allow-start-dragging, allow-set-size
- Custom window titlebar with drag (startDragging API), minimize, close - Route-aware title text via route.meta.titleKey - Route-aware Material Symbols icon via route.meta.titleIcon - Default slot for per-page action buttons (settings, about, region) - Glass-tinted style matching mockup design system
- Add Material Symbols Outlined font to index.html - Transparent background on html/body for glass-panel-as-window - Disable text selection (user-select: none) for native app feel - Disable right-click context menu (contextmenu preventDefault) - Allow text selection in input/textarea elements - Custom thin scrollbar (6px, rounded, subtle) - Element Plus MessageBox glass-style override (rounded, blur overlay, gradient primary button) - Restore bf-glass-panel to original rgba(255,255,255,0.65)
- Add RouteMeta: titleKey, titleIcon, windowWidth, windowHeight - Add afterEach hook: resize window via ResizeObserver on [data-window-root] element (auto-fit content, clamp 300-900px) - Add resizeWindow() export for manual page-level resize - Import @tauri-apps/api/window + @tauri-apps/api/dpi - Per-route window dimensions matching mockup glass-panel sizes: LoginRegion 560x480, IdPass 560x520, QR 560x680, GamePass 560x460, Totp 520x380, Wait 480x360, Verify 560x480, Accounts 560x640, Settings 880x680, About 560x680, ManageAccount 880x640
- Add titleBar.* keys (minimize, close, regionSelection, login, totp, loginWait, verify, accounts, settings, about, manageAccount) in zh-TW, zh-CN, en-US - Add loginQr.enlarge, loginQr.copyQr, loginQr.copyQrSuccess - Remove dead loginShell.heading/subline (replaced by TitleBar) - Remove dead accountList.title/subtitle (replaced by TitleBar) - Set warnHtmlMessage: false to suppress AboutText HTML warning
- Replace brand header (icon + heading + subline) with TitleBar - Add region switcher button (TW/HK toggle) in titlebar slot - Add settings + about icon buttons in titlebar slot - Region toggle writes to Config.xml and navigates to id-pass - Hide region switcher on the region picker page itself - Glass-panel fills window with mica gradient background - Body padding reduced to 1.5rem, overflow-x hidden
…ghlight - Replace text region codes (TW/HK) with Material Symbols flag icon - Add check_circle/info icons to region badges - Add tips_and_updates icon to tip hint bar with flex layout - Highlight currently saved region tile with orange ring - Default to TW when no region saved - Skip picker on mount if region already saved (router.replace to id-pass) - Update heading to 1.5rem/800 weight matching mockup - Use --bf-primary/--bf-primary-container design tokens
- Add enlarge button (zoom_in) — opens fullscreen overlay with 360px QR - Add copy QR button (content_copy) — copies QR image to clipboard - Reduce action buttons from size=large to size=default - Add overlay dialog with close button for enlarged QR view - Add box-sizing/overflow-hidden to prevent button overflow - New styles: qr-form__qr-actions, qr-form__overlay, qr-form__enlarged
- Replace mica-bg + wrapper pattern with direct bf-glass-panel - Embed TitleBar with settings + about Material Symbols buttons - Add mica gradient background to glass-panel - Add data-window-root for auto-height detection - Add scroll area (flex:1, overflow-y:auto) - Remove unused SettingIcon import - Add titlebar button styles matching LoginPage pattern
- Replace mica-bg + wrapper pattern with direct bf-glass-panel - Embed TitleBar as first child of each page - Add mica gradient background to glass-panel - Add data-window-root for auto-height detection - Add scroll area with flex layout for content overflow
- Add tests/setup.ts: global mocks for @tauri-apps/api/window, @tauri-apps/api/dpi, and TitleBar component stub - Wire setup file in vitest.config.ts (setupFiles) - LoginPage.spec: add Pinia plugin, test TitleBar renders - LoginRegionSelection.spec: use toContain for tip text (icon prefix) - i18n/index.spec: replace loginShell.heading with titleBar.minimize - key-usage.spec: add titleBar.* as dynamic consumer (route meta)
15 tasks
Collaborator
|
Cherry-pick and revise in #229 |
YCC3741
added a commit
that referenced
this pull request
Apr 20, 2026
CI Prettier check caught 5 files that were prettier-clean on `code` but got reformatted off-style by the PR #228 cherry-picks and the earlier glass-panel restructure. Running `prettier --write` on just those files restores the committed style: - README.md - src/pages/AccountList.vue (template indentation after the glass-panel wrap) - src/stores/config.ts - src/windows/MapleTools.vue - tests/unit/pages/AccountList.spec.ts (from the previous unused-var fix) Pure whitespace / quote-style changes — no logic.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replace the OS-provided window decoration with a custom titlebar embedded inside each page's glass-panel, matching the mockup design system. The glass-panel card IS the window — no extra background visible.
Changes
Tauri config (
src-tauri/)decorations: false,transparent: true,resizable: falseallow-minimize,allow-close,allow-start-dragging,allow-set-sizeTitleBar component (
src/components/TitleBar.vue)startDragging()API, minimize/close buttonsroute.metaApp shell (
src/App.vue,index.html,src/main.ts)Router (
src/router/index.ts)RouteMetaextended:titleKey,titleIcon,windowWidth,windowHeightafterEachhook: auto-resize window viaResizeObserveron[data-window-root]resizeWindow()helperPages (LoginPage, AccountList, Settings, About, ManageAccount)
LoginRegionSelection
flagicon,check_circle/infobadges,tips_and_updateshintQrForm
size="default")i18n (
src/i18n/messages.ts)titleBar.*keys (3 locales),loginQr.enlarge/copyQr/copyQrSuccessloginShell.*,accountList.title/subtitlewarnHtmlMessage: falsefor AboutTextTests
@tauri-apps/api/window,@tauri-apps/api/dpi, TitleBar stub