refactor: enhance UI components and improve theme properties for better visual consistency
This commit is contained in:
@@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user