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

More theming

Browse source
This commit is contained in:
quadbyte 2025-08-09 22:45:06 -04:00
parent 55bc7c9534
commit 71cb79b08b
11 changed files with 140 additions and 88 deletions
Download patch file Download diff file Expand all files Collapse all files

42
Modules/Bar/Bar.qml
View file

@ -14,6 +14,8 @@ PanelWindow {
screen: modelData screen: modelData
implicitHeight: Style.barHeight * scaling implicitHeight: Style.barHeight * scaling
color: "transparent" color: "transparent"
visible: Settings.settings.barMonitors.includes(modelData.name)
|| (Settings.settings.barMonitors.length === 0)
anchors { anchors {
top: true top: true
@ -25,13 +27,47 @@ PanelWindow {
anchors.fill: parent anchors.fill: parent
Rectangle { Rectangle {
id: bar
anchors.fill: parent anchors.fill: parent
color: Colors.backgroundPrimary color: Colors.backgroundPrimary
layer.enabled: true layer.enabled: true
} }
// Testing widgets Row {
RowLayout { id: leftSection
anchors.left: bar.left
anchors.leftMargin: Style.marginMedium * scaling
anchors.verticalCenter: bar.verticalCenter
spacing: Style.marginMedium * scaling
NText {
text: "Left"
}
}
Row {
id: centerSection
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: bar.verticalCenter
spacing: Style.marginMedium * scaling
NText {
text: "Center"
}
}
Row {
id: rightSection
anchors.right: bar.right
anchors.rightMargin: Style.marginMedium * scaling
anchors.verticalCenter: bar.verticalCenter
spacing: Style.marginMedium * scaling
NText {
text: "Right"
}
Clock {}
NIconButton { NIconButton {
id: demoPanelToggler id: demoPanelToggler
@ -40,8 +76,6 @@ PanelWindow {
demoPanel.visible ? demoPanel.hide() : demoPanel.show() demoPanel.visible ? demoPanel.hide() : demoPanel.show()
} }
} }
Clock {}
} }
} }
} }

10
Modules/Bar/Clock.qml
View file

@ -11,13 +11,9 @@ Rectangle {
height: textItem.paintedHeight height: textItem.paintedHeight
color: "transparent" color: "transparent"
Text { NText {
id: textItem id: textItem
text: Time.time text: Time.time
font.family: Settings.settings.fontFamily
font.weight: Font.Bold
font.pointSize: Style.fontMedium * scaling
color: Colors.textPrimary
anchors.centerIn: parent anchors.centerIn: parent
} }
@ -36,9 +32,7 @@ Rectangle {
} }
onClicked: function () { onClicked: function () {
calendar.visible = !calendar.visible calendar.visible = !calendar.visible
if (calendar.visible) { tooltip.hide()
tooltip.hide()
}
} }
} }

17
Modules/DemoPanel/DemoPanel.qml
View file

@ -20,7 +20,7 @@ NPanel {
color: Colors.backgroundPrimary color: Colors.backgroundPrimary
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary border.color: Colors.backgroundTertiary
border.width: Math.max(1, 1.5 * scale) border.width: Math.min(1, Style.borderMedium * scaling)
width: 500 * scaling width: 500 * scaling
height: 300 height: 300
anchors.centerIn: parent anchors.centerIn: parent
@ -38,11 +38,10 @@ NPanel {
// NIconButton // NIconButton
RowLayout { ColumnLayout {
spacing: 16 * scaling spacing: 16 * scaling
Text { NText {
text: "NIconButton" text: "NIconButton"
color: Colors.textPrimary
} }
NIconButton { NIconButton {
@ -59,12 +58,11 @@ NPanel {
// NToggle // NToggle
RowLayout { ColumnLayout {
spacing: 16 * scaling spacing: 16 * scaling
uniformCellSizes: true uniformCellSizes: true
Text { NText {
text: "NToggle + NTooltip" text: "NToggle + NTooltip"
color: Colors.textPrimary
} }
NToggle { NToggle {
@ -84,11 +82,10 @@ NPanel {
} }
// NSlider // NSlider
RowLayout { ColumnLayout {
spacing: 16 * scaling spacing: 16 * scaling
Text { NText {
text: "NSlider" text: "NSlider"
color: Colors.textPrimary
} }
NSlider {} NSlider {}

2
Services/Settings.qml
View file

@ -15,7 +15,7 @@ Singleton {
property string settingsFile: Quickshell.env("NOCTALIA_SETTINGS_FILE") property string settingsFile: Quickshell.env("NOCTALIA_SETTINGS_FILE")
|| (settingsDir + "Settings.json") || (settingsDir + "Settings.json")
property string colorsFile: Quickshell.env("NOCTALIA_COLORS_FILE") property string colorsFile: Quickshell.env("NOCTALIA_COLORS_FILE")
|| (settingsDir + "Colors.json") || (settingsDir + "Colors.json")
property var settings: settingAdapter property var settings: settingAdapter
Item { Item {

29
Services/Style.qml
View file

@ -12,13 +12,13 @@ Singleton {
Preset sizes for font, radii, ? Preset sizes for font, radii, ?
*/ */
// Font // Font size
property real fontExtraLarge: 20 property real fontSizeSmall: 9
property real fontLarge: 14 property real fontSizeMedium: 11
property real fontMedium: 10 property real fontSizeLarge: 13
property real fontSmall: 8 property real fontSizeXL: 18
// Font weight // Font weight / Unsure if we keep em?
property int fontWeightRegular: 400 property int fontWeightRegular: 400
property int fontWeightMedium: 500 property int fontWeightMedium: 500
property int fontWeightBold: 700 property int fontWeightBold: 700
@ -45,8 +45,23 @@ Singleton {
property int animationSlow: 500 property int animationSlow: 500
property int barHeight: 36 property int barHeight: 36
property int baseWidgetHeight: 32 property int baseWidgetSize: 32
property int sliderWidth: 200 property int sliderWidth: 200
// Delay
property int tooltipDelay: 300 property int tooltipDelay: 300
// Margins and spacing
property int marginTiny: 4
property int marginSmall: 8
property int marginMedium: 12
property int marginLarge: 18
property int marginXL: 24
// Opacity
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
} }

69
Widgets/NCalendar.qml
View file

@ -13,16 +13,16 @@ NPanel {
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
Rectangle { Rectangle {
color: Colors.backgroundPrimary color: Colors.backgroundSecondary
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary border.color: Colors.backgroundTertiary
border.width: Math.max(1, 1.5 * scale) border.width: Math.min(1, Style.borderMedium * scaling)
width: 340 * scaling width: 340 * scaling
height: 380 height: 300
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: 4 * scaling anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: 4 * scaling anchors.rightMargin: Style.marginTiny * scaling
// Prevent closing when clicking in the panel bg // Prevent closing when clicking in the panel bg
MouseArea { MouseArea {
@ -31,13 +31,13 @@ NPanel {
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.margins: 16 * scaling anchors.margins: Style.marginMedium * scaling
spacing: 12 * scaling spacing: Style.marginMedium * scaling
// Month/Year header with navigation // Month/Year header with navigation
RowLayout { RowLayout {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 8 spacing: Style.marginSmall * scaling
NIconButton { NIconButton {
icon: "chevron_left" icon: "chevron_left"
@ -48,15 +48,12 @@ NPanel {
} }
} }
Text { NText {
text: calendar.title
Layout.fillWidth: true Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
text: calendar.title font.pointSize: Style.fontSizeMedium * scaling
color: Colors.textPrimary color: Colors.accentPrimary
opacity: 0.7
font.pointSize: Style.fontSmall * scaling
font.family: Settings.settings.fontFamily
font.bold: true
} }
NIconButton { NIconButton {
@ -72,18 +69,15 @@ NPanel {
DayOfWeekRow { DayOfWeekRow {
Layout.fillWidth: true Layout.fillWidth: true
spacing: 0 spacing: 0
Layout.leftMargin: 8 // Align with grid Layout.leftMargin: Style.marginSmall * scaling // Align with grid
Layout.rightMargin: 8 Layout.rightMargin: Style.marginSmall * scaling
delegate: Text { delegate: NText {
text: shortName text: shortName
color: Colors.textPrimary color: Colors.accentSecondary
opacity: 0.8 font.pointSize: Style.fontSizeMedium * scaling
font.pointSize: Style.fontSmall * scaling
font.family: Settings.settings.fontFamily
font.bold: true
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
width: 32 width: Style.baseWidgetSize * scaling
} }
} }
@ -101,8 +95,8 @@ NPanel {
} }
Layout.fillWidth: true Layout.fillWidth: true
Layout.leftMargin: 8 Layout.leftMargin: Style.marginSmall * scaling
Layout.rightMargin: 8 Layout.rightMargin: Style.marginSmall * scaling
spacing: 0 spacing: 0
month: Time.date.getMonth() month: Time.date.getMonth()
year: Time.date.getFullYear() year: Time.date.getFullYear()
@ -131,9 +125,9 @@ NPanel {
}) })
property bool isHoliday: holidayInfo.length > 0 property bool isHoliday: holidayInfo.length > 0
width: 32 width: Style.baseWidgetSize * scaling
height: 32 height: Style.baseWidgetSize * scaling
radius: 8 radius: Style.radiusSmall * scaling
color: { color: {
if (model.today) if (model.today)
return Colors.accentPrimary return Colors.accentPrimary
@ -147,24 +141,23 @@ NPanel {
// Holiday dot indicator // Holiday dot indicator
Rectangle { Rectangle {
visible: isHoliday visible: isHoliday
width: 4 width: Style.baseWidgetSize / 8 * scaling
height: 4 height: Style.baseWidgetSize / 8 * scaling
radius: 4 radius: Style.radiusSmall * scaling
color: Colors.accentTertiary color: Colors.accentTertiary
anchors.top: parent.top anchors.top: parent.top
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: 4 anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: 4 anchors.rightMargin: Style.marginTiny * scaling
z: 2 z: 2
} }
Text { NText {
anchors.centerIn: parent anchors.centerIn: parent
text: model.day text: model.day
color: model.today ? Colors.onAccent : Colors.textPrimary color: model.today ? Colors.onAccent : Colors.textPrimary
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3 opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? Style.opacityFull : Style.opacityHeavy) : Style.opacityLight
font.pointSize: Style.fontSmall * scaling font.pointSize: Style.fontSizeMedium * scaling
font.family: Settings.settings.fontFamily
font.bold: model.today ? true : false font.bold: model.today ? true : false
} }

6
Widgets/NIconButton.qml
View file

@ -7,7 +7,7 @@ Rectangle {
id: root id: root
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
property real size: Style.baseWidgetHeight * scaling property real size: Style.baseWidgetSize * scaling
property string icon property string icon
property bool enabled: true property bool enabled: true
property bool hovering: false property bool hovering: false
@ -26,11 +26,11 @@ Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
text: root.icon text: root.icon
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.fontExtraLarge * scaling font.pointSize: Style.fontSizeXL * scaling
color: root.hovering ? Colors.onAccent : Colors.textPrimary color: root.hovering ? Colors.onAccent : Colors.textPrimary
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
opacity: root.enabled ? 1.0 : 0.5 opacity: root.enabled ? Style.opacityFull : Style.opacityMedium
} }
MouseArea { MouseArea {

6
Widgets/NSlider.qml
View file

@ -7,9 +7,9 @@ Slider {
id: root id: root
readonly property real scaling: Scaling.scale(screen) readonly property real scaling: Scaling.scale(screen)
readonly property real knobDiameter: Style.baseWidgetHeight * 0.75 * scaling readonly property real knobDiameter: Style.baseWidgetSize * 0.75 * scaling
readonly property real trackHeight: knobDiameter * 0.5 readonly property real trackHeight: knobDiameter * 0.5
readonly property real cutoutExtra: Style.baseWidgetHeight * 0.1 * scaling readonly property real cutoutExtra: Style.baseWidgetSize * 0.1 * scaling
// Optional color to cut the track beneath the knob (should match surrounding background) // Optional color to cut the track beneath the knob (should match surrounding background)
property var cutoutColor property var cutoutColor
@ -85,7 +85,7 @@ Slider {
radius: width * 0.5 radius: width * 0.5
color: root.pressed ? Colors.surfaceVariant : Colors.surface color: root.pressed ? Colors.surfaceVariant : Colors.surface
border.color: Colors.accentPrimary border.color: Colors.accentPrimary
border.width: Math.max(1, 2 * scaling) border.width: Math.min(1, Style.borderThick * scaling)
// Press feedback halo (using accent color, low opacity) // Press feedback halo (using accent color, low opacity)
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent

14
Widgets/NText.qml Normal file
View file

@ -0,0 +1,14 @@
import QtQuick
import qs.Services
import qs.Widgets
Text {
id: root
readonly property real scaling: Scaling.scale(screen)
font.family: Settings.settings.fontFamily
font.pointSize: Style.fontSizeMedium * scaling
font.weight: Font.Bold
color: Colors.textPrimary
}

18
Widgets/NToggle.qml
View file

@ -21,14 +21,14 @@ RowLayout {
Text { Text {
text: label text: label
font.pointSize: Style.fontMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
font.bold: true font.bold: true
color: Colors.textPrimary color: Colors.textPrimary
} }
Text { Text {
text: description text: description
font.pointSize: Style.fontSmall * scaling font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary color: Colors.textSecondary
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
Layout.fillWidth: true Layout.fillWidth: true
@ -38,22 +38,22 @@ RowLayout {
Rectangle { Rectangle {
id: switcher id: switcher
width: Style.baseWidgetHeight * 1.625 * scaling width: Style.baseWidgetSize * 1.625 * scaling
height: Style.baseWidgetHeight * scaling height: Style.baseWidgetSize * scaling
radius: height * 0.5 radius: height * 0.5
color: value ? Colors.accentPrimary :Colors.surfaceVariant color: value ? Colors.accentPrimary :Colors.surfaceVariant
border.color: value ? Colors.accentPrimary : Colors.outline border.color: value ? Colors.accentPrimary : Colors.outline
border.width: Math.max(1, 1.5 * scale) border.width: Math.min(1, Style.borderMedium * scaling)
Rectangle { Rectangle {
width: (Style.baseWidgetHeight- 4) * scaling width: (Style.baseWidgetSize - 4) * scaling
height: (Style.baseWidgetHeight - 4) * scaling height: (Style.baseWidgetSize - 4) * scaling
radius: height * 0.5 radius: height * 0.5
color: Colors.surface color: Colors.surface
border.color: hovering ? Colors.textDisabled : Colors.outline border.color: hovering ? Colors.textDisabled : Colors.outline
border.width: Math.max(1, 1.5 * scale) border.width: Math.min(1, Style.borderMedium * scaling)
y: 2 * scaling y: 2 * scaling
x: value ? switcher.width - width - 2 * scale : 2 * scaling x: value ? switcher.width - width - 2 * scaling : 2 * scaling
Behavior on x { Behavior on x {
NumberAnimation { NumberAnimation {

15
Widgets/NTooltip.qml
View file

@ -32,12 +32,17 @@ Window {
} }
function hide() { function hide() {
isVisible = false isVisible = false
timerShow.running = false
} }
function _showNow() { function _showNow() {
// Compute new size everytime we show the tooltip // Compute new size everytime we show the tooltip
width = Math.max(50 * scaling, tooltipText.implicitWidth + 24 * scaling) width = Math.max(
height = Math.max(50 * scaling, tooltipText.implicitHeight + 16 * scaling) 50 * scaling,
tooltipText.implicitWidth + Style.marginLarge * 2 * scaling)
height = Math.max(
50 * scaling,
tooltipText.implicitHeight + Style.marginSmall * 2 * scaling)
if (!target) { if (!target) {
return return
@ -101,8 +106,8 @@ Window {
radius: Style.radiusMedium * scaling radius: Style.radiusMedium * scaling
color: Colors.backgroundTertiary color: Colors.backgroundTertiary
border.color: Colors.outline border.color: Colors.outline
border.width: 1 * scaling border.width: Math.min(1, Style.borderThin * scaling)
opacity: 0.97 opacity: Style.opacityFull
z: 1 z: 1
} }
@ -112,7 +117,7 @@ Window {
text: root.text text: root.text
color: Colors.textPrimary color: Colors.textPrimary
font.family: Settings.settings.fontFamily font.family: Settings.settings.fontFamily
font.pointSize: Style.fontMedium * scaling font.pointSize: Style.fontSizeMedium * scaling
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
wrapMode: Text.Wrap wrapMode: Text.Wrap