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

Implemented configurable and toggleable button borders. (#279)

Browse Source 
* Implemented configurable and toggleable button borders.

* Improve and simplify border logic

* Fix hidden label icon borders.

* Removed button hover property from bar buttons, they dim on hover now by default.

* Rename file.

* Update catppuccin normal theme's storage module color.

* update mocha items

* update mochas

* Update themes to account for borders
This commit is contained in:
Jas Singh
2024-09-22 02:59:30 -07:00
committed by GitHub
parent b47864d8e1
commit 6905fb4eb7
58 changed files with 2315 additions and 1404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,18 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
type: 'enum',
enums: ['top', 'bottom'],
}),
Option({
opt: options.theme.bar.buttons.enableBorders,
title: 'Enable Button Borders',
subtitle: 'Enables button borders for all buttons in the bar.',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.borderSize,
title: 'Button Border Size',
subtitle: 'Button border for the individual modules must be enabled first',
type: 'string',
}),
/*
******************************
* SPACING *
@@ -142,6 +153,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
title: 'Dashboard Menu Icon',
type: 'string',
}),
Option({
opt: options.theme.bar.buttons.dashboard.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.launcher.rightClick,
title: 'Right Click',
@@ -169,6 +185,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Workspaces'),
Option({
opt: options.theme.bar.buttons.workspaces.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.workspaces.fontSize,
title: 'Indicator Size',
@@ -283,6 +304,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Window Titles'),
Option({
opt: options.theme.bar.buttons.windowtitle.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.windowtitle.custom_title,
title: 'Use Custom Title',
@@ -363,6 +389,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Volume'),
Option({
opt: options.theme.bar.buttons.volume.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.volume.label,
title: 'Show Volume Percentage',
@@ -401,6 +432,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Network'),
Option({
opt: options.theme.bar.buttons.network.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.network.label,
title: 'Show Network Name',
@@ -450,6 +486,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Bluetooth'),
Option({
opt: options.theme.bar.buttons.bluetooth.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.bluetooth.label,
title: 'Show Bluetooth Label',
@@ -488,6 +529,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Battery'),
Option({
opt: options.theme.bar.buttons.battery.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.battery.label,
title: 'Show Battery Percentage',
@@ -526,6 +572,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('System Tray'),
Option({
opt: options.theme.bar.buttons.systray.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.systray.ignore,
title: 'Ignore List',
@@ -542,6 +593,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Clock'),
Option({
opt: options.theme.bar.buttons.clock.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.clock.format,
title: 'Clock Format',
@@ -595,6 +651,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Media'),
Option({
opt: options.theme.bar.buttons.media.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.theme.bar.buttons.media.spacing,
title: 'Inner Spacing',
@@ -647,6 +708,11 @@ export const BarSettings = (): Scrollable<Gtk.Widget, Gtk.Widget> => {
******************************
*/
Header('Notifications'),
Option({
opt: options.theme.bar.buttons.notifications.enableBorder,
title: 'Button Border',
type: 'boolean',
}),
Option({
opt: options.bar.notifications.show_total,
title: 'Show Total # of notifications',

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

@@ -74,8 +74,8 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
Header('Dashboard Button'),
Option({ opt: options.theme.bar.buttons.dashboard.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.dashboard.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.dashboard.icon, title: 'Icon', type: 'color' }),
Option({ opt: options.theme.bar.buttons.dashboard.border, title: 'Border', type: 'color' }),
Header('Workspaces'),
Option({ opt: options.theme.bar.buttons.workspaces.background, title: 'Background', type: 'color' }),
@@ -109,10 +109,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
title: 'Workspace Underline Color',
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.workspaces.border, title: 'Border', type: 'color' }),
Header('Window Title'),
Option({ opt: options.theme.bar.buttons.windowtitle.background, title: 'Background', type: 'color' }),
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({
@@ -122,10 +122,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.windowtitle.border, title: 'Border', 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({
@@ -135,10 +135,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.media.border, title: 'Border', 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({
@@ -148,10 +148,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.volume.border, title: 'Border', 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({
@@ -161,10 +161,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.network.border, title: 'Border', 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({
@@ -174,14 +174,13 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.bluetooth.border, title: 'Border', type: 'color' }),
Header('System Tray'),
Option({ opt: options.theme.bar.buttons.systray.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.systray.hover, title: 'Hover', type: 'color' }),
Header('Battery'),
Option({ opt: options.theme.bar.buttons.battery.background, title: 'Background', type: 'color' }),
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({
@@ -191,10 +190,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.battery.border, title: 'Border', type: 'color' }),
Header('Clock'),
Option({ opt: options.theme.bar.buttons.clock.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.clock.hover, title: 'Hover', type: 'color' }),
Option({ opt: options.theme.bar.buttons.clock.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.buttons.clock.icon, title: 'Icon', type: 'color' }),
Option({
@@ -204,10 +203,10 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.clock.border, title: 'Border', type: 'color' }),
Header('Notifications'),
Option({ opt: options.theme.bar.buttons.notifications.background, title: 'Background', type: 'color' }),
Option({ opt: options.theme.bar.buttons.notifications.hover, title: 'Hover', type: 'color' }),
Option({
opt: options.theme.bar.buttons.notifications.total,
title: 'Notification Count',
@@ -221,6 +220,7 @@ export const BarTheme = (): Scrollable<Child, Attribute> => {
"Applies a background color to the icon section of the button.\nRequires 'split' button styling.",
type: 'color',
}),
Option({ opt: options.theme.bar.buttons.notifications.border, title: 'Border', type: 'color' }),
],
}),
});