From 297e274c9a094da0e91044275dda8d3b04924bc2 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Mon, 30 Oct 2023 22:00:46 -0400 Subject: [PATCH] feat(ags overview): redesign workspace overview --- .../ags/js/overview/current-workspace.js | 35 +++++ .../wim/config/ags/js/overview/dragndrop.js | 2 +- devices/wim/config/ags/js/overview/main.js | 66 +++++---- .../wim/config/ags/js/overview/workspaces.js | 128 ++++-------------- .../wim/config/ags/scss/widgets/overview.scss | 4 + devices/wim/config/hypr/main.conf | 1 + 6 files changed, 103 insertions(+), 133 deletions(-) create mode 100644 devices/wim/config/ags/js/overview/current-workspace.js diff --git a/devices/wim/config/ags/js/overview/current-workspace.js b/devices/wim/config/ags/js/overview/current-workspace.js new file mode 100644 index 00000000..96047ffa --- /dev/null +++ b/devices/wim/config/ags/js/overview/current-workspace.js @@ -0,0 +1,35 @@ +import { Hyprland, Widget } from '../../imports.js'; +const { Box } = Widget; +import * as VARS from './variables.js'; + +const DEFAULT_STYLE = ` + min-width: ${VARS.SCREEN.X * VARS.SCALE}px; + min-height: ${VARS.SCREEN.Y * VARS.SCALE - 4}px; + border-radius: 10px; +`; + + +export const Highlighter = () => Box({ + valign: 'start', + halign: 'start', + className: 'workspace active', + style: DEFAULT_STYLE, +}); + +export const updateCurrentWorkspace = self => { + self = self.get_parent().get_children()[1]; + const currentId = Hyprland.active.workspace.id; + const row = Math.floor((currentId - 1) / VARS.WORKSPACE_PER_ROW); + + const rowObject = self.get_parent().get_children()[0].children[0].children[row]; + const workspaces = rowObject.child.centerWidget.child.get_children().filter(w => w.revealChild); + + const height = row * (VARS.SCREEN.Y * VARS.SCALE + 17); + const currentIndex = workspaces.findIndex(w => w._id == currentId); + + self.setStyle(` + ${DEFAULT_STYLE} + margin-left: ${9 + currentIndex * (VARS.SCREEN.X * VARS.SCALE + 34)}px; + margin-top: ${9 + height}px; + `); +}; diff --git a/devices/wim/config/ags/js/overview/dragndrop.js b/devices/wim/config/ags/js/overview/dragndrop.js index 04bdf560..93d1e03b 100644 --- a/devices/wim/config/ags/js/overview/dragndrop.js +++ b/devices/wim/config/ags/js/overview/dragndrop.js @@ -67,7 +67,7 @@ export const WindowButton = ({ address, ...props } = {}) => Button({ self.get_parent().destroy(); const mainBox = App.getWindow('overview').getChild(); - updateClients(mainBox); + updateClients(mainBox.child); }); }, }); diff --git a/devices/wim/config/ags/js/overview/main.js b/devices/wim/config/ags/js/overview/main.js index 462a9df5..9671e9c9 100644 --- a/devices/wim/config/ags/js/overview/main.js +++ b/devices/wim/config/ags/js/overview/main.js @@ -1,8 +1,9 @@ import { App, Hyprland, Widget } from '../../imports.js'; -const { Box } = Widget; +const { Box, Overlay } = Widget; import PopupWindow from '../misc/popup.js'; import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js'; +import { Highlighter, updateCurrentWorkspace } from './current-workspace.js'; import { updateClients } from './clients.js'; @@ -10,40 +11,49 @@ function update(box) { getWorkspaces(box); updateWorkspaces(box); updateClients(box); + updateCurrentWorkspace(box); } export default () => PopupWindow({ name: 'overview', - transition: 'crossfade', closeOnUnfocus: 'none', - onOpen: child => update(child), + onOpen: child => update(child.child), - child: Box({ - className: 'overview', - vertical: true, - children: [ - Box({ - vertical: true, - children: [ - WorkspaceRow('normal', 0), - ], - }), - Box({ - vertical: true, - children: [ - WorkspaceRow('special', 0), - ], - }), - ], - connections: [[Hyprland, self => { - if (!App.getWindow('overview').visible) - return; + child: Overlay({ + setup: self => { + self.set_overlay_pass_through( + self.get_children()[1], + true, + ); + }, + overlays: [Highlighter()], + child: Box({ + className: 'overview', + vertical: true, + children: [ + Box({ + vertical: true, + children: [ + WorkspaceRow('normal', 0), + ], + }), + Box({ + vertical: true, + children: [ + WorkspaceRow('special', 0), + ], + }), + ], + connections: [[Hyprland, self => { + if (!App.getWindow('overview').visible) + return; - update(self); - }]], - properties: [ - ['workspaces'], - ], + update(self); + }]], + properties: [ + ['workspaces'], + ], + }), }), }); diff --git a/devices/wim/config/ags/js/overview/workspaces.js b/devices/wim/config/ags/js/overview/workspaces.js index 37216b49..04e53cd6 100644 --- a/devices/wim/config/ags/js/overview/workspaces.js +++ b/devices/wim/config/ags/js/overview/workspaces.js @@ -1,8 +1,7 @@ -import { Hyprland, Utils, Widget } from '../../imports.js'; +import { Hyprland, Widget } from '../../imports.js'; const { Revealer, CenterBox, Box, EventBox, Label, Overlay } = Widget; import Gtk from 'gi://Gtk'; -import GLib from 'gi://GLib'; import { WorkspaceDrop } from './dragndrop.js'; import * as VARS from './variables.js'; @@ -25,30 +24,33 @@ export function getWorkspaces(box) { export const WorkspaceRow = (className, i) => Revealer({ transition: 'slide_down', + halign: className === 'special' ? '' : 'start', connections: [[Hyprland, rev => { const minId = i * VARS.WORKSPACE_PER_ROW; const activeId = Hyprland.active.workspace.id; - rev.revealChild = Hyprland.workspaces.some(ws => ws.id > minId && - (ws.windows > 0 || - ws.id === activeId)); + rev.revealChild = Hyprland.workspaces + .some(ws => ws.id > minId && + (ws.windows > 0 || ws.id === activeId)); }]], child: CenterBox({ children: [null, EventBox({ + // save ref to the 'add' workspace properties: [['box']], setup: eventbox => eventbox._box = eventbox.child.children[0], + connections: [[Hyprland, eventbox => { const maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW; const activeId = Hyprland.active.workspace.id; eventbox._box.revealChild = className === 'special' || - !Hyprland.workspaces.some(ws => ws.id > maxId && - (ws.windows > 0 || - ws.id === activeId)); + !Hyprland.workspaces.some(ws => ws.id > maxId && + (ws.windows > 0 || ws.id === activeId)); }]], child: Box({ className: className, children: [ + // the 'add' workspace Workspace(className === 'special' ? -1 : 1000, className === 'special' ? 'special' : '', true), @@ -58,7 +60,6 @@ export const WorkspaceRow = (className, i) => Revealer({ }), }); -// TODO: please make this readable for the love of god const Workspace = (id, name, extra = false) => { let workspace; const fixed = Gtk.Fixed.new(); @@ -70,93 +71,23 @@ const Workspace = (id, name, extra = false) => { properties: [ ['id', id], ['name', name], - ['timeouts', []], - ['wasActive', false], ], connections: [[Hyprland, box => { - box._timeouts.forEach(timer => { - GLib.source_remove(timer); - box._timeouts.remove(timer); - }); - const activeId = Hyprland.active.workspace.id; const active = activeId === box._id; - const rev = box.child.child.get_children()[1]; - const n = activeId > box._id; - - if (Hyprland.getWorkspace(box._id)?.windows > 0 || active) { - rev.setStyle(DEFAULT_STYLE); - - const timer = Utils.timeout(100, () => { - box.revealChild = true; - box._timeouts.remove(timer); - }); - box._timeouts.push(timer); - } - else if (!Hyprland.getWorkspace(box._id)?.windows > 0) { - rev.setStyle(DEFAULT_STYLE); - - const timer = Utils.timeout(100, () => { - box.revealChild = false; - box._timeouts.remove(timer); - }); - box._timeouts.push(timer); - return; - } - - if (active) { - rev.setStyle(`${DEFAULT_STYLE} - transition: margin 0.5s ease-in-out; - opacity: 1;`); - box._wasActive = true; - } - else if (box._wasActive) { - const timer1 = Utils.timeout(120, () => { - rev.setStyle(`${DEFAULT_STYLE} - transition: margin 0.5s ease-in-out; - opacity: 1; margin-left: ${n ? '' : '-'}300px; - margin-right: ${n ? '-' : ''}300px;`); - box._wasActive = false; - box._timeouts.remove(timer1); - }); - box._timeouts.push(timer1); - - const timer2 = Utils.timeout(500, () => { - rev.setStyle(`${DEFAULT_STYLE} opacity: 0; - margin-left: ${n ? '' : '-'}300px; - margin-right: ${n ? '-' : ''}300px;`); - box._timeouts.remove(timer2); - }); - box._timeouts.push(timer2); - } - else { - rev.setStyle(`${DEFAULT_STYLE} opacity: 0; - margin-left: ${n ? '' : '-'}300px; - margin-right: ${n ? '-' : ''}300px;`); - } + box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active; }]], child: WorkspaceDrop({ - child: Overlay({ - child: Box({ - className: 'workspace active', - style: `${DEFAULT_STYLE} opacity: 0;`, - }), - overlays: [ - Box({ - className: 'workspace active', - style: `${DEFAULT_STYLE} opacity: 0;`, - }), - Box({ - className: 'workspace', - style: DEFAULT_STYLE, - child: fixed, - }), - ], + child: Box({ + className: 'workspace', + style: DEFAULT_STYLE, + child: fixed, }), }), }); } + // 'add' workspace else { workspace = Revealer({ transition: 'slide_right', @@ -165,25 +96,14 @@ const Workspace = (id, name, extra = false) => { ['name', name], ], child: WorkspaceDrop({ - child: Overlay({ - child: Box({ - className: 'workspace', - style: DEFAULT_STYLE, - }), - overlays: [ - Box({ - className: 'workspace active', - style: `${DEFAULT_STYLE} opacity: 0;`, - }), - Box({ - style: DEFAULT_STYLE, - children: [ - fixed, - Label({ - label: ' +', - style: 'font-size: 40px;', - }), - ], + child: Box({ + style: `min-width: ${VARS.SCREEN.X * VARS.SCALE / 2}px; + min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`, + children: [ + fixed, + Label({ + label: ' +', + style: 'font-size: 40px;', }), ], }), diff --git a/devices/wim/config/ags/scss/widgets/overview.scss b/devices/wim/config/ags/scss/widgets/overview.scss index d7a8bd16..a8dd298c 100644 --- a/devices/wim/config/ags/scss/widgets/overview.scss +++ b/devices/wim/config/ags/scss/widgets/overview.scss @@ -1,4 +1,8 @@ .overview { + background-color: rgba($bgfull, 0.4); + border: 2px solid $contrast-bg; + border-radius: 10px; + .workspace { padding: 4px 15px 4px 0; border: 2px solid transparent; diff --git a/devices/wim/config/hypr/main.conf b/devices/wim/config/hypr/main.conf index 875dfc34..37391211 100644 --- a/devices/wim/config/hypr/main.conf +++ b/devices/wim/config/hypr/main.conf @@ -30,6 +30,7 @@ exec-once = gnome-keyring-daemon --start --components=secrets exec-once = squeekboard exec-once = bash -c "sleep 3; ags -t applauncher" +layerrule = blur, overview exec-once = hyprpaper exec-once = wl-paste --watch cliphist store