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 ## Instructions
### AGS ### 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: If you already have something in `~/.config/ags`, it's recommended that you back it up with:
```bash ```bash
mv $HOME/.config/ags $HOME/.config/ags.bkup mv $HOME/.config/ags $HOME/.config/ags.bkup

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

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

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

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

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

@@ -72,11 +72,12 @@ const Media = () => {
child: Widget.Box({ child: Widget.Box({
children: [ children: [
Widget.Label({ Widget.Label({
class_name: "bar-media_icon", class_name: "bar-button-icon media",
label: songIcon.bind("value"), label: songIcon.bind("value"),
maxWidthChars: 30, maxWidthChars: 30,
}), }),
Widget.Label({ Widget.Label({
class_name: "bar-button-label media",
label, label,
truncate: "end", truncate: "end",
wrap: true, wrap: true,

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

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

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

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

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

@@ -30,13 +30,13 @@ const Volume = () => {
const volIcn = Widget.Label({ const volIcn = Widget.Label({
vpack: "center", vpack: "center",
label: getIcon(), label: getIcon(),
class_name: "bar-volume_icon", class_name: "bar-button-icon volume",
}); });
const volPct = Widget.Label({ const volPct = Widget.Label({
vpack: "center", vpack: "center",
label: audio.speaker.bind("volume").as((v) => `${Math.floor(v * 100)}%`), label: audio.speaker.bind("volume").as((v) => `${Math.floor(v * 100)}%`),
class_name: "bar-volume_percentage", class_name: "bar-button-label volume",
}); });
return { 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 filterTitle = (windowtitle: ActiveClient) => {
const windowTitleMap = [ const windowTitleMap = [
["kitty", "󰄛 Kitty Terminal"], ["kitty", "󰄛", "Kitty Terminal"],
["firefox", "󰈹 Firefox"], ["firefox", "󰈹", "Firefox"],
["microsoft-edge", "󰇩 Edge"], ["microsoft-edge", "󰇩", "Edge"],
["discord", " Discord"], ["discord", "", "Discord"],
["org.kde.dolphin", " Dolphin"], ["org.kde.dolphin", "", "Dolphin"],
["plex", "󰚺 Plex"], ["plex", "󰚺", "Plex"],
["steam", " Steam"], ["steam", "", "Steam"],
["spotify", "󰓇 Spotify"], ["spotify", "󰓇", "Spotify"],
["obsidian", "󱓧 Obsidian"], ["obsidian", "󱓧", "Obsidian"],
["^$", "󰇄 Desktop"], ["^$", "󰇄", "Desktop"],
["(.+)", `󰣆 ${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`], ["(.+)", "󰣆", `${windowtitle.class.charAt(0).toUpperCase() + windowtitle.class.slice(1)}`],
]; ];
const foundMatch = windowTitleMap.find((wt) => const foundMatch = windowTitleMap.find((wt) =>
RegExp(wt[0]).test(windowtitle.class.toLowerCase()), 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 = () => { const ClientTitle = () => {
return { return {
component: Widget.Label({ component: Widget.Box({
class_name: "window_title", children: [
label: hyprland.active.bind("client").as((v) => filterTitle(v)), 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, isVisible: true,
boxClass: "windowtitle", boxClass: "windowtitle",

15
options.ts
View File

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

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

@@ -1,11 +1,12 @@
@import '../colors'; @import '../colors';
@import '../../variables'; @import '../../variables';
.bar-volume_icon { .bar-button-icon.volume {
font-size: 1.3em; font-size: 1.3em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-volume-icon); 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); 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 { .box-left {
margin-left: 1.9rem; margin-left: $bar-outer_spacing;
} }
.box-right { .box-right {
margin-right: 1.9rem; margin-right: $bar-outer_spacing;
} }

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

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

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

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

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

@@ -1,11 +1,12 @@
@import "../colors"; @import "../colors";
@import '../../variables'; @import '../../variables';
.media { .bar-button-label.media {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-media-text); 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; font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon); 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 "../colors";
@import '../../variables'; @import '../../variables';
.bar-network-label { .bar-button-label.network {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-network-text); 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); 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"; @import "../colors";
.bar-notifications-label { .bar-button-icon.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon); color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em; font-size: 1.3em;
min-width: 1em; min-width: 1em;
} }
.bar-notifications-total { .bar-button-label.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total); 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 "../colors";
@import '../../variables'; @import '../../variables';
.window_title { .bar-button-icon.windowtitle {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text); 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" type Page = "Configuration" | "Theming"
const CurrentPage = Variable<Page>("Theming"); const CurrentPage = Variable<Page>("Configuration");
const pagerMap: Page[] = [ const pagerMap: Page[] = [
"Configuration", "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'), 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'), 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.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_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_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.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' }), 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'), Header('Volume'),
Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }), 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'), Header('Network'),
Option({ opt: options.bar.network.label, title: 'Show Network Name', type: 'boolean' }), 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'), Header('Bluetooth'),
Option({ opt: options.bar.bluetooth.label, title: 'Show Bluetooth Label', type: 'boolean' }), 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'), Header('Battery'),
Option({ opt: options.bar.battery.label, title: 'Show Battery Percentage', type: 'boolean' }), 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'), // Header('System Tray'),
// TODO: Figure out how to handle arrays // TODO: Figure out how to handle arrays
@@ -54,8 +64,12 @@ export const BarSettings = () => {
Header('Clock'), Header('Clock'),
Option({ opt: options.bar.clock.format, title: 'Clock Format', type: 'string' }), 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'), Header('Notifications'),
Option({ opt: options.bar.notifications.show_total, title: 'Show Total # of notifications', type: 'boolean' }), 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.transparent, title: 'Transparent', type: 'boolean' }),
Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }), 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.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.background, title: 'Button Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', 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' }), Option({ opt: options.theme.bar.buttons.text, title: 'Button Text', type: 'color' }),