diff --git a/Modules/AppLauncher/AppLauncher.qml b/Modules/AppLauncher/AppLauncher.qml index 3158ff0..1735540 100644 --- a/Modules/AppLauncher/AppLauncher.qml +++ b/Modules/AppLauncher/AppLauncher.qml @@ -253,7 +253,7 @@ NLoader { anchors.centerIn: parent width: Math.min(700 * scaling, parent.width * 0.75) height: Math.min(550 * scaling, parent.height * 0.8) - radius: 32 * scaling + radius: Style.radiusLarge * scaling color: Colors.mSurface border.color: Colors.mOutline border.width: Style.borderThin * scaling @@ -278,22 +278,22 @@ NLoader { // Search bar Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 40 * scaling + Layout.preferredHeight: Style.barHeight * scaling Layout.bottomMargin: Style.marginMedium * scaling - radius: 20 * scaling + radius: Style.radiusMedium * scaling color: Colors.mSurface border.color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOutline - border.width: searchInput.activeFocus ? 2 : 1 + border.width: Math.max(1, searchInput.activeFocus ? Style.borderMedium * scaling : Style.borderThin * scaling) Row { anchors.fill: parent - anchors.margins: 12 * scaling - spacing: 10 * scaling + anchors.margins: Style.marginMedium * scaling + spacing: Style.marginSmall * scaling Text { text: "search" font.family: "Material Symbols Outlined" - font.pointSize: 16 * scaling + font.pointSize: Style.fontSizeLarger * scaling color: searchInput.activeFocus ? Colors.mPrimary : Colors.mOnSurface } @@ -303,7 +303,7 @@ NLoader { color: Colors.mOnSurface placeholderTextColor: Colors.mOnSurface background: null - font.pointSize: 13 * scaling + font.pointSize: Style.fontSizeLarge * scaling Layout.fillWidth: true onTextChanged: { searchText = text @@ -338,13 +338,13 @@ NLoader { Behavior on border.color { ColorAnimation { - duration: 120 + duration: Style.animationFast } } Behavior on border.width { NumberAnimation { - duration: 120 + duration: Style.animationFast } } } @@ -360,35 +360,35 @@ NLoader { ListView { id: appsList anchors.fill: parent - spacing: 4 * scaling + spacing: Style.marginTiniest * scaling model: filteredEntries currentIndex: selectedIndex delegate: Rectangle { width: appsList.width - Style.marginSmall * scaling height: 65 * scaling - radius: 16 * scaling + radius: Style.radiusMedium * scaling property bool isSelected: index === selectedIndex color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Colors.mPrimary, 1.1) : Colors.mSurface border.color: (appCardArea.containsMouse || isSelected) ? Colors.mPrimary : "transparent" - border.width: (appCardArea.containsMouse || isSelected) ? 2 : 0 + border.width: Math.max(1, (appCardArea.containsMouse || isSelected) ? Style.borderMedium * scaling : 0) Behavior on color { ColorAnimation { - duration: 150 + duration: Style.animationFast } } Behavior on border.color { ColorAnimation { - duration: 150 + duration: Style.animationFast } } Behavior on border.width { NumberAnimation { - duration: 150 + duration: Style.animationFast } } @@ -399,9 +399,9 @@ NLoader { // App icon with background Rectangle { - Layout.preferredWidth: 40 * scaling - Layout.preferredHeight: 40 * scaling - radius: 14 * scaling + Layout.preferredWidth: Style.baseWidgetSize * 1.25 * scaling + Layout.preferredHeight: Style.baseWidgetSize * 1.25 * scaling + radius: Style.radiusSmall * scaling color: appCardArea.containsMouse ? Qt.darker(Colors.mPrimary, 1.1) : Colors.mSurfaceVariant property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard @@ -414,9 +414,9 @@ NLoader { // Clipboard image display Image { id: clipboardImage - anchors.fill: parent - anchors.margins: 6 * scaling - visible: modelData.type === 'image' + anchors.fill: parent + anchors.margins: Style.marginTiny * scaling + visible: modelData.type === 'image' source: modelData.data || "" fillMode: Image.PreserveAspectCrop asynchronous: true @@ -426,7 +426,7 @@ NLoader { IconImage { id: iconImg anchors.fill: parent - anchors.margins: 6 * scaling + anchors.margins: Style.marginTiny * scaling asynchronous: true source: modelData.isCalculator ? "calculate" : modelData.isClipboard ? (modelData.type === 'image' ? "" : "content_paste") : modelData.isCommand ? modelData.icon : (modelData.icon ? Quickshell.iconPath(modelData.icon, "application-x-executable") : "") visible: (modelData.isCalculator || modelData.isClipboard || modelData.isCommand @@ -436,10 +436,10 @@ NLoader { // Fallback icon container Rectangle { anchors.fill: parent - anchors.margins: 6 * scaling - radius: 10 * scaling + anchors.margins: Style.marginTiny * scaling + radius: Style.radiusTiny * scaling color: Colors.mPrimary - opacity: 0.3 + opacity: Style.opacityMedium visible: !parent.iconLoaded } @@ -448,14 +448,14 @@ NLoader { visible: !parent.iconLoaded && !(modelData.isCalculator || modelData.isClipboard || modelData.isCommand) text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?" - font.pointSize: 18 * scaling + font.pointSize: Style.fontSizeXL * scaling font.weight: Font.Bold color: Colors.mPrimary } Behavior on color { ColorAnimation { - duration: 150 + duration: Style.animationFast } } } @@ -463,11 +463,11 @@ NLoader { // App info ColumnLayout { Layout.fillWidth: true - spacing: 2 * scaling + spacing: Style.marginTiniest * scaling NText { text: modelData.name || "Unknown" - font.pointSize: 14 * scaling + font.pointSize: Style.fontSizeLarge * scaling font.weight: Font.Bold color: Colors.mOnSurface elide: Text.ElideRight @@ -476,7 +476,7 @@ NLoader { NText { text: modelData.isCalculator ? (modelData.expr + " = " + modelData.result) : modelData.isClipboard ? modelData.content : modelData.isCommand ? modelData.content : (modelData.genericName || modelData.comment || "") - font.pointSize: 11 * scaling + font.pointSize: Style.fontSizeMedium * scaling color: (appCardArea.containsMouse || isSelected) ? Colors.mOnSurface : Colors.mOnSurface elide: Text.ElideRight diff --git a/Modules/Audio/CircularSpectrum.qml b/Modules/Audio/CircularSpectrum.qml index a58079a..02371a8 100644 --- a/Modules/Audio/CircularSpectrum.qml +++ b/Modules/Audio/CircularSpectrum.qml @@ -45,7 +45,7 @@ Item { Behavior on height { SmoothedAnimation { - duration: 120 + duration: Style.animationFast } } } diff --git a/Modules/Bar/ActiveWindow.qml b/Modules/Bar/ActiveWindow.qml index 921f211..408ead5 100644 --- a/Modules/Bar/ActiveWindow.qml +++ b/Modules/Bar/ActiveWindow.qml @@ -16,7 +16,7 @@ Row { // Timer to hide full title after window switch Timer { id: fullTitleTimer - interval: 2000 // Show full title for 2 seconds + interval: Style.animationSlow * 4 // Show full title for 2 seconds repeat: false onTriggered: { showingFullTitle = false @@ -59,7 +59,7 @@ Row { Behavior on width { NumberAnimation { - duration: 300 + duration: Style.animationNormal easing.type: Easing.OutCubic } } diff --git a/Modules/Bar/TrayMenu.qml b/Modules/Bar/TrayMenu.qml index 5289a72..98f2dcb 100644 --- a/Modules/Bar/TrayMenu.qml +++ b/Modules/Bar/TrayMenu.qml @@ -13,7 +13,7 @@ PopupWindow { property real anchorX property real anchorY - implicitWidth: 180 * scaling + implicitWidth: Style.baseWidgetSize * 5.625 * scaling implicitHeight: Math.max(60 * scaling, listView.contentHeight + (Style.marginMedium * 2 * scaling)) visible: false color: "transparent" @@ -250,7 +250,7 @@ PopupWindow { PopupWindow { id: subMenu - implicitWidth: 180 * scaling + implicitWidth: Style.baseWidgetSize * 5.625 * scaling implicitHeight: Math.max(40, listView.contentHeight + 12) visible: false color: "transparent" diff --git a/Modules/Bar/WiFiMenu.qml b/Modules/Bar/WiFiMenu.qml index 9163c4e..3d9ac0f 100644 --- a/Modules/Bar/WiFiMenu.qml +++ b/Modules/Bar/WiFiMenu.qml @@ -86,9 +86,9 @@ NLoader { Rectangle { id: wifiMenuRect color: Colors.mSurface - radius: Style.radiusMedium * scaling - border.color: Colors.mOutline - border.width: Math.max(1, Style.borderMedium * scaling) + radius: Style.radiusLarge * scaling + border.color: Colors.mOutlineVariant + border.width: Math.max(1, Style.borderThin * scaling) width: 340 * scaling height: 320 * scaling anchors.top: parent.top @@ -306,8 +306,8 @@ NLoader { } Item { - Layout.preferredWidth: 22 - Layout.preferredHeight: 22 + Layout.preferredWidth: Style.baseWidgetSize * 0.7 * scaling + Layout.preferredHeight: Style.baseWidgetSize * 0.7 * scaling visible: network.connectStatusSsid === modelData.ssid && (network.connectStatus !== "" || network.connectingSsid === modelData.ssid) @@ -324,7 +324,7 @@ NLoader { visible: network.connectStatus === "success" && !network.connectingSsid text: "check_circle" font.family: "Material Symbols Outlined" - font.pointSize: 18 * scaling + font.pointSize: Style.fontSizeXL * scaling color: "#43a047" // TBC: No! anchors.centerIn: parent } @@ -374,7 +374,7 @@ NLoader { id: passwordPromptSection Layout.fillWidth: true Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0 - Layout.margins: 8 + Layout.margins: Style.marginSmall * scaling visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt color: Colors.mSurfaceVariant radius: Style.radiusSmall * scaling @@ -386,14 +386,14 @@ NLoader { Item { Layout.fillWidth: true - Layout.preferredHeight: 36 + Layout.preferredHeight: Style.barHeight * scaling Rectangle { anchors.fill: parent - radius: 8 + radius: Style.radiusTiny * scaling color: "transparent" border.color: passwordInputField.activeFocus ? Colors.mPrimary : Colors.mOutline - border.width: 1 + border.width: Math.max(1, Style.borderThin * scaling) TextInput { id: passwordInputField @@ -425,12 +425,10 @@ NLoader { } Rectangle { - Layout.preferredWidth: 80 - Layout.preferredHeight: 36 + Layout.preferredWidth: Style.baseWidgetSize * 2.5 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusMedium * scaling color: Colors.mPrimary - border.color: Colors.mPrimary - border.width: 0 Behavior on color { ColorAnimation { diff --git a/Modules/Calendar/Calendar.qml b/Modules/Calendar/Calendar.qml index a51b8d3..48846c9 100644 --- a/Modules/Calendar/Calendar.qml +++ b/Modules/Calendar/Calendar.qml @@ -221,7 +221,7 @@ NLoader { Behavior on color { ColorAnimation { - duration: 150 + duration: Style.animationFast } } } diff --git a/Modules/Dock/Dock.qml b/Modules/Dock/Dock.qml index 4ae7b3b..9b4a18f 100644 --- a/Modules/Dock/Dock.qml +++ b/Modules/Dock/Dock.qml @@ -26,11 +26,11 @@ NLoader { property bool hidden: autoHide // Start hidden only if auto-hide is enabled property int hideDelay: 500 property int showDelay: 100 - property int hideAnimationDuration: 200 - property int showAnimationDuration: 150 + property int hideAnimationDuration: Style.animationFast + property int showAnimationDuration: Style.animationFast property int peekHeight: 2 property int fullHeight: dockContainer.height - property int iconSize: 48 + property int iconSize: 36 // Track hover state property bool dockHovered: false @@ -51,7 +51,7 @@ NLoader { anchors.right: true focusable: false color: "transparent" - implicitHeight: iconSize * 1.5 * scaling + implicitHeight: iconSize * 1.4 * scaling // Timer for auto-hide delay Timer { @@ -110,8 +110,8 @@ NLoader { Rectangle { id: dockContainer width: dock.width + 48 * scaling - height: iconSize * 1.5 * scaling - color: Colors.mSurfaceVariant + height: iconSize * 1.4 * scaling + color: Colors.mSurface anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom topLeftRadius: Style.radiusLarge * scaling @@ -258,7 +258,7 @@ NLoader { radius: Style.radiusTiny anchors.top: parent.bottom anchors.horizontalCenter: parent.horizontalCenter - anchors.topMargin: 2 * scaling + anchors.topMargin: Style.marginTiniest * scaling } } } @@ -290,12 +290,12 @@ NLoader { Rectangle { id: contextMenuContainer - width: 80 - height: 32 - radius: 8 + width: Style.baseWidgetSize * 2.5 * scaling + height: Style.baseWidgetSize * scaling + radius: Style.radiusTiny * scaling color: closeMouseArea.containsMouse ? Colors.mTertiary : Colors.mSurface border.color: Colors.mOutline - border.width: 1 + border.width: Math.max(1, Style.borderThin * scaling) x: { if (!contextMenuTarget) @@ -315,7 +315,7 @@ NLoader { Text { anchors.centerIn: parent text: "Close" - font.pixelSize: 14 + font.pointSize: Style.fontSizeMedium * scaling color: Colors.mOnSurface } @@ -340,14 +340,14 @@ NLoader { Behavior on scale { NumberAnimation { - duration: 150 + duration: Style.animationFast easing.type: Easing.OutBack } } Behavior on opacity { NumberAnimation { - duration: 100 + duration: Style.animationFast } } } diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 9efce8e..e8e289c 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -174,7 +174,7 @@ WlSessionLock { // Time display - Large and prominent with pulse animation Column { - spacing: 8 * scaling + spacing: Style.marginSmall * scaling Layout.alignment: Qt.AlignHCenter Text { @@ -216,7 +216,7 @@ WlSessionLock { // User section with animated avatar Column { - spacing: 16 * scaling + spacing: Style.marginMedium * scaling Layout.alignment: Qt.AlignHCenter // Animated avatar with glow effect @@ -226,7 +226,7 @@ WlSessionLock { radius: width * 0.5 color: "transparent" border.color: Colors.mPrimary - border.width: 3 * scaling + border.width: Math.max(1, Style.borderThick * scaling) anchors.horizontalCenter: parent.horizontalCenter // Glow effect @@ -237,7 +237,7 @@ WlSessionLock { radius: width * 0.5 color: "transparent" border.color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, 0.3) - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) z: -1 SequentialAnimation on scale { @@ -274,7 +274,7 @@ WlSessionLock { Behavior on scale { NumberAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutBack } } @@ -303,10 +303,10 @@ WlSessionLock { Rectangle { id: terminalBackground anchors.fill: parent - radius: 16 + radius: Style.radiusMedium * scaling color: Colors.applyOpacity(Colors.mSurface, "E6") border.color: Colors.mPrimary - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) // Scanline effect Repeater { @@ -316,7 +316,7 @@ WlSessionLock { height: 1 color: Colors.applyOpacity(Colors.mPrimary, "1A") y: index * 10 - opacity: 0.3 + opacity: Style.opacityMedium SequentialAnimation on opacity { loops: Animation.Infinite @@ -337,13 +337,13 @@ WlSessionLock { width: parent.width height: 40 * scaling color: Colors.applyOpacity(Colors.mPrimary, "33") - topLeftRadius: 14 - topRightRadius: 14 + topLeftRadius: Style.radiusSmall * scaling + topRightRadius: Style.radiusSmall * scaling RowLayout { anchors.fill: parent - anchors.margins: 12 * scaling - spacing: 12 * scaling + anchors.margins: Style.marginMedium * scaling + spacing: Style.marginMedium * scaling Text { text: "SECURE TERMINAL" @@ -363,13 +363,13 @@ WlSessionLock { anchors.right: parent.right anchors.bottom: parent.bottom anchors.topMargin: 70 * scaling - anchors.margins: 12 * scaling - spacing: 12 * scaling + anchors.margins: Style.marginMedium * scaling + spacing: Style.marginMedium * scaling // Welcome back typing effect RowLayout { Layout.fillWidth: true - spacing: 12 * scaling + spacing: Style.marginMedium * scaling Text { text: "root@noctalia:~$" @@ -389,7 +389,7 @@ WlSessionLock { property string fullText: "Welcome back, " + Quickshell.env("USER") + "!" Timer { - interval: 100 + interval: Style.animationFast running: true repeat: true onTriggered: { @@ -407,7 +407,7 @@ WlSessionLock { // Command line with integrated password input RowLayout { Layout.fillWidth: true - spacing: 12 * scaling + spacing: Style.marginMedium * scaling Text { text: "root@noctalia:~$" @@ -489,7 +489,7 @@ WlSessionLock { color: Colors.mPrimary visible: passwordInput.activeFocus anchors.left: asterisksText.right - anchors.leftMargin: 2 * scaling + anchors.leftMargin: Style.marginTiniest * scaling anchors.verticalCenter: asterisksText.verticalCenter SequentialAnimation on opacity { @@ -532,10 +532,10 @@ WlSessionLock { Rectangle { width: 120 * scaling height: 40 * scaling - radius: 12 + radius: Style.radiusSmall * scaling color: executeButtonArea.containsMouse ? Colors.mPrimary : Colors.applyOpacity(Colors.mPrimary, "33") border.color: Colors.mPrimary - border.width: 1 + border.width: Math.max(1, Style.borderThin * scaling) enabled: !lock.authenticating Layout.alignment: Qt.AlignRight Layout.bottomMargin: -12 * scaling @@ -559,7 +559,7 @@ WlSessionLock { running: containsMouse NumberAnimation { to: 1.05 - duration: 150 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -568,7 +568,7 @@ WlSessionLock { running: !containsMouse NumberAnimation { to: 1.0 - duration: 150 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -598,7 +598,7 @@ WlSessionLock { radius: parent.radius color: "transparent" border.color: Colors.applyOpacity(Colors.mPrimary, "4D") - border.width: 1 + border.width: Math.max(1, Style.borderThin * scaling) z: -1 SequentialAnimation on opacity { @@ -632,10 +632,10 @@ WlSessionLock { Rectangle { width: 64 * scaling height: 64 * scaling - radius: 32 + radius: Style.radiusLarge * scaling color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, shutdownArea.containsMouse ? 0.9 : 0.2) border.color: Colors.mError - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) // Glow effect Rectangle { @@ -645,13 +645,13 @@ WlSessionLock { radius: width * 0.5 color: "transparent" border.color: Qt.rgba(Colors.mError.r, Colors.mError.g, Colors.mError.b, 0.3) - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) opacity: shutdownArea.containsMouse ? 1 : 0 z: -1 Behavior on opacity { NumberAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -672,13 +672,13 @@ WlSessionLock { anchors.centerIn: parent text: "power_settings_new" font.family: "Material Symbols Outlined" - font.pixelSize: 28 * scaling + font.pointSize: Style.fontSizeXXL * scaling color: shutdownArea.containsMouse ? Colors.onAccent : Colors.mError } Behavior on color { ColorAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -689,10 +689,10 @@ WlSessionLock { Rectangle { width: 64 * scaling height: 64 * scaling - radius: 32 + radius: Style.radiusLarge * scaling color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, rebootArea.containsMouse ? 0.9 : 0.2) border.color: Colors.mPrimary - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) // Glow effect Rectangle { @@ -702,13 +702,13 @@ WlSessionLock { radius: width * 0.5 color: "transparent" border.color: Qt.rgba(Colors.mPrimary.r, Colors.mPrimary.g, Colors.mPrimary.b, 0.3) - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) opacity: rebootArea.containsMouse ? 1 : 0 z: -1 Behavior on opacity { NumberAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -728,13 +728,13 @@ WlSessionLock { anchors.centerIn: parent text: "refresh" font.family: "Material Symbols Outlined" - font.pixelSize: 28 * scaling + font.pointSize: Style.fontSizeXXL * scaling color: rebootArea.containsMouse ? Colors.onAccent : Colors.mPrimary } Behavior on color { ColorAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -745,11 +745,11 @@ WlSessionLock { Rectangle { width: 64 * scaling height: 64 * scaling - radius: 32 + radius: Style.radiusLarge * scaling color: Qt.rgba(Colors.mSecondary.r, Colors.mSecondary.g, Colors.mSecondary.b, logoutArea.containsMouse ? 0.9 : 0.2) border.color: Colors.mSecondary - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) // Glow effect Rectangle { @@ -759,13 +759,13 @@ WlSessionLock { radius: width * 0.5 color: "transparent" border.color: Qt.rgba(Colors.mSecondary.r, Colors.mSecondary.g, Colors.mSecondary.b, 0.3) - border.width: 2 * scaling + border.width: Math.max(1, Style.borderMedium * scaling) opacity: logoutArea.containsMouse ? 1 : 0 z: -1 Behavior on opacity { NumberAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } @@ -787,13 +787,13 @@ WlSessionLock { anchors.centerIn: parent text: "exit_to_app" font.family: "Material Symbols Outlined" - font.pixelSize: 28 * scaling + font.pointSize: Style.fontSizeXXL * scaling color: logoutArea.containsMouse ? Colors.onAccent : Colors.mSecondary } Behavior on color { ColorAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } diff --git a/Modules/Notification/Notification.qml b/Modules/Notification/Notification.qml index 9ce4234..294c93c 100644 --- a/Modules/Notification/Notification.qml +++ b/Modules/Notification/Notification.qml @@ -58,7 +58,7 @@ Variants { id: notificationStack anchors.top: parent.top anchors.right: parent.right - spacing: 8 * scaling + spacing: Style.marginSmall * scaling width: 360 * scaling visible: true @@ -146,7 +146,7 @@ Variants { Rectangle { width: 6 * scaling height: 6 * scaling - radius: 3 * scaling + radius: Style.radiusTiny * scaling color: (model.urgency === NotificationUrgency.Critical) ? Colors.mError : (model.urgency === NotificationUrgency.Low) ? Colors.mOnSurface : Colors.mPrimary Layout.alignment: Qt.AlignVCenter } diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index 146b1a7..4ee40f6 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/Modules/Notification/NotificationHistoryPanel.qml @@ -65,10 +65,10 @@ NLoader { Rectangle { id: notificationRect - color: Colors.mSurfaceVariant - radius: Style.radiusMedium * scaling + color: Colors.mSurface + radius: Style.radiusLarge * scaling border.color: Colors.mOutlineVariant - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderThin * scaling) width: 400 * scaling height: 500 * scaling anchors.top: parent.top @@ -165,16 +165,16 @@ NLoader { RowLayout { anchors { fill: parent - margins: 15 + margins: Style.marginMedium * scaling } - spacing: 15 + spacing: Style.marginMedium * scaling // Notification content Column { id: notificationContent Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter - spacing: 5 + spacing: Style.marginTiniest * scaling NText { text: (summary || "No summary").substring(0, 100) @@ -220,7 +220,7 @@ NLoader { MouseArea { id: notificationMouseArea anchors.fill: parent - anchors.rightMargin: 50 * scaling + anchors.rightMargin: Style.marginLarge * 3 * scaling hoverEnabled: true // Remove the onClicked handler since we now have a dedicated delete button } diff --git a/Modules/Settings/SettingsPanel.qml b/Modules/Settings/SettingsPanel.qml index 68f5a36..3099a7f 100644 --- a/Modules/Settings/SettingsPanel.qml +++ b/Modules/Settings/SettingsPanel.qml @@ -234,7 +234,7 @@ NLoader { Rectangle { id: sidebar - Layout.preferredWidth: 260 * scaling + Layout.preferredWidth: Style.sliderWidth * 1.3 * scaling Layout.fillHeight: true color: Colors.mSurfaceVariant border.color: Colors.mOutlineVariant diff --git a/Modules/Settings/Tabs/AboutTab.qml b/Modules/Settings/Tabs/AboutTab.qml index 3153379..2fd7973 100644 --- a/Modules/Settings/Tabs/AboutTab.qml +++ b/Modules/Settings/Tabs/AboutTab.qml @@ -107,11 +107,11 @@ ColumnLayout { Layout.alignment: Qt.AlignCenter Layout.topMargin: Style.marginSmall * scaling Layout.preferredWidth: updateText.implicitWidth + 46 * scaling - Layout.preferredHeight: 32 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusLarge * scaling color: updateArea.containsMouse ? Colors.mPrimary : "transparent" border.color: Colors.mPrimary - border.width: 1 + border.width: Math.max(1, Style.borderThin * scaling) visible: { if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown") return false @@ -132,19 +132,19 @@ ColumnLayout { RowLayout { anchors.centerIn: parent - spacing: 8 + spacing: Style.marginSmall * scaling NText { text: "system_update" font.family: "Material Symbols Outlined" - font.pointSize: 18 * scaling + font.pointSize: Style.fontSizeXL * scaling color: updateArea.containsMouse ? Colors.mSurface : Colors.mPrimary } NText { id: updateText text: "Download latest release" - font.pointSize: 14 * scaling + font.pointSize: Style.fontSizeLarge * scaling color: updateArea.containsMouse ? Colors.mSurface : Colors.mPrimary } } @@ -191,8 +191,8 @@ ColumnLayout { anchors.fill: parent width: 200 * 4 * scaling height: Math.ceil(root.contributors.length / 4) * 100 - cellWidth: 200 * scaling - cellHeight: 100 * scaling + cellWidth: Style.baseWidgetSize * 6.25 * scaling + cellHeight: Style.baseWidgetSize * 3.125 * scaling model: root.contributors delegate: Rectangle { @@ -208,8 +208,8 @@ ColumnLayout { Item { Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 64 * scaling - Layout.preferredHeight: 64 * scaling + Layout.preferredWidth: Style.baseWidgetSize * 2 * scaling + Layout.preferredHeight: Style.baseWidgetSize * 2 * scaling NImageRounded { imagePath: modelData.avatar_url || "" diff --git a/Modules/Settings/Tabs/AudioTab.qml b/Modules/Settings/Tabs/AudioTab.qml index 3314c4e..36e3e2d 100644 --- a/Modules/Settings/Tabs/AudioTab.qml +++ b/Modules/Settings/Tabs/AudioTab.qml @@ -86,7 +86,7 @@ ColumnLayout { // Probably because they have some quick fades in and out to avoid clipping // We use a timer to space out the updates, to avoid lock up Timer { - interval: 100 + interval: Style.animationFast running: true repeat: true onTriggered: { diff --git a/Modules/Settings/Tabs/ColorSchemeTab.qml b/Modules/Settings/Tabs/ColorSchemeTab.qml index a8fe35c..c984552 100644 --- a/Modules/Settings/Tabs/ColorSchemeTab.qml +++ b/Modules/Settings/Tabs/ColorSchemeTab.qml @@ -30,6 +30,10 @@ ColumnLayout { // Array to hold FileView objects property var fileViews: [] + // Scale properties for card animations + property real cardScaleLow: 0.95 + property real cardScaleHigh: 1.0 + // Load color scheme data when schemes are available Connections { target: ColorSchemes @@ -100,8 +104,6 @@ ColumnLayout { } function schemeLoaded(schemeName, jsonData) { - console.log("Loading scheme colors for:", schemeName) - var colors = {} // Extract colors from JSON data @@ -130,8 +132,6 @@ ColumnLayout { var newCache = schemeColorsCache newCache[schemeName] = colors schemeColorsCache = newCache - - console.log("Cached colors for", schemeName, ":", JSON.stringify(colors)) } ScrollView { @@ -212,9 +212,6 @@ ColumnLayout { Repeater { model: ColorSchemes.schemes - property real cardScaleLow: 0.95 - property real cardScaleHigh: 1.00 - Rectangle { id: schemeCard Layout.fillWidth: true @@ -223,7 +220,7 @@ ColumnLayout { color: getSchemeColor(modelData, "mSurface") border.width: Math.max(1, Style.borderThick * scaling) border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Colors.mPrimary : Colors.mOutline - scale: cardScaleLow + scale: root.cardScaleLow property string schemePath: modelData @@ -240,11 +237,11 @@ ColumnLayout { cursorShape: Qt.PointingHandCursor onEntered: { - schemeCard.scale = cardScaleHight + schemeCard.scale = root.cardScaleHigh } onExited: { - schemeCard.scale = cardScaleLow + schemeCard.scale = root.cardScaleLow } } @@ -287,7 +284,7 @@ ColumnLayout { Rectangle { width: 28 * scaling height: 28 * scaling - radius: 14 * scaling + radius: Style.radiusSmall * scaling color: getSchemeColor(modelData, "mSecondary") } diff --git a/Modules/Settings/Tabs/TimeWeatherTab.qml b/Modules/Settings/Tabs/TimeWeatherTab.qml index 0847341..47cbf7c 100644 --- a/Modules/Settings/Tabs/TimeWeatherTab.qml +++ b/Modules/Settings/Tabs/TimeWeatherTab.qml @@ -74,7 +74,7 @@ ColumnLayout { font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.mOnSurface - Layout.bottomMargin: 8 + Layout.bottomMargin: Style.marginSmall * scaling } NToggle { diff --git a/Modules/Settings/Tabs/WallpaperSelectorTab.qml b/Modules/Settings/Tabs/WallpaperSelectorTab.qml index 5100b9a..0077ff8 100644 --- a/Modules/Settings/Tabs/WallpaperSelectorTab.qml +++ b/Modules/Settings/Tabs/WallpaperSelectorTab.qml @@ -149,8 +149,7 @@ Item { anchors.margins: Style.marginTiny * scaling imagePath: wallpaperPath fallbackIcon: "image" - borderColor: "transparent" - borderWidth: 0 + imageRadius: Style.radiusMedium * scaling } @@ -185,7 +184,7 @@ Item { Behavior on opacity { NumberAnimation { - duration: 150 + duration: Style.animationFast } } } @@ -235,7 +234,7 @@ Item { color: Colors.mOnSurface wrapMode: Text.WordWrap horizontalAlignment: Text.AlignHCenter - Layout.preferredWidth: 300 * scaling + Layout.preferredWidth: Style.sliderWidth * 1.5 * scaling } } } diff --git a/Modules/Settings/Tabs/WallpaperTab.qml b/Modules/Settings/Tabs/WallpaperTab.qml index 50e6377..9e75c84 100644 --- a/Modules/Settings/Tabs/WallpaperTab.qml +++ b/Modules/Settings/Tabs/WallpaperTab.qml @@ -149,7 +149,7 @@ ColumnLayout { font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold color: Colors.mOnSurface - Layout.bottomMargin: 8 + Layout.bottomMargin: Style.marginSmall * scaling } // Use SWWW diff --git a/Modules/SidePanel/Cards/MediaCard.qml b/Modules/SidePanel/Cards/MediaCard.qml index 43b1594..4a9a47f 100644 --- a/Modules/SidePanel/Cards/MediaCard.qml +++ b/Modules/SidePanel/Cards/MediaCard.qml @@ -65,7 +65,7 @@ NBox { ComboBox { id: playerSelector Layout.fillWidth: true - Layout.preferredHeight: 30 * scaling + Layout.preferredHeight: Style.barHeight * 0.83 * scaling visible: MediaPlayer.getAvailablePlayers().length > 1 model: MediaPlayer.getAvailablePlayers() textRole: "identity" @@ -252,7 +252,7 @@ NBox { Behavior on width { NumberAnimation { - duration: 200 + duration: Style.animationFast } } } @@ -273,7 +273,7 @@ NBox { Behavior on scale { NumberAnimation { - duration: 150 + duration: Style.animationFast } } } diff --git a/Modules/SidePanel/Cards/ProfileCard.qml b/Modules/SidePanel/Cards/ProfileCard.qml index d8921d3..8b17fb2 100644 --- a/Modules/SidePanel/Cards/ProfileCard.qml +++ b/Modules/SidePanel/Cards/ProfileCard.qml @@ -38,7 +38,7 @@ NBox { ColumnLayout { Layout.fillWidth: true - spacing: 2 * scaling + spacing: Style.marginTiniest * scaling NText { text: Quickshell.env("USER") || "user" font.weight: Style.fontWeightBold diff --git a/Modules/SidePanel/Cards/SystemMonitorCard.qml b/Modules/SidePanel/Cards/SystemMonitorCard.qml index a4633b1..f353896 100644 --- a/Modules/SidePanel/Cards/SystemMonitorCard.qml +++ b/Modules/SidePanel/Cards/SystemMonitorCard.qml @@ -7,7 +7,7 @@ import qs.Widgets NBox { id: root - Layout.preferredWidth: 84 * scaling + Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling implicitHeight: content.implicitHeight + Style.marginTiny * 2 * scaling Column { diff --git a/Modules/SidePanel/PowerMenu.qml b/Modules/SidePanel/PowerMenu.qml index 7a434f5..28139f4 100644 --- a/Modules/SidePanel/PowerMenu.qml +++ b/Modules/SidePanel/PowerMenu.qml @@ -54,7 +54,7 @@ NPanel { // Lock Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusSmall * scaling color: lockButtonArea.containsMouse ? Colors.mTertiary : "transparent" @@ -114,7 +114,7 @@ NPanel { // Suspend Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusSmall * scaling color: suspendButtonArea.containsMouse ? Colors.mTertiary : "transparent" @@ -172,7 +172,7 @@ NPanel { // Reboot Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusSmall * scaling color: rebootButtonArea.containsMouse ? Colors.mTertiary : "transparent" @@ -230,7 +230,7 @@ NPanel { // Logout Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusSmall * scaling color: logoutButtonArea.containsMouse ? Colors.mTertiary : "transparent" @@ -288,7 +288,7 @@ NPanel { // Shutdown Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 36 * scaling + Layout.preferredHeight: Style.barHeight * scaling radius: Style.radiusSmall * scaling color: shutdownButtonArea.containsMouse ? Colors.mTertiary : "transparent" diff --git a/Widgets/NCircleStat.qml b/Widgets/NCircleStat.qml index c5c0672..d41806c 100644 --- a/Widgets/NCircleStat.qml +++ b/Widgets/NCircleStat.qml @@ -94,7 +94,7 @@ Rectangle { anchors.right: parent.right anchors.top: parent.top anchors.rightMargin: -6 * scaling * contentScale - anchors.topMargin: 4 * scaling * contentScale + anchors.topMargin: Style.marginTiniest * scaling * contentScale Text { anchors.centerIn: parent diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index a89d6bc..4504d49 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -58,7 +58,7 @@ ColumnLayout { } background: Rectangle { - implicitWidth: 120 * scaling + implicitWidth: Style.baseWidgetSize * 3.75 * scaling implicitHeight: preferredHeight color: Colors.mSurface border.color: combo.activeFocus ? Colors.mTertiary : Colors.mOutline diff --git a/Widgets/NRadioButton.qml b/Widgets/NRadioButton.qml index ce94040..d9b232f 100644 --- a/Widgets/NRadioButton.qml +++ b/Widgets/NRadioButton.qml @@ -9,12 +9,12 @@ RadioButton { indicator: Rectangle { id: outerCircle - implicitWidth: 20 * scaling - implicitHeight: 20 * scaling + implicitWidth: Style.baseWidgetSize * 0.625 * scaling + implicitHeight: Style.baseWidgetSize * 0.625 * scaling radius: width * 0.5 color: "transparent" border.color: root.checked ? Colors.mPrimary : Colors.mOnSurface - border.width: 2 + border.width: Math.max(1, Style.borderMedium * scaling) anchors.verticalCenter: parent.verticalCenter Rectangle { diff --git a/Widgets/NTextInput.qml b/Widgets/NTextInput.qml index db61e2d..4c30955 100644 --- a/Widgets/NTextInput.qml +++ b/Widgets/NTextInput.qml @@ -17,7 +17,7 @@ Item { signal editingFinished // Sizing - implicitWidth: 320 * scaling + implicitWidth: Style.sliderWidth * 1.6 * scaling implicitHeight: Style.baseWidgetSize * 2.75 * scaling ColumnLayout { diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index fd42e39..bc068f6 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -60,7 +60,7 @@ RowLayout { Behavior on x { NumberAnimation { - duration: 200 + duration: Style.animationFast easing.type: Easing.OutCubic } } diff --git a/Widgets/NTooltip.qml b/Widgets/NTooltip.qml index 28bfd55..3af7657 100644 --- a/Widgets/NTooltip.qml +++ b/Widgets/NTooltip.qml @@ -121,7 +121,7 @@ Window { // Timer to trigger show animation Timer { id: showTimer - interval: 10 // Very short delay to ensure component is visible + interval: Style.animationFast / 15 // Very short delay to ensure component is visible repeat: false onTriggered: { // Animate to final values