zoriya/noctalia-shell
1
0
Fork 0
mirror of https://github.com/zoriya/noctalia-shell.git synced 2025-12-06 06:36:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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
property real fontSizeTiny: 7
property real fontSizeSmall: 9
property real fontSizeReduced: 10
property real fontSizeMedium: 11
property real fontSizeInter: 12
property real fontSizeLarge: 13
property real fontSizeLarger: 16
property real fontSizeXL: 18
property real fontSizeXXL: 24
property real fontSizeXS: 9
property real fontSizeS: 10
property real fontSizeM: 11
property real fontSizeL: 13
property real fontSizeXL: 16
property real fontSizeXXL: 18
property real fontSizeXXXL: 24
// Font weight
property int fontWeightRegular: 400
@@ -30,20 +28,36 @@ Singleton {
property int fontWeightBold: 700
// Radii
property int radiusTiny: 8 * Settings.data.general.radiusRatio
property int radiusSmall: 12 * Settings.data.general.radiusRatio
property int radiusMedium: 16 * Settings.data.general.radiusRatio
property int radiusLarge: 20 * Settings.data.general.radiusRatio
property int radiusXS: 8 * Settings.data.general.radiusRatio
property int radiusS: 12 * Settings.data.general.radiusRatio
property int radiusM: 16 * Settings.data.general.radiusRatio
property int radiusL: 20 * Settings.data.general.radiusRatio
// Border
property int borderThin: 1
property int borderMedium: 2
property int borderThick: 3
property int borderS: 1
property int borderM: 2
property int borderL: 3
// Margins (for margins and spacing)
property int marginXXS: 2
property int marginXS: 4
property int marginS: 8
property int marginM: 12
property int marginL: 16
property int marginXL: 24
// Opacity
property real opacityNone: 0.0
property real opacityLight: 0.25
property real opacityMedium: 0.5
property real opacityHeavy: 0.75
property real opacityAlmost: 0.95
property real opacityFull: 1.0
// Animation duration (ms)
property int animationFast: 150
property int animationNormal: 300
property int animationSlow: 500
property int animationSlow: 450
// Dimensions
property int barHeight: 36
@@ -54,20 +68,4 @@ Singleton {
property int tooltipDelay: 300
property int tooltipDelayLong: 1200
property int pillDelay: 500
// Margins (for margins and spacing)
property int marginTiniest: 2
property int marginTiny: 4
property int marginSmall: 8
property int marginMedium: 12
property int marginLarge: 16
property int marginXL: 24
// Opacity
property real opacityNone: 0.0
property real opacityLight: 0.25
property real opacityMedium: 0.5
property real opacityHeavy: 0.75
property real opacityAlmost: 0.95
property real opacityFull: 1.0
}

57
Modules/AppLauncher/AppLauncher.qml
View File

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

2
Modules/Background/ScreenCorners.qml
View File

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

18
Modules/Bar/ActiveWindow.qml
View File

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

10
Modules/Bar/Bar.qml
View File

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

64
Modules/Bar/BluetoothMenu.qml
View File

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

18
Modules/Bar/MediaMini.qml
View File

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

26
Modules/Bar/SystemMonitor.qml
View File

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

6
Modules/Bar/Tray.qml
View File

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

32
Modules/Bar/TrayMenu.qml
View File

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

64
Modules/Bar/WiFiMenu.qml
View File

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

6
Modules/Bar/Workspace.qml
View File

@@ -114,13 +114,13 @@ Item {
Rectangle {
id: workspaceBackground
width: parent.width - Style.marginSmall * scaling * 2
width: parent.width - Style.marginS * scaling * 2
height: Math.round(Style.barHeight * 0.75 * scaling)
radius: Math.round(Style.radiusMedium * scaling)
radius: Math.round(Style.radiusM * scaling)
color: Color.mSurfaceVariant
border.color: Color.mOutline
border.width: Math.max(1, Math.round(Style.borderThin * scaling))
border.width: Math.max(1, Math.round(Style.borderS * scaling))
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter

38
Modules/Calendar/Calendar.qml
View File

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

26
Modules/DemoPanel/DemoPanel.qml
View File

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

12
Modules/Dock/Dock.qml
View File

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

1524
Modules/LockScreen/LockScreen.qml
View File

File diff suppressed because it is too large Load Diff

30
Modules/Notification/Notification.qml
View File

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

42
Modules/Notification/NotificationHistoryPanel.qml
View File

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

40
Modules/SettingsPanel/SettingsPanel.qml
View File

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

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

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

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

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

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

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

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

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

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

@@ -89,7 +89,7 @@ ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
padding: Style.marginMedium * scaling
padding: Style.marginM * scaling
clip: true
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
ScrollBar.vertical.policy: ScrollBar.AsNeeded
@@ -104,7 +104,7 @@ ColumnLayout {
}
ColumnLayout {
spacing: Style.marginLarge * scaling
spacing: Style.marginL * scaling
Layout.fillWidth: true
// Use Matugen
@@ -156,17 +156,17 @@ ColumnLayout {
NDivider {
Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling
Layout.bottomMargin: Style.marginLarge * scaling
Layout.topMargin: Style.marginL * scaling
Layout.bottomMargin: Style.marginL * scaling
}
ColumnLayout {
spacing: Style.marginTiniest * scaling
spacing: Style.marginXXS * scaling
Layout.fillWidth: true
NText {
text: "Predefined Color Schemes"
font.pointSize: Style.fontSizeLarge * scaling
font.pointSize: Style.fontSizeL * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
Layout.fillWidth: true
@@ -174,7 +174,7 @@ ColumnLayout {
NText {
text: "These color schemes only apply when 'Use Matugen' is disabled. When enabled, Matugen will generate colors based on your wallpaper instead. You can toggle between light and dark themes when using Matugen."
font.pointSize: Style.fontSizeSmall * scaling
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
Layout.fillWidth: true
wrapMode: Text.WordWrap
@@ -182,15 +182,15 @@ ColumnLayout {
}
ColumnLayout {
spacing: Style.marginTiny * scaling
spacing: Style.marginXS * scaling
Layout.fillWidth: true
Layout.topMargin: Style.marginLarge * scaling
Layout.topMargin: Style.marginL * scaling
// Color Schemes Grid
GridLayout {
columns: 4
rowSpacing: Style.marginLarge * scaling
columnSpacing: Style.marginLarge * scaling
rowSpacing: Style.marginL * scaling
columnSpacing: Style.marginL * scaling
Layout.fillWidth: true
Repeater {
@@ -203,9 +203,9 @@ ColumnLayout {
Layout.fillWidth: true
Layout.preferredHeight: 120 * scaling
radius: Style.radiusMedium * scaling
radius: Style.radiusM * scaling
color: getSchemeColor(modelData, "mSurface")
border.width: Math.max(1, Style.borderThick * scaling)
border.width: Math.max(1, Style.borderL * scaling)
border.color: Settings.data.colorSchemes.predefinedScheme === modelData ? Color.mPrimary : Color.mOutline
scale: root.cardScaleLow
@@ -234,7 +234,7 @@ ColumnLayout {
ColumnLayout {
anchors.fill: parent
anchors.margins: Style.marginXL * scaling
spacing: Style.marginSmall * scaling
spacing: Style.marginS * scaling
// Scheme name
NText {
@@ -243,7 +243,7 @@ ColumnLayout {
var chunks = schemePath.replace(".json", "").split("/")
return chunks[chunks.length - 1]
}
font.pointSize: Style.fontSizeMedium * scaling
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: getSchemeColor(modelData, "mOnSurface")
Layout.fillWidth: true
@@ -253,7 +253,7 @@ ColumnLayout {
// Color swatches
RowLayout {
spacing: Style.marginSmall * scaling
spacing: Style.marginS * scaling
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
@@ -296,7 +296,7 @@ ColumnLayout {
visible: Settings.data.colorSchemes.predefinedScheme === schemePath
anchors.right: parent.right
anchors.top: parent.top
anchors.margins: Style.marginSmall * scaling
anchors.margins: Style.marginS * scaling
width: 24 * scaling
height: 24 * scaling
radius: width * 0.5
@@ -305,7 +305,7 @@ ColumnLayout {
NText {
anchors.centerIn: parent
text: "✓"
font.pointSize: Style.fontSizeSmall * scaling
font.pointSize: Style.fontSizeXS * scaling
font.weight: Style.fontWeightBold
color: Color.mOnPrimary
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

50
Modules/SidePanel/PowerMenu.qml
View File

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

12
Modules/SidePanel/SidePanel.qml
View File

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

4
Widgets/NBox.qml
View File

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

2
Widgets/NBusyIndicator.qml
View File

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

4
Widgets/NCard.qml
View File

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

14
Widgets/NCircleStat.qml
View File

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

36
Widgets/NComboBox.qml
View File

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

2
Widgets/NDivider.qml
View File

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

2
Widgets/NIcon.qml
View File

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

4
Widgets/NIconButton.qml
View File

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

4
Widgets/NImageRounded.qml
View File

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

6
Widgets/NPill.qml
View File

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

10
Widgets/NRadioButton.qml
View File

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

2
Widgets/NSlider.qml
View File

@@ -74,7 +74,7 @@ Slider {
radius: width * 0.5
color: root.pressed ? Color.mSurfaceVariant : Color.mSurface
border.color: Color.mPrimary
border.width: Math.max(1, Style.borderThick * scaling)
border.width: Math.max(1, Style.borderL * scaling)
// Press feedback halo (using accent color, low opacity)
Rectangle {

2
Widgets/NText.qml
View File

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

22
Widgets/NTextInput.qml
View File

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

10
Widgets/NToggle.qml
View File

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

10
Widgets/NTooltip.qml
View File

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

1
shell.qml
View File

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