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

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

Browse source 
property real fontSizeXS: 9
  property real fontSizeS: 10
  property real fontSizeM: 11
  property real fontSizeL: 13
  property real fontSizeXL: 16
  property real fontSizeXXL: 18
  property real fontSizeXXXL: 24
This commit is contained in:
quadbyte 2025-08-18 11:12:51 -04:00
parent ddd74c65e4
commit b723eccc78
56 changed files with 1419 additions and 1423 deletions
Download patch file Download diff file Expand all files Collapse all files

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