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

Adding configuration options to change spacing between icons and labels inside the buttons in the bar. (#30)

Browse Source 
* Branch protection check.

* Move button spacing config into the Configuration section instead of Theming.

* Partially Resolves #26 - Added the ability to configure outer spacing on the bar.

* Renamed all class names for buttons so they can be styled with margins.

* Added configurable spacing to buttons.

* Fixed styling for network module when using wifi.

* Fixed ghost margins that occur when labels are disabled in the bar buttons.

* Change the default page of the settings dialog to configuration.
This commit is contained in:
Jas Singh
2024-07-28 15:16:31 -07:00
committed by GitHub
parent 83b60ddaab
commit 3dc5bbbe13
20 changed files with 137 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@@ -45,7 +45,7 @@ yay -S grimblast gpu-screen-recorder hyprpicker python-gpustat aylurs-gtk-shell-
## Instructions
### AGS
Once everything is installed you, need to put the contents of this repo in `~/.config/ags`.
Once everything is installed you need to put the contents of this repo in `~/.config/ags`.
If you already have something in `~/.config/ags`, it's recommended that you back it up with:
```bash
mv $HOME/.config/ags $HOME/.config/ags.bkup

8
modules/bar/battery/index.ts
View File

@@ -47,9 +47,13 @@ const BatteryLabel = () => {
(batAvail, showLabel) => {
if (batAvail && showLabel) {
return [
Widget.Icon({ icon: icon() }),
Widget.Icon({
class_name: "bar-button-icon battery",
icon: icon()
}),
Widget.Label({
label: battery.bind("percent").as((p) => ` ${Math.floor(p)}%`),
class_name: "bar-button-label battery",
label: battery.bind("percent").as((p) => `${Math.floor(p)}%`),
}),
];
} else if (batAvail && !showLabel) {

24
modules/bar/bluetooth/index.ts
View File

@@ -6,30 +6,32 @@ import { openMenu } from "../utils.js";
const Bluetooth = () => {
const btIcon = Widget.Label({
label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
class_name: "bar-bt_icon",
class_name: "bar-button-icon bluetooth",
});
const btText = Widget.Label({
label: Utils.merge([
bluetooth.bind("enabled"),
bluetooth.bind("connected_devices"),
options.bar.bluetooth.label.bind("value")],
(btEnabled, btDevices, showLabel) => {
if (showLabel) {
return btEnabled && btDevices.length ? ` Connected (${btDevices.length})`
: btEnabled ? " On"
: " Off"
}
return "";
],
(btEnabled, btDevices) => {
return btEnabled && btDevices.length ? ` Connected (${btDevices.length})`
: btEnabled ? "On"
: "Off"
}),
class_name: "bar-bt_label",
class_name: "bar-button-label bluetooth",
});
return {
component: Widget.Box({
class_name: "volume",
children: [btIcon, btText],
children: options.bar.bluetooth.label.bind("value").as((showLabel) => {
if (showLabel) {
return [btIcon, btText];
}
return [btIcon];
}),
}),
isVisible: true,
boxClass: "bluetooth",

7
modules/bar/media/index.ts
View File

@@ -56,8 +56,8 @@ const Media = () => {
const { track_title, identity } = activePlayer.value;
songIcon.value = getIconForPlayer(identity);
return track_title.length === 0
? ` No media playing...`
: ` ${track_title}`;
? `No media playing...`
: `${track_title}`;
} else {
songIcon.value = "";
return "󰎇 Media 󰎇";
@@ -72,11 +72,12 @@ const Media = () => {
child: Widget.Box({
children: [
Widget.Label({
class_name: "bar-media_icon",
class_name: "bar-button-icon media",
label: songIcon.bind("value"),
maxWidthChars: 30,
}),
Widget.Label({
class_name: "bar-button-label media",
label,
truncate: "end",
wrap: true,

44
modules/bar/network/index.ts
View File

@@ -6,40 +6,48 @@ import { openMenu } from "../utils.js";
const Network = () => {
const wifiIndicator = [
Widget.Icon({
class_name: "bar-network-icon",
class_name: "bar-button-icon network",
icon: network.wifi.bind("icon_name"),
}),
Widget.Label({
class_name: "bar-network-label",
label: Utils.merge(
Widget.Box({
children: Utils.merge(
[network.bind("wifi"), options.bar.network.label.bind("value")],
(wifi, showLabel) => {
if (showLabel) {
return wifi.ssid ? ` ${wifi.ssid.substring(0, 7)}` : " --";
if (!showLabel) {
return [];
}
return "";
return [
Widget.Label({
class_name: "bar-button-label network",
label: wifi.ssid ? `${wifi.ssid.substring(0, 7)}` : "--",
}),
]
},
),
}),
)
})
];
const wiredIndicator = [
Widget.Icon({
class_name: "bar-network-icon",
class_name: "bar-button-icon network",
icon: network.wired.bind("icon_name"),
}),
Widget.Label({
class_name: "bar-network-label",
label: Utils.merge(
Widget.Box({
children: Utils.merge(
[network.bind("wired"), options.bar.network.label.bind("value")],
(_, showLabel) => {
if (showLabel) {
return " Wired";
if (!showLabel) {
return [];
}
return "";
return [
Widget.Label({
class_name: "bar-button-label network",
label: "Wired",
}),
]
},
),
}),
)
})
];
return {

4
modules/bar/notifications/index.ts
View File

@@ -18,13 +18,13 @@ export const Notifications = () => {
(notif, dnd, showTotal) => {
const notifIcon = Widget.Label({
hpack: "center",
class_name: "bar-notifications-label",
class_name: "bar-button-icon notifications",
label: dnd ? "󰂛" : notif.length > 0 ? "󱅫" : "󰂚",
});
const notifLabel = Widget.Label({
hpack: "center",
class_name: "bar-notifications-total",
class_name: "bar-button-label notifications",
label: notif.length.toString(),
});

6
modules/bar/volume/index.ts
View File

@@ -30,13 +30,13 @@ const Volume = () => {
const volIcn = Widget.Label({
vpack: "center",
label: getIcon(),
class_name: "bar-volume_icon",
class_name: "bar-button-icon volume",
});
const volPct = Widget.Label({
vpack: "center",
label: audio.speaker.bind("volume").as((v) => ` ${Math.floor(v * 100)}%`),
class_name: "bar-volume_percentage",
label: audio.speaker.bind("volume").as((v) => `${Math.floor(v * 100)}%`),
class_name: "bar-button-label volume",
});
return {

41
modules/bar/window_title/index.ts
View File

@@ -3,31 +3,42 @@ import { ActiveClient } from 'types/service/hyprland'
const filterTitle = (windowtitle: ActiveClient) => {
const windowTitleMap = [
["kitty", "󰄛 Kitty Terminal"],
["firefox", "󰈹 Firefox"],
["microsoft-edge", "󰇩 Edge"],
["discord", " Discord"],
["org.kde.dolphin", " Dolphin"],
["plex", "󰚺 Plex"],
["steam", " Steam"],
["spotify", "󰓇 Spotify"],
["obsidian", "󱓧 Obsidian"],
["^$", "󰇄 Desktop"],
["(.+)", `󰣆 ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
["kitty", "󰄛", "Kitty Terminal"],
["firefox", "󰈹", "Firefox"],
["microsoft-edge", "󰇩", "Edge"],
["discord", "", "Discord"],
["org.kde.dolphin", "", "Dolphin"],
["plex", "󰚺", "Plex"],
["steam", "", "Steam"],
["spotify", "󰓇", "Spotify"],
["obsidian", "󱓧", "Obsidian"],
["^$", "󰇄", "Desktop"],
["(.+)", "󰣆", `${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
];
const foundMatch = windowTitleMap.find((wt) =>
RegExp(wt[0]).test(windowtitle.class.toLowerCase()),
);
return foundMatch ? foundMatch[1] : windowtitle.class;
return {
icon: foundMatch ? foundMatch[1] : windowTitleMap[windowTitleMap.length - 1][1],
label: foundMatch ? foundMatch[2] : windowTitleMap[windowTitleMap.length - 1][2]
}
};
const ClientTitle = () => {
return {
component: Widget.Label({
class_name: "window_title",
label: hyprland.active.bind("client").as((v) => filterTitle(v)),
component: Widget.Box({
children: [
Widget.Label({
class_name: "bar-button-icon windowtitle",
label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
}),
Widget.Label({
class_name: "bar-button-label windowtitle",
label: hyprland.active.bind("client").as((v) => filterTitle(v).label),
})
]
}),
isVisible: true,
boxClass: "windowtitle",

15
options.ts
View File

@@ -59,6 +59,8 @@ const options = mkOptions(OPTIONS, {
margin_bottom: opt("0em"),
margin_sides: opt("0.5em"),
border_radius: opt("0.4em"),
outer_spacing: opt("1.6em"),
label_spacing: opt("0.5em"),
transparent: opt(false),
background: opt(colors.crust),
buttons: {
@@ -85,31 +87,36 @@ const options = mkOptions(OPTIONS, {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.pink),
icon: opt(colors.pink)
icon: opt(colors.pink),
spacing: opt("0.5em"),
},
media: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.lavender),
icon: opt(colors.lavender)
icon: opt(colors.lavender),
spacing: opt("0.5em"),
},
volume: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.maroon),
icon: opt(colors.maroon),
spacing: opt("0.5em"),
},
network: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.mauve),
icon: opt(colors.mauve),
spacing: opt("0.5em"),
},
bluetooth: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.sky),
icon: opt(colors.sky),
spacing: opt("0.5em"),
},
systray: {
background: opt(colors.base2),
@@ -120,6 +127,7 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.yellow),
icon: opt(colors.yellow),
spacing: opt("0.5em"),
},
clock: {
background: opt(colors.base2),
@@ -131,7 +139,8 @@ const options = mkOptions(OPTIONS, {
background: opt(colors.base2),
hover: opt(colors.surface1),
icon: opt(colors.lavender),
total: opt(colors.lavender)
total: opt(colors.lavender),
spacing: opt("0.5em"),
},
},
menus: {

5
scss/style/bar/audio.scss
View File

@@ -1,11 +1,12 @@
@import '../colors';
@import '../../variables';
.bar-volume_icon {
.bar-button-icon.volume {
font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon);
}
.bar-volume_percentage {
.bar-button-label.volume {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
margin-left: $bar-buttons-volume-spacing;
}

4
scss/style/bar/bar.scss
View File

@@ -127,9 +127,9 @@
}
.box-left {
margin-left: 1.9rem;
margin-left: $bar-outer_spacing;
}
.box-right {
margin-right: 1.9rem;
margin-right: $bar-outer_spacing;
}

7
scss/style/bar/battery.scss
View File

@@ -3,10 +3,12 @@
.bar {
.battery {
label {
.bar-button-label.battery {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
}
image {
.bar-button-icon.battery {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
}
}
@@ -15,6 +17,7 @@
.menu-section-container.brightness {
margin-bottom: 0em;
}
.menu-section-container.energy {
margin-top: 0.5em;
}

5
scss/style/bar/bluetooth.scss
View File

@@ -1,13 +1,14 @@
@import '../colors';
@import '../../variables';
.bar-bt_icon {
.bar-button-icon.bluetooth {
font-size: 1.15em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-bluetooth-icon);
}
.bar-bt_label {
.bar-button-label.bluetooth {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
margin-left: $bar-buttons-bluetooth-spacing;
}
.bluetooth-disabled-menu {

5
scss/style/bar/media.scss
View File

@@ -1,11 +1,12 @@
@import "../colors";
@import '../../variables';
.media {
.bar-button-label.media {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text);
margin-left: $bar-buttons-media-spacing;
}
.bar-media_icon {
.bar-button-icon.media {
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
}

5
scss/style/bar/network.scss
View File

@@ -1,10 +1,11 @@
@import "../colors";
@import '../../variables';
.bar-network-label {
.bar-button-label.network {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text);
margin-left: $bar-buttons-network-spacing;
}
.bar-network-icon {
.bar-button-icon.network {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
}

6
scss/style/bar/notifications.scss
View File

@@ -1,12 +1,12 @@
@import "../colors";
.bar-notifications-label {
.bar-button-icon.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em;
min-width: 1em;
}
.bar-notifications-total {
.bar-button-label.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
margin-left: 0.4em;
margin-left: $bar-buttons-notifications-spacing;
}

9
scss/style/bar/window_title.scss
View File

@@ -1,6 +1,11 @@
@import "../colors";
@import '../../variables';
.window_title {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
.bar-button-icon.windowtitle {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-icon);
}
.bar-button-label.windowtitle {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
margin-left: $bar-buttons-windowtitle-spacing;
}

2
widget/settings/SettingsDialog.ts
View File

@@ -6,7 +6,7 @@ import { SettingsMenu } from "./pages/config/index"
type Page = "Configuration" | "Theming"
const CurrentPage = Variable<Page>("Theming");
const CurrentPage = Variable<Page>("Configuration");
const pagerMap: Page[] = [
"Configuration",

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

@@ -15,6 +15,9 @@ export const BarSettings = () => {
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.outer_spacing, title: 'Outer Spacing', subtitle: 'Spacing on the outer left and right edges of the bar.', type: 'string' }),
Option({ opt: options.theme.bar.buttons.spacing, title: 'Button Spacing', subtitle: 'Spacing between the buttons in the bar.', type: 'string' }),
Option({ opt: options.theme.bar.buttons.radius, title: 'Button Radius', type: 'string' }),
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' }),
@@ -35,17 +38,24 @@ export const BarSettings = () => {
Option({ opt: options.bar.workspaces.reverse_scroll, title: 'Invert Scroll', subtitle: 'Scrolling up will go to the previous workspace rather than the next.', type: 'boolean' }),
Option({ opt: options.bar.workspaces.scroll_speed, title: 'Scrolling Speed', type: 'number' }),
Header('Window Titles'),
Option({ opt: options.theme.bar.buttons.windowtitle.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Header('Volume'),
Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.volume.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Header('Network'),
Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.network.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Header('Bluetooth'),
Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.bluetooth.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Header('Battery'),
Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.battery.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
// Header('System Tray'),
// TODO: Figure out how to handle arrays
@@ -54,8 +64,12 @@ export const BarSettings = () => {
Header('Clock'),
Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }),
Header('Media'),
Option({ opt: options.theme.bar.buttons.media.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Header('Notifications'),
Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.notifications.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
]
})
})

2
widget/settings/pages/theme/bar/index.ts
View File

@@ -15,8 +15,6 @@ 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' }),
Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),