feat(ags): implement overview into shell

config/ags/config.js

@@ -26,6 +26,7 @@ export default {
     'notification-center': 500,
     'calendar': 500,
     'powermenu': 500,
+    'overview': 500,
   },
   windows: [
     Powermenu,

config/ags/js/misc/popup.js

@@ -4,14 +4,26 @@ const { closeWindow, openWindow } = ags.App;
 export const PopUp = ({name, child, transition = 'slide_down', ...params}) => Revealer({
   ...params,
   // FIXME: popups don't work with revealers
-  setup: () => setTimeout(() => closeWindow(name), 100),
+  setup: () => {
+    setTimeout(() => {
+      closeWindow(name);
+    }, 100);
+
+    // my eyes hurt
+    if (name == 'overview') {
+      setTimeout(() => {
+        openWindow(name);
+        closeWindow(name);
+      }, 700);
+    }
+  },
   transition,
   transitionDuration: 500,
   connections: [[ags.App, (revealer, currentName, visible) => {
     if (currentName === name) {
       revealer.reveal_child = visible;
 
-      if (visible)
+      if (visible && name !== 'overview')
         openWindow('closer');
     }
   }]],

config/ags/js/overview/main.js

@@ -3,6 +3,7 @@ const { Hyprland, Applications } = ags.Service;
 const { Gtk } = imports.gi;
 
 import { EventBox } from '../misc/cursorbox.js';
+import { PopUp } from '../misc/popup.js';
 
 const SCALE = 0.11;
 const MARGIN = 8;
@@ -17,34 +18,16 @@ const DEFAULT_SPECIAL = {
   POS_Y: 170,
 };
 
-export const Overview = Window({
+const WorkspaceRow = className => CenterBox({
-  name: 'overview',
+  children: [ null, Box({ className: className }), null ],
-  layer: 'overlay',
+});
-  popup: true,
+
-  anchor: 'top',
+const OverviewWidget = Box({
-  margin: [ 0, 0, 0, 0 ],
-  child: Box({
   className: 'overview',
   vertical: true,
   children: [
-      CenterBox({
+    WorkspaceRow('normal'),
-        children: [
+    WorkspaceRow('special'),
-          null,
-          Box({
-            className: 'normal',
-          }),
-          null,
-        ],
-      }),
-      CenterBox({
-        children: [
-          null,
-          Box({
-            className: 'special',
-          }),
-          null,
-        ],
-      }),
   ],
   connections: [
     [Hyprland, box => {
@@ -52,7 +35,6 @@ export const Overview = Window({
       box._workspaces = [].concat(box.children[childI++].centerWidget.children,
                                   box.children[childI].centerWidget.children)
                           .sort((a, b) => a._id - b._id);
-
       box._updateWs(box);
       box._updateApps(box);
     }],
@@ -96,7 +78,9 @@ export const Overview = Window({
               );
               existingApp.child.className = `window ${active}`;
               existingApp.child.style = `min-width: ${app.size[0] * SCALE - MARGIN}px;
-                                           min-height: ${app.size[1] * SCALE - MARGIN}px;`;
+                                         min-height: ${app.size[1] * SCALE - MARGIN}px;
+                                         font-size: ${Math.min(app.size[0] * SCALE - MARGIN,
+                                                        app.size[1] * SCALE - MARGIN) - 5}px;`;
             }
             else {
               fixed.put(
@@ -112,9 +96,10 @@ export const Overview = Window({
                   child: Icon({
                     className: `window ${active}`,
                     style: `min-width: ${app.size[0] * SCALE - MARGIN}px;
-                              min-height: ${app.size[1] * SCALE - MARGIN}px;`,
+                            min-height: ${app.size[1] * SCALE - MARGIN}px;
+                            font-size: ${Math.min(app.size[0] * SCALE - MARGIN,
+                                                  app.size[1] * SCALE - MARGIN) * 0.8}px;`,
                     icon: app.class,
-                      size: 40,
                   }),
                 }),
                 app.at[0] * SCALE,
@@ -138,7 +123,7 @@ export const Overview = Window({
 
     ['updateWs', box => {
       Hyprland.workspaces.forEach(ws => {
-          let currentWs = box._workspaces.find(ch => ch._id == ws.id)
+        let currentWs = box._workspaces.find(ch => ch._id == ws.id);
         if (!currentWs) {
           var childI = 0;
           if (ws.id < 0) {
@@ -178,5 +163,14 @@ export const Overview = Window({
       });
     }],
   ],
+});
+
+export const Overview = Window({
+  name: 'overview',
+  layer: 'overlay',
+  child: PopUp({
+    name: 'overview',
+    transition: 'crossfade',
+    child: OverviewWidget,
   }),
 });

config/ags/scss/widgets/overview.scss

@@ -1,10 +1,15 @@
 .overview {
+  background-color: $bg;
+  border-radius: 30px;
+  border: 2px solid $contrastbg;
+  padding: 10px;
   min-height: 1px;
   min-width: 1px;
 
   .workspace {
     padding: 4px;
     border: 2px solid transparent;
+    transition: border-color 0.2s ease-in-out;
     border-radius: 10px;
 
     &.active {
@@ -17,7 +22,8 @@
     margin: 0 10px;
     transition: min-width 0.2s ease-in-out,
                 min-height 0.2s ease-in-out,
-                border-color 0.2s ease-in-out;
+                border-color 0.2s ease-in-out,
+                font-size 0.2s ease-in-out;
   }
 
   .normal {

config/ags/scss/widgets/quick-settings.scss

@@ -3,10 +3,7 @@
   min-width: 500px;
   padding: 0px 0px 0px 0px;
   background-color: $bg;
-  border-top-right-radius: 0px;
+  border-radius: 30px 0 30px 30px;
-  border-top-left-radius: 30px;
-  border-bottom-left-radius: 30px;
-  border-bottom-right-radius: 30px;
   border: 2px solid $contrastbg;
 }
 

config/ags/style.css

@@ -456,10 +456,7 @@ calendar:indeterminate {
   min-width: 500px;
   padding: 0px 0px 0px 0px;
   background-color: rgba(40, 42, 54, 0.8);
-  border-top-right-radius: 0px;
+  border-radius: 30px 0 30px 30px;
-  border-top-left-radius: 30px;
-  border-bottom-left-radius: 30px;
-  border-bottom-right-radius: 30px;
   border: 2px solid rgba(189, 147, 249, 0.8); }
 
 .title {
@@ -666,18 +663,23 @@ calendar:indeterminate {
   transition: background-color 0.5s ease-in-out; }
 
 .overview {
+  background-color: rgba(40, 42, 54, 0.8);
+  border-radius: 30px;
+  border: 2px solid rgba(189, 147, 249, 0.8);
+  padding: 10px;
   min-height: 1px;
   min-width: 1px; }
   .overview .workspace {
     padding: 4px;
     border: 2px solid transparent;
+    transition: border-color 0.2s ease-in-out;
     border-radius: 10px; }
     .overview .workspace.active {
       border: 2px solid black; }
   .overview .workspace .window {
     border-radius: 10px;
     margin: 0 10px;
-    transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out; }
+    transition: min-width 0.2s ease-in-out, min-height 0.2s ease-in-out, border-color 0.2s ease-in-out, font-size 0.2s ease-in-out; }
   .overview .normal {
     margin-bottom: 5px; }
     .overview .normal .workspace .window {

config/hypr/main.conf

@@ -183,6 +183,8 @@ bind = $mainMod, right, movefocus, r
 bind = $mainMod, up, movefocus, u
 bind = $mainMod, down, movefocus, d
 
+bind = ALT, Tab, exec, ags -t overview
+
 # Switch workspaces with mainMod + [0-9]
 bind = $mainMod, 1, workspace, 1
 bind = $mainMod, 2, workspace, 2