From 21393c122a54eb0353692f9885cbaa413467e44f Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Wed, 24 Jul 2024 09:46:38 -0700 Subject: [PATCH] Implement layout options --- README.md | 81 +++- main.ts | 24 +- modules/bar/Bar.ts | 163 ++++--- modules/bar/battery/index.js | 2 +- modules/menus/dashboard/shortcuts/index.js | 418 ++++++++--------- modules/notifications/index.js | 5 +- options.ts | 90 ++-- scss/style/bar/bar.scss | 2 +- scss/style/menus/calendar.scss | 2 +- scss/style/menus/media.scss | 5 +- scss/style/menus/notifications.scss | 4 +- scss/style/menus/power.scss | 31 +- scss/style/settings/dialog.scss | 428 ++++++++++++------ scss/variables.scss | 16 +- tsconfig.json | 34 +- widget/settings/SettingsDialog.ts | 52 ++- widget/settings/pages/config/bar/index.ts | 52 +++ widget/settings/pages/config/general/index.ts | 4 +- widget/settings/pages/config/index.ts | 48 ++ widget/settings/pages/config/menus/clock.ts | 20 + .../settings/pages/config/menus/dashboard.ts | 61 +++ .../pages/config/notifications/index.ts | 15 + widget/settings/pages/theme/bar/index.ts | 6 +- widget/settings/pages/theme/index.ts | 92 ++++ widget/settings/pages/theme/menus/battery.ts | 2 +- .../settings/pages/theme/menus/bluetooth.ts | 2 +- widget/settings/pages/theme/menus/clock.ts | 2 +- .../settings/pages/theme/menus/dashboard.ts | 19 +- widget/settings/pages/theme/menus/index.ts | 2 +- widget/settings/pages/theme/menus/media.ts | 2 +- widget/settings/pages/theme/menus/network.ts | 2 +- .../pages/theme/menus/notifications.ts | 2 +- widget/settings/pages/theme/menus/systray.ts | 2 +- widget/settings/pages/theme/menus/volume.ts | 2 +- .../pages/theme/notifications/index.ts | 2 +- widget/settings/shared/Inputter.ts | 198 ++++---- widget/settings/shared/Option.ts | 40 +- 37 files changed, 1288 insertions(+), 644 deletions(-) create mode 100644 widget/settings/pages/config/bar/index.ts create mode 100644 widget/settings/pages/config/index.ts create mode 100644 widget/settings/pages/config/menus/clock.ts create mode 100644 widget/settings/pages/config/menus/dashboard.ts create mode 100644 widget/settings/pages/config/notifications/index.ts create mode 100644 widget/settings/pages/theme/index.ts diff --git a/README.md b/README.md index 295a173..a737f19 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -Requirements: +# HyprPanel +A panel built for Hyprland with (Aylur's Gnome Shell)[https://github.com/Aylur/ags] + +## Requirements Bun (may require sudo) ```sh @@ -33,3 +36,79 @@ python python-gpustat ``` + +## Instructions + +The HyprPanel comes with a configuration menu which is available by opening the Dashboard menu (click the button in the bar with your Distro's logo) and then clicking the Gear icon; + +### Specifying bar layouts per monitor + +To specify layouts for each monitor you can create a JSON object such as: +```JSON +{ + "0": { + "left": [ + "dashboard", + "workspaces", + "windowtitle" + ], + "middle": [ + "media" + ], + "right": [ + "volume", + "clock", + "notifications" + ] + }, + "1": { + "left": [ + "dashboard", + "workspaces", + "windowtitle" + ], + "middle": [ + "media" + ], + "right": [ + "volume", + "clock", + "notifications" + ] + }, + "2": { + "left": [ + "dashboard", + "workspaces", + "windowtitle" + ], + "middle": [ + "media" + ], + "right": [ + "volume", + "network", + "bluetooth", + "systray", + "clock", + "notifications" + ] + } +} +``` + +Where each monitor is defined by its index (0, 1, 2 in this case) and each section (left, middle, right) contains one or more of the following modules: +```js +"battery" +"dashboard" +"workspaces" +"windowtitle" +"media" +"notifications" +"volume" +"network" +"bluetooth" +"clock" +"systray" +``` +Since the text-box in the options dialog isn't sufficient, it is recommended that you create this JSON configuration in a text editor elsewhere and paste it into the layout text-box under Configuration > Bar > "Bar Layouts for Monitors". diff --git a/main.ts b/main.ts index d85da23..25411cb 100644 --- a/main.ts +++ b/main.ts @@ -8,16 +8,16 @@ import Notifications from "./modules/notifications/index.js"; import { forMonitors } from "lib/utils" App.config({ - onConfigParsed: () => Utils.execAsync(`python3 ${App.configDir}/services/bluetooth.py`), - windows: [ - ...MenuWindows, - Notifications(), - SettingsDialog(), - ...forMonitors(Bar), - ], - closeWindowDelay: { - sideright: 350, - launcher: 350, - bar0: 350, - }, + onConfigParsed: () => Utils.execAsync(`python3 ${App.configDir}/services/bluetooth.py`), + windows: [ + ...MenuWindows, + Notifications(), + SettingsDialog(), + ...forMonitors(Bar), + ], + closeWindowDelay: { + sideright: 350, + launcher: 350, + bar0: 350, + }, }) diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts index 23697ae..fdb6ae4 100644 --- a/modules/bar/Bar.ts +++ b/modules/bar/Bar.ts @@ -9,71 +9,122 @@ import { Bluetooth } from "./bluetooth/index.js"; import { BatteryLabel } from "./battery/index.js"; import { Clock } from "./clock/index.js"; import { SysTray } from "./systray/index.js"; +const hyprland = await Service.import("hyprland"); import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js"; import options from "options"; -const { start, center, end } = options.bar.layout; +const { layouts } = options.bar; export type BarWidget = keyof typeof widget; +type Section = "battery" + | "dashboard" + | "workspaces" + | "windowtitle" + | "media" + | "notifications" + | "volume" + | "network" + | "bluetooth" + | "clock" + | "systray"; + +type Layout = { + left: Section[], + middle: Section[], + right: Section[], +} + +type BarLayout = { + [key: string]: Layout +} + +const getModulesForMonitor = (monitor: number, curLayouts: BarLayout) => { + const foundMonitor = Object.keys(curLayouts).find(mon => mon === monitor.toString()); + + const defaultSetup: Layout = { + left: [ + "dashboard", + "workspaces", + "windowtitle" + ], + middle: [ + "media" + ], + right: [ + "volume", + "network", + "bluetooth", + "battery", + "systray", + "clock", + "notifications" + ] + } + + if (foundMonitor === undefined) { + return defaultSetup; + } + + return curLayouts[foundMonitor]; + +} + const widget = { - battery: () => WidgetContainer(BatteryLabel()), - dashboard: () => WidgetContainer(Menu()), - workspaces: (monitor) => WidgetContainer(Workspaces(monitor, 10)), - windowtitle: () => WidgetContainer(ClientTitle()), - media: () => WidgetContainer(Media()), - notifications: () => WidgetContainer(Notifications()), - volume: () => WidgetContainer(Volume()), - network: () => WidgetContainer(Network()), - bluetooth: () => WidgetContainer(Bluetooth()), - clock: () => WidgetContainer(Clock()), - systray: () => WidgetContainer(SysTray()), + battery: () => WidgetContainer(BatteryLabel()), + dashboard: () => WidgetContainer(Menu()), + workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor, 10)), + windowtitle: () => WidgetContainer(ClientTitle()), + media: () => WidgetContainer(Media()), + notifications: () => WidgetContainer(Notifications()), + volume: () => WidgetContainer(Volume()), + network: () => WidgetContainer(Network()), + bluetooth: () => WidgetContainer(Bluetooth()), + clock: () => WidgetContainer(Clock()), + systray: () => WidgetContainer(SysTray()), }; export const Bar = (monitor: number) => { - return Widget.Window({ - name: `bar-${monitor}`, - class_name: "bar", - monitor, - visible: true, - anchor: ["top", "left", "right"], - exclusivity: "exclusive", - child: Widget.CenterBox({ - visible: true, - startWidget: Widget.Box({ - class_name: "box-left", - spacing: 5, - hexpand: true, - setup: self => { - self.children = start.value.map(w => widget[w](monitor)); - self.hook(start, (self) => { - self.children = start.value.map(w => widget[w](monitor)); - }) - }, - }), - centerWidget: Widget.Box({ - class_name: "box-center", - hpack: "center", - spacing: 5, - setup: self => { - self.children = center.value.map(w => widget[w](monitor)); - self.hook(center, (self) => { - self.children = center.value.map(w => widget[w](monitor)); - }) - }, - }), - endWidget: Widget.Box({ - class_name: "box-right", - hpack: "end", - spacing: 5, - setup: self => { - self.children = end.value.map(w => widget[w](monitor)); - self.hook(end, (self) => { - self.children = end.value.map(w => widget[w](monitor)); - }) - }, - }), - }) - }); + return Widget.Window({ + name: `bar-${monitor}`, + class_name: "bar", + monitor, + visible: true, + anchor: ["top", "left", "right"], + exclusivity: "exclusive", + child: Widget.CenterBox({ + css: 'padding: 1px', + startWidget: Widget.Box({ + class_name: "box-left", + hexpand: true, + setup: self => { + self.hook(layouts, (self) => { + const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) + self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); + }) + }, + }), + centerWidget: Widget.Box({ + class_name: "box-center", + hpack: "center", + setup: self => { + self.hook(layouts, (self) => { + const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) + self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); + }) + }, + }), + endWidget: Widget.Box({ + class_name: "box-right", + hpack: "end", + setup: self => { + self.hook(layouts, (self) => { + const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) + self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); + }) + }, + }), + }) + }); }; diff --git a/modules/bar/battery/index.js b/modules/bar/battery/index.js index a4c6bad..c028929 100644 --- a/modules/bar/battery/index.js +++ b/modules/bar/battery/index.js @@ -2,7 +2,7 @@ const battery = await Service.import("battery"); import { openMenu } from "../utils.js"; import options from "options"; -const { show_label } = options.bar.battery; +const { label: show_label } = options.bar.battery; const BatteryLabel = () => { const isVis = Variable(battery.available); diff --git a/modules/menus/dashboard/shortcuts/index.js b/modules/menus/dashboard/shortcuts/index.js index 8f76952..5648839 100644 --- a/modules/menus/dashboard/shortcuts/index.js +++ b/modules/menus/dashboard/shortcuts/index.js @@ -4,222 +4,222 @@ import options from "options"; const { left, right } = options.menus.dashboard.shortcuts; const Shortcuts = () => { - const isRecording = Variable(false, { - poll: [ - 1000, - `${App.configDir}/services/screen_record.sh status`, - (out) => { - if (out === "recording") { - return true; - } - return false; - }, - ], - }); - const handleClick = (action, resolver, tOut = 250) => { - App.closeWindow("dashboardmenu"); - App.toggleWindow("settings-dialog"); - - setTimeout(() => { - Utils.execAsync(action) - .then((res) => { - if (typeof resolver === "function") { - return resolver(res); - } - - return res; - }) - .catch((err) => err); - }, tOut); - }; - - const recordingDropdown = Widget.Menu({ - class_name: "dropdown recording", - hpack: "fill", - hexpand: true, - setup: (self) => { - self.hook(hyprland, () => { - const displays = hyprland.monitors.map((mon) => { - return Widget.MenuItem({ - label: `Display ${mon.name}`, - on_activate: () => { - App.closeWindow("dashboardmenu"); - Utils.execAsync( - `${App.configDir}/services/screen_record.sh start ${mon.name}`, - ).catch((err) => console.error(err)); + const isRecording = Variable(false, { + poll: [ + 1000, + `${App.configDir}/services/screen_record.sh status`, + (out) => { + if (out === "recording") { + return true; + } + return false; }, - }); - }); + ], + }); + const handleClick = (action, resolver, tOut = 250) => { + App.closeWindow("dashboardmenu"); - const apps = hyprland.clients.map((clt) => { - return Widget.MenuItem({ - label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`, - on_activate: () => { - App.closeWindow("dashboardmenu"); - Utils.execAsync( - `${App.configDir}/services/screen_record.sh start ${clt.focusHistoryID}`, - ).catch((err) => console.error(err)); - }, - }); - }); + setTimeout(() => { + Utils.execAsync(action) + .then((res) => { + if (typeof resolver === "function") { + return resolver(res); + } - return (self.children = [ - ...displays, - // Disabled since window recording isn't available on wayland - // ...apps - ]); - }); - }, - }); + return res; + }) + .catch((err) => err); + }, tOut); + }; - return Widget.Box({ - class_name: "shortcuts-container", - hpack: "fill", - hexpand: true, - children: [ - Widget.Box({ - class_name: "container most-used dashboard-card", + const recordingDropdown = Widget.Menu({ + class_name: "dropdown recording", + hpack: "fill", + hexpand: true, + setup: (self) => { + self.hook(hyprland, () => { + const displays = hyprland.monitors.map((mon) => { + return Widget.MenuItem({ + label: `Display ${mon.name}`, + on_activate: () => { + App.closeWindow("dashboardmenu"); + Utils.execAsync( + `${App.configDir}/services/screen_record.sh start ${mon.name}`, + ).catch((err) => console.error(err)); + }, + }); + }); + + const apps = hyprland.clients.map((clt) => { + return Widget.MenuItem({ + label: `${clt.class.charAt(0).toUpperCase() + clt.class.slice(1)} (Workspace ${clt.workspace.name})`, + on_activate: () => { + App.closeWindow("dashboardmenu"); + Utils.execAsync( + `${App.configDir}/services/screen_record.sh start ${clt.focusHistoryID}`, + ).catch((err) => console.error(err)); + }, + }); + }); + + return (self.children = [ + ...displays, + // Disabled since window recording isn't available on wayland + // ...apps + ]); + }); + }, + }); + + return Widget.Box({ + class_name: "shortcuts-container", + hpack: "fill", hexpand: true, children: [ - Widget.Box({ - class_name: "card-button-left-section", - vertical: true, - hexpand: true, - 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", - label: left.shortcut1.icon.bind("value"), - }), - }), - 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", - 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", - 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", - label: left.shortcut4.icon.bind("value"), - }), - }), - ], - }), + Widget.Box({ + class_name: "container most-used dashboard-card", + hexpand: true, + children: [ + Widget.Box({ + class_name: "card-button-left-section", + vertical: true, + hexpand: true, + 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", + label: left.shortcut1.icon.bind("value"), + }), + }), + 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", + 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", + 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", + 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", + label: right.shortcut1.icon.bind("value"), + }), + }), + 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", + 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", + 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", + label: "󰑊", + }), + }), + ], + }), + ], + }), ], - }), - 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", - label: right.shortcut1.icon.bind("value"), - }), - }), - Widget.Button({ - tooltip_text: right.shortcut2.tooltip.bind("value"), - class_name: "dashboard-button", - on_primary_click: right.shortcut2.command - .bind("value") - .as((cmd) => () => handleClick(cmd)), - child: Widget.Label({ - class_name: "button-label", - label: right.shortcut2.icon.bind("value"), - }), - }), - ], - }), - 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", - 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", - label: "󰑊", - }), - }), - ], - }), - ], - }), - ], - }); + }); }; export { Shortcuts }; diff --git a/modules/notifications/index.js b/modules/notifications/index.js index f22bfef..0ceeb30 100644 --- a/modules/notifications/index.js +++ b/modules/notifications/index.js @@ -11,13 +11,16 @@ const { position } = options.notifications; export default () => { notifs.popupTimeout = 7000; + const getPosition = (pos) => { + return pos.split(" "); + } return Widget.Window({ name: "notifications-window", class_name: "notifications-window", monitor: 2, layer: "top", - anchor: position.bind("value"), + anchor: position.bind("value").as(v => getPosition(v)), exclusivity: "ignore", child: Widget.Box({ class_name: "notification-card-container", diff --git a/options.ts b/options.ts index 6d2f45b..26ecc39 100644 --- a/options.ts +++ b/options.ts @@ -58,6 +58,7 @@ const options = mkOptions(OPTIONS, { background: opt(colors.crust), buttons: { monochrome: opt(false), + spacing: opt("0.25em"), radius: opt("0.3em"), background: opt(colors.base2), hover: opt(colors.surface1), @@ -129,7 +130,7 @@ const options = mkOptions(OPTIONS, { }, }, menus: { - monochrome: opt(true), + monochrome: opt(false), background: opt(colors.crust), cards: opt(colors.base), card_radius: opt("0.4em"), @@ -163,7 +164,7 @@ const options = mkOptions(OPTIONS, { }, iconbuttons: { passive: opt(colors.text), - active: opt(colors.lavender) + active: opt(colors.pink) }, progressbar: { foreground: opt(colors.lavender), @@ -411,10 +412,11 @@ const options = mkOptions(OPTIONS, { card: opt(colors.base), background: opt(colors.crust), border: opt(colors.surface0), - label: opt(colors.green), + label: opt(colors.lavender), body: opt(colors.text), confirm: opt(colors.green), deny: opt(colors.red), + button_text: opt(colors.crust), } }, shortcuts: { @@ -513,25 +515,56 @@ const options = mkOptions(OPTIONS, { }, bar: { - layout: { - start: opt>([ - "dashboard", - "workspaces", - "windowtitle" - ]), - center: opt>([ - "media" - ]), - end: opt>([ - "volume", - "network", - "bluetooth", - "battery", - "systray", - "clock", - "notifications" - ]), - }, + layouts: opt({ + "0": { + left: [ + "dashboard", + "workspaces", + "windowtitle" + ], + middle: [ + "media" + ], + right: [ + "volume", + "clock", + "notifications" + ] + }, + "1": { + left: [ + "dashboard", + "workspaces", + "windowtitle" + ], + middle: [ + "media" + ], + right: [ + "volume", + "clock", + "notifications" + ] + }, + "2": { + left: [ + "dashboard", + "workspaces", + "windowtitle" + ], + middle: [ + "media" + ], + right: [ + "volume", + "network", + "bluetooth", + "systray", + "clock", + "notifications" + ] + } + }), launcher: { icon: opt("󰣇"), }, @@ -555,7 +588,7 @@ const options = mkOptions(OPTIONS, { label: opt(true), }, battery: { - show_label: opt(true), + label: opt(true), }, systray: { ignore: opt([ @@ -612,11 +645,6 @@ const options = mkOptions(OPTIONS, { tooltip: opt("Color Picker"), command: opt("hyprpicker -a") }, - shortcut2: { - icon: opt("󰒓"), - tooltip: opt("Hyprland Config"), - command: opt("bash -c \"kitty -e nvim $HOME/.config/hypr/hyprland.conf\"") - }, shortcut3: { icon: opt("󰄀"), tooltip: opt("Screenshot"), @@ -660,8 +688,8 @@ const options = mkOptions(OPTIONS, { military: opt(false), }, weather: { - interval: opt(60_000), - unit: opt<"metric" | "imperial">("metric"), + interval: opt(60000), + unit: opt<"metric" | "imperial">("imperial"), key: opt( JSON.parse(Utils.readFile(`${App.configDir}/.weather.json`) || "{}")?.weather_api_key || "", ), @@ -686,7 +714,7 @@ const options = mkOptions(OPTIONS, { }, notifications: { - position: opt>(["top", "right"]), + position: opt<"top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left">("top right"), }, }) diff --git a/scss/style/bar/bar.scss b/scss/style/bar/bar.scss index 0bbce7c..324f4e1 100644 --- a/scss/style/bar/bar.scss +++ b/scss/style/bar/bar.scss @@ -12,7 +12,7 @@ background-color: $bar-buttons-background; border-radius: $bar-buttons-radius; padding: 0.2rem 0.9rem; - margin: 0.5rem 0.25rem; + margin: 0.5rem $bar-buttons-spacing; &:hover { background: $bar-buttons-hover; diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss index 3be2d14..faef24a 100644 --- a/scss/style/menus/calendar.scss +++ b/scss/style/menus/calendar.scss @@ -12,7 +12,7 @@ } .calendar-menu-item-container { - border-radius: 0.4em; + border-radius: $bar-menus-card_radius; margin-bottom: 1.35em; background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-clock-card-color); } diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss index b55393b..177a255 100644 --- a/scss/style/menus/media.scss +++ b/scss/style/menus/media.scss @@ -14,7 +14,7 @@ } .menu-items-section { - border-radius: 0.4em; + border-radius: $bar-menus-card_radius; padding: 0em; } @@ -108,6 +108,9 @@ background: if($bar-menus-monochrome, $bar-menus-slider-primary, $bar-menus-menu-media-slider-primary); } } + slider { + background: if($bar-menus-monochrome, $bar-menus-slider-puck, $bar-menus-menu-media-slider-puck); + } &:hover { trough { diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss index 3914421..8bfd2e4 100644 --- a/scss/style/menus/notifications.scss +++ b/scss/style/menus/notifications.scss @@ -3,7 +3,7 @@ .notification-card-container.menu { margin: 0em; - min-width: 30.5em; + min-width: 30.6em; min-height: 48em; background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-notifications-background); border: 0.13em solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border); @@ -24,7 +24,7 @@ background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-notifications-card); margin: 1em 1em; margin-bottom: 0.5em; - border-radius: 0.4em; + border-radius: $bar-menus-card_radius; padding: 0.4em 0.75em; } diff --git a/scss/style/menus/power.scss b/scss/style/menus/power.scss index bc5322c..81faebc 100644 --- a/scss/style/menus/power.scss +++ b/scss/style/menus/power.scss @@ -1,4 +1,5 @@ @import "../colors"; +@import '../../variables'; window#powermenu, window#verification { @@ -10,14 +11,14 @@ $popover-padding: 0.6rem * 1.6; window#verification .verification { @include floating-widget; - background: $crust; + background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background); padding: 0.35em * 1.6 * 1.5; min-width: 20em; min-height: 6em; font-size: 1.3em; .verification-content { - background: $base; + background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card); border-radius: 0.4em; padding: 1em; } @@ -27,12 +28,12 @@ window#verification .verification { .title { font-size: 1.5em; - color: $lavender; + color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-powermenu-confirmation-label); margin-bottom: 0.5em; } .desc { - color: $text; + color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-dashboard-powermenu-confirmation-body); font-size: 1em; margin-bottom: 0.55em; padding: 1em 3em; @@ -40,7 +41,7 @@ window#verification .verification { } .verification-button { - background: $base; + background: $bar-menus-buttons-default; padding: 0.7em 0em; margin: 0.4em 1.7em; border-radius: 0.3em; @@ -49,40 +50,40 @@ window#verification .verification { transition: opacity .3s ease-in-out; &.bar-verification_yes { - background-color: $green; + background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm); } &.bar-verification_no { - background-color: $red; + background-color: if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny); } &:hover { &.bar-verification_yes { - background: $lavender; + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6); transition: background-color 0.2s ease-in-out; } &.bar-verification_no { - background: $lavender; + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6); transition: background-color 0.2s ease-in-out; } } &:focus { &.bar-verification_yes{ - background: $lavender; + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6); transition: background 0.2s ease-in-out; } &.bar-verification_no { - background: $lavender; + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6); transition: background 0.2s ease-in-out; } } &:active { &.bar-verification_yes { - background: rgb($lavender, 0.4); + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-confirm), 0.6); transition: background 0.2s ease-in-out; } &.bar-verification_no { - background: rgb($lavender, 0.4); + background-color: transparentize(if($bar-menus-monochrome, $bar-menus-buttons-default, $bar-menus-menu-dashboard-powermenu-confirmation-deny), 0.6); transition: background 0.2s ease-in-out; } @@ -97,10 +98,10 @@ window#verification .verification { } } .bar-verification_no label { - color: $mantle; + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text); } .bar-verification_yes label { - color: $mantle; + color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-powermenu-confirmation-button_text); } } diff --git a/scss/style/settings/dialog.scss b/scss/style/settings/dialog.scss index f3f2d6d..6838698 100644 --- a/scss/style/settings/dialog.scss +++ b/scss/style/settings/dialog.scss @@ -1,172 +1,320 @@ @import '../../variables'; window.settings-dialog { - background-color: $bar-menus-cards; - color: $bar-menus-text; + background-color: $bar-menus-cards; + color: $bar-menus-text; - $padding: 1em; - $primary_bg: $bar-menus-background; - $spacing: 0.4em; - $radius: 0.5em; - $widget-bg: $bar-menus-cards; - $border: none; - $fg: $bar-menus-text; + $padding: 1em; + $primary_bg: $bar-menus-background; + $spacing: 0.4em; + $radius: 0.5em; + $widget-bg: $bar-menus-cards; + $border: none; + $fg: $bar-menus-text; - .header { + .header { + background-color: $bar-menus-background; - padding: $padding; + padding: $padding; - button { - font-weight: bold; - padding: $padding*.5 $padding; + button { + font-weight: bold; - } - - button.close { - padding: $padding * .5; - } - - button.reset { - padding: $padding*.5; - } } - .page { + button.close { + color: $bar-menus-iconbuttons-passive; + image { + font-size: 2em; + } - .page-content { - padding: $padding*2; - padding-top: 0; - } + &:hover { + color: $bar-menus-iconbuttons-active; + } } - .group { - .group-title { - color: $primary-bg; - margin-bottom: $spacing*.5; - } + button.reset { + color: $bar-menus-iconbuttons-passive; + padding: $padding*.5; + image { + font-size: 1.25em; + } - .group-reset { - margin: $spacing * .5; - padding: $padding * .5; + &:hover { + color: $bar-menus-iconbuttons-active; + } + } + } - &:disabled { - color: transparent; - } - } + .page { - &:not(:first-child) { - margin-top: $spacing; - } + .page-content { + padding: $padding*2; + padding-top: 0; + } + } + + .group { + .group-title { + color: $primary-bg; + margin-bottom: $spacing*.5; } - .row { + .group-reset { + margin: $spacing * .5; + padding: $padding * .5; + + &:disabled { + color: transparent; + } + } + + &:not(:first-child) { + margin-top: $spacing; + } + } + + .row { + background-color: $widget-bg; + padding: $padding; + border: $border; + border-top: none; + + &:first-child { + border-radius: $radius $radius 0em 0em; + border: $border; + } + + &:last-child { + border-radius: 0em 0em $radius $radius; + } + + &:first-child:last-child { + border-radius: $radius; + border: $border; + } + + button.reset { + margin-left: $spacing; + } + + label.id, + label.note { + color: transparentize($fg, .4) + } + + entry, + button { + padding: $padding; + } + + spinbutton { + entry { + border-radius: $radius 0em 0em $radius; + } + + button { + border-radius: 0em; + } + + button:last-child { + border-radius: 0em $radius $radius 0em; + } + } + + .enum-setter { + label { background-color: $widget-bg; - padding: $padding; border: $border; - border-top: none; + padding: 0em $padding; + border-radius: $radius 0em 0em $radius; + } - &:first-child { - border-radius: $radius $radius 0em 0em; - border: $border; - } + button { + border-radius: 0em; + } - &:last-child { - border-radius: 0em 0em $radius $radius; - } - - &:first-child:last-child { - border-radius: $radius; - border: $border; - } - - button.reset { - margin-left: $spacing; - } - - label.id, - label.note { - color: transparentize($fg, .4) - } - - entry, - button { - padding: $padding; - } - - spinbutton { - entry { - border-radius: $radius 0em 0em $radius; - } - - button { - border-radius: 0em; - } - - button:last-child { - border-radius: 0em $radius $radius 0em; - } - } - - .enum-setter { - label { - background-color: $widget-bg; - border: $border; - padding: 0em $padding; - border-radius: $radius 0em 0em $radius; - } - - button { - border-radius: 0em; - } - - button:last-child { - border-radius: 0em $radius $radius 0em; - } - } - - &.wallpaper { - button { - margin-top: $spacing * .5; - } - - .preview { - border-radius: $radius; - } - } + button:last-child { + border-radius: 0em $radius $radius 0em; + } } + + &.wallpaper { + button { + margin-top: $spacing * .5; + } + + .preview { + border-radius: $radius; + } + } + } } .option-item { - margin: 0em 2em; - margin-bottom: 1em; + margin: 0em 2em; + margin-bottom: 1em; - .reset { - color: $bar-menus-iconbuttons-passive; - } - .options-label { - color: $bar-menus-text; - } - .options-sublabel { - font-size: 0.75em; - margin-top: 0.2em; - color: $bar-menus-dimtext; - } - .inputter-container { - border-radius: $bar-menus-border-radius * 0.5; - :first-child { - border-radius: $bar-menus-border-radius * 0.5; - } - padding: 0.35em 0.35em; - background: $surface1; - margin-right: 1em; + .reset { + color: $bar-menus-iconbuttons-passive; + } + .options-label { + color: $bar-menus-text; + } + .options-sublabel { + font-size: 0.75em; + margin-top: 0.2em; + color: $bar-menus-dimtext; + } + .inputter-container { + border-radius: $bar-menus-border-radius * 0.5; + :first-child { + border-radius: $bar-menus-border-radius * 0.5; } + padding: 0.35em 0.35em; + background: $surface1; + margin-right: 1em; + } } .options-header { - margin: 1em 1em; - .label-name { - color: $bar-menus-label; - font-size: 0.9em; - margin-right: 0.5em; - } + margin: 1em 1em; + .label-name { + color: $bar-menus-label; + font-size: 0.9em; + margin-right: 0.5em; + } +} +.pager-button { + margin: 0.5em 0.75em; + + &.category label{ + font-size: 1.4em; + } + + &:hover { + color: $bar-menus-iconbuttons-active; + } + &.active { + color: $bar-menus-iconbuttons-active; + } +} +.bar-theme-page { min-height: 40em; +} +.settings-menu-stack { + background: $red; +} +.paged-container { + scrollbar { + margin-right: 0.2em; + min-width: 0.6em; + border-radius: $bar-menus-border-radius; + background: $bar-menus-background; + + slider { + min-width: 0.6em; + border-radius: $bar-menus-border-radius; + background: $bar-menus-buttons-default; + } + } + selection { + background: $bar-menus-background; + } + + switch { + font-size: 10px; + &:checked { + background: $bar-menus-switch-enabled; + } + slider { + background-color: $bar-menus-switch-puck; + } + + &:active { + background: if($bar-menus-monochrome, $bar-menus-switch-enabled, $bar-menus-menu-bluetooth-switch-enabled); + } + } + + entry { + min-width: 15em; + } +} + +dialog { + background: $bar-menus-cards; + + headerbar { + border-bottom: 0.075em solid $bar-menus-border-color; + background: $bar-menus-cards; + padding: 0.5em; + font-size: 1.5em; + + button { + color: $bar-menus-buttons-text; + min-width: 4.5em; + min-height: 2.5em; + border-radius: $bar-menus-border-radius; + background: $bar-menus-buttons-default; + + &:hover { + background: transparentize($bar-menus-buttons-default, 0.5); + } + } + } + + viewport { + border-right: .25em solid $bar-menus-border-color; + list { + row { + padding: 0em 1.5em; + + &:hover { + background: $bar-menus-buttons-default; + color: $bar-menus-buttons-text; + } + label { + margin: 0.5em 0.5em; + font-size: 0.85em; + } + } + } + + } + stack { + .horizontal .path-bar { + button { + background: $bar-menus-iconbuttons-active; + min-width: 3em; + min-height: 2em; + border-radius: $bar-menus-border-radius / 2; + + &:disabled { + background: $bar-menus-buttons-disabled; + } + + &:hover { + background: transparentize($bar-menus-buttons-active, 0.5); + } + label { + margin: 0em 0.25em; + color: $bar-menus-buttons-text + } + + image { + margin: 0em 0.5em; + color: $bar-menus-buttons-text + } + margin: 0.25em; + } + } + } + + treeview header button{ + padding: 0.25em; + border: .15em solid $bar-menus-border-color; + } + + headerbar { + color: $bar-menus-label; + } } diff --git a/scss/variables.scss b/scss/variables.scss index 1607c64..c2f6ae0 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -14,6 +14,7 @@ $notification-close_button-label: #11111b; $bar-transparent: false; $bar-background: #11111b; $bar-buttons-monochrome: false; +$bar-buttons-spacing: 0.25em; $bar-buttons-radius: 0.3em; $bar-buttons-background: #242438; $bar-buttons-hover: #45475a; @@ -61,7 +62,7 @@ $bar-buttons-notifications-background: #242438; $bar-buttons-notifications-hover: #45475a; $bar-buttons-notifications-icon: #b4befe; $bar-buttons-notifications-total: #b4befe; -$bar-menus-monochrome: true; +$bar-menus-monochrome: false; $bar-menus-background: #11111b; $bar-menus-cards: #1e1e2e; $bar-menus-card_radius: 0.4em; @@ -84,13 +85,7 @@ $bar-menus-buttons-active: #f5c2e7; $bar-menus-buttons-disabled: #585b70; $bar-menus-buttons-text: #11111b; $bar-menus-iconbuttons-passive: #cdd6f4; -$bar-menus-iconbuttons-active: #b4befe; -$bar-menus-dashboard-background: #242438; -$bar-menus-dashboard-text: #f9e2af; -$bar-menus-workspaces-background: #242438; -$bar-menus-workspaces-available: #89dceb; -$bar-menus-workspaces-occupied: #f2cdcd; -$bar-menus-workspaces-active: #f5c2e7; +$bar-menus-iconbuttons-active: #f5c2e7; $bar-menus-progressbar-foreground: #b4befe; $bar-menus-progressbar-background: #45475a; $bar-menus-slider-primary: #b4befe; @@ -162,7 +157,6 @@ $bar-menus-menu-bluetooth-icons-passive: #9399b2; $bar-menus-menu-bluetooth-icons-active: #89dceb; $bar-menus-menu-bluetooth-iconbutton-passive: #cdd6f4; $bar-menus-menu-bluetooth-iconbutton-active: #89dceb; -$bar-menus-menu-systray-background-color: #242438; $bar-menus-menu-systray-dropdownmenu-background: #11111b; $bar-menus-menu-systray-dropdownmenu-text: #cdd6f4; $bar-menus-menu-systray-dropdownmenu-divider: #1e1e2e; @@ -206,7 +200,6 @@ $bar-menus-menu-clock-weather-hourly-temperature: #f5c2e7; $bar-menus-menu-dashboard-card-color: #1e1e2e; $bar-menus-menu-dashboard-background-color: #11111b; $bar-menus-menu-dashboard-border-color: #313244; -$bar-menus-menu-dashboard-profile-card: #1e1e2e; $bar-menus-menu-dashboard-profile-name: #f5c2e7; $bar-menus-menu-dashboard-powermenu-shutdown: #f38ba8; $bar-menus-menu-dashboard-powermenu-restart: #fab387; @@ -215,10 +208,11 @@ $bar-menus-menu-dashboard-powermenu-sleep: #89dceb; $bar-menus-menu-dashboard-powermenu-confirmation-card: #1e1e2e; $bar-menus-menu-dashboard-powermenu-confirmation-background: #11111b; $bar-menus-menu-dashboard-powermenu-confirmation-border: #313244; -$bar-menus-menu-dashboard-powermenu-confirmation-label: #a6e3a1; +$bar-menus-menu-dashboard-powermenu-confirmation-label: #b4befe; $bar-menus-menu-dashboard-powermenu-confirmation-body: #cdd6f4; $bar-menus-menu-dashboard-powermenu-confirmation-confirm: #a6e3a1; $bar-menus-menu-dashboard-powermenu-confirmation-deny: #f38ba8; +$bar-menus-menu-dashboard-powermenu-confirmation-button_text: #11111b; $bar-menus-menu-dashboard-shortcuts-background: #b4befe; $bar-menus-menu-dashboard-shortcuts-text: #11111b; $bar-menus-menu-dashboard-shortcuts-recording: #a6e3a1; diff --git a/tsconfig.json b/tsconfig.json index 9e03196..d4cc70a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,19 +1,19 @@ { - "compilerOptions": { - "allowImportingTsExtensions": true, - "target": "ES2022", - "module": "ES2022", - "lib": [ - "ES2022" - ], - "allowJs": true, - "checkJs": true, - "strict": true, - "noImplicitAny": false, - "baseUrl": ".", - "typeRoots": [ - "./types" - ], - "skipLibCheck": true - } + "compilerOptions": { + "allowImportingTsExtensions": true, + "target": "ES2022", + "module": "ES2022", + "lib": [ + "ES2022" + ], + "allowJs": true, + "checkJs": true, + "strict": true, + "noImplicitAny": false, + "baseUrl": ".", + "typeRoots": [ + "./types" + ], + "skipLibCheck": true + } } diff --git a/widget/settings/SettingsDialog.ts b/widget/settings/SettingsDialog.ts index fd019ff..1f678b1 100644 --- a/widget/settings/SettingsDialog.ts +++ b/widget/settings/SettingsDialog.ts @@ -1,7 +1,18 @@ import RegularWindow from "widget/RegularWindow" import icons from "lib/icons" import options from "options" -import { BarTheme } from "./pages/theme/bar/index" +import { ThemesMenu } from "./pages/theme/index" +import { SettingsMenu } from "./pages/config/index" + +type Page = "Configuration" | "Theming" + +const CurrentPage = Variable("Theming"); + +const pagerMap: Page[] = [ + "Configuration", + "Theming", +] + const Header = () => Widget.CenterBox({ class_name: "header", start_widget: Widget.Button({ @@ -24,6 +35,41 @@ const Header = () => Widget.CenterBox({ }), }) +const PageContainer = () => { + return Widget.Box({ + hpack: "fill", + hexpand: true, + vertical: true, + children: CurrentPage.bind("value").as(v => { + return [ + Widget.Box({ + class_name: "option-pages-container", + hpack: "center", + hexpand: true, + children: pagerMap.map((page) => { + return Widget.Button({ + xalign: 0, + hpack: "center", + class_name: `pager-button ${v === page ? 'active' : ''} category`, + label: page, + on_primary_click: () => CurrentPage.value = page + }) + }) + }), + Widget.Stack({ + vexpand: false, + class_name: "themes-menu-stack", + children: { + "Configuration": SettingsMenu(), + "Theming": ThemesMenu(), + }, + shown: CurrentPage.bind("value") + }) + ] + }) + }) +} + export default () => RegularWindow({ name: "settings-dialog", class_name: "settings-dialog", @@ -33,13 +79,13 @@ export default () => RegularWindow({ win.hide() return true }) - win.set_default_size(500, 600) + win.set_default_size(200, 300) }, child: Widget.Box({ vertical: true, children: [ Header(), - BarTheme() + PageContainer() ], }), }) diff --git a/widget/settings/pages/config/bar/index.ts b/widget/settings/pages/config/bar/index.ts new file mode 100644 index 0000000..c1b77d1 --- /dev/null +++ b/widget/settings/pages/config/bar/index.ts @@ -0,0 +1,52 @@ +import { Option } from "widget/settings/shared/Option"; +import { Header } from "widget/settings/shared/Header"; + +import options from "options"; + +export const BarSettings = () => { + return Widget.Scrollable({ + vscroll: "always", + hscroll: "never", + class_name: "menu-theme-page paged-container", + child: Widget.Box({ + vertical: true, + children: [ + Header('Layouts'), + Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Please refer to the github README for instructions: https://github.com/Jas-SinghFSU/HyprPanel', type: 'object' }, 'bar-layout-input'), + + Header('Dashboard'), + Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }), + + Header('Workspaces'), + Option({ opt: options.bar.workspaces.show_icons, title: 'Show Workspace Icons', type: 'boolean' }), + Option({ opt: options.bar.workspaces.icons.available, title: 'Workspace Available', type: 'string' }), + Option({ opt: options.bar.workspaces.icons.active, title: 'Workspace Active', type: 'string' }), + Option({ opt: options.bar.workspaces.icons.occupied, title: 'Workspace Occupied', type: 'string' }), + Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', type: 'number' }), + Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed', type: 'boolean' }), + + Header('Volume'), + Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }), + + Header('Network'), + Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }), + + Header('Bluetooth'), + Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }), + + Header('Battery'), + Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }), + + Header('System Tray'), + // TODO: Figure out how to hand arrays + // Option({ opt: options.bar.systray.ignore, title: 'Ignore', subtitle: 'Comma separated string of apps to ignore in the tray', type: 'string' }), + + Header('Clock'), + Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }), + + Header('Notifications'), + Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }), + ] + }) + }) +} diff --git a/widget/settings/pages/config/general/index.ts b/widget/settings/pages/config/general/index.ts index ea42167..78f88ff 100644 --- a/widget/settings/pages/config/general/index.ts +++ b/widget/settings/pages/config/general/index.ts @@ -5,11 +5,11 @@ import options from "options"; export const BarGeneral = () => { return Widget.Box({ - class_name: "bar-theme-page", + class_name: "bar-theme-page paged-container", vertical: true, children: [ Header('General Settings'), - Option({ opt: options.theme.font.name, title: 'Font', type: 'string' }), + Option({ opt: options.theme.font.name, title: 'Font', type: 'font' }), Option({ opt: options.theme.font.size, title: 'Font Size', type: 'string' }), Option({ opt: options.theme.font.weight, title: 'Font Weight', subtitle: "100, 200, 300, etc.", type: 'number' }), ] diff --git a/widget/settings/pages/config/index.ts b/widget/settings/pages/config/index.ts new file mode 100644 index 0000000..08ab661 --- /dev/null +++ b/widget/settings/pages/config/index.ts @@ -0,0 +1,48 @@ +import { BarGeneral } from "./general/index"; +import { BarSettings } from "./bar/index"; +import { ClockMenuSettings } from "./menus/clock"; +import { DashboardMenuSettings } from "./menus/dashboard"; + +type Page = "General" | "Bar" | "Clock Menu" | "Dashboard Menu" +const CurrentPage = Variable("General"); + +const pagerMap: Page[] = [ + "General", + "Bar", + "Clock Menu", + "Dashboard Menu", +] + +export const SettingsMenu = () => { + return Widget.Box({ + vertical: true, + children: CurrentPage.bind("value").as(v => { + return [ + Widget.Box({ + class_name: "option-pages-container", + hpack: "center", + hexpand: true, + children: pagerMap.map((page) => { + return Widget.Button({ + hpack: "center", + class_name: `pager-button ${v === page ? 'active' : ''}`, + label: page, + on_primary_click: () => CurrentPage.value = page + }) + }) + }), + Widget.Stack({ + vexpand: true, + class_name: "themes-menu-stack", + children: { + "General": BarGeneral(), + "Bar": BarSettings(), + "Clock Menu": ClockMenuSettings(), + "Dashboard Menu": DashboardMenuSettings(), + }, + shown: CurrentPage.bind("value") + }) + ] + }) + }) +} diff --git a/widget/settings/pages/config/menus/clock.ts b/widget/settings/pages/config/menus/clock.ts new file mode 100644 index 0000000..f4172d4 --- /dev/null +++ b/widget/settings/pages/config/menus/clock.ts @@ -0,0 +1,20 @@ +import { Option } from "widget/settings/shared/Option"; +import { Header } from "widget/settings/shared/Header"; + +import options from "options"; + +export const ClockMenuSettings = () => { + return Widget.Box({ + class_name: "bar-theme-page paged-container", + vertical: true, + children: [ + Header('Time'), + Option({ opt: options.menus.clock.time.military, title: 'Use 24hr time', type: 'boolean' }), + + Header('Weather'), + Option({ opt: options.menus.clock.weather.interval, title: 'Weather Fetching Interval (ms)', subtitle: 'May require AGS restart.', type: 'number' }), + Option({ opt: options.menus.clock.weather.unit, title: 'Units', type: 'enum', enums: ['imperial', 'metric'] }), + Option({ opt: options.menus.clock.weather.key, title: 'Weather API Key', subtitle: 'May require AGS restart. https://weatherapi.com/', type: 'string' }), + ] + }) +} diff --git a/widget/settings/pages/config/menus/dashboard.ts b/widget/settings/pages/config/menus/dashboard.ts new file mode 100644 index 0000000..63d406a --- /dev/null +++ b/widget/settings/pages/config/menus/dashboard.ts @@ -0,0 +1,61 @@ +import { Option } from "widget/settings/shared/Option"; +import { Header } from "widget/settings/shared/Header"; + +import options from "options"; + +export const DashboardMenuSettings = () => { + return Widget.Scrollable({ + class_name: "bar-theme-page paged-container", + vscroll: "always", + hscroll: "never", + vexpand: true, + overlayScrolling: true, + child: Widget.Box({ + vertical: true, + children: [ + Header('Power Menu'), + Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }), + Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', subtitle: 'Use \'system\' to automatically set system name', type: 'string' }), + + Option({ opt: options.menus.dashboard.powermenu.shutdown, title: 'Shutdown Command', type: 'string' }), + Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }), + Option({ opt: options.menus.dashboard.powermenu.logout, title: 'Logout Command', type: 'string' }), + Option({ opt: options.menus.dashboard.powermenu.sleep, title: 'Sleep Command', type: 'string' }), + + Header('Shortcuts'), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.icon, title: 'Left - Shortcut 1 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.command, title: 'Left - Shortcut 1 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut1.tooltip, title: 'Left - Shortcut 1 (Tooltip)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.icon, title: 'Left - Shortcut 2 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.command, title: 'Left - Shortcut 2 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut2.tooltip, title: 'Left - Shortcut 2 (Tooltip)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.icon, title: 'Left - Shortcut 3 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.command, title: 'Left - Shortcut 3 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut3.tooltip, title: 'Left - Shortcut 3 (Tooltip)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.icon, title: 'Left - Shortcut 4 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.command, title: 'Left - Shortcut 4 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.left.shortcut4.tooltip, title: 'Left - Shortcut 4 (Tooltip)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.icon, title: 'Right - Shortcut 1 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.command, title: 'Right - Shortcut 1 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut1.tooltip, title: 'Right - Shortcut 1 (Tooltip)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.icon, title: 'Right - Shortcut 3 (Icon)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.command, title: 'Right - Shortcut 3 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.shortcuts.right.shortcut3.tooltip, title: 'Right - Shortcut 3 (Tooltip)', type: 'string' }), + + Header('Directories'), + Option({ opt: options.menus.dashboard.directories.left.directory1.label, title: 'Left - Directory 1 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.left.directory1.command, title: 'Left - Directory 1 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.left.directory2.label, title: 'Left - Directory 2 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.left.directory2.command, title: 'Left - Directory 2 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.left.directory3.label, title: 'Left - Directory 3 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.left.directory3.command, title: 'Left - Directory 3 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory1.label, title: 'Right - Directory 1 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory1.command, title: 'Right - Directory 1 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory2.label, title: 'Right - Directory 2 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory2.command, title: 'Right - Directory 2 (Command)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory3.label, title: 'Right - Directory 3 (Label)', type: 'string' }), + Option({ opt: options.menus.dashboard.directories.right.directory3.command, title: 'Right - Directory 3 (Command)', type: 'string' }), + ] + }) + }) +} diff --git a/widget/settings/pages/config/notifications/index.ts b/widget/settings/pages/config/notifications/index.ts new file mode 100644 index 0000000..12ec14b --- /dev/null +++ b/widget/settings/pages/config/notifications/index.ts @@ -0,0 +1,15 @@ +import { Option } from "widget/settings/shared/Option"; +import { Header } from "widget/settings/shared/Header"; + +import options from "options"; + +export const NotificationSettings = () => { + return Widget.Box({ + class_name: "bar-theme-page paged-container", + vertical: true, + children: [ + Header('Notification Settings'), + Option({ opt: options.notifications.position, title: 'Notification Location', type: 'enum', enums: ['top left', 'top', 'top right', 'bottom right', 'bottom', 'bottom left'] }), + ] + }) +} diff --git a/widget/settings/pages/theme/bar/index.ts b/widget/settings/pages/theme/bar/index.ts index 34aa156..1ca70af 100644 --- a/widget/settings/pages/theme/bar/index.ts +++ b/widget/settings/pages/theme/bar/index.ts @@ -5,10 +5,9 @@ import options from "options"; export const BarTheme = () => { return Widget.Scrollable({ - vscroll: "automatic", + vscroll: "always", hscroll: "never", - class_name: "bar-theme-page", - vexpand: true, + class_name: "bar-theme-page paged-container", child: Widget.Box({ vertical: true, children: [ @@ -16,6 +15,7 @@ export const BarTheme = () => { Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }), Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }), Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean' }), + Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', type: 'string' }), Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }), Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }), Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }), diff --git a/widget/settings/pages/theme/index.ts b/widget/settings/pages/theme/index.ts new file mode 100644 index 0000000..9612a9f --- /dev/null +++ b/widget/settings/pages/theme/index.ts @@ -0,0 +1,92 @@ +import { BarTheme } from "./bar/index"; +import { NotificationsTheme } from "./notifications/index"; +import { BatteryMenuTheme } from "./menus/battery"; +import { BluetoothMenuTheme } from "./menus/bluetooth"; +import { ClockMenuTheme } from "./menus/clock"; +import { DashboardMenuTheme } from "./menus/dashboard"; +import { MenuTheme } from "./menus/index"; +import { MediaMenuTheme } from "./menus/media"; +import { NetworkMenuTheme } from "./menus/network"; +import { NotificationsMenuTheme } from "./menus/notifications"; +import { SystrayMenuTheme } from "./menus/systray"; +import { VolumeMenuTheme } from "./menus/volume"; + +type Page = "General Settings" + | "Bar" + | "Notifications" + | "Battery Menu" + | "Bluetooth Menu" + | "Clock Menu" + | "Dashboard Menu" + | "Media Menu" + | "Network Menu" + | "Notifications Menu" + | "System Tray" + | "Volume Menu"; + +const CurrentPage = Variable("General Settings"); + +const pagerMap: Page[] = [ + "General Settings", + "Bar", + "Notifications", + "Battery Menu", + "Bluetooth Menu", + "Clock Menu", + "Dashboard Menu", + "Media Menu", "Network Menu", + "Notifications Menu", + "System Tray", + "Volume Menu", +] + +export const ThemesMenu = () => { + return Widget.Box({ + vertical: true, + children: CurrentPage.bind("value").as(v => { + return [ + Widget.Box({ + class_name: "option-pages-container", + hpack: "center", + hexpand: true, + vertical: true, + children: [0, 1, 2].map(section => { + return Widget.Box({ + children: pagerMap.map((page, index) => { + if (index >= section * 5 && index < section * 5 + 5) { + return Widget.Button({ + hpack: "center", + xalign: 0, + class_name: `pager-button ${v === page ? 'active' : ''}`, + label: page, + on_primary_click: () => CurrentPage.value = page + }) + } + return Widget.Box(); + }) + }) + }) + }), + Widget.Stack({ + vexpand: true, + class_name: "themes-menu-stack", + children: { + "General Settings": MenuTheme(), + "Bar": BarTheme(), + "Notifications": NotificationsTheme(), + "Battery Menu": BatteryMenuTheme(), + "Bluetooth Menu": BluetoothMenuTheme(), + "Clock Menu": ClockMenuTheme(), + "Dashboard Menu": DashboardMenuTheme(), + "Media Menu": MediaMenuTheme(), + "Network Menu": NetworkMenuTheme(), + "Notifications Menu": NotificationsMenuTheme(), + "System Tray": SystrayMenuTheme(), + "Volume Menu": VolumeMenuTheme(), + }, + shown: CurrentPage.bind("value"), + }) + ] + }) + }) +} diff --git a/widget/settings/pages/theme/menus/battery.ts b/widget/settings/pages/theme/menus/battery.ts index 2e82217..d2b67c6 100644 --- a/widget/settings/pages/theme/menus/battery.ts +++ b/widget/settings/pages/theme/menus/battery.ts @@ -7,7 +7,7 @@ export const BatteryMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page battery", + class_name: "menu-theme-page battery paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/bluetooth.ts b/widget/settings/pages/theme/menus/bluetooth.ts index 095e0f0..4993db9 100644 --- a/widget/settings/pages/theme/menus/bluetooth.ts +++ b/widget/settings/pages/theme/menus/bluetooth.ts @@ -7,7 +7,7 @@ export const BluetoothMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page bluetooth", + class_name: "menu-theme-page bluetooth paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/clock.ts b/widget/settings/pages/theme/menus/clock.ts index 11b812f..26455db 100644 --- a/widget/settings/pages/theme/menus/clock.ts +++ b/widget/settings/pages/theme/menus/clock.ts @@ -7,7 +7,7 @@ export const ClockMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page clock", + class_name: "menu-theme-page clock paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/dashboard.ts b/widget/settings/pages/theme/menus/dashboard.ts index 91c121d..e9e5b2f 100644 --- a/widget/settings/pages/theme/menus/dashboard.ts +++ b/widget/settings/pages/theme/menus/dashboard.ts @@ -5,15 +5,13 @@ import options from "options"; export const DashboardMenuTheme = () => { return Widget.Scrollable({ - vscroll: "automatic", + vscroll: "always", hscroll: "never", - class_name: "menu-theme-page dashboard", + class_name: "menu-theme-page dashboard paged-container", vexpand: true, child: Widget.Box({ vertical: true, children: [ - Header('Dashboard Menu Theme Settings'), - Header('Card'), Option({ opt: options.theme.bar.menus.menu.dashboard.card.color, title: 'Card', type: 'color' }), @@ -38,6 +36,7 @@ export const DashboardMenuTheme = () => { Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.body, title: 'Confirmation Dialog Description', type: 'color' }), Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.confirm, title: 'Confirmation Dialog Confirm Button', type: 'color' }), Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.deny, title: 'Confirmation Dialog Cancel Button', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.powermenu.confirmation.button_text, title: 'Confirmation Dialog Button Text', type: 'color' }), Header('Shortcuts'), Option({ opt: options.theme.bar.menus.menu.dashboard.shortcuts.background, title: 'Primary', type: 'color' }), @@ -58,12 +57,12 @@ export const DashboardMenuTheme = () => { Option({ opt: options.theme.bar.menus.menu.dashboard.controls.input.text, title: 'Input Button Text', type: 'color' }), Header('Directories'), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top, title: 'Directory: Left - Top', type: 'color' }), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle, title: 'Directory: Left - Middle', type: 'color' }), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom, title: 'Directory: Left - Bottom', type: 'color' }), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top, title: 'Directory: Right - Top', type: 'color' }), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle, title: 'Directory: Right - Middle', type: 'color' }), - Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom, title: 'Directory: Right - Bottom', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.top.color, title: 'Directory: Left - Top', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.middle.color, title: 'Directory: Left - Middle', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.left.bottom.color, title: 'Directory: Left - Bottom', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.top.color, title: 'Directory: Right - Top', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.middle.color, title: 'Directory: Right - Middle', type: 'color' }), + Option({ opt: options.theme.bar.menus.menu.dashboard.directories.right.bottom.color, title: 'Directory: Right - Bottom', type: 'color' }), Header('System Stats'), Option({ opt: options.theme.bar.menus.menu.dashboard.monitors.bar_background, title: 'Bar Background', type: 'color' }), diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index 64f4fb8..929c729 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/widget/settings/pages/theme/menus/index.ts @@ -7,7 +7,7 @@ export const MenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page", + class_name: "menu-theme-page paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/media.ts b/widget/settings/pages/theme/menus/media.ts index 99ed8c4..5e864bf 100644 --- a/widget/settings/pages/theme/menus/media.ts +++ b/widget/settings/pages/theme/menus/media.ts @@ -7,7 +7,7 @@ export const MediaMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page media", + class_name: "menu-theme-page media paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/network.ts b/widget/settings/pages/theme/menus/network.ts index 3d5d190..d4dfa5f 100644 --- a/widget/settings/pages/theme/menus/network.ts +++ b/widget/settings/pages/theme/menus/network.ts @@ -7,7 +7,7 @@ export const NetworkMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page network", + class_name: "menu-theme-page network paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/notifications.ts b/widget/settings/pages/theme/menus/notifications.ts index eb25a32..30cb372 100644 --- a/widget/settings/pages/theme/menus/notifications.ts +++ b/widget/settings/pages/theme/menus/notifications.ts @@ -7,7 +7,7 @@ export const NotificationsMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page notifications", + class_name: "menu-theme-page notifications paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/systray.ts b/widget/settings/pages/theme/menus/systray.ts index 0669851..147c6ea 100644 --- a/widget/settings/pages/theme/menus/systray.ts +++ b/widget/settings/pages/theme/menus/systray.ts @@ -7,7 +7,7 @@ export const SystrayMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page systray", + class_name: "menu-theme-page systray paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/menus/volume.ts b/widget/settings/pages/theme/menus/volume.ts index 43ddbff..d5eba10 100644 --- a/widget/settings/pages/theme/menus/volume.ts +++ b/widget/settings/pages/theme/menus/volume.ts @@ -7,7 +7,7 @@ export const VolumeMenuTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "menu-theme-page volume", + class_name: "menu-theme-page volume paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/pages/theme/notifications/index.ts b/widget/settings/pages/theme/notifications/index.ts index ea880ce..8772d56 100644 --- a/widget/settings/pages/theme/notifications/index.ts +++ b/widget/settings/pages/theme/notifications/index.ts @@ -7,7 +7,7 @@ export const NotificationsTheme = () => { return Widget.Scrollable({ vscroll: "automatic", hscroll: "never", - class_name: "notifications-theme-page", + class_name: "notifications-theme-page paged-container", vexpand: true, child: Widget.Box({ vertical: true, diff --git a/widget/settings/shared/Inputter.ts b/widget/settings/shared/Inputter.ts index cc3b7ce..f0070bc 100644 --- a/widget/settings/shared/Inputter.ts +++ b/widget/settings/shared/Inputter.ts @@ -3,115 +3,119 @@ import Gdk from "gi://Gdk" import icons from "lib/icons" export type RowProps = { - opt: Opt - title: string - note?: string - type?: - | "number" - | "color" - | "float" - | "object" - | "string" - | "enum" - | "boolean" - | "img" - | "font" - enums?: string[] - max?: number - min?: number + opt: Opt + title: string + note?: string + type?: + | "number" + | "color" + | "float" + | "object" + | "string" + | "enum" + | "boolean" + | "img" + | "font" + enums?: string[] + max?: number + min?: number } const EnumSetter = (opt: Opt, values: string[]) => { - const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) }) - const step = (dir: 1 | -1) => { - const i = values.findIndex(i => i === lbl.label) - opt.setValue(dir > 0 - ? i + dir > values.length - 1 ? values[0] : values[i + dir] - : i + dir < 0 ? values[values.length - 1] : values[i + dir], - ) - } - const next = Widget.Button({ - child: Widget.Icon(icons.ui.arrow.right), - on_clicked: () => step(+1), - }) - const prev = Widget.Button({ - child: Widget.Icon(icons.ui.arrow.left), - on_clicked: () => step(-1), - }) - return Widget.Box({ - class_name: "enum-setter", - children: [lbl, prev, next], - }) + const lbl = Widget.Label({ label: opt.bind().as(v => `${v}`) }) + const step = (dir: 1 | -1) => { + const i = values.findIndex(i => i === lbl.label) + opt.setValue(dir > 0 + ? i + dir > values.length - 1 ? values[0] : values[i + dir] + : i + dir < 0 ? values[values.length - 1] : values[i + dir], + ) + } + const next = Widget.Button({ + child: Widget.Icon(icons.ui.arrow.right), + on_clicked: () => step(+1), + }) + const prev = Widget.Button({ + child: Widget.Icon(icons.ui.arrow.left), + on_clicked: () => step(-1), + }) + return Widget.Box({ + class_name: "enum-setter", + children: [lbl, prev, next], + }) } export const Inputter = ({ - opt, - type = typeof opt.value as RowProps["type"], - enums, - max = 1000, - min = 0, -}: RowProps) => { - return Widget.Box({ - class_name: "inputter-container", - setup: self => { + opt, + type = typeof opt.value as RowProps["type"], + enums, + max = 1000000, + min = 0, +}: RowProps, + className: string +) => { + return Widget.Box({ + class_name: "inputter-container", + setup: self => { - switch (type) { - case "number": return self.child = Widget.SpinButton({ - setup(self) { - self.set_range(min, max) - self.set_increments(1, 5) - self.on("value-changed", () => opt.value = self.value as T) - self.hook(opt, () => self.value = opt.value as number) - }, - }) + switch (type) { + case "number": return self.child = Widget.SpinButton({ + setup(self) { + self.set_range(min, max) + self.set_increments(1, 5) + self.on("value-changed", () => opt.value = self.value as T) + self.hook(opt, () => self.value = opt.value as number) + }, + }) - case "float": - case "object": return self.child = Widget.Entry({ - on_accept: self => opt.value = JSON.parse(self.text || ""), - setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)), - }) + case "float": + case "object": return self.child = Widget.Entry({ + class_name: className, + on_accept: self => opt.value = JSON.parse(self.text || ""), + setup: self => self.hook(opt, () => self.text = JSON.stringify(opt.value)), + }) - case "string": return self.child = Widget.Entry({ - on_accept: self => opt.value = self.text as T, - setup: self => self.hook(opt, () => self.text = opt.value as string), - }) + case "string": return self.child = Widget.Entry({ + on_accept: self => opt.value = self.text as T, + setup: self => self.hook(opt, () => self.text = opt.value as string), + }) - case "enum": return self.child = EnumSetter(opt as unknown as Opt, enums!) - case "boolean": return self.child = Widget.Switch() - .on("notify::active", self => opt.value = self.active as T) - .hook(opt, self => self.active = opt.value as boolean) + case "enum": return self.child = EnumSetter(opt as unknown as Opt, enums!) + case "boolean": return self.child = Widget.Switch() + .on("notify::active", self => opt.value = self.active as T) + .hook(opt, self => self.active = opt.value as boolean) - case "img": return self.child = Widget.FileChooserButton({ - on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T }, - }) + case "img": return self.child = Widget.FileChooserButton({ + class_name: "image-chooser", + on_file_set: ({ uri }) => { opt.value = uri!.replace("file://", "") as T }, + }) - case "font": return self.child = Widget.FontButton({ - show_size: false, - use_size: false, - setup: self => self - .hook(opt, () => self.font = opt.value as string) - .on("font-set", ({ font }) => opt.value = font! - .split(" ").slice(0, -1).join(" ") as T), - }) + case "font": return self.child = Widget.FontButton({ + show_size: false, + use_size: false, + setup: self => self + .hook(opt, () => self.font = opt.value as string) + .on("font-set", ({ font }) => opt.value = font! + .split(" ").slice(0, -1).join(" ") as T), + }) - case "color": return self.child = Widget.ColorButton() - .hook(opt, self => { - const rgba = new Gdk.RGBA() - rgba.parse(opt.value as string) - self.rgba = rgba - }) - .on("color-set", ({ rgba: { red, green, blue } }) => { - const hex = (n: number) => { - const c = Math.floor(255 * n).toString(16) - return c.length === 1 ? `0${c}` : c + case "color": return self.child = Widget.ColorButton() + .hook(opt, self => { + const rgba = new Gdk.RGBA() + rgba.parse(opt.value as string) + self.rgba = rgba + }) + .on("color-set", ({ rgba: { red, green, blue } }) => { + const hex = (n: number) => { + const c = Math.floor(255 * n).toString(16) + return c.length === 1 ? `0${c}` : c + } + opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T + }) + + default: return self.child = Widget.Label({ + label: `no setter with type ${type}`, + }) } - opt.value = `#${hex(red)}${hex(green)}${hex(blue)}` as T - }) - - default: return self.child = Widget.Label({ - label: `no setter with type ${type}`, - }) - } - } - }) + } + }) } diff --git a/widget/settings/shared/Option.ts b/widget/settings/shared/Option.ts index 881d8ab..08f8881 100644 --- a/widget/settings/shared/Option.ts +++ b/widget/settings/shared/Option.ts @@ -2,25 +2,25 @@ import { Label } from "./Label"; import { Inputter } from "./Inputter"; import icons from "lib/icons"; -export const Option = (props) => { - return Widget.Box({ - class_name: "option-item", - hexpand: true, - children: [ - Widget.Box({ - hpack: "start", - vpack: "center", +export const Option = (props, className = '') => { + return Widget.Box({ + class_name: "option-item", hexpand: true, - child: Label(props.title, props.subtitle || ""), - }), - Inputter(props), - Widget.Button({ - vpack: "center", - class_name: "reset", - child: Widget.Icon(icons.ui.refresh), - on_clicked: () => props.opt.reset(), - sensitive: props.opt.bind().as(v => v !== props.opt.initial), - }), - ] - }) + children: [ + Widget.Box({ + hpack: "start", + vpack: "center", + hexpand: true, + child: Label(props.title, props.subtitle || ""), + }), + Inputter(props, className), + Widget.Button({ + vpack: "center", + class_name: "reset", + child: Widget.Icon(icons.ui.refresh), + on_clicked: () => props.opt.reset(), + sensitive: props.opt.bind().as(v => v !== props.opt.initial), + }), + ] + }) }