never/noctalia-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Renamed most font and sizing shorthands properties for easier understanding and maintenance

Browse source 
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
This commit is contained in:
quadbyte 2025-08-18 11:12:51 -04:00
parent ddd74c65e4
commit b723eccc78
56 changed files with 1419 additions and 1423 deletions
Download patch file Download diff file Expand all files Collapse all files

64
Commons/Style.qml
View file

@ -13,15 +13,13 @@ Singleton {
*/ */
// Font size // Font size
property real fontSizeTiny: 7 property real fontSizeXS: 9
property real fontSizeSmall: 9 property real fontSizeS: 10
property real fontSizeReduced: 10 property real fontSizeM: 11
property real fontSizeMedium: 11 property real fontSizeL: 13
property real fontSizeInter: 12 property real fontSizeXL: 16
property real fontSizeLarge: 13 property real fontSizeXXL: 18
property real fontSizeLarger: 16 property real fontSizeXXXL: 24
property real fontSizeXL: 18
property real fontSizeXXL: 24
// Font weight // Font weight
property int fontWeightRegular: 400 property int fontWeightRegular: 400
@ -30,20 +28,36 @@ Singleton {
property int fontWeightBold: 700 property int fontWeightBold: 700
// Radii // Radii
property int radiusTiny: 8 * Settings.data.general.radiusRatio property int radiusXS: 8 * Settings.data.general.radiusRatio
property int radiusSmall: 12 * Settings.data.general.radiusRatio property int radiusS: 12 * Settings.data.general.radiusRatio
property int radiusMedium: 16 * Settings.data.general.radiusRatio property int radiusM: 16 * Settings.data.general.radiusRatio
property int radiusLarge: 20 * Settings.data.general.radiusRatio property int radiusL: 20 * Settings.data.general.radiusRatio
// Border // Border
property int borderThin: 1 property int borderS: 1
property int borderMedium: 2 property int borderM: 2
property int borderThick: 3 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) // Animation duration (ms)
property int animationFast: 150 property int animationFast: 150
property int animationNormal: 300 property int animationNormal: 300
property int animationSlow: 500 property int animationSlow: 450
// Dimensions // Dimensions
property int barHeight: 36 property int barHeight: 36
@ -54,20 +68,4 @@ Singleton {
property int tooltipDelay: 300 property int tooltipDelay: 300
property int tooltipDelayLong: 1200 property int tooltipDelayLong: 1200
property int pillDelay: 500 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
} }

57
Modules/AppLauncher/AppLauncher.qml
View file

@ -274,10 +274,10 @@ NLoader {
anchors.centerIn: parent anchors.centerIn: parent
width: Math.min(700 * scaling, parent.width * 0.75) width: Math.min(700 * scaling, parent.width * 0.75)
height: Math.min(550 * scaling, parent.height * 0.8) height: Math.min(550 * scaling, parent.height * 0.8)
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Style.borderThin * scaling border.width: Style.borderS * scaling
// Subtle gradient background // Subtle gradient background
gradient: Gradient { gradient: Gradient {
@ -293,28 +293,27 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// Search bar // Search bar
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
Layout.bottomMargin: Style.marginMedium * scaling Layout.bottomMargin: Style.marginM * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: searchInput.activeFocus ? Color.mPrimary : Color.mOutline border.color: searchInput.activeFocus ? Color.mPrimary : Color.mOutline
border.width: Math.max(1, border.width: Math.max(1, searchInput.activeFocus ? Style.borderM * scaling : Style.borderS * scaling)
searchInput.activeFocus ? Style.borderMedium * scaling : Style.borderThin * scaling)
Item { Item {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
NIcon { NIcon {
id: searchIcon id: searchIcon
text: "search" text: "search"
font.pointSize: Style.fontSizeLarger * scaling font.pointSize: Style.fontSizeXL * scaling
color: searchInput.activeFocus ? Color.mPrimary : Color.mOnSurface color: searchInput.activeFocus ? Color.mPrimary : Color.mOnSurface
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -326,9 +325,9 @@ NLoader {
color: Color.mOnSurface color: Color.mOnSurface
placeholderTextColor: Color.mOnSurfaceVariant placeholderTextColor: Color.mOnSurfaceVariant
background: null background: null
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
anchors.left: searchIcon.right anchors.left: searchIcon.right
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
onTextChanged: { onTextChanged: {
@ -386,18 +385,18 @@ NLoader {
ListView { ListView {
id: appsList id: appsList
anchors.fill: parent anchors.fill: parent
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
model: filteredEntries model: filteredEntries
currentIndex: selectedIndex currentIndex: selectedIndex
delegate: Rectangle { delegate: Rectangle {
width: appsList.width - Style.marginSmall * scaling width: appsList.width - Style.marginS * scaling
height: 65 * scaling height: 65 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
property bool isSelected: index === selectedIndex property bool isSelected: index === selectedIndex
color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Color.mPrimary, 1.1) : Color.mSurface color: (appCardArea.containsMouse || isSelected) ? Qt.darker(Color.mPrimary, 1.1) : Color.mSurface
border.color: (appCardArea.containsMouse || isSelected) ? Color.mPrimary : Color.transparent 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 { Behavior on color {
ColorAnimation { ColorAnimation {
@ -419,14 +418,14 @@ NLoader {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// App icon with background // App icon with background
Rectangle { Rectangle {
Layout.preferredWidth: Style.baseWidgetSize * 1.25 * scaling Layout.preferredWidth: Style.baseWidgetSize * 1.25 * scaling
Layout.preferredHeight: 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 color: appCardArea.containsMouse ? Qt.darker(Color.mPrimary, 1.1) : Color.mSurfaceVariant
property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard || modelData.isCommand) property bool iconLoaded: (modelData.isCalculator || modelData.isClipboard || modelData.isCommand)
|| (iconImg.status === Image.Ready && iconImg.source !== "" || (iconImg.status === Image.Ready && iconImg.source !== ""
@ -437,7 +436,7 @@ NLoader {
Image { Image {
id: clipboardImage id: clipboardImage
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
visible: modelData.type === 'image' visible: modelData.type === 'image'
source: modelData.data || "" source: modelData.data || ""
fillMode: Image.PreserveAspectCrop fillMode: Image.PreserveAspectCrop
@ -448,7 +447,7 @@ NLoader {
IconImage { IconImage {
id: iconImg id: iconImg
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
asynchronous: true 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") : "") 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 visible: (modelData.isCalculator || modelData.isClipboard || modelData.isCommand
@ -458,8 +457,8 @@ NLoader {
// Fallback icon container // Fallback icon container
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
radius: Style.radiusTiny * scaling radius: Style.radiusXS * scaling
color: Color.mPrimary color: Color.mPrimary
opacity: Style.opacityMedium opacity: Style.opacityMedium
visible: !parent.iconLoaded visible: !parent.iconLoaded
@ -470,7 +469,7 @@ NLoader {
visible: !parent.iconLoaded && !(modelData.isCalculator || modelData.isClipboard visible: !parent.iconLoaded && !(modelData.isCalculator || modelData.isClipboard
|| modelData.isCommand) || modelData.isCommand)
text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?" text: modelData.name ? modelData.name.charAt(0).toUpperCase() : "?"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Font.Bold font.weight: Font.Bold
color: Color.mPrimary color: Color.mPrimary
} }
@ -485,11 +484,11 @@ NLoader {
// App info // App info
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: modelData.name || "Unknown" text: modelData.name || "Unknown"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Font.Bold font.weight: Font.Bold
color: (appCardArea.containsMouse || isSelected) ? Color.mOnPrimary : Color.mOnSurface color: (appCardArea.containsMouse || isSelected) ? Color.mOnPrimary : Color.mOnSurface
elide: Text.ElideRight elide: Text.ElideRight
@ -498,7 +497,7 @@ NLoader {
NText { NText {
text: modelData.isCalculator ? (modelData.expr + " = " + modelData.result) : modelData.isClipboard ? modelData.content : modelData.isCommand ? modelData.content : (modelData.genericName || modelData.comment || "") 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 color: (appCardArea.containsMouse || isSelected) ? Color.mOnPrimary : Color.mOnSurface
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
@ -525,7 +524,7 @@ NLoader {
// No results message // No results message
NText { NText {
text: searchText.trim() !== "" ? "No applications found" : "No applications available" text: searchText.trim() !== "" ? "No applications found" : "No applications available"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurface color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true Layout.fillWidth: true
@ -540,7 +539,7 @@ NLoader {
">calc") ? `${filteredEntries.length} result${filteredEntries.length ">calc") ? `${filteredEntries.length} result${filteredEntries.length
!== 1 ? 's' : ''}` : `${filteredEntries.length} application${filteredEntries.length !== 1 ? 's' : ''}` : `${filteredEntries.length} application${filteredEntries.length
!== 1 ? 's' : ''}` !== 1 ? 's' : ''}`
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true Layout.fillWidth: true

2
Modules/Background/ScreenCorners.qml
View file

@ -24,7 +24,7 @@ NLoader {
Settings.data.bar.backgroundOpacity) Settings.data.bar.backgroundOpacity)
// The amount subtracted from full size for the inner cutout // The amount subtracted from full size for the inner cutout
// Inner size = full size - borderWidth (per axis) // Inner size = full size - borderWidth (per axis)
property int borderWidth: Style.borderMedium property int borderWidth: Style.borderM
// Rounded radius for the inner cutout // Rounded radius for the inner cutout
property int innerRadius: 20 property int innerRadius: 20

18
Modules/Bar/ActiveWindow.qml
View file

@ -9,7 +9,7 @@ import qs.Widgets
Row { Row {
id: root id: root
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
visible: (Settings.data.bar.showActiveWindow && getTitle() !== "") visible: (Settings.data.bar.showActiveWindow && getTitle() !== "")
property bool showingFullTitle: false property bool showingFullTitle: false
@ -53,31 +53,31 @@ Row {
Rectangle { Rectangle {
// Let the Rectangle size itself based on its content (the Row) // 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) height: Math.round(Style.barHeight * 0.75 * scaling)
radius: Math.round(Style.radiusMedium * scaling) radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutline 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 anchors.verticalCenter: parent.verticalCenter
Item { Item {
id: mainContainer id: mainContainer
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
Row { Row {
id: row id: row
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
// Window icon // Window icon
NIcon { NIcon {
id: windowIcon id: windowIcon
text: "dialogs" text: "dialogs"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: getTitle() !== "" visible: getTitle() !== ""
@ -92,7 +92,7 @@ Row {
300 * scaling) : Math.min( 300 * scaling) : Math.min(
fullTitleMetrics.contentWidth, 150 * scaling) fullTitleMetrics.contentWidth, 150 * scaling)
text: getTitle() text: getTitle()
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
elide: Text.ElideRight elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

10
Modules/Bar/Bar.qml
View file

@ -49,9 +49,9 @@ Variants {
height: parent.height height: parent.height
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
SystemMonitor {} SystemMonitor {}
@ -67,7 +67,7 @@ Variants {
height: parent.height height: parent.height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Workspace {} Workspace {}
} }
@ -78,9 +78,9 @@ Variants {
height: parent.height height: parent.height
anchors.right: bar.right anchors.right: bar.right
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
anchors.verticalCenter: bar.verticalCenter anchors.verticalCenter: bar.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Screen Recording Indicator // Screen Recording Indicator
NIconButton { NIconButton {

64
Modules/Bar/BluetoothMenu.qml
View file

@ -68,15 +68,15 @@ NLoader {
property var deviceData: null property var deviceData: null
color: Color.mSurface color: Color.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
width: 380 * scaling width: 380 * scaling
height: 500 * scaling height: 500 * scaling
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: Style.marginTiny * scaling anchors.topMargin: Style.marginXS * scaling
anchors.rightMargin: Style.marginTiny * scaling anchors.rightMargin: Style.marginXS * scaling
// Animation properties // Animation properties
property real scaleValue: 0.8 property real scaleValue: 0.8
@ -113,23 +113,23 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// HEADER // HEADER
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "bluetooth" text: "bluetooth"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mPrimary color: Color.mPrimary
} }
NText { NText {
text: "Bluetooth" text: "Bluetooth"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
@ -172,16 +172,16 @@ NLoader {
id: column id: column
width: parent.width width: parent.width
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
visible: BluetoothService.adapter && BluetoothService.adapter.enabled visible: BluetoothService.adapter && BluetoothService.adapter.enabled
RowLayout { RowLayout {
width: parent.width width: parent.width
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "Available Devices" text: "Available Devices"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurface color: Color.mOnSurface
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
} }
@ -206,7 +206,7 @@ NLoader {
width: parent.width width: parent.width
height: 70 height: 70
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: { color: {
if (availableDeviceArea.containsMouse && !isBusy) if (availableDeviceArea.containsMouse && !isBusy)
return Color.mTertiary return Color.mTertiary
@ -220,18 +220,18 @@ NLoader {
return Color.mSurfaceVariant return Color.mSurfaceVariant
} }
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
Row { Row {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// One device BT icon // One device BT icon
NIcon { NIcon {
text: BluetoothService.getDeviceIcon(modelData) text: BluetoothService.getDeviceIcon(modelData)
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: { color: {
if (availableDeviceArea.containsMouse) if (availableDeviceArea.containsMouse)
return Color.mOnTertiary return Color.mOnTertiary
@ -248,7 +248,7 @@ NLoader {
} }
Column { Column {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
// One device name // One device name
@ -272,10 +272,10 @@ NLoader {
} }
Row { Row {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Row { Row {
spacing: Style.marginSmall * spacing spacing: Style.marginS * spacing
// One device signal strength - "Unknown" when not connected // One device signal strength - "Unknown" when not connected
NText { NText {
@ -288,7 +288,7 @@ NLoader {
return BluetoothService.getSignalStrength(modelData) return BluetoothService.getSignalStrength(modelData)
} }
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: {
if (availableDeviceArea.containsMouse) if (availableDeviceArea.containsMouse)
return Color.mOnTertiary return Color.mOnTertiary
@ -305,7 +305,7 @@ NLoader {
NIcon { NIcon {
text: BluetoothService.getSignalIcon(modelData) text: BluetoothService.getSignalIcon(modelData)
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: {
if (availableDeviceArea.containsMouse) if (availableDeviceArea.containsMouse)
return Color.mOnTertiary return Color.mOnTertiary
@ -325,7 +325,7 @@ NLoader {
NText { NText {
text: (modelData.signalStrength !== undefined text: (modelData.signalStrength !== undefined
&& modelData.signalStrength > 0) ? modelData.signalStrength + "%" : "" && modelData.signalStrength > 0) ? modelData.signalStrength + "%" : ""
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: { color: {
if (availableDeviceArea.containsMouse) if (availableDeviceArea.containsMouse)
return Color.mOnTertiary return Color.mOnTertiary
@ -349,9 +349,9 @@ NLoader {
Rectangle { Rectangle {
width: 80 * scaling width: 80 * scaling
height: 28 * scaling height: 28 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: modelData.state !== BluetoothDeviceState.Connecting visible: modelData.state !== BluetoothDeviceState.Connecting
color: Color.transparent color: Color.transparent
@ -363,7 +363,7 @@ NLoader {
return Color.mPrimary 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 opacity: canConnect || isBusy ? 1 : 0.5
// On device connect button // On device connect button
@ -378,7 +378,7 @@ NLoader {
return "Connect" return "Connect"
} }
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
color: { color: {
if (availableDeviceArea.containsMouse) { if (availableDeviceArea.containsMouse) {
@ -409,7 +409,7 @@ NLoader {
// Fallback if nothing available // Fallback if nothing available
Column { Column {
width: parent.width width: parent.width
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
visible: { visible: {
if (!BluetoothService.adapter || !BluetoothService.adapter.discovering || !Bluetooth.devices) if (!BluetoothService.adapter || !BluetoothService.adapter.discovering || !Bluetooth.devices)
return false return false
@ -425,7 +425,7 @@ NLoader {
Row { Row {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "sync" text: "sync"
@ -444,7 +444,7 @@ NLoader {
NText { NText {
text: "Scanning for devices..." text: "Scanning for devices..."
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurface color: Color.mOnSurface
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -453,7 +453,7 @@ NLoader {
NText { NText {
text: "Make sure your device is in pairing mode" text: "Make sure your device is in pairing mode"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
} }
@ -461,7 +461,7 @@ NLoader {
NText { NText {
text: "No devices found. Put your device in pairing mode and click Start Scanning." 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 color: Color.mOnSurfaceVariant
visible: { visible: {
if (!BluetoothService.adapter || !Bluetooth.devices) if (!BluetoothService.adapter || !Bluetooth.devices)

18
Modules/Bar/MediaMini.qml
View file

@ -9,7 +9,7 @@ import qs.Widgets
Row { Row {
id: root id: root
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
visible: Settings.data.bar.showMedia && (MediaService.canPlay || MediaService.canPause) visible: Settings.data.bar.showMedia && (MediaService.canPlay || MediaService.canPause)
function getTitle() { function getTitle() {
@ -26,32 +26,32 @@ Row {
Rectangle { Rectangle {
// Let the Rectangle size itself based on its content (the Row) // 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) height: Math.round(Style.barHeight * 0.75 * scaling)
radius: Math.round(Style.radiusMedium * scaling) radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutline 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 anchors.verticalCenter: parent.verticalCenter
Item { Item {
id: mainContainer id: mainContainer
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
Row { Row {
id: row id: row
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
// Window icon // Window icon
NIcon { NIcon {
id: windowIcon id: windowIcon
text: MediaService.isPlaying ? "pause" : "play_arrow" text: MediaService.isPlaying ? "pause" : "play_arrow"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: getTitle() !== "" visible: getTitle() !== ""
@ -66,7 +66,7 @@ Row {
400 * scaling) : Math.min(fullTitleMetrics.contentWidth, 400 * scaling) : Math.min(fullTitleMetrics.contentWidth,
150 * scaling) 150 * scaling)
text: getTitle() text: getTitle()
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
elide: Text.ElideRight elide: Text.ElideRight
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

26
Modules/Bar/SystemMonitor.qml
View file

@ -7,34 +7,34 @@ import qs.Widgets
Row { Row {
id: root id: root
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
visible: (Settings.data.bar.showSystemInfo) visible: (Settings.data.bar.showSystemInfo)
Rectangle { Rectangle {
// Let the Rectangle size itself based on its content (the Row) // 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) height: Math.round(Style.barHeight * 0.75 * scaling)
radius: Math.round(Style.radiusMedium * scaling) radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutline 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 anchors.verticalCenter: parent.verticalCenter
Item { Item {
id: mainContainer id: mainContainer
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
Row { Row {
id: row id: row
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Row { Row {
id: cpuUsageLayout id: cpuUsageLayout
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
NIcon { NIcon {
id: cpuUsageIcon id: cpuUsageIcon
@ -45,7 +45,7 @@ Row {
NText { NText {
id: cpuUsageText id: cpuUsageText
text: `${SystemStatService.cpuUsage}%` text: `${SystemStatService.cpuUsage}%`
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -57,7 +57,7 @@ Row {
Row { Row {
id: cpuTempLayout id: cpuTempLayout
// spacing is thin here to compensate for the vertical thermometer icon // spacing is thin here to compensate for the vertical thermometer icon
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NIcon { NIcon {
text: "thermometer" text: "thermometer"
@ -66,7 +66,7 @@ Row {
NText { NText {
text: `${SystemStatService.cpuTemp}°C` text: `${SystemStatService.cpuTemp}°C`
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
@ -77,7 +77,7 @@ Row {
// Memory Usage Component // Memory Usage Component
Row { Row {
id: memoryUsageLayout id: memoryUsageLayout
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
NIcon { NIcon {
text: "memory" text: "memory"
@ -86,7 +86,7 @@ Row {
NText { NText {
text: `${SystemStatService.memoryUsageGb}G` text: `${SystemStatService.memoryUsageGb}G`
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter

6
Modules/Bar/Tray.qml
View file

@ -19,7 +19,7 @@ Item {
Row { Row {
id: tray id: tray
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Repeater { Repeater {
@ -33,8 +33,8 @@ Item {
IconImage { IconImage {
id: trayIcon id: trayIcon
anchors.centerIn: parent anchors.centerIn: parent
width: Style.marginLarge * scaling width: Style.marginL * scaling
height: Style.marginLarge * scaling height: Style.marginL * scaling
smooth: false smooth: false
asynchronous: true asynchronous: true
backer.fillMode: Image.PreserveAspectFit backer.fillMode: Image.PreserveAspectFit

30
Modules/Bar/TrayMenu.qml
View file

@ -18,7 +18,7 @@ PopupWindow {
implicitWidth: 200 * scaling implicitWidth: 200 * scaling
// Use the content height of the Flickable for implicit height // 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 visible: false
color: Color.transparent color: Color.transparent
anchor.item: anchorItem anchor.item: anchorItem
@ -85,14 +85,14 @@ PopupWindow {
anchors.fill: parent anchors.fill: parent
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
} }
Flickable { Flickable {
id: flickable id: flickable
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
contentHeight: columnLayout.implicitHeight contentHeight: columnLayout.implicitHeight
interactive: true interactive: true
clip: true clip: true
@ -116,8 +116,8 @@ PopupWindow {
return 8 * scaling return 8 * scaling
} else { } else {
// Calculate based on text content // Calculate based on text content
const textHeight = text.contentHeight || (Style.fontSizeReduced * scaling * 1.2) const textHeight = text.contentHeight || (Style.fontSizeS * scaling * 1.2)
return Math.max(28 * scaling, textHeight + (Style.marginSmall * 2 * scaling)) return Math.max(28 * scaling, textHeight + (Style.marginS * 2 * scaling))
} }
} }
@ -126,21 +126,21 @@ PopupWindow {
NDivider { NDivider {
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - (Style.marginMedium * scaling * 2) width: parent.width - (Style.marginM * scaling * 2)
visible: modelData?.isSeparator ?? false visible: modelData?.isSeparator ?? false
} }
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent color: mouseArea.containsMouse ? Color.mTertiary : Color.transparent
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
visible: !(modelData?.isSeparator ?? false) visible: !(modelData?.isSeparator ?? false)
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NText { NText {
id: text id: text
@ -148,14 +148,14 @@ PopupWindow {
color: (modelData?.enabled color: (modelData?.enabled
?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOutline ?? true) ? (mouseArea.containsMouse ? Color.mOnTertiary : Color.mOnSurface) : Color.mOutline
text: modelData?.text ?? "" text: modelData?.text ?? ""
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
Image { Image {
Layout.preferredWidth: Style.marginLarge * scaling Layout.preferredWidth: Style.marginL * scaling
Layout.preferredHeight: Style.marginLarge * scaling Layout.preferredHeight: Style.marginL * scaling
source: modelData?.icon ?? "" source: modelData?.icon ?? ""
visible: (modelData?.icon ?? "") !== "" visible: (modelData?.icon ?? "") !== ""
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
@ -163,7 +163,7 @@ PopupWindow {
NIcon { NIcon {
text: modelData?.hasChildren ? "menu" : "" text: modelData?.hasChildren ? "menu" : ""
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
visible: modelData?.hasChildren ?? false visible: modelData?.hasChildren ?? false
color: Color.mOnSurface color: Color.mOnSurface

64
Modules/Bar/WiFiMenu.qml
View file

@ -83,15 +83,15 @@ NLoader {
Rectangle { Rectangle {
id: wifiMenuRect id: wifiMenuRect
color: Color.mSurface color: Color.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
width: 340 * scaling width: 340 * scaling
height: 500 * scaling height: 500 * scaling
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: Style.marginTiny * scaling anchors.topMargin: Style.marginXS * scaling
anchors.rightMargin: Style.marginTiny * scaling anchors.rightMargin: Style.marginXS * scaling
// Animation properties // Animation properties
property real scaleValue: 0.8 property real scaleValue: 0.8
@ -123,22 +123,22 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "wifi" text: "wifi"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mPrimary color: Color.mPrimary
} }
NText { NText {
text: "WiFi" text: "WiFi"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.bold: true font.bold: true
color: Color.mOnSurface color: Color.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
@ -174,7 +174,7 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
visible: Settings.data.network.wifiEnabled && NetworkService.isLoading visible: Settings.data.network.wifiEnabled && NetworkService.isLoading
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NBusyIndicator { NBusyIndicator {
running: NetworkService.isLoading running: NetworkService.isLoading
@ -195,18 +195,18 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
visible: !Settings.data.network.wifiEnabled visible: !Settings.data.network.wifiEnabled
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "wifi_off" text: "wifi_off"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
text: "WiFi is disabled" text: "WiFi is disabled"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -225,7 +225,7 @@ NLoader {
anchors.fill: parent anchors.fill: parent
visible: Settings.data.network.wifiEnabled && !NetworkService.isLoading visible: Settings.data.network.wifiEnabled && !NetworkService.isLoading
model: Object.values(NetworkService.networks) model: Object.values(NetworkService.networks)
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
clip: true clip: true
delegate: Item { delegate: Item {
@ -240,23 +240,23 @@ NLoader {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.baseWidgetSize * 1.5 * scaling 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) color: modelData.connected ? Color.mPrimary : (networkMouseArea.containsMouse ? Color.mTertiary : Color.transparent)
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NIcon { NIcon {
text: NetworkService.signalIcon(modelData.signal) 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) color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
} }
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
// SSID // SSID
NText { NText {
@ -270,7 +270,7 @@ NLoader {
// Security Protocol // Security Protocol
NText { NText {
text: modelData.security && modelData.security !== "--" ? modelData.security : "Open" text: modelData.security && modelData.security !== "--" ? modelData.security : "Open"
font.pointSize: Style.fontSizeTiny * scaling font.pointSize: Style.fontSizeXS * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface) color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
@ -281,7 +281,7 @@ NLoader {
&& NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0 && NetworkService.connectStatus === "error" && NetworkService.connectError.length > 0
text: NetworkService.connectError text: NetworkService.connectError
color: Color.mError color: Color.mError
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -306,7 +306,7 @@ NLoader {
NText { NText {
visible: modelData.connected visible: modelData.connected
text: "connected" text: "connected"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface) color: modelData.connected ? Color.mSurface : (networkMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface)
} }
} }
@ -337,15 +337,15 @@ NLoader {
id: passwordPromptSection id: passwordPromptSection
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0 Layout.preferredHeight: modelData.ssid === passwordPromptSsid && showPasswordPrompt ? 60 : 0
Layout.margins: Style.marginSmall * scaling Layout.margins: Style.marginS * scaling
visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt visible: modelData.ssid === passwordPromptSsid && showPasswordPrompt
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
@ -353,17 +353,17 @@ NLoader {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
radius: Style.radiusTiny * scaling radius: Style.radiusXS * scaling
color: Color.transparent color: Color.transparent
border.color: passwordInputField.activeFocus ? Color.mPrimary : Color.mOutline 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 { TextInput {
id: passwordInputField id: passwordInputField
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
text: passwordInput text: passwordInput
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
color: Color.mOnSurface color: Color.mOnSurface
verticalAlignment: TextInput.AlignVCenter verticalAlignment: TextInput.AlignVCenter
clip: true clip: true
@ -390,7 +390,7 @@ NLoader {
Rectangle { Rectangle {
Layout.preferredWidth: Style.baseWidgetSize * 2.5 * scaling Layout.preferredWidth: Style.baseWidgetSize * 2.5 * scaling
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mPrimary color: Color.mPrimary
Behavior on color { Behavior on color {
@ -403,7 +403,7 @@ NLoader {
anchors.centerIn: parent anchors.centerIn: parent
text: "Connect" text: "Connect"
color: Color.mSurface color: Color.mSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
} }
MouseArea { MouseArea {

6
Modules/Bar/Workspace.qml
View file

@ -114,13 +114,13 @@ Item {
Rectangle { Rectangle {
id: workspaceBackground id: workspaceBackground
width: parent.width - Style.marginSmall * scaling * 2 width: parent.width - Style.marginS * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling) height: Math.round(Style.barHeight * 0.75 * scaling)
radius: Math.round(Style.radiusMedium * scaling) radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutline 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.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

38
Modules/Calendar/Calendar.qml
View file

@ -63,15 +63,15 @@ NLoader {
Rectangle { Rectangle {
id: calendarRect id: calendarRect
color: Color.mSurface color: Color.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
width: 340 * scaling width: 340 * scaling
height: 320 * scaling // Reduced height to eliminate bottom space height: 320 * scaling // Reduced height to eliminate bottom space
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: Style.marginTiny * scaling anchors.topMargin: Style.marginXS * scaling
anchors.rightMargin: Style.marginTiny * scaling anchors.rightMargin: Style.marginXS * scaling
// Animation properties // Animation properties
property real scaleValue: 0.8 property real scaleValue: 0.8
@ -109,15 +109,15 @@ NLoader {
// Main Column // Main Column
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
// Header: Month/Year with navigation // Header: Month/Year with navigation
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.marginMedium * scaling Layout.leftMargin: Style.marginM * scaling
Layout.rightMargin: Style.marginMedium * scaling Layout.rightMargin: Style.marginM * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NIconButton { NIconButton {
icon: "chevron_left" icon: "chevron_left"
@ -133,7 +133,7 @@ NLoader {
text: grid.title text: grid.title
Layout.fillWidth: true Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mPrimary color: Color.mPrimary
} }
@ -152,15 +152,15 @@ NLoader {
// Divider between header and weekdays // Divider between header and weekdays
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
Layout.bottomMargin: Style.marginMedium * scaling Layout.bottomMargin: Style.marginM * scaling
} }
// Columns label (respects locale's first day of week) // Columns label (respects locale's first day of week)
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: Style.marginSmall * scaling // Align with grid Layout.leftMargin: Style.marginS * scaling // Align with grid
Layout.rightMargin: Style.marginSmall * scaling Layout.rightMargin: Style.marginS * scaling
spacing: 0 spacing: 0
Repeater { Repeater {
@ -174,7 +174,7 @@ NLoader {
return Qt.locale().dayName(dayIndex, Locale.ShortFormat) return Qt.locale().dayName(dayIndex, Locale.ShortFormat)
} }
color: Color.mSecondary color: Color.mSecondary
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
Layout.fillWidth: true Layout.fillWidth: true
@ -189,8 +189,8 @@ NLoader {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true // Take remaining space Layout.fillHeight: true // Take remaining space
Layout.leftMargin: Style.marginSmall * scaling Layout.leftMargin: Style.marginS * scaling
Layout.rightMargin: Style.marginSmall * scaling Layout.rightMargin: Style.marginS * scaling
spacing: 0 spacing: 0
month: Time.date.getMonth() month: Time.date.getMonth()
year: Time.date.getFullYear() year: Time.date.getFullYear()
@ -210,7 +210,7 @@ NLoader {
delegate: Rectangle { delegate: Rectangle {
width: (Style.baseWidgetSize * scaling) width: (Style.baseWidgetSize * scaling)
height: (Style.baseWidgetSize * scaling) height: (Style.baseWidgetSize * scaling)
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: model.today ? Color.mPrimary : Color.transparent color: model.today ? Color.mPrimary : Color.transparent
NText { NText {
@ -218,7 +218,7 @@ NLoader {
text: model.day text: model.day
color: model.today ? Color.mOnPrimary : Color.mOnSurface color: model.today ? Color.mOnPrimary : Color.mOnSurface
opacity: model.month === grid.month ? Style.opacityHeavy : Style.opacityLight 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 font.weight: model.today ? Style.fontWeightBold : Style.fontWeightRegular
} }

26
Modules/DemoPanel/DemoPanel.qml
View file

@ -68,9 +68,9 @@ NLoader {
Rectangle { Rectangle {
id: bgRect id: bgRect
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
width: 500 * scaling width: 500 * scaling
height: 900 * scaling height: 900 * scaling
anchors.centerIn: parent anchors.centerIn: parent
@ -115,18 +115,18 @@ NLoader {
NText { NText {
text: "DemoPanel" text: "DemoPanel"
color: Color.mPrimary color: Color.mPrimary
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// NSlider // NSlider
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
NText { NText {
text: "Scaling" text: "Scaling"
color: Color.mSecondary color: Color.mSecondary
@ -137,7 +137,7 @@ NLoader {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
RowLayout { RowLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NSlider { NSlider {
id: scaleSlider id: scaleSlider
from: 0.6 from: 0.6
@ -156,7 +156,7 @@ NLoader {
NIconButton { NIconButton {
icon: "refresh" icon: "refresh"
tooltipText: "Reset Scaling" tooltipText: "Reset Scaling"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeL * scaling
onClicked: { onClicked: {
ScalingService.overrideEnabled = false ScalingService.overrideEnabled = false
ScalingService.overrideScale = 1.0 ScalingService.overrideScale = 1.0
@ -170,7 +170,7 @@ NLoader {
// NIconButton // NIconButton
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
NText { NText {
text: "NIconButton" text: "NIconButton"
color: Color.mSecondary color: Color.mSecondary
@ -181,7 +181,7 @@ NLoader {
id: myIconButton id: myIconButton
icon: "celebration" icon: "celebration"
tooltipText: "A nice tooltip" tooltipText: "A nice tooltip"
fontPointSize: Style.fontSizeLarge * scaling fontPointSize: Style.fontSizeL * scaling
} }
NDivider { NDivider {
@ -191,7 +191,7 @@ NLoader {
// NToggle // NToggle
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "NToggle" text: "NToggle"
color: Color.mSecondary color: Color.mSecondary
@ -213,7 +213,7 @@ NLoader {
// NComboBox // NComboBox
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "NComboBox" text: "NComboBox"
color: Color.mSecondary color: Color.mSecondary
@ -266,7 +266,7 @@ NLoader {
// NTextInput // NTextInput
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "NTextInput" text: "NTextInput"
color: Color.mSecondary color: Color.mSecondary
@ -289,7 +289,7 @@ NLoader {
// NBusyIndicator // NBusyIndicator
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "NBusyIndicator" text: "NBusyIndicator"
color: Color.mSecondary color: Color.mSecondary

12
Modules/Dock/Dock.qml
View file

@ -118,8 +118,8 @@ NLoader {
color: Color.mSurface color: Color.mSurface
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
topLeftRadius: Style.radiusLarge * scaling topLeftRadius: Style.radiusL * scaling
topRightRadius: Style.radiusLarge * scaling topRightRadius: Style.radiusL * scaling
MouseArea { MouseArea {
id: dockMouseArea id: dockMouseArea
@ -171,7 +171,7 @@ NLoader {
Row { Row {
id: runningAppsRow id: runningAppsRow
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
height: parent.height height: parent.height
anchors.centerIn: parent anchors.centerIn: parent
@ -183,7 +183,7 @@ NLoader {
width: iconSize * scaling width: iconSize * scaling
height: iconSize * scaling height: iconSize * scaling
color: Color.transparent color: Color.transparent
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData property bool isActive: ToplevelManager.activeToplevel && ToplevelManager.activeToplevel === modelData
property bool hovered: appMouseArea.containsMouse property bool hovered: appMouseArea.containsMouse
@ -292,10 +292,10 @@ NLoader {
width: iconSize * 0.75 width: iconSize * 0.75
height: 4 * scaling height: 4 * scaling
color: Color.mPrimary color: Color.mPrimary
radius: Style.radiusTiny radius: Style.radiusXS
anchors.top: parent.bottom anchors.top: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: Style.marginTiniest * scaling anchors.topMargin: Style.marginXXS * scaling
} }
} }
} }

90
Modules/LockScreen/LockScreen.qml
View file

@ -38,7 +38,6 @@ NLoader {
property string password: "" property string password: ""
property bool pamAvailable: typeof PamContext !== "undefined" property bool pamAvailable: typeof PamContext !== "undefined"
function unlockAttempt() { function unlockAttempt() {
Logger.log("LockScreen", "Unlock attempt started") Logger.log("LockScreen", "Unlock attempt started")
@ -233,14 +232,14 @@ NLoader {
// Time display - Large and prominent with pulse animation // Time display - Large and prominent with pulse animation
Column { Column {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
Text { Text {
id: timeText id: timeText
text: Qt.formatDateTime(new Date(), "HH:mm") text: Qt.formatDateTime(new Date(), "HH:mm")
font.family: "Inter" font.family: "Inter"
font.pointSize: Style.fontSizeXXL * 6 font.pointSize: Style.fontSizeXXXL * 6
font.weight: Font.Bold font.weight: Font.Bold
font.letterSpacing: -2 font.letterSpacing: -2
color: Color.mOnSurface color: Color.mOnSurface
@ -265,7 +264,7 @@ NLoader {
id: dateText id: dateText
text: Qt.formatDateTime(new Date(), "dddd, MMMM d") text: Qt.formatDateTime(new Date(), "dddd, MMMM d")
font.family: "Inter" font.family: "Inter"
font.pointSize: Style.fontSizeXL font.pointSize: Style.fontSizeXXL
font.weight: Font.Light font.weight: Font.Light
color: Color.mOnSurface color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -275,7 +274,7 @@ NLoader {
// User section with animated avatar // User section with animated avatar
Column { Column {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
// Animated avatar with glow effect // Animated avatar with glow effect
@ -285,7 +284,7 @@ NLoader {
radius: width * 0.5 radius: width * 0.5
color: Color.transparent color: Color.transparent
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderThick * scaling) border.width: Math.max(1, Style.borderL * scaling)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
// Glow effect // Glow effect
@ -296,7 +295,7 @@ NLoader {
radius: width * 0.5 radius: width * 0.5
color: Color.transparent color: Color.transparent
border.color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3) border.color: Qt.rgba(Color.mPrimary.r, Color.mPrimary.g, Color.mPrimary.b, 0.3)
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
z: -1 z: -1
SequentialAnimation on scale { SequentialAnimation on scale {
@ -362,10 +361,10 @@ NLoader {
Rectangle { Rectangle {
id: terminalBackground id: terminalBackground
anchors.fill: parent anchors.fill: parent
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.applyOpacity(Color.mSurface, "E6") color: Color.applyOpacity(Color.mSurface, "E6")
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
// Scanline effect // Scanline effect
Repeater { Repeater {
@ -396,31 +395,31 @@ NLoader {
width: parent.width width: parent.width
height: 40 * scaling height: 40 * scaling
color: Color.applyOpacity(Color.mPrimary, "33") color: Color.applyOpacity(Color.mPrimary, "33")
topLeftRadius: Style.radiusSmall * scaling topLeftRadius: Style.radiusS * scaling
topRightRadius: Style.radiusSmall * scaling topRightRadius: Style.radiusS * scaling
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Text { Text {
text: "SECURE TERMINAL" text: "SECURE TERMINAL"
color: Color.mOnSurface color: Color.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
font.weight: Font.Bold font.weight: Font.Bold
Layout.fillWidth: true Layout.fillWidth: true
} }
// Battery indicator // Battery indicator
Row { Row {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
visible: batteryIndicator.batteryVisible visible: batteryIndicator.batteryVisible
NIcon { NIcon {
text: batteryIndicator.getIcon() text: batteryIndicator.getIcon()
font.pointSize: Style.fontSizeMedium font.pointSize: Style.fontSizeM
color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface color: batteryIndicator.charging ? Color.mPrimary : Color.mOnSurface
} }
@ -428,7 +427,7 @@ NLoader {
text: Math.round(batteryIndicator.percent) + "%" text: Math.round(batteryIndicator.percent) + "%"
color: Color.mOnSurface color: Color.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeMedium font.pointSize: Style.fontSizeM
font.weight: Font.Bold font.weight: Font.Bold
} }
} }
@ -442,19 +441,19 @@ NLoader {
anchors.right: parent.right anchors.right: parent.right
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.topMargin: 70 * scaling anchors.topMargin: 70 * scaling
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// Welcome back typing effect // Welcome back typing effect
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Text { Text {
text: "root@noctalia:~$" text: "root@noctalia:~$"
color: Color.mPrimary color: Color.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
font.weight: Font.Bold font.weight: Font.Bold
} }
@ -463,7 +462,7 @@ NLoader {
text: "" text: ""
color: Color.mOnSurface color: Color.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
property int currentIndex: 0 property int currentIndex: 0
property string fullText: "Welcome back, " + Quickshell.env("USER") + "!" property string fullText: "Welcome back, " + Quickshell.env("USER") + "!"
@ -486,13 +485,13 @@ NLoader {
// Command line with integrated password input // Command line with integrated password input
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Text { Text {
text: "root@noctalia:~$" text: "root@noctalia:~$"
color: Color.mPrimary color: Color.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
font.weight: Font.Bold font.weight: Font.Bold
} }
@ -500,7 +499,7 @@ NLoader {
text: "sudo unlock-session" text: "sudo unlock-session"
color: Color.mOnSurface color: Color.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
} }
// Integrated password input (invisible, just for functionality) // Integrated password input (invisible, just for functionality)
@ -510,7 +509,7 @@ NLoader {
height: 0 height: 0
visible: false visible: false
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
color: Color.mOnSurface color: Color.mOnSurface
echoMode: TextInput.Password echoMode: TextInput.Password
passwordCharacter: "*" passwordCharacter: "*"
@ -540,7 +539,7 @@ NLoader {
text: "*".repeat(passwordInput.text.length) text: "*".repeat(passwordInput.text.length)
color: Color.mOnSurface color: Color.mOnSurface
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
visible: passwordInput.activeFocus visible: passwordInput.activeFocus
// Typing effect animation // Typing effect animation
@ -567,7 +566,7 @@ NLoader {
height: 20 * scaling height: 20 * scaling
color: Color.mPrimary color: Color.mPrimary
visible: passwordInput.activeFocus visible: passwordInput.activeFocus
Layout.leftMargin: -Style.marginSmall * scaling Layout.leftMargin: -Style.marginS * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
SequentialAnimation on opacity { SequentialAnimation on opacity {
@ -589,7 +588,7 @@ NLoader {
text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "") text: lock.authenticating ? "Authenticating..." : (lock.errorMessage !== "" ? "Authentication failed." : "")
color: lock.authenticating ? Color.mPrimary : (lock.errorMessage !== "" ? Color.mError : Color.transparent) color: lock.authenticating ? Color.mPrimary : (lock.errorMessage !== "" ? Color.mError : Color.transparent)
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeLarge font.pointSize: Style.fontSizeL
Layout.fillWidth: true Layout.fillWidth: true
SequentialAnimation on opacity { SequentialAnimation on opacity {
@ -610,10 +609,10 @@ NLoader {
Rectangle { Rectangle {
width: 120 * scaling width: 120 * scaling
height: 40 * scaling height: 40 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: executeButtonArea.containsMouse ? Color.mPrimary : Color.applyOpacity(Color.mPrimary, "33") color: executeButtonArea.containsMouse ? Color.mPrimary : Color.applyOpacity(Color.mPrimary, "33")
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
enabled: !lock.authenticating enabled: !lock.authenticating
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
Layout.bottomMargin: -12 * scaling Layout.bottomMargin: -12 * scaling
@ -623,7 +622,7 @@ NLoader {
text: lock.authenticating ? "EXECUTING" : "EXECUTE" text: lock.authenticating ? "EXECUTING" : "EXECUTE"
color: executeButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary color: executeButtonArea.containsMouse ? Color.mOnPrimary : Color.mPrimary
font.family: "DejaVu Sans Mono" font.family: "DejaVu Sans Mono"
font.pointSize: Style.fontSizeMedium font.pointSize: Style.fontSizeM
font.weight: Font.Bold font.weight: Font.Bold
} }
@ -676,7 +675,7 @@ NLoader {
radius: parent.radius radius: parent.radius
color: Color.transparent color: Color.transparent
border.color: Color.applyOpacity(Color.mPrimary, "4D") border.color: Color.applyOpacity(Color.mPrimary, "4D")
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
z: -1 z: -1
SequentialAnimation on opacity { SequentialAnimation on opacity {
@ -710,11 +709,11 @@ NLoader {
Rectangle { Rectangle {
width: 64 * scaling width: 64 * scaling
height: 64 * scaling height: 64 * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError, color: shutdownArea.containsMouse ? Color.applyOpacity(Color.mError,
"DD") : Color.applyOpacity(Color.mError, "22") "DD") : Color.applyOpacity(Color.mError, "22")
border.color: Color.mError border.color: Color.mError
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
// Glow effect // Glow effect
Rectangle { Rectangle {
@ -740,14 +739,14 @@ NLoader {
hoverEnabled: true hoverEnabled: true
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onClicked: { onClicked: {
Qt.createQmlObject('import Quickshell.Io; Process { command: ["shutdown", "-h", "now"]; running: true }', Qt.createQmlObject(
lock) 'import Quickshell.Io; Process { command: ["shutdown", "-h", "now"]; running: true }', lock)
} }
} }
NIcon { NIcon {
text: "power_settings_new" text: "power_settings_new"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: shutdownArea.containsMouse ? Color.mOnPrimary : Color.mError color: shutdownArea.containsMouse ? Color.mOnPrimary : Color.mError
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -765,11 +764,11 @@ NLoader {
Rectangle { Rectangle {
width: 64 * scaling width: 64 * scaling
height: 64 * scaling height: 64 * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary, color: rebootArea.containsMouse ? Color.applyOpacity(Color.mPrimary,
"DD") : Color.applyOpacity(Color.mPrimary, "22") "DD") : Color.applyOpacity(Color.mPrimary, "22")
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
// Glow effect // Glow effect
Rectangle { Rectangle {
@ -801,7 +800,7 @@ NLoader {
NIcon { NIcon {
text: "refresh" text: "refresh"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: rebootArea.containsMouse ? Color.mOnPrimary : Color.mPrimary color: rebootArea.containsMouse ? Color.mOnPrimary : Color.mPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -819,11 +818,11 @@ NLoader {
Rectangle { Rectangle {
width: 64 * scaling width: 64 * scaling
height: 64 * scaling height: 64 * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary, color: logoutArea.containsMouse ? Color.applyOpacity(Color.mSecondary,
"DD") : Color.applyOpacity(Color.mSecondary, "22") "DD") : Color.applyOpacity(Color.mSecondary, "22")
border.color: Color.mSecondary border.color: Color.mSecondary
border.width: Math.max(1, Style.borderMedium * scaling) border.width: Math.max(1, Style.borderM * scaling)
// Glow effect // Glow effect
Rectangle { Rectangle {
@ -857,7 +856,7 @@ NLoader {
NIcon { NIcon {
text: "exit_to_app" text: "exit_to_app"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: logoutArea.containsMouse ? Color.mOnPrimary : Color.mSecondary color: logoutArea.containsMouse ? Color.mOnPrimary : Color.mSecondary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -884,6 +883,5 @@ NLoader {
} }
} }
} }
} }
} }

30
Modules/Notification/Notification.qml
View file

@ -34,8 +34,8 @@ Variants {
anchors.top: true anchors.top: true
anchors.right: true anchors.right: true
margins.top: (Style.barHeight + Style.marginMedium) * scaling margins.top: (Style.barHeight + Style.marginM) * scaling
margins.right: Style.marginMedium * scaling margins.right: Style.marginM * scaling
implicitWidth: 360 * scaling implicitWidth: 360 * scaling
implicitHeight: Math.min(notificationStack.implicitHeight, (NotificationService.maxVisible * 120) * scaling) implicitHeight: Math.min(notificationStack.implicitHeight, (NotificationService.maxVisible * 120) * scaling)
WlrLayershell.layer: WlrLayer.Overlay WlrLayershell.layer: WlrLayer.Overlay
@ -59,7 +59,7 @@ Variants {
id: notificationStack id: notificationStack
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
width: 360 * scaling width: 360 * scaling
visible: true visible: true
@ -68,11 +68,11 @@ Variants {
model: notificationModel model: notificationModel
delegate: Rectangle { delegate: Rectangle {
width: 360 * scaling 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 clip: true
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
color: Color.mSurface color: Color.mSurface
// Animation properties // Animation properties
@ -134,20 +134,20 @@ Variants {
Column { Column {
id: contentColumn id: contentColumn
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
RowLayout { RowLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NText { NText {
text: (model.appName || model.desktopEntry) || "Unknown App" text: (model.appName || model.desktopEntry) || "Unknown App"
color: Color.mSecondary color: Color.mSecondary
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
} }
Rectangle { Rectangle {
width: 6 * scaling width: 6 * scaling
height: 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 color: (model.urgency === NotificationUrgency.Critical) ? Color.mError : (model.urgency === NotificationUrgency.Low) ? Color.mOnSurface : Color.mPrimary
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
} }
@ -157,13 +157,13 @@ Variants {
NText { NText {
text: NotificationService.formatTimestamp(model.timestamp) text: NotificationService.formatTimestamp(model.timestamp)
color: Color.mOnSurface color: Color.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
} }
} }
NText { NText {
text: model.summary || "No summary" text: model.summary || "No summary"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
@ -174,7 +174,7 @@ Variants {
NText { NText {
text: model.body || "" text: model.body || ""
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: 300 * scaling width: 300 * scaling
@ -190,7 +190,7 @@ Variants {
showBorder: false showBorder: false
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
onClicked: { onClicked: {
animateOut() animateOut()

42
Modules/Notification/NotificationHistoryPanel.qml
View file

@ -67,15 +67,15 @@ NLoader {
Rectangle { Rectangle {
id: notificationRect id: notificationRect
color: Color.mSurface color: Color.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
width: 400 * scaling width: 400 * scaling
height: 500 * scaling height: 500 * scaling
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: Style.marginTiny * scaling anchors.topMargin: Style.marginXS * scaling
anchors.rightMargin: Style.marginTiny * scaling anchors.rightMargin: Style.marginXS * scaling
clip: true clip: true
// Animation properties // Animation properties
@ -108,22 +108,22 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "notifications" text: "notifications"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mPrimary color: Color.mPrimary
} }
NText { NText {
text: "Notification History" text: "Notification History"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.bold: true font.bold: true
color: Color.mOnSurface color: Color.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
@ -156,18 +156,18 @@ NLoader {
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "notifications_off" text: "notifications_off"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
NText { NText {
text: "No notifications" text: "No notifications"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -186,7 +186,7 @@ NLoader {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
model: NotificationService.historyModel model: NotificationService.historyModel
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
clip: true clip: true
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
visible: NotificationService.historyModel.count > 0 visible: NotificationService.historyModel.count > 0
@ -194,26 +194,26 @@ NLoader {
delegate: Rectangle { delegate: Rectangle {
width: notificationList ? (notificationList.width - 20) : 380 * scaling width: notificationList ? (notificationList.width - 20) : 380 * scaling
height: Math.max(80, notificationContent.height + 30) height: Math.max(80, notificationContent.height + 30)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: notificationMouseArea.containsMouse ? Color.mPrimary : Color.mSurfaceVariant color: notificationMouseArea.containsMouse ? Color.mPrimary : Color.mSurfaceVariant
RowLayout { RowLayout {
anchors { anchors {
fill: parent fill: parent
margins: Style.marginMedium * scaling margins: Style.marginM * scaling
} }
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// Notification content // Notification content
Column { Column {
id: notificationContent id: notificationContent
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: (summary || "No summary").substring(0, 100) text: (summary || "No summary").substring(0, 100)
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Font.Medium font.weight: Font.Medium
color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
@ -224,7 +224,7 @@ NLoader {
NText { NText {
text: (body || "").substring(0, 150) text: (body || "").substring(0, 150)
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
wrapMode: Text.Wrap wrapMode: Text.Wrap
width: parent.width - 60 width: parent.width - 60
@ -234,7 +234,7 @@ NLoader {
NText { NText {
text: NotificationService.formatTimestamp(timestamp) text: NotificationService.formatTimestamp(timestamp)
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface color: notificationMouseArea.containsMouse ? Color.mSurface : Color.mOnSurface
} }
} }
@ -256,7 +256,7 @@ NLoader {
MouseArea { MouseArea {
id: notificationMouseArea id: notificationMouseArea
anchors.fill: parent anchors.fill: parent
anchors.rightMargin: Style.marginLarge * 3 * scaling anchors.rightMargin: Style.marginL * 3 * scaling
hoverEnabled: true hoverEnabled: true
// Remove the onClicked handler since we now have a dedicated delete button // Remove the onClicked handler since we now have a dedicated delete button
} }

40
Modules/SettingsPanel/SettingsPanel.qml
View file

@ -201,9 +201,9 @@ NLoader {
Rectangle { Rectangle {
id: bgRect id: bgRect
color: Color.mSurface color: Color.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
layer.enabled: true layer.enabled: true
width: Math.max(screen.width * 0.5, 1280) * scaling width: Math.max(screen.width * 0.5, 1280) * scaling
height: Math.max(screen.height * 0.5, 720) * scaling height: Math.max(screen.height * 0.5, 720) * scaling
@ -241,8 +241,8 @@ NLoader {
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Rectangle { Rectangle {
id: sidebar id: sidebar
@ -250,13 +250,13 @@ NLoader {
Layout.fillHeight: true Layout.fillHeight: true
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
Column { Column {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: Style.marginTiny * 1.5 * scaling spacing: Style.marginXS * 1.5 * scaling
Repeater { Repeater {
id: sections id: sections
@ -265,27 +265,27 @@ NLoader {
id: tabItem id: tabItem
width: parent.width width: parent.width
height: 32 * scaling height: 32 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mTertiary : Color.transparent) color: selected ? Color.mPrimary : (tabItem.hovering ? Color.mTertiary : Color.transparent)
readonly property bool selected: index === currentTabIndex readonly property bool selected: index === currentTabIndex
property bool hovering: false property bool hovering: false
property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface) property color tabTextColor: selected ? Color.mOnPrimary : (tabItem.hovering ? Color.mOnTertiary : Color.mOnSurface)
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Tab icon on the left side // Tab icon on the left side
NIcon { NIcon {
text: modelData.icon text: modelData.icon
color: tabTextColor color: tabTextColor
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
} }
// Tab label on the left side // Tab label on the left side
NText { NText {
text: modelData.label text: modelData.label
color: tabTextColor color: tabTextColor
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -309,27 +309,27 @@ NLoader {
id: contentPane id: contentPane
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
clip: true clip: true
ColumnLayout { ColumnLayout {
id: contentLayout id: contentLayout
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
RowLayout { RowLayout {
id: headerRow id: headerRow
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Tab label on the main right side // Tab label on the main right side
NText { NText {
text: panel.tabsModel[currentTabIndex].label text: panel.tabsModel[currentTabIndex].label
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mPrimary color: Color.mPrimary
Layout.fillWidth: true Layout.fillWidth: true

58
Modules/SettingsPanel/Tabs/AboutTab.qml
View file

@ -46,8 +46,8 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginLarge * scaling padding: Style.marginL * scaling
rightPadding: Style.marginMedium * scaling rightPadding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -58,26 +58,26 @@ ColumnLayout {
NText { NText {
text: "Noctalia: quiet by design" text: "Noctalia: quiet by design"
font.pointSize: Style.fontSizeXXL * scaling font.pointSize: Style.fontSizeXXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
NText { NText {
text: "It may just be another quickshell setup but it won't get in your way." 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 color: Color.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
GridLayout { GridLayout {
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
columns: 2 columns: 2
rowSpacing: Style.marginTiny * scaling rowSpacing: Style.marginXS * scaling
columnSpacing: Style.marginSmall * scaling columnSpacing: Style.marginS * scaling
NText { NText {
text: "Latest Version:" text: "Latest Version:"
@ -106,13 +106,13 @@ ColumnLayout {
Rectangle { Rectangle {
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
Layout.preferredWidth: updateText.implicitWidth + 46 * scaling Layout.preferredWidth: updateText.implicitWidth + 46 * scaling
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: updateArea.containsMouse ? Color.mPrimary : Color.transparent color: updateArea.containsMouse ? Color.mPrimary : Color.transparent
border.color: Color.mPrimary border.color: Color.mPrimary
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
visible: { visible: {
if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown") if (root.currentVersion === "Unknown" || root.latestVersion === "Unknown")
return false return false
@ -133,18 +133,18 @@ ColumnLayout {
RowLayout { RowLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NIcon { NIcon {
text: "system_update" text: "system_update"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
} }
NText { NText {
id: updateText id: updateText
text: "Download latest release" text: "Download latest release"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary color: updateArea.containsMouse ? Color.mSurface : Color.mPrimary
} }
} }
@ -163,24 +163,24 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
NText { NText {
text: `Shout-out to our ${root.contributors.length} awesome contributors!` text: `Shout-out to our ${root.contributors.length} awesome contributors!`
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.topMargin: Style.marginLarge * 2 Layout.topMargin: Style.marginL * 2
} }
ScrollView { ScrollView {
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 200 * Style.marginTiny * scaling Layout.preferredWidth: 200 * Style.marginXS * scaling
Layout.fillHeight: true Layout.fillHeight: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -196,15 +196,15 @@ ColumnLayout {
model: root.contributors model: root.contributors
delegate: Rectangle { delegate: Rectangle {
width: contributorsGrid.cellWidth - Style.marginLarge * scaling width: contributorsGrid.cellWidth - Style.marginL * scaling
height: contributorsGrid.cellHeight - Style.marginTiny * scaling height: contributorsGrid.cellHeight - Style.marginXS * scaling
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent color: contributorArea.containsMouse ? Color.mTertiary : Color.transparent
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Item { Item {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
@ -214,16 +214,16 @@ ColumnLayout {
NImageRounded { NImageRounded {
imagePath: modelData.avatar_url || "" imagePath: modelData.avatar_url || ""
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Color.mPrimary borderColor: Color.mPrimary
borderWidth: Math.max(1, Style.borderMedium * scaling) borderWidth: Math.max(1, Style.borderM * scaling)
imageRadius: width * 0.5 imageRadius: width * 0.5
} }
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true Layout.fillWidth: true
@ -238,7 +238,7 @@ ColumnLayout {
NText { NText {
text: (modelData.contributions || 0) + " " + ((modelData.contributions text: (modelData.contributions || 0) + " " + ((modelData.contributions
|| 0) === 1 ? "commit" : "commits") || 0) === 1 ? "commit" : "commits")
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface color: contributorArea.containsMouse ? Color.mSurface : Color.mOnSurface
} }
} }

60
Modules/SettingsPanel/Tabs/AudioTab.qml
View file

@ -26,7 +26,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -41,30 +41,30 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Audio" text: "Audio"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Volume Controls // Volume Controls
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
// Master Volume // Master Volume
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: "Master Volume" text: "Master Volume"
@ -74,7 +74,7 @@ ColumnLayout {
NText { NText {
text: "System-wide volume level." text: "System-wide volume level."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -109,7 +109,7 @@ ColumnLayout {
NText { NText {
text: Math.floor(AudioService.volume * 100) + "%" text: Math.floor(AudioService.volume * 100) + "%"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Style.marginSmall * scaling Layout.leftMargin: Style.marginS * scaling
color: Color.mOnSurface color: Color.mOnSurface
} }
} }
@ -117,9 +117,9 @@ ColumnLayout {
// Mute Toggle // Mute Toggle
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginMedium * scaling Layout.topMargin: Style.marginM * scaling
NToggle { NToggle {
label: "Mute Audio Output" label: "Mute Audio Output"
@ -136,21 +136,21 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// AudioService Devices // AudioService Devices
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Audio Devices" text: "Audio Devices"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// ------------------------------- // -------------------------------
@ -160,20 +160,20 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
NText { NText {
text: "Output Device" text: "Output Device"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Select the desired audio output device." text: "Select the desired audio output device."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -199,20 +199,20 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
NText { NText {
text: "Input Device" text: "Input Device"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Select desired audio input device." text: "Select desired audio input device."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -234,21 +234,21 @@ ColumnLayout {
// Divider // Divider
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginMedium * scaling Layout.bottomMargin: Style.marginM * scaling
} }
// AudioService Visualizer Category // AudioService Visualizer Category
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Audio Visualizer" text: "Audio Visualizer"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// AudioService Visualizer section // AudioService Visualizer section

14
Modules/SettingsPanel/Tabs/BarTab.qml
View file

@ -15,7 +15,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -30,12 +30,12 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Components" text: "Components"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -86,19 +86,19 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Background Opacity" text: "Background Opacity"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Adjust the background opacity of the bar" text: "Adjust the background opacity of the bar"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -118,7 +118,7 @@ ColumnLayout {
NText { NText {
text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%" text: Math.floor(Settings.data.bar.backgroundOpacity * 100) + "%"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Style.marginSmall * scaling Layout.leftMargin: Style.marginS * scaling
color: Color.mOnSurface color: Color.mOnSurface
} }
} }

56
Modules/SettingsPanel/Tabs/BrightnessTab.qml
View file

@ -23,13 +23,13 @@ Item {
ColumnLayout { ColumnLayout {
width: parent.width width: parent.width
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.margins: Style.marginLarge * scaling Layout.margins: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Brightness Settings" text: "Brightness Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -42,13 +42,13 @@ Item {
// Bar Visibility Section // Bar Visibility Section
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
NText { NText {
text: "Bar Integration" text: "Bar Integration"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -65,25 +65,25 @@ Item {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Brightness Step Section // Brightness Step Section
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Brightness Step Size" text: "Brightness Step Size"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Adjust the step size for brightness changes (scroll wheel, keyboard shortcuts)." 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 color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -91,7 +91,7 @@ Item {
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NSlider { NSlider {
Layout.fillWidth: true Layout.fillWidth: true
@ -110,7 +110,7 @@ Item {
text: Settings.data.brightness.brightnessStep + "%" text: Settings.data.brightness.brightnessStep + "%"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Color.mOnSurface color: Color.mOnSurface
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
} }
@ -118,25 +118,25 @@ Item {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Monitor Overview Section // Monitor Overview Section
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Monitor Brightness Overview" text: "Monitor Brightness Overview"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Current brightness levels for all detected monitors." text: "Current brightness levels for all detected monitors."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -147,25 +147,25 @@ Item {
model: BrightnessService.monitors model: BrightnessService.monitors
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline 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 implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
ColumnLayout { ColumnLayout {
id: contentCol id: contentCol
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: `${model.modelData.name} [${model.modelData.model}]` text: `${model.modelData.name} [${model.modelData.model}]`
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mSecondary color: Color.mSecondary
} }
@ -176,7 +176,7 @@ Item {
NText { NText {
text: model.method text: model.method
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight
} }
@ -184,11 +184,11 @@ Item {
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NText { NText {
text: "Brightness:" text: "Brightness:"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -208,7 +208,7 @@ Item {
NText { NText {
text: Math.round(model.brightness * 100) + "%" text: Math.round(model.brightness * 100) + "%"
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mPrimary color: Color.mPrimary
Layout.alignment: Qt.AlignRight Layout.alignment: Qt.AlignRight

36
Modules/SettingsPanel/Tabs/ColorSchemeTab.qml
View file

@ -89,7 +89,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -104,7 +104,7 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
// Use Matugen // Use Matugen
@ -156,17 +156,17 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Predefined Color Schemes" text: "Predefined Color Schemes"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
@ -174,7 +174,7 @@ ColumnLayout {
NText { 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." 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 color: Color.mOnSurface
Layout.fillWidth: true Layout.fillWidth: true
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -182,15 +182,15 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
// Color Schemes Grid // Color Schemes Grid
GridLayout { GridLayout {
columns: 4 columns: 4
rowSpacing: Style.marginLarge * scaling rowSpacing: Style.marginL * scaling
columnSpacing: Style.marginLarge * scaling columnSpacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
Repeater { Repeater {
@ -203,9 +203,9 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 120 * scaling Layout.preferredHeight: 120 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: getSchemeColor(modelData, "mSurface") 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 border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Color.mPrimary : Color.mOutline
scale: root.cardScaleLow scale: root.cardScaleLow
@ -234,7 +234,7 @@ ColumnLayout {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginXL * scaling anchors.margins: Style.marginXL * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Scheme name // Scheme name
NText { NText {
@ -243,7 +243,7 @@ ColumnLayout {
var chunks = schemePath.replace(".json", "").split("/") var chunks = schemePath.replace(".json", "").split("/")
return chunks[chunks.length - 1] return chunks[chunks.length - 1]
} }
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: getSchemeColor(modelData, "mOnSurface") color: getSchemeColor(modelData, "mOnSurface")
Layout.fillWidth: true Layout.fillWidth: true
@ -253,7 +253,7 @@ ColumnLayout {
// Color swatches // Color swatches
RowLayout { RowLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
@ -296,7 +296,7 @@ ColumnLayout {
visible: Settings.data.colorSchemes.predefinedScheme === schemePath visible: Settings.data.colorSchemes.predefinedScheme === schemePath
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
width: 24 * scaling width: 24 * scaling
height: 24 * scaling height: 24 * scaling
radius: width * 0.5 radius: width * 0.5
@ -305,7 +305,7 @@ ColumnLayout {
NText { NText {
anchors.centerIn: parent anchors.centerIn: parent
text: "✓" text: "✓"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnPrimary color: Color.mOnPrimary
} }

20
Modules/SettingsPanel/Tabs/DisplayTab.qml
View file

@ -37,13 +37,13 @@ Item {
ColumnLayout { ColumnLayout {
width: parent.width width: parent.width
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.margins: Style.marginLarge * scaling Layout.margins: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Per‑monitor configuration" text: "Per‑monitor configuration"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -58,33 +58,33 @@ Item {
model: Quickshell.screens || [] model: Quickshell.screens || []
delegate: Rectangle { delegate: Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline 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 implicitHeight: contentCol.implicitHeight + Style.marginXL * 2 * scaling
ColumnLayout { ColumnLayout {
id: contentCol id: contentCol
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: (modelData.name || "Unknown") text: (modelData.name || "Unknown")
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mSecondary color: Color.mSecondary
} }
NText { NText {
text: `Resolution: ${modelData.width}x${modelData.height} - Position: (${modelData.x}, ${modelData.y})` 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 color: Color.mOnSurface
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
NToggle { NToggle {
label: "Bar" label: "Bar"

32
Modules/SettingsPanel/Tabs/GeneralTab.qml
View file

@ -15,7 +15,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -30,25 +30,25 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "General Settings" text: "General Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
// Profile section // Profile section
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
// Avatar preview // Avatar preview
NImageRounded { NImageRounded {
@ -57,7 +57,7 @@ ColumnLayout {
imagePath: Settings.data.general.avatarImage imagePath: Settings.data.general.avatarImage
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Color.mPrimary borderColor: Color.mPrimary
borderWidth: Math.max(1, Style.borderMedium) borderWidth: Math.max(1, Style.borderM)
} }
NTextInput { NTextInput {
@ -76,20 +76,20 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "User Interface" text: "User Interface"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
NToggle { NToggle {
@ -120,19 +120,19 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Border radius" text: "Border radius"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: "Adjust the rounded border of all UI elements" text: "Adjust the rounded border of all UI elements"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -152,7 +152,7 @@ ColumnLayout {
NText { NText {
text: Math.floor(Settings.data.general.radiusRatio * 100) + "%" text: Math.floor(Settings.data.general.radiusRatio * 100) + "%"
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: Style.marginSmall * scaling Layout.leftMargin: Style.marginS * scaling
color: Color.mOnSurface color: Color.mOnSurface
} }
} }

6
Modules/SettingsPanel/Tabs/NetworkTab.qml
View file

@ -17,7 +17,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -32,12 +32,12 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Interfaces" text: "Interfaces"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }

36
Modules/SettingsPanel/Tabs/ScreenRecorderTab.qml
View file

@ -15,7 +15,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -30,22 +30,22 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Recording" text: "Recording"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Output Directory // Output Directory
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
NTextInput { NTextInput {
label: "Output Directory" label: "Output Directory"
@ -58,9 +58,9 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginMedium * scaling Layout.topMargin: Style.marginM * scaling
// Show Cursor // Show Cursor
NToggle { NToggle {
label: "Show Cursor" label: "Show Cursor"
@ -75,21 +75,21 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Video Settings // Video Settings
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Video Settings" text: "Video Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Frame Rate // Frame Rate
@ -203,21 +203,21 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Audio Settings // Audio Settings
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Audio Settings" text: "Audio Settings"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Audio Source // Audio Source

32
Modules/SettingsPanel/Tabs/TimeWeatherTab.qml
View file

@ -15,7 +15,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -30,22 +30,22 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Location" text: "Location"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Location section // Location section
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
NTextInput { NTextInput {
label: "Location name" label: "Location name"
@ -62,21 +62,21 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Time section // Time section
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Time Format" text: "Time Format"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
NToggle { NToggle {
@ -109,21 +109,21 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// Weather section // Weather section
ColumnLayout { ColumnLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Weather" text: "Weather"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
NToggle { NToggle {

52
Modules/SettingsPanel/Tabs/WallpaperSelectorTab.qml
View file

@ -24,14 +24,14 @@ Item {
ColumnLayout { ColumnLayout {
width: parent.width width: parent.width
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.margins: Style.marginLarge * scaling Layout.margins: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
// Current wallpaper display // Current wallpaper display
NText { NText {
text: "Current Wallpaper" text: "Current Wallpaper"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -39,28 +39,28 @@ Item {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 120 * scaling Layout.preferredHeight: 120 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
clip: true clip: true
NImageRounded { NImageRounded {
id: currentWallpaperImage id: currentWallpaperImage
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
imagePath: WallpaperService.currentWallpaper imagePath: WallpaperService.currentWallpaper
fallbackIcon: "image" fallbackIcon: "image"
borderColor: Color.mOutline borderColor: Color.mOutline
borderWidth: Math.max(1, Style.borderThin * scaling) borderWidth: Math.max(1, Style.borderS * scaling)
imageRadius: Style.radiusMedium * scaling imageRadius: Style.radiusM * scaling
} }
} }
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
RowLayout { RowLayout {
@ -72,7 +72,7 @@ Item {
// Wallpaper grid // Wallpaper grid
NText { NText {
text: "Wallpaper Selector" text: "Wallpaper Selector"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
@ -88,7 +88,7 @@ Item {
text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType text: Settings.data.wallpaper.swww.enabled ? "Wallpapers will change with " + Settings.data.wallpaper.swww.transitionType
+ " transition." : "Wallpapers will change instantly." + " transition." : "Wallpapers will change instantly."
color: Color.mOnSurface color: Color.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
visible: Settings.data.wallpaper.swww.enabled visible: Settings.data.wallpaper.swww.enabled
} }
} }
@ -123,15 +123,15 @@ Item {
property int columns: 5 property int columns: 5
property int itemSize: Math.floor( 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) 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 leftMargin: Style.marginS * scaling
rightMargin: Style.marginSmall * scaling rightMargin: Style.marginS * scaling
topMargin: Style.marginSmall * scaling topMargin: Style.marginS * scaling
bottomMargin: Style.marginSmall * scaling bottomMargin: Style.marginS * scaling
delegate: Rectangle { delegate: Rectangle {
id: wallpaperItem id: wallpaperItem
@ -157,25 +157,25 @@ Item {
anchors.fill: parent anchors.fill: parent
color: Color.transparent color: Color.transparent
border.color: isSelected ? Color.mPrimary : Color.mOutline 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 // Selection tick-mark
Rectangle { Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
width: 20 * scaling width: 20 * scaling
height: 20 * scaling height: 20 * scaling
radius: width / 2 radius: width / 2
color: Color.mPrimary color: Color.mPrimary
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
visible: isSelected visible: isSelected
NIcon { NIcon {
text: "check" text: "check"
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnPrimary color: Color.mOnPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -211,18 +211,18 @@ Item {
Rectangle { Rectangle {
anchors.fill: parent anchors.fill: parent
color: Color.mSurface color: Color.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutline 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 visible: WallpaperService.wallpaperList.length === 0 && !WallpaperService.scanning
ColumnLayout { ColumnLayout {
anchors.centerIn: parent anchors.centerIn: parent
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NIcon { NIcon {
text: "folder_open" text: "folder_open"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
color: Color.mOnSurface color: Color.mOnSurface
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }

44
Modules/SettingsPanel/Tabs/WallpaperTab.qml
View file

@ -15,7 +15,7 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
clip: true clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded ScrollBar.vertical.policy: ScrollBar.AsNeeded
@ -30,26 +30,26 @@ ColumnLayout {
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Directory" text: "Directory"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Wallpaper Settings Category // Wallpaper Settings Category
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
// Wallpaper Folder // Wallpaper Folder
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NTextInput { NTextInput {
@ -67,20 +67,20 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "Automation" text: "Automation"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Random Wallpaper // Random Wallpaper
@ -107,7 +107,7 @@ ColumnLayout {
NText { NText {
text: "How often to change wallpapers automatically (in seconds)." text: "How often to change wallpapers automatically (in seconds)."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -135,22 +135,22 @@ ColumnLayout {
NDivider { NDivider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * 2 * scaling Layout.topMargin: Style.marginL * 2 * scaling
Layout.bottomMargin: Style.marginLarge * scaling Layout.bottomMargin: Style.marginL * scaling
} }
// ------------------------------- // -------------------------------
// SWWW // SWWW
ColumnLayout { ColumnLayout {
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: "SWWW" text: "SWWW"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
Layout.bottomMargin: Style.marginSmall * scaling Layout.bottomMargin: Style.marginS * scaling
} }
// Use SWWW // Use SWWW
@ -165,9 +165,9 @@ ColumnLayout {
// SWWW Settings (only visible when useSWWW is enabled) // SWWW Settings (only visible when useSWWW is enabled)
ColumnLayout { ColumnLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: Style.marginSmall * scaling Layout.topMargin: Style.marginS * scaling
visible: Settings.data.wallpaper.swww.enabled visible: Settings.data.wallpaper.swww.enabled
// Resize Mode // Resize Mode
@ -280,7 +280,7 @@ ColumnLayout {
NText { NText {
text: "Frames per second for transition animations." text: "Frames per second for transition animations."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -319,7 +319,7 @@ ColumnLayout {
NText { NText {
text: "Duration of transition animations in seconds." text: "Duration of transition animations in seconds."
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true

58
Modules/SidePanel/Cards/MediaCard.qml
View file

@ -16,21 +16,21 @@ NBox {
// Let content dictate the height (no hardcoded height here) // Let content dictate the height (no hardcoded height here)
// Height can be overridden by parent layout (SidePanel binds it to stats card) // 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: { // Component.onCompleted: {
// Logger.logMediaService.trackArtUrl) // Logger.logMediaService.trackArtUrl)
// } // }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
Layout.fillHeight: true Layout.fillHeight: true
anchors.margins: Style.marginLarge * scaling anchors.margins: Style.marginL * scaling
// Fallback // Fallback
ColumnLayout { ColumnLayout {
id: fallback id: fallback
visible: !main.visible visible: !main.visible
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
@ -39,7 +39,7 @@ NBox {
NIcon { NIcon {
text: "album" text: "album"
font.pointSize: Style.fontSizeXXL * 2.5 * scaling font.pointSize: Style.fontSizeXXXL * 2.5 * scaling
color: Color.mPrimary color: Color.mPrimary
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
} }
@ -59,7 +59,7 @@ NBox {
id: main id: main
visible: MediaService.currentPlayer && MediaService.canPlay visible: MediaService.currentPlayer && MediaService.canPlay
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// Player selector // Player selector
ComboBox { ComboBox {
@ -77,16 +77,16 @@ NBox {
// implicitHeight: 30 * scaling // implicitHeight: 30 * scaling
color: Color.transparent color: Color.transparent
border.color: playerSelector.activeFocus ? Color.mTertiary : Color.mOutline border.color: playerSelector.activeFocus ? Color.mTertiary : Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
} }
contentItem: NText { contentItem: NText {
visible: false visible: false
leftPadding: Style.marginMedium * scaling leftPadding: Style.marginM * scaling
rightPadding: playerSelector.indicator.width + playerSelector.spacing rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText text: playerSelector.displayText
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -96,7 +96,7 @@ NBox {
x: playerSelector.width - width x: playerSelector.width - width
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2 y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mOnSurface color: Color.mOnSurface
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
} }
@ -106,8 +106,8 @@ NBox {
x: playerSelector.width * 0.5 x: playerSelector.width * 0.5
y: playerSelector.height * 0.75 y: playerSelector.height * 0.75
width: playerSelector.width * 0.5 width: playerSelector.width * 0.5
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling) implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginM * scaling)
padding: Style.marginSmall * scaling padding: Style.marginS * scaling
contentItem: ListView { contentItem: ListView {
clip: true clip: true
@ -120,8 +120,8 @@ NBox {
background: Rectangle { background: Rectangle {
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusTiny * scaling radius: Style.radiusXS * scaling
} }
} }
@ -129,7 +129,7 @@ NBox {
width: playerSelector.width width: playerSelector.width
contentItem: NText { contentItem: NText {
text: modelData.identity text: modelData.identity
font.pointSize: Style.fontSizeReduced * scaling font.pointSize: Style.fontSizeS * scaling
color: highlighted ? Color.mSurface : Color.mOnSurface color: highlighted ? Color.mSurface : Color.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
@ -137,9 +137,9 @@ NBox {
highlighted: playerSelector.highlightedIndex === index highlighted: playerSelector.highlightedIndex === index
background: Rectangle { background: Rectangle {
width: popup.width - Style.marginSmall * scaling * 2 width: popup.width - Style.marginS * scaling * 2
color: highlighted ? Color.mTertiary : Color.transparent color: highlighted ? Color.mTertiary : Color.transparent
radius: Style.radiusTiny * scaling radius: Style.radiusXS * scaling
} }
} }
@ -150,7 +150,7 @@ NBox {
} }
RowLayout { RowLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
// ------------------------- // -------------------------
// Rounded thumbnail image // Rounded thumbnail image
@ -161,7 +161,7 @@ NBox {
radius: width * 0.5 radius: width * 0.5
color: trackArt.visible ? Color.mPrimary : Color.transparent color: trackArt.visible ? Color.mPrimary : Color.transparent
border.color: trackArt.visible ? Color.mOutline : 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 clip: true
NImageRounded { NImageRounded {
@ -169,11 +169,11 @@ NBox {
visible: MediaService.trackArtUrl.toString() !== "" visible: MediaService.trackArtUrl.toString() !== ""
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginTiny * scaling anchors.margins: Style.marginXS * scaling
imagePath: MediaService.trackArtUrl imagePath: MediaService.trackArtUrl
fallbackIcon: "music_note" fallbackIcon: "music_note"
borderColor: Color.mOutline borderColor: Color.mOutline
borderWidth: Math.max(1, Style.borderThin * scaling) borderWidth: Math.max(1, Style.borderS * scaling)
imageRadius: width * 0.5 imageRadius: width * 0.5
} }
@ -181,7 +181,7 @@ NBox {
NIcon { NIcon {
text: "album" text: "album"
color: Color.mPrimary color: Color.mPrimary
font.pointSize: Style.fontSizeLarge * 12 * scaling font.pointSize: Style.fontSizeL * 12 * scaling
visible: !trackArt.visible visible: !trackArt.visible
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -191,12 +191,12 @@ NBox {
// Track metadata // Track metadata
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
NText { NText {
visible: MediaService.trackTitle !== "" visible: MediaService.trackTitle !== ""
text: MediaService.trackTitle text: MediaService.trackTitle
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
elide: Text.ElideRight elide: Text.ElideRight
wrapMode: Text.Wrap wrapMode: Text.Wrap
@ -208,7 +208,7 @@ NBox {
visible: MediaService.trackArtist !== "" visible: MediaService.trackArtist !== ""
text: MediaService.trackArtist text: MediaService.trackArtist
color: Color.mOnSurface color: Color.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -217,7 +217,7 @@ NBox {
visible: MediaService.trackAlbum !== "" visible: MediaService.trackAlbum !== ""
text: MediaService.trackAlbum text: MediaService.trackAlbum
color: Color.mOnSurface color: Color.mOnSurface
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
elide: Text.ElideRight elide: Text.ElideRight
Layout.fillWidth: true Layout.fillWidth: true
} }
@ -231,7 +231,7 @@ NBox {
visible: (MediaService.currentPlayer && MediaService.trackLength > 0) visible: (MediaService.currentPlayer && MediaService.trackLength > 0)
width: parent.width width: parent.width
height: 4 * scaling height: 4 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: Color.mSurface color: Color.mSurface
Layout.fillWidth: true Layout.fillWidth: true
@ -265,7 +265,7 @@ NBox {
radius: width * 0.5 radius: width * 0.5
color: Color.mPrimary color: Color.mPrimary
border.color: Color.mOutline 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)) x: Math.max(0, Math.min(parent.width - width, progressFill.width - width / 2))
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
scale: progressMouseArea.containsMouse || progressMouseArea.pressed ? 1.2 : 1.0 scale: progressMouseArea.containsMouse || progressMouseArea.pressed ? 1.2 : 1.0
@ -302,7 +302,7 @@ NBox {
// ------------------------- // -------------------------
// Media controls // Media controls
RowLayout { RowLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter

4
Modules/SidePanel/Cards/PowerProfilesCard.qml
View file

@ -11,7 +11,7 @@ import qs.Widgets
NBox { NBox {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 1 Layout.preferredWidth: 1
implicitHeight: powerRow.implicitHeight + Style.marginMedium * 2 * scaling implicitHeight: powerRow.implicitHeight + Style.marginM * 2 * scaling
// PowerProfiles service // PowerProfiles service
property var powerProfiles: PowerProfiles property var powerProfiles: PowerProfiles
@ -20,7 +20,7 @@ NBox {
RowLayout { RowLayout {
id: powerRow id: powerRow
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: sidePanel.cardSpacing spacing: sidePanel.cardSpacing
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true

12
Modules/SidePanel/Cards/ProfileCard.qml
View file

@ -18,15 +18,15 @@ NBox {
Layout.fillWidth: true Layout.fillWidth: true
// Height driven by content // Height driven by content
implicitHeight: content.implicitHeight + Style.marginMedium * 2 * scaling implicitHeight: content.implicitHeight + Style.marginM * 2 * scaling
RowLayout { RowLayout {
id: content id: content
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
NImageRounded { NImageRounded {
width: Style.baseWidgetSize * 1.25 * scaling width: Style.baseWidgetSize * 1.25 * scaling
@ -34,12 +34,12 @@ NBox {
imagePath: Settings.data.general.avatarImage imagePath: Settings.data.general.avatarImage
fallbackIcon: "person" fallbackIcon: "person"
borderColor: Color.mPrimary borderColor: Color.mPrimary
borderWidth: Math.max(1, Style.borderMedium * scaling) borderWidth: Math.max(1, Style.borderM * scaling)
} }
ColumnLayout { ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
NText { NText {
text: Quickshell.env("USER") || "user" text: Quickshell.env("USER") || "user"
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
@ -51,7 +51,7 @@ NBox {
} }
RowLayout { RowLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true

16
Modules/SidePanel/Cards/SystemMonitorCard.qml
View file

@ -9,22 +9,22 @@ NBox {
id: root id: root
Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling Layout.preferredWidth: Style.baseWidgetSize * 2.625 * scaling
implicitHeight: content.implicitHeight + Style.marginTiny * 2 * scaling implicitHeight: content.implicitHeight + Style.marginXS * 2 * scaling
Column { Column {
id: content id: content
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
anchors.rightMargin: Style.marginSmall * scaling anchors.rightMargin: Style.marginS * scaling
anchors.topMargin: Style.marginTiny * scaling anchors.topMargin: Style.marginXS * scaling
anchors.bottomMargin: Style.marginMedium * scaling anchors.bottomMargin: Style.marginM * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Slight top padding // Slight top padding
Item { Item {
height: Style.marginTiny * scaling height: Style.marginXS * scaling
} }
NCircleStat { NCircleStat {
@ -63,7 +63,7 @@ NBox {
// Extra bottom padding to shift the perceived stack slightly upward // Extra bottom padding to shift the perceived stack slightly upward
Item { Item {
height: Style.marginMedium * scaling height: Style.marginM * scaling
} }
} }
} }

4
Modules/SidePanel/Cards/UtilitiesCard.qml
View file

@ -11,11 +11,11 @@ import qs.Widgets
NBox { NBox {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredWidth: 1 Layout.preferredWidth: 1
implicitHeight: utilRow.implicitHeight + Style.marginMedium * 2 * scaling implicitHeight: utilRow.implicitHeight + Style.marginM * 2 * scaling
RowLayout { RowLayout {
id: utilRow id: utilRow
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: sidePanel.cardSpacing spacing: sidePanel.cardSpacing
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true

26
Modules/SidePanel/Cards/WeatherCard.qml
View file

@ -14,34 +14,34 @@ NBox {
// TBC weatherReady is not turning to false when we reset weather... // TBC weatherReady is not turning to false when we reset weather...
Layout.fillWidth: true Layout.fillWidth: true
// Height driven by content // Height driven by content
implicitHeight: content.implicitHeight + Style.marginLarge * 2 * scaling implicitHeight: content.implicitHeight + Style.marginL * 2 * scaling
ColumnLayout { ColumnLayout {
id: content id: content
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.margins: Style.marginMedium * scaling anchors.margins: Style.marginM * scaling
spacing: Style.marginMedium * scaling spacing: Style.marginM * scaling
RowLayout { RowLayout {
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NIcon { NIcon {
text: weatherReady ? LocationService.weatherSymbolFromCode( text: weatherReady ? LocationService.weatherSymbolFromCode(
LocationService.data.weather.current_weather.weathercode) : "" LocationService.data.weather.current_weather.weathercode) : ""
font.pointSize: Style.fontSizeXXL * 1.5 * scaling font.pointSize: Style.fontSizeXXXL * 1.5 * scaling
color: Color.mPrimary color: Color.mPrimary
} }
ColumnLayout { ColumnLayout {
spacing: -Style.marginTiny * scaling spacing: -Style.marginXS * scaling
NText { NText {
text: { text: {
// Ensure the name is not too long if one had to specify the country // Ensure the name is not too long if one had to specify the country
const chunks = Settings.data.location.name.split(",") const chunks = Settings.data.location.name.split(",")
return chunks[0] return chunks[0]
} }
font.pointSize: Style.fontSizeLarger * scaling font.pointSize: Style.fontSizeXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
@ -61,13 +61,13 @@ NBox {
temp = Math.round(temp) temp = Math.round(temp)
return `${temp}°${suffix}` return `${temp}°${suffix}`
} }
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
} }
NText { NText {
text: weatherReady ? `(${LocationService.data.weather.timezone_abbreviation})` : "" text: weatherReady ? `(${LocationService.data.weather.timezone_abbreviation})` : ""
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
visible: LocationService.data.weather visible: LocationService.data.weather
} }
} }
@ -83,19 +83,19 @@ NBox {
visible: weatherReady visible: weatherReady
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: Style.marginLarge * scaling spacing: Style.marginL * scaling
Repeater { Repeater {
model: weatherReady ? LocationService.data.weather.daily.time : [] model: weatherReady ? LocationService.data.weather.daily.time : []
delegate: ColumnLayout { delegate: ColumnLayout {
Layout.alignment: Qt.AlignHCenter Layout.alignment: Qt.AlignHCenter
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
NText { NText {
text: Qt.formatDateTime(new Date(LocationService.data.weather.daily.time[index]), "ddd") text: Qt.formatDateTime(new Date(LocationService.data.weather.daily.time[index]), "ddd")
color: Color.mOnSurface color: Color.mOnSurface
} }
NIcon { NIcon {
text: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index]) text: LocationService.weatherSymbolFromCode(LocationService.data.weather.daily.weathercode[index])
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
color: Color.mPrimary color: Color.mPrimary
} }
NText { NText {
@ -110,7 +110,7 @@ NBox {
min = Math.round(min) min = Math.round(min)
return `${max}°/${min}°` return `${max}°/${min}°`
} }
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurfaceVariant color: Color.mOnSurfaceVariant
} }
} }

50
Modules/SidePanel/PowerMenu.qml
View file

@ -25,9 +25,9 @@ NPanel {
Rectangle { Rectangle {
width: 160 * scaling width: 160 * scaling
height: 220 * scaling height: 220 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
color: Color.mSurface color: Color.mSurface
visible: true visible: true
@ -35,7 +35,7 @@ NPanel {
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: Style.marginLarge * scaling anchors.rightMargin: Style.marginL * scaling
anchors.topMargin: 86 * scaling anchors.topMargin: 86 * scaling
// Prevent closing when clicking in the panel bg // Prevent closing when clicking in the panel bg
@ -48,27 +48,27 @@ NPanel {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling anchors.margins: Style.marginS * scaling
spacing: Style.marginTiny * scaling spacing: Style.marginXS * scaling
// -------------- // --------------
// Lock // Lock
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: lockButtonArea.containsMouse ? Color.mTertiary : Color.transparent color: lockButtonArea.containsMouse ? Color.mTertiary : Color.transparent
Item { Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
Row { Row {
id: lockRow id: lockRow
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -110,19 +110,19 @@ NPanel {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: suspendButtonArea.containsMouse ? Color.mTertiary : Color.transparent color: suspendButtonArea.containsMouse ? Color.mTertiary : Color.transparent
Item { Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
Row { Row {
id: suspendRow id: suspendRow
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -162,19 +162,19 @@ NPanel {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: rebootButtonArea.containsMouse ? Color.mTertiary : Color.transparent color: rebootButtonArea.containsMouse ? Color.mTertiary : Color.transparent
Item { Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
Row { Row {
id: rebootRow id: rebootRow
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -214,19 +214,19 @@ NPanel {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: logoutButtonArea.containsMouse ? Color.mTertiary : Color.transparent color: logoutButtonArea.containsMouse ? Color.mTertiary : Color.transparent
Item { Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
Row { Row {
id: logoutRow id: logoutRow
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -266,19 +266,19 @@ NPanel {
Rectangle { Rectangle {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: Style.barHeight * scaling Layout.preferredHeight: Style.barHeight * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
color: shutdownButtonArea.containsMouse ? Color.mTertiary : Color.transparent color: shutdownButtonArea.containsMouse ? Color.mTertiary : Color.transparent
Item { Item {
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
Row { Row {
id: shutdownRow id: shutdownRow
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

10
Modules/SidePanel/SidePanel.qml
View file

@ -34,7 +34,7 @@ NLoader {
id: sidePanel id: sidePanel
// Single source of truth for spacing between cards (both axes) // 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 // X coordinate from the bar to align this panel under
property real anchorX: root.anchorX property real anchorX: root.anchorX
// Ensure this panel attaches to the intended screen // Ensure this panel attaches to the intended screen
@ -82,18 +82,18 @@ NLoader {
Rectangle { Rectangle {
id: panelBackground id: panelBackground
color: Color.mSurface color: Color.mSurface
radius: Style.radiusLarge * scaling radius: Style.radiusL * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
layer.enabled: true layer.enabled: true
width: 460 * scaling width: 460 * scaling
property real innerMargin: sidePanel.cardSpacing property real innerMargin: sidePanel.cardSpacing
// Height scales to content plus vertical padding // Height scales to content plus vertical padding
height: content.implicitHeight + innerMargin * 2 height: content.implicitHeight + innerMargin * 2
// Place the panel just below the bar (overlay content starts below bar due to topMargin) // 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 // Center horizontally under the anchorX, clamped to the screen bounds
x: Math.max(Style.marginSmall * scaling, Math.min(parent.width - width - Style.marginSmall * scaling, x: Math.max(Style.marginS * scaling, Math.min(parent.width - width - Style.marginS * scaling,
Math.round(anchorX - width / 2))) Math.round(anchorX - width / 2)))
// Animation properties // Animation properties

4
Widgets/NBox.qml
View file

@ -12,8 +12,8 @@ Rectangle {
implicitHeight: childrenRect.height implicitHeight: childrenRect.height
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutlineVariant border.color: Color.mOutlineVariant
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
clip: true clip: true
} }

2
Widgets/NBusyIndicator.qml
View file

@ -8,7 +8,7 @@ Item {
property bool running: true property bool running: true
property color color: Color.mPrimary property color color: Color.mPrimary
property int size: Style.baseWidgetSize * scaling property int size: Style.baseWidgetSize * scaling
property int strokeWidth: Style.borderThick * scaling property int strokeWidth: Style.borderL * scaling
property int duration: 1000 property int duration: 1000
implicitWidth: size implicitWidth: size

4
Widgets/NCard.qml
View file

@ -10,7 +10,7 @@ Rectangle {
implicitHeight: childrenRect.height implicitHeight: childrenRect.height
color: Color.mSurface color: Color.mSurface
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
} }

14
Widgets/NCircleStat.qml
View file

@ -19,9 +19,9 @@ Rectangle {
width: 68 * scaling width: 68 * scaling
height: 92 * scaling height: 92 * scaling
color: flat ? Color.transparent : Color.mSurface color: flat ? Color.transparent : Color.mSurface
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
border.color: flat ? Color.transparent : Color.mSurfaceVariant 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 clip: true
// Repaint gauge when the bound value changes // Repaint gauge when the bound value changes
@ -30,8 +30,8 @@ Rectangle {
Row { Row {
id: innerRow id: innerRow
anchors.fill: parent anchors.fill: parent
anchors.margins: Style.marginSmall * scaling * contentScale anchors.margins: Style.marginS * scaling * contentScale
spacing: Style.marginSmall * scaling * contentScale spacing: Style.marginS * scaling * contentScale
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -77,7 +77,7 @@ Rectangle {
id: valueLabel id: valueLabel
anchors.centerIn: parent anchors.centerIn: parent
text: `${root.value}${root.suffix}` text: `${root.value}${root.suffix}`
font.pointSize: Style.fontSizeMedium * scaling * contentScale font.pointSize: Style.fontSizeM * scaling * contentScale
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
@ -91,11 +91,11 @@ Rectangle {
radius: width / 2 radius: width / 2
color: Color.mSurface color: Color.mSurface
// border.color: Color.mPrimary // 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.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.rightMargin: -6 * scaling * contentScale anchors.rightMargin: -6 * scaling * contentScale
anchors.topMargin: Style.marginTiniest * scaling * contentScale anchors.topMargin: Style.marginXXS * scaling * contentScale
NIcon { NIcon {
anchors.centerIn: parent anchors.centerIn: parent

36
Widgets/NComboBox.qml
View file

@ -19,21 +19,21 @@ ColumnLayout {
signal selected(string key) signal selected(string key)
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
Layout.fillWidth: true Layout.fillWidth: true
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
} }
@ -63,14 +63,14 @@ ColumnLayout {
implicitHeight: preferredHeight implicitHeight: preferredHeight
color: Color.mSurface color: Color.mSurface
border.color: combo.activeFocus ? Color.mTertiary : Color.mOutline border.color: combo.activeFocus ? Color.mTertiary : Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
} }
contentItem: NText { contentItem: NText {
leftPadding: Style.marginLarge * scaling leftPadding: Style.marginL * scaling
rightPadding: combo.indicator.width + Style.marginLarge * scaling rightPadding: combo.indicator.width + Style.marginL * scaling
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
text: (combo.currentIndex >= 0 && combo.currentIndex < root.model.count) ? root.model.get( text: (combo.currentIndex >= 0 && combo.currentIndex < root.model.count) ? root.model.get(
@ -78,17 +78,17 @@ ColumnLayout {
} }
indicator: NIcon { indicator: NIcon {
x: combo.width - width - Style.marginMedium * scaling x: combo.width - width - Style.marginM * scaling
y: combo.topPadding + (combo.availableHeight - height) / 2 y: combo.topPadding + (combo.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
} }
popup: Popup { popup: Popup {
y: combo.height y: combo.height
width: combo.width width: combo.width
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2) implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginM * scaling * 2)
padding: Style.marginMedium * scaling padding: Style.marginM * scaling
contentItem: ListView { contentItem: ListView {
property var comboBoxRoot: root property var comboBoxRoot: root
@ -116,16 +116,16 @@ ColumnLayout {
contentItem: NText { contentItem: NText {
text: name text: name
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
color: highlighted ? Color.mSurface : Color.mOnSurface color: highlighted ? Color.mSurface : Color.mOnSurface
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight elide: Text.ElideRight
} }
background: Rectangle { background: Rectangle {
width: combo.width - Style.marginMedium * scaling * 3 width: combo.width - Style.marginM * scaling * 3
color: highlighted ? Color.mTertiary : Color.transparent color: highlighted ? Color.mTertiary : Color.transparent
radius: Style.radiusSmall * scaling radius: Style.radiusS * scaling
} }
} }
} }
@ -133,8 +133,8 @@ ColumnLayout {
background: Rectangle { background: Rectangle {
color: Color.mSurfaceVariant color: Color.mSurfaceVariant
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
} }
} }
} }

2
Widgets/NDivider.qml
View file

@ -6,6 +6,6 @@ import qs.Services
Rectangle { Rectangle {
width: parent.width width: parent.width
height: Math.max(1, Style.borderThin * scaling) height: Math.max(1, Style.borderS * scaling)
color: Color.mOutline color: Color.mOutline
} }

2
Widgets/NIcon.qml
View file

@ -5,7 +5,7 @@ import qs.Widgets
Text { Text {
text: "question_mark" text: "question_mark"
font.family: "Material Symbols Rounded" font.family: "Material Symbols Rounded"
font.pointSize: Style.fontSizeLarge * scaling font.pointSize: Style.fontSizeL * scaling
font.variableAxes: { font.variableAxes: {
"wght"// slightly bold to ensure all lines looks good "wght"// slightly bold to ensure all lines looks good
: (Font.Normal + Font.Bold) / 2.5 : (Font.Normal + Font.Bold) / 2.5

4
Widgets/NIconButton.qml
View file

@ -16,7 +16,7 @@ Rectangle {
property bool showFilled: false property bool showFilled: false
property bool enabled: true property bool enabled: true
property bool hovering: false property bool hovering: false
property real fontPointSize: Style.fontSizeMedium property real fontPointSize: Style.fontSizeM
signal entered signal entered
signal exited signal exited
@ -28,7 +28,7 @@ Rectangle {
color: (root.hovering || showFilled) ? Color.mPrimary : Color.transparent color: (root.hovering || showFilled) ? Color.mPrimary : Color.transparent
radius: width * 0.5 radius: width * 0.5
border.color: showBorder ? Color.mPrimary : Color.transparent border.color: showBorder ? Color.mPrimary : Color.transparent
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
NIcon { NIcon {
anchors.centerIn: parent anchors.centerIn: parent

4
Widgets/NImageRounded.qml
View file

@ -18,7 +18,7 @@ Rectangle {
color: Color.transparent color: Color.transparent
radius: scaledRadius radius: scaledRadius
anchors.margins: Style.marginTiniest * scaling anchors.margins: Style.marginXXS * scaling
// Border // Border
Rectangle { Rectangle {
@ -64,7 +64,7 @@ Rectangle {
NIcon { NIcon {
anchors.centerIn: parent anchors.centerIn: parent
text: fallbackIcon text: fallbackIcon
font.pointSize: Style.fontSizeXL * scaling font.pointSize: Style.fontSizeXXL * scaling
visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "") visible: fallbackIcon !== undefined && fallbackIcon !== "" && (imagePath === undefined || imagePath === "")
z: 0 z: 0
} }

6
Widgets/NPill.qml
View file

@ -31,7 +31,7 @@ Item {
// Exposed width logic // Exposed width logic
readonly property int pillHeight: Style.baseWidgetSize * sizeMultiplier * scaling readonly property int pillHeight: Style.baseWidgetSize * sizeMultiplier * scaling
readonly property int iconSize: 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 pillOverlap: iconSize * 0.5
readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap) readonly property int maxPillWidth: Math.max(1, textItem.implicitWidth + pillPaddingHorizontal * 2 + pillOverlap)
@ -53,7 +53,7 @@ Item {
id: textItem id: textItem
anchors.centerIn: parent anchors.centerIn: parent
text: root.text text: root.text
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: textColor color: textColor
visible: showPill visible: showPill
@ -93,7 +93,7 @@ Item {
NIcon { NIcon {
text: root.icon text: root.icon
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
color: showPill ? iconTextColor : collapsedIconColor color: showPill ? iconTextColor : collapsedIconColor
anchors.centerIn: parent anchors.centerIn: parent
} }

10
Widgets/NRadioButton.qml
View file

@ -15,13 +15,13 @@ RadioButton {
radius: width * 0.5 radius: width * 0.5
color: Color.transparent color: Color.transparent
border.color: root.checked ? Color.mPrimary : Color.mOnSurface 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 anchors.verticalCenter: parent.verticalCenter
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
implicitWidth: Style.marginSmall * scaling implicitWidth: Style.marginS * scaling
implicitHeight: Style.marginSmall * scaling implicitHeight: Style.marginS * scaling
radius: width * 0.5 radius: width * 0.5
color: Qt.alpha(Color.mPrimary, root.checked ? 1 : 0) color: Qt.alpha(Color.mPrimary, root.checked ? 1 : 0)
@ -37,9 +37,9 @@ RadioButton {
contentItem: NText { contentItem: NText {
text: root.text text: root.text
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: outerCircle.right anchors.left: outerCircle.right
anchors.leftMargin: Style.marginSmall * scaling anchors.leftMargin: Style.marginS * scaling
} }
} }

2
Widgets/NSlider.qml
View file

@ -74,7 +74,7 @@ Slider {
radius: width * 0.5 radius: width * 0.5
color: root.pressed ? Color.mSurfaceVariant : Color.mSurface color: root.pressed ? Color.mSurfaceVariant : Color.mSurface
border.color: Color.mPrimary 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) // Press feedback halo (using accent color, low opacity)
Rectangle { Rectangle {

2
Widgets/NText.qml
View file

@ -7,7 +7,7 @@ Text {
id: root id: root
font.family: Settings.data.ui.fontFamily font.family: Settings.data.ui.fontFamily
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightMedium font.weight: Style.fontWeightMedium
color: Color.mOnSurface color: Color.mOnSurface
} }

22
Widgets/NTextInput.qml
View file

@ -22,19 +22,19 @@ Item {
implicitHeight: Style.baseWidgetSize * 2.75 * scaling implicitHeight: Style.baseWidgetSize * 2.75 * scaling
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -43,13 +43,13 @@ Item {
// Container // Container
Rectangle { Rectangle {
id: frame id: frame
Layout.topMargin: Style.marginTiny * scaling Layout.topMargin: Style.marginXS * scaling
implicitWidth: root.width implicitWidth: root.width
implicitHeight: Style.baseWidgetSize * 1.35 * scaling implicitHeight: Style.baseWidgetSize * 1.35 * scaling
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
// Focus ring // Focus ring
Rectangle { Rectangle {
@ -57,14 +57,14 @@ Item {
radius: frame.radius radius: frame.radius
color: Color.transparent color: Color.transparent
border.color: input.activeFocus ? Color.mTertiary : 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 { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: Style.marginMedium * scaling anchors.leftMargin: Style.marginM * scaling
anchors.rightMargin: Style.marginMedium * scaling anchors.rightMargin: Style.marginM * scaling
spacing: Style.marginSmall * scaling spacing: Style.marginS * scaling
// Optional leading icon slot in the future // Optional leading icon slot in the future
// Item { Layout.preferredWidth: 0 } // Item { Layout.preferredWidth: 0 }
@ -77,7 +77,7 @@ Item {
color: Color.mOnSurface color: Color.mOnSurface
placeholderTextColor: Color.mOnSurface placeholderTextColor: Color.mOnSurface
background: null background: null
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
onEditingFinished: root.editingFinished() onEditingFinished: root.editingFinished()
// Text changes are observable via the aliased 'text' property (root.text) and its 'textChanged' signal. // 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. // No additional callback is invoked here to avoid conflicts with QML's onTextChanged handler semantics.

10
Widgets/NToggle.qml
View file

@ -20,19 +20,19 @@ RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
ColumnLayout { ColumnLayout {
spacing: Style.marginTiniest * scaling spacing: Style.marginXXS * scaling
Layout.fillWidth: true Layout.fillWidth: true
NText { NText {
text: label text: label
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold font.weight: Style.fontWeightBold
color: Color.mOnSurface color: Color.mOnSurface
} }
NText { NText {
text: description text: description
font.pointSize: Style.fontSizeSmall * scaling font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface color: Color.mOnSurface
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -47,7 +47,7 @@ RowLayout {
radius: height * 0.5 radius: height * 0.5
color: root.checked ? Color.mPrimary : Color.mSurface color: root.checked ? Color.mPrimary : Color.mSurface
border.color: root.checked ? Color.mPrimary : Color.mOutline 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 { Rectangle {
implicitWidth: (root.baseSize - 5) * scaling implicitWidth: (root.baseSize - 5) * scaling
@ -55,7 +55,7 @@ RowLayout {
radius: height * 0.5 radius: height * 0.5
color: root.checked ? Color.mOnPrimary : Color.mPrimary color: root.checked ? Color.mOnPrimary : Color.mPrimary
border.color: root.checked ? Color.mSurface : Color.mSurface 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 y: 2 * scaling
x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling x: root.checked ? switcher.width - width - 2 * scaling : 2 * scaling

10
Widgets/NTooltip.qml
View file

@ -37,8 +37,8 @@ Window {
function _showNow() { function _showNow() {
// Compute new size everytime we show the tooltip // Compute new size everytime we show the tooltip
width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginLarge * 2 * scaling) width = Math.max(50 * scaling, tooltipText.implicitWidth + Style.marginL * 2 * scaling)
height = Math.max(40 * scaling, tooltipText.implicitHeight + Style.marginMedium * 2 * scaling) height = Math.max(40 * scaling, tooltipText.implicitHeight + Style.marginM * 2 * scaling)
if (!target) { if (!target) {
return return
@ -134,10 +134,10 @@ Window {
Rectangle { Rectangle {
id: tooltipRect id: tooltipRect
anchors.fill: parent anchors.fill: parent
radius: Style.radiusMedium * scaling radius: Style.radiusM * scaling
color: Color.mSurface color: Color.mSurface
border.color: Color.mOutline border.color: Color.mOutline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderS * scaling)
z: 1 z: 1
// Animation properties // Animation properties
@ -166,7 +166,7 @@ Window {
id: tooltipText id: tooltipText
anchors.centerIn: parent anchors.centerIn: parent
text: root.text text: root.text
font.pointSize: Style.fontSizeMedium * scaling font.pointSize: Style.fontSizeM * scaling
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap wrapMode: Text.Wrap

1
shell.qml
View file

@ -1,3 +1,4 @@
/* /*
* Noctalia – made by https://github.com/noctalia-dev * Noctalia – made by https://github.com/noctalia-dev
* Licensed under the MIT License. * Licensed under the MIT License.