Adding configuration options to change spacing between icons and labels inside the buttons in the bar. (#30)
* 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
GitHub
@@ -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) {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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(),
|
||||
});
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user