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

feat: add date + calendar, also tidy up pointers/tooltips

Browse source
This commit is contained in:
ferreo 2025-07-18 18:53:42 +01:00
parent bc1f4a385e
commit 435ecf8d4b
19 changed files with 595 additions and 208 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Bar/Bar.qml
View file

@ -111,6 +111,7 @@ Scope {
}
ClockWidget {
screen: modelData
anchors.verticalCenter: parent.verticalCenter
}

3
Bar/Modules/Applauncher.qml
View file

@ -10,7 +10,7 @@ import "../../Helpers/Fuzzysort.js" as Fuzzysort
PanelWithOverlay {
id: appLauncherPanel
WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
function showAt() {
appLauncherPanelRect.showAt();
}
@ -377,6 +377,7 @@ PanelWithOverlay {
root.selectedIndex = index;
root.activateSelected();
}
cursorShape: Qt.PointingHandCursor
onPressed: ripple.opacity = 0.18
onReleased: ripple.opacity = 0.0
}

127
Bar/Modules/Calendar.qml Normal file
View file

@ -0,0 +1,127 @@
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import Quickshell
import qs.Components
import qs.Settings
import Quickshell.Wayland
PanelWithOverlay {
id: calendarOverlay
Rectangle {
color: Theme.backgroundPrimary
radius: 12
border.color: Theme.backgroundTertiary
border.width: 1
width: 340
height: 380
anchors.top: parent.top
anchors.right: parent.right
anchors.topMargin: 4
anchors.rightMargin: 4
ColumnLayout {
anchors.fill: parent
anchors.margins: 16
spacing: 12
// Month/Year header with navigation
RowLayout {
Layout.fillWidth: true
spacing: 8
IconButton {
icon: "chevron_left"
onClicked: {
let newDate = new Date(calendar.year, calendar.month - 1, 1);
calendar.year = newDate.getFullYear();
calendar.month = newDate.getMonth();
}
}
Text {
Layout.fillWidth: true
horizontalAlignment: Text.AlignHCenter
text: calendar.title
color: Theme.textPrimary
opacity: 0.7
font.pixelSize: 13
font.family: Theme.fontFamily
font.bold: true
}
IconButton {
icon: "chevron_right"
onClicked: {
let newDate = new Date(calendar.year, calendar.month + 1, 1);
calendar.year = newDate.getFullYear();
calendar.month = newDate.getMonth();
}
}
}
DayOfWeekRow {
Layout.fillWidth: true
spacing: 0
Layout.leftMargin: 8 // Align with grid
Layout.rightMargin: 8
delegate: Text {
text: shortName
color: Theme.textPrimary
opacity: 0.8
font.pixelSize: 13
font.family: Theme.fontFamily
font.bold: true
horizontalAlignment: Text.AlignHCenter
width: 32
}
}
MonthGrid {
id: calendar
Layout.fillWidth: true
Layout.leftMargin: 8
Layout.rightMargin: 8
spacing: 0
month: Time.date.getMonth()
year: Time.date.getFullYear()
delegate: Rectangle {
width: 32
height: 32
radius: 8
color: {
if (model.today)
return Theme.accentPrimary;
if (mouseArea2.containsMouse)
return Theme.backgroundTertiary;
return "transparent";
}
Text {
anchors.centerIn: parent
text: model.day
color: model.today ? Theme.onAccent : Theme.textPrimary
opacity: model.month === calendar.month ? (mouseArea2.containsMouse ? 1.0 : 0.7) : 0.3
font.pixelSize: 13
font.family: Theme.fontFamily
font.bold: model.today ? true : false
}
MouseArea {
id: mouseArea2
anchors.fill: parent
hoverEnabled: true
}
Behavior on color {
ColorAnimation {
duration: 150
}
}
}
}
}
}
}

30
Bar/Modules/ClockWidget.qml
View file

@ -1,7 +1,11 @@
import QtQuick
import qs.Settings
import qs.Components
Rectangle {
id: clockWidget
property var screen: (typeof modelData !== 'undefined' ? modelData : null)
property var showTooltip: false
width: textItem.paintedWidth
height: textItem.paintedHeight
color: "transparent"
@ -15,4 +19,30 @@ Rectangle {
color: Theme.textPrimary
anchors.centerIn: parent
}
MouseArea {
id: clockMouseArea
anchors.fill: parent
hoverEnabled: true
onEntered: showTooltip = true
onExited: showTooltip = false
cursorShape: Qt.PointingHandCursor
onClicked: function() {
calendar.visible = !calendar.visible
}
}
Calendar {
id: calendar
screen: clockWidget.screen
visible: false
}
StyledTooltip {
id: dateTooltip
text: Time.dateString
tooltipVisible: showTooltip && !calendar.visible
targetItem: clockWidget
delay: 200
}
}

1
Bar/Modules/Media.qml
View file

@ -104,6 +104,7 @@ Item {
MouseArea {
id: playButton
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
enabled: MusicManager.canPlay || MusicManager.canPause
onClicked: MusicManager.playPause()

1
Bar/Modules/SystemTray.qml
View file

@ -90,6 +90,7 @@ Row {
id: trayMouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton | Qt.MiddleButton
onClicked: (mouse) => {
if (!modelData) return;

48
Bar/Modules/Time.qml
View file

@ -2,15 +2,45 @@ pragma Singleton
import Quickshell
import QtQuick
import qs.Settings
Singleton {
id: root
readonly property string time: {
Qt.formatDateTime(clock.date, "hh:mm")
}
id: root
SystemClock {
id: clock
precision: SystemClock.Seconds
}
}
property var date: new Date()
property string time: Settings.settings.use12HourClock ? Qt.formatDateTime(date, "h:mm AP") : Qt.formatDateTime(date, "HH:mm")
property string dateString: {
let now = date;
let dayName = now.toLocaleDateString(Qt.locale(), "ddd");
dayName = dayName.charAt(0).toUpperCase() + dayName.slice(1);
let day = now.getDate();
let suffix;
if (day > 3 && day < 21)
suffix = 'th';
else
switch (day % 10) {
case 1:
suffix = "st";
break;
case 2:
suffix = "nd";
break;
case 3:
suffix = "rd";
break;
default:
suffix = "th";
}
let month = now.toLocaleDateString(Qt.locale(), "MMMM");
let year = now.toLocaleDateString(Qt.locale(), "yyyy");
return `${dayName}, ` + (Settings.settings.reverseDayMonth ? `${month} ${day}${suffix} ${year}` : `${day}${suffix} ${month} ${year}`);
}
Timer {
interval: 1000
repeat: true
running: true
onTriggered: root.date = new Date()
}
}

1
Bar/Modules/Volume.qml
View file

@ -56,6 +56,7 @@ Item {
propagateComposedEvents: true
onEntered: volumeTooltip.tooltipVisible = true
onExited: volumeTooltip.tooltipVisible = false
cursorShape: Qt.PointingHandCursor
onWheel:(wheel) => {
if (!shell) return;
let step = 5;