From 44bdb46346cd3a7679f35bd691007bcb240d53d7 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sun, 28 Jul 2024 02:28:31 -0700 Subject: [PATCH] Closes #18 - Implemented the ability to make the bar float with configurable spacing. (#19) --- modules/bar/Bar.ts | 68 ++++++++++++----------- options.ts | 5 ++ scss/style/bar/bar.scss | 13 ++++- scss/variables.scss | 5 ++ widget/settings/pages/config/bar/index.ts | 7 +++ 5 files changed, 65 insertions(+), 33 deletions(-) diff --git a/modules/bar/Bar.ts b/modules/bar/Bar.ts index fdb6ae4..775b99b 100644 --- a/modules/bar/Bar.ts +++ b/modules/bar/Bar.ts @@ -93,38 +93,42 @@ export const Bar = (monitor: number) => { 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)); - }) - }, - }), + child: Widget.Box({ + class_name: 'bar-panel-container', + child: Widget.CenterBox({ + class_name: 'bar-panel', + 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/options.ts b/options.ts index 5dfb67d..8de7846 100644 --- a/options.ts +++ b/options.ts @@ -54,6 +54,11 @@ const options = mkOptions(OPTIONS, { } }, bar: { + floating: opt(false), + margin_top: opt("0.5em"), + margin_bottom: opt("0em"), + margin_sides: opt("0.5em"), + border_radius: opt("0.4em"), transparent: opt(false), background: opt(colors.crust), buttons: { diff --git a/scss/style/bar/bar.scss b/scss/style/bar/bar.scss index 191dabc..4676074 100644 --- a/scss/style/bar/bar.scss +++ b/scss/style/bar/bar.scss @@ -2,11 +2,22 @@ @import "../../variables"; .bar { - background: if($bar-transparent, transparent, $bar-background); .transparent { background: transparent; } + + .bar-panel-container { + margin-top: if($bar-floating, $bar-margin_top, 0em); + margin-bottom: if($bar-floating, $bar-margin_bottom, 0em); + margin-left: if($bar-floating, $bar-margin_sides, 0em); + margin-right: if($bar-floating, $bar-margin_sides, 0em); + } + + .bar-panel { + background: if($bar-transparent, transparent, $bar-background); + border-radius: if($bar-floating, $bar-border_radius, 0em); + } } .bar_item_box_visible { diff --git a/scss/variables.scss b/scss/variables.scss index 92680e0..cbff55b 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -11,6 +11,11 @@ $notification-text: #cdd6f4; $notification-labelicon: #b4befe; $notification-close_button-background: #f38ba8; $notification-close_button-label: #11111b; +$bar-floating: false; +$bar-margin_top: 0.5em; +$bar-margin_bottom: 0em; +$bar-margin_sides: 0.5em; +$bar-border_radius: 0.4em; $bar-transparent: false; $bar-background: #11111b; $bar-buttons-monochrome: false; diff --git a/widget/settings/pages/config/bar/index.ts b/widget/settings/pages/config/bar/index.ts index b48bb03..68d3985 100644 --- a/widget/settings/pages/config/bar/index.ts +++ b/widget/settings/pages/config/bar/index.ts @@ -14,6 +14,13 @@ export const BarSettings = () => { 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('Spacing'), + Option({ opt: options.theme.bar.floating, title: 'Floating Bar', type: 'boolean' }), + Option({ opt: options.theme.bar.margin_top, title: 'Margin Top', subtitle: 'Only applies if floating is enabled', type: 'string' }), + Option({ opt: options.theme.bar.margin_bottom, title: 'Margin Bottom', subtitle: 'Only applies if floating is enabled', type: 'string' }), + Option({ opt: options.theme.bar.margin_sides, title: 'Margin Sides', subtitle: 'Only applies if floating is enabled', type: 'string' }), + Option({ opt: options.theme.bar.border_radius, title: 'Border Radius', subtitle: 'Only applies if floating is enabled', type: 'string' }), + Header('Dashboard'), Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),