Workspace bar changes (#129)

* workspace mask + 'color only' indicator

* edits

* edits - 2

* Update modules/bar/workspaces/index.ts

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

modules/bar/workspaces/index.ts

@@ -2,7 +2,14 @@ const hyprland = await Service.import("hyprland");
 import { WorkspaceRule, WorkspaceMap } from "lib/types/workspace";
 import options from "options";
 
-const { workspaces, monitorSpecific, reverse_scroll, scroll_speed, spacing } = options.bar.workspaces;
+const { 
+    workspaces, 
+    monitorSpecific,
+    workspaceMask, 
+    reverse_scroll, 
+    scroll_speed, 
+    spacing 
+} = options.bar.workspaces;
 
 function range(length: number, start = 1) {
     return Array.from({ length }, (_, i) => i + start);
@@ -158,7 +165,7 @@ const Workspaces = (monitor = -1, ws = 8) => {
                             const workspaceRules = getWorkspaceRules();
                             return getWorkspacesForMonitor(i, workspaceRules);
                         })
-                        .map((i) => {
+                        .map((i, index) => {
                             return Widget.Button({
                                 class_name: "workspace-button",
                                 on_primary_click: () => {
@@ -199,9 +206,10 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                             options.bar.workspaces.icons.available.bind("value"),
                                             options.bar.workspaces.icons.active.bind("value"),
                                             options.bar.workspaces.icons.occupied.bind("value"),
+                                            workspaceMask.bind("value"),
                                             hyprland.active.workspace.bind("id")
                                         ],
-                                        (showIcons, available, active, occupied, _) => {
+                                        (showIcons, available, active, occupied, workspaceMask, _) => {
                                             if (showIcons) {
                                                 if (hyprland.active.workspace.id === i) {
                                                     return active;
@@ -215,7 +223,9 @@ const Workspaces = (monitor = -1, ws = 8) => {
                                                     return available;
                                                 }
                                             }
-                                            return `${i}`;
+                                            return workspaceMask
+                                                ? `${index + 1}`
+                                                : `${i}`;
                                         },
                                     ),
                                     setup: (self) => {
@@ -260,4 +270,4 @@ const Workspaces = (monitor = -1, ws = 8) => {
         }
     };
 };
-export { Workspaces };
+export { Workspaces };

options.ts

@@ -675,6 +675,7 @@ const options = mkOptions(OPTIONS, {
             workspaces: opt(10),
             spacing: opt(1),
             monitorSpecific: opt(true),
+            workspaceMask: opt(false),
             reverse_scroll: opt(false),
             scroll_speed: opt(5),
         },

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

@@ -33,12 +33,13 @@ export const BarSettings = () => {
                 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.bar.workspaces.numbered_active_indicator, title: 'Numbered Workspace Identifier', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'enum', enums: ["underline", "highlight", "color"] }),
                 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_highlight_padding, title: 'Highlight Padding', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'string' }),
                 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' }),
+                Option({ opt: options.bar.workspaces.workspaceMask, title: 'Mask Workspace Numbers On Monitors', subtitle: 'Only applicable if Workspace Numbers and Monitor Specific are enabled.\nForces each Monitor\'s Workspace labels to start from 1.', type: 'boolean' }),
                 Option({ opt: options.bar.workspaces.reverse_scroll, title: 'Invert Scroll', subtitle: 'Scrolling up will go to the previous workspace rather than the next.', type: 'boolean' }),
                 Option({ opt: options.bar.workspaces.scroll_speed, title: 'Scrolling Speed', type: 'number' }),
 

widget/settings/shared/Inputter.ts

@@ -46,6 +46,7 @@ export const Inputter = <T>({
     isUnsaved: Variable<boolean>
 ) => {
     return Widget.Box({
+        vpack: "center",
         class_name: /export|import/.test(type || "") ? "" : "inputter-container",
         setup: self => {