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

Fixed styling issues for various elements that weren't being applied via settings. (#118)

Browse Source 
* Popups are now styles properly and can be themed. closes #115

* Added the ability to style media menu card color and transparency. Made confirmation dialogue optional.

* Increase radius

* Move actions inside the function to reflect updated values.
This commit is contained in:
Jas Singh
2024-08-12 21:38:27 -07:00
committed by GitHub
parent 79bf05d9c9
commit b23f1a32cb
11 changed files with 96 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
modules/menus/dashboard/profile/index.ts
View File

@@ -5,11 +5,24 @@ import GdkPixbuf from "gi://GdkPixbuf";
import options from "options";
const { image, name } = options.menus.dashboard.powermenu.avatar;
const { confirmation, shutdown, logout, sleep, reboot } = options.menus.dashboard.powermenu;
const Profile = () => {
const handleClick = (action: PowerOptions) => {
const actions = {
shutdown: shutdown.value,
reboot: reboot.value,
logout: logout.value,
sleep: sleep.value,
};
App.closeWindow("dashboardmenu");
return powermenu.action(action);
if (!confirmation.value) {
Utils.execAsync(actions[action])
.catch((err) => console.error(`Failed to execute ${action} command. Error: ${err}`));
} else {
powermenu.action(action);
}
};
return Widget.Box({

35
modules/menus/media/media.ts
View File

@@ -3,7 +3,29 @@ import { MediaInfo } from "./components/mediainfo.js";
import { Controls } from "./components/controls.js";
import { Bar } from "./components/bar.js";
import { MprisPlayer } from "types/service/mpris.js";
import options from "options.js";
const { tint, color } = options.theme.bar.menus.menu.media.card;
const generateAlbumArt = (imageUrl: string): string => {
const userTint = tint.value;
const userHexColor = color.value;
let css: string;
const r = parseInt(userHexColor.slice(1, 3), 16);
const g = parseInt(userHexColor.slice(3, 5), 16);
const b = parseInt(userHexColor.slice(5, 7), 16);
const alpha = userTint / 100;
css = `background-image: linear-gradient(
rgba(${r}, ${g}, ${b}, ${alpha}),
rgba(${r}, ${g}, ${b}, ${alpha}),
${userHexColor} 65em
), url("${imageUrl}");`;
return css;
}
const Media = () => {
const curPlayer = Variable("");
@@ -65,11 +87,14 @@ const Media = () => {
self.hook(media, () => {
const curPlayer = getPlayerInfo();
if (curPlayer !== undefined) {
self.css = `background-image: linear-gradient(
rgba(30, 30, 46, 0.85),
rgba(30, 30, 46, 0.9),
#1e1e2e 40em), url("${curPlayer.track_cover_url}");
`;
self.css = generateAlbumArt(curPlayer.track_cover_url);
}
});
Utils.merge([color.bind("value"), tint.bind("value")], () => {
const curPlayer = getPlayerInfo();
if (curPlayer !== undefined) {
self.css = generateAlbumArt(curPlayer.track_cover_url);
}
});
},

2
modules/menus/power/helpers/actions.ts
View File

@@ -42,7 +42,7 @@ class PowerMenu extends Service {
exec = () => {
App.closeWindow("verification");
Utils.exec(this.#cmd);
Utils.execAsync(this.#cmd);
};
}

9
options.ts
View File

@@ -222,6 +222,10 @@ const options = mkOptions(OPTIONS, {
dimtext: opt(colors.surface2),
feinttext: opt(colors.surface0),
label: opt(colors.lavender),
popover: {
text: opt(colors.lavender),
background: opt(secondary_colors.mantle)
},
listitems: {
passive: opt(colors.text),
active: opt(secondary_colors.lavender)
@@ -272,6 +276,10 @@ const options = mkOptions(OPTIONS, {
background: {
color: opt(colors.crust),
},
card: {
color: opt(colors.base),
tint: opt(85),
},
border: {
color: opt(colors.surface0),
},
@@ -699,6 +707,7 @@ const options = mkOptions(OPTIONS, {
menus: {
dashboard: {
powermenu: {
confirmation: opt(true),
sleep: opt("systemctl suspend"),
reboot: opt("systemctl reboot"),
logout: opt("pkill Hyprland"),

5
scss/main.scss
View File

@@ -45,4 +45,7 @@
@import "style/osd/index";
//settings dialog
@import "style/settings/dialog"
@import "style/settings/dialog";
//general styles
@import "style/common/general";

26
scss/style/common/general.scss Normal file
View File

@@ -0,0 +1,26 @@
@import '../colors.scss';
window.popup {
menuitem {
label {
color: $bar-menus-popover-text;
}
&:hover {
background-color: transparentize($bar-menus-popover-text, 0.6);
}
}
menu {
background: $bar-menus-popover-background;
}
separator {
background: transparentize($bar-menus-popover-text, 0.7);
min-height: 0.075em;
}
arrow {
color: $bar-menus-popover-text;
}
}

5
scss/style/menus/dashboard.scss
View File

@@ -367,8 +367,3 @@
}
}
}
.dropdown.recording {
color: red;
background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-background, $bar-menus-dropdownmenu-background);
}

5
scss/style/menus/power.scss
View File

@@ -9,6 +9,7 @@ $popover-padding: 0.6rem * 1.6;
window#verification .verification {
@include floating-widget;
background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-powermenu-confirmation-background);
border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border, $bar-menus-menu-dashboard-powermenu-confirmation-border);
padding: 0.35em * 1.6 * 1.5;
min-width: 20em;
min-height: 6em;
@@ -16,7 +17,7 @@ window#verification .verification {
.verification-content {
background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
border-radius: 0.4em;
border-radius: $bar-menus-border-radius/2;
padding: 1em;
}
@@ -41,7 +42,7 @@ window#verification .verification {
background: $bar-menus-buttons-default;
padding: 0.7em 0em;
margin: 0.4em 1.7em;
border-radius: 0.3em;
border-radius: $bar-menus-border-radius/2;
opacity: 1;
transition: border-color 0.2s ease-in-out;
transition: opacity .3s ease-in-out;

1
widget/settings/pages/config/menus/dashboard.ts
View File

@@ -17,6 +17,7 @@ export const DashboardMenuSettings = () => {
Option({ opt: options.menus.dashboard.powermenu.avatar.image, title: 'Profile Image', type: 'img' }),
Option({ opt: options.menus.dashboard.powermenu.avatar.name, title: 'Profile Name', subtitle: 'Use \'system\' to automatically set system name', type: 'string' }),
Option({ opt: options.menus.dashboard.powermenu.confirmation, title: 'Show Confirmation Dialogue', type: 'boolean' }),
Option({ opt: options.menus.dashboard.powermenu.shutdown, title: 'Shutdown Command', type: 'string' }),
Option({ opt: options.menus.dashboard.powermenu.reboot, title: 'Reboot Command', type: 'string' }),
Option({ opt: options.menus.dashboard.powermenu.logout, title: 'Logout Command', type: 'string' }),

4
widget/settings/pages/theme/menus/index.ts
View File

@@ -29,6 +29,10 @@ export const MenuTheme = () => {
Option({ opt: options.theme.bar.menus.border.radius, title: 'Border Radius', type: 'string' }),
Option({ opt: options.theme.bar.menus.border.color, title: 'Border Color', type: 'color' }),
Header('Popover'),
Option({ opt: options.theme.bar.menus.popover.text, title: 'Text', type: 'color' }),
Option({ opt: options.theme.bar.menus.popover.background, title: 'Background', type: 'color' }),
Header('List Items'),
Option({ opt: options.theme.bar.menus.listitems.active, title: 'Active', subtitle: 'Items of a list (network name, bluetooth device name, playback device, etc.) when active or hovered.', type: 'color' }),
Option({ opt: options.theme.bar.menus.listitems.passive, title: 'Passive', type: 'color' }),

4
widget/settings/pages/theme/menus/media.ts
View File

@@ -20,6 +20,10 @@ export const MediaMenuTheme = () => {
Header('Background'),
Option({ opt: options.theme.bar.menus.menu.media.background.color, title: 'Background', type: 'color' }),
Header('Card/Album Art'),
Option({ opt: options.theme.bar.menus.menu.media.card.color, title: 'Color', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.media.card.tint, title: 'Tint', type: 'number', increment: 5, min: 0, max: 100 }),
Header('Buttons'),
Option({ opt: options.theme.bar.menus.menu.media.buttons.inactive, title: 'Unavailable', subtitle: 'Disabled button when media control isn\'t available.', type: 'color' }),
Option({ opt: options.theme.bar.menus.menu.media.buttons.enabled, title: 'Enabled', subtitle: 'Ex: Button color when shuffle/loop is enabled.', type: 'color' }),