Shortcut buttons in the dashboard automatically hide and scale. (#210)
This commit is contained in:
Jas Singh
GitHub
@@ -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<string>;
|
||||
command: VarType<string>;
|
||||
icon: VarType<string>;
|
||||
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: "",
|
||||
}),
|
||||
}),
|
||||
],
|
||||
}),
|
||||
],
|
||||
]
|
||||
});
|
||||
})
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user