jack/pyGUI
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor main application entry and enhance UI with file browser integration

Browse Source 
- 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
2026-04-27 14:28:08 -07:00
parent 9f8c6e1a4c
commit fbb04eb2f7
6 changed files with 466 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ISC/Tabs/SelectFileDialog.qml
+106 -45
View File
@@ -41,7 +41,8 @@ Dialog {
}
function applyMetadataFromEditor() {
if (metadataEditRow < 0) return;
if (metadataEditRow < 0)
return;
const rec = tableModel[metadataEditRow];
if (!rec) {
metadataEditDialog.close();
@@ -56,14 +57,14 @@ Dialog {
readonly property var normalizedRows: (tableModel || []).map(function (row) {
row = row || {};
return {
select: row.selected ?? false,
wafer: row.wafer ?? "",
date: row.date ?? "",
chamber: row.chamber ?? "",
edit: "",
save: "",
notes: row.notes ?? "",
fileName: row.fileName ?? "",
select: row.selected ?? false,
wafer: row.wafer ?? "",
date: row.date ?? "",
chamber: row.chamber ?? "",
edit: "",
save: "",
notes: row.notes ?? "",
fileName: row.fileName ?? "",
highlight: row.highlight ?? false
};
})
@@ -76,9 +77,7 @@ Dialog {
background: Rectangle {
radius: Theme.radiusSm
color: dialogButton.down ? Theme.buttonNeutralPressed
: dialogButton.hovered ? Theme.buttonNeutralHover
: Theme.buttonNeutralBackground
color: dialogButton.down ? Theme.buttonNeutralPressed : dialogButton.hovered ? Theme.buttonNeutralHover : Theme.buttonNeutralBackground
border.width: Theme.borderThin
border.color: Theme.fieldBorder
}
@@ -236,8 +235,17 @@ Dialog {
columnWidthProvider: function (col) {
// [select, wafer, date, chamber, notes, file (variable), edit, save]
const fixed = { 0: 40, 1: 90, 2: 170, 3: 120, 4: 180, 6: 56, 7: 56 };
if (fixed.hasOwnProperty(col)) return fixed[col];
const fixed = {
0: 40,
1: 90,
2: 170,
3: 120,
4: 180,
6: 56,
7: 56
};
if (fixed.hasOwnProperty(col))
return fixed[col];
// col 5 (File) takes remaining width
const w = Math.max(400, tableView.width);
const used = 40 + 90 + 170 + 120 + 180 + 56 + 56;
@@ -245,14 +253,30 @@ Dialog {
}
model: TableModel {
TableModelColumn { display: "select" }
TableModelColumn { display: "wafer" }
TableModelColumn { display: "date" }
TableModelColumn { display: "chamber" }
TableModelColumn { display: "notes" }
TableModelColumn { display: "fileName" }
TableModelColumn { display: "edit" }
TableModelColumn { display: "save" }
TableModelColumn {
display: "select"
}
TableModelColumn {
display: "wafer"
}
TableModelColumn {
display: "date"
}
TableModelColumn {
display: "chamber"
}
TableModelColumn {
display: "notes"
}
TableModelColumn {
display: "fileName"
}
TableModelColumn {
display: "edit"
}
TableModelColumn {
display: "save"
}
rows: root.normalizedRows
}
@@ -265,8 +289,10 @@ Dialog {
border.color: Theme.softBorder
border.width: Theme.borderThin
color: {
if (root.selectedRow === row) return Theme.sideActiveBackground;
if (root.tableModel[row]?.highlight) return Theme.subtleSectionBackground;
if (root.selectedRow === row)
return Theme.sideActiveBackground;
if (root.tableModel[row]?.highlight)
return Theme.subtleSectionBackground;
return row % 2 === 0 ? Theme.cardBackground : Theme.tone100;
}
@@ -297,9 +323,7 @@ Dialog {
background: Rectangle {
radius: Theme.radiusXs
color: parent.down ? Theme.buttonNeutralPressed
: parent.hovered ? Theme.buttonNeutralHover
: Theme.buttonNeutralBackground
color: parent.down ? Theme.buttonNeutralPressed : parent.hovered ? Theme.buttonNeutralHover : Theme.buttonNeutralBackground
border.width: Theme.borderThin
border.color: Theme.fieldBorder
}
@@ -325,15 +349,14 @@ Dialog {
font.pixelSize: 12
onClicked: {
const record = root.tableModel[row];
if (!record) return;
if (!record)
return;
file_browser.saveMetadata(record.fileName ?? "", record.wafer ?? "", record.date ?? "", record.chamber ?? "", record.notes ?? "", record.selected ?? false);
}
background: Rectangle {
radius: Theme.radiusXs
color: parent.down ? Theme.buttonNeutralPressed
: parent.hovered ? Theme.buttonNeutralHover
: Theme.buttonNeutralBackground
color: parent.down ? Theme.buttonNeutralPressed : parent.hovered ? Theme.buttonNeutralHover : Theme.buttonNeutralBackground
border.width: Theme.borderThin
border.color: Theme.fieldBorder
}
@@ -359,9 +382,12 @@ Dialog {
verticalAlignment: Text.AlignVCenter
text: {
const record = root.tableModel[row] || {};
if (column === 1) return record.wafer ?? "";
if (column === 2) return record.date ?? "";
if (column === 5) return record.fileName ?? "";
if (column === 1)
return record.wafer ?? "";
if (column === 2)
return record.date ?? "";
if (column === 5)
return record.fileName ?? "";
return "";
}
elide: Text.ElideRight
@@ -381,7 +407,8 @@ Dialog {
verticalAlignment: Text.AlignVCenter
text: {
const record = root.tableModel[row] || {};
if (column === 3) return record.chamber ?? "";
if (column === 3)
return record.chamber ?? "";
return record.notes ?? "";
}
elide: Text.ElideRight
@@ -496,7 +523,11 @@ Dialog {
anchors.fill: parent
spacing: Theme.settingsGridSpacing
Label { text: qsTr("File"); font.bold: true; color: Theme.headingColor }
Label {
text: qsTr("File")
font.bold: true
color: Theme.headingColor
}
Text {
id: filePathLabel
@@ -509,17 +540,45 @@ Dialog {
font.pixelSize: 12
}
Label { text: qsTr("Wafer"); color: Theme.headingColor }
DialogTextInput { id: waferField; Layout.fillWidth: true; Layout.preferredHeight: 36 }
Label {
text: qsTr("Wafer")
color: Theme.headingColor
}
DialogTextInput {
id: waferField
Layout.fillWidth: true
Layout.preferredHeight: 36
}
Label { text: qsTr("Date"); color: Theme.headingColor }
DialogTextInput { id: dateField; Layout.fillWidth: true; Layout.preferredHeight: 36 }
Label {
text: qsTr("Date")
color: Theme.headingColor
}
DialogTextInput {
id: dateField
Layout.fillWidth: true
Layout.preferredHeight: 36
}
Label { text: qsTr("Chamber"); color: Theme.headingColor }
DialogTextInput { id: chamberField; Layout.fillWidth: true; Layout.preferredHeight: 36 }
Label {
text: qsTr("Chamber")
color: Theme.headingColor
}
DialogTextInput {
id: chamberField
Layout.fillWidth: true
Layout.preferredHeight: 36
}
Label { text: qsTr("Notes"); color: Theme.headingColor }
DialogTextInput { id: notesField; Layout.fillWidth: true; Layout.preferredHeight: 36 }
Label {
text: qsTr("Notes")
color: Theme.headingColor
}
DialogTextInput {
id: notesField
Layout.fillWidth: true
Layout.preferredHeight: 36
}
CheckBox {
id: selectedField
@@ -531,7 +590,9 @@ Dialog {
Layout.topMargin: 8
spacing: 8
Item { Layout.fillWidth: true }
Item {
Layout.fillWidth: true
}
DialogActionButton {
text: qsTr("Cancel")
ISC/Tabs/SettingsTab.qml
+3 -2
View File
@@ -419,7 +419,9 @@ Item {
opacity: (settingsScroll.ScrollBar.vertical.position <= 0 && settingsScroll.contentHeight > settingsScroll.height) ? (scrollHintTimer.running ? 1 : 0) : 0
Behavior on opacity {
NumberAnimation { duration: 400 }
NumberAnimation {
duration: 400
}
}
}
}
@@ -432,5 +434,4 @@ Item {
repeat: false
onTriggered: scrollHint.visible = false
}
}
ISC/Theme.qml
+104 -52
View File
@@ -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"
}