add quickshell bar
This commit is contained in:
Johannes Knopp
196
roles/quickshell/files/bar/Clock.qml
Normal file
196
roles/quickshell/files/bar/Clock.qml
Normal file
@ -0,0 +1,196 @@
|
||||
import Quickshell
|
||||
import QtQuick
|
||||
import "../components"
|
||||
|
||||
Item {
|
||||
id: root
|
||||
implicitWidth: timeLabel.implicitWidth + 10
|
||||
implicitHeight: 24
|
||||
|
||||
property var now: new Date()
|
||||
|
||||
Timer {
|
||||
interval: 1000
|
||||
running: true
|
||||
repeat: true
|
||||
onTriggered: root.now = new Date()
|
||||
}
|
||||
|
||||
readonly property string display: {
|
||||
const d = now
|
||||
const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
|
||||
const h = String(d.getHours()).padStart(2, "0")
|
||||
const m = String(d.getMinutes()).padStart(2, "0")
|
||||
const s = String(d.getSeconds()).padStart(2, "0")
|
||||
return days[d.getDay()] + " " + h + ":" + m + ":" + s
|
||||
}
|
||||
|
||||
Text {
|
||||
id: timeLabel
|
||||
anchors.centerIn: parent
|
||||
text: root.display
|
||||
color: Theme.text
|
||||
font.pixelSize: 12
|
||||
font.family: "JetBrainsMono Nerd Font Mono"
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: calPopup.visible = !calPopup.visible
|
||||
}
|
||||
|
||||
// --------------- Calendar popup ---------------
|
||||
PopupWindow {
|
||||
id: calPopup
|
||||
visible: false
|
||||
anchor.item: root
|
||||
anchor.edges: Edges.Bottom
|
||||
anchor.gravity: Edges.Bottom
|
||||
|
||||
// calendar state
|
||||
property int viewYear: root.now.getFullYear()
|
||||
property int viewMonth: root.now.getMonth() // 0-based
|
||||
|
||||
readonly property var monthNames: [
|
||||
"January","February","March","April","May","June",
|
||||
"July","August","September","October","November","December"
|
||||
]
|
||||
readonly property int daysInMonth: new Date(viewYear, viewMonth + 1, 0).getDate()
|
||||
// first weekday of month: Mon=0 … Sun=6
|
||||
readonly property int startOffset: (new Date(viewYear, viewMonth, 1).getDay() + 6) % 7
|
||||
readonly property int totalCells: Math.ceil((startOffset + daysInMonth) / 7) * 7
|
||||
|
||||
readonly property int todayYear: root.now.getFullYear()
|
||||
readonly property int todayMonth: root.now.getMonth()
|
||||
readonly property int todayDay: root.now.getDate()
|
||||
|
||||
implicitWidth: calBg.implicitWidth
|
||||
implicitHeight: calBg.implicitHeight
|
||||
|
||||
Rectangle {
|
||||
id: calBg
|
||||
anchors.fill: parent
|
||||
color: Theme.bg
|
||||
border.color: Theme.border
|
||||
border.width: Theme.borderWidth
|
||||
radius: Theme.radius
|
||||
implicitWidth: calLayout.implicitWidth + 24
|
||||
implicitHeight: calLayout.implicitHeight + 24
|
||||
|
||||
Column {
|
||||
id: calLayout
|
||||
anchors { fill: parent; margins: 12 }
|
||||
spacing: 6
|
||||
|
||||
// Month navigation
|
||||
Row {
|
||||
width: parent.width
|
||||
spacing: 0
|
||||
|
||||
Text {
|
||||
text: "‹"
|
||||
color: Theme.text
|
||||
font.pixelSize: 16
|
||||
width: 20
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (calPopup.viewMonth === 0) {
|
||||
calPopup.viewMonth = 11
|
||||
calPopup.viewYear--
|
||||
} else {
|
||||
calPopup.viewMonth--
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: calPopup.monthNames[calPopup.viewMonth] + " " + calPopup.viewYear
|
||||
color: Theme.text
|
||||
font.pixelSize: 13
|
||||
font.bold: true
|
||||
// fill remaining space between arrows
|
||||
width: parent.width - 40
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "›"
|
||||
color: Theme.text
|
||||
font.pixelSize: 16
|
||||
width: 20
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
if (calPopup.viewMonth === 11) {
|
||||
calPopup.viewMonth = 0
|
||||
calPopup.viewYear++
|
||||
} else {
|
||||
calPopup.viewMonth++
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Weekday headers
|
||||
Row {
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: ["Mo","Tu","We","Th","Fr","Sa","Su"]
|
||||
Text {
|
||||
text: modelData
|
||||
color: Theme.textDim
|
||||
font.pixelSize: 10
|
||||
width: 28
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Day grid
|
||||
Grid {
|
||||
columns: 7
|
||||
spacing: 2
|
||||
Repeater {
|
||||
model: calPopup.totalCells
|
||||
delegate: Item {
|
||||
width: 28
|
||||
height: 22
|
||||
readonly property int dayNum: index - calPopup.startOffset + 1
|
||||
readonly property bool valid:
|
||||
index >= calPopup.startOffset &&
|
||||
index < calPopup.startOffset + calPopup.daysInMonth
|
||||
readonly property bool isToday:
|
||||
valid &&
|
||||
calPopup.viewYear === calPopup.todayYear &&
|
||||
calPopup.viewMonth === calPopup.todayMonth &&
|
||||
dayNum === calPopup.todayDay
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
radius: 3
|
||||
color: isToday ? Theme.accent : "transparent"
|
||||
visible: isToday
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: parent.valid ? String(parent.dayNum) : ""
|
||||
color: parent.isToday ? Theme.text : Theme.textDim
|
||||
font.pixelSize: 11
|
||||
font.bold: parent.isToday
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user