LESA/custum-hyprpanel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Closes #18 - Implemented the ability to make the bar float with configurable spacing. (#19)

Browse Source
This commit is contained in:
Jas Singh
2024-07-28 02:28:31 -07:00
committed by GitHub
parent 033fbe6947
commit 44bdb46346
5 changed files with 65 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
modules/bar/Bar.ts
View File

@@ -93,38 +93,42 @@ export const Bar = (monitor: number) => {
visible: true, visible: true,
anchor: ["top", "left", "right"], anchor: ["top", "left", "right"],
exclusivity: "exclusive", exclusivity: "exclusive",
child: Widget.CenterBox({ child: Widget.Box({
css: 'padding: 1px', class_name: 'bar-panel-container',
startWidget: Widget.Box({ child: Widget.CenterBox({
class_name: "box-left", class_name: 'bar-panel',
hexpand: true, css: 'padding: 1px',
setup: self => { startWidget: Widget.Box({
self.hook(layouts, (self) => { class_name: "box-left",
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) hexpand: true,
self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); 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 => { centerWidget: Widget.Box({
self.hook(layouts, (self) => { class_name: "box-center",
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) hpack: "center",
self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); 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 => { endWidget: Widget.Box({
self.hook(layouts, (self) => { class_name: "box-right",
const foundLayout = getModulesForMonitor(monitor, layouts.value as BarLayout) hpack: "end",
self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](monitor)); 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));
})
},
}),
})
}) })
}); });
}; };

5
options.ts
View File

@@ -54,6 +54,11 @@ const options = mkOptions(OPTIONS, {
} }
}, },
bar: { 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), transparent: opt(false),
background: opt(colors.crust), background: opt(colors.crust),
buttons: { buttons: {

13
scss/style/bar/bar.scss
View File

@@ -2,11 +2,22 @@
@import "../../variables"; @import "../../variables";
.bar { .bar {
background: if($bar-transparent, transparent, $bar-background);
.transparent { .transparent {
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 { .bar_item_box_visible {

5
scss/variables.scss
View File

@@ -11,6 +11,11 @@ $notification-text: #cdd6f4;
$notification-labelicon: #b4befe; $notification-labelicon: #b4befe;
$notification-close_button-background: #f38ba8; $notification-close_button-background: #f38ba8;
$notification-close_button-label: #11111b; $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-transparent: false;
$bar-background: #11111b; $bar-background: #11111b;
$bar-buttons-monochrome: false; $bar-buttons-monochrome: false;

7
widget/settings/pages/config/bar/index.ts
View File

@@ -14,6 +14,13 @@ export const BarSettings = () => {
Header('Layouts'), 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'), 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'), Header('Dashboard'),
Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }), Option({ opt: options.bar.launcher.icon, title: 'Dashboard Menu Icon', type: 'string' }),