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

Added the ability to change bar locations. (#257)

Browse Source 
* Added the ability to change bar locations.

* Update dropdown margins

* Make dropdown to bar gap configurable and organized code.
This commit is contained in:
Jas Singh
2024-09-14 23:29:00 -07:00
committed by GitHub
parent 4238a5516e
commit 8c2537b917
21 changed files with 420 additions and 367 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/types/options.d.ts vendored
View File

@@ -14,6 +14,8 @@ export type RecursiveOptionsObject = {
[key: string]: RecursiveOptionsObject | Opt<string | number | boolean> | Opt<any>;
};
export type BarLocation = 'top' | 'bottom';
export type Unit = 'imperial' | 'metric';
export type PowerOptions = 'sleep' | 'reboot' | 'logout' | 'shutdown';
export type NotificationAnchor =

3
modules/bar/Bar.ts
View File

@@ -36,6 +36,7 @@ import { Attribute, Child } from 'lib/types/widget.js';
import Window from 'types/widgets/window.js';
const { layouts } = options.bar;
const { location } = options.theme.bar;
export type BarWidget = keyof typeof widget;
@@ -252,7 +253,7 @@ export const Bar = (() => {
class_name: 'bar',
monitor,
visible: true,
anchor: ['top', 'left', 'right'],
anchor: location.bind('value').as((ln) => [ln, 'left', 'right']),
exclusivity: 'exclusive',
layer: Utils.merge(
[options.theme.bar.layer.bind('value'), options.tear.bind('value')],

191
modules/menus/DropdownMenu.ts
View File

@@ -1,191 +0,0 @@
const hyprland = await Service.import('hyprland');
import { DropdownMenuProps } from 'lib/types/dropdownmenu';
import { Attribute, Child, Exclusivity, GtkWidget } from 'lib/types/widget';
import { bash } from 'lib/utils';
import { Widget as TWidget } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
import { Monitor } from 'types/service/hyprland';
import Box from 'types/widgets/box';
import EventBox from 'types/widgets/eventbox';
import Revealer from 'types/widgets/revealer';
import Window from 'types/widgets/window';
type NestedRevealer = Revealer<Box<TWidget, unknown>, unknown>;
type NestedBox = Box<NestedRevealer, unknown>;
type NestedEventBox = EventBox<NestedBox, unknown>;
export const Padding = (name: string): EventBox<Box<GtkWidget, Attribute>, Attribute> =>
Widget.EventBox({
hexpand: true,
vexpand: true,
can_focus: true,
child: Widget.Box(),
setup: (w) => w.on('button-press-event', () => App.toggleWindow(name)),
});
const moveBoxToCursor = <T extends NestedEventBox>(self: T, fixed: boolean): void => {
if (fixed) {
return;
}
globalMousePos.connect('changed', async ({ value }) => {
const curHyprlandMonitor = hyprland.monitors.find((m) => m.id === hyprland.active.monitor.id);
const dropdownWidth = self.child.get_allocation().width;
let hyprScaling = 1;
try {
const monitorInfo = await bash('hyprctl monitors -j');
const parsedMonitorInfo = JSON.parse(monitorInfo);
const foundMonitor = parsedMonitorInfo.find(
(monitor: Monitor) => monitor.id === hyprland.active.monitor.id,
);
hyprScaling = foundMonitor?.scale || 1;
} catch (error) {
console.error(`Error parsing hyprland monitors: ${error}`);
}
let monWidth = curHyprlandMonitor?.width;
let monHeight = curHyprlandMonitor?.height;
if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
return;
}
// If GDK Scaling is applied, then get divide width by scaling
// to get the proper coordinates.
// Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
// end of the monitor is the 1430th pixel.
const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
if (/^\d+(.\d+)?$/.test(gdkScale)) {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
} else {
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
}
// If monitor is vertical (transform = 1 || 3) swap height and width
const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
if (isVertical) {
[monWidth, monHeight] = [monHeight, monWidth];
}
let marginRight = monWidth - dropdownWidth / 2;
marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
let marginLeft = monWidth - dropdownWidth - marginRight;
const minimumMargin = 0;
if (marginRight < minimumMargin) {
marginRight = minimumMargin;
marginLeft = monWidth - dropdownWidth - minimumMargin;
}
if (marginLeft < minimumMargin) {
marginLeft = minimumMargin;
marginRight = monWidth - dropdownWidth - minimumMargin;
}
const marginTop = 45;
const marginBottom = monHeight - marginTop;
self.set_margin_left(marginLeft);
self.set_margin_right(marginRight);
self.set_margin_bottom(marginBottom);
});
};
// NOTE: We make the window visible for 2 seconds (on startup) so the child
// elements can allocat their proper dimensions.
// Otherwise the width that we rely on for menu positioning is set improperly
// for the first time we open a menu of each type.
const initRender = Variable(true);
setTimeout(() => {
initRender.value = false;
}, 2000);
export default ({
name,
child,
transition,
exclusivity = 'ignore' as Exclusivity,
fixed = false,
...props
}: DropdownMenuProps): Window<Child, Attribute> =>
Widget.Window({
name,
class_names: [name, 'dropdown-menu'],
setup: (w) => w.keybind('Escape', () => App.closeWindow(name)),
visible: initRender.bind('value'),
keymode: 'on-demand',
exclusivity,
layer: 'top',
anchor: ['top', 'left'],
child: Widget.EventBox({
class_name: 'parent-event',
on_primary_click: () => App.closeWindow(name),
on_secondary_click: () => App.closeWindow(name),
child: Widget.Box({
class_name: 'top-eb',
vertical: true,
children: [
Widget.EventBox({
class_name: 'mid-eb event-top-padding-static',
hexpand: true,
vexpand: false,
can_focus: false,
child: Widget.Box(),
setup: (w) => {
w.on('button-press-event', () => App.toggleWindow(name));
w.set_margin_top(1);
},
}),
Widget.EventBox({
class_name: 'mid-eb event-top-padding',
hexpand: true,
vexpand: false,
can_focus: false,
child: Widget.Box(),
setup: (w) => {
w.on('button-press-event', () => App.toggleWindow(name));
w.set_margin_top(1);
},
}),
Widget.EventBox({
class_name: 'in-eb menu-event-box',
on_primary_click: () => {
return true;
},
on_secondary_click: () => {
return true;
},
setup: (self) => {
moveBoxToCursor(self, fixed);
},
child: Widget.Box({
class_name: 'dropdown-menu-container',
css: 'padding: 1px; margin: -1px;',
child: Widget.Revealer({
revealChild: false,
setup: (self) =>
self.hook(App, (_, wname, visible) => {
if (wname === name) self.reveal_child = visible;
}),
transition,
transitionDuration: 350,
child: Widget.Box({
class_name: 'dropdown-menu-container',
can_focus: true,
children: [child],
}),
}),
}),
}),
],
}),
}),
...props,
});

2
modules/menus/audio/index.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { activeDevices } from './active/index.js';
import { availableDevices } from './available/index.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/bluetooth/index.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Devices } from './devices/index.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/calendar/index.ts
View File

@@ -1,4 +1,4 @@
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { TimeWidget } from './time/index.js';
import { CalendarWidget } from './calendar.js';
import { WeatherWidget } from './weather/index.js';

2
modules/menus/dashboard/index.ts
View File

@@ -1,4 +1,4 @@
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Profile } from './profile/index.js';
import { Shortcuts } from './shortcuts/index.js';
import { Controls } from './controls/index.js';

2
modules/menus/energy/index.ts
View File

@@ -1,4 +1,4 @@
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { EnergyProfiles } from './profiles/index.js';
import { Brightness } from './brightness/index.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/media/index.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Media } from './media.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/network/index.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { Ethernet } from './ethernet/index.js';
import { Wifi } from './wifi/index.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/notifications/index.ts
View File

@@ -1,5 +1,5 @@
import { Notification } from 'types/service/notifications.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
const notifs = await Service.import('notifications');
import { Controls } from './controls/index.js';
import { NotificationCard } from './notification/index.js';

2
modules/menus/power/index.ts
View File

@@ -1,5 +1,5 @@
import { Action } from 'lib/types/power.js';
import PopupWindow from '../PopupWindow.js';
import PopupWindow from '../shared/popup/index.js';
import powermenu from './helpers/actions.js';
import icons from '../../icons/index.js';
import Window from 'types/widgets/window.js';

2
modules/menus/power/verification.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import PopupWindow from '../PopupWindow.js';
import PopupWindow from '../shared/popup/index.js';
import powermenu from './helpers/actions.js';
import { Attribute, Child } from 'lib/types/widget.js';

2
modules/menus/powerDropdown/index.ts
View File

@@ -1,5 +1,5 @@
import Window from 'types/widgets/window.js';
import DropdownMenu from '../DropdownMenu.js';
import DropdownMenu from '../shared/dropdown/index.js';
import { PowerButton } from './button.js';
import { Attribute, Child } from 'lib/types/widget.js';

33
modules/menus/shared/dropdown/eventBoxes/index.ts Normal file
View File

@@ -0,0 +1,33 @@
import { Attribute, BoxWidget } from 'lib/types/widget';
import EventBox from 'types/widgets/eventbox';
import { BarLocation } from 'lib/types/options';
const createEventBox = (className: string, windowName: string): EventBox<BoxWidget, Attribute> => {
return Widget.EventBox({
class_name: className,
hexpand: true,
vexpand: false,
can_focus: false,
child: Widget.Box(),
setup: (w) => {
w.on('button-press-event', () => App.toggleWindow(windowName));
},
});
};
export const barEventMargins = (
windowName: string,
location: BarLocation = 'top',
): [EventBox<BoxWidget, Attribute>, EventBox<BoxWidget, Attribute>] => {
if (location === 'top') {
return [
createEventBox('mid-eb event-top-padding-static', windowName),
createEventBox('mid-eb event-top-padding', windowName),
];
} else {
return [
createEventBox('mid-eb event-bottom-padding', windowName),
createEventBox('mid-eb event-bottom-padding-static', windowName),
];
}
};

99
modules/menus/shared/dropdown/index.ts Normal file
View File

@@ -0,0 +1,99 @@
import options from 'options';
import { DropdownMenuProps } from 'lib/types/dropdownmenu';
import { Attribute, Child, Exclusivity } from 'lib/types/widget';
import Window from 'types/widgets/window';
import { moveBoxToCursor } from './locationHandler/index';
import { barEventMargins } from './eventBoxes/index';
const { location } = options.theme.bar;
// NOTE: We make the window visible for 2 seconds (on startup) so the child
// elements can allocat their proper dimensions.
// Otherwise the width that we rely on for menu positioning is set improperly
// for the first time we open a menu of each type.
const initRender = Variable(true);
setTimeout(() => {
initRender.value = false;
}, 2000);
export default ({
name,
child,
transition,
exclusivity = 'ignore' as Exclusivity,
fixed = false,
...props
}: DropdownMenuProps): Window<Child, Attribute> =>
Widget.Window({
name,
class_names: [name, 'dropdown-menu'],
setup: (w) => w.keybind('Escape', () => App.closeWindow(name)),
visible: initRender.bind('value'),
keymode: 'on-demand',
exclusivity,
layer: 'top',
anchor: location.bind('value').as((ln) => [ln, 'left']),
child: Widget.EventBox({
class_name: 'parent-event',
on_primary_click: () => App.closeWindow(name),
on_secondary_click: () => App.closeWindow(name),
child: Widget.Box({
class_name: 'top-eb',
vertical: true,
children: [
Widget.Box({
className: 'event-box-container',
children: location.bind('value').as((lcn) => {
if (lcn === 'top') {
return barEventMargins(name);
} else {
return [];
}
}),
}),
Widget.EventBox({
class_name: 'in-eb menu-event-box',
on_primary_click: () => {
return true;
},
on_secondary_click: () => {
return true;
},
setup: (self) => {
moveBoxToCursor(self, fixed);
},
child: Widget.Box({
class_name: 'dropdown-menu-container',
css: 'padding: 1px; margin: -1px;',
child: Widget.Revealer({
revealChild: false,
setup: (self) =>
self.hook(App, (_, wname, visible) => {
if (wname === name) self.reveal_child = visible;
}),
transition,
transitionDuration: 350,
child: Widget.Box({
class_name: 'dropdown-menu-container',
can_focus: true,
children: [child],
}),
}),
}),
}),
Widget.Box({
className: 'event-box-container',
children: location.bind('value').as((lcn) => {
if (lcn === 'bottom') {
return barEventMargins(name);
} else {
return [];
}
}),
}),
],
}),
}),
...props,
});

95
modules/menus/shared/dropdown/locationHandler/index.ts Normal file
View File

@@ -0,0 +1,95 @@
const hyprland = await Service.import('hyprland');
import { bash } from 'lib/utils';
import { Widget as TWidget } from 'types/@girs/gtk-3.0/gtk-3.0.cjs';
import { Monitor } from 'types/service/hyprland';
import Box from 'types/widgets/box';
import EventBox from 'types/widgets/eventbox';
import Revealer from 'types/widgets/revealer';
type NestedRevealer = Revealer<Box<TWidget, unknown>, unknown>;
type NestedBox = Box<NestedRevealer, unknown>;
type NestedEventBox = EventBox<NestedBox, unknown>;
const { location } = options.theme.bar;
export const moveBoxToCursor = <T extends NestedEventBox>(self: T, fixed: boolean): void => {
if (fixed) {
return;
}
globalMousePos.connect('changed', async ({ value }) => {
const curHyprlandMonitor = hyprland.monitors.find((m) => m.id === hyprland.active.monitor.id);
const dropdownWidth = self.child.get_allocation().width;
const dropdownHeight = self.child.get_allocation().height;
let hyprScaling = 1;
try {
const monitorInfo = await bash('hyprctl monitors -j');
const parsedMonitorInfo = JSON.parse(monitorInfo);
const foundMonitor = parsedMonitorInfo.find(
(monitor: Monitor) => monitor.id === hyprland.active.monitor.id,
);
hyprScaling = foundMonitor?.scale || 1;
} catch (error) {
console.error(`Error parsing hyprland monitors: ${error}`);
}
let monWidth = curHyprlandMonitor?.width;
let monHeight = curHyprlandMonitor?.height;
if (monWidth === undefined || monHeight === undefined || hyprScaling === undefined) {
return;
}
// If GDK Scaling is applied, then get divide width by scaling
// to get the proper coordinates.
// Ex: On a 2860px wide monitor... if scaling is set to 2, then the right
// end of the monitor is the 1430th pixel.
const gdkScale = Utils.exec('bash -c "echo $GDK_SCALE"');
if (/^\d+(.\d+)?$/.test(gdkScale)) {
const scale = parseFloat(gdkScale);
monWidth = monWidth / scale;
monHeight = monHeight / scale;
} else {
monWidth = monWidth / hyprScaling;
monHeight = monHeight / hyprScaling;
}
// If monitor is vertical (transform = 1 || 3) swap height and width
const isVertical = curHyprlandMonitor?.transform !== undefined ? curHyprlandMonitor.transform % 2 !== 0 : false;
if (isVertical) {
[monWidth, monHeight] = [monHeight, monWidth];
}
let marginRight = monWidth - dropdownWidth / 2;
marginRight = fixed ? marginRight - monWidth / 2 : marginRight - value[0];
let marginLeft = monWidth - dropdownWidth - marginRight;
const minimumMargin = 0;
if (marginRight < minimumMargin) {
marginRight = minimumMargin;
marginLeft = monWidth - dropdownWidth - minimumMargin;
}
if (marginLeft < minimumMargin) {
marginLeft = minimumMargin;
marginRight = monWidth - dropdownWidth - minimumMargin;
}
self.set_margin_left(marginLeft);
self.set_margin_right(marginRight);
if (location.value === 'top') {
self.set_margin_top(0);
self.set_margin_bottom(monHeight);
} else {
self.set_margin_bottom(0);
self.set_margin_top(monHeight - dropdownHeight);
}
});
};

0
modules/menus/PopupWindow.ts → modules/menus/shared/popup/index.ts
View File

3
options.ts
View File

@@ -12,6 +12,7 @@ import { KbIcon, KbLabelType } from 'lib/types/customModules/kbLayout';
import {
ActiveWsIndicator,
BarButtonStyles,
BarLocation,
NotificationAnchor,
OSDAnchor,
OSDOrientation,
@@ -145,6 +146,7 @@ const options = mkOptions(OPTIONS, {
bar: {
scaling: opt(100),
floating: opt(false),
location: opt<BarLocation>('top'),
layer: opt<WindowLayer>('top'),
margin_top: opt('0.5em'),
opacity: opt(100),
@@ -154,6 +156,7 @@ const options = mkOptions(OPTIONS, {
outer_spacing: opt('1.6em'),
label_spacing: opt('0.5em'),
transparent: opt(false),
dropdownGap: opt('2.9em'),
background: opt(colors.crust),
buttons: {
style: opt<BarButtonStyles>('default'),

21
scss/style/menus/menu.scss
View File

@@ -41,7 +41,6 @@
}
trough {
highlight,
progress {
background-color: $peach;
@@ -76,8 +75,8 @@
}
.menu-separator {
min-height: .1rem;
margin: .6rem 0rem;
min-height: 0.1rem;
margin: 0.6rem 0rem;
background: $surface1;
}
@@ -153,7 +152,6 @@
.menu-active-icon {
font-size: 1.4em;
font-weight: bold;
}
&.muted image {
@@ -178,11 +176,11 @@
.menu-active-slider * {
min-height: 0.85em;
border-radius: .2em;
border-radius: 0.2em;
}
.menu-slider-container {
margin-bottom: .7rem;
margin-bottom: 0.7rem;
}
.menu-label-dim {
@@ -204,7 +202,7 @@
}
.menu-button {
margin-bottom: .4em;
margin-bottom: 0.4em;
}
.menu-button-name {
@@ -217,7 +215,7 @@
.menu-button-icon {
font-size: 1.3em;
font-weight: bold;
margin-right: .5rem;
margin-right: 0.5rem;
}
.menu-item-box {
@@ -233,14 +231,15 @@
color: $sky;
}
.event-top-padding-static * {
.event-box-container {
min-height: 0em;
margin-top: 2.8em;
margin-top: $bar-dropdownGap;
}
.event-top-padding * {
min-height: 0em;
margin-top: if($bar-floating, $bar-margin_top, 0);
margin-top: if($bar-floating and $bar-location == 'top', $bar-margin_top, 0);
margin-bottom: if($bar-floating and $bar-location == 'bottom', $bar-margin_bottom, 0);
}
@keyframes spin {

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

@@ -29,6 +29,17 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
},
'bar-layout-input',
),
Option({
opt: options.theme.bar.floating,
title: 'Floating Bar',
type: 'boolean',
}),
Option({
opt: options.theme.bar.location,
title: 'Location',
type: 'enum',
enums: ['top', 'bottom'],
}),
/*
******************************
@@ -69,11 +80,6 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
title: 'Button Radius',
type: 'string',
}),
Option({
opt: options.theme.bar.floating,
title: 'Floating Bar',
type: 'boolean',
}),
Option({
opt: options.theme.bar.layer,
title: 'Layer',
@@ -81,6 +87,12 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
subtitle: 'Layer determines the Z index of your bar.',
enums: ['top', 'bottom', 'overlay', 'background'],
}),
Option({
opt: options.theme.bar.dropdownGap,
title: 'Dropdown Gap',
subtitle: 'The gap between the dropdown and the bar',
type: 'string',
}),
Option({
opt: options.theme.bar.margin_top,
title: 'Margin Top',