diff --git a/default/quickshell/omarchy-shell/Commons/Style.qml b/default/quickshell/omarchy-shell/Commons/Style.qml index 37d987e2..2e6b268c 100644 --- a/default/quickshell/omarchy-shell/Commons/Style.qml +++ b/default/quickshell/omarchy-shell/Commons/Style.qml @@ -9,17 +9,18 @@ import "." as Commons QtObject { id: root - // Radii. - readonly property real radiusXXS: 1 - readonly property real radiusXS: 2 - readonly property real radiusS: 3 - readonly property real radiusM: 4 - readonly property real radiusL: 6 - readonly property real radiusXL: 8 - readonly property real iRadiusXS: 2 - readonly property real iRadiusS: 3 - readonly property real iRadiusM: 4 - readonly property real iRadiusL: 6 + // Radii. Omarchy uses sharp corners; all radius tokens collapse to 0 so + // Noctalia plugins inherit the same look as native widgets. + readonly property real radiusXXS: 0 + readonly property real radiusXS: 0 + readonly property real radiusS: 0 + readonly property real radiusM: 0 + readonly property real radiusL: 0 + readonly property real radiusXL: 0 + readonly property real iRadiusXS: 0 + readonly property real iRadiusS: 0 + readonly property real iRadiusM: 0 + readonly property real iRadiusL: 0 // Margins / paddings. Noctalia uses two parallel scales for margins (one // tighter, one looser); we map them to the same values. diff --git a/default/quickshell/omarchy-shell/Widgets/NComboBox.qml b/default/quickshell/omarchy-shell/Widgets/NComboBox.qml index 5fabb37a..821cdac3 100644 --- a/default/quickshell/omarchy-shell/Widgets/NComboBox.qml +++ b/default/quickshell/omarchy-shell/Widgets/NComboBox.qml @@ -17,6 +17,11 @@ ComboBox { valueRole: "key" font.family: "JetBrainsMono Nerd Font" font.pixelSize: Style.fontSizeS + implicitHeight: 32 + leftPadding: 10 + rightPadding: 28 + topPadding: 4 + bottomPadding: 4 function itemAt(index) { if (index < 0) return null @@ -55,10 +60,79 @@ ComboBox { root.selected(key, item) } + contentItem: Text { + text: root.displayText + color: Color.mOnSurface + font: root.font + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + background: Rectangle { color: Color.mSurfaceVariant - border.color: Color.mOutline + border.color: root.activeFocus ? Color.mPrimary : Color.mOutline border.width: Style.borderS - radius: Style.radiusS + radius: 0 + } + + indicator: Text { + x: root.width - width - 10 + y: (root.height - height) / 2 + text: "▾" + color: Color.mOnSurfaceVariant + font.family: root.font.family + font.pixelSize: 11 + } + + delegate: ItemDelegate { + id: del + required property int index + required property var modelData + width: ListView.view ? ListView.view.width : root.width + height: 28 + highlighted: root.highlightedIndex === del.index + + contentItem: Text { + text: { + var m = del.modelData + if (m === null || m === undefined) return "" + if (root.textRole && m[root.textRole] !== undefined) return String(m[root.textRole]) + return String(m) + } + color: Color.mOnSurface + font: root.font + verticalAlignment: Text.AlignVCenter + elide: Text.ElideRight + } + + background: Rectangle { + color: del.highlighted || del.hovered + ? Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.14) + : "transparent" + radius: 0 + } + } + + popup: Popup { + y: root.height + width: root.width + implicitHeight: Math.min(contentItem.implicitHeight + 2, 280) + padding: 1 + + background: Rectangle { + color: Color.mSurface + border.color: Color.mOutline + border.width: Style.borderS + radius: 0 + } + + contentItem: ListView { + clip: true + implicitHeight: contentHeight + model: root.popup.visible ? root.delegateModel : null + currentIndex: root.highlightedIndex + boundsBehavior: Flickable.StopAtBounds + ScrollIndicator.vertical: ScrollIndicator { } + } } } diff --git a/default/quickshell/omarchy-shell/Widgets/NSpinBox.qml b/default/quickshell/omarchy-shell/Widgets/NSpinBox.qml index 08ded63d..7b41a4b8 100644 --- a/default/quickshell/omarchy-shell/Widgets/NSpinBox.qml +++ b/default/quickshell/omarchy-shell/Widgets/NSpinBox.qml @@ -7,4 +7,69 @@ SpinBox { property string label: "" font.family: "JetBrainsMono Nerd Font" font.pixelSize: Style.fontSizeS + editable: true + implicitHeight: 32 + leftPadding: 10 + rightPadding: 24 + topPadding: 4 + bottomPadding: 4 + + background: Rectangle { + color: Color.mSurfaceVariant + border.color: root.activeFocus ? Color.mPrimary : Color.mOutline + border.width: Style.borderS + radius: Style.radiusS + } + + contentItem: TextInput { + text: root.displayText + font: root.font + color: Color.mOnSurface + selectionColor: Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.35) + selectedTextColor: Color.mOnSurface + horizontalAlignment: Qt.AlignLeft + verticalAlignment: Qt.AlignVCenter + readOnly: !root.editable + validator: root.validator + inputMethodHints: Qt.ImhFormattedNumbersOnly + } + + up.indicator: Rectangle { + x: root.mirrored ? 0 : root.width - width + width: 20 + height: root.height / 2 + color: root.up.pressed + ? Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.16) + : root.up.hovered + ? Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.08) + : "transparent" + radius: Style.radiusS + Text { + anchors.centerIn: parent + text: "▲" + font.family: root.font.family + font.pixelSize: 7 + color: root.up.hovered ? Color.mOnSurface : Color.mOnSurfaceVariant + } + } + + down.indicator: Rectangle { + x: root.mirrored ? 0 : root.width - width + y: root.height / 2 + width: 20 + height: root.height / 2 + color: root.down.pressed + ? Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.16) + : root.down.hovered + ? Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.08) + : "transparent" + radius: Style.radiusS + Text { + anchors.centerIn: parent + text: "▼" + font.family: root.font.family + font.pixelSize: 7 + color: root.down.hovered ? Color.mOnSurface : Color.mOnSurfaceVariant + } + } } diff --git a/default/quickshell/omarchy-shell/Widgets/NToggle.qml b/default/quickshell/omarchy-shell/Widgets/NToggle.qml index deb7ea93..e1badacd 100644 --- a/default/quickshell/omarchy-shell/Widgets/NToggle.qml +++ b/default/quickshell/omarchy-shell/Widgets/NToggle.qml @@ -18,21 +18,25 @@ Rectangle { Rectangle { id: indicator - width: 32 - height: 18 + width: 48 + height: 22 anchors.verticalCenter: parent.verticalCenter - radius: height / 2 - color: root.checked ? Color.mPrimary : Color.mSurfaceVariant - border.color: Color.mOutline + radius: 0 + color: root.checked + ? Color.mPrimary + : Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.10) + border.color: root.checked + ? Color.mPrimary + : Qt.rgba(Color.mOnSurface.r, Color.mOnSurface.g, Color.mOnSurface.b, 0.4) border.width: Style.borderS Rectangle { - x: root.checked ? parent.width - width - 2 : 2 - y: 2 - width: parent.height - 4 - height: parent.height - 4 - radius: height / 2 - color: Color.mOnSurface + width: 16 + height: 16 + radius: 0 + anchors.verticalCenter: parent.verticalCenter + x: root.checked ? parent.width - width - 3 : 3 + color: root.checked ? Color.mSurface : Color.mOnSurface Behavior on x { NumberAnimation { duration: Style.animationFast } } } } diff --git a/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml b/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml index 7e201c4e..fd8c5809 100644 --- a/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml +++ b/default/quickshell/omarchy-shell/plugins/settings/SettingsPanel.qml @@ -2600,18 +2600,40 @@ Item { spacing: 8 width: parent ? parent.width : 0 + component CalendarField: TextField { + id: calField + property string fieldKey: "" + font.family: root.fontFamily + font.pixelSize: 12 + width: parent.width + color: root.foreground + selectionColor: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.35) + selectedTextColor: root.foreground + placeholderTextColor: Qt.darker(root.foreground, 1.6) + leftPadding: 10 + rightPadding: 10 + topPadding: 7 + bottomPadding: 7 + onEditingFinished: if (fieldKey) calForm.fieldChanged(fieldKey, text) + background: Rectangle { + color: Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, + calField.activeFocus ? 0.08 : 0.04) + border.color: calField.activeFocus + ? Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.4) + : Qt.rgba(root.foreground.r, root.foreground.g, root.foreground.b, 0.18) + border.width: 1 + } + } + Text { text: "Horizontal format" color: Qt.darker(root.foreground, 1.4) font.family: root.fontFamily font.pixelSize: 11 } - TextField { + CalendarField { + fieldKey: "format" text: calForm.entry.format || "dddd HH:mm" - font.family: root.fontFamily - font.pixelSize: 12 - width: parent.width - onEditingFinished: calForm.fieldChanged("format", text) } Text { @@ -2620,12 +2642,9 @@ Item { font.family: root.fontFamily font.pixelSize: 11 } - TextField { + CalendarField { + fieldKey: "formatAlt" text: calForm.entry.formatAlt || "dd MMMM 'W'ww yyyy" - font.family: root.fontFamily - font.pixelSize: 12 - width: parent.width - onEditingFinished: calForm.fieldChanged("formatAlt", text) } Text { @@ -2634,12 +2653,9 @@ Item { font.family: root.fontFamily font.pixelSize: 11 } - TextField { + CalendarField { + fieldKey: "verticalFormat" text: calForm.entry.verticalFormat || "HH\n—\nmm" - font.family: root.fontFamily - font.pixelSize: 12 - width: parent.width - onEditingFinished: calForm.fieldChanged("verticalFormat", text) } } } diff --git a/default/quickshell/omarchy-shell/ui/settings/DynamicSettingsForm.qml b/default/quickshell/omarchy-shell/ui/settings/DynamicSettingsForm.qml index c5f4417a..e550ad97 100644 --- a/default/quickshell/omarchy-shell/ui/settings/DynamicSettingsForm.qml +++ b/default/quickshell/omarchy-shell/ui/settings/DynamicSettingsForm.qml @@ -83,13 +83,30 @@ Column { Component { id: stringField TextField { + id: stringControl property string fieldKey: "" property var field: ({}) width: parent.width font.family: root.fontFamilyName font.pixelSize: 12 + color: root.foregroundColor + selectionColor: Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.35) + selectedTextColor: root.foregroundColor + placeholderTextColor: Qt.darker(root.foregroundColor, 1.6) + leftPadding: 10 + rightPadding: 10 + topPadding: 7 + bottomPadding: 7 text: root.currentValue(field) === undefined ? "" : String(root.currentValue(field)) onEditingFinished: if (fieldKey) root.fieldChanged(fieldKey, text) + background: Rectangle { + color: Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, + stringControl.activeFocus ? 0.08 : 0.04) + border.color: stringControl.activeFocus + ? Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.4) + : Qt.rgba(root.foregroundColor.r, root.foregroundColor.g, root.foregroundColor.b, 0.18) + border.width: 1 + } } }