diff --git a/config/ags/js/overview/clients.js b/config/ags/js/overview/clients.js index 746d90d..93fdf18 100644 --- a/config/ags/js/overview/clients.js +++ b/config/ags/js/overview/clients.js @@ -70,7 +70,7 @@ export function updateClients(box) { let clients = JSON.parse(result).filter(client => client.class) box._workspaces.forEach(workspace => { - let fixed = workspace.child.child.children[0]; + let fixed = workspace.child.child.overlays[0].children[0]; let toRemove = fixed.get_children(); clients.filter(client => client.workspace.id == workspace._id).forEach(client => { diff --git a/config/ags/js/overview/workspaces.js b/config/ags/js/overview/workspaces.js index 00cb57c..ee6af81 100644 --- a/config/ags/js/overview/workspaces.js +++ b/config/ags/js/overview/workspaces.js @@ -1,10 +1,13 @@ -const { Revealer, CenterBox, Box, EventBox, Label } = ags.Widget; +const { Revealer, CenterBox, Box, EventBox, Label, Overlay } = ags.Widget; const { Hyprland } = ags.Service; const { Gtk } = imports.gi; import { WorkspaceDrop } from './dragndrop.js'; import * as VARS from './variables.js'; +const DEFAULT_STYLE = `min-width: ${VARS.SCREEN.X * VARS.SCALE}px; + min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`; + export function getWorkspaces(box) { let children = []; box.children.forEach(type => { @@ -20,17 +23,25 @@ export function getWorkspaces(box) { export const WorkspaceRow = (className, i) => Revealer({ transition: 'slide_down', connections: [[Hyprland, rev => { - rev.revealChild = Hyprland.workspaces.some(ws => ws.id > i * VARS.WORKSPACE_PER_ROW && + let minId = i * VARS.WORKSPACE_PER_ROW; + let activeId = Hyprland.active.workspace.id; + + rev.revealChild = Hyprland.workspaces.some(ws => ws.id > minId && (ws.windows > 0 || - ws.id === Hyprland.active.workspace.id)); + ws.id === activeId)); }]], child: CenterBox({ children: [null, EventBox({ properties: [['box']], setup: eventbox => eventbox._box = eventbox.child.children[0], connections: [[Hyprland, eventbox => { + let maxId = i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW; + let activeId = Hyprland.active.workspace.id; + eventbox._box.revealChild = className === 'special' || - !Hyprland.workspaces.some(ws => ws.id > i * VARS.WORKSPACE_PER_ROW + VARS.WORKSPACE_PER_ROW && (ws.windows > 0 || ws.id === Hyprland.active.workspace.id)); + !Hyprland.workspaces.some(ws => ws.id > maxId && + (ws.windows > 0 || + ws.id === activeId)); }]], child: Box({ className: className, @@ -42,19 +53,23 @@ export const WorkspaceRow = (className, i) => Revealer({ ['name', className === 'special' ? 'special' : ''], ], child: WorkspaceDrop({ - child: Box({ - className: 'workspace', - style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px; - min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`, - children: [ - ags.Widget({ - type: Gtk.Fixed, - }), - Label({ - label: ' +', - style: 'font-size: 40px;', - }), - ], + child: Overlay({ + child: Box({ + className: 'workspace', + style: DEFAULT_STYLE, + }), + overlays: [Box({ + style: DEFAULT_STYLE, + children: [ + ags.Widget({ + type: Gtk.Fixed, + }), + Label({ + label: ' +', + style: 'font-size: 40px;', + }), + ], + })], }), }), }), @@ -66,23 +81,76 @@ export const WorkspaceRow = (className, i) => Revealer({ const Workspace = (id, name) => Revealer({ transition: 'slide_right', + transitionDuration: 500, properties: [ ['id', id], ['name', name], + ['timeouts', []], + ['wasActive', false], ], connections: [[Hyprland, box => { - let active = Hyprland.active.workspace.id === box._id; - box.child.child.toggleClassName('active', active); - box.revealChild = Hyprland.getWorkspace(box._id)?.windows > 0 || active; + box._timeouts.forEach(clearTimeout); + + let activeId = Hyprland.active.workspace.id; + let active = activeId === box._id; + + let rev = box.child.child.child; + let n = activeId > box._id; + + if (Hyprland.getWorkspace(box._id)?.windows > 0 || active) { + rev.setStyle(DEFAULT_STYLE); + box._timeouts.push(setTimeout(() => { + box.revealChild = true; + }, 100)); + + } + else if (!Hyprland.getWorkspace(box._id)?.windows > 0) { + rev.setStyle(DEFAULT_STYLE); + box._timeouts.push(setTimeout(() => { + box.revealChild = false; + }, 100)); + return; + } + + if (active) { + rev.setStyle(`${DEFAULT_STYLE} + transition: margin 0.5s ease-in-out; + opacity: 1;`); + box._wasActive = true; + } + else if (box._wasActive) { + box._wasActive = false; + box._timeouts.push(setTimeout(() => { + rev.setStyle(`${DEFAULT_STYLE} + transition: margin 0.5s ease-in-out; + opacity: 1; margin-left: ${n ? '' : '-'}300px; + margin-right: ${n ? '-' : ''}300px;`); + }, 120)); + box._timeouts.push(setTimeout(() => { + rev.setStyle(`${DEFAULT_STYLE} opacity: 0; + margin-left: ${n ? '' : '-'}300px; + margin-right: ${n ? '-' : ''}300px;`); + }, 500)); + } + else { + rev.setStyle(`${DEFAULT_STYLE} opacity: 0; + margin-left: ${n ? '' : '-'}300px; + margin-right: ${n ? '-' : ''}300px;`); + } }]], child: WorkspaceDrop({ - child: Box({ - className: 'workspace', - style: `min-width: ${VARS.SCREEN.X * VARS.SCALE}px; - min-height: ${VARS.SCREEN.Y * VARS.SCALE}px;`, - child: ags.Widget({ - type: Gtk.Fixed, + child: Overlay({ + child: Box({ + className: 'workspace active', + style: `${DEFAULT_STYLE} opacity: 0;`, }), + overlays: [Box({ + className: 'workspace', + style: DEFAULT_STYLE, + child: ags.Widget({ + type: Gtk.Fixed, + }), + })], }), }), }); diff --git a/config/ags/scss/widgets/overview.scss b/config/ags/scss/widgets/overview.scss index 5f55dfa..218938a 100644 --- a/config/ags/scss/widgets/overview.scss +++ b/config/ags/scss/widgets/overview.scss @@ -1,18 +1,12 @@ .overview { - min-height: 1px; - min-width: 1px; .workspace { - padding: 4px; + padding: 4px 15px 4px 0px; border: 2px solid transparent; - transition: border-color 0.2s ease-in-out, - background-color 0.2s ease-in-out; border-radius: 10px; &.active { background-color: rgba(lighten($color: black, $amount: 15), 0.8); - transition: border-color 0.2s ease-in-out, - background-color 0.2s ease-in-out; border: 2px solid black; } } diff --git a/config/ags/style.css b/config/ags/style.css index f8ce6b6..168561a 100644 --- a/config/ags/style.css +++ b/config/ags/style.css @@ -670,30 +670,28 @@ calendar:indeterminate { .position-slider slider:hover { transition: background-color 0.5s ease-in-out; } -.overview { - min-height: 1px; - min-width: 1px; } - .overview .workspace { - padding: 4px; - border: 2px solid transparent; - transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; - border-radius: 10px; } - .overview .workspace.active { - background-color: rgba(38, 38, 38, 0.8); - transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out; - border: 2px solid black; } - .overview .workspace .window { - background-color: #282a36; - 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, font-size 0.2s ease-in-out; } - .overview .normal { - margin-bottom: 5px; } - .overview .normal .workspace .window { - border: 2px solid #411C6C; } - .overview .normal .workspace .window.active { - border: 2px solid purple; } - .overview .special .workspace .window { - border: 2px solid #333333; } - .overview .special .workspace .window.active { +.overview .workspace { + padding: 4px 15px 4px 0px; + border: 2px solid transparent; + border-radius: 10px; } + .overview .workspace.active { + background-color: rgba(38, 38, 38, 0.8); + border: 2px solid black; } + +.overview .workspace .window { + background-color: #282a36; + 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, font-size 0.2s ease-in-out; } + +.overview .normal { + margin-bottom: 5px; } + .overview .normal .workspace .window { + border: 2px solid #411C6C; } + .overview .normal .workspace .window.active { border: 2px solid purple; } + +.overview .special .workspace .window { + border: 2px solid #333333; } + .overview .special .workspace .window.active { + border: 2px solid purple; }