diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index cb0f20c..6b9ff4e 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -3,15 +3,17 @@ import Quickshell import QtQuick.Controls import QtQuick.Layouts import qs.Widgets +import qs.Services import qs.Theme PanelWindow { id: root + readonly property real scaling: Scaling.scale(screen) property var modelData screen: modelData - implicitHeight: 36 + implicitHeight: Style.barHeight * scaling color: "transparent" anchors { @@ -31,12 +33,12 @@ PanelWindow { RowLayout { // Just testing - NoctaliaToggle { + NToggle { label: "Label" description: "Description" } - NoctaliaIconButton { + NIconButton { icon: "refresh" } } diff --git a/Services/Scaling.qml b/Services/Scaling.qml index 5e646de..d71fef4 100644 --- a/Services/Scaling.qml +++ b/Services/Scaling.qml @@ -10,35 +10,37 @@ Singleton { readonly property int designScreenHeight: 1440 // Automatic, orientation-agnostic scaling - function scale(currentScreen) { + function scale(aScreen) { + if (typeof aScreen !== 'undefined' & aScreen) { + + // // 1) Per-monitor override wins + // try { + // const overrides = Settings.settings.monitorScaleOverrides || {}; + // if (currentScreen && currentScreen.name && overrides[currentScreen.name] !== undefined) { + // const overrideValue = overrides[currentScreen.name] + // if (isFinite(overrideValue)) return overrideValue + // } + // } catch (e) { + // // ignore + // } + + // // 2) Fallback: scale by diagonal pixel count relative to design resolution + // try { + // const w = Math.max(1, currentScreen ? (currentScreen.width || 0) : 0) + // const h = Math.max(1, currentScreen ? (currentScreen.height || 0) : 0) + // if (w > 1 && h > 1) { + // const diag = Math.sqrt(w * w + h * h) + // const baseDiag = Math.sqrt(designScreenWidth * designScreenWidth + designScreenHeight * designScreenHeight) + // const ratio = diag / baseDiag + // // Clamp to a reasonable range for UI legibility + // return Math.max(0.9, Math.min(1.6, ratio)) + // } + // } catch (e) { + // // ignore and fall through + // } + } + + // 3) Safe default return 1.0 - // // 1) Per-monitor override wins - // try { - // const overrides = Settings.settings.monitorScaleOverrides || {}; - // if (currentScreen && currentScreen.name && overrides[currentScreen.name] !== undefined) { - // const overrideValue = overrides[currentScreen.name] - // if (isFinite(overrideValue)) return overrideValue - // } - // } catch (e) { - // // ignore - // } - - // // 2) Fallback: scale by diagonal pixel count relative to design resolution - // try { - // const w = Math.max(1, currentScreen ? (currentScreen.width || 0) : 0) - // const h = Math.max(1, currentScreen ? (currentScreen.height || 0) : 0) - // if (w > 1 && h > 1) { - // const diag = Math.sqrt(w * w + h * h) - // const baseDiag = Math.sqrt(designScreenWidth * designScreenWidth + designScreenHeight * designScreenHeight) - // const ratio = diag / baseDiag - // // Clamp to a reasonable range for UI legibility - // return Math.max(0.9, Math.min(1.6, ratio)) - // } - // } catch (e) { - // // ignore and fall through - // } - - // // 3) Safe default - // return 1.0 } } diff --git a/Theme/Style.qml b/Theme/Style.qml index 1479346..e6a91e0 100644 --- a/Theme/Style.qml +++ b/Theme/Style.qml @@ -13,10 +13,10 @@ Singleton { */ // Font - property real fontExtraLarge: 32 - property real fontLarge: 16 - property real fontMedium: 14 - property real fontSmall: 12 + property real fontExtraLarge: 20 + property real fontLarge: 14 + property real fontMedium: 10 + property real fontSmall: 8 // Font weight property int fontWeightRegular: 400 @@ -43,4 +43,7 @@ Singleton { property int animationFast: 150 property int animationNormal: 300 property int animationSlow: 500 + + property int barHeight: 36 + property int baseWidgetHeight: 32 } diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index e8b1228..41fafbf 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -7,11 +7,8 @@ import qs.Theme Rectangle { id: root - // Local scale convenience with safe fallback - readonly property real scale: (typeof screen !== 'undefined' - && screen) ? Scaling.scale(screen) : 1.0 - - property real size: 32 * scale + readonly property real scaling: Scaling.scale(screen) + property real size: Style.baseWidgetHeight * scaling property string icon property bool enabled: true property bool hovering: false @@ -27,7 +24,7 @@ Rectangle { anchors.centerIn: parent text: root.icon font.family: "Material Symbols Outlined" - font.pixelSize: 24 * scale + font.pointSize: Style.fontExtraLarge * scaling color: root.hovering ? Theme.onAccent : Theme.textPrimary horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index 8b7b76b..0a7cead 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -8,31 +8,29 @@ import qs.Theme RowLayout { id: root - // Local scale convenience with safe fallback - readonly property real scale: (typeof screen !== 'undefined' - && screen) ? Scaling.scale(screen) : 1.0 - + readonly property real scaling: Scaling.scale(screen) property string label: "" property string description: "" property bool value: false + property bool hovering: false property var onToggled: function (value: bool) {} Layout.fillWidth: true ColumnLayout { - spacing: 4 * scale + spacing: 2 * scaling Layout.fillWidth: true Text { text: label - font.pixelSize: 13 * scale + font.pointSize: Style.fontMedium * scaling font.bold: true color: Theme.textPrimary } Text { text: description - font.pixelSize: 12 * scale + font.pointSize: Style.fontSmall * scaling color: Theme.textSecondary wrapMode: Text.WordWrap Layout.fillWidth: true @@ -42,22 +40,22 @@ RowLayout { Rectangle { id: switcher - width: 52 * scale - height: 32 * scale - radius: height / 2 - color: value ? Theme.accentPrimary : Theme.surfaceVariant + width: Style.baseWidgetHeight * 1.625 * scaling + height: Style.baseWidgetHeight * scaling + radius: height * 0.5 + color: value ? Theme.accentPrimary :Theme.surfaceVariant border.color: value ? Theme.accentPrimary : Theme.outline - border.width: 2 * scale + border.width: Math.max(1, 1.5 * scale) Rectangle { - width: 28 * scale - height: 28 * scale - radius: height / 2 + width: (Style.baseWidgetHeight- 4) * scaling + height: (Style.baseWidgetHeight - 4) * scaling + radius: height * 0.5 color: Theme.surface - border.color: Theme.outline - border.width: 1 * scale - y: 2 * scale - x: value ? switcher.width - width - 2 * scale : 2 * scale + border.color: hovering ? Theme.textDisabled : Theme.outline + border.width: Math.max(1, 1.5 * scale) + y: 2 * scaling + x: value ? switcher.width - width - 2 * scale : 2 * scaling Behavior on x { NumberAnimation { @@ -70,6 +68,9 @@ RowLayout { MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor + hoverEnabled: true + onEntered: hovering = true + onExited: hovering = false onClicked: { value = !value; root.onToggled(value);