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

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