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

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];
}