Repository navigation
TIOL Frontend UI/UX Redesign — PR Description - #12
Closed
Ken709-mp4 wants to merge 8 commits into
Closed
Ken709-mp4 wants to merge 8 commits into
Ken709-mp4 wants to merge 8 commits into
Conversation
added 8 commits
August 30, 2026 15:31
… panels, custom menu bg color - Move star-rating filter (0–5) from searchbar into #color-filter dropdown panel. - Apply shared .glass liquid-glass style to color-filter, dialogs, preview panel, and selection bar. - Add Liquid Glass theme in Settings alongside Dark/Light. - Add custom menu background color picker, persisted via Tauri set_setting/get_setting. - Update zh-CN / en-US / messages locales.
…lose × - Add a small ✕ close button to #color-filter so users can make multiple selections without the panel closing.\n- Stop click events inside the panel from bubbling, preventing accidental close.\n- Fix clearSharedFilters to reset checkbox-based rating filter instead of setting .value on a <div>.\n- Update i18n (zh-CN/en-US/messages.js) with filterPanelClose.
… close × - Replace flat backgrounds with radial gradient and glassmorphism across sidebar, searchbar, cards, toolbars, statusbar.\n- Add hover/active transitions and scale effects to buttons and cards.\n- Add fadeIn/scaleIn entry animations for cards, dialogs, preview, and filter panel.\n- Remove the explicit ✕ close button from #color-filter.\n- Keep the existing toggle behavior: click 筛选 again to close the dropdown.\n- Clean up filterPanelClose i18n key and related listeners.
- Replace <select> dropdown for semantic/tag search with two pill buttons matching the filter panel style.\n- Add horizontal padding to .view so main content no longer stretches edge-to-edge.\n- Keep searchbar, toolbar, and statusbar spanning full width inside padded views.\n- Fix duplicate semantic-search-input id in HTML.
…boxes - Add left margin and max-width to .settings so the frame no longer hugs the left edge.\n- Make the edit-tag/confirm/rate dialogs more transparent (lighter glass).\n- Replace the rejects view rating dropdown with checkbox set inside #reject-cond-panel, matching the photos filter panel.\n- Share activeRatings Set between photos and rejects; update clear/reset logic.
renderFilterDots, renderRejectConds and renderRejectRatings run at module-load time with the default en-US locale. After initI18n() resolves the saved language and applyStaticI18n() updates static text, re-render these dynamic panels so the saved locale is reflected on first paint.
- Replace the Liquid-Glass-as-a-theme approach with a dedicated on/off toggle in Settings > Effects.\n- Persist the toggle in localStorage (tiol-fx-glass) and toggle the fx-glass class on body.\n- Map the legacy data-theme="liquid-glass" setting to dark + glass on for backward compatibility.\n- Update all CSS selectors from [data-theme="liquid-glass"] / .theme-liquid-glass to .fx-glass.\n- Add settings.fxGlass i18n key in zh-CN, en-US and regenerate messages.js.
Override light-theme variables on .sidebar so the navigation bar stays dark with light text regardless of the selected theme. Also keeps the active indicator and hover states readable.
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
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.
Summary
This PR gives TIOL a fresh, Apple-style "liquid glass" redesign: the star-rating filter is moved into the filter dropdown, search-bar controls are unified as segmented pills, a dedicated Liquid Glass on/off switch is added, and startup i18n for dynamically rendered UI is fixed.
Changes
Removed the star-rating from the search bar and moved it into the #color-filter dropdown panel. Rating filter is now a set of 0–5 star checkboxes, supporting multiple simultaneous selections using the existing activeRatings Set. The Rejects view uses the same checkbox style inside #reject-cond-panel, matching the Photos filter panel. Removed the obsolete ratingFilterRejects dropdown and minRating logic; both views now share activeRatings. Liquid Glass Aesthetic Applied liquid-glass styling progressively to #color-filter, dialogs, preview panel, selection bar, sidebar, search bar, photo cards, toolbars, and status bar. Added a global gradient background, backdrop blur, translucent borders, hover/active transitions, and fade/scale entry animations. Added fx-anim-off / fx-shadow-off classes so users can disable animations and shadows. Settings Enhancements Added a dedicated Liquid Glass on/off toggle under Settings → Effects, persisted in localStorage (tiol-fx-glass). The old data-theme="liquid-glass" setting is automatically migrated to Dark theme + Liquid Glass on for backward compatibility. Added a custom Menu background color picker, persisted via Tauri invoke("set_setting") / invoke("get_setting"). Adjusted .settings left padding and max-width so the settings panel no longer hugs the left edge. Search Bar & Layout Replaced the semantic/tag with segmented pill buttons (.searchbar__mode-segment / .searchbar__mode-btn).
Added horizontal padding to .view so main content no longer stretches edge-to-edge.
Lowered the opacity of edit-tag, confirm, and rate dialogs for a lighter glass look.
Added and synced keys such as settings.themeLiquidGlass, settings.menuBgColor, and settings.fxGlass across:
src/locales/zh-CN.json
src/locales/en-US.json
src/locales/messages.js (regenerated via node scripts/gen-messages.js)
Fixed a startup locale bug: dynamic panels like renderRejectConds(), renderFilterDots(), and renderRejectRatings() were created with the default en-US locale before initI18n() resolved the saved language. They are now re-rendered after the saved language is applied.
Forced the sidebar to stay dark with light text even when the rest of the app is in Light theme, preserving readability and contrast.
Testing
npm run tauri dev compiles successfully and the app window opens.
The runtime panic about missing libonnxruntime.dylib is unrelated to these UI changes.
Commits
ab38298 feat: liquid-glass UI redesign — rating filter in menu, unified glass panels, custom menu bg color
d4ec13e fix(filter-panel): keep dropdown open while selecting, add explicit close ×
67293cc feat: liquid-glass redesign v2 — gradients, animations, remove filter close ×
9ddba34 feat: searchbar segmented mode buttons + content padding
81997b9 feat: settings padding, transparent edit dialog, rejects rating checkboxes
983750a fix(i18n): re-render dynamic locale content after startup language load
6ec83a6 feat(settings): add Liquid Glass on/off toggle in Effects
e046ee6 fix(ui): keep sidebar dark in light theme