1 files changed, 167 insertions, 140 deletions
diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
index a1872ff5..382af168 100644
--- a/accounts/gkleen@sif/shell/quickshell/Clock.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -9,6 +9,8 @@ import Quickshell.Widgets
 Item {
  id: clockItem
+  property bool calendarPopup: true
  width: clock.contentWidth
  height: parent.height
  anchors.verticalCenter: parent.verticalCenter
@@ -18,19 +20,7 @@ Item {
    anchors.fill: parent
    hoverEnabled: true
-    enabled: true
+    enabled: clockItem.calendarPopup
-    property real angleRem: 0
-    property real sensitivity: 1 / 120
-    function scrollYear(event) {
-      angleRem += event.angleDelta.y;
-      const d = Math.round(angleRem * sensitivity);
-      yearCalendar.year += d;
-      angleRem -= d / sensitivity;
-    }
-    onWheel: event => scrollYear(event)
    Item {
      anchors.fill: parent
@@ -54,196 +44,233 @@ Item {
    }
  }
-  PopupWindow {
+  Loader {
-    id: tooltip
+    id: tooltipLoader
-    property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse
+    active: false
-    anchor {
+    Connections {
-      item: clockMouseArea
+      target: clockMouseArea
-      edges: Edges.Bottom | Edges.Left
+      function onContainsMouseChanged() {
+       if (clockMouseArea.containsMouse)
+         tooltipLoader.active = true;
+      }
    }
-    visible: false
-    onNextVisibleChanged: hangTimer.restart()
+    sourceComponent: PopupWindow {
+      id: tooltip
-    Timer {
+      property bool nextVisible: clockMouseArea.containsMouse || tooltipMouseArea.containsMouse
-      id: hangTimer
-      interval: 100
-      onTriggered: tooltip.visible = tooltip.nextVisible
-    }
-    implicitWidth: clockTooltipContent.width
+      anchor {
-    implicitHeight: clockTooltipContent.height
+        item: clockMouseArea
-    color: "black"
+        edges: Edges.Bottom | Edges.Left
+      }
+      visible: false
-    onVisibleChanged: {
+      onNextVisibleChanged: hangTimer.restart()
-      yearCalendar.year = chrono.date.getFullYear();
-      clockMouseArea.angleRem = 0;
-    }
-    WrapperMouseArea {
+      Timer {
-      id: tooltipMouseArea
+        id: hangTimer
+        interval: 100
+        onTriggered: tooltip.visible = tooltip.nextVisible
+      }
-      hoverEnabled: true
+      implicitWidth: clockTooltipContent.width
-      enabled: true
+      implicitHeight: clockTooltipContent.height
+      color: "black"
-      onWheel: event => clockMouseArea.scrollYear(event)
+      onVisibleChanged: {
+        yearCalendar.year = chrono.date.getFullYear();
+        yearCalendar.angleRem = 0;
+      }
-      anchors.fill: parent
+      WrapperMouseArea {
+        id: tooltipMouseArea
-      WrapperItem {
+        hoverEnabled: true
-        id: clockTooltipContent
+        enabled: true
-        margin: 8
+        onWheel: event => yearCalendar.scrollYear(event)
-        leftMargin: 0
-        ColumnLayout {
+        anchors.fill: parent
-          Text {
-            id: yearLabel
-            horizontalAlignment: Text.AlignHCenter
+        WrapperItem {
+          id: clockTooltipContent
-            font.pointSize: 14
+          margin: 8
-            font.family: "Fira Sans"
+          leftMargin: 0
-            font.features: { "tnum": 1 }
-            color: "white"
-            text: yearCalendar.year
+          ColumnLayout {
+            Text {
+              id: yearLabel
-            Layout.fillWidth: true
+              horizontalAlignment: Text.AlignHCenter
-            Layout.bottomMargin: 8
-          }
-          GridLayout {
+              font.pointSize: 14
-            property int year: chrono.date.getFullYear()
+              font.family: "Fira Sans"
+              font.features: { "tnum": 1 }
+              color: "white"
-            id: yearCalendar
+              text: yearCalendar.year
-            columns: 3
+              Layout.fillWidth: true
-            columnSpacing: 16
+              Layout.bottomMargin: 8
-            rowSpacing: 16
+            }
-            Layout.alignment: Qt.AlignHCenter
+            GridLayout {
-            Layout.fillWidth: false
+              property int year: chrono.date.getFullYear()
-            Repeater {
+              id: yearCalendar
-              model: 12
-              GridLayout {
+              columns: 3
-                columns: 2
+              columnSpacing: 16
+              rowSpacing: 16
-                required property int index
+              Layout.alignment: Qt.AlignHCenter
-                property int month: index
+              Layout.fillWidth: false
-                id: monthCalendar
+              property real angleRem: 0
+              property real sensitivity: 1 / 120
-                Layout.alignment: Qt.AlignTop | Qt.AlignRight
+              function scrollYear(event) {
-                Layout.fillWidth: false
+                angleRem += event.angleDelta.y;
+                const d = Math.round(angleRem * sensitivity);
+                yearCalendar.year += d;
+                angleRem -= d / sensitivity;
+              }
-                Text {
+              Connections {
-                  Layout.column: 1
+                target: clockMouseArea
-                  Layout.fillWidth: true
+                function onWheel(event) { yearCalendar.scrollYear(event); }
+              }
-                  horizontalAlignment: Text.AlignHCenter
+              Repeater {
+                model: 12
-                  font.pointSize: 10
+                GridLayout {
-                  font.family: "Fira Sans"
+                  columns: 2
-                  text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
+                  required property int index
+                  property int month: index
-                  color: "#ffead3"
+                  id: monthCalendar
-                }
-                DayOfWeekRow {
+                  Layout.alignment: Qt.AlignTop | Qt.AlignRight
-                  locale: grid.locale
+                  Layout.fillWidth: false
-                  Layout.row: 1
+                  Text {
-                  Layout.column: 1
+                    Layout.column: 1
-                  Layout.fillWidth: true
+                    Layout.fillWidth: true
-                  delegate: Text {
+                    horizontalAlignment: Text.AlignHCenter
-                    required property string shortName
                    font.pointSize: 10
-                    font.family: "Fira Mono"
+                    font.family: "Fira Sans"
-                    text: shortName
+                    text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
-                    color: "#ffcc66"
-                    horizontalAlignment: Text.AlignRight
+                    color: "#ffead3"
-                    verticalAlignment: Text.AlignVCenter
                  }
-                }
-                WeekNumberColumn {
+                  DayOfWeekRow {
-                  month: grid.month
+                    locale: grid.locale
-                  year: grid.year
-                  locale: grid.locale
-                  Layout.fillHeight: true
+                    Layout.row: 1
+                    Layout.column: 1
+                    Layout.fillWidth: true
-                  delegate: Text {
+                    delegate: WrapperItem {
-                    required property int weekNumber
+                      required property string shortName
-                    opacity: {
+                      width: dowLabel.contentWidth + 6
-                      const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
-                      const dayOfWeek = simple.getDay();
-                      const isoWeekStart = simple;
-                      isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                      Text {
-                      if (dayOfWeek > 4) {
+                        id: dowLabel
-                          isoWeekStart.setDate(isoWeekStart.getDate() + 7);
-                      }
-                      for (let i = 0; i < 7; i++) {
-                        const dayInWeek = new Date(isoWeekStart);
-                        dayInWeek.setDate(dayInWeek.getDate() + i);
-                        if (dayInWeek.getMonth() == monthCalendar.month)
-                          return 1;
-                      }
-                      return 0;
+                        anchors.fill: parent
-                    }
-                    font.pointSize: 10
+                        font.pointSize: 10
-                    font.family: "Fira Sans"
+                        font.family: "Fira Sans"
-                    font.features: { "tnum": 1 }
-                    text: weekNumber
+                        text: parent.shortName
-                    color: "#99ffdd"
+                        color: "#ffcc66"
-                    horizontalAlignment: Text.AlignRight
+                        horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
+                        verticalAlignment: Text.AlignVCenter
+                      }
+                    }
                  }
-                }
-                MonthGrid {
+                  WeekNumberColumn {
-                  id: grid
+                    month: grid.month
+                    year: grid.year
+                    locale: grid.locale
-                  year: yearCalendar.year
+                    Layout.fillHeight: true
-                  month: monthCalendar.month
-                  locale: Qt.locale("en_DK")
-                  Layout.fillWidth: true
+                    delegate: Text {
-                  Layout.fillHeight: true
+                      required property int weekNumber
-                  delegate: Text {
+                      opacity: {
-                      required property var model
+                        const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
+                        const dayOfWeek = simple.getDay();
+                        const isoWeekStart = simple;
-                      opacity: model.month === monthCalendar.month ? 1 : 0
+                        isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                        if (dayOfWeek > 4) {
+                            isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                        }
+                        for (let i = 0; i < 7; i++) {
+                          const dayInWeek = new Date(isoWeekStart);
+                          dayInWeek.setDate(dayInWeek.getDate() + i);
+                          if (dayInWeek.getMonth() == monthCalendar.month)
+                            return 1;
+                        }
+                        return 0;
+                      }
                      font.pointSize: 10
                      font.family: "Fira Sans"
                      font.features: { "tnum": 1 }
-                      property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day
+                      text: weekNumber
+                      color: "#99ffdd"
-                      text: model.day
-                      color: today ? "#ff6699" : "white"
                      horizontalAlignment: Text.AlignRight
                      verticalAlignment: Text.AlignVCenter
+                    }
+                  }
+                  MonthGrid {
+                    id: grid
+                    year: yearCalendar.year
+                    month: monthCalendar.month
+                    locale: Qt.locale("en_DK")
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    delegate: Text {
+                        required property var model
+                        opacity: model.month === monthCalendar.month ? 1 : 0
+                        font.pointSize: 10
+                        font.family: "Fira Sans"
+                        font.features: { "tnum": 1 }
+                        property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day
+                        text: model.day
+                        color: today ? "#ff6699" : "white"
+                        horizontalAlignment: Text.AlignRight
+                        verticalAlignment: Text.AlignVCenter
+                    }
                  }
                }
              }

diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml index a1872ff5..382af168 100644 --- a/accounts/gkleen@sif/shell/quickshell/Clock.qml +++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -9,6 +9,8 @@ import Quickshell.Widgets
9	Item {	9	Item {
10	id: clockItem	10	id: clockItem
11		11
		12	property bool calendarPopup: true
		13
12	width: clock.contentWidth	14	width: clock.contentWidth
13	height: parent.height	15	height: parent.height
14	anchors.verticalCenter: parent.verticalCenter	16	anchors.verticalCenter: parent.verticalCenter
@@ -18,19 +20,7 @@ Item {
18		20
19	anchors.fill: parent	21	anchors.fill: parent
20	hoverEnabled: true	22	hoverEnabled: true
21	enabled: true	23	enabled: clockItem.calendarPopup
22
23	property real angleRem: 0
24	property real sensitivity: 1 / 120
25
26	function scrollYear(event) {
27	angleRem += event.angleDelta.y;
28	const d = Math.round(angleRem * sensitivity);
29	yearCalendar.year += d;
30	angleRem -= d / sensitivity;
31	}
32
33	onWheel: event => scrollYear(event)
34		24
35	Item {	25	Item {
36	anchors.fill: parent	26	anchors.fill: parent
@@ -54,196 +44,233 @@ Item {
54	}	44	}
55	}	45	}
56		46
57	PopupWindow {	47	Loader {
58	id: tooltip	48	id: tooltipLoader
59		49
60	property bool nextVisible: clockMouseArea.containsMouse \|\| tooltipMouseArea.containsMouse	50	active: false
61		51
62	anchor {	52	Connections {
63	item: clockMouseArea	53	target: clockMouseArea
64	edges: Edges.Bottom \| Edges.Left	54	function onContainsMouseChanged() {
		55	if (clockMouseArea.containsMouse)
		56	tooltipLoader.active = true;
		57	}
65	}	58	}
66	visible: false
67		59
68	onNextVisibleChanged: hangTimer.restart()	60	sourceComponent: PopupWindow {
		61	id: tooltip
69		62
70	Timer {	63	property bool nextVisible: clockMouseArea.containsMouse \|\| tooltipMouseArea.containsMouse
71	id: hangTimer
72	interval: 100
73	onTriggered: tooltip.visible = tooltip.nextVisible
74	}
75		64
76	implicitWidth: clockTooltipContent.width	65	anchor {
77	implicitHeight: clockTooltipContent.height	66	item: clockMouseArea
78	color: "black"	67	edges: Edges.Bottom \| Edges.Left
		68	}
		69	visible: false
79		70
80	onVisibleChanged: {	71	onNextVisibleChanged: hangTimer.restart()
81	yearCalendar.year = chrono.date.getFullYear();
82	clockMouseArea.angleRem = 0;
83	}
84		72
85	WrapperMouseArea {	73	Timer {
86	id: tooltipMouseArea	74	id: hangTimer
		75	interval: 100
		76	onTriggered: tooltip.visible = tooltip.nextVisible
		77	}
87		78
88	hoverEnabled: true	79	implicitWidth: clockTooltipContent.width
89	enabled: true	80	implicitHeight: clockTooltipContent.height
		81	color: "black"
90		82
91	onWheel: event => clockMouseArea.scrollYear(event)	83	onVisibleChanged: {
		84	yearCalendar.year = chrono.date.getFullYear();
		85	yearCalendar.angleRem = 0;
		86	}
92		87
93	anchors.fill: parent	88	WrapperMouseArea {
		89	id: tooltipMouseArea
94		90
95	WrapperItem {	91	hoverEnabled: true
96	id: clockTooltipContent	92	enabled: true
97		93
98	margin: 8	94	onWheel: event => yearCalendar.scrollYear(event)
99	leftMargin: 0
100		95
101	ColumnLayout {	96	anchors.fill: parent
102	Text {
103	id: yearLabel
104		97
105	horizontalAlignment: Text.AlignHCenter	98	WrapperItem {
		99	id: clockTooltipContent
106		100
107	font.pointSize: 14	101	margin: 8
108	font.family: "Fira Sans"	102	leftMargin: 0
109	font.features: { "tnum": 1 }
110	color: "white"
111		103
112	text: yearCalendar.year	104	ColumnLayout {
		105	Text {
		106	id: yearLabel
113		107
114	Layout.fillWidth: true	108	horizontalAlignment: Text.AlignHCenter
115	Layout.bottomMargin: 8
116	}
117		109
118	GridLayout {	110	font.pointSize: 14
119	property int year: chrono.date.getFullYear()	111	font.family: "Fira Sans"
		112	font.features: { "tnum": 1 }
		113	color: "white"
120		114
121	id: yearCalendar	115	text: yearCalendar.year
122		116
123	columns: 3	117	Layout.fillWidth: true
124	columnSpacing: 16	118	Layout.bottomMargin: 8
125	rowSpacing: 16	119	}
126		120
127	Layout.alignment: Qt.AlignHCenter	121	GridLayout {
128	Layout.fillWidth: false	122	property int year: chrono.date.getFullYear()
129		123
130	Repeater {	124	id: yearCalendar
131	model: 12
132		125
133	GridLayout {	126	columns: 3
134	columns: 2	127	columnSpacing: 16
		128	rowSpacing: 16
135		129
136	required property int index	130	Layout.alignment: Qt.AlignHCenter
137	property int month: index	131	Layout.fillWidth: false
138		132
139	id: monthCalendar	133	property real angleRem: 0
		134	property real sensitivity: 1 / 120
140		135
141	Layout.alignment: Qt.AlignTop \| Qt.AlignRight	136	function scrollYear(event) {
142	Layout.fillWidth: false	137	angleRem += event.angleDelta.y;
		138	const d = Math.round(angleRem * sensitivity);
		139	yearCalendar.year += d;
		140	angleRem -= d / sensitivity;
		141	}
143		142
144	Text {	143	Connections {
145	Layout.column: 1	144	target: clockMouseArea
146	Layout.fillWidth: true	145	function onWheel(event) { yearCalendar.scrollYear(event); }
		146	}
147		147
148	horizontalAlignment: Text.AlignHCenter	148	Repeater {
		149	model: 12
149		150
150	font.pointSize: 10	151	GridLayout {
151	font.family: "Fira Sans"	152	columns: 2
152		153
153	text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")	154	required property int index
		155	property int month: index
154		156
155	color: "#ffead3"	157	id: monthCalendar
156	}
157		158
158	DayOfWeekRow {	159	Layout.alignment: Qt.AlignTop \| Qt.AlignRight
159	locale: grid.locale	160	Layout.fillWidth: false
160		161
161	Layout.row: 1	162	Text {
162	Layout.column: 1	163	Layout.column: 1
163	Layout.fillWidth: true	164	Layout.fillWidth: true
164		165
165	delegate: Text {	166	horizontalAlignment: Text.AlignHCenter
166	required property string shortName
167		167
168	font.pointSize: 10	168	font.pointSize: 10
169	font.family: "Fira Mono"	169	font.family: "Fira Sans"
170		170
171	text: shortName	171	text: new Date(yearCalendar.year, monthCalendar.month, 1).toLocaleString(Qt.locale("en_DK"), "MMMM")
172	color: "#ffcc66"
173		172
174	horizontalAlignment: Text.AlignRight	173	color: "#ffead3"
175	verticalAlignment: Text.AlignVCenter
176	}	174	}
177	}
178		175
179	WeekNumberColumn {	176	DayOfWeekRow {
180	month: grid.month	177	locale: grid.locale
181	year: grid.year
182	locale: grid.locale
183		178
184	Layout.fillHeight: true	179	Layout.row: 1
		180	Layout.column: 1
		181	Layout.fillWidth: true
185		182
186	delegate: Text {	183	delegate: WrapperItem {
187	required property int weekNumber	184	required property string shortName
188		185
189	opacity: {	186	width: dowLabel.contentWidth + 6
190	const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
191	const dayOfWeek = simple.getDay();
192	const isoWeekStart = simple;
193		187
194	isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);	188	Text {
195	if (dayOfWeek > 4) {	189	id: dowLabel
196	isoWeekStart.setDate(isoWeekStart.getDate() + 7);
197	}
198
199	for (let i = 0; i < 7; i++) {
200	const dayInWeek = new Date(isoWeekStart);
201	dayInWeek.setDate(dayInWeek.getDate() + i);
202	if (dayInWeek.getMonth() == monthCalendar.month)
203	return 1;
204	}
205		190
206	return 0;	191	anchors.fill: parent
207	}
208		192
209	font.pointSize: 10	193	font.pointSize: 10
210	font.family: "Fira Sans"	194	font.family: "Fira Sans"
211	font.features: { "tnum": 1 }
212		195
213	text: weekNumber	196	text: parent.shortName
214	color: "#99ffdd"	197	color: "#ffcc66"
215		198
216	horizontalAlignment: Text.AlignRight	199	horizontalAlignment: Text.AlignHCenter
217	verticalAlignment: Text.AlignVCenter	200	verticalAlignment: Text.AlignVCenter
		201	}
		202	}
218	}	203	}
219	}
220		204
221	MonthGrid {	205	WeekNumberColumn {
222	id: grid	206	month: grid.month
		207	year: grid.year
		208	locale: grid.locale
223		209
224	year: yearCalendar.year	210	Layout.fillHeight: true
225	month: monthCalendar.month
226	locale: Qt.locale("en_DK")
227		211
228	Layout.fillWidth: true	212	delegate: Text {
229	Layout.fillHeight: true	213	required property int weekNumber
230		214
231	delegate: Text {	215	opacity: {
232	required property var model	216	const simple = new Date(weekNumber == 1 && monthCalendar.month == 12 ? yearCalendar.year + 1 : yearCalendar.year, 0, 1 + (weekNumber - 1) * 7);
		217	const dayOfWeek = simple.getDay();
		218	const isoWeekStart = simple;
233		219
234	opacity: model.month === monthCalendar.month ? 1 : 0	220	isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
		221	if (dayOfWeek > 4) {
		222	isoWeekStart.setDate(isoWeekStart.getDate() + 7);
		223	}
		224
		225	for (let i = 0; i < 7; i++) {
		226	const dayInWeek = new Date(isoWeekStart);
		227	dayInWeek.setDate(dayInWeek.getDate() + i);
		228	if (dayInWeek.getMonth() == monthCalendar.month)
		229	return 1;
		230	}
		231
		232	return 0;
		233	}
235		234
236	font.pointSize: 10	235	font.pointSize: 10
237	font.family: "Fira Sans"	236	font.family: "Fira Sans"
238	font.features: { "tnum": 1 }	237	font.features: { "tnum": 1 }
239		238
240	property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day	239	text: weekNumber
241		240	color: "#99ffdd"
242	text: model.day
243	color: today ? "#ff6699" : "white"
244		241
245	horizontalAlignment: Text.AlignRight	242	horizontalAlignment: Text.AlignRight
246	verticalAlignment: Text.AlignVCenter	243	verticalAlignment: Text.AlignVCenter
		244	}
		245	}
		246
		247	MonthGrid {
		248	id: grid
		249
		250	year: yearCalendar.year
		251	month: monthCalendar.month
		252	locale: Qt.locale("en_DK")
		253
		254	Layout.fillWidth: true
		255	Layout.fillHeight: true
		256
		257	delegate: Text {
		258	required property var model
		259
		260	opacity: model.month === monthCalendar.month ? 1 : 0
		261
		262	font.pointSize: 10
		263	font.family: "Fira Sans"
		264	font.features: { "tnum": 1 }
		265
		266	property bool today: chrono.date.getFullYear() == model.year && chrono.date.getMonth() == model.month && chrono.date.getDate() == model.day
		267
		268	text: model.day
		269	color: today ? "#ff6699" : "white"
		270
		271	horizontalAlignment: Text.AlignRight
		272	verticalAlignment: Text.AlignVCenter
		273	}
247	}	274	}
248	}	275	}
249	}	276	}