From f09f4ad6bd6a5a51895784fa8c6cabea8a383e74 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sun, 28 Jul 2024 17:51:16 -0700 Subject: [PATCH] Closes #22 - Implemented numbered workspace identifiers. (#31) --- modules/bar/workspaces/index.ts | 11 ++++++++++- options.ts | 4 ++++ scss/style/bar/workspace.scss | 21 +++++++++++++++++++++ widget/settings/SettingsDialog.ts | 1 + widget/settings/pages/config/bar/index.ts | 4 ++++ widget/settings/side_effects/index.ts | 15 +++++++++++++++ 6 files changed, 55 insertions(+), 1 deletion(-) create mode 100644 widget/settings/side_effects/index.ts diff --git a/modules/bar/workspaces/index.ts b/modules/bar/workspaces/index.ts index 5a66166..ba099c8 100644 --- a/modules/bar/workspaces/index.ts +++ b/modules/bar/workspaces/index.ts @@ -144,15 +144,24 @@ const Workspaces = (monitor = -1, ws = 8) => { class_name: Utils.merge( [ options.bar.workspaces.show_icons.bind("value"), + options.bar.workspaces.show_numbered.bind("value"), + options.bar.workspaces.numbered_active_indicator.bind("value"), options.bar.workspaces.icons.available.bind("value"), options.bar.workspaces.icons.active.bind("value"), options.bar.workspaces.icons.occupied.bind("value"), hyprland.active.workspace.bind("id") ], - (show_icons) => { + (show_icons, show_numbered, numbered_active_indicator) => { if (show_icons) { return `workspace-icon`; } + if (show_numbered) { + const numActiveInd = hyprland.active.workspace.id === i + ? numbered_active_indicator + : ""; + + return `workspace-number ${numActiveInd}`; + } return ""; }, ), diff --git a/options.ts b/options.ts index afc06f6..e76105a 100644 --- a/options.ts +++ b/options.ts @@ -82,6 +82,8 @@ const options = mkOptions(OPTIONS, { available: opt(colors.sky), occupied: opt(colors.flamingo), active: opt(colors.pink), + numbered_active_highlight_border: opt("0.2em"), + numbered_active_text_color: opt(colors.mantle), }, windowtitle: { background: opt(colors.base2), @@ -585,6 +587,8 @@ const options = mkOptions(OPTIONS, { }, workspaces: { show_icons: opt(false), + show_numbered: opt(false), + numbered_active_indicator: opt<"underline" | "highlight">("underline"), icons: { available: opt(""), active: opt(""), diff --git a/scss/style/bar/workspace.scss b/scss/style/bar/workspace.scss index 09e90d9..b51220f 100644 --- a/scss/style/bar/workspace.scss +++ b/scss/style/bar/workspace.scss @@ -33,5 +33,26 @@ transition: 300ms * .5; font-size: 1em; } + + &.workspace-number { + background-color: transparent; + min-width: 0em; + min-height: 0em; + border-radius: 0em; + transition: 0ms; + padding: 0em 0.2em; + font-size: 1.2em; + } + + &.underline { + border-bottom: 0.1em solid $pink; + } + + &.highlight { + color: $bar-buttons-workspaces-numbered_active_text_color; + border-radius: $bar-buttons-workspaces-numbered_active_highlight_border; + background-color: $bar-buttons-workspaces-active; + padding: 0em 0.2em; + } } } diff --git a/widget/settings/SettingsDialog.ts b/widget/settings/SettingsDialog.ts index 114fb8c..e62ba4d 100644 --- a/widget/settings/SettingsDialog.ts +++ b/widget/settings/SettingsDialog.ts @@ -3,6 +3,7 @@ import icons from "lib/icons" import options from "options" import { ThemesMenu } from "./pages/theme/index" import { SettingsMenu } from "./pages/config/index" +import "./side_effects"; type Page = "Configuration" | "Theming" diff --git a/widget/settings/pages/config/bar/index.ts b/widget/settings/pages/config/bar/index.ts index ed2807e..d8adf0f 100644 --- a/widget/settings/pages/config/bar/index.ts +++ b/widget/settings/pages/config/bar/index.ts @@ -32,6 +32,10 @@ export const BarSettings = () => { 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.show_numbered, title: 'Show Workspace Numbers', type: 'boolean' }), + Option({ opt: options.bar.workspaces.numbered_active_indicator, title: 'Numbered Workspace Identifier', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'enum', enums: ["underline", "highlight"] }), + Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_highlight_border, title: 'Highlight Radius', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'string' }), + Option({ opt: options.theme.bar.buttons.workspaces.numbered_active_text_color, title: 'Highlighted Text Color', subtitle: 'Only applicable if Workspace Numbers are enabled', type: 'color' }), Option({ opt: options.bar.workspaces.spacing, title: 'Spacing', subtitle: 'Spacing between workspace icons', type: 'float' }), 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' }), diff --git a/widget/settings/side_effects/index.ts b/widget/settings/side_effects/index.ts new file mode 100644 index 0000000..42bc183 --- /dev/null +++ b/widget/settings/side_effects/index.ts @@ -0,0 +1,15 @@ +import options from "options"; + +const { show_numbered, show_icons } = options.bar.workspaces; + +show_numbered.connect("changed", ({ value }) => { + if (value === true) { + show_icons.value = false; + } +}) + +show_icons.connect("changed", ({ value }) => { + if (value === true) { + show_numbered.value = false; + } +})