refactor: enhance UI components and improve theme properties for better visual consistency

This commit is contained in:
jack
2026-06-11 13:09:04 -07:00
parent 12bd778f13
commit 1cd54e81fc
4 changed files with 80 additions and 11 deletions
+11 -7
View File
@@ -107,25 +107,29 @@ Item {
x: toggle.leftPadding x: toggle.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: Theme.radiusXs radius: Theme.radiusXs
color: toggle.checked ? Theme.primaryAccent : Theme.fieldBackground color: toggle.checked ? Theme.primaryAccent : "transparent"
border.width: Theme.borderThin border.width: Theme.borderThin
border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder
Rectangle { Text {
anchors.centerIn: parent anchors.centerIn: parent
width: 9 text: "✓"
height: 9 font.pixelSize: 14
radius: Theme.radiusXs font.bold: true
color: Theme.panelBackground
visible: toggle.checked visible: toggle.checked
color: Theme.fieldBackground // Small nudge to center the checkmark perfectly
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
} }
} }
contentItem: Text { contentItem: Text {
text: toggle.text text: toggle.text
color: Theme.checkboxText color: Theme.headingColor
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
leftPadding: toggle.indicator.width + toggle.spacing leftPadding: toggle.indicator.width + toggle.spacing
font.pixelSize: 13
} }
} }
+35 -2
View File
@@ -9,6 +9,39 @@ ColumnLayout {
property alias showLabels: labelsToggle.checked property alias showLabels: labelsToggle.checked
property alias heatmapBlend: heatmapSlider.value property alias heatmapBlend: heatmapSlider.value
component PanelCheckBox: CheckBox {
id: toggle
indicator: Rectangle {
implicitWidth: 18
implicitHeight: 18
x: toggle.leftPadding
y: parent.height / 2 - height / 2
radius: Theme.radiusXs
color: toggle.checked ? Theme.primaryAccent : "transparent"
border.width: Theme.borderThin
border.color: toggle.checked ? Theme.primaryAccent : Theme.fieldBorder
Text {
anchors.centerIn: parent
text: "✓"
font.pixelSize: 13
font.bold: true
color: Theme.panelBackground
visible: toggle.checked
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
contentItem: Text {
text: toggle.text
color: Theme.headingColor
verticalAlignment: Text.AlignVCenter
leftPadding: toggle.indicator.width + toggle.spacing
font.pixelSize: toggle.font.pixelSize || 11
}
}
// ── READOUT ─────────────────────────────────────────────────────────── // ── READOUT ───────────────────────────────────────────────────────────
Label { Label {
text: "READOUT" text: "READOUT"
@@ -142,7 +175,7 @@ ColumnLayout {
bottomPadding: 8 bottomPadding: 8
} }
CheckBox { PanelCheckBox {
id: labelsToggle id: labelsToggle
text: "Labels" text: "Labels"
checked: true checked: true
@@ -236,7 +269,7 @@ ColumnLayout {
Item { height: 10 } Item { height: 10 }
CheckBox { PanelCheckBox {
id: autoCheck id: autoCheck
text: "Auto range (mean ± 1σ)" text: "Auto range (mean ± 1σ)"
checked: true checked: true
@@ -2,6 +2,7 @@ import QtQuick
import QtQuick.Controls import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import ISC import ISC
import ".."
ColumnLayout { ColumnLayout {
spacing: 6 spacing: 6
@@ -23,6 +24,32 @@ ColumnLayout {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
Button {
id: editBtn
text: "✎"
implicitWidth: 26
implicitHeight: 26
hoverEnabled: true
font.pixelSize: 14
background: Rectangle {
color: editBtn.pressed ? Theme.buttonPressed
: editBtn.hovered ? Theme.buttonNeutralHover
: "transparent"
radius: Theme.radiusSm
}
contentItem: Text {
text: parent.text
color: Theme.bodyColor
font: parent.font
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
}
onClicked: {
file_browser.refreshFiles()
csvEditorDialog.open()
}
}
Button { Button {
id: refreshBtn id: refreshBtn
text: "⟳" text: "⟳"
@@ -260,4 +287,9 @@ ColumnLayout {
color: Theme.bodyColor color: Theme.bodyColor
font.pixelSize: 10 font.pixelSize: 10
} }
SelectFileDialog {
id: csvEditorDialog
tableModel: file_browser.files
}
} }
+2 -2
View File
@@ -81,7 +81,7 @@ QtObject {
// ── 8. Tabs (footer tab bar) ───────────────────────────────────────────── // ── 8. Tabs (footer tab bar) ─────────────────────────────────────────────
readonly property color tabBarBackground: tone200 readonly property color tabBarBackground: tone200
readonly property color tabBackground: "transparent" readonly property color tabBackground: "transparent"
readonly property color tabActiveBackground: "transparent" readonly property color tabActiveBackground: isDarkMode ? "#333333" : "#FFFFFF"
readonly property color tabHoverBackground: tone300 readonly property color tabHoverBackground: tone300
readonly property color tabBorder: "transparent" readonly property color tabBorder: "transparent"
readonly property color tabText: toneMute readonly property color tabText: toneMute
@@ -132,7 +132,7 @@ QtObject {
readonly property int tabBarHeight: 34 readonly property int tabBarHeight: 34
readonly property int tabBarPadding: 6 readonly property int tabBarPadding: 6
readonly property int tabSpacing: 2 readonly property int tabSpacing: 2
readonly property int tabRadius: 2 readonly property int tabRadius: 8
readonly property int tabFontSize: 12 readonly property int tabFontSize: 12
readonly property int tabButtonMinWidth: 80 readonly property int tabButtonMinWidth: 80
// Settings page layout // Settings page layout