4 files changed, 117 insertions, 74 deletions

diff --git a/accounts/gkleen@sif/shell/quickshell/Bar.qml b/accounts/gkleen@sif/shell/quickshell/Bar.qml
index 2f323858..accad2a9 100644
--- a/accounts/gkleen@sif/shell/quickshell/Bar.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Bar.qml
@@ -22,7 +22,7 @@ PanelWindow {
   color: "transparent"
 
   Rectangle {
-    color: Qt.rgba(0, 0, 0, 0.66)
+    color: Qt.rgba(0, 0, 0, 0.75)
     anchors.fill: parent
     // bottomLeftRadius: 8
     // bottomRightRadius: 8
diff --git a/accounts/gkleen@sif/shell/quickshell/Clock.qml b/accounts/gkleen@sif/shell/quickshell/Clock.qml
index 56f8d41f..3e0f8200 100644
--- a/accounts/gkleen@sif/shell/quickshell/Clock.qml
+++ b/accounts/gkleen@sif/shell/quickshell/Clock.qml
@@ -61,18 +61,20 @@ Item {
       Repeater {
         model: 12
 
-        Column {
+        GridLayout {
+          columns: 2
+
           required property int index
           property int month: index
 
           id: monthCalendar
 
-          width: parent.width
-
           Layout.alignment: Qt.AlignTop | Qt.AlignRight
+          Layout.fillWidth: false
 
           Text {
-            width: parent.width
+            Layout.column: 1
+            Layout.fillWidth: true
 
             horizontalAlignment: Text.AlignHCenter
 
@@ -87,96 +89,93 @@ Item {
             color: "#ffead3"
           }
 
-          GridLayout {
-            columns: 2
+          DayOfWeekRow {
+            locale: grid.locale
 
-            DayOfWeekRow {
-              locale: grid.locale
+            Layout.row: 1
+            Layout.column: 1
+            Layout.fillWidth: true
 
-              Layout.column: 1
-              Layout.fillWidth: true
+            delegate: Text {
+              required property string shortName
 
-              delegate: Text {
-                required property string shortName
-
-                font.pointSize: 10
-                font.family: "Fira Mono"
+              font.pointSize: 10
+              font.family: "Fira Mono"
 
-                text: shortName
-                color: "#ffcc66"
+              text: shortName
+              color: "#ffcc66"
 
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-              }
+              horizontalAlignment: Text.AlignRight
+              verticalAlignment: Text.AlignVCenter
             }
+          }
 
-            WeekNumberColumn {
-              month: grid.month
-              year: grid.year
-              locale: grid.locale
-
-              Layout.fillHeight: true
+          WeekNumberColumn {
+            month: grid.month
+            year: grid.year
+            locale: grid.locale
 
-              delegate: Text {
-                required property int weekNumber
+            Layout.fillHeight: true
 
-                opacity: {
-                  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;
+            delegate: Text {
+              required property int weekNumber
 
-                  isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
-                  if (dayOfWeek > 4) {
-                      isoWeekStart.setDate(isoWeekStart.getDate() + 7);
-                  }
+              opacity: {
+                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;
 
-                  for (let i = 0; i < 7; i++) {
-                    const dayInWeek = isoWeekStart;
-                    dayInWeek.setDate(dayInWeek.getDate() + i);
-                    if (dayInWeek.getMonth() == monthCalendar.month)
-                      return 1;
-                  }
+                isoWeekStart.setDate(simple.getDate() - dayOfWeek + 1);
+                if (dayOfWeek > 4) {
+                    isoWeekStart.setDate(isoWeekStart.getDate() + 7);
+                }
 
-                  return 0;
+                for (let i = 0; i < 7; i++) {
+                  const dayInWeek = isoWeekStart;
+                  dayInWeek.setDate(dayInWeek.getDate() + i);
+                  if (dayInWeek.getMonth() == monthCalendar.month)
+                    return 1;
                 }
 
-                font.pointSize: 10
-                font.family: "Fira Sans"
-                font.features: { "tnum": 1 }
+                return 0;
+              }
 
-                text: weekNumber
-                color: "#99ffdd"
+              font.pointSize: 10
+              font.family: "Fira Sans"
+              font.features: { "tnum": 1 }
 
-                horizontalAlignment: Text.AlignRight
-                verticalAlignment: Text.AlignVCenter
-              }
+              text: weekNumber
+              color: "#99ffdd"
+
+              horizontalAlignment: Text.AlignRight
+              verticalAlignment: Text.AlignVCenter
             }
+          }
 
-            MonthGrid {
-              id: grid
+          MonthGrid {
+            id: grid
 
-              year: yearCalendar.year
-              month: monthCalendar.month
-              locale: Qt.locale("en_DK")
+            year: yearCalendar.year
+            month: monthCalendar.month
+            locale: Qt.locale("en_DK")
 
-              Layout.fillWidth: true
-              Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.fillHeight: true
 
-              delegate: Text {
-                  required property var model
+            delegate: Text {
+                required property var model
 
-                  opacity: model.month === monthCalendar.month ? 1 : 0
+                opacity: model.month === monthCalendar.month ? 1 : 0
 
-                  font.pointSize: 10
-                  font.family: "Fira Sans"
-                  font.features: { "tnum": 1 }
+                font.pointSize: 10
+                font.family: "Fira Sans"
+                font.features: { "tnum": 1 }
 
-                  text: model.day
-                  color: model.today ? "#ff6699" : "white"
+                text: model.day
+                color: model.today ? "#ff6699" : "white"
 
-                  horizontalAlignment: Text.AlignRight
-                  verticalAlignment: Text.AlignVCenter
-              }
+                horizontalAlignment: Text.AlignRight
+                verticalAlignment: Text.AlignVCenter
             }
           }
         }
diff --git a/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml b/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
index 4d3bd180..710ea10c 100644
--- a/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
+++ b/accounts/gkleen@sif/shell/quickshell/KeyboardLayout.qml
@@ -56,8 +56,8 @@ Rectangle {
     }
     visible: kbdMouseArea.containsMouse
 
-    implicitWidth: kbdTooltipText.contentWidth + 4
-    implicitHeight: kbdTooltipText.contentHeight + 4
+    implicitWidth: kbdTooltipText.contentWidth + 16
+    implicitHeight: kbdTooltipText.contentHeight + 16
     color: "black"
 
     Text {
diff --git a/accounts/gkleen@sif/shell/quickshell/SystemTray.qml b/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
index a02a81fd..afed4bf0 100644
--- a/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
+++ b/accounts/gkleen@sif/shell/quickshell/SystemTray.qml
@@ -17,7 +17,11 @@ Item {
     spacing: 0
 
     Repeater {
-      model: SystemTray.items.values
+      model: {
+        var trayItems = Array.from(SystemTray.items.values).filter(item => item.status !== Status.Passive);
+        trayItems.sort((a, b) => a.category !== b.category ? b.category - a.category : a.id.localeCompare(b.id))
+        return trayItems;
+      }
 
       delegate: Item {
         property var trayItem: modelData
@@ -59,7 +63,7 @@ Item {
           anchors.fill: parent
           acceptedButtons: Qt.LeftButton | Qt.RightButton
           hoverEnabled: true
-          cursorShape: Qt.PointingHandCursor
+          cursorShape: trayItem.onlyMenu ? Qt.ArrowCursor : Qt.PointingHandCursor
           onClicked: mouse => {
             if (!trayItem)
               return
@@ -85,6 +89,46 @@ Item {
             }
           }
         }
+
+        PopupWindow {
+          anchor {
+            item: trayItemArea
+            edges: Edges.Bottom
+          }
+          visible: (trayItem.tooltipTitle || trayItem.tooltipDescription) && trayItemArea.containsMouse && !menuAnchor.visible
+
+          color: "black"
+
+          implicitWidth: Math.max(tooltipTitle.contentWidth, tooltipDescription.contentWidth) + 16
+          implicitHeight: tooltipTitle.contentHeight + tooltipDescription.contentHeight + 16
+
+          WrapperItem {
+            margin: 8
+
+            Column {
+              Text {
+                id: tooltipTitle
+
+                font.pointSize: 10
+                font.family: "Fira Sans"
+                font.bold: true
+                color: "white"
+
+                text: trayItem.tooltipTitle
+              }
+
+              Text {
+                id: tooltipDescription
+
+                font.pointSize: 10
+                font.family: "Fira Sans"
+                color: "white"
+
+                text: trayItem.tooltipDescription
+              }
+            }
+          }
+        }
       }
     }
   }