From b23f1a32cb581d9300f1dde0908942a751d2d568 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Mon, 12 Aug 2024 21:38:27 -0700 Subject: [PATCH] Fixed styling issues for various elements that weren't being applied via settings. (#118) * 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. --- modules/menus/dashboard/profile/index.ts | 15 +++++++- modules/menus/media/media.ts | 35 ++++++++++++++++--- modules/menus/power/helpers/actions.ts | 2 +- options.ts | 9 +++++ scss/main.scss | 5 ++- scss/style/common/general.scss | 26 ++++++++++++++ scss/style/menus/dashboard.scss | 5 --- scss/style/menus/power.scss | 5 +-- .../settings/pages/config/menus/dashboard.ts | 1 + widget/settings/pages/theme/menus/index.ts | 4 +++ widget/settings/pages/theme/menus/media.ts | 4 +++ 11 files changed, 96 insertions(+), 15 deletions(-) create mode 100644 scss/style/common/general.scss diff --git a/modules/menus/dashboard/profile/index.ts b/modules/menus/dashboard/profile/index.ts index 4e09dcf..63854bf 100644 --- a/modules/menus/dashboard/profile/index.ts +++ b/modules/menus/dashboard/profile/index.ts @@ -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({ diff --git a/modules/menus/media/media.ts b/modules/menus/media/media.ts index 8d4d35e..a0ea66d 100644 --- a/modules/menus/media/media.ts +++ b/modules/menus/media/media.ts @@ -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); } }); }, diff --git a/modules/menus/power/helpers/actions.ts b/modules/menus/power/helpers/actions.ts index fa8b935..0405db7 100644 --- a/modules/menus/power/helpers/actions.ts +++ b/modules/menus/power/helpers/actions.ts @@ -42,7 +42,7 @@ class PowerMenu extends Service { exec = () => { App.closeWindow("verification"); - Utils.exec(this.#cmd); + Utils.execAsync(this.#cmd); }; } diff --git a/options.ts b/options.ts index 426f293..c9db1ce 100644 --- a/options.ts +++ b/options.ts @@ -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"), diff --git a/scss/main.scss b/scss/main.scss index 1620be2..39ac2cb 100644 --- a/scss/main.scss +++ b/scss/main.scss @@ -45,4 +45,7 @@ @import "style/osd/index"; //settings dialog -@import "style/settings/dialog" +@import "style/settings/dialog"; + +//general styles +@import "style/common/general"; diff --git a/scss/style/common/general.scss b/scss/style/common/general.scss new file mode 100644 index 0000000..cbedac3 --- /dev/null +++ b/scss/style/common/general.scss @@ -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; + } +} diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss index 5c691cf..af8d547 100644 --- a/scss/style/menus/dashboard.scss +++ b/scss/style/menus/dashboard.scss @@ -367,8 +367,3 @@ } } } - -.dropdown.recording { - color: red; - background-color: if($bar-menus-monochrome, $bar-menus-dropdownmenu-background, $bar-menus-dropdownmenu-background); -} diff --git a/scss/style/menus/power.scss b/scss/style/menus/power.scss index dfc6385..656411a 100644 --- a/scss/style/menus/power.scss +++ b/scss/style/menus/power.scss @@ -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; diff --git a/widget/settings/pages/config/menus/dashboard.ts b/widget/settings/pages/config/menus/dashboard.ts index 2d4d770..ff4572b 100644 --- a/widget/settings/pages/config/menus/dashboard.ts +++ b/widget/settings/pages/config/menus/dashboard.ts @@ -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' }), diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts index cdebc5f..94cc98f 100644 --- a/widget/settings/pages/theme/menus/index.ts +++ b/widget/settings/pages/theme/menus/index.ts @@ -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' }), diff --git a/widget/settings/pages/theme/menus/media.ts b/widget/settings/pages/theme/menus/media.ts index a019192..de81db4 100644 --- a/widget/settings/pages/theme/menus/media.ts +++ b/widget/settings/pages/theme/menus/media.ts @@ -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' }),