Refactor main application entry and enhance UI with file browser integration
- Changed application entry point to use QApplication for better compatibility with widgets. - Set up QML UI style to support custom button backgrounds. - Introduced LocalSettingsModel and FileBrowser for managing application settings and file selection. - Updated QML components to reflect new data models and improve layout consistency. - Enhanced Theme.qml with detailed comments and improved color management for better readability.
This commit is contained in:
Jack.Le
+104
-52
@@ -2,44 +2,120 @@ pragma Singleton
|
||||
|
||||
import QtQuick
|
||||
|
||||
// ===== Shared Theme Tokens =====
|
||||
// =============================================================================
|
||||
// Theme — single source of truth for colors and sizing
|
||||
// =============================================================================
|
||||
// Sections:
|
||||
// 1. Mode flag
|
||||
// 2. Tone palette (raw tones; everything else derives from these)
|
||||
// 3. Surfaces (page / card / panel / workspace backgrounds)
|
||||
// 4. Borders
|
||||
// 5. Text (headings, body, panel titles)
|
||||
// 6. Controls (fields, buttons, checkbox)
|
||||
// 7. Tracks (pill toggle + scrollbar)
|
||||
// 8. Tabs (footer tab bar)
|
||||
// 9. Side rail
|
||||
// 10. Status (success / warning / error)
|
||||
// 11. Geometry (radius / border width / spacing / sizing)
|
||||
// =============================================================================
|
||||
|
||||
QtObject {
|
||||
// ===== Theme Mode =====
|
||||
// Toggle this to preview the same shell in light mode.
|
||||
property bool isDarkMode: true
|
||||
// ── 1. Mode ──────────────────────────────────────────────────────────────
|
||||
property bool isDarkMode: false
|
||||
|
||||
// ===== Surface Colors =====
|
||||
// Core application surfaces.
|
||||
readonly property color pageBackground: isDarkMode ? "#11161c" : "#eef4f7"
|
||||
readonly property color cardBackground: isDarkMode ? "#1b232d" : "#ffffff"
|
||||
readonly property color workspaceBackground: isDarkMode ? "#121923" : "#ffffff"
|
||||
readonly property color sideRailBackground: isDarkMode ? "#18202a" : "#f5f7fa"
|
||||
readonly property color responseBackground: isDarkMode ? "#18212a" : "#f9fbfc"
|
||||
// ── 2. Tone palette (base values; consume via semantic tokens below) ─────
|
||||
readonly property color tone100: isDarkMode ? "#111111" : "#FAFAFA"
|
||||
readonly property color tone200: isDarkMode ? "#1A1A1A" : "#F2F2F2"
|
||||
readonly property color tone300: isDarkMode ? "#242424" : "#E8E8E8"
|
||||
readonly property color toneText: isDarkMode ? "#F2F2F2" : "#111111"
|
||||
readonly property color toneMute: isDarkMode ? "#A8A8A8" : "#8A8A8A"
|
||||
readonly property color toneBorder: isDarkMode ? "#2B2B2B" : "#D8D8D8"
|
||||
|
||||
// Shared border and text colors.
|
||||
readonly property color cardBorder: isDarkMode ? "#334155" : "#cbd5e1"
|
||||
readonly property color workspaceBorder: isDarkMode ? "#334155" : "#d7dde5"
|
||||
readonly property color responseBorder: isDarkMode ? "#334155" : "#d5e0e8"
|
||||
// ── 3. Surfaces ──────────────────────────────────────────────────────────
|
||||
readonly property color pageBackground: tone100
|
||||
readonly property color cardBackground: tone200
|
||||
readonly property color panelBackground: tone200
|
||||
readonly property color workspaceBackground: tone200
|
||||
readonly property color responseBackground: tone200
|
||||
readonly property color subtleSectionBackground: tone300
|
||||
|
||||
readonly property color headingColor: isDarkMode ? "#e5eef7" : "#12324a"
|
||||
readonly property color bodyColor: isDarkMode ? "#afbdca" : "#415a6b"
|
||||
readonly property color buttonPressed: isDarkMode ? "#214d60" : "#17576c"
|
||||
readonly property color statusSuccessColor: isDarkMode ? "#7cd67e" : "#1f7a33"
|
||||
readonly property color statusErrorColor: isDarkMode ? "#ff8a80" : "#c62828"
|
||||
readonly property color statusWarningColor: isDarkMode ? "#f3c677" : "#9a6700"
|
||||
// ── 4. Borders ───────────────────────────────────────────────────────────
|
||||
readonly property color cardBorder: toneBorder
|
||||
readonly property color responseBorder: toneBorder
|
||||
readonly property color workspaceBorder: toneBorder
|
||||
readonly property color innerFrameBorder: toneBorder
|
||||
readonly property color outerFrameBorder: isDarkMode ? "#343434" : "#CECECE"
|
||||
readonly property color softBorder: isDarkMode ? "#222222" : "#E2E2E2"
|
||||
|
||||
// ===== Side Rail Sizing =====
|
||||
// ── 5. Text ──────────────────────────────────────────────────────────────
|
||||
readonly property color headingColor: toneText
|
||||
readonly property color bodyColor: toneMute
|
||||
readonly property color panelTitleText: toneMute
|
||||
|
||||
// ── 6. Controls ──────────────────────────────────────────────────────────
|
||||
// Fields
|
||||
readonly property color fieldBackground: tone100
|
||||
readonly property color fieldText: toneText
|
||||
readonly property color fieldPlaceholder: toneMute
|
||||
readonly property color fieldBorder: toneBorder
|
||||
readonly property color fieldBorderFocus: toneText
|
||||
// Neutral buttons
|
||||
readonly property color buttonNeutralBackground: tone300
|
||||
readonly property color buttonNeutralHover: isDarkMode ? "#303030" : "#DDDDDD"
|
||||
readonly property color buttonNeutralPressed: tone100
|
||||
readonly property color buttonNeutralText: toneText
|
||||
readonly property color buttonPressed: tone300
|
||||
readonly property color primaryAccent: toneText
|
||||
// Checkbox
|
||||
readonly property color checkboxText: toneText
|
||||
|
||||
// ── 7. Tracks (pill toggle, scrollbar thumb) ─────────────────────────────
|
||||
readonly property color trackBackground: isDarkMode ? "#25252B" : "#D1D5DB"
|
||||
|
||||
// ── 8. Tabs (footer tab bar) ─────────────────────────────────────────────
|
||||
readonly property color tabBarBackground: tone200
|
||||
readonly property color tabBackground: "transparent"
|
||||
readonly property color tabActiveBackground: "transparent"
|
||||
readonly property color tabHoverBackground: tone300
|
||||
readonly property color tabBorder: "transparent"
|
||||
readonly property color tabText: toneMute
|
||||
readonly property color tabActiveText: toneText
|
||||
|
||||
// ── 9. Side rail ─────────────────────────────────────────────────────────
|
||||
readonly property color sideRailBackground: tone200
|
||||
readonly property color sideActiveBackground: tone300
|
||||
|
||||
// ── 10. Status ───────────────────────────────────────────────────────────
|
||||
readonly property color statusSuccessColor: isDarkMode ? "#63D471" : "#2E9E44"
|
||||
readonly property color statusWarningColor: isDarkMode ? "#F5C15C" : "#C88A18"
|
||||
readonly property color statusErrorColor: isDarkMode ? "#FF6B6B" : "#D64545"
|
||||
|
||||
// ── 11. Geometry ─────────────────────────────────────────────────────────
|
||||
// Radius
|
||||
readonly property int radiusXs: 4 // fields, tight elements
|
||||
readonly property int radiusSm: 6 // buttons
|
||||
readonly property int radiusMd: 10 // cards, group boxes
|
||||
readonly property int radiusLg: 14 // large panels / dialogs
|
||||
// Border width
|
||||
readonly property int borderThin: 1
|
||||
readonly property int borderStrong: 2
|
||||
// Main panel layout
|
||||
readonly property int mainAreaPadding: 10
|
||||
readonly property int rightPaneGap: 6
|
||||
readonly property int panelPadding: 12
|
||||
// Side rail layout
|
||||
readonly property int sideRailWidth: 190
|
||||
readonly property int sideRailSpacing: 14
|
||||
readonly property int sideButtonHeight: 146
|
||||
readonly property int sideButtonMinHeight: 88
|
||||
readonly property int panelPadding: 12
|
||||
|
||||
// ===== Main Panel Spacing =====
|
||||
// Main content spacing.
|
||||
readonly property int mainAreaPadding: 10
|
||||
readonly property int rightPaneGap: 6
|
||||
// Tab bar layout
|
||||
readonly property int tabBarHeight: 34
|
||||
readonly property int tabBarPadding: 6
|
||||
readonly property int tabSpacing: 2
|
||||
readonly property int tabRadius: 2
|
||||
readonly property int tabFontSize: 12
|
||||
readonly property int tabButtonMinWidth: 80
|
||||
// Settings page layout
|
||||
readonly property int settingsPanelMaxWidth: 760
|
||||
readonly property int settingsOuterMargin: 40
|
||||
readonly property int settingsSectionSpacing: 20
|
||||
@@ -48,28 +124,4 @@ QtObject {
|
||||
readonly property int settingsButtonHeight: 40
|
||||
readonly property int settingsActionWidth: 200
|
||||
readonly property int settingsFieldMinWidth: 160
|
||||
|
||||
// ===== Footer Tab Theme =====
|
||||
// Bottom tab styling.
|
||||
readonly property color tabBarBackground: isDarkMode ? "#161d26" : "#f2f2f2"
|
||||
readonly property color tabBackground: isDarkMode ? "#202833" : "#ececec"
|
||||
readonly property color tabActiveBackground: isDarkMode ? "#2a3440" : "#ffffff"
|
||||
readonly property color tabHoverBackground: isDarkMode ? "#263140" : "#f7f7f7"
|
||||
readonly property color tabBorder: isDarkMode ? "#3a4758" : "#cfcfcf"
|
||||
readonly property color tabText: isDarkMode ? "#c6d0da" : "#222222"
|
||||
readonly property color tabActiveText: isDarkMode ? "#ffffff" : "#111111"
|
||||
|
||||
readonly property int tabButtonMinWidth: 80
|
||||
readonly property int tabHorizontalPadding: 14
|
||||
readonly property int tabBarPadding: 6
|
||||
readonly property int tabSpacing: 2
|
||||
readonly property int tabRadius: 2
|
||||
readonly property int tabFontSize: 12
|
||||
|
||||
// ===== Form Control Theme =====
|
||||
readonly property color inputBackground: isDarkMode ? "#202833" : "#ffffff"
|
||||
readonly property color inputBorder: isDarkMode ? "#4a596d" : "#cfcfcf"
|
||||
readonly property color buttonBackground: isDarkMode ? "#202833" : "#ffffff"
|
||||
readonly property color buttonText: isDarkMode ? "#e5eef7" : "#111111"
|
||||
readonly property color checkboxText: isDarkMode ? "#d6dfeb" : "#111111"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user