Files
omarchycn/default/quickshell/bar/widgets/calendar.qml
T
Ryan Hughes 221e0e1fcc Add modular interactive widgets to the Quickshell bar
Introduces a widgets/ directory of first-party QML modules and a common/
helpers library. Widgets auto-load by name from
default/quickshell/bar/widgets/<name>.qml — no edits to shell.qml needed
for additions beyond the firstPartyWidgets registry.

New widgets (all orientation-aware, top/bottom/left/right):
- media: MPRIS now-playing with scrolling label, cover art popup,
  play/pause/skip controls
- audioPanel: master volume slider, output device picker, per-app mixer
- networkPanel: Wi-Fi scan + connect, current connection details
- bluetoothPanel: paired device list, connect/disconnect, battery
- calendar: month grid popup keyed to today
- notificationCenter: live notification feed, DND toggle, clear all
- brightness: slider popup with scroll-to-adjust
- powerProfile: power-saver/balanced/performance picker (UPower)
- systemStats: inline CPU + RAM sparklines, expanded popup with btop
- weatherFlyout: weather popup with refresh and full report
- workspacesPro: animated focus indicator that slides between workspaces
- powerMenu: lock/suspend/log out/reboot/shutdown popup
- idleInhibitor: coffee-cup toggle wired to omarchy-toggle-idle
- microphone: mic state + mute toggle + scroll volume

Common helpers (default/quickshell/bar/common/):
- WidgetButton: hover/press scale animation, tooltip integration
- PopupCard: orientation-aware anchor + slide-in opacity transition
- Slider: drag/wheel-able linear slider with knob hover bump
- PillButton: rounded action button with icon + label

Bar root gains requestPopout/releasePopout so only one popup is open at
a time across widgets.

Updates bar-defaults.json to ship the new widgets out of the box while
keeping the legacy modules available.
2026-05-14 02:21:47 -04:00

192 lines
5.0 KiB
QML

import QtQuick
import QtQuick.Layouts
import Quickshell
import "../common" as Common
Item {
id: root
property QtObject bar: null
property string moduleName: "calendar"
property var settings: ({})
property date now: new Date()
property date viewMonth: new Date()
property bool popupOpen: false
function closePopout() { popupOpen = false }
function setting(name, fallback) {
var value = settings ? settings[name] : undefined
return value === undefined || value === null ? fallback : value
}
function formatLabel() {
if (!bar) return ""
var fmt = bar.vertical
? String(setting("verticalFormat", "HH\n—\nmm"))
: String(setting("format", "dddd HH:mm"))
return Qt.formatDateTime(now, fmt)
}
function shiftMonth(delta) {
var date = new Date(viewMonth)
date.setDate(1)
date.setMonth(date.getMonth() + delta)
viewMonth = date
}
implicitWidth: button.implicitWidth
implicitHeight: button.implicitHeight
SystemClock {
id: clockTimer
precision: SystemClock.Minutes
onDateChanged: root.now = clockTimer.date
}
Common.WidgetButton {
id: button
anchors.fill: parent
bar: root.bar
text: root.formatLabel()
horizontalMargin: 8.75
verticalPadding: 8.75
tooltipText: Qt.formatDateTime(root.now, "dddd, MMMM d, yyyy")
onPressed: function(b) {
if (b === Qt.RightButton) {
root.bar.run("omarchy-launch-floating-terminal-with-presentation omarchy-tz-select")
} else {
root.viewMonth = new Date(root.now)
root.popupOpen = !root.popupOpen
}
}
}
Common.PopupCard {
id: popup
anchorItem: button
bar: root.bar
open: root.popupOpen
contentWidth: 300
contentHeight: header.implicitHeight + grid.implicitHeight + 36
Column {
anchors.fill: parent
spacing: 8
Item {
id: header
width: parent.width
implicitHeight: 28
Common.PillButton {
id: prevButton
anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter
iconText: ""
foreground: root.bar.foreground
horizontalPadding: 8
verticalPadding: 4
onClicked: root.shiftMonth(-1)
}
Text {
anchors.centerIn: parent
text: Qt.formatDate(root.viewMonth, "MMMM yyyy")
color: root.bar.foreground
font.family: root.bar.fontFamily
font.pixelSize: 14
font.bold: true
}
Common.PillButton {
id: nextButton
anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter
iconText: ""
foreground: root.bar.foreground
horizontalPadding: 8
verticalPadding: 4
onClicked: root.shiftMonth(1)
}
}
Grid {
id: grid
columns: 7
rowSpacing: 4
columnSpacing: 4
width: parent.width
Repeater {
model: ["S", "M", "T", "W", "T", "F", "S"]
Item {
required property string modelData
width: (grid.width - grid.columnSpacing * 6) / 7
height: 18
Text {
anchors.centerIn: parent
text: modelData
color: Qt.darker(root.bar.foreground, 1.6)
font.family: root.bar.fontFamily
font.pixelSize: 11
font.bold: true
}
}
}
Repeater {
model: 42
Rectangle {
required property int index
readonly property var startOfMonth: {
var d = new Date(root.viewMonth)
d.setDate(1)
return d
}
readonly property int firstDayOffset: startOfMonth.getDay()
readonly property var dayDate: {
var d = new Date(startOfMonth)
d.setDate(d.getDate() + index - firstDayOffset)
return d
}
readonly property bool inMonth: dayDate.getMonth() === root.viewMonth.getMonth()
readonly property bool isToday: {
var n = root.now
return dayDate.getDate() === n.getDate() && dayDate.getMonth() === n.getMonth() && dayDate.getFullYear() === n.getFullYear()
}
width: (grid.width - grid.columnSpacing * 6) / 7
height: 28
radius: 4
color: isToday ? root.bar.foreground : "transparent"
border.color: isToday ? root.bar.foreground : "transparent"
border.width: isToday ? 1 : 0
Text {
anchors.centerIn: parent
text: dayDate.getDate()
color: isToday ? root.bar.background : (inMonth ? root.bar.foreground : Qt.darker(root.bar.foreground, 2.2))
font.family: root.bar.fontFamily
font.pixelSize: 12
font.bold: isToday
}
}
}
}
}
}
MouseArea {
anchors.fill: parent
visible: false
enabled: false
}
}