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.
2024-08-12 21:38:27 -07:00
parent 79bf05d9c9
commit b23f1a32cb
11 changed files with 96 additions and 15 deletions
--- 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({
--- 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);
                            }
                        });
                    },
--- 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);
    };
 }

--- 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"),
--- 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";
--- a/scss/style/common/general.scss
+++ 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;
+  }
+}
--- 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);
-}
--- 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;
--- 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' }),
--- 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' }),
--- 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' }),