diff --git a/.config/ags/config.js b/.config/ags/config.js index d024560e..b4523f91 100644 --- a/.config/ags/config.js +++ b/.config/ags/config.js @@ -11,7 +11,7 @@ import { firstRunWelcome } from './services/messages.js'; import { Bar, BarCornerTopleft, BarCornerTopright } from './modules/bar/main.js'; import Cheatsheet from './modules/cheatsheet/main.js'; // import DesktopBackground from './modules/desktopbackground/main.js'; -// import Dock from './modules/dock/main.js'; +import Dock from './modules/dock/main.js'; import Corner from './modules/screencorners/main.js'; import Indicator from './modules/indicators/main.js'; import Osk from './modules/onscreenkeyboard/main.js'; @@ -54,6 +54,7 @@ const Windows = () => [ SideRight(), forMonitors(Osk), Session(), + userOptions.dock.enabled ? forMonitors(Dock) : null, // forMonitors(Bar), ...(userOptions.appearance.fakeScreenRounding ? [ forMonitors((id) => Corner(id, 'top left', true)), @@ -81,5 +82,4 @@ App.config({ // Stuff that don't need to be toggled. And they're async so ugh... forMonitorsAsync(Bar); -// Bar().catch(print); // Use this to debug the bar. Single monitor only. - +// Bar().catch(print); // Use this to debug the bar. Single monitor only. \ No newline at end of file diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js index 72f285a1..0aec54ec 100644 --- a/.config/ags/modules/.configuration/user_options.js +++ b/.config/ags/modules/.configuration/user_options.js @@ -76,8 +76,34 @@ let configOptions = { 'workspaces': { 'shown': 10, }, + 'dock': { + 'enabled': true, + 'hiddenThickness': 5, + 'pinnedApps': ['firefox', 'org.gnome.Nautilus'], + 'layer': 'top', + 'monitorExclusivity': true, // Dock will move to other monitor along with focus if enabled + 'searchPinnedAppIcons': false, // Try to search for the correct icon if the app class isn't an icon name + 'trigger': ['client-added', 'client-removed'], // client_added, client_move, workspace_active, client_active + // Automatically hide dock after `interval` ms since trigger + 'autoHide': [ + { + 'trigger': 'client-added', + 'interval': 1000, + }, + { + 'trigger': 'client-removed', + 'interval': 1000, + }, + ], + }, // Longer stuff 'icons': { + // Find the window's icon by its class with levenshteinDistance + // The file names are processed at startup, so if there + // are too many files in the search path it'll affect performance + // Example: ['/usr/share/icons/Tela-nord/scalable/apps'] + 'searchPaths': [''], + substitutions: { 'code-url-handler': "visual-studio-code", 'Code': "visual-studio-code", diff --git a/.config/ags/modules/dock/dock.js b/.config/ags/modules/dock/dock.js index d35fe757..4e6cc326 100644 --- a/.config/ags/modules/dock/dock.js +++ b/.config/ags/modules/dock/dock.js @@ -1,19 +1,28 @@ -const { Gtk } = imports.gi; +const { Gtk, GLib } = imports.gi; import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../variables.js'; import Widget from 'resource:///com/github/Aylur/ags/widget.js'; import * as Utils from 'resource:///com/github/Aylur/ags/utils.js'; -const { EventBox } = Widget; +const { EventBox, Button } = Widget; import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js'; import Applications from 'resource:///com/github/Aylur/ags/service/applications.js'; const { execAsync, exec } = Utils; const { Box, Revealer } = Widget; import { setupCursorHover } from '../.widgetutils/cursorhover.js'; +import { getAllFiles, searchIcons } from './icons.js' +import { MaterialIcon } from '../.commonwidgets/materialicon.js'; -const pinnedApps = [ - 'firefox', - 'org.gnome.Nautilus', -]; +const icon_files = userOptions.icons.searchPaths.map(e => getAllFiles(e)).flat(1) + +let isPinned = false +let cachePath = new Map() + +let timers = [] + +function clearTimes() { + timers.forEach(e => GLib.source_remove(e)) + timers = [] +} function substitute(str) { const subs = [ @@ -34,6 +43,19 @@ function substitute(str) { return str; } +function ExclusiveWindow(client) { + const fn = [ + (client) => !(client !== null && client !== undefined), + // Jetbrains + (client) => client.title.includes("win"), + // Vscode + (client) => client.title === '' && client.class === '' + ] + + for (const item of fn) { if (item(client)) { return true } } + return false +} + const focus = ({ address }) => Utils.execAsync(`hyprctl dispatch focuswindow address:${address}`).catch(print); const DockSeparator = (props = {}) => Box({ @@ -41,6 +63,28 @@ const DockSeparator = (props = {}) => Box({ className: 'dock-separator', }) +const PinButton = () => Widget.Button({ + className: 'dock-app-btn dock-app-btn-animate', + tooltipText: 'Pin Dock', + child: Widget.Overlay({ + child: Widget.Box({ + homogeneous: true, + className: 'dock-app-icon', + child: MaterialIcon('push_pin', 'hugeass') + }), + overlays: [Widget.Box({ + class_name: 'indicator', + vpack: 'end', + hpack: 'center', + })], + }), + onClicked: (self) => { + isPinned = !isPinned + self.className = `${isPinned ? "pinned-dock-app-btn" : "dock-app-btn animate"} dock-app-btn-animate` + }, + setup: setupCursorHover, +}) + const AppButton = ({ icon, ...rest }) => Widget.Revealer({ attribute: { 'workspace': 0 @@ -50,7 +94,7 @@ const AppButton = ({ icon, ...rest }) => Widget.Revealer({ transitionDuration: userOptions.animations.durationLarge, child: Widget.Button({ ...rest, - className: 'dock-app-btn', + className: 'dock-app-btn dock-app-btn-animate', child: Widget.Box({ child: Widget.Overlay({ child: Widget.Box({ @@ -73,24 +117,33 @@ const AppButton = ({ icon, ...rest }) => Widget.Revealer({ }) }); -const Taskbar = () => Widget.Box({ +const Taskbar = (monitor) => Widget.Box({ className: 'dock-apps', attribute: { + monitor: monitor, 'map': new Map(), 'clientSortFunc': (a, b) => { return a.attribute.workspace > b.attribute.workspace; }, - 'update': (box) => { + 'update': (box, monitor) => { for (let i = 0; i < Hyprland.clients.length; i++) { const client = Hyprland.clients[i]; if (client["pid"] == -1) return; const appClass = substitute(client.class); - for (const appName of pinnedApps) { - if (appClass.includes(appName.toLowerCase())) - return null; + // for (const appName of userOptions.dock.pinnedApps) { + // if (appClass.includes(appName.toLowerCase())) + // return null; + // } + let appClassLower = appClass.toLowerCase() + let path = '' + if (cachePath[appClassLower]) { path = cachePath[appClassLower] } + else { + path = searchIcons(appClass.toLowerCase(), icon_files) + cachePath[appClassLower] = path } + if (path === '') { path = substitute(appClass) } const newButton = AppButton({ - icon: appClass, + icon: path, tooltipText: `${client.title} (${appClass})`, onClicked: () => focus(client), }); @@ -100,7 +153,7 @@ const Taskbar = () => Widget.Box({ } box.children = Array.from(box.attribute.map.values()); }, - 'add': (box, address) => { + 'add': (box, address, monitor) => { if (!address) { // First active emit is undefined box.attribute.update(box); return; @@ -108,10 +161,18 @@ const Taskbar = () => Widget.Box({ const newClient = Hyprland.clients.find(client => { return client.address == address; }); - const appClass = substitute(newClient.class); - + if (ExclusiveWindow(newClient)) { return } + let appClass = newClient.class + let appClassLower = appClass.toLowerCase() + let path = '' + if (cachePath[appClassLower]) { path = cachePath[appClassLower] } + else { + path = searchIcons(appClassLower, icon_files) + cachePath[appClassLower] = path + } + if (path === '') { path = substitute(appClass) } const newButton = AppButton({ - icon: appClass, + icon: path, tooltipText: `${newClient.title} (${appClass})`, onClicked: () => focus(newClient), }) @@ -135,8 +196,8 @@ const Taskbar = () => Widget.Box({ }, }, setup: (self) => { - self.hook(Hyprland, (box, address) => box.attribute.add(box, address), 'client-added') - .hook(Hyprland, (box, address) => box.attribute.remove(box, address), 'client-removed') + self.hook(Hyprland, (box, address) => box.attribute.add(box, address, self.monitor), 'client-added') + .hook(Hyprland, (box, address) => box.attribute.remove(box, address, self.monitor), 'client-removed') Utils.timeout(100, () => self.attribute.update(self)); }, }); @@ -144,12 +205,15 @@ const Taskbar = () => Widget.Box({ const PinnedApps = () => Widget.Box({ class_name: 'dock-apps', homogeneous: true, - children: pinnedApps + children: userOptions.dock.pinnedApps .map(term => ({ app: Applications.query(term)?.[0], term })) .filter(({ app }) => app) .map(({ app, term = true }) => { const newButton = AppButton({ - icon: app.icon_name, + // different icon, emm... + icon: userOptions.dock.searchPinnedAppIcons ? + searchIcons(app.name, icon_files) : + app.icon_name, onClicked: () => { for (const client of Hyprland.clients) { if (client.class.toLowerCase().includes(term)) @@ -177,82 +241,109 @@ const PinnedApps = () => Widget.Box({ }), }); -export default () => { +export default (monitor = 0) => { const dockContent = Box({ className: 'dock-bg spacing-h-5', children: [ PinnedApps(), DockSeparator(), Taskbar(), + PinButton(), ] }) const dockRevealer = Revealer({ attribute: { 'updateShow': self => { // I only use mouse to resize. I don't care about keyboard resize if that's a thing - const dockSize = [ - dockContent.get_allocated_width(), - dockContent.get_allocated_height() - ] - const dockAt = [ - SCREEN_WIDTH / 2 - dockSize[0] / 2, - SCREEN_HEIGHT - dockSize[1], - ]; - const dockLeft = dockAt[0]; - const dockRight = dockAt[0] + dockSize[0]; - const dockTop = dockAt[1]; - const dockBottom = dockAt[1] + dockSize[1]; + // const dockSize = [ + // dockContent.get_allocated_width(), + // dockContent.get_allocated_height() + // ] + // const dockAt = [ + // SCREEN_WIDTH / 2 - dockSize[0] / 2, + // SCREEN_HEIGHT - dockSize[1], + // ]; + // const dockLeft = dockAt[0]; + // const dockRight = dockAt[0] + dockSize[0]; + // const dockTop = dockAt[1]; + // const dockBottom = dockAt[1] + dockSize[1]; + // + // const currentWorkspace = Hyprland.active.workspace.id; + // var toReveal = true; + // const hyprlandClients = JSON.parse(exec('hyprctl clients -j')); + // for (const index in hyprlandClients) { + // const client = hyprlandClients[index]; + // const clientLeft = client.at[0]; + // const clientRight = client.at[0] + client.size[0]; + // const clientTop = client.at[1]; + // const clientBottom = client.at[1] + client.size[1]; + // + // if (client.workspace.id == currentWorkspace) { + // if ( + // // clientLeft < dockRight && + // // clientRight > dockLeft && + // // clientTop < dockBottom && + // // clientBottom > dockTop + // ) { + // self.revealChild = false; + // return; + // } + // } + // } + // // if (currentWorkspace === client.workspace.id) { + // self.revealChild = true; + // // } - const currentWorkspace = Hyprland.active.workspace.id; - var toReveal = true; - const hyprlandClients = JSON.parse(exec('hyprctl clients -j')); - for (const index in hyprlandClients) { - const client = hyprlandClients[index]; - const clientLeft = client.at[0]; - const clientRight = client.at[0] + client.size[0]; - const clientTop = client.at[1]; - const clientBottom = client.at[1] + client.size[1]; + if (userOptions.dock.monitorExclusivity) + self.revealChild = Hyprland.active.monitor.id === monitor; + else + self.revealChild = true; - if (client.workspace.id == currentWorkspace) { - if ( - clientLeft < dockRight && - clientRight > dockLeft && - clientTop < dockBottom && - clientBottom > dockTop - ) { - self.revealChild = false; - return; - } - } - } - self.revealChild = true; + return self.revealChild } }, revealChild: false, transition: 'slide_up', transitionDuration: userOptions.animations.durationLarge, child: dockContent, - // setup: (self) => self - // .hook(Hyprland, (self) => self.attribute.updateShow(self)) - // .hook(Hyprland.active.workspace, (self) => self.attribute.updateShow(self)) - // .hook(Hyprland.active.client, (self) => self.attribute.updateShow(self)) - // .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-added') - // .hook(Hyprland, (self) => self.attribute.updateShow(self), 'client-removed') - // , + setup: (self) => { + const callback = (self, trigger) => { + if (!userOptions.dock.trigger.includes(trigger)) return + const flag = self.attribute.updateShow(self) + + if (flag) clearTimes(); + + const hidden = userOptions.dock.autoHide.find(e => e["trigger"] === trigger) + + if (hidden) { + let id = Utils.timeout(hidden.interval, () => { + if (!isPinned) { self.revealChild = false } + timers = timers.filter(e => e !== id) + }) + timers.push(id) + } + } + + self + // .hook(Hyprland, (self) => self.attribute.updateShow(self)) + .hook(Hyprland.active.workspace, self => callback(self, "workspace-active")) + .hook(Hyprland.active.client, self => callback(self, "client-active")) + .hook(Hyprland, self => callback(self, "client-added"), "client-added") + .hook(Hyprland, self => callback(self, "client-removed"), "client-removed") + }, }) return EventBox({ onHover: () => { dockRevealer.revealChild = true; - }, - onHoverLost: () => { - if (Hyprland.active.client.attribute.class.length === 0) return; - dockRevealer.revealChild = false; + clearTimes() }, child: Box({ homogeneous: true, - css: 'min-height: 2px;', - children: [ - dockRevealer, - ] + css: `min-height: ${userOptions.dock.hiddenThickness}px;`, + children: [dockRevealer], }), + setup: self => self.on("leave-notify-event", () => { + if (!isPinned) dockRevealer.revealChild = false; + clearTimes() + }) }) } diff --git a/.config/ags/modules/dock/icons.js b/.config/ags/modules/dock/icons.js new file mode 100644 index 00000000..60f01a3a --- /dev/null +++ b/.config/ags/modules/dock/icons.js @@ -0,0 +1,63 @@ +const { Gio, GLib } = imports.gi + +const exists = (path) => Gio.File.new_for_path(path).query_exists(null); + +export const levenshteinDistance = (a, b) => { + if (!a.length) { return b.length } + if (!b.length) { return a.length } + + let f = Array.from(new Array(a.length + 1), + () => new Array(b.length + 1).fill(0)) + + for (let i = 0; i <= b.length; i++) { f[0][i] = i; } + for (let i = 0; i <= a.length; i++) { f[i][0] = i; } + + for (let i = 1; i <= a.length; i++) { + for (let j = 1; j <= b.length; j++) { + if (a.charAt(i - 1) === b.charAt(j - 1)) { + f[i][j] = f[i-1][j-1] + } else { + f[i][j] = Math.min(f[i-1][j-1], Math.min(f[i][j-1], f[i-1][j])) + 1 + } + } + } + + return f[a.length][b.length] +} + +export const getAllFiles = (dir, files = []) => { + if (!exists(dir)) { return [] } + const file = Gio.File.new_for_path(dir); + const enumerator = file.enumerate_children('standard::name,standard::type', + Gio.FileQueryInfoFlags.NONE, null); + + for (const info of enumerator) { + if (info.get_file_type() === Gio.FileType.DIRECTORY) { + files.push(getAllFiles(`${dir}/${info.get_name()}`)) + } else { + files.push(`${dir}/${info.get_name()}`) + } + } + + return files.flat(1); +} + +export const searchIcons = (appClass, files) => { + appClass = appClass.toLowerCase() + + if (!files.length) { return "" } + + let appro = 0x3f3f3f3f + let path = "" + + for (const item of files) { + let score = levenshteinDistance(item.split("/").pop().toLowerCase().split(".")[0], appClass) + + if (score < appro) { + appro = score + path = item + } + } + + return path +} \ No newline at end of file diff --git a/.config/ags/modules/dock/main.js b/.config/ags/modules/dock/main.js index cc7bb0e4..77d394d9 100644 --- a/.config/ags/modules/dock/main.js +++ b/.config/ags/modules/dock/main.js @@ -1,11 +1,12 @@ import Widget from 'resource:///com/github/Aylur/ags/widget.js'; import Dock from './dock.js'; -export default () => Widget.Window({ - name: 'dock', - layer: 'bottom', +export default (monitor = 0) => Widget.Window({ + monitor, + name: `dock${monitor}`, + layer: userOptions.dock.layer, anchor: ['bottom'], exclusivity: 'normal', visible: true, - child: Dock(), + child: Dock(monitor), }); diff --git a/.config/ags/scss/_dock.scss b/.config/ags/scss/_dock.scss index 45d3d892..2e087ffe 100644 --- a/.config/ags/scss/_dock.scss +++ b/.config/ags/scss/_dock.scss @@ -5,11 +5,22 @@ padding: 0.682rem; } +.dock-app-btn-animate { + transition-property: background-color; + transition-duration: 0.5s; +} + .dock-app-btn { @include normal-rounding; padding: 0.273rem; } +.pinned-dock-app-btn { + @include normal-rounding; + padding: 0.273rem; + background-color: $layer0Hover; +} + .dock-app-btn:hover, .dock-app-btn:focus { background-color: $layer0Hover;