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");
|
const hyprland = await Service.import("hyprland");
|
||||||
import options from "options";
|
import options from "options";
|
||||||
|
import { Variable as VarType } from "types/variable";
|
||||||
|
|
||||||
const { left, right } = options.menus.dashboard.shortcuts;
|
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) => {
|
const apps = hyprland.clients.map((clt) => {
|
||||||
return Widget.MenuItem({
|
return Widget.MenuItem({
|
||||||
label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`,
|
label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`,
|
||||||
@@ -67,133 +69,53 @@ const Shortcuts = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
return Widget.Box({
|
type ShortcutFixed = {
|
||||||
class_name: "shortcuts-container",
|
tooltip: string;
|
||||||
hpack: "fill",
|
command: string;
|
||||||
hexpand: true,
|
icon: string;
|
||||||
children: [
|
configurable: false;
|
||||||
Widget.Box({
|
};
|
||||||
class_name: "container most-used dashboard-card",
|
|
||||||
hexpand: true,
|
type ShortcutVariable = {
|
||||||
children: [
|
tooltip: VarType<string>;
|
||||||
Widget.Box({
|
command: VarType<string>;
|
||||||
class_name: "card-button-left-section",
|
icon: VarType<string>;
|
||||||
vertical: true,
|
configurable?: true;
|
||||||
hexpand: true,
|
};
|
||||||
children: [
|
|
||||||
Widget.Button({
|
type Shortcut = ShortcutFixed | ShortcutVariable;
|
||||||
tooltip_text: left.shortcut1.tooltip.bind("value"),
|
|
||||||
class_name: "dashboard-button top-button",
|
const cmdLn = (sCut: ShortcutVariable) => {
|
||||||
on_primary_click: left.shortcut1.command
|
return sCut.command.value.length > 0
|
||||||
.bind("value")
|
};
|
||||||
.as((cmd) => () => handleClick(cmd)),
|
|
||||||
|
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({
|
child: Widget.Label({
|
||||||
class_name: "button-label txt-icon",
|
class_name: "button-label txt-icon",
|
||||||
label: left.shortcut1.icon.bind("value"),
|
label: shortcut.icon.value,
|
||||||
}),
|
}),
|
||||||
}),
|
});
|
||||||
Widget.Button({
|
} else {
|
||||||
tooltip_text: left.shortcut2.tooltip.bind("value"),
|
// handle non-configurable shortcut
|
||||||
class_name: "dashboard-button",
|
return Widget.Button({
|
||||||
on_primary_click: left.shortcut2.command
|
vexpand: true,
|
||||||
.bind("value")
|
tooltip_text: shortcut.tooltip,
|
||||||
.as((cmd) => () => handleClick(cmd)),
|
class_name: className,
|
||||||
child: Widget.Label({
|
on_primary_click: (_, event) => {
|
||||||
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,
|
|
||||||
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.Button({
|
|
||||||
tooltip_text: "HyprPanel Configuration",
|
|
||||||
class_name: "dashboard-button",
|
|
||||||
on_primary_click: () => {
|
|
||||||
App.closeWindow("dashboardmenu");
|
App.closeWindow("dashboardmenu");
|
||||||
|
if (shortcut.command === "settings-dialog") {
|
||||||
App.toggleWindow("settings-dialog");
|
App.toggleWindow("settings-dialog");
|
||||||
},
|
} else if (shortcut.command === "record") {
|
||||||
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) {
|
if (isRecording.value === true) {
|
||||||
App.closeWindow("dashboardmenu");
|
App.closeWindow("dashboardmenu");
|
||||||
return Utils.execAsync(
|
return Utils.execAsync(
|
||||||
@@ -202,17 +124,153 @@ const Shortcuts = () => {
|
|||||||
} else {
|
} else {
|
||||||
recordingDropdown.popup_at_pointer(event);
|
recordingDropdown.popup_at_pointer(event);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
});
|
|
||||||
},
|
},
|
||||||
child: Widget.Label({
|
child: Widget.Label({
|
||||||
class_name: "button-label txt-icon",
|
class_name: "button-label txt-icon",
|
||||||
label: "",
|
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({
|
||||||
|
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.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.Box({
|
||||||
|
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.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"),
|
||||||
],
|
],
|
||||||
}),
|
}),
|
||||||
],
|
}),
|
||||||
|
]
|
||||||
|
});
|
||||||
|
})
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -102,11 +102,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-button-left-section {
|
.card-button-section-container.visible {
|
||||||
margin-right: 1.5em;
|
margin-right: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-button {
|
.top-button.paired {
|
||||||
margin-bottom: 1.5em;
|
margin-bottom: 1.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -115,11 +115,11 @@
|
|||||||
margin-bottom: 0.65em;
|
margin-bottom: 0.65em;
|
||||||
|
|
||||||
&.most-used {
|
&.most-used {
|
||||||
margin-right: 0em;
|
margin-right: 0.65em;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.utilities {
|
&.utilities.paired {
|
||||||
margin-left: 0.65em;
|
margin-left: 0em;
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
|||||||
Reference in New Issue
Block a user