matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ags overview): redesign workspace overview

Browse source
This commit is contained in:
matt1432 2023-10-30 22:00:46 -04:00
parent 8dd83e99ca
commit 297e274c9a
6 changed files with 103 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
devices/wim/config/ags/js/overview/current-workspace.js Normal file
View file

@ -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;
`);
};

2
devices/wim/config/ags/js/overview/dragndrop.js
View file

@ -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);
});
},
});

66
devices/wim/config/ags/js/overview/main.js
View file

@ -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'],
],
}),
}),
});

128
devices/wim/config/ags/js/overview/workspaces.js
View file

@ -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;',
}),
],
}),

4
devices/wim/config/ags/scss/widgets/overview.scss
View file

@ -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;

1
devices/wim/config/hypr/main.conf
View file

@ -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