devices/wim/config/ags/js/bar/workspaces.js

@@ -1,5 +1,5 @@
 import { Hyprland, Utils, Widget } from '../../imports.js';
-const { Box, Overlay, Revealer } = Widget;
+const { Box, Revealer } = Widget;
 const { execAsync } = Utils;
 
 import EventBox from '../misc/cursorbox.js';
@@ -17,10 +17,10 @@ const Workspace = ({ i } = {}) =>
                     .catch(print);
             },
             child: Box({
-                valign: 'center',
                 className: 'button',
                 connections: [[Hyprland, self => {
                     const occupied = Hyprland.getWorkspace(i)?.windows > 0;
+                    self.toggleClassName('active', Hyprland.active.workspace.id === i);
                     self.toggleClassName('occupied', occupied);
                     self.toggleClassName('empty', !occupied);
                 }]],
@@ -28,28 +28,10 @@ const Workspace = ({ i } = {}) =>
         }),
     });
 
-export default () => Overlay({
+export default () => Box({
-    setup: self => {
+    className: 'workspaces',
-        self.set_overlay_pass_through(
+    children: [EventBox({
-            self.get_children()[1],
-            true,
-        );
-    },
-    overlays: [Box({
-        valign: 'center',
-        halign: 'start',
-        className: 'button active',
-        connections: [[Hyprland.active.workspace, self => {
-            const currentId = Hyprland.active.workspace.id;
-            const indicators = self.get_parent().get_children()[0].child.children;
-            const currentIndex = indicators.findIndex(w => w._id == currentId);
-
-            self.setStyle(`margin-left: ${16 + currentIndex * 30}px`);
-        }]],
-    })],
-    child: EventBox({
         child: Box({
-            className: 'workspaces',
             properties: [
                 ['workspaces'],
 
@@ -60,7 +42,7 @@ export default () => Overlay({
                     });
                 }],
 
-                ['updateWorkspaces', self => {
+                ['updateWs', self => {
                     Hyprland.workspaces.forEach(ws => {
                         const currentWs = self.children.find(ch => ch._id == ws.id);
                         if (!currentWs && ws.id > 0)
@@ -79,9 +61,9 @@ export default () => Overlay({
                     return Hyprland.workspaces.find(ws => ws.id == ch._id);
                 }).sort((a, b) => a._id - b._id);
 
-                self._updateWorkspaces(self);
+                self._updateWs(self);
                 self._refresh(self);
             }]],
         }),
-    }),
+    })],
 });

devices/wim/config/ags/scss/widgets/workspaces.scss

@@ -3,27 +3,27 @@
   border-radius: 80px;
   border: 2px solid $bg-secondary;
   padding: 3px 12px;
-}
 
-.button {
+  .button {
-  margin: 0 2.5px;
+    margin: 2px;
-  min-height: 22px;
+    min-width: 20px;
-  min-width: 22px;
+    border-radius: 100%;
-  border-radius: 100%;
+    * {color: transparent;}
-}
+  }
+  
+  .empty {
+    border: none;
+    transition: border-color 0.25s linear;
+  }
 
-.empty {
+  .occupied {
-  border: 2px solid transparent;
+    border: 2px solid $bg;
-  transition: border-color 0.25s linear;
+    background: $contrast-bg;
-}
+    transition: border-color 0.25s linear;
+  }
 
-.occupied {
+  .active {
-  border: 2px solid $bg;
+    border: 2px solid #50fa7b;
-  background: $contrast-bg;
+    transition: border-color 0.25s linear;
-  transition: border-color 0.25s linear;
+  }
-}
-
-.active {
-  border: 2px solid #50fa7b;
-  transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 }