From 1b77f4882d4f2118623659f15be75c87b627cefc Mon Sep 17 00:00:00 2001 From: LemmyCook Date: Fri, 22 Aug 2025 18:37:48 -0400 Subject: [PATCH] Settings: reworked modular bar settings - deleted NCard, we already have NBox - assign a color to each widget for better overview when moving stuff around - minor QOL improvements to NComboBox --- Modules/SettingsPanel/Tabs/BarTab.qml | 3 +- Widgets/NCard.qml | 16 ---------- Widgets/NComboBox.qml | 13 ++++++-- Widgets/NWidgetCard.qml | 45 ++++++++++++++++++++------- 4 files changed, 46 insertions(+), 31 deletions(-) delete mode 100644 Widgets/NCard.qml diff --git a/Modules/SettingsPanel/Tabs/BarTab.qml b/Modules/SettingsPanel/Tabs/BarTab.qml index f6def60..a70986b 100644 --- a/Modules/SettingsPanel/Tabs/BarTab.qml +++ b/Modules/SettingsPanel/Tabs/BarTab.qml @@ -141,9 +141,10 @@ ColumnLayout { NText { text: "Widgets Positioning" - font.pointSize: Style.fontSizeL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface + Layout.bottomMargin: Style.marginS * scaling } NText { diff --git a/Widgets/NCard.qml b/Widgets/NCard.qml deleted file mode 100644 index a8f7cc0..0000000 --- a/Widgets/NCard.qml +++ /dev/null @@ -1,16 +0,0 @@ -import QtQuick -import qs.Commons -import qs.Services - -// Generic card container -Rectangle { - id: root - - implicitWidth: childrenRect.width - implicitHeight: childrenRect.height - - color: Color.mSurface - radius: Style.radiusM * scaling - border.color: Color.mOutline - border.width: Math.max(1, Style.borderS * scaling) -} diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index 0a1c79b..d2fdb8d 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -8,7 +8,7 @@ import qs.Widgets ColumnLayout { id: root - readonly property real preferredHeight: Style.baseWidgetSize * 1.25 * scaling + readonly property real preferredHeight: Style.baseWidgetSize * 1.35 * scaling property string label: "" property string description: "" @@ -39,7 +39,8 @@ ColumnLayout { ComboBox { id: combo - Layout.fillWidth: true + + Layout.preferredWidth: 320 * scaling Layout.preferredHeight: height model: model currentIndex: findIndexByKey(currentKey) @@ -128,5 +129,13 @@ ColumnLayout { radius: Style.radiusM * scaling } } + + // Update the currentIndex if the currentKey is changed externalyu + Connections { + target: root + function onCurrentKeyChanged() { + combo.currentIndex = root.findIndexByKey(currentKey) + } + } } } diff --git a/Widgets/NWidgetCard.qml b/Widgets/NWidgetCard.qml index ccde0f2..2c9d00a 100644 --- a/Widgets/NWidgetCard.qml +++ b/Widgets/NWidgetCard.qml @@ -4,7 +4,7 @@ import QtQuick.Layouts import qs.Commons import qs.Widgets -NCard { +NBox { id: root property string sectionName: "" @@ -16,6 +16,7 @@ NCard { signal removeWidget(string section, int index) signal reorderWidget(string section, int fromIndex, int toIndex) + color: Color.mSurface Layout.fillWidth: true Layout.minimumHeight: { var widgetCount = widgetModel.length @@ -30,6 +31,25 @@ NCard { return (50 + 20 + (rows * 48) + ((rows - 1) * Style.marginS) + 20) * scaling } + // Generate widget color from name checksum + function getWidgetColor(name) { + const totalSum = name.split('').reduce((acc, character) => { + return acc + character.charCodeAt(0) + }, 0) + switch (totalSum % 5) { + case 0: + return Color.mPrimary + case 1: + return Color.mSecondary + case 2: + return Color.mTertiary + case 3: + return Color.mError + case 4: + return Color.mOnSurface + } + } + ColumnLayout { anchors.fill: parent anchors.margins: Style.marginM * scaling @@ -42,21 +62,19 @@ NCard { text: sectionName + " Section" font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold - color: Color.mOnSurface + color: Color.mSecondary Layout.alignment: Qt.AlignVCenter } Item { Layout.fillWidth: true } - NComboBox { id: comboBox - width: 120 * scaling model: availableWidgets label: "" description: "" - placeholder: "Add widget to " + sectionName.toLowerCase() + " section" + placeholder: "Add widget to the " + sectionName.toLowerCase() + " section..." onSelected: key => { comboBox.currentKey = key } @@ -75,7 +93,7 @@ NCard { onClicked: { if (comboBox.currentKey !== "") { addWidget(comboBox.currentKey, sectionName.toLowerCase()) - comboBox.currentKey = "" + comboBox.currentKey = "battery" } } } @@ -92,9 +110,9 @@ NCard { model: widgetModel delegate: Rectangle { width: widgetContent.implicitWidth + 16 * scaling - height: 48 * scaling - radius: Style.radiusS * scaling - color: Color.mPrimary + height: 40 * scaling + radius: Style.radiusL * scaling + color: root.getWidgetColor(modelData) border.color: Color.mOutline border.width: Math.max(1, Style.borderS * scaling) @@ -106,7 +124,8 @@ NCard { NIconButton { icon: "chevron_left" size: 20 * scaling - colorBg: Color.applyOpacity(Color.mOnPrimary, "20") + colorBorder: Color.applyOpacity(Color.mOutline, "40") + colorBg: Color.mOnSurface colorFg: Color.mOnPrimary colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40") colorFgHover: Color.mOnPrimary @@ -128,7 +147,8 @@ NCard { NIconButton { icon: "chevron_right" size: 20 * scaling - colorBg: Color.applyOpacity(Color.mOnPrimary, "20") + colorBorder: Color.applyOpacity(Color.mOutline, "40") + colorBg: Color.mOnSurface colorFg: Color.mOnPrimary colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40") colorFgHover: Color.mOnPrimary @@ -143,7 +163,8 @@ NCard { NIconButton { icon: "close" size: 20 * scaling - colorBg: Color.applyOpacity(Color.mOnPrimary, "20") + colorBorder: Color.applyOpacity(Color.mOutline, "40") + colorBg: Color.mOnSurface colorFg: Color.mOnPrimary colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40") colorFgHover: Color.mOnPrimary