Added an icon to the calendar widget in the bar. (#181)

* Added an icon to the calendar widget in the bar.

* Updated themes for calendar icon.

modules/bar/Bar.ts

@@ -17,6 +17,8 @@ import Gdk from "gi://Gdk?version=3.0";
 import Button from "types/widgets/button.js";
 import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";
 
+import './SideEffects';
+
 const { layouts } = options.bar;
 
 export type BarWidget = keyof typeof widget;

modules/bar/SideEffects.ts

@@ -0,0 +1,15 @@
+import options from "options";
+
+const { showIcon, showTime } = options.bar.clock;
+
+showIcon.connect("changed", () => {
+    if (!showTime.value && !showIcon.value) {
+        showTime.value = true;
+    }
+});
+
+showTime.connect("changed", () => {
+    if (!showTime.value && !showIcon.value) {
+        showIcon.value = true;
+    }
+});

modules/bar/clock/index.ts

@@ -2,7 +2,9 @@ import Gdk from 'gi://Gdk?version=3.0';
 import GLib from "gi://GLib";
 import { openMenu } from "../utils.js";
 import options from "options";
-const { format } = options.bar.clock;
+const { format, icon, showIcon, showTime } = options.bar.clock;
+const { style } = options.theme.bar.buttons;
+
 
 const date = Variable(GLib.DateTime.new_now_local(), {
     poll: [1000, () => GLib.DateTime.new_now_local()],
@@ -10,10 +12,41 @@ const date = Variable(GLib.DateTime.new_now_local(), {
 const time = Utils.derive([date, format], (c, f) => c.format(f) || "");
 
 const Clock = () => {
-    return {
+
-        component: Widget.Label({
+    const clockTime = Widget.Label({
-            class_name: "clock",
+        class_name: "bar-button-label clock bar",
         label: time.bind(),
+    });
+
+    const clockIcon = Widget.Label({
+        label: icon.bind("value"),
+        class_name: "bar-button-icon clock txt-icon bar",
+    });
+
+    return {
+        component: Widget.Box({
+            className: Utils.merge([
+                style.bind("value"),
+                showIcon.bind("value"), showTime.bind("value")
+            ], (btnStyle, shwIcn, shwLbl) => {
+                const styleMap = {
+                    default: "style1",
+                    split: "style2",
+                    wave: "style3",
+                };
+
+                return `bluetooth ${styleMap[btnStyle]} ${!shwLbl ? "no-label" : ""} ${!shwIcn ? "no-icon" : ""}`;
+            }),
+            children: Utils.merge([showIcon.bind("value"), showTime.bind("value")], (shIcn, shTm) => {
+
+                if (shIcn && !shTm) {
+                    return [clockIcon];
+                } else if (shTm && !shIcn) {
+                    return [clockTime];
+                }
+
+                return [clockIcon, clockTime];
+            })
         }),
         isVisible: true,
         boxClass: "clock",

options.ts

@@ -226,6 +226,7 @@ const options = mkOptions(OPTIONS, {
                     hover: opt(colors.surface1),
                     text: opt(colors.pink),
                     icon: opt(colors.pink),
+                    icon_background: opt(colors.base2),
                     spacing: opt("0.5em"),
                 },
                 notifications: {
@@ -741,7 +742,10 @@ const options = mkOptions(OPTIONS, {
             ]),
         },
         clock: {
-            format: opt("󰃭  %a %b %d    %I:%M:%S %p"),
+            icon: opt("󰸗"),
+            showIcon: opt(true),
+            showTime: opt(true),
+            format: opt("%a %b %d  %I:%M:%S %p"),
         },
         media: {
             show_artist: opt(false),

scss/style/bar/bar.scss

@@ -175,6 +175,11 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
         background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value);
         color: $bar-buttons-windowtitle-icon_background;
       }
+
+      .clock.bar-button-icon {
+        background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-clock-hover), $transparency-value);
+        color: $bar-buttons-clock-icon_background;
+      }
     }
   }
 }

scss/style/bar/clock.scss

@@ -1,7 +1,27 @@
-.clock {
+.bar-button-label.clock {
   color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
+  margin-left: $bar-buttons-clock-spacing;
 }
 
-.style2.clock {
+.bar-button-icon.clock {
-  padding: $bar-buttons-padding_y $bar-buttons-padding_x;
+  font-size: 1.2em;
+  color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-clock-icon);
+}
+
+.style2 {
+  .bar-button-icon.clock {
+    border-top-left-radius: $bar-buttons-radius;
+    border-bottom-left-radius: $bar-buttons-radius;
+    background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-clock-icon_background);
+    padding: $bar-buttons-padding_y 0em;
+    padding-left: $bar-buttons-padding_x;
+    padding-right: $bar-buttons-media-spacing;
+  }
+
+  .bar-button-label.clock {
+    padding: $bar-buttons-padding_y 0em;
+    padding-right: $bar-buttons-padding_x;
+    padding-left: $bar-buttons-clock-spacing;
+    margin-left: 0em;
+  }
 }

themes/catppuccin_frappe_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#303446",
   "theme.bar.buttons.notifications.hover": "#51576d",
   "theme.bar.buttons.notifications.background": "#303446",
-  "theme.bar.buttons.clock.icon": "#f4b8e4",
+  "theme.bar.buttons.clock.icon": "#303446",
   "theme.bar.buttons.clock.text": "#f4b8e4",
   "theme.bar.buttons.clock.hover": "#51576d",
   "theme.bar.buttons.clock.background": "#303446",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#f4b8e4",
   "theme.bar.buttons.media.icon_background": "#babbf1",
   "theme.bar.buttons.notifications.icon_background": "#b4befe",
-  "theme.bar.buttons.battery.icon_background": "#e5c890"
+  "theme.bar.buttons.battery.icon_background": "#e5c890",
+  "theme.bar.buttons.clock.icon_background": "#f4b8e4"
 }

themes/catppuccin_latte_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#dcdee8",
   "theme.bar.buttons.notifications.hover": "#bcc0cc",
   "theme.bar.buttons.notifications.background": "#dcdfe8",
-  "theme.bar.buttons.clock.icon": "#ea76cb",
+  "theme.bar.buttons.clock.icon": "#dcdee8",
   "theme.bar.buttons.clock.text": "#ea76cb",
   "theme.bar.buttons.clock.hover": "#bcc0cc",
   "theme.bar.buttons.clock.background": "#dcdfe8",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#ea76cb",
   "theme.bar.buttons.media.icon_background": "#7287fd",
   "theme.bar.buttons.notifications.icon_background": "#7287fd",
-  "theme.bar.buttons.battery.icon_background": "#df8e1d"
+  "theme.bar.buttons.battery.icon_background": "#df8e1d",
+  "theme.bar.buttons.clock.icon_background": "#ea76cb"
 }

themes/catppuccin_macchiato_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#24273a",
   "theme.bar.buttons.notifications.hover": "#494d64",
   "theme.bar.buttons.notifications.background": "#24273a",
-  "theme.bar.buttons.clock.icon": "#f5bde6",
+  "theme.bar.buttons.clock.icon": "#24273a",
   "theme.bar.buttons.clock.text": "#f5bde6",
   "theme.bar.buttons.clock.hover": "#494d64",
   "theme.bar.buttons.clock.background": "#24273a",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#f5bde6",
   "theme.bar.buttons.media.icon_background": "#b7bcf8",
   "theme.bar.buttons.notifications.icon_background": "#b7bcf8",
-  "theme.bar.buttons.battery.icon_background": "#eed49f"
+  "theme.bar.buttons.battery.icon_background": "#eed49f",
+  "theme.bar.buttons.clock.icon_background": "#f5bde6"
 }

themes/catppuccin_mocha_split.json

@@ -203,11 +203,11 @@
   "theme.bar.buttons.notifications.icon": "#1e1e2e",
   "theme.bar.buttons.notifications.hover": "#45475a",
   "theme.bar.buttons.notifications.background": "#242438",
-  "theme.bar.buttons.clock.icon": "#f5c2e7",
+  "theme.bar.buttons.clock.icon": "#232338",
   "theme.bar.buttons.clock.text": "#f5c2e7",
   "theme.bar.buttons.clock.hover": "#45475a",
   "theme.bar.buttons.clock.background": "#242438",
-  "theme.bar.buttons.battery.icon": "#f9e2af",
+  "theme.bar.buttons.battery.icon": "#242438",
   "theme.bar.buttons.battery.text": "#f9e2af",
   "theme.bar.buttons.battery.hover": "#45475a",
   "theme.bar.buttons.battery.background": "#242438",
@@ -263,10 +263,12 @@
   "theme.bar.menus.check_radio_button.active": "#b4beff",
   "theme.bar.buttons.style": "split",
   "theme.bar.buttons.icon_background": "#242438",
-  "theme.bar.buttons.volume.icon_background": "#f5c2e7",
+  "theme.bar.buttons.volume.icon_background": "#eba0ac",
   "theme.bar.buttons.network.icon_background": "#caa6f7",
   "theme.bar.buttons.bluetooth.icon_background": "#89dbeb",
   "theme.bar.buttons.windowtitle.icon_background": "#f5c2e7",
   "theme.bar.buttons.media.icon_background": "#b4befe",
-  "theme.bar.buttons.notifications.icon_background": "#b4befe"
+  "theme.bar.buttons.notifications.icon_background": "#b4befe",
+  "theme.bar.buttons.battery.icon_background": "#f9e2af",
+  "theme.bar.buttons.clock.icon_background": "#f5c2e7"
 }

themes/cyberpunk_split.json

@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#5bafff",
   "theme.bar.buttons.media.icon_background": "#00ffff",
   "theme.bar.buttons.notifications.icon_background": "#f7d04b",
-  "theme.bar.buttons.battery.icon_background": "#f7d04b"
+  "theme.bar.buttons.battery.icon_background": "#f7d04b",
+  "theme.bar.buttons.clock.icon_background": "#5bafff"
 }

themes/dracula_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#44475a",
   "theme.bar.buttons.notifications.hover": "#6272a4",
   "theme.bar.buttons.notifications.background": "#44475a",
-  "theme.bar.buttons.clock.icon": "#ff79c6",
+  "theme.bar.buttons.clock.icon": "#44475a",
   "theme.bar.buttons.clock.text": "#ff79c6",
   "theme.bar.buttons.clock.hover": "#6272a4",
   "theme.bar.buttons.clock.background": "#44475a",
@@ -234,7 +234,7 @@
   "theme.bar.buttons.workspaces.active": "#ff79c6",
   "theme.bar.buttons.workspaces.occupied": "#ffb86c",
   "theme.bar.buttons.workspaces.available": "#8be9fd",
-  "theme.bar.buttons.workspaces.hover": "#e23ee2",
+  "theme.bar.buttons.workspaces.hover": "#ff79c6",
   "theme.bar.buttons.workspaces.background": "#44475a",
   "theme.bar.buttons.dashboard.icon": "#44475a",
   "theme.bar.buttons.dashboard.hover": "#6272a4",
@@ -256,8 +256,8 @@
   "theme.notification.actions.text": "#282a36",
   "theme.notification.actions.background": "#bd93f9",
   "theme.notification.background": "#44475a",
-  "theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#e23fe2",
+  "theme.bar.buttons.workspaces.numbered_active_highlighted_text_color": "#ff79c6",
-  "theme.bar.buttons.workspaces.numbered_active_underline_color": "#e23ee2",
+  "theme.bar.buttons.workspaces.numbered_active_underline_color": "#ff79c6",
   "theme.bar.menus.menu.media.card.color": "#44475a",
   "theme.bar.menus.check_radio_button.background": "#282936",
   "theme.bar.menus.check_radio_button.active": "#bd93f9",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#f1fa8c",
   "theme.bar.buttons.media.icon_background": "#bd93f9",
   "theme.bar.buttons.notifications.icon_background": "#bd93f9",
-  "theme.bar.buttons.battery.icon_background": "#f1fa8c"
+  "theme.bar.buttons.battery.icon_background": "#f1fa8c",
+  "theme.bar.buttons.clock.icon_background": "#ff79c6"
 }

themes/everforest_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#323d43",
   "theme.bar.buttons.notifications.hover": "#454b53",
   "theme.bar.buttons.notifications.background": "#323d43",
-  "theme.bar.buttons.clock.icon": "#dbbc7f",
+  "theme.bar.buttons.clock.icon": "#323d43",
   "theme.bar.buttons.clock.text": "#dbbc7f",
   "theme.bar.buttons.clock.hover": "#454b53",
   "theme.bar.buttons.clock.background": "#323d43",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#dbbc7f",
   "theme.bar.buttons.media.icon_background": "#a7c080",
   "theme.bar.buttons.notifications.icon_background": "#83c092",
-  "theme.bar.buttons.battery.icon_background": "#e69875"
+  "theme.bar.buttons.battery.icon_background": "#e69875",
+  "theme.bar.buttons.clock.icon_background": "#dbbc7f"
 }

themes/gruvbox_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#282828",
   "theme.bar.buttons.notifications.hover": "#504945",
   "theme.bar.buttons.notifications.background": "#282828",
-  "theme.bar.buttons.clock.icon": "#d3869b",
+  "theme.bar.buttons.clock.icon": "#282828",
   "theme.bar.buttons.clock.text": "#d3869b",
   "theme.bar.buttons.clock.hover": "#504945",
   "theme.bar.buttons.clock.background": "#282828",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#d3869b",
   "theme.bar.buttons.media.icon_background": "#83a598",
   "theme.bar.buttons.notifications.icon_background": "#83a598",
-  "theme.bar.buttons.battery.icon_background": "#fabd2f"
+  "theme.bar.buttons.battery.icon_background": "#fabd2f",
+  "theme.bar.buttons.clock.icon_background": "#d3869b"
 }

themes/monochrome_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#090909",
   "theme.bar.buttons.notifications.hover": "#444444",
   "theme.bar.buttons.notifications.background": "#090909",
-  "theme.bar.buttons.clock.icon": "#FFFFFF",
+  "theme.bar.buttons.clock.icon": "#000000",
   "theme.bar.buttons.clock.text": "#FFFFFF",
   "theme.bar.buttons.clock.hover": "#444444",
   "theme.bar.buttons.clock.background": "#090909",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#ffffff",
   "theme.bar.buttons.media.icon_background": "#ffffff",
   "theme.bar.buttons.notifications.icon_background": "#ffffff",
-  "theme.bar.buttons.battery.icon_background": "#ffffff"
+  "theme.bar.buttons.battery.icon_background": "#ffffff",
+  "theme.bar.buttons.clock.icon_background": "#ffffff"
 }

themes/nord_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#3b4252",
   "theme.bar.buttons.notifications.hover": "#434c53",
   "theme.bar.buttons.notifications.background": "#3b4252",
-  "theme.bar.buttons.clock.icon": "#8fbcbb",
+  "theme.bar.buttons.clock.icon": "#3b4252",
   "theme.bar.buttons.clock.text": "#8fbcbb",
   "theme.bar.buttons.clock.hover": "#434c53",
   "theme.bar.buttons.clock.background": "#3b4252",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#8fbcbb",
   "theme.bar.buttons.media.icon_background": "#88c0d0",
   "theme.bar.buttons.notifications.icon_background": "#88c0d0",
-  "theme.bar.buttons.battery.icon_background": "#81a1c1"
+  "theme.bar.buttons.battery.icon_background": "#81a1c1",
+  "theme.bar.buttons.clock.icon_background": "#8fbcbb"
 }

themes/one_dark_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#21252b",
   "theme.bar.buttons.notifications.hover": "#4b5263",
   "theme.bar.buttons.notifications.background": "#21252b",
-  "theme.bar.buttons.clock.icon": "#98c379",
+  "theme.bar.buttons.clock.icon": "#21252b",
   "theme.bar.buttons.clock.text": "#98c379",
   "theme.bar.buttons.clock.hover": "#4b5263",
   "theme.bar.buttons.clock.background": "#21252b",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#98c379",
   "theme.bar.buttons.media.icon_background": "#61afef",
   "theme.bar.buttons.notifications.icon_background": "#61afef",
-  "theme.bar.buttons.battery.icon_background": "#e5c07b"
+  "theme.bar.buttons.battery.icon_background": "#e5c07b",
+  "theme.bar.buttons.clock.icon_background": "#98c379"
 }

themes/rose_pine_moon_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#2a283e",
   "theme.bar.buttons.notifications.hover": "#393552",
   "theme.bar.buttons.notifications.background": "#2a283e",
-  "theme.bar.buttons.clock.icon": "#c4a7e7",
+  "theme.bar.buttons.clock.icon": "#2a283e",
   "theme.bar.buttons.clock.text": "#c4a7e7",
   "theme.bar.buttons.clock.hover": "#393552",
   "theme.bar.buttons.clock.background": "#2a283e",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#c4a7e7",
   "theme.bar.buttons.media.icon_background": "#c4a7e7",
   "theme.bar.buttons.notifications.icon_background": "#c4a7e7",
-  "theme.bar.buttons.battery.icon_background": "#f6c177"
+  "theme.bar.buttons.battery.icon_background": "#f6c177",
+  "theme.bar.buttons.clock.icon_background": "#c4a7e7"
 }

themes/rose_pine_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#21202e",
   "theme.bar.buttons.notifications.hover": "#26233a",
   "theme.bar.buttons.notifications.background": "#21202e",
-  "theme.bar.buttons.clock.icon": "#c4a7e7",
+  "theme.bar.buttons.clock.icon": "#21202e",
   "theme.bar.buttons.clock.text": "#c4a7e7",
   "theme.bar.buttons.clock.hover": "#26233a",
   "theme.bar.buttons.clock.background": "#21202e",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#c4a7e7",
   "theme.bar.buttons.media.icon_background": "#c4a7e7",
   "theme.bar.buttons.notifications.icon_background": "#c4a7e7",
-  "theme.bar.buttons.battery.icon_background": "#f6c177"
+  "theme.bar.buttons.battery.icon_background": "#f6c177",
+  "theme.bar.buttons.clock.icon_background": "#c4a7e7"
 }

themes/tokyo_night_split.json

@@ -203,7 +203,7 @@
   "theme.bar.buttons.notifications.icon": "#272a3d",
   "theme.bar.buttons.notifications.hover": "#414868",
   "theme.bar.buttons.notifications.background": "#272a3d",
-  "theme.bar.buttons.clock.icon": "#f7768e",
+  "theme.bar.buttons.clock.icon": "#272a3d",
   "theme.bar.buttons.clock.text": "#f7768e",
   "theme.bar.buttons.clock.hover": "#414868",
   "theme.bar.buttons.clock.background": "#272a3d",
@@ -269,5 +269,6 @@
   "theme.bar.buttons.windowtitle.icon_background": "#f7768e",
   "theme.bar.buttons.media.icon_background": "#bb9af7",
   "theme.bar.buttons.notifications.icon_background": "#bb9af7",
-  "theme.bar.buttons.battery.icon_background": "#e0af68"
+  "theme.bar.buttons.battery.icon_background": "#e0af68",
+  "theme.bar.buttons.clock.icon_background": "#f7768e"
 }

widget/settings/pages/config/bar/index.ts

@@ -96,6 +96,9 @@ Forces each Monitor's Workspace labels to start from 1.`,
 
                 Header('Clock'),
                 Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
+                Option({ opt: options.bar.clock.icon, title: 'Icon', type: 'string' }),
+                Option({ opt: options.bar.clock.showIcon, title: 'Show Icon', type: 'boolean' }),
+                Option({ opt: options.bar.clock.showTime, title: 'Show Time', type: 'boolean' }),
 
                 Header('Media'),
                 Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),

widget/settings/pages/theme/bar/index.ts

@@ -126,6 +126,12 @@ export const BarTheme = () => {
                 Option({ opt: options.theme.bar.buttons.clock.hover, title: 'Hover', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.clock.text, title: 'Text', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.clock.icon, title: 'Icon', type: 'color' }),
+                Option({
+                    opt: options.theme.bar.buttons.clock.icon_background,
+                    title: 'Button Icon Background',
+                    subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
+                    type: 'color'
+                }),
 
                 Header('Notifications'),
                 Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),