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

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

View file

@ -2,6 +2,7 @@ import QtQuick
import Quickshell
import Quickshell.Io
import qs.Settings
import qs.Components
Item {
id: root
@ -25,6 +26,16 @@ Item {
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: notificationHistoryWin.visible = !notificationHistoryWin.visible
onEntered: notificationTooltip.tooltipVisible = true
onExited: notificationTooltip.tooltipVisible = false
}
}
StyledTooltip {
id: notificationTooltip
text: "Notification History"
tooltipVisible: false
targetItem: bell
delay: 200
}
}

View file

@ -20,6 +20,7 @@ Item {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
if (sidebarPopup.visible) {
sidebarPopup.hidePopup();

View file

@ -133,6 +133,7 @@ Rectangle {
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: {
profileImageInput.forceActiveFocus()
}
@ -188,6 +189,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showActiveWindowIcon = !Settings.settings.showActiveWindowIcon
}
@ -242,6 +244,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showSystemInfoInBar = !Settings.settings.showSystemInfoInBar
}
@ -296,6 +299,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.showMediaInBar = !Settings.settings.showMediaInBar
}
@ -445,6 +449,7 @@ Rectangle {
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: videoPathInput.forceActiveFocus()
}
}

View file

@ -79,6 +79,7 @@ Rectangle {
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: folderInput.forceActiveFocus()
}
}
@ -133,6 +134,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.useSWWW = !Settings.settings.useSWWW;
}
@ -188,6 +190,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.randomWallpaper = !Settings.settings.randomWallpaper;
}
@ -243,6 +246,7 @@ Rectangle {
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.useWallpaperTheme = !Settings.settings.useWallpaperTheme;
}

View file

@ -5,7 +5,7 @@ import qs.Settings
Rectangle {
id: weatherSettingsCard
Layout.fillWidth: true
Layout.preferredHeight: 180
Layout.preferredHeight: 320
color: Theme.surface
radius: 18
@ -79,13 +79,14 @@ Rectangle {
inputMethodHints: Qt.ImhNone
onTextChanged: {
Settings.settings.weatherCity = text
Settings.settings.weatherCity = text;
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.IBeamCursor
onClicked: {
cityInput.forceActiveFocus()
cityInput.forceActiveFocus();
}
}
}
@ -118,7 +119,7 @@ Rectangle {
color: Theme.accentPrimary
border.color: Theme.accentPrimary
border.width: 2
Rectangle {
id: thumb
width: 28
@ -129,7 +130,7 @@ Rectangle {
border.width: 1
y: 2
x: Settings.settings.useFahrenheit ? customSwitch.width - width - 2 : 2
Text {
anchors.centerIn: parent
text: Settings.settings.useFahrenheit ? "\u00b0F" : "\u00b0C"
@ -138,19 +139,137 @@ Rectangle {
font.bold: true
color: Theme.textPrimary
}
Behavior on x {
NumberAnimation { duration: 200; easing.type: Easing.OutCubic }
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.useFahrenheit = !Settings.settings.useFahrenheit
Settings.settings.useFahrenheit = !Settings.settings.useFahrenheit;
}
}
}
}
// Random Wallpaper Setting
RowLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
Text {
text: "Use 12 Hour Clock"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Item {
Layout.fillWidth: true
}
// Custom Material 3 Switch
Rectangle {
id: use12HourClockSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.use12HourClock ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: randomWallpaperThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.use12HourClock ? use12HourClockSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.use12HourClock = !Settings.settings.use12HourClock;
}
}
}
}
// Reverse Day Month Setting
RowLayout {
spacing: 8
Layout.fillWidth: true
Layout.topMargin: 8
Text {
text: "US Style Date"
font.pixelSize: 13
font.bold: true
color: Theme.textPrimary
}
Item {
Layout.fillWidth: true
}
// Custom Material 3 Switch
Rectangle {
id: reverseDayMonthSwitch
width: 52
height: 32
radius: 16
color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.surfaceVariant
border.color: Settings.settings.reverseDayMonth ? Theme.accentPrimary : Theme.outline
border.width: 2
Rectangle {
id: reverseDayMonthThumb
width: 28
height: 28
radius: 14
color: Theme.surface
border.color: Theme.outline
border.width: 1
y: 2
x: Settings.settings.reverseDayMonth ? reverseDayMonthSwitch.width - width - 2 : 2
Behavior on x {
NumberAnimation {
duration: 200
easing.type: Easing.OutCubic
}
}
}
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: {
Settings.settings.reverseDayMonth = !Settings.settings.reverseDayMonth;
}
}
}
}
}
}
}

View file

@ -144,12 +144,6 @@ PanelWithOverlay {
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
ColumnLayout {
anchors.fill: parent
anchors.margins: 20
@ -235,6 +229,12 @@ PanelWithOverlay {
cursorShape: Qt.PointingHandCursor
onClicked: wifiPanel.showAt()
}
StyledTooltip {
text: "Wifi"
targetItem: wifiButtonArea
tooltipVisible: wifiButtonArea.containsMouse
}
}
// Bluetooth button
@ -264,6 +264,12 @@ PanelWithOverlay {
cursorShape: Qt.PointingHandCursor
onClicked: bluetoothPanel.showAt()
}
StyledTooltip {
text: "Bluetooth"
targetItem: bluetoothButtonArea
tooltipVisible: bluetoothButtonArea.containsMouse
}
}
}
}

View file

@ -67,6 +67,7 @@ Rectangle {
MouseArea {
id: settingsButtonArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
settingsRequested()
@ -110,6 +111,7 @@ Rectangle {
MouseArea {
id: recorderButtonArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
if (isRecording) {
@ -156,6 +158,7 @@ Rectangle {
MouseArea {
id: wallpaperButtonArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
wallpaperRequested()

View file

@ -7,6 +7,7 @@ import Quickshell.Io
import qs.Settings
import qs.Widgets
import qs.Helpers
import qs.Components
Rectangle {
id: systemWidget
@ -129,200 +130,208 @@ Rectangle {
MouseArea {
id: systemButtonArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
hoverEnabled: true
onClicked: {
systemMenu.visible = !systemMenu.visible
systemMenu.visible = !systemMenu.visible;
}
}
StyledTooltip {
id: systemTooltip
text: "System"
targetItem: systemButton
tooltipVisible: systemButtonArea.containsMouse
}
}
}
}
}
// System menu popup
Rectangle {
PanelWithOverlay {
id: systemMenu
width: 160
height: 180
color: Theme.surface
radius: 8
border.color: Theme.outline
border.width: 1
visible: false
z: 9999
// Position below system button
x: systemButton.x + systemButton.width - width + 12
y: systemButton.y + systemButton.height + 32
anchors.top: systemButton.bottom
anchors.right: systemButton.right
// System menu popup
Rectangle {
ColumnLayout {
anchors.fill: parent
anchors.margins: 8
spacing: 4
width: 160
height: 180
color: Theme.surface
radius: 8
border.color: Theme.outline
border.width: 1
visible: true
z: 9999
anchors.top: parent.top
anchors.right: parent.right
// Lock button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
// Position below system button
anchors.rightMargin: 32
anchors.topMargin: systemButton.y + systemButton.height + 48
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
ColumnLayout {
anchors.fill: parent
anchors.margins: 8
spacing: 4
Text {
text: "lock_outline"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
// Lock button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: lockButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "lock_outline"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Lock Screen"
font.family: Theme.fontFamily
font.pixelSize: 14
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
Text {
text: "Lock Screen"
font.family: Theme.fontFamily
font.pixelSize: 14
color: lockButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
MouseArea {
id: lockButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
lockScreen.locked = true;
systemMenu.visible = false;
}
}
}
MouseArea {
id: lockButtonArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
lockScreen.locked = true;
systemMenu.visible = false;
// Reboot button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Reboot"
font.family: Theme.fontFamily
font.pixelSize: 14
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: rebootButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
reboot();
systemMenu.visible = false;
}
}
}
// Logout button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "exit_to_app"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Logout"
font.pixelSize: 14
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: logoutButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
logout();
systemMenu.visible = false;
}
}
}
// Shutdown button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Shutdown"
font.pixelSize: 14
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: shutdownButtonArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
shutdown();
systemMenu.visible = false;
}
}
}
}
// Reboot button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: rebootButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "refresh"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Reboot"
font.family: Theme.fontFamily
font.pixelSize: 14
color: rebootButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: rebootButtonArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
reboot()
systemMenu.visible = false
}
}
}
// Logout button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: logoutButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "exit_to_app"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Logout"
font.pixelSize: 14
color: logoutButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: logoutButtonArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
logout()
systemMenu.visible = false
}
}
}
// Shutdown button
Rectangle {
Layout.fillWidth: true
Layout.preferredHeight: 36
radius: 6
color: shutdownButtonArea.containsMouse ? Theme.accentPrimary : "transparent"
RowLayout {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
text: "power_settings_new"
font.family: "Material Symbols Outlined"
font.pixelSize: 16
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
}
Text {
text: "Shutdown"
font.pixelSize: 14
color: shutdownButtonArea.containsMouse ? Theme.onAccent : Theme.textPrimary
Layout.fillWidth: true
}
}
MouseArea {
id: shutdownButtonArea
anchors.fill: parent
hoverEnabled: true
onClicked: {
shutdown()
systemMenu.visible = false
}
}
}
}
// Close menu when clicking outside
MouseArea {
anchors.fill: parent
enabled: systemMenu.visible
onClicked: systemMenu.visible = false
z: -1 // Put this behind other elements
}
}
@ -336,8 +345,8 @@ Rectangle {
running: false
stdout: StdioCollector {
onStreamFinished: {
uptimeText = this.text.trim()
uptimeProcess.running = false
uptimeText = this.text.trim();
uptimeProcess.running = false;
}
}
}
@ -359,13 +368,13 @@ Rectangle {
}
function shutdown() {
shutdownProcess.running = true
shutdownProcess.running = true;
}
function reboot() {
rebootProcess.running = true
rebootProcess.running = true;
}
function logout() {
logoutProcess.running = true
logoutProcess.running = true;
}
property bool panelVisible: false
@ -373,7 +382,7 @@ Rectangle {
// Trigger initial update when panel becomes visible
onPanelVisibleChanged: {
if (panelVisible) {
updateSystemInfo()
updateSystemInfo();
}
}
@ -386,15 +395,15 @@ Rectangle {
}
Component.onCompleted: {
uptimeProcess.running = true
uptimeProcess.running = true;
}
function updateSystemInfo() {
uptimeProcess.running = true
uptimeProcess.running = true;
}
// Add lockscreen instance (hidden by default)
LockScreen {
id: lockScreen
}
}
}