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
implicitHeight: Style.barHeight * scaling
color: "transparent"
visible: Settings.settings.barMonitors.includes(modelData.name)
|| (Settings.settings.barMonitors.length === 0)
anchors {
top: true
@ -25,13 +27,47 @@ PanelWindow {
anchors.fill: parent
Rectangle {
id: bar
anchors.fill: parent
color: Colors.backgroundPrimary
layer.enabled: true
}
// Testing widgets
RowLayout {
Row {
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 {
id: demoPanelToggler
@ -40,8 +76,6 @@ PanelWindow {
demoPanel.visible ? demoPanel.hide() : demoPanel.show()
}
}
Clock {}
}
}
}

10
Modules/Bar/Clock.qml
View file

@ -11,13 +11,9 @@ Rectangle {
height: textItem.paintedHeight
color: "transparent"
Text {
NText {
id: textItem
text: Time.time
font.family: Settings.settings.fontFamily
font.weight: Font.Bold
font.pointSize: Style.fontMedium * scaling
color: Colors.textPrimary
anchors.centerIn: parent
}
@ -36,9 +32,7 @@ Rectangle {
}
onClicked: function () {
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
radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary
border.width: Math.max(1, 1.5 * scale)
border.width: Math.min(1, Style.borderMedium * scaling)
width: 500 * scaling
height: 300
anchors.centerIn: parent
@ -38,11 +38,10 @@ NPanel {
// NIconButton
RowLayout {
ColumnLayout {
spacing: 16 * scaling
Text {
NText {
text: "NIconButton"
color: Colors.textPrimary
}
NIconButton {
@ -59,12 +58,11 @@ NPanel {
// NToggle
RowLayout {
ColumnLayout {
spacing: 16 * scaling
uniformCellSizes: true
Text {
NText {
text: "NToggle + NTooltip"
color: Colors.textPrimary
}
NToggle {
@ -84,11 +82,10 @@ NPanel {
}
// NSlider
RowLayout {
ColumnLayout {
spacing: 16 * scaling
Text {
NText {
text: "NSlider"
color: Colors.textPrimary
}
NSlider {}

2
Services/Settings.qml
View file

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

29
Services/Style.qml
View file

@ -12,13 +12,13 @@ Singleton {
Preset sizes for font, radii, ?
*/
// Font
property real fontExtraLarge: 20
property real fontLarge: 14
property real fontMedium: 10
property real fontSmall: 8
// Font size
property real fontSizeSmall: 9
property real fontSizeMedium: 11
property real fontSizeLarge: 13
property real fontSizeXL: 18
// Font weight
// Font weight / Unsure if we keep em?
property int fontWeightRegular: 400
property int fontWeightMedium: 500
property int fontWeightBold: 700
@ -45,8 +45,23 @@ Singleton {
property int animationSlow: 500
property int barHeight: 36
property int baseWidgetHeight: 32
property int baseWidgetSize: 32
property int sliderWidth: 200
// Delay
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)
Rectangle {
color: Colors.backgroundPrimary
color: Colors.backgroundSecondary
radius: Style.radiusMedium * scaling
border.color: Colors.backgroundTertiary
border.width: Math.max(1, 1.5 * scale)
border.width: Math.min(1, Style.borderMedium * scaling)
width: 340 * scaling
height: 380
height: 300
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 4 * scaling
anchors.rightMargin: 4 * scaling
anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: Style.marginTiny * scaling
// Prevent closing when clicking in the panel bg
MouseArea {
@ -31,13 +31,13 @@ NPanel {
ColumnLayout {
anchors.fill: parent
anchors.margins: 16 * scaling
spacing: 12 * scaling
anchors.margins: Style.marginMedium * scaling
spacing: Style.marginMedium * scaling
// Month/Year header with navigation
RowLayout {
Layout.fillWidth: true
spacing: 8
spacing: Style.marginSmall * scaling
NIconButton {
icon: "chevron_left"
@ -48,15 +48,12 @@ NPanel {
}
}
Text {
NText {
text: calendar.title
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
text: calendar.title
color: Colors.textPrimary
opacity: 0.7
font.pointSize: Style.fontSmall * scaling
font.family: Settings.settings.fontFamily
font.bold: true
font.pointSize: Style.fontSizeMedium * scaling
color: Colors.accentPrimary
}
NIconButton {
@ -72,18 +69,15 @@ NPanel {
DayOfWeekRow {
Layout.fillWidth: true
spacing: 0
Layout.leftMargin: 8 // Align with grid
Layout.rightMargin: 8
Layout.leftMargin: Style.marginSmall * scaling // Align with grid
Layout.rightMargin: Style.marginSmall * scaling
delegate: Text {
delegate: NText {
text: shortName
color: Colors.textPrimary
opacity: 0.8
font.pointSize: Style.fontSmall * scaling
font.family: Settings.settings.fontFamily
font.bold: true
color: Colors.accentSecondary
font.pointSize: Style.fontSizeMedium * scaling
horizontalAlignment: Text.AlignHCenter
width: 32
width: Style.baseWidgetSize * scaling
}
}
@ -101,8 +95,8 @@ NPanel {
}
Layout.fillWidth: true
Layout.leftMargin: 8
Layout.rightMargin: 8
Layout.leftMargin: Style.marginSmall * scaling
Layout.rightMargin: Style.marginSmall * scaling
spacing: 0
month: Time.date.getMonth()
year: Time.date.getFullYear()
@ -131,9 +125,9 @@ NPanel {
})
property bool isHoliday: holidayInfo.length > 0
width: 32
height: 32
radius: 8
width: Style.baseWidgetSize * scaling
height: Style.baseWidgetSize * scaling
radius: Style.radiusSmall * scaling
color: {
if (model.today)
return Colors.accentPrimary
@ -147,24 +141,23 @@ NPanel {
// Holiday dot indicator
Rectangle {
visible: isHoliday
width: 4
height: 4
radius: 4
width: Style.baseWidgetSize / 8 * scaling
height: Style.baseWidgetSize / 8 * scaling
radius: Style.radiusSmall * scaling
color: Colors.accentTertiary
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 4
anchors.rightMargin: 4
anchors.topMargin: Style.marginTiny * scaling
anchors.rightMargin: Style.marginTiny * scaling
z: 2
}
Text {
NText {
anchors.centerIn: parent
text: model.day
color: model.today ? Colors.onAccent : Colors.textPrimary
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1 : 0.7) : 0.3
font.pointSize: Style.fontSmall * scaling
font.family: Settings.settings.fontFamily
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? Style.opacityFull : Style.opacityHeavy) : Style.opacityLight
font.pointSize: Style.fontSizeMedium * scaling
font.bold: model.today ? true : false
}

6
Widgets/NIconButton.qml
View file

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

6
Widgets/NSlider.qml
View file

@ -7,9 +7,9 @@ Slider {
id: root
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 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)
property var cutoutColor
@ -85,7 +85,7 @@ Slider {
radius: width * 0.5
color: root.pressed ? Colors.surfaceVariant : Colors.surface
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)
Rectangle {
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: label
font.pointSize: Style.fontMedium * scaling
font.pointSize: Style.fontSizeMedium * scaling
font.bold: true
color: Colors.textPrimary
}
Text {
text: description
font.pointSize: Style.fontSmall * scaling
font.pointSize: Style.fontSizeSmall * scaling
color: Colors.textSecondary
wrapMode: Text.WordWrap
Layout.fillWidth: true
@ -38,22 +38,22 @@ RowLayout {
Rectangle {
id: switcher
width: Style.baseWidgetHeight * 1.625 * scaling
height: Style.baseWidgetHeight * scaling
width: Style.baseWidgetSize * 1.625 * scaling
height: Style.baseWidgetSize * scaling
radius: height * 0.5
color: value ? Colors.accentPrimary :Colors.surfaceVariant
border.color: value ? Colors.accentPrimary : Colors.outline
border.width: Math.max(1, 1.5 * scale)
border.width: Math.min(1, Style.borderMedium * scaling)
Rectangle {
width: (Style.baseWidgetHeight- 4) * scaling
height: (Style.baseWidgetHeight - 4) * scaling
width: (Style.baseWidgetSize - 4) * scaling
height: (Style.baseWidgetSize - 4) * scaling
radius: height * 0.5
color: Colors.surface
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
x: value ? switcher.width - width - 2 * scale : 2 * scaling
x: value ? switcher.width - width - 2 * scaling : 2 * scaling
Behavior on x {
NumberAnimation {

15
Widgets/NTooltip.qml
View file

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