From e050e2ff2d62a8bfe93123478915fc60fa1dbe78 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sat, 31 Aug 2024 02:17:05 -0700 Subject: [PATCH] Shortcut buttons in the dashboard automatically hide and scale. (#210) --- modules/menus/dashboard/shortcuts/index.ts | 322 ++++++++++++--------- scss/style/menus/dashboard.scss | 10 +- 2 files changed, 195 insertions(+), 137 deletions(-) diff --git a/modules/menus/dashboard/shortcuts/index.ts b/modules/menus/dashboard/shortcuts/index.ts index c8feb5d..fb30ffa 100644 --- a/modules/menus/dashboard/shortcuts/index.ts +++ b/modules/menus/dashboard/shortcuts/index.ts @@ -1,5 +1,6 @@ const hyprland = await Service.import("hyprland"); import options from "options"; +import { Variable as VarType } from "types/variable"; const { left, right } = options.menus.dashboard.shortcuts; @@ -46,6 +47,7 @@ const Shortcuts = () => { }); }); + // NOTE: This is disabled since window recording isn't available on wayland const apps = hyprland.clients.map((clt) => { return Widget.MenuItem({ label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`, @@ -67,152 +69,208 @@ const Shortcuts = () => { }, }); + type ShortcutFixed = { + tooltip: string; + command: string; + icon: string; + configurable: false; + }; + + type ShortcutVariable = { + tooltip: VarType; + command: VarType; + icon: VarType; + configurable?: true; + }; + + type Shortcut = ShortcutFixed | ShortcutVariable; + + const cmdLn = (sCut: ShortcutVariable) => { + return sCut.command.value.length > 0 + }; + + const leftCardHidden = Variable( + !(cmdLn(left.shortcut1) || cmdLn(left.shortcut2) || cmdLn(left.shortcut3) || cmdLn(left.shortcut4)) + ); + + function createButton(shortcut: Shortcut, className: string) { + if (shortcut.configurable !== false) { + return Widget.Button({ + vexpand: true, + tooltip_text: shortcut.tooltip.value, + class_name: className, + on_primary_click: () => handleClick(shortcut.command.value), + child: Widget.Label({ + class_name: "button-label txt-icon", + label: shortcut.icon.value, + }), + }); + } else { + // handle non-configurable shortcut + return Widget.Button({ + vexpand: true, + tooltip_text: shortcut.tooltip, + class_name: className, + on_primary_click: (_, event) => { + App.closeWindow("dashboardmenu"); + if (shortcut.command === "settings-dialog") { + App.toggleWindow("settings-dialog"); + } else if (shortcut.command === "record") { + if (isRecording.value === true) { + App.closeWindow("dashboardmenu"); + return Utils.execAsync( + `${App.configDir}/services/screen_record.sh stop`, + ).catch((err) => console.error(err)); + } else { + recordingDropdown.popup_at_pointer(event); + } + } + }, + child: Widget.Label({ + class_name: "button-label txt-icon", + label: shortcut.icon, + }), + }); + } + } + + function createButtonIfCommandExists(shortcut: Shortcut, className: string, command: string) { + if (command.length > 0) { + return createButton(shortcut, className); + } + return Widget.Box(); + } + return Widget.Box({ class_name: "shortcuts-container", hpack: "fill", hexpand: true, children: [ Widget.Box({ - class_name: "container most-used dashboard-card", - hexpand: true, - children: [ - Widget.Box({ - class_name: "card-button-left-section", - vertical: true, - hexpand: true, + child: Utils.merge([ + left.shortcut1.command.bind("value"), + left.shortcut2.command.bind("value"), + left.shortcut1.tooltip.bind("value"), + left.shortcut2.tooltip.bind("value"), + left.shortcut1.icon.bind("value"), + left.shortcut2.icon.bind("value"), + left.shortcut3.command.bind("value"), + left.shortcut4.command.bind("value"), + left.shortcut3.tooltip.bind("value"), + left.shortcut4.tooltip.bind("value"), + left.shortcut3.icon.bind("value"), + left.shortcut4.icon.bind("value") + ], () => { + const isVisibleLeft = cmdLn(left.shortcut1) || cmdLn(left.shortcut2); + const isVisibleRight = cmdLn(left.shortcut3) || cmdLn(left.shortcut4); + + if (!isVisibleLeft && !isVisibleRight) { + leftCardHidden.value = true; + return Widget.Box(); + } + + leftCardHidden.value = false; + + return Widget.Box({ + class_name: "container most-used dashboard-card", children: [ - Widget.Button({ - tooltip_text: left.shortcut1.tooltip.bind("value"), - class_name: "dashboard-button top-button", - on_primary_click: left.shortcut1.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label txt-icon", - label: left.shortcut1.icon.bind("value"), + Widget.Box({ + className: `card-button-section-container ${isVisibleRight && isVisibleLeft ? "visible" : ""}`, + child: isVisibleLeft ? Widget.Box({ + vertical: true, + hexpand: true, + vexpand: true, + children: [ + createButtonIfCommandExists( + left.shortcut1, + `dashboard-button top-button ${cmdLn(left.shortcut2) ? "paired" : ""}`, + left.shortcut1.command.value), + createButtonIfCommandExists( + left.shortcut2, + "dashboard-button", + left.shortcut2.command.value + ), + ], + }) : Widget.Box({ + children: [], + }) + }), + Widget.Box({ + className: "card-button-section-container", + child: isVisibleRight ? Widget.Box({ + vertical: true, + hexpand: true, + vexpand: true, + children: [ + createButtonIfCommandExists( + left.shortcut3, + `dashboard-button top-button ${cmdLn(left.shortcut4) ? "paired" : ""}`, + left.shortcut3.command.value), + createButtonIfCommandExists( + left.shortcut4, + "dashboard-button", + left.shortcut4.command.value + ), + ], + }) : Widget.Box({ + children: [], }), }), - Widget.Button({ - tooltip_text: left.shortcut2.tooltip.bind("value"), - class_name: "dashboard-button", - on_primary_click: left.shortcut2.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label txt-icon", - label: left.shortcut2.icon.bind("value"), - }), - }), - ], - }), - Widget.Box({ - vertical: true, - hexpand: true, - children: [ - Widget.Button({ - tooltip_text: left.shortcut3.tooltip.bind("value"), - class_name: "dashboard-button top-button", - on_primary_click: left.shortcut3.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - hpack: "center", - class_name: "button-label txt-icon", - label: left.shortcut3.icon.bind("value"), - }), - }), - Widget.Button({ - tooltip_text: left.shortcut4.tooltip.bind("value"), - class_name: "dashboard-button", - on_primary_click: left.shortcut4.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label txt-icon", - label: left.shortcut4.icon.bind("value"), - }), - }), - ], - }), - ], + ] + }); + }) }), Widget.Box({ - class_name: "container utilities dashboard-card", - hexpand: true, - children: [ - Widget.Box({ - class_name: "card-button-left-section", - vertical: true, - hexpand: true, + child: Utils.merge([ + right.shortcut1.command.bind("value"), + right.shortcut1.tooltip.bind("value"), + right.shortcut1.icon.bind("value"), + right.shortcut3.command.bind("value"), + right.shortcut3.tooltip.bind("value"), + right.shortcut3.icon.bind("value"), + leftCardHidden.bind("value") + ], () => { + return Widget.Box({ + class_name: `container utilities dashboard-card ${!leftCardHidden.value ? "paired" : ""}`, children: [ - Widget.Button({ - tooltip_text: right.shortcut1.tooltip.bind("value"), - class_name: "dashboard-button top-button", - on_primary_click: right.shortcut1.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label txt-icon", - label: right.shortcut1.icon.bind("value"), + Widget.Box({ + className: `card-button-section-container visible`, + child: Widget.Box({ + vertical: true, + hexpand: true, + vexpand: true, + children: [ + createButtonIfCommandExists(right.shortcut1, "dashboard-button top-button paired", right.shortcut1.command.value), + createButtonIfCommandExists( + { + tooltip: "HyprPanel Configuration", + command: "settings-dialog", + icon: "󰒓", + configurable: false + }, "dashboard-button", "settings-dialog"), + ], + }) + }), + Widget.Box({ + className: "card-button-section-container", + child: Widget.Box({ + vertical: true, + hexpand: true, + vexpand: true, + children: [ + createButtonIfCommandExists(right.shortcut3, "dashboard-button top-button paired", right.shortcut3.command.value), + createButtonIfCommandExists({ + tooltip: "Record Screen", + command: "record", + icon: "󰑊", + configurable: false + }, "dashboard-button", "record"), + ], }), }), - Widget.Button({ - tooltip_text: "HyprPanel Configuration", - class_name: "dashboard-button", - on_primary_click: () => { - App.closeWindow("dashboardmenu"); - App.toggleWindow("settings-dialog"); - }, - child: Widget.Label({ - class_name: "button-label txt-icon", - label: "󰒓", - }), - }), - ], - }), - Widget.Box({ - vertical: true, - hexpand: true, - children: [ - Widget.Button({ - tooltip_text: right.shortcut3.tooltip.bind("value"), - class_name: "dashboard-button top-button", - on_primary_click: right.shortcut3.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label txt-icon", - label: right.shortcut3.icon.bind("value"), - }), - }), - Widget.Button({ - tooltip_text: "Record Screen", - class_name: isRecording - .bind("value") - .as((v) => `dashboard-button record ${v ? "active" : ""}`), - setup: (self) => { - self.hook(isRecording, () => { - self.toggleClassName("hover", true); - self.on_primary_click = (_, event) => { - if (isRecording.value === true) { - App.closeWindow("dashboardmenu"); - return Utils.execAsync( - `${App.configDir}/services/screen_record.sh stop`, - ).catch((err) => console.error(err)); - } else { - recordingDropdown.popup_at_pointer(event); - } - }; - }); - }, - child: Widget.Label({ - class_name: "button-label txt-icon", - label: "󰑊", - }), - }), - ], - }), - ], + ] + }); + }) }), ], }); diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index bfa4861..2b94874 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -102,11 +102,11 @@ } } - .card-button-left-section { + .card-button-section-container.visible { margin-right: 1.5em; } - .top-button { + .top-button.paired { margin-bottom: 1.5em; } @@ -115,11 +115,11 @@ margin-bottom: 0.65em; &.most-used { - margin-right: 0em; + margin-right: 0.65em; } - &.utilities { - margin-left: 0.65em; + &.utilities.paired { + margin-left: 0em; } button {