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

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