Replace calendar widget with daytime label
This commit is contained in:
David Heinemeier Hansson
@@ -34,7 +34,7 @@ Item {
|
||||
property var fallbackBarConfig: ({
|
||||
position: "top",
|
||||
transparent: false,
|
||||
centerAnchor: "calendar",
|
||||
centerAnchor: "daytime",
|
||||
layout: { left: [], center: [], right: [] }
|
||||
})
|
||||
property var layoutConfig: fallbackBarConfig.layout
|
||||
@@ -311,7 +311,7 @@ Item {
|
||||
"networkPanel": { displayName: "Network", description: "Wi-Fi list and connection state", category: "Network", allowMultiple: false, sourceDir: "../panels", sourceName: "Network" },
|
||||
"powerPanel": { displayName: "Power", description: "Battery, power profile, and system stats", category: "System", allowMultiple: false, sourceDir: "../panels", sourceName: "Power" },
|
||||
"bluetoothPanel": { displayName: "Bluetooth", description: "Bluetooth device list with connect/disconnect", category: "Network", allowMultiple: false, sourceDir: "../panels", sourceName: "Bluetooth" },
|
||||
"calendar": { displayName: "Calendar", description: "Clock with month-grid popup", category: "Time", allowMultiple: false, settingsForm: "calendarSettings" },
|
||||
"daytime": { displayName: "Daytime", description: "Day/time label with date tooltip", category: "Time", allowMultiple: false, settingsForm: "daytimeSettings" },
|
||||
"notificationCenter": { displayName: "Notification center", description: "Recent notifications + DND", category: "Status", allowMultiple: false },
|
||||
"systemStats": { displayName: "System stats", description: "CPU icon — hover for graphs, click to open btop", category: "System", allowMultiple: false },
|
||||
"weather": { displayName: "Weather", description: "Weather pill with detail popup", category: "Info", allowMultiple: false, settingsForm: "weatherSettings" },
|
||||
|
||||
@@ -16,7 +16,7 @@ the shell for its whole session.
|
||||
|
||||
The bar config lives under the `bar:` key of [`~/.config/omarchy/shell.json`](../../README.md#shelljson-shape). Out of the box the shell uses [`shell-defaults.json`](../../shell-defaults.json). Once you customize anything via `omarchy launch bar settings` or by editing shell.json directly, your file is canonical — there is no deep-merge.
|
||||
|
||||
Launch the visual editor with `omarchy launch bar settings` (or run `omarchy-launch-bar-settings`) to reorder widgets, add/remove them, and tweak per-widget options without editing JSON by hand. You can also right-click empty space to the left or right of the centered clock to open it; double-left-click the same empty space to toggle bar transparency.
|
||||
Launch the visual editor with `omarchy launch bar settings` (or run `omarchy-launch-bar-settings`) to reorder widgets, add/remove them, and tweak per-widget options without editing JSON by hand. You can also right-click empty space to the left or right of the centered daytime module to open it; double-left-click the same empty space to toggle bar transparency.
|
||||
|
||||
Example `shell.json` (bar subtree only shown):
|
||||
|
||||
@@ -26,7 +26,7 @@ Example `shell.json` (bar subtree only shown):
|
||||
"bar": {
|
||||
"position": "top",
|
||||
"transparent": false,
|
||||
"centerAnchor": "calendar",
|
||||
"centerAnchor": "daytime",
|
||||
"layout": {
|
||||
"left": [
|
||||
{ "id": "omarchy" },
|
||||
@@ -35,7 +35,7 @@ Example `shell.json` (bar subtree only shown):
|
||||
],
|
||||
"center": [
|
||||
{ "id": "media" },
|
||||
{ "id": "calendar", "format": "HH:mm" }
|
||||
{ "id": "daytime", "format": "HH:mm" }
|
||||
],
|
||||
"right": [
|
||||
{ "id": "audioPanel" },
|
||||
@@ -55,7 +55,7 @@ Example `shell.json` (bar subtree only shown):
|
||||
| Name | What it does | Interactions |
|
||||
|---|---|---|
|
||||
| `media` | MPRIS now-playing — scrolling track + artist, cover-art popup | left = play/pause · middle = next · scroll = prev/next · right = popup |
|
||||
| `calendar` | Clock + popup with month-grid calendar | left = popup · right = tz selector |
|
||||
| `daytime` | Day/time label with date tooltip | hover = date |
|
||||
| `notificationCenter` | Bell with badge + popup with recent notifications, DND toggle | left = popup · right = toggle DND |
|
||||
| `systemStats` | Inline CPU + memory sparklines, popup with detail | left = popup · right = terminal |
|
||||
| `weather` | Weather icon + popup with forecast | left = popup · right = full notification |
|
||||
|
||||
@@ -1,198 +0,0 @@
|
||||
import QtQuick
|
||||
import QtQuick.Layouts
|
||||
import Quickshell
|
||||
import qs.Ui
|
||||
import qs.Commons
|
||||
|
||||
BarWidget {
|
||||
id: root
|
||||
moduleName: "calendar"
|
||||
|
||||
|
||||
property date now: new Date()
|
||||
property date viewMonth: new Date()
|
||||
property bool popupOpen: false
|
||||
|
||||
function close() { 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
|
||||
}
|
||||
|
||||
function isoWeek(date) {
|
||||
var d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()))
|
||||
var day = d.getUTCDay() || 7
|
||||
d.setUTCDate(d.getUTCDate() + 4 - day)
|
||||
var yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1))
|
||||
return Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
|
||||
}
|
||||
|
||||
function tooltipLabel() {
|
||||
return Qt.formatDateTime(root.now, "dd MMMM yyyy") + " Week " + root.isoWeek(root.now)
|
||||
}
|
||||
|
||||
implicitWidth: button.implicitWidth
|
||||
implicitHeight: button.implicitHeight
|
||||
|
||||
SystemClock {
|
||||
id: clockTimer
|
||||
precision: SystemClock.Minutes
|
||||
onDateChanged: root.now = clockTimer.date
|
||||
}
|
||||
|
||||
WidgetButton {
|
||||
id: button
|
||||
anchors.fill: parent
|
||||
bar: root.bar
|
||||
text: root.formatLabel()
|
||||
horizontalMargin: 8.75
|
||||
verticalPadding: 8.75
|
||||
tooltipText: root.tooltipLabel()
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
PopupCard {
|
||||
id: popup
|
||||
anchorItem: button
|
||||
bar: root.bar
|
||||
owner: root
|
||||
open: root.popupOpen
|
||||
contentWidth: popup.fittedContentWidth(Style.space(300))
|
||||
contentHeight: popup.fittedContentHeight(header.implicitHeight + grid.implicitHeight + Style.spacing.rowGap)
|
||||
|
||||
Column {
|
||||
anchors.fill: parent
|
||||
spacing: Style.space(8)
|
||||
|
||||
Item {
|
||||
id: header
|
||||
width: parent.width
|
||||
implicitHeight: 28
|
||||
|
||||
Button {
|
||||
id: prevButton
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
iconText: ""
|
||||
foreground: root.bar.foreground
|
||||
horizontalPadding: Style.spacing.controlGap
|
||||
verticalPadding: Style.spacing.labelGap
|
||||
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: Style.font.title
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Button {
|
||||
id: nextButton
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
iconText: ""
|
||||
foreground: root.bar.foreground
|
||||
horizontalPadding: Style.spacing.controlGap
|
||||
verticalPadding: Style.spacing.labelGap
|
||||
onClicked: root.shiftMonth(1)
|
||||
}
|
||||
}
|
||||
|
||||
Grid {
|
||||
id: grid
|
||||
columns: 7
|
||||
rowSpacing: Style.space(4)
|
||||
columnSpacing: Style.space(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: Math.max(Style.space(18), Style.font.caption + Style.spacing.xxs)
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: modelData
|
||||
color: Qt.darker(root.bar.foreground, 1.6)
|
||||
font.family: root.bar.fontFamily
|
||||
font.pixelSize: Style.font.bodySmall
|
||||
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: Math.max(Style.space(28), Style.font.body + Style.spacing.sm)
|
||||
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: Style.font.body
|
||||
font.bold: isToday
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import QtQuick
|
||||
import Quickshell
|
||||
import qs.Commons
|
||||
import qs.Ui
|
||||
|
||||
BarWidget {
|
||||
id: root
|
||||
moduleName: "daytime"
|
||||
|
||||
property date now: new Date()
|
||||
|
||||
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 tooltipLabel() {
|
||||
return Qt.formatDateTime(root.now, String(setting("formatAlt", "dd MMMM yyyy")))
|
||||
}
|
||||
|
||||
implicitWidth: button.implicitWidth
|
||||
implicitHeight: button.implicitHeight
|
||||
|
||||
SystemClock {
|
||||
id: clockTimer
|
||||
precision: SystemClock.Minutes
|
||||
onDateChanged: root.now = clockTimer.date
|
||||
}
|
||||
|
||||
WidgetButton {
|
||||
id: button
|
||||
anchors.fill: parent
|
||||
bar: root.bar
|
||||
text: root.formatLabel()
|
||||
horizontalMargin: 8.75
|
||||
verticalPadding: 8.75
|
||||
tooltipText: root.tooltipLabel()
|
||||
pressable: false
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user