diff --git a/Commons/Style.qml b/Commons/Style.qml index 3582082..cf33680 100644 --- a/Commons/Style.qml +++ b/Commons/Style.qml @@ -13,15 +13,13 @@ Singleton { */ // Font size - property real fontSizeTiny: 7 - property real fontSizeSmall: 9 - property real fontSizeReduced: 10 - property real fontSizeMedium: 11 - property real fontSizeInter: 12 - property real fontSizeLarge: 13 - property real fontSizeLarger: 16 - property real fontSizeXL: 18 - property real fontSizeXXL: 24 + property real fontSizeXS: 9 + property real fontSizeS: 10 + property real fontSizeM: 11 + property real fontSizeL: 13 + property real fontSizeXL: 16 + property real fontSizeXXL: 18 + property real fontSizeXXXL: 24 // Font weight property int fontWeightRegular: 400 @@ -30,20 +28,36 @@ Singleton { property int fontWeightBold: 700 // Radii - property int radiusTiny: 8 * Settings.data.general.radiusRatio - property int radiusSmall: 12 * Settings.data.general.radiusRatio - property int radiusMedium: 16 * Settings.data.general.radiusRatio - property int radiusLarge: 20 * Settings.data.general.radiusRatio + property int radiusXS: 8 * Settings.data.general.radiusRatio + property int radiusS: 12 * Settings.data.general.radiusRatio + property int radiusM: 16 * Settings.data.general.radiusRatio + property int radiusL: 20 * Settings.data.general.radiusRatio // Border - property int borderThin: 1 - property int borderMedium: 2 - property int borderThick: 3 + property int borderS: 1 + property int borderM: 2 + property int borderL: 3 + + // Margins (for margins and spacing) + property int marginXXS: 2 + property int marginXS: 4 + property int marginS: 8 + property int marginM: 12 + property int marginL: 16 + property int marginXL: 24 + + // Opacity + property real opacityNone: 0.0 + property real opacityLight: 0.25 + property real opacityMedium: 0.5 + property real opacityHeavy: 0.75 + property real opacityAlmost: 0.95 + property real opacityFull: 1.0 // Animation duration (ms) property int animationFast: 150 property int animationNormal: 300 - property int animationSlow: 500 + property int animationSlow: 450 // Dimensions property int barHeight: 36 @@ -54,20 +68,4 @@ Singleton { property int tooltipDelay: 300 property int tooltipDelayLong: 1200 property int pillDelay: 500 - - // Margins (for margins and spacing) - property int marginTiniest: 2 - property int marginTiny: 4 - property int marginSmall: 8 - property int marginMedium: 12 - property int marginLarge: 16 - property int marginXL: 24 - - // Opacity - property real opacityNone: 0.0 - property real opacityLight: 0.25 - property real opacityMedium: 0.5 - property real opacityHeavy: 0.75 - property real opacityAlmost: 0.95 - property real opacityFull: 1.0 } diff --git a/Modules/AppLauncher/AppLauncher.qml b/Modules/AppLauncher/AppLauncher.qml index 4414f31..3206b34 100644 --- a/Modules/AppLauncher/AppLauncher.qml +++ b/Modules/AppLauncher/AppLauncher.qml @@ -274,10 +274,10 @@ NLoader { anchors.centerIn: parent width: Math.min(700 * scaling, parent.width * 0.75) height: Math.min(550 * scaling, parent.height * 0.8) - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Style.borderThin * scaling + border.width: Style.borderS * scaling // Subtle gradient background gradient: Gradient { @@ -293,28 +293,27 @@ NLoader { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginM * scaling // Search bar Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - Layout.bottomMargin: Style.marginMedium * scaling - radius: Style.radiusMedium * scaling + Layout.bottomMargin: Style.marginM * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: searchInput.activeFocus ? Color.mPrimary : Color.mOutline - border.width: Math.max(1, - searchInput.activeFocus ? Style.borderMedium * scaling : Style.borderThin * scaling) + border.width: Math.max(1, searchInput.activeFocus ? Style.borderM * scaling : Style.borderS * scaling) Item { anchors.fill: parent - anchors.margins: Style.marginMedium * scaling + anchors.margins: Style.marginM * scaling NIcon { id: searchIcon text: "search" - font.pointSize: Style.fontSizeLarger * scaling + font.pointSize: Style.fontSizeXL * scaling color: searchInput.activeFocus ? Color.mPrimary : Color.mOnSurface anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter @@ -326,9 +325,9 @@ NLoader { color: Color.mOnSurface placeholderTextColor: Color.mOnSurfaceVariant background: null - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling anchors.left: searchIcon.right - anchors.leftMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter onTextChanged: { @@ -386,18 +385,18 @@ NLoader { ListView { id: appsList anchors.fill: parent - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling model: filteredEntries currentIndex: selectedIndex delegate: Rectangle { - width: appsList.width - Style.marginSmall * scaling + width: appsList.width - Style.marginS * scaling height: 65 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling property bool isSelected: index === selectedIndex color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Color.mPrimary, 1.1) : Color.mSurface border.color: (appCardArea.containsMouse || isSelected) ? Color.mPrimary : Color.transparent - border.width: Math.max(1, (appCardArea.containsMouse || isSelected) ? Style.borderMedium * scaling : 0) + border.width: Math.max(1, (appCardArea.containsMouse || isSelected) ? Style.borderM * scaling : 0) Behavior on color { ColorAnimation { @@ -419,14 +418,14 @@ NLoader { RowLayout { anchors.fill: parent - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginM * scaling // App icon with background Rectangle { Layout.preferredWidth: Style.baseWidgetSize * 1.25 * scaling Layout.preferredHeight: Style.baseWidgetSize * 1.25 * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: appCardArea.containsMouse ? Qt.darker(Color.mPrimary, 1.1) : Color.mSurfaceVariant property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard || modelData.isCommand) || (iconImg.status === Image.Ready && iconImg.source !== "" @@ -437,7 +436,7 @@ NLoader { Image { id: clipboardImage anchors.fill: parent - anchors.margins: Style.marginTiny * scaling + anchors.margins: Style.marginXS * scaling visible: modelData.type === 'image' source: modelData.data || "" fillMode: Image.PreserveAspectCrop @@ -448,7 +447,7 @@ NLoader { IconImage { id: iconImg anchors.fill: parent - anchors.margins: Style.marginTiny * scaling + anchors.margins: Style.marginXS * 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 @@ -458,8 +457,8 @@ NLoader { // Fallback icon container Rectangle { anchors.fill: parent - anchors.margins: Style.marginTiny * scaling - radius: Style.radiusTiny * scaling + anchors.margins: Style.marginXS * scaling + radius: Style.radiusXS * scaling color: Color.mPrimary opacity: Style.opacityMedium visible: !parent.iconLoaded @@ -470,7 +469,7 @@ NLoader { visible: !parent.iconLoaded && !(modelData.isCalculator || modelData.isClipboard || modelData.isCommand) text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Font.Bold color: Color.mPrimary } @@ -485,11 +484,11 @@ NLoader { // App info ColumnLayout { Layout.fillWidth: true - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling NText { text: modelData.name || "Unknown" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Font.Bold color: (appCardArea.containsMouse || isSelected) ? Color.mOnPrimary : Color.mOnSurface elide: Text.ElideRight @@ -498,7 +497,7 @@ NLoader { NText { text: modelData.isCalculator ? (modelData.expr + " = " + modelData.result) : modelData.isClipboard ? modelData.content : modelData.isCommand ? modelData.content : (modelData.genericName || modelData.comment || "") - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: (appCardArea.containsMouse || isSelected) ? Color.mOnPrimary : Color.mOnSurface elide: Text.ElideRight Layout.fillWidth: true @@ -525,7 +524,7 @@ NLoader { // No results message NText { text: searchText.trim() !== "" ? "No applications found" : "No applications available" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurface horizontalAlignment: Text.AlignHCenter Layout.fillWidth: true @@ -540,7 +539,7 @@ NLoader { ">calc") ? `${filteredEntries.length} result${filteredEntries.length !== 1 ? 's' : ''}` : `${filteredEntries.length} application${filteredEntries.length !== 1 ? 's' : ''}` - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface horizontalAlignment: Text.AlignHCenter Layout.fillWidth: true diff --git a/Modules/Background/ScreenCorners.qml b/Modules/Background/ScreenCorners.qml index 7e4bc37..bb5159d 100644 --- a/Modules/Background/ScreenCorners.qml +++ b/Modules/Background/ScreenCorners.qml @@ -24,7 +24,7 @@ NLoader { Settings.data.bar.backgroundOpacity) // The amount subtracted from full size for the inner cutout // Inner size = full size - borderWidth (per axis) - property int borderWidth: Style.borderMedium + property int borderWidth: Style.borderM // Rounded radius for the inner cutout property int innerRadius: 20 diff --git a/Modules/Bar/ActiveWindow.qml b/Modules/Bar/ActiveWindow.qml index b5a6e8a..024ad6e 100644 --- a/Modules/Bar/ActiveWindow.qml +++ b/Modules/Bar/ActiveWindow.qml @@ -9,7 +9,7 @@ import qs.Widgets Row { id: root anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling visible: (Settings.data.bar.showActiveWindow && getTitle() !== "") property bool showingFullTitle: false @@ -53,31 +53,31 @@ Row { Rectangle { // Let the Rectangle size itself based on its content (the Row) - width: row.width + Style.marginMedium * scaling * 2 + width: row.width + Style.marginM * scaling * 2 height: Math.round(Style.barHeight * 0.75 * scaling) - radius: Math.round(Style.radiusMedium * scaling) + radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderThin * scaling)) + border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.verticalCenter: parent.verticalCenter Item { id: mainContainer anchors.fill: parent - anchors.leftMargin: Style.marginSmall * scaling - anchors.rightMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling + anchors.rightMargin: Style.marginS * scaling Row { id: row anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling // Window icon NIcon { id: windowIcon text: "dialogs" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter visible: getTitle() !== "" @@ -92,7 +92,7 @@ Row { 300 * scaling) : Math.min( fullTitleMetrics.contentWidth, 150 * scaling) text: getTitle() - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightMedium elide: Text.ElideRight anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Bar/Bar.qml b/Modules/Bar/Bar.qml index 273d8e6..2b02104 100644 --- a/Modules/Bar/Bar.qml +++ b/Modules/Bar/Bar.qml @@ -49,9 +49,9 @@ Variants { height: parent.height anchors.left: parent.left - anchors.leftMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling SystemMonitor {} @@ -67,7 +67,7 @@ Variants { height: parent.height anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Workspace {} } @@ -78,9 +78,9 @@ Variants { height: parent.height anchors.right: bar.right - anchors.rightMargin: Style.marginSmall * scaling + anchors.rightMargin: Style.marginS * scaling anchors.verticalCenter: bar.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling // Screen Recording Indicator NIconButton { diff --git a/Modules/Bar/BluetoothMenu.qml b/Modules/Bar/BluetoothMenu.qml index c5c4136..6cc4abb 100644 --- a/Modules/Bar/BluetoothMenu.qml +++ b/Modules/Bar/BluetoothMenu.qml @@ -68,15 +68,15 @@ NLoader { property var deviceData: null color: Color.mSurface - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) width: 380 * scaling height: 500 * scaling anchors.top: parent.top anchors.right: parent.right - anchors.topMargin: Style.marginTiny * scaling - anchors.rightMargin: Style.marginTiny * scaling + anchors.topMargin: Style.marginXS * scaling + anchors.rightMargin: Style.marginXS * scaling // Animation properties property real scaleValue: 0.8 @@ -113,23 +113,23 @@ NLoader { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginM * scaling // HEADER RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "bluetooth" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: Color.mPrimary } NText { text: "Bluetooth" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface Layout.fillWidth: true @@ -172,16 +172,16 @@ NLoader { id: column width: parent.width - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling visible: BluetoothService.adapter && BluetoothService.adapter.enabled RowLayout { width: parent.width - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "Available Devices" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurface font.weight: Style.fontWeightMedium } @@ -206,7 +206,7 @@ NLoader { width: parent.width height: 70 - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: { if (availableDeviceArea.containsMouse && !isBusy) return Color.mTertiary @@ -220,18 +220,18 @@ NLoader { return Color.mSurfaceVariant } border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) Row { anchors.left: parent.left - anchors.leftMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling // One device BT icon NIcon { text: BluetoothService.getDeviceIcon(modelData) - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: { if (availableDeviceArea.containsMouse) return Color.mOnTertiary @@ -248,7 +248,7 @@ NLoader { } Column { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling anchors.verticalCenter: parent.verticalCenter // One device name @@ -272,10 +272,10 @@ NLoader { } Row { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Row { - spacing: Style.marginSmall * spacing + spacing: Style.marginS * spacing // One device signal strength - "Unknown" when not connected NText { @@ -288,7 +288,7 @@ NLoader { return BluetoothService.getSignalStrength(modelData) } - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: { if (availableDeviceArea.containsMouse) return Color.mOnTertiary @@ -305,7 +305,7 @@ NLoader { NIcon { text: BluetoothService.getSignalIcon(modelData) - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: { if (availableDeviceArea.containsMouse) return Color.mOnTertiary @@ -325,7 +325,7 @@ NLoader { NText { text: (modelData.signalStrength !== undefined && modelData.signalStrength > 0) ? modelData.signalStrength + "%" : "" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: { if (availableDeviceArea.containsMouse) return Color.mOnTertiary @@ -349,9 +349,9 @@ NLoader { Rectangle { width: 80 * scaling height: 28 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling anchors.right: parent.right - anchors.rightMargin: Style.marginMedium * scaling + anchors.rightMargin: Style.marginM * scaling anchors.verticalCenter: parent.verticalCenter visible: modelData.state !== BluetoothDeviceState.Connecting color: Color.transparent @@ -363,7 +363,7 @@ NLoader { return Color.mPrimary } } - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) opacity: canConnect || isBusy ? 1 : 0.5 // On device connect button @@ -378,7 +378,7 @@ NLoader { return "Connect" } - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling font.weight: Style.fontWeightMedium color: { if (availableDeviceArea.containsMouse) { @@ -409,7 +409,7 @@ NLoader { // Fallback if nothing available Column { width: parent.width - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling visible: { if (!BluetoothService.adapter || !BluetoothService.adapter.discovering || !Bluetooth.devices) return false @@ -425,7 +425,7 @@ NLoader { Row { anchors.horizontalCenter: parent.horizontalCenter - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "sync" @@ -444,7 +444,7 @@ NLoader { NText { text: "Scanning for devices..." - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurface font.weight: Style.fontWeightMedium anchors.verticalCenter: parent.verticalCenter @@ -453,7 +453,7 @@ NLoader { NText { text: "Make sure your device is in pairing mode" - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurfaceVariant anchors.horizontalCenter: parent.horizontalCenter } @@ -461,7 +461,7 @@ NLoader { NText { text: "No devices found. Put your device in pairing mode and click Start Scanning." - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurfaceVariant visible: { if (!BluetoothService.adapter || !Bluetooth.devices) diff --git a/Modules/Bar/MediaMini.qml b/Modules/Bar/MediaMini.qml index 29eaaa2..ee7599a 100644 --- a/Modules/Bar/MediaMini.qml +++ b/Modules/Bar/MediaMini.qml @@ -9,7 +9,7 @@ import qs.Widgets Row { id: root anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling visible: Settings.data.bar.showMedia && (MediaService.canPlay || MediaService.canPause) function getTitle() { @@ -26,32 +26,32 @@ Row { Rectangle { // Let the Rectangle size itself based on its content (the Row) - width: row.width + Style.marginMedium * scaling * 2 + width: row.width + Style.marginM * scaling * 2 height: Math.round(Style.barHeight * 0.75 * scaling) - radius: Math.round(Style.radiusMedium * scaling) + radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderThin * scaling)) + border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.verticalCenter: parent.verticalCenter Item { id: mainContainer anchors.fill: parent - anchors.leftMargin: Style.marginSmall * scaling - anchors.rightMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling + anchors.rightMargin: Style.marginS * scaling Row { id: row anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling // Window icon NIcon { id: windowIcon text: MediaService.isPlaying ? "pause" : "play_arrow" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling verticalAlignment: Text.AlignVCenter anchors.verticalCenter: parent.verticalCenter visible: getTitle() !== "" @@ -66,7 +66,7 @@ Row { 400 * scaling) : Math.min(fullTitleMetrics.contentWidth, 150 * scaling) text: getTitle() - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightMedium elide: Text.ElideRight anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Bar/SystemMonitor.qml b/Modules/Bar/SystemMonitor.qml index 72bc2c3..ded564e 100644 --- a/Modules/Bar/SystemMonitor.qml +++ b/Modules/Bar/SystemMonitor.qml @@ -7,34 +7,34 @@ import qs.Widgets Row { id: root anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling visible: (Settings.data.bar.showSystemInfo) Rectangle { // Let the Rectangle size itself based on its content (the Row) - width: row.width + Style.marginMedium * scaling * 2 + width: row.width + Style.marginM * scaling * 2 height: Math.round(Style.barHeight * 0.75 * scaling) - radius: Math.round(Style.radiusMedium * scaling) + radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderThin * scaling)) + border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.verticalCenter: parent.verticalCenter Item { id: mainContainer anchors.fill: parent - anchors.leftMargin: Style.marginSmall * scaling - anchors.rightMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling + anchors.rightMargin: Style.marginS * scaling Row { id: row anchors.verticalCenter: parent.verticalCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Row { id: cpuUsageLayout - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling NIcon { id: cpuUsageIcon @@ -45,7 +45,7 @@ Row { NText { id: cpuUsageText text: `${SystemStatService.cpuUsage}%` - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightMedium anchors.verticalCenter: parent.verticalCenter verticalAlignment: Text.AlignVCenter @@ -57,7 +57,7 @@ Row { Row { id: cpuTempLayout // spacing is thin here to compensate for the vertical thermometer icon - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling NIcon { text: "thermometer" @@ -66,7 +66,7 @@ Row { NText { text: `${SystemStatService.cpuTemp}°C` - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightMedium anchors.verticalCenter: parent.verticalCenter verticalAlignment: Text.AlignVCenter @@ -77,7 +77,7 @@ Row { // Memory Usage Component Row { id: memoryUsageLayout - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling NIcon { text: "memory" @@ -86,7 +86,7 @@ Row { NText { text: `${SystemStatService.memoryUsageGb}G` - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling font.weight: Style.fontWeightMedium anchors.verticalCenter: parent.verticalCenter verticalAlignment: Text.AlignVCenter diff --git a/Modules/Bar/Tray.qml b/Modules/Bar/Tray.qml index 4439431..f351a60 100644 --- a/Modules/Bar/Tray.qml +++ b/Modules/Bar/Tray.qml @@ -19,7 +19,7 @@ Item { Row { id: tray - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.alignment: Qt.AlignVCenter Repeater { @@ -33,8 +33,8 @@ Item { IconImage { id: trayIcon anchors.centerIn: parent - width: Style.marginLarge * scaling - height: Style.marginLarge * scaling + width: Style.marginL * scaling + height: Style.marginL * scaling smooth: false asynchronous: true backer.fillMode: Image.PreserveAspectFit diff --git a/Modules/Bar/TrayMenu.qml b/Modules/Bar/TrayMenu.qml index f337b9c..51a2fd2 100644 --- a/Modules/Bar/TrayMenu.qml +++ b/Modules/Bar/TrayMenu.qml @@ -18,7 +18,7 @@ PopupWindow { implicitWidth: 200 * scaling // Use the content height of the Flickable for implicit height - implicitHeight: Math.min(Screen.height * 0.9, flickable.contentHeight + (Style.marginMedium * 2 * scaling)) + implicitHeight: Math.min(Screen.height * 0.9, flickable.contentHeight + (Style.marginM * 2 * scaling)) visible: false color: Color.transparent anchor.item: anchorItem @@ -85,14 +85,14 @@ PopupWindow { anchors.fill: parent color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusMedium * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusM * scaling } Flickable { id: flickable anchors.fill: parent - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling contentHeight: columnLayout.implicitHeight interactive: true clip: true @@ -116,8 +116,8 @@ PopupWindow { return 8 * scaling } else { // Calculate based on text content - const textHeight = text.contentHeight || (Style.fontSizeReduced * scaling * 1.2) - return Math.max(28 * scaling, textHeight + (Style.marginSmall * 2 * scaling)) + const textHeight = text.contentHeight || (Style.fontSizeS * scaling * 1.2) + return Math.max(28 * scaling, textHeight + (Style.marginS * 2 * scaling)) } } @@ -126,21 +126,21 @@ PopupWindow { NDivider { anchors.centerIn: parent - width: parent.width - (Style.marginMedium * scaling * 2) + width: parent.width - (Style.marginM * scaling * 2) visible: modelData?.isSeparator ?? false } Rectangle { anchors.fill: parent color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling visible: !(modelData?.isSeparator ?? false) RowLayout { anchors.fill: parent - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling + spacing: Style.marginS * scaling NText { id: text @@ -148,14 +148,14 @@ PopupWindow { color: (modelData?.enabled ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOutline text: modelData?.text ?? "" - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter wrapMode: Text.WordWrap } Image { - Layout.preferredWidth: Style.marginLarge * scaling - Layout.preferredHeight: Style.marginLarge * scaling + Layout.preferredWidth: Style.marginL * scaling + Layout.preferredHeight: Style.marginL * scaling source: modelData?.icon ?? "" visible: (modelData?.icon ?? "") !== "" fillMode: Image.PreserveAspectFit @@ -163,7 +163,7 @@ PopupWindow { NIcon { text: modelData?.hasChildren ? "menu" : "" - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling verticalAlignment: Text.AlignVCenter visible: modelData?.hasChildren ?? false color: Color.mOnSurface @@ -247,4 +247,4 @@ PopupWindow { } } } -} \ No newline at end of file +} diff --git a/Modules/Bar/WiFiMenu.qml b/Modules/Bar/WiFiMenu.qml index 5d97562..52ee45c 100644 --- a/Modules/Bar/WiFiMenu.qml +++ b/Modules/Bar/WiFiMenu.qml @@ -83,15 +83,15 @@ NLoader { Rectangle { id: wifiMenuRect color: Color.mSurface - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) width: 340 * scaling height: 500 * scaling anchors.top: parent.top anchors.right: parent.right - anchors.topMargin: Style.marginTiny * scaling - anchors.rightMargin: Style.marginTiny * scaling + anchors.topMargin: Style.marginXS * scaling + anchors.rightMargin: Style.marginXS * scaling // Animation properties property real scaleValue: 0.8 @@ -123,22 +123,22 @@ NLoader { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginM * scaling RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "wifi" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: Color.mPrimary } NText { text: "WiFi" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.bold: true color: Color.mOnSurface Layout.fillWidth: true @@ -174,7 +174,7 @@ NLoader { ColumnLayout { anchors.centerIn: parent visible: Settings.data.network.wifiEnabled && NetworkService.isLoading - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NBusyIndicator { running: NetworkService.isLoading @@ -195,18 +195,18 @@ NLoader { ColumnLayout { anchors.centerIn: parent visible: !Settings.data.network.wifiEnabled - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "wifi_off" - font.pointSize: Style.fontSizeXXL * scaling + font.pointSize: Style.fontSizeXXXL * scaling color: Color.mOnSurfaceVariant Layout.alignment: Qt.AlignHCenter } NText { text: "WiFi is disabled" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurfaceVariant Layout.alignment: Qt.AlignHCenter } @@ -225,7 +225,7 @@ NLoader { anchors.fill: parent visible: Settings.data.network.wifiEnabled && !NetworkService.isLoading model: Object.values(NetworkService.networks) - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling clip: true delegate: Item { @@ -240,23 +240,23 @@ NLoader { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent) RowLayout { anchors.fill: parent - anchors.margins: Style.marginSmall * scaling - spacing: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling + spacing: Style.marginS * scaling NIcon { text: NetworkService.signalIcon(modelData.signal) - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface) } ColumnLayout { Layout.fillWidth: true - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling // SSID NText { @@ -270,7 +270,7 @@ NLoader { // Security Protocol NText { text: modelData.security && modelData.security !== "--" ? modelData.security : "Open" - font.pointSize: Style.fontSizeTiny * scaling + font.pointSize: Style.fontSizeXS * scaling elide: Text.ElideRight Layout.fillWidth: true color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface) @@ -281,7 +281,7 @@ NLoader { && NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0 text: NetworkService.connectError color: Color.mError - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling elide: Text.ElideRight Layout.fillWidth: true } @@ -306,7 +306,7 @@ NLoader { NText { visible: modelData.connected text: "connected" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface) } } @@ -337,15 +337,15 @@ NLoader { id: passwordPromptSection Layout.fillWidth: true Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0 - Layout.margins: Style.marginSmall * scaling + Layout.margins: Style.marginS * scaling visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt color: Color.mSurfaceVariant - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling RowLayout { anchors.fill: parent - anchors.margins: Style.marginSmall * scaling - spacing: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling + spacing: Style.marginS * scaling Item { Layout.fillWidth: true @@ -353,17 +353,17 @@ NLoader { Rectangle { anchors.fill: parent - radius: Style.radiusTiny * scaling + radius: Style.radiusXS * scaling color: Color.transparent border.color: passwordInputField.activeFocus ? Color.mPrimary : Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) TextInput { id: passwordInputField anchors.fill: parent - anchors.margins: Style.marginMedium * scaling + anchors.margins: Style.marginM * scaling text: passwordInput - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurface verticalAlignment: TextInput.AlignVCenter clip: true @@ -390,7 +390,7 @@ NLoader { Rectangle { Layout.preferredWidth: Style.baseWidgetSize * 2.5 * scaling Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mPrimary Behavior on color { @@ -403,7 +403,7 @@ NLoader { anchors.centerIn: parent text: "Connect" color: Color.mSurface - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling } MouseArea { diff --git a/Modules/Bar/Workspace.qml b/Modules/Bar/Workspace.qml index 22c2ca6..f757015 100644 --- a/Modules/Bar/Workspace.qml +++ b/Modules/Bar/Workspace.qml @@ -114,13 +114,13 @@ Item { Rectangle { id: workspaceBackground - width: parent.width - Style.marginSmall * scaling * 2 + width: parent.width - Style.marginS * scaling * 2 height: Math.round(Style.barHeight * 0.75 * scaling) - radius: Math.round(Style.radiusMedium * scaling) + radius: Math.round(Style.radiusM * scaling) color: Color.mSurfaceVariant border.color: Color.mOutline - border.width: Math.max(1, Math.round(Style.borderThin * scaling)) + border.width: Math.max(1, Math.round(Style.borderS * scaling)) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/Calendar/Calendar.qml b/Modules/Calendar/Calendar.qml index d2d5655..d879d90 100644 --- a/Modules/Calendar/Calendar.qml +++ b/Modules/Calendar/Calendar.qml @@ -63,15 +63,15 @@ NLoader { Rectangle { id: calendarRect color: Color.mSurface - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutline - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderM * scaling) width: 340 * scaling height: 320 * scaling // Reduced height to eliminate bottom space anchors.top: parent.top anchors.right: parent.right - anchors.topMargin: Style.marginTiny * scaling - anchors.rightMargin: Style.marginTiny * scaling + anchors.topMargin: Style.marginXS * scaling + anchors.rightMargin: Style.marginXS * scaling // Animation properties property real scaleValue: 0.8 @@ -109,15 +109,15 @@ NLoader { // Main Column ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginTiny * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginXS * scaling // Header: Month/Year with navigation RowLayout { Layout.fillWidth: true - Layout.leftMargin: Style.marginMedium * scaling - Layout.rightMargin: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + Layout.leftMargin: Style.marginM * scaling + Layout.rightMargin: Style.marginM * scaling + spacing: Style.marginS * scaling NIconButton { icon: "chevron_left" @@ -133,7 +133,7 @@ NLoader { text: grid.title Layout.fillWidth: true horizontalAlignment: Text.AlignHCenter - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mPrimary } @@ -152,15 +152,15 @@ NLoader { // Divider between header and weekdays NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling - Layout.bottomMargin: Style.marginMedium * scaling + Layout.topMargin: Style.marginS * scaling + Layout.bottomMargin: Style.marginM * scaling } // Columns label (respects locale's first day of week) RowLayout { Layout.fillWidth: true - Layout.leftMargin: Style.marginSmall * scaling // Align with grid - Layout.rightMargin: Style.marginSmall * scaling + Layout.leftMargin: Style.marginS * scaling // Align with grid + Layout.rightMargin: Style.marginS * scaling spacing: 0 Repeater { @@ -174,7 +174,7 @@ NLoader { return Qt.locale().dayName(dayIndex, Locale.ShortFormat) } color: Color.mSecondary - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold horizontalAlignment: Text.AlignHCenter Layout.fillWidth: true @@ -189,8 +189,8 @@ NLoader { Layout.fillWidth: true Layout.fillHeight: true // Take remaining space - Layout.leftMargin: Style.marginSmall * scaling - Layout.rightMargin: Style.marginSmall * scaling + Layout.leftMargin: Style.marginS * scaling + Layout.rightMargin: Style.marginS * scaling spacing: 0 month: Time.date.getMonth() year: Time.date.getFullYear() @@ -210,7 +210,7 @@ NLoader { delegate: Rectangle { width: (Style.baseWidgetSize * scaling) height: (Style.baseWidgetSize * scaling) - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: model.today ? Color.mPrimary : Color.transparent NText { @@ -218,7 +218,7 @@ NLoader { text: model.day color: model.today ? Color.mOnPrimary : Color.mOnSurface opacity: model.month === grid.month ? Style.opacityHeavy : Style.opacityLight - font.pointSize: (Style.fontSizeMedium * scaling) + font.pointSize: (Style.fontSizeM * scaling) font.weight: model.today ? Style.fontWeightBold : Style.fontWeightRegular } diff --git a/Modules/DemoPanel/DemoPanel.qml b/Modules/DemoPanel/DemoPanel.qml index f05e380..a56c9bb 100644 --- a/Modules/DemoPanel/DemoPanel.qml +++ b/Modules/DemoPanel/DemoPanel.qml @@ -68,9 +68,9 @@ NLoader { Rectangle { id: bgRect color: Color.mSurfaceVariant - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) width: 500 * scaling height: 900 * scaling anchors.centerIn: parent @@ -115,18 +115,18 @@ NLoader { NText { text: "DemoPanel" color: Color.mPrimary - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold Layout.alignment: Qt.AlignHCenter } ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling // NSlider ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling NText { text: "Scaling" color: Color.mSecondary @@ -137,7 +137,7 @@ NLoader { Layout.alignment: Qt.AlignVCenter } RowLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling NSlider { id: scaleSlider from: 0.6 @@ -156,7 +156,7 @@ NLoader { NIconButton { icon: "refresh" tooltipText: "Reset Scaling" - fontPointSize: Style.fontSizeLarge * scaling + fontPointSize: Style.fontSizeL * scaling onClicked: { ScalingService.overrideEnabled = false ScalingService.overrideScale = 1.0 @@ -170,7 +170,7 @@ NLoader { // NIconButton ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling NText { text: "NIconButton" color: Color.mSecondary @@ -181,7 +181,7 @@ NLoader { id: myIconButton icon: "celebration" tooltipText: "A nice tooltip" - fontPointSize: Style.fontSizeLarge * scaling + fontPointSize: Style.fontSizeL * scaling } NDivider { @@ -191,7 +191,7 @@ NLoader { // NToggle ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "NToggle" color: Color.mSecondary @@ -213,7 +213,7 @@ NLoader { // NComboBox ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "NComboBox" color: Color.mSecondary @@ -266,7 +266,7 @@ NLoader { // NTextInput ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "NTextInput" color: Color.mSecondary @@ -289,7 +289,7 @@ NLoader { // NBusyIndicator ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "NBusyIndicator" color: Color.mSecondary diff --git a/Modules/Dock/Dock.qml b/Modules/Dock/Dock.qml index a47fff9..3b9503e 100644 --- a/Modules/Dock/Dock.qml +++ b/Modules/Dock/Dock.qml @@ -118,8 +118,8 @@ NLoader { color: Color.mSurface anchors.horizontalCenter: parent.horizontalCenter anchors.bottom: parent.bottom - topLeftRadius: Style.radiusLarge * scaling - topRightRadius: Style.radiusLarge * scaling + topLeftRadius: Style.radiusL * scaling + topRightRadius: Style.radiusL * scaling MouseArea { id: dockMouseArea @@ -171,7 +171,7 @@ NLoader { Row { id: runningAppsRow - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling height: parent.height anchors.centerIn: parent @@ -183,7 +183,7 @@ NLoader { width: iconSize * scaling height: iconSize * scaling color: Color.transparent - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData property bool hovered: appMouseArea.containsMouse @@ -292,10 +292,10 @@ NLoader { width: iconSize * 0.75 height: 4 * scaling color: Color.mPrimary - radius: Style.radiusTiny + radius: Style.radiusXS anchors.top: parent.bottom anchors.horizontalCenter: parent.horizontalCenter - anchors.topMargin: Style.marginTiniest * scaling + anchors.topMargin: Style.marginXXS * scaling } } } diff --git a/Modules/LockScreen/LockScreen.qml b/Modules/LockScreen/LockScreen.qml index 708b4f2..b3d9235 100644 --- a/Modules/LockScreen/LockScreen.qml +++ b/Modules/LockScreen/LockScreen.qml @@ -30,860 +30,858 @@ NLoader { // Tie session lock to loader visibility locked: lockScreen.isLoaded - // Lockscreen is a different beast, needs a capital 'S' in 'Screen' to get the current screen - readonly property real scaling: ScalingService.scale(Screen) + // Lockscreen is a different beast, needs a capital 'S' in 'Screen' to get the current screen + readonly property real scaling: ScalingService.scale(Screen) - property string errorMessage: "" - property bool authenticating: false - property string password: "" - property bool pamAvailable: typeof PamContext !== "undefined" - + property string errorMessage: "" + property bool authenticating: false + property string password: "" + property bool pamAvailable: typeof PamContext !== "undefined" - function unlockAttempt() { - Logger.log("LockScreen", "Unlock attempt started") + function unlockAttempt() { + Logger.log("LockScreen", "Unlock attempt started") - // Real PAM authentication - if (!pamAvailable) { - lock.errorMessage = "PAM authentication not available." - Logger.log("LockScreen", "PAM not available") - return - } - if (!lock.password) { - lock.errorMessage = "Password required." - Logger.log("LockScreen", "No password entered") - return - } - Logger.log("LockScreen", "Starting PAM authentication") - lock.authenticating = true - lock.errorMessage = "" - - Logger.log("LockScreen", "About to create PAM context with userName:", Quickshell.env("USER")) - var pam = Qt.createQmlObject( - 'import Quickshell.Services.Pam; PamContext { config: "login"; user: "' + Quickshell.env("USER") + '" }', - lock) - Logger.log("LockScreen", "PamContext created", pam) - - pam.onCompleted.connect(function (result) { - Logger.log("LockScreen", "PAM completed with result:", result) - lock.authenticating = false - if (result === PamResult.Success) { - Logger.log("LockScreen", "Authentication successful, unlocking") - // First release the Wayland session lock, then unload after a short delay - lock.locked = false - lockScreen.scheduleUnloadAfterUnlock() - lock.password = "" + // Real PAM authentication + if (!pamAvailable) { + lock.errorMessage = "PAM authentication not available." + Logger.log("LockScreen", "PAM not available") + return + } + if (!lock.password) { + lock.errorMessage = "Password required." + Logger.log("LockScreen", "No password entered") + return + } + Logger.log("LockScreen", "Starting PAM authentication") + lock.authenticating = true lock.errorMessage = "" - } else { - Logger.log("LockScreen", "Authentication failed") - lock.errorMessage = "Authentication failed." - lock.password = "" + + Logger.log("LockScreen", "About to create PAM context with userName:", Quickshell.env("USER")) + var pam = Qt.createQmlObject( + 'import Quickshell.Services.Pam; PamContext { config: "login"; user: "' + Quickshell.env("USER") + '" }', + lock) + Logger.log("LockScreen", "PamContext created", pam) + + pam.onCompleted.connect(function (result) { + Logger.log("LockScreen", "PAM completed with result:", result) + lock.authenticating = false + if (result === PamResult.Success) { + Logger.log("LockScreen", "Authentication successful, unlocking") + // First release the Wayland session lock, then unload after a short delay + lock.locked = false + lockScreen.scheduleUnloadAfterUnlock() + lock.password = "" + lock.errorMessage = "" + } else { + Logger.log("LockScreen", "Authentication failed") + lock.errorMessage = "Authentication failed." + lock.password = "" + } + pam.destroy() + }) + + pam.onError.connect(function (error) { + Logger.log("LockScreen", "PAM error:", error) + lock.authenticating = false + lock.errorMessage = pam.message || "Authentication error." + lock.password = "" + pam.destroy() + }) + + pam.onPamMessage.connect(function () { + Logger.log("LockScreen", "PAM message:", pam.message, "isError:", pam.messageIsError) + if (pam.messageIsError) { + lock.errorMessage = pam.message + } + }) + + pam.onResponseRequiredChanged.connect(function () { + Logger.log("LockScreen", "PAM response required:", pam.responseRequired) + if (pam.responseRequired && lock.authenticating) { + Logger.log("LockScreen", "Responding to PAM with password") + pam.respond(lock.password) + } + }) + + var started = pam.start() + Logger.log("LockScreen", "PAM start result:", started) } - pam.destroy() - }) - pam.onError.connect(function (error) { - Logger.log("LockScreen", "PAM error:", error) - lock.authenticating = false - lock.errorMessage = pam.message || "Authentication error." - lock.password = "" - pam.destroy() - }) + WlSessionLockSurface { + // Battery indicator component + Item { + id: batteryIndicator - pam.onPamMessage.connect(function () { - Logger.log("LockScreen", "PAM message:", pam.message, "isError:", pam.messageIsError) - if (pam.messageIsError) { - lock.errorMessage = pam.message - } - }) + // Import UPower for battery data + property var battery: UPower.displayDevice + property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent + property real percent: isReady ? (battery.percentage * 100) : 0 + property bool charging: isReady ? battery.state === UPowerDeviceState.Charging : false + property bool batteryVisible: isReady && percent > 0 - pam.onResponseRequiredChanged.connect(function () { - Logger.log("LockScreen", "PAM response required:", pam.responseRequired) - if (pam.responseRequired && lock.authenticating) { - Logger.log("LockScreen", "Responding to PAM with password") - pam.respond(lock.password) - } - }) + // Choose icon based on charge and charging state + function getIcon() { + if (!batteryVisible) + return "" - var started = pam.start() - Logger.log("LockScreen", "PAM start result:", started) - } + if (charging) + return "battery_android_bolt" - WlSessionLockSurface { - // Battery indicator component - Item { - id: batteryIndicator + if (percent >= 95) + return "battery_android_full" - // Import UPower for battery data - property var battery: UPower.displayDevice - property bool isReady: battery && battery.ready && battery.isLaptopBattery && battery.isPresent - property real percent: isReady ? (battery.percentage * 100) : 0 - property bool charging: isReady ? battery.state === UPowerDeviceState.Charging : false - property bool batteryVisible: isReady && percent > 0 - - // Choose icon based on charge and charging state - function getIcon() { - if (!batteryVisible) - return "" - - if (charging) - return "battery_android_bolt" - - if (percent >= 95) - return "battery_android_full" - - // Hardcoded battery symbols - if (percent >= 85) - return "battery_android_6" - if (percent >= 70) - return "battery_android_5" - if (percent >= 55) - return "battery_android_4" - if (percent >= 40) - return "battery_android_3" - if (percent >= 25) - return "battery_android_2" - if (percent >= 10) - return "battery_android_1" - if (percent >= 0) - return "battery_android_0" - } - } - - // Wallpaper image - Image { - id: lockBgImage - anchors.fill: parent - fillMode: Image.PreserveAspectCrop - source: WallpaperService.currentWallpaper !== "" ? WallpaperService.currentWallpaper : "" - cache: true - smooth: true - mipmap: false - } - - // Blurred background - Rectangle { - anchors.fill: parent - color: Color.transparent - - // Simple blur effect - layer.enabled: true - layer.smooth: true - layer.samples: 4 - } - - // Animated gradient overlay - Rectangle { - anchors.fill: parent - gradient: Gradient { - GradientStop { - position: 0.0 - color: Qt.rgba(0, 0, 0, 0.6) + // Hardcoded battery symbols + if (percent >= 85) + return "battery_android_6" + if (percent >= 70) + return "battery_android_5" + if (percent >= 55) + return "battery_android_4" + if (percent >= 40) + return "battery_android_3" + if (percent >= 25) + return "battery_android_2" + if (percent >= 10) + return "battery_android_1" + if (percent >= 0) + return "battery_android_0" + } } - GradientStop { - position: 0.3 - color: Qt.rgba(0, 0, 0, 0.3) - } - GradientStop { - position: 0.7 - color: Qt.rgba(0, 0, 0, 0.4) - } - GradientStop { - position: 1.0 - color: Qt.rgba(0, 0, 0, 0.7) - } - } - // Subtle animated particles - Repeater { - model: 20 + // Wallpaper image + Image { + id: lockBgImage + anchors.fill: parent + fillMode: Image.PreserveAspectCrop + source: WallpaperService.currentWallpaper !== "" ? WallpaperService.currentWallpaper : "" + cache: true + smooth: true + mipmap: false + } + + // Blurred background Rectangle { - width: Math.random() * 4 + 2 - height: width - radius: width * 0.5 - color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3) - x: Math.random() * parent.width - y: Math.random() * parent.height + anchors.fill: parent + color: Color.transparent - SequentialAnimation on opacity { - loops: Animation.Infinite - NumberAnimation { - to: 0.8 - duration: 2000 + Math.random() * 3000 - } - NumberAnimation { - to: 0.1 - duration: 2000 + Math.random() * 3000 - } - } - } - } - } - - // Main content - Centered design - Item { - anchors.fill: parent - - // Top section - Time, date, and user info - ColumnLayout { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.topMargin: 80 * scaling - spacing: 40 * scaling - - // Time display - Large and prominent with pulse animation - Column { - spacing: Style.marginSmall * scaling - Layout.alignment: Qt.AlignHCenter - - Text { - id: timeText - text: Qt.formatDateTime(new Date(), "HH:mm") - font.family: "Inter" - font.pointSize: Style.fontSizeXXL * 6 - font.weight: Font.Bold - font.letterSpacing: -2 - color: Color.mOnSurface - horizontalAlignment: Text.AlignHCenter - - SequentialAnimation on scale { - loops: Animation.Infinite - NumberAnimation { - to: 1.02 - duration: 2000 - easing.type: Easing.InOutQuad - } - NumberAnimation { - to: 1.0 - duration: 2000 - easing.type: Easing.InOutQuad - } - } - } - - Text { - id: dateText - text: Qt.formatDateTime(new Date(), "dddd, MMMM d") - font.family: "Inter" - font.pointSize: Style.fontSizeXL - font.weight: Font.Light - color: Color.mOnSurface - horizontalAlignment: Text.AlignHCenter - width: timeText.width - } + // Simple blur effect + layer.enabled: true + layer.smooth: true + layer.samples: 4 } - // User section with animated avatar - Column { - spacing: Style.marginMedium * scaling - Layout.alignment: Qt.AlignHCenter + // Animated gradient overlay + Rectangle { + anchors.fill: parent + gradient: Gradient { + GradientStop { + position: 0.0 + color: Qt.rgba(0, 0, 0, 0.6) + } + GradientStop { + position: 0.3 + color: Qt.rgba(0, 0, 0, 0.3) + } + GradientStop { + position: 0.7 + color: Qt.rgba(0, 0, 0, 0.4) + } + GradientStop { + position: 1.0 + color: Qt.rgba(0, 0, 0, 0.7) + } + } - // Animated avatar with glow effect - Rectangle { - width: 120 * scaling - height: 120 * scaling - radius: width * 0.5 - color: Color.transparent - border.color: Color.mPrimary - border.width: Math.max(1, Style.borderThick * scaling) - anchors.horizontalCenter: parent.horizontalCenter - - // Glow effect + // Subtle animated particles + Repeater { + model: 20 Rectangle { - anchors.centerIn: parent - width: parent.width + 24 * scaling - height: parent.height + 24 * scaling + width: Math.random() * 4 + 2 + height: width radius: width * 0.5 - color: Color.transparent - border.color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3) - border.width: Math.max(1, Style.borderMedium * scaling) - z: -1 + color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3) + x: Math.random() * parent.width + y: Math.random() * parent.height - SequentialAnimation on scale { + SequentialAnimation on opacity { loops: Animation.Infinite NumberAnimation { - to: 1.1 - duration: 1500 - easing.type: Easing.InOutQuad + to: 0.8 + duration: 2000 + Math.random() * 3000 } NumberAnimation { - to: 1.0 - duration: 1500 - easing.type: Easing.InOutQuad + to: 0.1 + duration: 2000 + Math.random() * 3000 } } } - - NImageRounded { - anchors.centerIn: parent - width: 100 * scaling - height: 100 * scaling - imagePath: Quickshell.env("HOME") + "/.face" - fallbackIcon: "person" - imageRadius: width * 0.5 - } - - // Hover animation - MouseArea { - anchors.fill: parent - hoverEnabled: true - onEntered: parent.scale = 1.05 - onExited: parent.scale = 1.0 - } - - Behavior on scale { - NumberAnimation { - duration: Style.animationFast - easing.type: Easing.OutBack - } - } } } - } - // Centered terminal section - Item { - width: 720 * scaling - height: 280 * scaling - anchors.centerIn: parent + // Main content - Centered design + Item { + anchors.fill: parent - ColumnLayout { - anchors.centerIn: parent - spacing: 20 * scaling - width: parent.width + // Top section - Time, date, and user info + ColumnLayout { + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.topMargin: 80 * scaling + spacing: 40 * scaling - // Futuristic Terminal-Style Input - Item { - width: parent.width - height: 280 * scaling - Layout.fillWidth: true + // Time display - Large and prominent with pulse animation + Column { + spacing: Style.marginS * scaling + Layout.alignment: Qt.AlignHCenter - // Terminal background with scanlines - Rectangle { - id: terminalBackground - anchors.fill: parent - radius: Style.radiusMedium * scaling - color: Color.applyOpacity(Color.mSurface, "E6") - border.color: Color.mPrimary - border.width: Math.max(1, Style.borderMedium * scaling) + Text { + id: timeText + text: Qt.formatDateTime(new Date(), "HH:mm") + font.family: "Inter" + font.pointSize: Style.fontSizeXXXL * 6 + font.weight: Font.Bold + font.letterSpacing: -2 + color: Color.mOnSurface + horizontalAlignment: Text.AlignHCenter - // Scanline effect - Repeater { - model: 20 + SequentialAnimation on scale { + loops: Animation.Infinite + NumberAnimation { + to: 1.02 + duration: 2000 + easing.type: Easing.InOutQuad + } + NumberAnimation { + to: 1.0 + duration: 2000 + easing.type: Easing.InOutQuad + } + } + } + + Text { + id: dateText + text: Qt.formatDateTime(new Date(), "dddd, MMMM d") + font.family: "Inter" + font.pointSize: Style.fontSizeXXL + font.weight: Font.Light + color: Color.mOnSurface + horizontalAlignment: Text.AlignHCenter + width: timeText.width + } + } + + // User section with animated avatar + Column { + spacing: Style.marginM * scaling + Layout.alignment: Qt.AlignHCenter + + // Animated avatar with glow effect + Rectangle { + width: 120 * scaling + height: 120 * scaling + radius: width * 0.5 + color: Color.transparent + border.color: Color.mPrimary + border.width: Math.max(1, Style.borderL * scaling) + anchors.horizontalCenter: parent.horizontalCenter + + // Glow effect Rectangle { - width: parent.width - height: 1 - color: Color.applyOpacity(Color.mPrimary, "1A") - y: index * 10 - opacity: Style.opacityMedium + anchors.centerIn: parent + width: parent.width + 24 * scaling + height: parent.height + 24 * scaling + radius: width * 0.5 + color: Color.transparent + border.color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3) + border.width: Math.max(1, Style.borderM * scaling) + z: -1 - SequentialAnimation on opacity { + SequentialAnimation on scale { loops: Animation.Infinite NumberAnimation { - to: 0.6 - duration: 2000 + Math.random() * 1000 + to: 1.1 + duration: 1500 + easing.type: Easing.InOutQuad } NumberAnimation { - to: 0.1 - duration: 2000 + Math.random() * 1000 + to: 1.0 + duration: 1500 + easing.type: Easing.InOutQuad } } } - } - // Terminal header - Rectangle { - width: parent.width - height: 40 * scaling - color: Color.applyOpacity(Color.mPrimary, "33") - topLeftRadius: Style.radiusSmall * scaling - topRightRadius: Style.radiusSmall * scaling + NImageRounded { + anchors.centerIn: parent + width: 100 * scaling + height: 100 * scaling + imagePath: Quickshell.env("HOME") + "/.face" + fallbackIcon: "person" + imageRadius: width * 0.5 + } - RowLayout { + // Hover animation + MouseArea { anchors.fill: parent - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginMedium * scaling + hoverEnabled: true + onEntered: parent.scale = 1.05 + onExited: parent.scale = 1.0 + } - Text { - text: "SECURE TERMINAL" - color: Color.mOnSurface - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - font.weight: Font.Bold - Layout.fillWidth: true - } - - // Battery indicator - Row { - spacing: Style.marginSmall * scaling - visible: batteryIndicator.batteryVisible - - NIcon { - text: batteryIndicator.getIcon() - font.pointSize: Style.fontSizeMedium - color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface - } - - Text { - text: Math.round(batteryIndicator.percent) + "%" - color: Color.mOnSurface - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeMedium - font.weight: Font.Bold - } + Behavior on scale { + NumberAnimation { + duration: Style.animationFast + easing.type: Easing.OutBack } } } + } + } - // Terminal content area - ColumnLayout { - anchors.top: parent.top - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.topMargin: 70 * scaling - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginMedium * scaling + // Centered terminal section + Item { + width: 720 * scaling + height: 280 * scaling + anchors.centerIn: parent - // Welcome back typing effect - RowLayout { - Layout.fillWidth: true - spacing: Style.marginMedium * scaling + ColumnLayout { + anchors.centerIn: parent + spacing: 20 * scaling + width: parent.width - Text { - text: "root@noctalia:~$" - color: Color.mPrimary - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - font.weight: Font.Bold - } + // Futuristic Terminal-Style Input + Item { + width: parent.width + height: 280 * scaling + Layout.fillWidth: true - Text { - id: welcomeText - text: "" - color: Color.mOnSurface - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - property int currentIndex: 0 - property string fullText: "Welcome back, " + Quickshell.env("USER") + "!" + // Terminal background with scanlines + Rectangle { + id: terminalBackground + anchors.fill: parent + radius: Style.radiusM * scaling + color: Color.applyOpacity(Color.mSurface, "E6") + border.color: Color.mPrimary + border.width: Math.max(1, Style.borderM * scaling) - Timer { - interval: Style.animationFast - running: true - repeat: true - onTriggered: { - if (parent.currentIndex < parent.fullText.length) { - parent.text = parent.fullText.substring(0, parent.currentIndex + 1) - parent.currentIndex++ - } else { - running = false + // Scanline effect + Repeater { + model: 20 + Rectangle { + width: parent.width + height: 1 + color: Color.applyOpacity(Color.mPrimary, "1A") + y: index * 10 + opacity: Style.opacityMedium + + SequentialAnimation on opacity { + loops: Animation.Infinite + NumberAnimation { + to: 0.6 + duration: 2000 + Math.random() * 1000 + } + NumberAnimation { + to: 0.1 + duration: 2000 + Math.random() * 1000 } } } } - } - // Command line with integrated password input - RowLayout { - Layout.fillWidth: true - spacing: Style.marginMedium * scaling - - Text { - text: "root@noctalia:~$" - color: Color.mPrimary - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - font.weight: Font.Bold - } - - Text { - text: "sudo unlock-session" - color: Color.mOnSurface - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - } - - // Integrated password input (invisible, just for functionality) - TextInput { - id: passwordInput - width: 0 - height: 0 - visible: false - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - color: Color.mOnSurface - echoMode: TextInput.Password - passwordCharacter: "*" - passwordMaskDelay: 0 - - text: lock.password - onTextChanged: { - lock.password = text - // Terminal typing sound effect (visual) - typingEffect.start() - } - - Keys.onPressed: function (event) { - if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) { - lock.unlockAttempt() - } - } - - Component.onCompleted: { - forceActiveFocus() - } - } - - // Visual password display with integrated cursor - Text { - id: asterisksText - text: "*".repeat(passwordInput.text.length) - color: Color.mOnSurface - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - visible: passwordInput.activeFocus - - // Typing effect animation - SequentialAnimation { - id: typingEffect - NumberAnimation { - target: passwordInput - property: "scale" - to: 1.01 - duration: 50 - } - NumberAnimation { - target: passwordInput - property: "scale" - to: 1.0 - duration: 50 - } - } - } - - // Blinking cursor positioned right after the asterisks + // Terminal header Rectangle { - width: 8 * scaling - height: 20 * scaling - color: Color.mPrimary - visible: passwordInput.activeFocus - Layout.leftMargin: -Style.marginSmall * scaling - Layout.alignment: Qt.AlignVCenter + width: parent.width + height: 40 * scaling + color: Color.applyOpacity(Color.mPrimary, "33") + topLeftRadius: Style.radiusS * scaling + topRightRadius: Style.radiusS * scaling + + RowLayout { + anchors.fill: parent + anchors.margins: Style.marginM * scaling + spacing: Style.marginM * scaling + + Text { + text: "SECURE TERMINAL" + color: Color.mOnSurface + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + font.weight: Font.Bold + Layout.fillWidth: true + } + + // Battery indicator + Row { + spacing: Style.marginS * scaling + visible: batteryIndicator.batteryVisible + + NIcon { + text: batteryIndicator.getIcon() + font.pointSize: Style.fontSizeM + color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface + } + + Text { + text: Math.round(batteryIndicator.percent) + "%" + color: Color.mOnSurface + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeM + font.weight: Font.Bold + } + } + } + } + + // Terminal content area + ColumnLayout { + anchors.top: parent.top + anchors.left: parent.left + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.topMargin: 70 * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginM * scaling + + // Welcome back typing effect + RowLayout { + Layout.fillWidth: true + spacing: Style.marginM * scaling + + Text { + text: "root@noctalia:~$" + color: Color.mPrimary + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + font.weight: Font.Bold + } + + Text { + id: welcomeText + text: "" + color: Color.mOnSurface + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + property int currentIndex: 0 + property string fullText: "Welcome back, " + Quickshell.env("USER") + "!" + + Timer { + interval: Style.animationFast + running: true + repeat: true + onTriggered: { + if (parent.currentIndex < parent.fullText.length) { + parent.text = parent.fullText.substring(0, parent.currentIndex + 1) + parent.currentIndex++ + } else { + running = false + } + } + } + } + } + + // Command line with integrated password input + RowLayout { + Layout.fillWidth: true + spacing: Style.marginM * scaling + + Text { + text: "root@noctalia:~$" + color: Color.mPrimary + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + font.weight: Font.Bold + } + + Text { + text: "sudo unlock-session" + color: Color.mOnSurface + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + } + + // Integrated password input (invisible, just for functionality) + TextInput { + id: passwordInput + width: 0 + height: 0 + visible: false + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + color: Color.mOnSurface + echoMode: TextInput.Password + passwordCharacter: "*" + passwordMaskDelay: 0 + + text: lock.password + onTextChanged: { + lock.password = text + // Terminal typing sound effect (visual) + typingEffect.start() + } + + Keys.onPressed: function (event) { + if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter) { + lock.unlockAttempt() + } + } + + Component.onCompleted: { + forceActiveFocus() + } + } + + // Visual password display with integrated cursor + Text { + id: asterisksText + text: "*".repeat(passwordInput.text.length) + color: Color.mOnSurface + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + visible: passwordInput.activeFocus + + // Typing effect animation + SequentialAnimation { + id: typingEffect + NumberAnimation { + target: passwordInput + property: "scale" + to: 1.01 + duration: 50 + } + NumberAnimation { + target: passwordInput + property: "scale" + to: 1.0 + duration: 50 + } + } + } + + // Blinking cursor positioned right after the asterisks + Rectangle { + width: 8 * scaling + height: 20 * scaling + color: Color.mPrimary + visible: passwordInput.activeFocus + Layout.leftMargin: -Style.marginS * scaling + Layout.alignment: Qt.AlignVCenter + + SequentialAnimation on opacity { + loops: Animation.Infinite + NumberAnimation { + to: 1.0 + duration: 500 + } + NumberAnimation { + to: 0.0 + duration: 500 + } + } + } + } + + // Status messages + Text { + text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "") + color: lock.authenticating ? Color.mPrimary : (lock.errorMessage !== "" ? Color.mError : Color.transparent) + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeL + Layout.fillWidth: true + + SequentialAnimation on opacity { + running: lock.authenticating + loops: Animation.Infinite + NumberAnimation { + to: 1.0 + duration: 800 + } + NumberAnimation { + to: 0.5 + duration: 800 + } + } + } + + // Execute button + Rectangle { + width: 120 * scaling + height: 40 * scaling + radius: Style.radiusS * scaling + color: executeButtonArea.containsMouse ? Color.mPrimary : Color.applyOpacity(Color.mPrimary, "33") + border.color: Color.mPrimary + border.width: Math.max(1, Style.borderS * scaling) + enabled: !lock.authenticating + Layout.alignment: Qt.AlignRight + Layout.bottomMargin: -12 * scaling + + Text { + anchors.centerIn: parent + text: lock.authenticating ? "EXECUTING" : "EXECUTE" + color: executeButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary + font.family: "DejaVu Sans Mono" + font.pointSize: Style.fontSizeM + font.weight: Font.Bold + } + + MouseArea { + id: executeButtonArea + anchors.fill: parent + hoverEnabled: true + onClicked: lock.unlockAttempt() + + SequentialAnimation on scale { + running: executeButtonArea.containsMouse + NumberAnimation { + to: 1.05 + duration: Style.animationFast + easing.type: Easing.OutCubic + } + } + + SequentialAnimation on scale { + running: !executeButtonArea.containsMouse + NumberAnimation { + to: 1.0 + duration: Style.animationFast + easing.type: Easing.OutCubic + } + } + } + + // Processing animation + SequentialAnimation on scale { + loops: Animation.Infinite + running: lock.authenticating + NumberAnimation { + to: 1.02 + duration: 600 + easing.type: Easing.InOutQuad + } + NumberAnimation { + to: 1.0 + duration: 600 + easing.type: Easing.InOutQuad + } + } + } + } + + // Terminal glow effect + Rectangle { + anchors.fill: parent + radius: parent.radius + color: Color.transparent + border.color: Color.applyOpacity(Color.mPrimary, "4D") + border.width: Math.max(1, Style.borderS * scaling) + z: -1 SequentialAnimation on opacity { loops: Animation.Infinite NumberAnimation { - to: 1.0 - duration: 500 + to: 0.6 + duration: 2000 + easing.type: Easing.InOutQuad } NumberAnimation { - to: 0.0 - duration: 500 + to: 0.2 + duration: 2000 + easing.type: Easing.InOutQuad } } } } - - // Status messages - Text { - text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "") - color: lock.authenticating ? Color.mPrimary : (lock.errorMessage !== "" ? Color.mError : Color.transparent) - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeLarge - Layout.fillWidth: true - - SequentialAnimation on opacity { - running: lock.authenticating - loops: Animation.Infinite - NumberAnimation { - to: 1.0 - duration: 800 - } - NumberAnimation { - to: 0.5 - duration: 800 - } - } - } - - // Execute button - Rectangle { - width: 120 * scaling - height: 40 * scaling - radius: Style.radiusSmall * scaling - color: executeButtonArea.containsMouse ? Color.mPrimary : Color.applyOpacity(Color.mPrimary, "33") - border.color: Color.mPrimary - border.width: Math.max(1, Style.borderThin * scaling) - enabled: !lock.authenticating - Layout.alignment: Qt.AlignRight - Layout.bottomMargin: -12 * scaling - - Text { - anchors.centerIn: parent - text: lock.authenticating ? "EXECUTING" : "EXECUTE" - color: executeButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary - font.family: "DejaVu Sans Mono" - font.pointSize: Style.fontSizeMedium - font.weight: Font.Bold - } - - MouseArea { - id: executeButtonArea - anchors.fill: parent - hoverEnabled: true - onClicked: lock.unlockAttempt() - - SequentialAnimation on scale { - running: executeButtonArea.containsMouse - NumberAnimation { - to: 1.05 - duration: Style.animationFast - easing.type: Easing.OutCubic - } - } - - SequentialAnimation on scale { - running: !executeButtonArea.containsMouse - NumberAnimation { - to: 1.0 - duration: Style.animationFast - easing.type: Easing.OutCubic - } - } - } - - // Processing animation - SequentialAnimation on scale { - loops: Animation.Infinite - running: lock.authenticating - NumberAnimation { - to: 1.02 - duration: 600 - easing.type: Easing.InOutQuad - } - NumberAnimation { - to: 1.0 - duration: 600 - easing.type: Easing.InOutQuad - } - } - } - } - - // Terminal glow effect - Rectangle { - anchors.fill: parent - radius: parent.radius - color: Color.transparent - border.color: Color.applyOpacity(Color.mPrimary, "4D") - border.width: Math.max(1, Style.borderThin * scaling) - z: -1 - - SequentialAnimation on opacity { - loops: Animation.Infinite - NumberAnimation { - to: 0.6 - duration: 2000 - easing.type: Easing.InOutQuad - } - NumberAnimation { - to: 0.2 - duration: 2000 - easing.type: Easing.InOutQuad - } - } } } } } - } - } - // Enhanced power buttons with hover effects - Row { - anchors.right: parent.right - anchors.bottom: parent.bottom - anchors.margins: 50 * scaling - spacing: 20 * scaling + // Enhanced power buttons with hover effects + Row { + anchors.right: parent.right + anchors.bottom: parent.bottom + anchors.margins: 50 * scaling + spacing: 20 * scaling - // Shutdown with enhanced styling - Rectangle { - width: 64 * scaling - height: 64 * scaling - radius: Style.radiusLarge * scaling - color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError, - "DD") : Color.applyOpacity(Color.mError, "22") - border.color: Color.mError - border.width: Math.max(1, Style.borderMedium * scaling) + // Shutdown with enhanced styling + Rectangle { + width: 64 * scaling + height: 64 * scaling + radius: Style.radiusL * scaling + color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError, + "DD") : Color.applyOpacity(Color.mError, "22") + border.color: Color.mError + border.width: Math.max(1, Style.borderM * scaling) - // Glow effect - Rectangle { - anchors.centerIn: parent - width: parent.width + 10 * scaling - height: parent.height + 10 * scaling - radius: width * 0.5 - color: Color.transparent - opacity: shutdownArea.containsMouse ? 1 : 0 - z: -1 + // Glow effect + Rectangle { + anchors.centerIn: parent + width: parent.width + 10 * scaling + height: parent.height + 10 * scaling + radius: width * 0.5 + color: Color.transparent + opacity: shutdownArea.containsMouse ? 1 : 0 + z: -1 - Behavior on opacity { - NumberAnimation { - duration: Style.animationFast - easing.type: Easing.OutCubic + Behavior on opacity { + NumberAnimation { + duration: Style.animationFast + easing.type: Easing.OutCubic + } + } } - } - } - MouseArea { - id: shutdownArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - Qt.createQmlObject('import Quickshell.Io; Process { command: ["shutdown", "-h", "now"]; running: true }', - lock) - } - } - - NIcon { - text: "power_settings_new" - font.pointSize: Style.fontSizeXXL * scaling - color: shutdownArea.containsMouse ? Color.mOnPrimary : Color.mError - anchors.centerIn: parent - } - - Behavior on color { - ColorAnimation { - duration: Style.animationFast - easing.type: Easing.OutCubic - } - } - scale: shutdownArea.containsMouse ? 1.1 : 1.0 - } - - // Reboot with enhanced styling - Rectangle { - width: 64 * scaling - height: 64 * scaling - radius: Style.radiusLarge * scaling - color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary, - "DD") : Color.applyOpacity(Color.mPrimary, "22") - border.color: Color.mPrimary - border.width: Math.max(1, Style.borderMedium * scaling) - - // Glow effect - Rectangle { - anchors.centerIn: parent - width: parent.width + 10 * scaling - height: parent.height + 10 * scaling - radius: width * 0.5 - color: Color.transparent - opacity: rebootArea.containsMouse ? 1 : 0 - z: -1 - - Behavior on opacity { - NumberAnimation { - duration: Style.animationMedium - easing.type: Easing.OutCubic + MouseArea { + id: shutdownArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + Qt.createQmlObject( + 'import Quickshell.Io; Process { command: ["shutdown", "-h", "now"]; running: true }', lock) + } } - } - } - MouseArea { - id: rebootArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - Qt.createQmlObject('import Quickshell.Io; Process { command: ["reboot"]; running: true }', lock) - } - } - - NIcon { - text: "refresh" - font.pointSize: Style.fontSizeXXL * scaling - color: rebootArea.containsMouse ? Color.mOnPrimary : Color.mPrimary - anchors.centerIn: parent - } - - Behavior on color { - ColorAnimation { - duration: Style.animationMedium - easing.type: Easing.OutCubic - } - } - scale: rebootArea.containsMouse ? 1.1 : 1.0 - } - - // Logout with enhanced styling - Rectangle { - width: 64 * scaling - height: 64 * scaling - radius: Style.radiusLarge * scaling - color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary, - "DD") : Color.applyOpacity(Color.mSecondary, "22") - border.color: Color.mSecondary - border.width: Math.max(1, Style.borderMedium * scaling) - - // Glow effect - Rectangle { - anchors.centerIn: parent - width: parent.width + 10 * scaling - height: parent.height + 10 * scaling - radius: width * 0.5 - color: Color.transparent - opacity: logoutArea.containsMouse ? 1 : 0 - z: -1 - - Behavior on opacity { - NumberAnimation { - duration: Style.animationMedium - easing.type: Easing.OutCubic + NIcon { + text: "power_settings_new" + font.pointSize: Style.fontSizeXXXL * scaling + color: shutdownArea.containsMouse ? Color.mOnPrimary : Color.mError + anchors.centerIn: parent } + + Behavior on color { + ColorAnimation { + duration: Style.animationFast + easing.type: Easing.OutCubic + } + } + scale: shutdownArea.containsMouse ? 1.1 : 1.0 + } + + // Reboot with enhanced styling + Rectangle { + width: 64 * scaling + height: 64 * scaling + radius: Style.radiusL * scaling + color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary, + "DD") : Color.applyOpacity(Color.mPrimary, "22") + border.color: Color.mPrimary + border.width: Math.max(1, Style.borderM * scaling) + + // Glow effect + Rectangle { + anchors.centerIn: parent + width: parent.width + 10 * scaling + height: parent.height + 10 * scaling + radius: width * 0.5 + color: Color.transparent + opacity: rebootArea.containsMouse ? 1 : 0 + z: -1 + + Behavior on opacity { + NumberAnimation { + duration: Style.animationMedium + easing.type: Easing.OutCubic + } + } + } + + MouseArea { + id: rebootArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + Qt.createQmlObject('import Quickshell.Io; Process { command: ["reboot"]; running: true }', lock) + } + } + + NIcon { + text: "refresh" + font.pointSize: Style.fontSizeXXXL * scaling + color: rebootArea.containsMouse ? Color.mOnPrimary : Color.mPrimary + anchors.centerIn: parent + } + + Behavior on color { + ColorAnimation { + duration: Style.animationMedium + easing.type: Easing.OutCubic + } + } + scale: rebootArea.containsMouse ? 1.1 : 1.0 + } + + // Logout with enhanced styling + Rectangle { + width: 64 * scaling + height: 64 * scaling + radius: Style.radiusL * scaling + color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary, + "DD") : Color.applyOpacity(Color.mSecondary, "22") + border.color: Color.mSecondary + border.width: Math.max(1, Style.borderM * scaling) + + // Glow effect + Rectangle { + anchors.centerIn: parent + width: parent.width + 10 * scaling + height: parent.height + 10 * scaling + radius: width * 0.5 + color: Color.transparent + opacity: logoutArea.containsMouse ? 1 : 0 + z: -1 + + Behavior on opacity { + NumberAnimation { + duration: Style.animationMedium + easing.type: Easing.OutCubic + } + } + } + + MouseArea { + id: logoutArea + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + Qt.createQmlObject( + 'import Quickshell.Io; Process { command: ["loginctl", "terminate-user", "' + Quickshell.env( + "USER") + '"]; running: true }', lock) + } + } + + NIcon { + text: "exit_to_app" + font.pointSize: Style.fontSizeXXXL * scaling + color: logoutArea.containsMouse ? Color.mOnPrimary : Color.mSecondary + anchors.centerIn: parent + } + + Behavior on color { + ColorAnimation { + duration: Style.animationFast + easing.type: Easing.OutCubic + } + } + scale: logoutArea.containsMouse ? 1.1 : 1.0 } } - MouseArea { - id: logoutArea - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - Qt.createQmlObject( - 'import Quickshell.Io; Process { command: ["loginctl", "terminate-user", "' + Quickshell.env( - "USER") + '"]; running: true }', lock) + // Timer for updating time + Timer { + interval: 1000 + running: true + repeat: true + onTriggered: { + timeText.text = Qt.formatDateTime(new Date(), "HH:mm") + dateText.text = Qt.formatDateTime(new Date(), "dddd, MMMM d") } } - - NIcon { - text: "exit_to_app" - font.pointSize: Style.fontSizeXXL * scaling - color: logoutArea.containsMouse ? Color.mOnPrimary : Color.mSecondary - anchors.centerIn: parent - } - - Behavior on color { - ColorAnimation { - duration: Style.animationFast - easing.type: Easing.OutCubic - } - } - scale: logoutArea.containsMouse ? 1.1 : 1.0 } } - - // Timer for updating time - Timer { - interval: 1000 - running: true - repeat: true - onTriggered: { - timeText.text = Qt.formatDateTime(new Date(), "HH:mm") - dateText.text = Qt.formatDateTime(new Date(), "dddd, MMMM d") - } - } - } } } - -} diff --git a/Modules/Notification/Notification.qml b/Modules/Notification/Notification.qml index f2e085c..c98cd5b 100644 --- a/Modules/Notification/Notification.qml +++ b/Modules/Notification/Notification.qml @@ -34,8 +34,8 @@ Variants { anchors.top: true anchors.right: true - margins.top: (Style.barHeight + Style.marginMedium) * scaling - margins.right: Style.marginMedium * scaling + margins.top: (Style.barHeight + Style.marginM) * scaling + margins.right: Style.marginM * scaling implicitWidth: 360 * scaling implicitHeight: Math.min(notificationStack.implicitHeight, (NotificationService.maxVisible * 120) * scaling) WlrLayershell.layer: WlrLayer.Overlay @@ -59,7 +59,7 @@ Variants { id: notificationStack anchors.top: parent.top anchors.right: parent.right - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling width: 360 * scaling visible: true @@ -68,11 +68,11 @@ Variants { model: notificationModel delegate: Rectangle { width: 360 * scaling - height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginMedium * 2 * scaling)) + height: Math.max(80 * scaling, contentColumn.implicitHeight + (Style.marginM * 2 * scaling)) clip: true - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mPrimary - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) color: Color.mSurface // Animation properties @@ -134,20 +134,20 @@ Variants { Column { id: contentColumn anchors.fill: parent - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginS * scaling RowLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling NText { text: (model.appName || model.desktopEntry) || "Unknown App" color: Color.mSecondary - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling } Rectangle { width: 6 * scaling height: 6 * scaling - radius: Style.radiusTiny * scaling + radius: Style.radiusXS * scaling color: (model.urgency === NotificationUrgency.Critical) ? Color.mError : (model.urgency === NotificationUrgency.Low) ? Color.mOnSurface : Color.mPrimary Layout.alignment: Qt.AlignVCenter } @@ -157,13 +157,13 @@ Variants { NText { text: NotificationService.formatTimestamp(model.timestamp) color: Color.mOnSurface - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling } } NText { text: model.summary || "No summary" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface wrapMode: Text.Wrap @@ -174,7 +174,7 @@ Variants { NText { text: model.body || "" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.Wrap width: 300 * scaling @@ -190,7 +190,7 @@ Variants { showBorder: false anchors.top: parent.top anchors.right: parent.right - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling onClicked: { animateOut() diff --git a/Modules/Notification/NotificationHistoryPanel.qml b/Modules/Notification/NotificationHistoryPanel.qml index d3dc065..075cc89 100644 --- a/Modules/Notification/NotificationHistoryPanel.qml +++ b/Modules/Notification/NotificationHistoryPanel.qml @@ -67,15 +67,15 @@ NLoader { Rectangle { id: notificationRect color: Color.mSurface - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) width: 400 * scaling height: 500 * scaling anchors.top: parent.top anchors.right: parent.right - anchors.topMargin: Style.marginTiny * scaling - anchors.rightMargin: Style.marginTiny * scaling + anchors.topMargin: Style.marginXS * scaling + anchors.rightMargin: Style.marginXS * scaling clip: true // Animation properties @@ -108,22 +108,22 @@ NLoader { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginM * scaling RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "notifications" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: Color.mPrimary } NText { text: "Notification History" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.bold: true color: Color.mOnSurface Layout.fillWidth: true @@ -156,18 +156,18 @@ NLoader { ColumnLayout { anchors.centerIn: parent - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "notifications_off" - font.pointSize: Style.fontSizeXXL * scaling + font.pointSize: Style.fontSizeXXXL * scaling color: Color.mOnSurfaceVariant Layout.alignment: Qt.AlignHCenter } NText { text: "No notifications" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurfaceVariant Layout.alignment: Qt.AlignHCenter } @@ -186,7 +186,7 @@ NLoader { Layout.fillWidth: true Layout.fillHeight: true model: NotificationService.historyModel - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling clip: true boundsBehavior: Flickable.StopAtBounds visible: NotificationService.historyModel.count > 0 @@ -194,26 +194,26 @@ NLoader { delegate: Rectangle { width: notificationList ? (notificationList.width - 20) : 380 * scaling height: Math.max(80, notificationContent.height + 30) - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: notificationMouseArea.containsMouse ? Color.mPrimary : Color.mSurfaceVariant RowLayout { anchors { fill: parent - margins: Style.marginMedium * scaling + margins: Style.marginM * scaling } - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling // Notification content Column { id: notificationContent Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling NText { text: (summary || "No summary").substring(0, 100) - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Font.Medium color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface wrapMode: Text.Wrap @@ -224,7 +224,7 @@ NLoader { NText { text: (body || "").substring(0, 150) - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface wrapMode: Text.Wrap width: parent.width - 60 @@ -234,7 +234,7 @@ NLoader { NText { text: NotificationService.formatTimestamp(timestamp) - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface } } @@ -256,7 +256,7 @@ NLoader { MouseArea { id: notificationMouseArea anchors.fill: parent - anchors.rightMargin: Style.marginLarge * 3 * scaling + anchors.rightMargin: Style.marginL * 3 * scaling hoverEnabled: true // Remove the onClicked handler since we now have a dedicated delete button } diff --git a/Modules/SettingsPanel/SettingsPanel.qml b/Modules/SettingsPanel/SettingsPanel.qml index a68eaf2..719dacf 100644 --- a/Modules/SettingsPanel/SettingsPanel.qml +++ b/Modules/SettingsPanel/SettingsPanel.qml @@ -201,9 +201,9 @@ NLoader { Rectangle { id: bgRect color: Color.mSurface - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) layer.enabled: true width: Math.max(screen.width * 0.5, 1280) * scaling height: Math.max(screen.height * 0.5, 720) * scaling @@ -241,8 +241,8 @@ NLoader { RowLayout { anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginLarge * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginL * scaling Rectangle { id: sidebar @@ -250,13 +250,13 @@ NLoader { Layout.fillHeight: true color: Color.mSurfaceVariant border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusMedium * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusM * scaling Column { anchors.fill: parent - anchors.margins: Style.marginSmall * scaling - spacing: Style.marginTiny * 1.5 * scaling + anchors.margins: Style.marginS * scaling + spacing: Style.marginXS * 1.5 * scaling Repeater { id: sections @@ -265,27 +265,27 @@ NLoader { id: tabItem width: parent.width height: 32 * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mTertiary : Color.transparent) readonly property bool selected: index === currentTabIndex property bool hovering: false property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface) RowLayout { anchors.fill: parent - anchors.leftMargin: Style.marginSmall * scaling - anchors.rightMargin: Style.marginSmall * scaling - spacing: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling + anchors.rightMargin: Style.marginS * scaling + spacing: Style.marginS * scaling // Tab icon on the left side NIcon { text: modelData.icon color: tabTextColor - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling } // Tab label on the left side NText { text: modelData.label color: tabTextColor - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold Layout.fillWidth: true } @@ -309,27 +309,27 @@ NLoader { id: contentPane Layout.fillWidth: true Layout.fillHeight: true - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurfaceVariant border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) clip: true ColumnLayout { id: contentLayout anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginSmall * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginS * scaling RowLayout { id: headerRow Layout.fillWidth: true - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling // Tab label on the main right side NText { text: panel.tabsModel[currentTabIndex].label - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mPrimary Layout.fillWidth: true diff --git a/Modules/SettingsPanel/Tabs/AboutTab.qml b/Modules/SettingsPanel/Tabs/AboutTab.qml index b19cf60..405ed1b 100644 --- a/Modules/SettingsPanel/Tabs/AboutTab.qml +++ b/Modules/SettingsPanel/Tabs/AboutTab.qml @@ -46,8 +46,8 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginLarge * scaling - rightPadding: Style.marginMedium * scaling + padding: Style.marginL * scaling + rightPadding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -58,26 +58,26 @@ ColumnLayout { NText { text: "Noctalia: quiet by design" - font.pointSize: Style.fontSizeXXL * scaling + font.pointSize: Style.fontSizeXXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface Layout.alignment: Qt.AlignCenter - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } NText { text: "It may just be another quickshell setup but it won't get in your way." - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurface Layout.alignment: Qt.AlignCenter - Layout.bottomMargin: Style.marginLarge * scaling + Layout.bottomMargin: Style.marginL * scaling } GridLayout { Layout.alignment: Qt.AlignCenter columns: 2 - rowSpacing: Style.marginTiny * scaling - columnSpacing: Style.marginSmall * scaling + rowSpacing: Style.marginXS * scaling + columnSpacing: Style.marginS * scaling NText { text: "Latest Version:" @@ -106,13 +106,13 @@ ColumnLayout { Rectangle { Layout.alignment: Qt.AlignCenter - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling Layout.preferredWidth: updateText.implicitWidth + 46 * scaling Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling color: updateArea.containsMouse ? Color.mPrimary : Color.transparent border.color: Color.mPrimary - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) visible: { if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown") return false @@ -133,18 +133,18 @@ ColumnLayout { RowLayout { anchors.centerIn: parent - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling NIcon { text: "system_update" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary } NText { id: updateText text: "Download latest release" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary } } @@ -163,24 +163,24 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } NText { text: `Shout-out to our ${root.contributors.length} awesome contributors!` - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface Layout.alignment: Qt.AlignCenter - Layout.topMargin: Style.marginLarge * 2 + Layout.topMargin: Style.marginL * 2 } ScrollView { Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: 200 * Style.marginTiny * scaling + Layout.preferredWidth: 200 * Style.marginXS * scaling Layout.fillHeight: true - Layout.topMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -196,15 +196,15 @@ ColumnLayout { model: root.contributors delegate: Rectangle { - width: contributorsGrid.cellWidth - Style.marginLarge * scaling - height: contributorsGrid.cellHeight - Style.marginTiny * scaling - radius: Style.radiusLarge * scaling + width: contributorsGrid.cellWidth - Style.marginL * scaling + height: contributorsGrid.cellHeight - Style.marginXS * scaling + radius: Style.radiusL * scaling color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent RowLayout { anchors.fill: parent - anchors.margins: Style.marginSmall * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginS * scaling + spacing: Style.marginM * scaling Item { Layout.alignment: Qt.AlignVCenter @@ -214,16 +214,16 @@ ColumnLayout { NImageRounded { imagePath: modelData.avatar_url || "" anchors.fill: parent - anchors.margins: Style.marginTiny * scaling + anchors.margins: Style.marginXS * scaling fallbackIcon: "person" borderColor: Color.mPrimary - borderWidth: Math.max(1, Style.borderMedium * scaling) + borderWidth: Math.max(1, Style.borderM * scaling) imageRadius: width * 0.5 } } ColumnLayout { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true @@ -238,7 +238,7 @@ ColumnLayout { NText { text: (modelData.contributions || 0) + " " + ((modelData.contributions || 0) === 1 ? "commit" : "commits") - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface } } diff --git a/Modules/SettingsPanel/Tabs/AudioTab.qml b/Modules/SettingsPanel/Tabs/AudioTab.qml index 7310b45..9d99011 100644 --- a/Modules/SettingsPanel/Tabs/AudioTab.qml +++ b/Modules/SettingsPanel/Tabs/AudioTab.qml @@ -26,7 +26,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -41,30 +41,30 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true NText { text: "Audio" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Volume Controls ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling // Master Volume ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling NText { text: "Master Volume" @@ -74,7 +74,7 @@ ColumnLayout { NText { text: "System-wide volume level." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -109,7 +109,7 @@ ColumnLayout { NText { text: Math.floor(AudioService.volume * 100) + "%" Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: Style.marginSmall * scaling + Layout.leftMargin: Style.marginS * scaling color: Color.mOnSurface } } @@ -117,9 +117,9 @@ ColumnLayout { // Mute Toggle ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginMedium * scaling + Layout.topMargin: Style.marginM * scaling NToggle { label: "Mute Audio Output" @@ -136,21 +136,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // AudioService Devices ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Audio Devices" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // ------------------------------- @@ -160,20 +160,20 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true - Layout.bottomMargin: Style.marginLarge * scaling + Layout.bottomMargin: Style.marginL * scaling NText { text: "Output Device" - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Select the desired audio output device." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -199,20 +199,20 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true - Layout.bottomMargin: Style.marginLarge * scaling + Layout.bottomMargin: Style.marginL * scaling NText { text: "Input Device" - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Select desired audio input device." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -234,21 +234,21 @@ ColumnLayout { // Divider NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginMedium * scaling + Layout.topMargin: Style.marginL * scaling + Layout.bottomMargin: Style.marginM * scaling } // AudioService Visualizer Category ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true NText { text: "Audio Visualizer" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // AudioService Visualizer section diff --git a/Modules/SettingsPanel/Tabs/BarTab.qml b/Modules/SettingsPanel/Tabs/BarTab.qml index d00da9c..ec8ffc1 100644 --- a/Modules/SettingsPanel/Tabs/BarTab.qml +++ b/Modules/SettingsPanel/Tabs/BarTab.qml @@ -15,7 +15,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -30,12 +30,12 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Components" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -86,19 +86,19 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: "Background Opacity" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Adjust the background opacity of the bar" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant wrapMode: Text.WordWrap Layout.fillWidth: true @@ -118,7 +118,7 @@ ColumnLayout { NText { text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%" Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: Style.marginSmall * scaling + Layout.leftMargin: Style.marginS * scaling color: Color.mOnSurface } } diff --git a/Modules/SettingsPanel/Tabs/BrightnessTab.qml b/Modules/SettingsPanel/Tabs/BrightnessTab.qml index 845d43d..625e16c 100644 --- a/Modules/SettingsPanel/Tabs/BrightnessTab.qml +++ b/Modules/SettingsPanel/Tabs/BrightnessTab.qml @@ -23,13 +23,13 @@ Item { ColumnLayout { width: parent.width ColumnLayout { - spacing: Style.marginLarge * scaling - Layout.margins: Style.marginLarge * scaling + spacing: Style.marginL * scaling + Layout.margins: Style.marginL * scaling Layout.fillWidth: true NText { text: "Brightness Settings" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -42,13 +42,13 @@ Item { // Bar Visibility Section ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling NText { text: "Bar Integration" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -65,25 +65,25 @@ Item { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling + Layout.bottomMargin: Style.marginL * scaling } // Brightness Step Section ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true NText { text: "Brightness Step Size" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant wrapMode: Text.WordWrap Layout.fillWidth: true @@ -91,7 +91,7 @@ Item { RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NSlider { Layout.fillWidth: true @@ -110,7 +110,7 @@ Item { text: Settings.data.brightness.brightnessStep + "%" Layout.alignment: Qt.AlignVCenter color: Color.mOnSurface - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold } } @@ -118,25 +118,25 @@ Item { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling + Layout.bottomMargin: Style.marginL * scaling } // Monitor Overview Section ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true NText { text: "Monitor Brightness Overview" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Current brightness levels for all detected monitors." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant wrapMode: Text.WordWrap Layout.fillWidth: true @@ -147,25 +147,25 @@ Item { model: BrightnessService.monitors Rectangle { Layout.fillWidth: true - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling ColumnLayout { id: contentCol anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginM * scaling RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: `${model.modelData.name} [${model.modelData.model}]` - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mSecondary } @@ -176,7 +176,7 @@ Item { NText { text: model.method - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant Layout.alignment: Qt.AlignRight } @@ -184,11 +184,11 @@ Item { RowLayout { Layout.fillWidth: true - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NText { text: "Brightness:" - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: Color.mOnSurface } @@ -208,7 +208,7 @@ Item { NText { text: Math.round(model.brightness * 100) + "%" - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mPrimary Layout.alignment: Qt.AlignRight diff --git a/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml b/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml index f9ed334..94452a9 100644 --- a/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml +++ b/Modules/SettingsPanel/Tabs/ColorSchemeTab.qml @@ -89,7 +89,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -104,7 +104,7 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true // Use Matugen @@ -156,17 +156,17 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling + Layout.bottomMargin: Style.marginL * scaling } ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: "Predefined Color Schemes" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface Layout.fillWidth: true @@ -174,7 +174,7 @@ ColumnLayout { NText { text: "These color schemes only apply when 'Use Matugen' is disabled. When enabled, Matugen will generate colors based on your wallpaper instead. You can toggle between light and dark themes when using Matugen." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface Layout.fillWidth: true wrapMode: Text.WordWrap @@ -182,15 +182,15 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling // Color Schemes Grid GridLayout { columns: 4 - rowSpacing: Style.marginLarge * scaling - columnSpacing: Style.marginLarge * scaling + rowSpacing: Style.marginL * scaling + columnSpacing: Style.marginL * scaling Layout.fillWidth: true Repeater { @@ -203,9 +203,9 @@ ColumnLayout { Layout.fillWidth: true Layout.preferredHeight: 120 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: getSchemeColor(modelData, "mSurface") - border.width: Math.max(1, Style.borderThick * scaling) + border.width: Math.max(1, Style.borderL * scaling) border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Color.mPrimary : Color.mOutline scale: root.cardScaleLow @@ -234,7 +234,7 @@ ColumnLayout { ColumnLayout { anchors.fill: parent anchors.margins: Style.marginXL * scaling - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling // Scheme name NText { @@ -243,7 +243,7 @@ ColumnLayout { var chunks = schemePath.replace(".json", "").split("/") return chunks[chunks.length - 1] } - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: getSchemeColor(modelData, "mOnSurface") Layout.fillWidth: true @@ -253,7 +253,7 @@ ColumnLayout { // Color swatches RowLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter @@ -296,7 +296,7 @@ ColumnLayout { visible: Settings.data.colorSchemes.predefinedScheme === schemePath anchors.right: parent.right anchors.top: parent.top - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling width: 24 * scaling height: 24 * scaling radius: width * 0.5 @@ -305,7 +305,7 @@ ColumnLayout { NText { anchors.centerIn: parent text: "✓" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling font.weight: Style.fontWeightBold color: Color.mOnPrimary } diff --git a/Modules/SettingsPanel/Tabs/DisplayTab.qml b/Modules/SettingsPanel/Tabs/DisplayTab.qml index 4aeb72b..e9ed436 100644 --- a/Modules/SettingsPanel/Tabs/DisplayTab.qml +++ b/Modules/SettingsPanel/Tabs/DisplayTab.qml @@ -37,13 +37,13 @@ Item { ColumnLayout { width: parent.width ColumnLayout { - spacing: Style.marginLarge * scaling - Layout.margins: Style.marginLarge * scaling + spacing: Style.marginL * scaling + Layout.margins: Style.marginL * scaling Layout.fillWidth: true NText { text: "Per‑monitor configuration" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -58,33 +58,33 @@ Item { model: Quickshell.screens || [] delegate: Rectangle { Layout.fillWidth: true - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling ColumnLayout { id: contentCol anchors.fill: parent - anchors.margins: Style.marginLarge * scaling - spacing: Style.marginTiniest * scaling + anchors.margins: Style.marginL * scaling + spacing: Style.marginXXS * scaling NText { text: (modelData.name || "Unknown") - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mSecondary } NText { text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})` - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling NToggle { label: "Bar" diff --git a/Modules/SettingsPanel/Tabs/GeneralTab.qml b/Modules/SettingsPanel/Tabs/GeneralTab.qml index 347b898..ae5f76f 100644 --- a/Modules/SettingsPanel/Tabs/GeneralTab.qml +++ b/Modules/SettingsPanel/Tabs/GeneralTab.qml @@ -15,7 +15,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -30,25 +30,25 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "General Settings" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } // Profile section ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling RowLayout { Layout.fillWidth: true - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling // Avatar preview NImageRounded { @@ -57,7 +57,7 @@ ColumnLayout { imagePath: Settings.data.general.avatarImage fallbackIcon: "person" borderColor: Color.mPrimary - borderWidth: Math.max(1, Style.borderMedium) + borderWidth: Math.max(1, Style.borderM) } NTextInput { @@ -76,20 +76,20 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "User Interface" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } NToggle { @@ -120,19 +120,19 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: "Border radius" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: "Adjust the rounded border of all UI elements" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant wrapMode: Text.WordWrap Layout.fillWidth: true @@ -152,7 +152,7 @@ ColumnLayout { NText { text: Math.floor(Settings.data.general.radiusRatio * 100) + "%" Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: Style.marginSmall * scaling + Layout.leftMargin: Style.marginS * scaling color: Color.mOnSurface } } diff --git a/Modules/SettingsPanel/Tabs/NetworkTab.qml b/Modules/SettingsPanel/Tabs/NetworkTab.qml index 6f27d56..698a263 100644 --- a/Modules/SettingsPanel/Tabs/NetworkTab.qml +++ b/Modules/SettingsPanel/Tabs/NetworkTab.qml @@ -17,7 +17,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -32,12 +32,12 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Interfaces" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } diff --git a/Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml b/Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml index 4aea1d1..ec1f12c 100644 --- a/Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml +++ b/Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml @@ -15,7 +15,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -30,22 +30,22 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true NText { text: "Recording" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Output Directory ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling NTextInput { label: "Output Directory" @@ -58,9 +58,9 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginMedium * scaling + Layout.topMargin: Style.marginM * scaling // Show Cursor NToggle { label: "Show Cursor" @@ -75,21 +75,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // Video Settings ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Video Settings" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Frame Rate @@ -203,21 +203,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // Audio Settings ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Audio Settings" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Audio Source diff --git a/Modules/SettingsPanel/Tabs/TimeWeatherTab.qml b/Modules/SettingsPanel/Tabs/TimeWeatherTab.qml index e164f6c..c9b9f44 100644 --- a/Modules/SettingsPanel/Tabs/TimeWeatherTab.qml +++ b/Modules/SettingsPanel/Tabs/TimeWeatherTab.qml @@ -15,7 +15,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -30,22 +30,22 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling Layout.fillWidth: true NText { text: "Location" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Location section ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling NTextInput { label: "Location name" @@ -62,21 +62,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // Time section ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Time Format" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } NToggle { @@ -109,21 +109,21 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // Weather section ColumnLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling Layout.fillWidth: true NText { text: "Weather" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } NToggle { diff --git a/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml b/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml index de7d090..530b850 100644 --- a/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml +++ b/Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml @@ -24,14 +24,14 @@ Item { ColumnLayout { width: parent.width ColumnLayout { - spacing: Style.marginLarge * scaling - Layout.margins: Style.marginLarge * scaling + spacing: Style.marginL * scaling + Layout.margins: Style.marginL * scaling Layout.fillWidth: true // Current wallpaper display NText { text: "Current Wallpaper" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -39,28 +39,28 @@ Item { Rectangle { Layout.fillWidth: true Layout.preferredHeight: 120 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) clip: true NImageRounded { id: currentWallpaperImage anchors.fill: parent - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling imagePath: WallpaperService.currentWallpaper fallbackIcon: "image" borderColor: Color.mOutline - borderWidth: Math.max(1, Style.borderThin * scaling) - imageRadius: Style.radiusMedium * scaling + borderWidth: Math.max(1, Style.borderS * scaling) + imageRadius: Style.radiusM * scaling } } NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * scaling + Layout.bottomMargin: Style.marginL * scaling } RowLayout { @@ -72,7 +72,7 @@ Item { // Wallpaper grid NText { text: "Wallpaper Selector" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } @@ -88,7 +88,7 @@ Item { text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType + " transition." : "Wallpapers will change instantly." color: Color.mOnSurface - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling visible: Settings.data.wallpaper.swww.enabled } } @@ -123,15 +123,15 @@ Item { property int columns: 5 property int itemSize: Math.floor( - (width - leftMargin - rightMargin - (4 * Style.marginSmall * scaling)) / columns) + (width - leftMargin - rightMargin - (4 * Style.marginS * scaling)) / columns) cellWidth: Math.floor((width - leftMargin - rightMargin) / columns) - cellHeight: Math.floor(itemSize * 0.67) + Style.marginSmall * scaling + cellHeight: Math.floor(itemSize * 0.67) + Style.marginS * scaling - leftMargin: Style.marginSmall * scaling - rightMargin: Style.marginSmall * scaling - topMargin: Style.marginSmall * scaling - bottomMargin: Style.marginSmall * scaling + leftMargin: Style.marginS * scaling + rightMargin: Style.marginS * scaling + topMargin: Style.marginS * scaling + bottomMargin: Style.marginS * scaling delegate: Rectangle { id: wallpaperItem @@ -157,25 +157,25 @@ Item { anchors.fill: parent color: Color.transparent border.color: isSelected ? Color.mPrimary : Color.mOutline - border.width: Math.max(1, Style.borderThick * scaling) + border.width: Math.max(1, Style.borderL * scaling) } // Selection tick-mark Rectangle { anchors.top: parent.top anchors.right: parent.right - anchors.margins: Style.marginTiny * scaling + anchors.margins: Style.marginXS * scaling width: 20 * scaling height: 20 * scaling radius: width / 2 color: Color.mPrimary border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) visible: isSelected NIcon { text: "check" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnPrimary anchors.centerIn: parent } @@ -211,18 +211,18 @@ Item { Rectangle { anchors.fill: parent color: Color.mSurface - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) visible: WallpaperService.wallpaperList.length === 0 && !WallpaperService.scanning ColumnLayout { anchors.centerIn: parent - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling NIcon { text: "folder_open" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling color: Color.mOnSurface Layout.alignment: Qt.AlignHCenter } diff --git a/Modules/SettingsPanel/Tabs/WallpaperTab.qml b/Modules/SettingsPanel/Tabs/WallpaperTab.qml index fd12ea7..1ca9e76 100644 --- a/Modules/SettingsPanel/Tabs/WallpaperTab.qml +++ b/Modules/SettingsPanel/Tabs/WallpaperTab.qml @@ -15,7 +15,7 @@ ColumnLayout { Layout.fillWidth: true Layout.fillHeight: true - padding: Style.marginMedium * scaling + padding: Style.marginM * scaling clip: true ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -30,26 +30,26 @@ ColumnLayout { } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Directory" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Wallpaper Settings Category ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling // Wallpaper Folder ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true NTextInput { @@ -67,20 +67,20 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "Automation" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Random Wallpaper @@ -107,7 +107,7 @@ ColumnLayout { NText { text: "How often to change wallpapers automatically (in seconds)." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -135,22 +135,22 @@ ColumnLayout { NDivider { Layout.fillWidth: true - Layout.topMargin: Style.marginLarge * 2 * scaling - Layout.bottomMargin: Style.marginLarge * scaling + Layout.topMargin: Style.marginL * 2 * scaling + Layout.bottomMargin: Style.marginL * scaling } // ------------------------------- // SWWW ColumnLayout { - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Layout.fillWidth: true NText { text: "SWWW" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface - Layout.bottomMargin: Style.marginSmall * scaling + Layout.bottomMargin: Style.marginS * scaling } // Use SWWW @@ -165,9 +165,9 @@ ColumnLayout { // SWWW Settings (only visible when useSWWW is enabled) ColumnLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true - Layout.topMargin: Style.marginSmall * scaling + Layout.topMargin: Style.marginS * scaling visible: Settings.data.wallpaper.swww.enabled // Resize Mode @@ -280,7 +280,7 @@ ColumnLayout { NText { text: "Frames per second for transition animations." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -319,7 +319,7 @@ ColumnLayout { NText { text: "Duration of transition animations in seconds." - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true diff --git a/Modules/SidePanel/Cards/MediaCard.qml b/Modules/SidePanel/Cards/MediaCard.qml index 7b651c3..620d615 100644 --- a/Modules/SidePanel/Cards/MediaCard.qml +++ b/Modules/SidePanel/Cards/MediaCard.qml @@ -16,21 +16,21 @@ NBox { // Let content dictate the height (no hardcoded height here) // Height can be overridden by parent layout (SidePanel binds it to stats card) - //implicitHeight: content.implicitHeight + Style.marginLarge * 2 * scaling + //implicitHeight: content.implicitHeight + Style.marginL * 2 * scaling // Component.onCompleted: { // Logger.logMediaService.trackArtUrl) // } ColumnLayout { anchors.fill: parent Layout.fillHeight: true - anchors.margins: Style.marginLarge * scaling + anchors.margins: Style.marginL * scaling // Fallback ColumnLayout { id: fallback visible: !main.visible - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Item { Layout.fillWidth: true @@ -39,7 +39,7 @@ NBox { NIcon { text: "album" - font.pointSize: Style.fontSizeXXL * 2.5 * scaling + font.pointSize: Style.fontSizeXXXL * 2.5 * scaling color: Color.mPrimary Layout.alignment: Qt.AlignHCenter } @@ -59,7 +59,7 @@ NBox { id: main visible: MediaService.currentPlayer && MediaService.canPlay - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling // Player selector ComboBox { @@ -77,16 +77,16 @@ NBox { // implicitHeight: 30 * scaling color: Color.transparent border.color: playerSelector.activeFocus ? Color.mTertiary : Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusMedium * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusM * scaling } contentItem: NText { visible: false - leftPadding: Style.marginMedium * scaling + leftPadding: Style.marginM * scaling rightPadding: playerSelector.indicator.width + playerSelector.spacing text: playerSelector.displayText - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -96,7 +96,7 @@ NBox { x: playerSelector.width - width y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2 text: "arrow_drop_down" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: Color.mOnSurface horizontalAlignment: Text.AlignRight } @@ -106,8 +106,8 @@ NBox { x: playerSelector.width * 0.5 y: playerSelector.height * 0.75 width: playerSelector.width * 0.5 - implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling) - padding: Style.marginSmall * scaling + implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginM * scaling) + padding: Style.marginS * scaling contentItem: ListView { clip: true @@ -120,8 +120,8 @@ NBox { background: Rectangle { color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusTiny * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusXS * scaling } } @@ -129,7 +129,7 @@ NBox { width: playerSelector.width contentItem: NText { text: modelData.identity - font.pointSize: Style.fontSizeReduced * scaling + font.pointSize: Style.fontSizeS * scaling color: highlighted ? Color.mSurface : Color.mOnSurface verticalAlignment: Text.AlignVCenter elide: Text.ElideRight @@ -137,9 +137,9 @@ NBox { highlighted: playerSelector.highlightedIndex === index background: Rectangle { - width: popup.width - Style.marginSmall * scaling * 2 + width: popup.width - Style.marginS * scaling * 2 color: highlighted ? Color.mTertiary : Color.transparent - radius: Style.radiusTiny * scaling + radius: Style.radiusXS * scaling } } @@ -150,7 +150,7 @@ NBox { } RowLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling // ------------------------- // Rounded thumbnail image @@ -161,7 +161,7 @@ NBox { radius: width * 0.5 color: trackArt.visible ? Color.mPrimary : Color.transparent border.color: trackArt.visible ? Color.mOutline : Color.transparent - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) clip: true NImageRounded { @@ -169,11 +169,11 @@ NBox { visible: MediaService.trackArtUrl.toString() !== "" anchors.fill: parent - anchors.margins: Style.marginTiny * scaling + anchors.margins: Style.marginXS * scaling imagePath: MediaService.trackArtUrl fallbackIcon: "music_note" borderColor: Color.mOutline - borderWidth: Math.max(1, Style.borderThin * scaling) + borderWidth: Math.max(1, Style.borderS * scaling) imageRadius: width * 0.5 } @@ -181,7 +181,7 @@ NBox { NIcon { text: "album" color: Color.mPrimary - font.pointSize: Style.fontSizeLarge * 12 * scaling + font.pointSize: Style.fontSizeL * 12 * scaling visible: !trackArt.visible anchors.centerIn: parent } @@ -191,12 +191,12 @@ NBox { // Track metadata ColumnLayout { Layout.fillWidth: true - spacing: Style.marginTiny * scaling + spacing: Style.marginXS * scaling NText { visible: MediaService.trackTitle !== "" text: MediaService.trackTitle - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold elide: Text.ElideRight wrapMode: Text.Wrap @@ -208,7 +208,7 @@ NBox { visible: MediaService.trackArtist !== "" text: MediaService.trackArtist color: Color.mOnSurface - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling elide: Text.ElideRight Layout.fillWidth: true } @@ -217,7 +217,7 @@ NBox { visible: MediaService.trackAlbum !== "" text: MediaService.trackAlbum color: Color.mOnSurface - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling elide: Text.ElideRight Layout.fillWidth: true } @@ -231,7 +231,7 @@ NBox { visible: (MediaService.currentPlayer && MediaService.trackLength > 0) width: parent.width height: 4 * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: Color.mSurface Layout.fillWidth: true @@ -265,7 +265,7 @@ NBox { radius: width * 0.5 color: Color.mPrimary border.color: Color.mOutline - border.width: Math.max(1 * Style.borderMedium * scaling) + border.width: Math.max(1 * Style.borderM * scaling) x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2)) anchors.verticalCenter: parent.verticalCenter scale: progressMouseArea.containsMouse || progressMouseArea.pressed ? 1.2 : 1.0 @@ -302,7 +302,7 @@ NBox { // ------------------------- // Media controls RowLayout { - spacing: Style.marginMedium * scaling + spacing: Style.marginM * scaling Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter diff --git a/Modules/SidePanel/Cards/PowerProfilesCard.qml b/Modules/SidePanel/Cards/PowerProfilesCard.qml index e77081c..1ef174f 100644 --- a/Modules/SidePanel/Cards/PowerProfilesCard.qml +++ b/Modules/SidePanel/Cards/PowerProfilesCard.qml @@ -11,7 +11,7 @@ import qs.Widgets NBox { Layout.fillWidth: true Layout.preferredWidth: 1 - implicitHeight: powerRow.implicitHeight + Style.marginMedium * 2 * scaling + implicitHeight: powerRow.implicitHeight + Style.marginM * 2 * scaling // PowerProfiles service property var powerProfiles: PowerProfiles @@ -20,7 +20,7 @@ NBox { RowLayout { id: powerRow anchors.fill: parent - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling spacing: sidePanel.cardSpacing Item { Layout.fillWidth: true diff --git a/Modules/SidePanel/Cards/ProfileCard.qml b/Modules/SidePanel/Cards/ProfileCard.qml index cf1e329..1b39336 100644 --- a/Modules/SidePanel/Cards/ProfileCard.qml +++ b/Modules/SidePanel/Cards/ProfileCard.qml @@ -18,15 +18,15 @@ NBox { Layout.fillWidth: true // Height driven by content - implicitHeight: content.implicitHeight + Style.marginMedium * 2 * scaling + implicitHeight: content.implicitHeight + Style.marginM * 2 * scaling RowLayout { id: content anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginM * scaling NImageRounded { width: Style.baseWidgetSize * 1.25 * scaling @@ -34,12 +34,12 @@ NBox { imagePath: Settings.data.general.avatarImage fallbackIcon: "person" borderColor: Color.mPrimary - borderWidth: Math.max(1, Style.borderMedium * scaling) + borderWidth: Math.max(1, Style.borderM * scaling) } ColumnLayout { Layout.fillWidth: true - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling NText { text: Quickshell.env("USER") || "user" font.weight: Style.fontWeightBold @@ -51,7 +51,7 @@ NBox { } RowLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Item { Layout.fillWidth: true diff --git a/Modules/SidePanel/Cards/SystemMonitorCard.qml b/Modules/SidePanel/Cards/SystemMonitorCard.qml index 325a29c..9f05e66 100644 --- a/Modules/SidePanel/Cards/SystemMonitorCard.qml +++ b/Modules/SidePanel/Cards/SystemMonitorCard.qml @@ -9,22 +9,22 @@ NBox { id: root Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling - implicitHeight: content.implicitHeight + Style.marginTiny * 2 * scaling + implicitHeight: content.implicitHeight + Style.marginXS * 2 * scaling Column { id: content anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.leftMargin: Style.marginSmall * scaling - anchors.rightMargin: Style.marginSmall * scaling - anchors.topMargin: Style.marginTiny * scaling - anchors.bottomMargin: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling + anchors.rightMargin: Style.marginS * scaling + anchors.topMargin: Style.marginXS * scaling + anchors.bottomMargin: Style.marginM * scaling + spacing: Style.marginS * scaling // Slight top padding Item { - height: Style.marginTiny * scaling + height: Style.marginXS * scaling } NCircleStat { @@ -63,7 +63,7 @@ NBox { // Extra bottom padding to shift the perceived stack slightly upward Item { - height: Style.marginMedium * scaling + height: Style.marginM * scaling } } } diff --git a/Modules/SidePanel/Cards/UtilitiesCard.qml b/Modules/SidePanel/Cards/UtilitiesCard.qml index f5fc449..39b035c 100644 --- a/Modules/SidePanel/Cards/UtilitiesCard.qml +++ b/Modules/SidePanel/Cards/UtilitiesCard.qml @@ -11,11 +11,11 @@ import qs.Widgets NBox { Layout.fillWidth: true Layout.preferredWidth: 1 - implicitHeight: utilRow.implicitHeight + Style.marginMedium * 2 * scaling + implicitHeight: utilRow.implicitHeight + Style.marginM * 2 * scaling RowLayout { id: utilRow anchors.fill: parent - anchors.margins: Style.marginSmall * scaling + anchors.margins: Style.marginS * scaling spacing: sidePanel.cardSpacing Item { Layout.fillWidth: true diff --git a/Modules/SidePanel/Cards/WeatherCard.qml b/Modules/SidePanel/Cards/WeatherCard.qml index 2cde809..468d12c 100644 --- a/Modules/SidePanel/Cards/WeatherCard.qml +++ b/Modules/SidePanel/Cards/WeatherCard.qml @@ -14,34 +14,34 @@ NBox { // TBC weatherReady is not turning to false when we reset weather... Layout.fillWidth: true // Height driven by content - implicitHeight: content.implicitHeight + Style.marginLarge * 2 * scaling + implicitHeight: content.implicitHeight + Style.marginL * 2 * scaling ColumnLayout { id: content anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.margins: Style.marginMedium * scaling - spacing: Style.marginMedium * scaling + anchors.margins: Style.marginM * scaling + spacing: Style.marginM * scaling RowLayout { - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling NIcon { text: weatherReady ? LocationService.weatherSymbolFromCode( LocationService.data.weather.current_weather.weathercode) : "" - font.pointSize: Style.fontSizeXXL * 1.5 * scaling + font.pointSize: Style.fontSizeXXXL * 1.5 * scaling color: Color.mPrimary } ColumnLayout { - spacing: -Style.marginTiny * scaling + spacing: -Style.marginXS * scaling NText { text: { // Ensure the name is not too long if one had to specify the country const chunks = Settings.data.location.name.split(",") return chunks[0] } - font.pointSize: Style.fontSizeLarger * scaling + font.pointSize: Style.fontSizeXL * scaling font.weight: Style.fontWeightBold } @@ -61,13 +61,13 @@ NBox { temp = Math.round(temp) return `${temp}°${suffix}` } - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling font.weight: Style.fontWeightBold } NText { text: weatherReady ? `(${LocationService.data.weather.timezone_abbreviation})` : "" - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling visible: LocationService.data.weather } } @@ -83,19 +83,19 @@ NBox { visible: weatherReady Layout.fillWidth: true Layout.alignment: Qt.AlignHCenter - spacing: Style.marginLarge * scaling + spacing: Style.marginL * scaling Repeater { model: weatherReady ? LocationService.data.weather.daily.time : [] delegate: ColumnLayout { Layout.alignment: Qt.AlignHCenter - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling NText { text: Qt.formatDateTime(new Date(LocationService.data.weather.daily.time[index]), "ddd") color: Color.mOnSurface } NIcon { text: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index]) - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling color: Color.mPrimary } NText { @@ -110,7 +110,7 @@ NBox { min = Math.round(min) return `${max}°/${min}°` } - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurfaceVariant } } diff --git a/Modules/SidePanel/PowerMenu.qml b/Modules/SidePanel/PowerMenu.qml index add5529..ad9b1e3 100644 --- a/Modules/SidePanel/PowerMenu.qml +++ b/Modules/SidePanel/PowerMenu.qml @@ -25,9 +25,9 @@ NPanel { Rectangle { width: 160 * scaling height: 220 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) color: Color.mSurface visible: true @@ -35,7 +35,7 @@ NPanel { anchors.top: parent.top anchors.right: parent.right - anchors.rightMargin: Style.marginLarge * scaling + anchors.rightMargin: Style.marginL * scaling anchors.topMargin: 86 * scaling // Prevent closing when clicking in the panel bg @@ -48,27 +48,27 @@ NPanel { ColumnLayout { anchors.fill: parent - anchors.margins: Style.marginSmall * scaling - spacing: Style.marginTiny * scaling + anchors.margins: Style.marginS * scaling + spacing: Style.marginXS * scaling // -------------- // Lock Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: lockButtonArea.containsMouse ? Color.mTertiary : Color.transparent Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling Row { id: lockRow - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -110,19 +110,19 @@ NPanel { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: suspendButtonArea.containsMouse ? Color.mTertiary : Color.transparent Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling Row { id: suspendRow - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -162,19 +162,19 @@ NPanel { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: rebootButtonArea.containsMouse ? Color.mTertiary : Color.transparent Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling Row { id: rebootRow - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -214,19 +214,19 @@ NPanel { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: logoutButtonArea.containsMouse ? Color.mTertiary : Color.transparent Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling Row { id: logoutRow - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter @@ -266,19 +266,19 @@ NPanel { Rectangle { Layout.fillWidth: true Layout.preferredHeight: Style.barHeight * scaling - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling color: shutdownButtonArea.containsMouse ? Color.mTertiary : Color.transparent Item { anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling Row { id: shutdownRow - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling anchors.left: parent.left anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter diff --git a/Modules/SidePanel/SidePanel.qml b/Modules/SidePanel/SidePanel.qml index be6a576..f323462 100644 --- a/Modules/SidePanel/SidePanel.qml +++ b/Modules/SidePanel/SidePanel.qml @@ -34,7 +34,7 @@ NLoader { id: sidePanel // Single source of truth for spacing between cards (both axes) - property real cardSpacing: Style.marginLarge * scaling + property real cardSpacing: Style.marginL * scaling // X coordinate from the bar to align this panel under property real anchorX: root.anchorX // Ensure this panel attaches to the intended screen @@ -82,19 +82,19 @@ NLoader { Rectangle { id: panelBackground color: Color.mSurface - radius: Style.radiusLarge * scaling + radius: Style.radiusL * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) layer.enabled: true width: 460 * scaling property real innerMargin: sidePanel.cardSpacing // Height scales to content plus vertical padding height: content.implicitHeight + innerMargin * 2 // Place the panel just below the bar (overlay content starts below bar due to topMargin) - y: Style.marginSmall * scaling + y: Style.marginS * scaling // Center horizontally under the anchorX, clamped to the screen bounds - x: Math.max(Style.marginSmall * scaling, Math.min(parent.width - width - Style.marginSmall * scaling, - Math.round(anchorX - width / 2))) + x: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling, + Math.round(anchorX - width / 2))) // Animation properties property real scaleValue: 0.8 diff --git a/Widgets/NBox.qml b/Widgets/NBox.qml index 5a09a68..61d1a8c 100644 --- a/Widgets/NBox.qml +++ b/Widgets/NBox.qml @@ -12,8 +12,8 @@ Rectangle { implicitHeight: childrenRect.height color: Color.mSurfaceVariant - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutlineVariant - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) clip: true } diff --git a/Widgets/NBusyIndicator.qml b/Widgets/NBusyIndicator.qml index 6c77a12..08fb097 100644 --- a/Widgets/NBusyIndicator.qml +++ b/Widgets/NBusyIndicator.qml @@ -8,7 +8,7 @@ Item { property bool running: true property color color: Color.mPrimary property int size: Style.baseWidgetSize * scaling - property int strokeWidth: Style.borderThick * scaling + property int strokeWidth: Style.borderL * scaling property int duration: 1000 implicitWidth: size diff --git a/Widgets/NCard.qml b/Widgets/NCard.qml index a72b5fb..a8f7cc0 100644 --- a/Widgets/NCard.qml +++ b/Widgets/NCard.qml @@ -10,7 +10,7 @@ Rectangle { implicitHeight: childrenRect.height color: Color.mSurface - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) } diff --git a/Widgets/NCircleStat.qml b/Widgets/NCircleStat.qml index 38f9d2b..e7d7d1a 100644 --- a/Widgets/NCircleStat.qml +++ b/Widgets/NCircleStat.qml @@ -19,9 +19,9 @@ Rectangle { width: 68 * scaling height: 92 * scaling color: flat ? Color.transparent : Color.mSurface - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling border.color: flat ? Color.transparent : Color.mSurfaceVariant - border.width: flat ? 0 : Math.max(1, Style.borderThin * scaling) + border.width: flat ? 0 : Math.max(1, Style.borderS * scaling) clip: true // Repaint gauge when the bound value changes @@ -30,8 +30,8 @@ Rectangle { Row { id: innerRow anchors.fill: parent - anchors.margins: Style.marginSmall * scaling * contentScale - spacing: Style.marginSmall * scaling * contentScale + anchors.margins: Style.marginS * scaling * contentScale + spacing: Style.marginS * scaling * contentScale anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter @@ -77,7 +77,7 @@ Rectangle { id: valueLabel anchors.centerIn: parent text: `${root.value}${root.suffix}` - font.pointSize: Style.fontSizeMedium * scaling * contentScale + font.pointSize: Style.fontSizeM * scaling * contentScale font.weight: Style.fontWeightBold color: Color.mOnSurface horizontalAlignment: Text.AlignHCenter @@ -91,11 +91,11 @@ Rectangle { radius: width / 2 color: Color.mSurface // border.color: Color.mPrimary - // border.width: Math.max(1, Style.borderThin * scaling) + // border.width: Math.max(1, Style.borderS * scaling) anchors.right: parent.right anchors.top: parent.top anchors.rightMargin: -6 * scaling * contentScale - anchors.topMargin: Style.marginTiniest * scaling * contentScale + anchors.topMargin: Style.marginXXS * scaling * contentScale NIcon { anchors.centerIn: parent diff --git a/Widgets/NComboBox.qml b/Widgets/NComboBox.qml index 737bb46..7b881b6 100644 --- a/Widgets/NComboBox.qml +++ b/Widgets/NComboBox.qml @@ -19,21 +19,21 @@ ColumnLayout { signal selected(string key) - spacing: Style.marginSmall * scaling + spacing: Style.marginS * scaling Layout.fillWidth: true ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: label - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: description - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap } @@ -63,14 +63,14 @@ ColumnLayout { implicitHeight: preferredHeight color: Color.mSurface border.color: combo.activeFocus ? Color.mTertiary : Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusMedium * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusM * scaling } contentItem: NText { - leftPadding: Style.marginLarge * scaling - rightPadding: combo.indicator.width + Style.marginLarge * scaling - font.pointSize: Style.fontSizeMedium * scaling + leftPadding: Style.marginL * scaling + rightPadding: combo.indicator.width + Style.marginL * scaling + font.pointSize: Style.fontSizeM * scaling verticalAlignment: Text.AlignVCenter elide: Text.ElideRight text: (combo.currentIndex >= 0 && combo.currentIndex < root.model.count) ? root.model.get( @@ -78,17 +78,17 @@ ColumnLayout { } indicator: NIcon { - x: combo.width - width - Style.marginMedium * scaling + x: combo.width - width - Style.marginM * scaling y: combo.topPadding + (combo.availableHeight - height) / 2 text: "arrow_drop_down" - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling } popup: Popup { y: combo.height width: combo.width - implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2) - padding: Style.marginMedium * scaling + implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginM * scaling * 2) + padding: Style.marginM * scaling contentItem: ListView { property var comboBoxRoot: root @@ -116,16 +116,16 @@ ColumnLayout { contentItem: NText { text: name - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: highlighted ? Color.mSurface : Color.mOnSurface verticalAlignment: Text.AlignVCenter elide: Text.ElideRight } background: Rectangle { - width: combo.width - Style.marginMedium * scaling * 3 + width: combo.width - Style.marginM * scaling * 3 color: highlighted ? Color.mTertiary : Color.transparent - radius: Style.radiusSmall * scaling + radius: Style.radiusS * scaling } } } @@ -133,8 +133,8 @@ ColumnLayout { background: Rectangle { color: Color.mSurfaceVariant border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) - radius: Style.radiusMedium * scaling + border.width: Math.max(1, Style.borderS * scaling) + radius: Style.radiusM * scaling } } } diff --git a/Widgets/NDivider.qml b/Widgets/NDivider.qml index 0448a31..d92425a 100644 --- a/Widgets/NDivider.qml +++ b/Widgets/NDivider.qml @@ -6,6 +6,6 @@ import qs.Services Rectangle { width: parent.width - height: Math.max(1, Style.borderThin * scaling) + height: Math.max(1, Style.borderS * scaling) color: Color.mOutline } diff --git a/Widgets/NIcon.qml b/Widgets/NIcon.qml index 656e2e1..4a244aa 100644 --- a/Widgets/NIcon.qml +++ b/Widgets/NIcon.qml @@ -5,7 +5,7 @@ import qs.Widgets Text { text: "question_mark" font.family: "Material Symbols Rounded" - font.pointSize: Style.fontSizeLarge * scaling + font.pointSize: Style.fontSizeL * scaling font.variableAxes: { "wght"// slightly bold to ensure all lines looks good : (Font.Normal + Font.Bold) / 2.5 diff --git a/Widgets/NIconButton.qml b/Widgets/NIconButton.qml index 6ef62e8..86a1bb7 100644 --- a/Widgets/NIconButton.qml +++ b/Widgets/NIconButton.qml @@ -16,7 +16,7 @@ Rectangle { property bool showFilled: false property bool enabled: true property bool hovering: false - property real fontPointSize: Style.fontSizeMedium + property real fontPointSize: Style.fontSizeM signal entered signal exited @@ -28,7 +28,7 @@ Rectangle { color: (root.hovering || showFilled) ? Color.mPrimary : Color.transparent radius: width * 0.5 border.color: showBorder ? Color.mPrimary : Color.transparent - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) NIcon { anchors.centerIn: parent diff --git a/Widgets/NImageRounded.qml b/Widgets/NImageRounded.qml index 1518545..bd6daf0 100644 --- a/Widgets/NImageRounded.qml +++ b/Widgets/NImageRounded.qml @@ -18,7 +18,7 @@ Rectangle { color: Color.transparent radius: scaledRadius - anchors.margins: Style.marginTiniest * scaling + anchors.margins: Style.marginXXS * scaling // Border Rectangle { @@ -64,7 +64,7 @@ Rectangle { NIcon { anchors.centerIn: parent text: fallbackIcon - font.pointSize: Style.fontSizeXL * scaling + font.pointSize: Style.fontSizeXXL * scaling visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "") z: 0 } diff --git a/Widgets/NPill.qml b/Widgets/NPill.qml index ba01cee..77c43c8 100644 --- a/Widgets/NPill.qml +++ b/Widgets/NPill.qml @@ -31,7 +31,7 @@ Item { // Exposed width logic readonly property int pillHeight: Style.baseWidgetSize * sizeMultiplier * scaling readonly property int iconSize: Style.baseWidgetSize * sizeMultiplier * scaling - readonly property int pillPaddingHorizontal: Style.marginMedium * scaling + readonly property int pillPaddingHorizontal: Style.marginM * scaling readonly property int pillOverlap: iconSize * 0.5 readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap) @@ -53,7 +53,7 @@ Item { id: textItem anchors.centerIn: parent text: root.text - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling font.weight: Style.fontWeightBold color: textColor visible: showPill @@ -93,7 +93,7 @@ Item { NIcon { text: root.icon - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling color: showPill ? iconTextColor : collapsedIconColor anchors.centerIn: parent } diff --git a/Widgets/NRadioButton.qml b/Widgets/NRadioButton.qml index 369f7e0..b81991a 100644 --- a/Widgets/NRadioButton.qml +++ b/Widgets/NRadioButton.qml @@ -15,13 +15,13 @@ RadioButton { radius: width * 0.5 color: Color.transparent border.color: root.checked ? Color.mPrimary : Color.mOnSurface - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderM * scaling) anchors.verticalCenter: parent.verticalCenter Rectangle { anchors.centerIn: parent - implicitWidth: Style.marginSmall * scaling - implicitHeight: Style.marginSmall * scaling + implicitWidth: Style.marginS * scaling + implicitHeight: Style.marginS * scaling radius: width * 0.5 color: Qt.alpha(Color.mPrimary, root.checked ? 1 : 0) @@ -37,9 +37,9 @@ RadioButton { contentItem: NText { text: root.text - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling anchors.verticalCenter: parent.verticalCenter anchors.left: outerCircle.right - anchors.leftMargin: Style.marginSmall * scaling + anchors.leftMargin: Style.marginS * scaling } } diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml index a013959..7390ac1 100644 --- a/Widgets/NSlider.qml +++ b/Widgets/NSlider.qml @@ -74,7 +74,7 @@ Slider { radius: width * 0.5 color: root.pressed ? Color.mSurfaceVariant : Color.mSurface border.color: Color.mPrimary - border.width: Math.max(1, Style.borderThick * scaling) + border.width: Math.max(1, Style.borderL * scaling) // Press feedback halo (using accent color, low opacity) Rectangle { diff --git a/Widgets/NText.qml b/Widgets/NText.qml index 4f67f84..59d7d63 100644 --- a/Widgets/NText.qml +++ b/Widgets/NText.qml @@ -7,7 +7,7 @@ Text { id: root font.family: Settings.data.ui.fontFamily - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightMedium color: Color.mOnSurface } diff --git a/Widgets/NTextInput.qml b/Widgets/NTextInput.qml index 5064c47..90c1538 100644 --- a/Widgets/NTextInput.qml +++ b/Widgets/NTextInput.qml @@ -22,19 +22,19 @@ Item { implicitHeight: Style.baseWidgetSize * 2.75 * scaling ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: label - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: description - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -43,13 +43,13 @@ Item { // Container Rectangle { id: frame - Layout.topMargin: Style.marginTiny * scaling + Layout.topMargin: Style.marginXS * scaling implicitWidth: root.width implicitHeight: Style.baseWidgetSize * 1.35 * scaling - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) // Focus ring Rectangle { @@ -57,14 +57,14 @@ Item { radius: frame.radius color: Color.transparent border.color: input.activeFocus ? Color.mTertiary : Color.transparent - border.width: input.activeFocus ? Math.max(1, Style.borderThin * scaling) : 0 + border.width: input.activeFocus ? Math.max(1, Style.borderS * scaling) : 0 } RowLayout { anchors.fill: parent - anchors.leftMargin: Style.marginMedium * scaling - anchors.rightMargin: Style.marginMedium * scaling - spacing: Style.marginSmall * scaling + anchors.leftMargin: Style.marginM * scaling + anchors.rightMargin: Style.marginM * scaling + spacing: Style.marginS * scaling // Optional leading icon slot in the future // Item { Layout.preferredWidth: 0 } @@ -77,7 +77,7 @@ Item { color: Color.mOnSurface placeholderTextColor: Color.mOnSurface background: null - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling onEditingFinished: root.editingFinished() // Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal. // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics. diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml index e1cae48..9194e50 100644 --- a/Widgets/NToggle.qml +++ b/Widgets/NToggle.qml @@ -20,19 +20,19 @@ RowLayout { Layout.fillWidth: true ColumnLayout { - spacing: Style.marginTiniest * scaling + spacing: Style.marginXXS * scaling Layout.fillWidth: true NText { text: label - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling font.weight: Style.fontWeightBold color: Color.mOnSurface } NText { text: description - font.pointSize: Style.fontSizeSmall * scaling + font.pointSize: Style.fontSizeXS * scaling color: Color.mOnSurface wrapMode: Text.WordWrap Layout.fillWidth: true @@ -47,7 +47,7 @@ RowLayout { radius: height * 0.5 color: root.checked ? Color.mPrimary : Color.mSurface border.color: root.checked ? Color.mPrimary : Color.mOutline - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderM * scaling) Rectangle { implicitWidth: (root.baseSize - 5) * scaling @@ -55,7 +55,7 @@ RowLayout { radius: height * 0.5 color: root.checked ? Color.mOnPrimary : Color.mPrimary border.color: root.checked ? Color.mSurface : Color.mSurface - border.width: Math.max(1, Style.borderMedium * scaling) + border.width: Math.max(1, Style.borderM * scaling) y: 2 * scaling x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling diff --git a/Widgets/NTooltip.qml b/Widgets/NTooltip.qml index 9e7eb68..204a2ce 100644 --- a/Widgets/NTooltip.qml +++ b/Widgets/NTooltip.qml @@ -37,8 +37,8 @@ Window { function _showNow() { // Compute new size everytime we show the tooltip - width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginLarge * 2 * scaling) - height = Math.max(40 * scaling, tooltipText.implicitHeight + Style.marginMedium * 2 * scaling) + width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginL * 2 * scaling) + height = Math.max(40 * scaling, tooltipText.implicitHeight + Style.marginM * 2 * scaling) if (!target) { return @@ -134,10 +134,10 @@ Window { Rectangle { id: tooltipRect anchors.fill: parent - radius: Style.radiusMedium * scaling + radius: Style.radiusM * scaling color: Color.mSurface border.color: Color.mOutline - border.width: Math.max(1, Style.borderThin * scaling) + border.width: Math.max(1, Style.borderS * scaling) z: 1 // Animation properties @@ -166,7 +166,7 @@ Window { id: tooltipText anchors.centerIn: parent text: root.text - font.pointSize: Style.fontSizeMedium * scaling + font.pointSize: Style.fontSizeM * scaling horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter wrapMode: Text.Wrap diff --git a/shell.qml b/shell.qml index ecd45bc..6621d0e 100644 --- a/shell.qml +++ b/shell.qml @@ -1,3 +1,4 @@ + /* * Noctalia – made by https://github.com/noctalia-dev * Licensed under the MIT License.