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

Added 3 new styles for bar buttons. (#168)

Browse Source 
* Added a new style called split for bar buttons

* Added wavy button styles.

* Added padding configuration

* Update bar padding

* Fix styling for battery style2

* Fix icon only setting for bar

* Update types and options

* Add button style to exported theme props.

* Fix top margin for menus.
This commit is contained in:
Jas Singh
2024-08-24 00:01:21 -07:00
committed by GitHub
parent c0d9c594c9
commit 2908ff7dd6
31 changed files with 459 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/types/bar.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
import { Variable } from "types/variable";
export type Child = {
component: Box<Gtk.Widget, unknown>;
isVisible?: boolean;
isVis?: Variable<boolean>;
boxClass: string;
props: ButtonProps;
};

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

@@ -5,6 +5,7 @@ export type Unit = "imperial" | "metric";
export type PowerOptions = "sleep" | "reboot" | "logout" | "shutdown";
export type NotificationAnchor = "top" | "top right" | "top left" | "bottom" | "bottom right" | "bottom left" | "left" | "right";
export type OSDAnchor = "top left" | "top" | "top right" | "right" | "bottom right" | "bottom" | "bottom left" | "left";
export type BarButtonStyles = "default" | "split" | "wave" | "wave2";
export type ThemeExportData = {
filePath: string,

8
modules/bar/Bar.ts
View File

@@ -14,6 +14,8 @@ const hyprland = await Service.import("hyprland");
import { BarItemBox as WidgetContainer } from "../shared/barItemBox.js";
import options from "options";
import Gdk from "gi://Gdk?version=3.0";
import Button from "types/widgets/button.js";
import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";
const { layouts } = options.bar;
@@ -241,7 +243,7 @@ export const Bar = (() => {
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
self.children = foundLayout.left.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
});
},
}),
@@ -251,7 +253,7 @@ export const Bar = (() => {
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
self.children = foundLayout.middle.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
});
},
}),
@@ -261,7 +263,7 @@ export const Bar = (() => {
setup: self => {
self.hook(layouts, (self) => {
const foundLayout = getModulesForMonitor(hyprlandMonitor, layouts.value as BarLayout);
self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor));
self.children = foundLayout.right.filter(mod => Object.keys(widget).includes(mod)).map(w => widget[w](hyprlandMonitor) as Button<Gtk.Widget, unknown>);
});
},
}),

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

@@ -1,6 +1,5 @@
const battery = await Service.import("battery");
import Gdk from 'gi://Gdk?version=3.0';
import EventHandler from 'types/widgets/button.ts'
import { openMenu } from "../utils.js";
import options from "options";
@@ -42,7 +41,14 @@ const BatteryLabel = () => {
return {
component: Widget.Box({
class_name: "battery",
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_label.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `battery ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
}),
visible: battery.bind("available"),
tooltip_text: battery.bind("time_remaining").as((t) => t.toString()),
children: Utils.merge(
@@ -60,7 +66,12 @@ const BatteryLabel = () => {
}),
];
} else if (batAvail && !showLabel) {
return [Widget.Icon({ icon: batIcon })];
return [
Widget.Icon({
class_name: "bar-button-icon battery",
icon: batIcon
})
];
} else {
return [];
}

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

@@ -3,6 +3,8 @@ import Gdk from 'gi://Gdk?version=3.0';
import options from "options";
import { openMenu } from "../utils.js";
const { label } = options.bar.bluetooth;
const Bluetooth = () => {
const btIcon = Widget.Label({
label: bluetooth.bind("enabled").as((v) => v ? "󰂯" : "󰂲"),
@@ -25,7 +27,14 @@ const Bluetooth = () => {
return {
component: Widget.Box({
class_name: "volume",
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), label.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `bluetooth ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
}),
children: options.bar.bluetooth.label.bind("value").as((showLabel) => {
if (showLabel) {
return [btIcon, btText];

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

@@ -59,7 +59,14 @@ const Media = () => {
component: Widget.Box({
visible: false,
child: Widget.Box({
class_name: "media",
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_label.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `media ${styleMap[style]}`;
}),
child: Widget.Box({
children: [
Widget.Label({

10
modules/bar/menu/index.ts
View File

@@ -5,8 +5,16 @@ import options from "options";
const Menu = () => {
return {
component: Widget.Box({
className: Utils.merge([options.theme.bar.buttons.style.bind("value")], (style) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `dashboard ${styleMap[style]}`;
}),
child: Widget.Label({
class_name: "bar-menu_label txt-icon bar",
class_name: "bar-menu_label bar-button_icon txt-icon bar",
label: options.bar.launcher.icon.bind("value"),
}),
}),

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

@@ -8,8 +8,16 @@ const { label: networkLabel, truncation, truncation_size } = options.bar.network
const Network = () => {
return {
component: Widget.Box({
vpack: "center",
class_name: "bar-network",
vpack: "fill",
vexpand: true,
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), networkLabel.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `network ${styleMap[style]}${!showLabel ? " no-label" : ""}`;
}),
children: [
Widget.Icon({
class_name: "bar-button-icon network",
@@ -25,7 +33,7 @@ const Network = () => {
})
}),
Widget.Box({
class_name: "bar-button-icon network",
vpack: "center",
child: Utils.merge([
network.bind("primary"),
network.bind("wifi"),

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

@@ -10,6 +10,14 @@ export const Notifications = () => {
return {
component: Widget.Box({
hpack: "start",
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), show_total.bind("value")], (style, showTotal) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `notifications ${styleMap[style]} ${!showTotal ? "no-label" : ""}`;
}),
child: Widget.Box({
hpack: "start",
class_name: "bar-notifications",

1
modules/bar/systray/index.ts
View File

@@ -41,6 +41,7 @@ const SysTray = () => {
isVisible: true,
boxClass: "systray",
isVis,
props: {}
};
};

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

@@ -26,21 +26,30 @@ const Volume = () => {
};
const volIcn = Widget.Label({
vpack: "center",
hexpand: true,
label: getIcon(),
class_name: "bar-button-icon volume txt-icon bar",
});
const volPct = Widget.Label({
vpack: "center",
hexpand: true,
label: audio.speaker.bind("volume").as((v) => `${Math.round(v * 100)}%`),
class_name: "bar-button-label volume",
});
return {
component: Widget.Box({
vpack: "center",
class_name: "volume",
hexpand: true,
vexpand: true,
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), options.bar.volume.label.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `volume ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
}),
children: options.bar.volume.label.bind("value").as((showLabel) => {
if (showLabel) {
return [volIcn, volPct];

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

@@ -135,19 +135,29 @@ const filterTitle = (windowtitle: ActiveClient) => {
const ClientTitle = () => {
return {
component: Widget.Box({
children: [
Widget.Label({
className: Utils.merge([options.theme.bar.buttons.style.bind("value"), options.bar.windowtitle.label.bind("value")], (style, showLabel) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
};
return `windowtitle ${styleMap[style]} ${!showLabel ? "no-label" : ""}`;
}),
children: options.bar.windowtitle.label.bind("value").as((showLabel) => {
const titleIcon = Widget.Label({
class_name: "bar-button-icon windowtitle txt-icon bar",
label: hyprland.active.bind("client").as((v) => filterTitle(v).icon),
}),
Widget.Label({
});
const titleLabel = Widget.Label({
class_name: "bar-button-label windowtitle",
label: hyprland.active.bind("client").as((v) => filterTitle(v).label),
})
]
});
return showLabel ? [titleIcon, titleLabel] : [titleIcon];
}),
}),
isVisible: true,
boxClass: "windowtitle",
props: {}
};
};

3
modules/menus/bluetooth/devices/devicelist.ts
View File

@@ -2,8 +2,9 @@ import { Bluetooth } from "types/service/bluetooth.js";
import Box from "types/widgets/box.js";
import { connectedControls } from "./connectedControls.js";
import { getBluetoothIcon } from "../utils.js";
import Gtk from "types/@girs/gtk-3.0/gtk-3.0.js";
const devices = (bluetooth: Bluetooth, self: Box<any, any>) => {
const devices = (bluetooth: Bluetooth, self: Box<Gtk.Widget, unknown>) => {
return self.hook(bluetooth, () => {
if (!bluetooth.enabled) {
return (self.child = Widget.Box({

20
modules/shared/barItemBox.ts
View File

@@ -1,13 +1,27 @@
export const BarItemBox = (child) => {
import Gtk from "gi://Gtk?version=3.0";
import { Child } from "lib/types/bar";
import options from "options";
import { ButtonProps } from "types/widgets/button";
export const BarItemBox = (child: Child): ButtonProps<Gtk.Widget> => {
const computeVisible = () => {
if (Object.hasOwnProperty.call(child, "isVis")) {
if (child.isVis !== undefined) {
return child.isVis.bind("value");
}
return child.isVisible;
};
return Widget.Button({
class_name: `bar_item_box_visible ${Object.hasOwnProperty.call(child, "boxClass") ? child.boxClass : ""}`,
class_name: options.theme.bar.buttons.style.bind("value").as((style) => {
const styleMap = {
default: "style1",
split: "style2",
wave: "style3",
wave2: "style4",
};
return `bar_item_box_visible ${styleMap[style]} ${Object.hasOwnProperty.call(child, "boxClass") ? child.boxClass : ""}`;
}),
child: child.component,
visible: computeVisible(),
...child.props,

20
options.ts
View File

@@ -1,5 +1,5 @@
import { opt, mkOptions } from "lib/option"
import { NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options";
import { BarButtonStyles, NotificationAnchor, OSDAnchor, OSDOrientation } from "lib/types/options";
import { MatugenScheme, MatugenTheme, MatugenVariation } from "lib/types/options";
// WARN: CHANGING THESE VALUES WILL PREVENT MATUGEN COLOR GENERATION FOR THE CHANGED VALUE
@@ -135,21 +135,26 @@ const options = mkOptions(OPTIONS, {
transparent: opt(false),
background: opt(colors.crust),
buttons: {
style: opt<BarButtonStyles>("default"),
monochrome: opt(false),
spacing: opt("0.25em"),
padding_x: opt("0.7rem"),
padding_y: opt("0.2rem"),
y_margins: opt("0.4em"),
radius: opt("0.3em"),
opacity: opt(100),
background_opacity: opt(100),
background_hover_opacity: opt(100),
background: opt(colors.base2),
icon_background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.lavender),
icon: opt(colors.lavender),
dashboard: {
background: opt(colors.base2),
hover: opt(colors.surface1),
icon: opt(colors.yellow)
icon: opt(colors.yellow),
spacing: opt("0.5em"),
},
workspaces: {
background: opt(colors.base2),
@@ -161,12 +166,14 @@ const options = mkOptions(OPTIONS, {
numbered_active_highlight_padding: opt("0.2em"),
numbered_active_highlighted_text_color: opt(colors.mantle),
numbered_active_underline_color: opt(colors.pink),
spacing: opt("0.5em"),
},
windowtitle: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.pink),
icon: opt(colors.pink),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
media: {
@@ -174,6 +181,7 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.lavender),
icon: opt(colors.lavender),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
volume: {
@@ -181,6 +189,7 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.maroon),
icon: opt(colors.maroon),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
network: {
@@ -188,6 +197,7 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.mauve),
icon: opt(colors.mauve),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
bluetooth: {
@@ -195,17 +205,20 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.sky),
icon: opt(colors.sky),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
systray: {
background: opt(colors.base2),
hover: opt(colors.surface1),
spacing: opt("0.5em"),
},
battery: {
background: opt(colors.base2),
hover: opt(colors.surface1),
text: opt(colors.yellow),
icon: opt(colors.yellow),
icon_background: opt(colors.base2),
spacing: opt("0.5em"),
},
clock: {
@@ -213,11 +226,13 @@ const options = mkOptions(OPTIONS, {
hover: opt(colors.surface1),
text: opt(colors.pink),
icon: opt(colors.pink),
spacing: opt("0.5em"),
},
notifications: {
background: opt(colors.base2),
hover: opt(colors.surface1),
icon: opt(colors.lavender),
icon_background: opt(colors.base2),
total: opt(colors.lavender),
spacing: opt("0.5em"),
},
@@ -687,6 +702,7 @@ const options = mkOptions(OPTIONS, {
},
windowtitle: {
title_map: opt([]),
label: opt(true),
},
workspaces: {
show_icons: opt(false),

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

@@ -5,5 +5,24 @@
.bar-button-label.volume {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-volume-text);
min-width: 2.2em;
margin-left: $bar-buttons-volume-spacing;
}
.style2 {
.bar-button-icon.volume {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-volume-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-volume-spacing;
}
.bar-button-label.volume {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-volume-spacing;
margin-left: 0em;
}
}

67
scss/style/bar/bar.scss
View File

@@ -28,9 +28,19 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
.bar_item_box_visible {
background-color: transparentize($bar-buttons-background, $transparency-value);
border-radius: $bar-buttons-radius;
padding: 0.2rem 0.9rem;
margin: $bar-buttons-y_margins $bar-buttons-spacing;
opacity: $bar-buttons-opacity/100;
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
&.style3 {
border-bottom-left-radius: 1.3em;
border-top-right-radius: 1.3em;
}
&.style4 {
border-bottom-right-radius: 1.3em;
border-top-left-radius: 1.3em;
}
&:hover {
background: transparentize($bar-buttons-hover, $transparency-value-hover);
@@ -119,6 +129,61 @@ $transparency-value-hover: 1 - $bar-button-background-hover-opacity-ratio;
&.workspaces {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-background, $bar-buttons-workspaces-background), $transparency-value);
}
&.style2 {
padding: 0em;
&:hover {
.dashboard .bar-button_icon {
color: $bar-buttons-dashboard_background;
}
}
&:hover .no-label {
.battery .bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-battery-hover), $transparency-value);
color: $bar-buttons-battery-icon_background;
}
.bluetooth.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-bluetooth-hover), $transparency-value);
color: $bar-buttons-bluetooth-icon_background;
}
.media.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-media-hover), $transparency-value);
color: $bar-buttons-media-icon_background;
}
.network.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-network-hover), $transparency-value);
color: $bar-buttons-network-icon_background;
}
.notifications.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-notifications-hover), $transparency-value);
color: $bar-buttons-notifications-icon_background;
}
.volume.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-volume-hover), $transparency-value);
color: $bar-buttons-volume-icon_background;
}
.windowtitle.bar-button-icon {
background-color: transparentize(if($bar-buttons-monochrome, $bar-buttons-hover, $bar-buttons-windowtitle-hover), $transparency-value);
color: $bar-buttons-windowtitle-icon_background;
}
}
}
}
.no-label.style2 {
.bar-button-icon {
border-top-right-radius: $bar-buttons-radius;
border-bottom-right-radius: $bar-buttons-radius;
}
}
.bar_item_box_hidden {

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

@@ -1,5 +1,3 @@
.bar {
.battery {
.bar-button-label.battery {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-battery-text);
margin-left: $bar-buttons-battery-spacing;
@@ -8,13 +6,21 @@
.bar-button-icon.battery {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-battery-icon);
}
}
.style2 {
.bar-button-icon.battery {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-battery-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-battery-spacing;
}
.menu-section-container.brightness {
margin-bottom: 0em;
.bar-button-label.battery {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-battery-spacing;
margin-left: 0em;
}
.menu-section-container.energy {
margin-top: 0.5em;
}

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

@@ -18,3 +18,21 @@
.menu-button-isactive {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-bluetooth-text);
}
.style2 {
.bar-button-icon.bluetooth {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-bluetooth-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-bluetooth-spacing;
}
.bar-button-label.bluetooth {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-bluetooth-spacing;
margin-left: 0em;
}
}

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

@@ -1,3 +1,7 @@
.clock {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-clock-text);
}
.style2.clock {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

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

@@ -7,3 +7,21 @@
font-size: 1.2em;
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-media-icon);
}
.style2 {
.bar-button-icon.media {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-media-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-media-spacing;
}
.bar-button-label.media {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-media-spacing;
margin-left: 0em;
}
}

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

@@ -2,3 +2,7 @@
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-dashboard-icon);
font-size: 1.3em;
}
.style2 .bar-menu_label {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

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

@@ -6,3 +6,21 @@
.bar-button-icon.network {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-network-icon);
}
.style2 {
.bar-button-icon.network {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-network-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-network-spacing;
}
.bar-button-label.network {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-network-spacing;
margin-left: 0em;
}
}

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

@@ -1,10 +1,28 @@
.bar-button-icon.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-icon, $bar-buttons-notifications-icon);
font-size: 1.3em;
min-width: 1em;
}
.bar-button-label.notifications {
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-notifications-total);
margin-left: $bar-buttons-notifications-spacing;
min-width: 1em;
}
.style2 {
.bar-button-icon.notifications {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-notifications-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-notifications-spacing;
}
.bar-button-label.notifications {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-notifications-spacing;
margin-left: 0em;
}
}

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

@@ -1,7 +1,11 @@
.systray button:not(:first-child) {
margin-left: 0.75rem;
margin-left: $bar-buttons-systray-spacing;
}
.systray-icon {
font-size: 1.3em;
}
.style2.systray {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

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

@@ -6,3 +6,21 @@
color: if($bar-buttons-monochrome, $bar-buttons-text, $bar-buttons-windowtitle-text);
margin-left: $bar-buttons-windowtitle-spacing;
}
.style2 {
.bar-button-icon.windowtitle {
border-top-left-radius: $bar-buttons-radius;
border-bottom-left-radius: $bar-buttons-radius;
background: if($bar-buttons-monochrome, $bar-buttons-icon_background, $bar-buttons-windowtitle-icon_background);
padding: $bar-buttons-padding_y 0em;
padding-left: $bar-buttons-padding_x;
padding-right: $bar-buttons-windowtitle-spacing;
}
.bar-button-label.windowtitle {
padding: $bar-buttons-padding_y 0em;
padding-right: $bar-buttons-padding_x;
padding-left: $bar-buttons-windowtitle-spacing;
margin-left: 0em;
}
}

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

@@ -75,3 +75,7 @@
border-radius: $bar-buttons-workspaces-numbered_active_highlight_border;
}
}
.style2.workspaces {
padding: $bar-buttons-padding_y $bar-buttons-padding_x;
}

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

@@ -235,7 +235,7 @@
.event-top-padding * {
min-height: 0em;
margin-top: 2.8em + if($bar-floating, $bar-margin_top, 0em);
margin-top: 2.8em + if($bar-floating, $bar-margin_top * 1.1, $bar-margin_top * 0.1);
}
@keyframes spin {

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

@@ -12,12 +12,21 @@ export const BarSettings = () => {
vertical: true,
children: [
Header('Layouts'),
Option({ opt: options.bar.layouts, title: 'Bar Layouts for Monitors', subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts', type: 'object', subtitleLink: 'https://hyprpanel.com/configuration/panel.html#layouts' }, 'bar-layout-input'),
Option({
opt: options.bar.layouts,
title: 'Bar Layouts for Monitors',
subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#layouts',
type: 'object',
subtitleLink: 'https://hyprpanel.com/configuration/panel.html#layouts'
},
'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.y_margins, title: 'Vertical Margins', subtitle: 'Spacing above/below the buttons in 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.padding_x, title: 'Button Horizontal Padding', type: 'string' }),
Option({ opt: options.theme.bar.buttons.padding_y, title: 'Button Vertical Padding', 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.layer, title: 'Layer', type: 'enum', subtitle: 'Layer determines the Z index of your bar.', enums: ["top", "bottom", "overlay", "background"] }),
@@ -41,13 +50,27 @@ export const BarSettings = () => {
Option({ opt: options.bar.workspaces.spacing, title: 'Spacing', subtitle: 'Spacing between workspace icons', type: 'float' }),
Option({ opt: options.bar.workspaces.workspaces, title: 'Total Workspaces', type: 'number' }),
Option({ opt: options.bar.workspaces.monitorSpecific, title: 'Monitor Specific', subtitle: 'Only workspaces applicable to the monitor will be displayed', type: 'boolean' }),
Option({ opt: options.bar.workspaces.workspaceMask, title: 'Mask Workspace Numbers On Monitors', subtitle: 'Only applicable if Workspace Numbers and Monitor Specific are enabled.\nForces each Monitor\'s Workspace labels to start from 1.', type: 'boolean' }),
Option({
opt: options.bar.workspaces.workspaceMask,
title: 'Mask Workspace Numbers On Monitors',
subtitle: `Only applicable if Workspace Numbers and Monitor Specific are enabled.
Forces each Monitor's Workspace labels to start from 1.`,
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' }),
Header('Window Titles'),
Option({ opt: options.bar.windowtitle.label, title: 'Show Window Title Label', type: 'boolean' }),
Option({ opt: options.theme.bar.buttons.windowtitle.spacing, title: 'Inner Spacing', subtitle: 'Spacing between the icon and the label inside the buttons.', type: 'string' }),
Option({ opt: options.bar.windowtitle.title_map, title: 'Window Title Mappings', subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings', type: 'object', subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings' }),
Option({
opt: options.bar.windowtitle.title_map,
title: 'Window Title Mappings',
subtitle: 'Wiki Link: https://hyprpanel.com/configuration/panel.html#window-title-mappings',
type: 'object',
subtitleLink: 'https://hyprpanel.com/configuration/panel.html#window-title-mappings'
}),
Header('Volume'),
Option({ opt: options.bar.volume.label, title: 'Show Volume Percentage', type: 'boolean' }),

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

@@ -14,6 +14,7 @@ export const BarTheme = () => {
Header('General'),
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.style, title: 'Button Style', type: 'enum', enums: ['default', 'split', 'wave', 'wave2'] }),
Option({ opt: options.theme.bar.opacity, title: 'Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.opacity, title: 'Button Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
Option({ opt: options.theme.bar.buttons.background_opacity, title: 'Button Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
@@ -23,6 +24,12 @@ export const BarTheme = () => {
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.icon, title: 'Button Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Dashboard Button'),
Option({ opt: options.theme.bar.buttons.dashboard.background, title: 'Background', type: 'color' }),
@@ -43,30 +50,60 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.buttons.windowtitle.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.windowtitle.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.windowtitle.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.windowtitle.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Media'),
Option({ opt: options.theme.bar.buttons.media.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.media.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.media.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.media.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.media.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Volume'),
Option({ opt: options.theme.bar.buttons.volume.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.volume.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.volume.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.volume.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.volume.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Network'),
Option({ opt: options.theme.bar.buttons.network.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.network.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.network.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.network.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.network.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Bluetooth'),
Option({ opt: options.theme.bar.buttons.bluetooth.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.bluetooth.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.bluetooth.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.bluetooth.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.bluetooth.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('System Tray'),
Option({ opt: options.theme.bar.buttons.systray.background, title: 'Background', type: 'color' }),
@@ -77,6 +114,12 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.buttons.battery.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.battery.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.battery.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.battery.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
Header('Clock'),
Option({ opt: options.theme.bar.buttons.clock.background, title: 'Background', type: 'color' }),
@@ -89,6 +132,12 @@ export const BarTheme = () => {
Option({ opt: options.theme.bar.buttons.notifications.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.notifications.total, title: 'Notification Count', type: 'color' }),
Option({ opt: options.theme.bar.buttons.notifications.icon, title: 'Icon', type: 'color' }),
Option({
opt: options.theme.bar.buttons.notifications.icon_background,
title: 'Button Icon Background',
subtitle: 'Applies a background color to the icon section of the button.\nRequires \'split\' button styling.',
type: 'color'
}),
]
})
})

19
widget/settings/shared/FileChooser.ts
View File

@@ -3,6 +3,10 @@ import Gio from "gi://Gio"
import { bash, Notify } from "lib/utils";
import icons from "lib/icons"
const whiteListedThemeProp = [
"theme.bar.buttons.style"
];
export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
const original_file_path = filePath;
@@ -25,7 +29,10 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
for (let key in jsonObject) {
if (typeof jsonObject[key] === 'string' && hexColorPattern.test(jsonObject[key])) {
filteredObject[key] = jsonObject[key];
} else if (whiteListedThemeProp.includes(key)) {
filteredObject[key] = jsonObject[key];
}
}
return filteredObject;
@@ -37,6 +44,11 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
let filteredObject = {};
for (let key in jsonObject) {
// do not add key-value pair if its in whiteListedThemeProp
if (whiteListedThemeProp.includes(key)) {
continue;
}
if (!(typeof jsonObject[key] === 'string' && hexColorPattern.test(jsonObject[key]))) {
filteredObject[key] = jsonObject[key];
}
@@ -162,9 +174,12 @@ export const importFiles = (themeOnly: boolean = false): void => {
const filterConfigForThemeOnly = (config: object) => {
let filteredConfig = {};
for (let key in config) {
if (typeof config[key] === 'string' && hexColorPattern.test(config[key])) {
filteredConfig[key] = config[key];
} else if (whiteListedThemeProp.includes(key)) {
filteredConfig[key] = config[key];
}
}
return filteredConfig;
@@ -173,6 +188,10 @@ export const importFiles = (themeOnly: boolean = false): void => {
const filterConfigForNonTheme = (config: object) => {
let filteredConfig = {};
for (let key in config) {
// do not add key-value pair if its in whiteListedThemeProp
if (whiteListedThemeProp.includes(key)) {
continue;
}
if (!(typeof config[key] === 'string' && hexColorPattern.test(config[key]))) {
filteredConfig[key] = config[key];
}