ags/bar/workspaces: change style for less jitter during animation

fufexan · Dec 14, 2023 · d20ba52 · d20ba52
1 parent 2e32b21
commit d20ba52
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/home/programs/ags/style/bar.scss b/home/programs/ags/style/bar.scss
@@ -12,16 +12,15 @@
   margin: 0.2rem 0.5rem;
 
   button {
-    font-size: 0.5rem;
     background: rgba(0, 0, 0, 0.3);
     border-radius: 2rem;
     margin: 0.7rem 0.2rem;
-    padding: 0 0.5rem;
-    transition: 0.1s cubic-bezier(0.2, 0, 0, 1);
+    min-width: 1rem;
+    transition: 100ms linear;
   }
 
   .focused {
-    padding: 0 1rem;
+    min-width: 2rem;
   }
 
   .monitor0 {

diff --git a/home/programs/ags/windows/bar/modules/workspaces.js b/home/programs/ags/windows/bar/modules/workspaces.js
@@ -14,6 +14,8 @@ const getMonitorId = (workspace) => {
   return `monitor${monitor}`;
 };
 
+let lastFocused = 0;
+
 const getLastWorkspaceId = () =>
   Hyprland.workspaces
     .sort((x, y) => {
@@ -33,15 +35,6 @@ const makeWorkspaces = () =>
       on_clicked: () => dispatch(id),
 
       className: getMonitorId(Hyprland.getWorkspace(id)),
-
-      connections: [
-        [
-          Hyprland,
-          (btn) => {
-            btn.toggleClassName("focused", Hyprland.active.workspace.id === id);
-          },
-        ],
-      ],
     });
   });
 
@@ -67,6 +60,17 @@ export default Widget.EventBox({
         (_) => (monitors.value = Hyprland.monitors),
         "monitor-removed",
       ],
+      [
+        Hyprland.active.workspace,
+        (self) => {
+          const id = Hyprland.active.workspace.id - 1;
+          if (lastFocused == id) return;
+
+          self.children[lastFocused].toggleClassName("focused", false);
+          self.children[id].toggleClassName("focused", true);
+          lastFocused = id;
+        },
+      ],
     ],
   }),
 });