Closes #22 - Implemented numbered workspace identifiers. (#31)

modules/bar/workspaces/index.ts

@@ -144,15 +144,24 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                     class_name: Utils.merge(
                                         [
                                             options.bar.workspaces.show_icons.bind("value"),
+                                            options.bar.workspaces.show_numbered.bind("value"),
+                                            options.bar.workspaces.numbered_active_indicator.bind("value"),
                                             options.bar.workspaces.icons.available.bind("value"),
                                             options.bar.workspaces.icons.active.bind("value"),
                                             options.bar.workspaces.icons.occupied.bind("value"),
                                             hyprland.active.workspace.bind("id")
                                         ],
-                                        (show_icons) => {
+                                        (show_icons, show_numbered, numbered_active_indicator) => {
                                             if (show_icons) {
                                                 return `workspace-icon`;
                                             }
+                                            if (show_numbered) {
+                                                const numActiveInd = hyprland.active.workspace.id === i
+                                                    ? numbered_active_indicator
+                                                    : "";
+
+                                                return `workspace-number ${numActiveInd}`;
+                                            }
                                             return "";
                                         },
                                     ),

options.ts

@@ -82,6 +82,8 @@ const options = mkOptions(OPTIONS, {
                     available: opt(colors.sky),
                     occupied: opt(colors.flamingo),
                     active: opt(colors.pink),
+                    numbered_active_highlight_border: opt("0.2em"),
+                    numbered_active_text_color: opt(colors.mantle),
                 },
                 windowtitle: {
                     background: opt(colors.base2),
@@ -585,6 +587,8 @@ const options = mkOptions(OPTIONS, {
         },
         workspaces: {
             show_icons: opt(false),
+            show_numbered: opt(false),
+            numbered_active_indicator: opt<"underline" | "highlight">("underline"),
             icons: {
                 available: opt(""),
                 active: opt(""),

scss/style/bar/workspace.scss

@@ -33,5 +33,26 @@
       transition: 300ms * .5;
       font-size: 1em;
     }
+
+    &.workspace-number {
+      background-color: transparent;
+      min-width: 0em;
+      min-height: 0em;
+      border-radius: 0em;
+      transition: 0ms;
+      padding: 0em 0.2em;
+      font-size: 1.2em;
+    }
+
+    &.underline {
+      border-bottom: 0.1em solid $pink;
+    }
+
+    &.highlight {
+      color: $bar-buttons-workspaces-numbered_active_text_color;
+      border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
+      background-color: $bar-buttons-workspaces-active;
+      padding: 0em 0.2em;
+    }
   }
 }

widget/settings/SettingsDialog.ts

@@ -3,6 +3,7 @@ import icons from "lib/icons"
 import options from "options"
 import { ThemesMenu } from "./pages/theme/index"
 import { SettingsMenu } from "./pages/config/index"
+import "./side_effects";
 
 type Page = "Configuration" | "Theming"
 

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

@@ -32,6 +32,10 @@ export const BarSettings = () => {
                 Option({ opt: options.bar.workspaces.icons.available, title: 'Workspace Available', type: 'string' }),
                 Option({ opt: options.bar.workspaces.icons.active, title: 'Workspace Active', type: 'string' }),
                 Option({ opt: options.bar.workspaces.icons.occupied, title: 'Workspace Occupied', type: 'string' }),
+                Option({ opt: options.bar.workspaces.show_numbered, title: 'Show Workspace Numbers', type: 'boolean' }),
+                Option({ opt: options.bar.workspaces.numbered_active_indicator, title: 'Numbered Workspace Identifier', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'enum', enums: ["underline", "highlight"] }),
+                Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_border, title: 'Highlight Radius', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'string' }),
+                Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_text_color, title: 'Highlighted Text Color', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'color' }),
                 Option({ opt: options.bar.workspaces.spacing, title: 'Spacing', subtitle: 'Spacing between workspace icons', type: 'float' }),
                 Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', type: 'number' }),
                 Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed', type: 'boolean' }),

widget/settings/side_effects/index.ts

@@ -0,0 +1,15 @@
+import options from "options";
+
+const { show_numbered, show_icons } = options.bar.workspaces;
+
+show_numbered.connect("changed", ({ value }) => {
+    if (value === true) {
+        show_icons.value = false;
+    }
+})
+
+show_icons.connect("changed", ({ value }) => {
+    if (value === true) {
+        show_numbered.value = false;
+    }
+})