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 = () => {
+
+    const clockTime = Widget.Label({
+        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.Label({
-            class_name: "clock",
-            label: time.bind(),
+        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",