Styled power menu

;

@@ -1,40 +0,0 @@
-import { exec } from "resource:///com/github/Aylur/ags/utils.js";
-import { Bar, BarAlt } from "./modules/bar/bar.js";
-import DirectoryMonitorService from "./directoryMonitorService.js";
-import MenuWindows from "./modules/menus/main.js";
-
-const applyScss = () => {
-  // Compile scss
-  exec(`sass ${App.configDir}/scss/main.scss ${App.configDir}/style.css`);
-  exec(
-    `sass ${App.configDir}/scss/highlight.scss ${App.configDir}/highlight.css`,
-  );
-  console.log("Scss compiled");
-
-  // Apply compiled css
-  App.resetCss();
-  App.applyCss(`${App.configDir}/style.css`);
-  console.log("Compiled css applied");
-};
-
-DirectoryMonitorService.connect("changed", () => applyScss());
-
-applyScss();
-
-export default {
-  style: `${App.configDir}/style.css`,
-  closeWindowDelay: {
-    sideright: 350,
-    launcher: 350,
-    bar0: 350,
-  },
-};
-
-App.config({
-  windows: [
-    ...MenuWindows,
-    Bar(0),
-    BarAlt(1),
-    BarAlt(2),
-  ],
-});

modules/bar/media/index.js

@@ -42,14 +42,22 @@ const Media = () => {
     return foundMatch ? foundMatch[1] : "󰝚";
   };
 
-  const label = Utils.watch("󰎇 Nothing is playing 󰎇", mpris, "player-changed", () => {
+  const songIcon = Variable("");
-    if (activePlayer.value) {
+
-      const { track_title, identity } = activePlayer.value;
+  const label = Utils.watch(
-      return `${getIconForPlayer(identity)}  ${track_title}`;
+    "󰎇 No media playing 󰎇",
-    } else {
+    mpris,
-      return "󰎇 Nothing is playing 󰎇";
+    "player-changed",
-    }
+    () => {
-  });
+      if (activePlayer.value) {
+        const { track_title, identity } = activePlayer.value;
+        songIcon.value = getIconForPlayer(identity);
+        return track_title.length === 0 ? `  No media playing...` : `  ${track_title}`;
+      } else {
+        return "󰎇 No media playing 󰎇";
+      }
+    },
+  );
 
   return {
     component: Widget.Box({
@@ -59,11 +67,20 @@ const Media = () => {
         on_primary_click: () => mpris.getPlayer("")?.playPause(),
         on_scroll_up: () => mpris.getPlayer("")?.next(),
         on_scroll_down: () => mpris.getPlayer("")?.previous(),
-        child: Widget.Label({
+        child: Widget.Box({
-          label,
+          children: [
-          truncate: 'end',
+            Widget.Label({
-          wrap: true,
+              class_name: "bar-media_icon",
-          maxWidthChars: 30,
+              label: songIcon.bind("value"),
+              maxWidthChars: 30,
+            }),
+            Widget.Label({
+              label,
+              truncate: "end",
+              wrap: true,
+              maxWidthChars: 30,
+            }),
+          ],
         }),
       }),
     }),

modules/bar/power/index.js

@@ -2,8 +2,7 @@ export const Power = () => {
   return {
     component: Widget.Box({
       child: Widget.Button({
-        class_name: "powermenu",
+        class_name: "bar-powermenu",
-        on_clicked: () => App.toggleWindow("powermenu"),
         child: Widget.Label({
           class_name: "bar-power_label",
           label: "⏻",
@@ -11,5 +10,8 @@ export const Power = () => {
       }),
     }),
     isVisible: true,
+    props: {
+      on_clicked: () => App.toggleWindow("powermenu"),
+    },
   };
 };

modules/bar/workspaces/index.js

@@ -27,12 +27,6 @@ const Workspaces = (monitor = -1, wsMap = {}, ws = 8) => {
             label: `${i}`,
             setup: (self) =>
               self.hook(hyprland, () => {
-                // console.log(`currentMonitor: ${monitor}`);
-                console.log(i);
-                console.log(JSON.stringify(hyprland.getWorkspace(i), null, 2));
-                if (hyprland.getWorkspace(i)) {
-                  // console.log(`currentMonitor: ${monitor}`);
-                }
                 self.toggleClassName(
                   "active",
                   hyprland.active.workspace.id === i,

modules/menus/PopupWindow.js

@@ -127,7 +127,7 @@ export default ({
     name,
     class_names: [name, "popup-window"],
     setup: w => w.keybind("Escape", () => App.closeWindow(name)),
-    visible: true,
+    visible: false,
     keymode: "on-demand",
     exclusivity,
     layer: "top",

modules/menus/power/verification.js

@@ -30,14 +30,12 @@ export default () =>
           homogeneous: true,
           children: [
             Widget.Button({
+              class_name: "verification-button bar-verification_no",
               child: Widget.Label("No"),
               on_clicked: () => App.toggleWindow("verification"),
-              setup: (self) =>
-                self.hook(App, (_, name, visible) => {
-                  if (name === "verification" && visible) self.grab_focus();
-                }),
             }),
             Widget.Button({
+              class_name: "verification-button bar-verification_yes",
               child: Widget.Label("Yes"),
               on_clicked: powermenu.exec,
             }),

modules/shared/barItemBox.js

@@ -7,9 +7,10 @@ export const BarItemBox = (child) => {
     return child.isVisible;
   };
 
-  return Widget.Box({
+  return Widget.Button({
     class_name: "bar_item_box_visible",
     child: child.component,
     visible: computeVisible(),
+    ...child.props
   });
 };

scss/bar/media.scss

@@ -4,3 +4,8 @@
   font-size: 1rem;
   color: $green;
 }
+
+.bar-media_icon {
+  font-size: 1.3rem;
+  color: $green;
+}

scss/bar/power.scss

@@ -4,3 +4,7 @@
   color: $red;
   margin-right: 2px;
 }
+
+.bar-powermenu {
+  // margin: 8px;
+}

scss/menus/powermenu.scss

@@ -15,7 +15,8 @@ window#verification .verification {
     @include floating-widget;
     padding: 7px * 1.6 * 1.5;
     min-width: 300px;
-    min-height: 100px;
+    min-height: 80px;
+    font-size: 1.3em;
 
     .text-box {
         margin-bottom: $spacing;
@@ -29,6 +30,65 @@ window#verification .verification {
             font-size: 1.1em;
         }
     }
+
+    .verification-button {
+        background: $crust;
+        padding: 10px 0px;
+        margin: 5px 25px;
+        border: 2px solid;
+        border-color: $crust;
+        border-radius: $radius;
+        opacity: 1;
+        transition: border-color 0.2s ease-in-out;
+        transition: opacity .3s ease-in-out;
+
+        &:hover {
+            &.bar-verification_yes{
+                border-color: $green;
+                transition: border-color 0.2s ease-in-out;
+            }
+            &.bar-verification_no {
+                border-color: $red;
+                transition: border-color 0.2s ease-in-out;
+            }
+        }
+        &:focus {
+            &.bar-verification_yes{
+                border-color: $green;
+                transition: border-color 0.2s ease-in-out;
+            }
+            &.bar-verification_no {
+                border-color: $red;
+                transition: border-color 0.2s ease-in-out;
+            }
+        }
+
+        &:active {
+            &.bar-verification_yes {
+                border-color: rgba($green, 0.4);
+                transition: border-color 0.2s ease-in-out;
+            }
+            &.bar-verification_no {
+                border-color: rgba($red, 0.4);
+                transition: border-color 0.2s ease-in-out;
+            }
+
+            image {
+                opacity: .3;
+                transition: opacity .3s ease-in-out;
+            }
+            label {
+                opacity: .3;
+                transition: opacity .3s ease-in-out;
+            }
+        }
+    }
+    .bar-verification_no label {
+        color: $red;
+    }
+    .bar-verification_yes label {
+        color: $green;
+    }
 }
 
 window#powermenu .powermenu {

style.css

@@ -312,6 +312,11 @@ spinner:checked {
   color: #a6e3a1;
 }
 
+.bar-media_icon {
+  font-size: 1.3rem;
+  color: #a6e3a1;
+}
+
 .bar-network {
   color: #cba6f7;
 }
@@ -430,7 +435,8 @@ window#verification .verification {
   padding: 20px;
   padding: 16.8px;
   min-width: 300px;
-  min-height: 100px;
+  min-height: 80px;
+  font-size: 1.3em;
 }
 window#verification .verification .text-box {
   margin-bottom: 12px;
@@ -442,6 +448,55 @@ window#verification .verification .text-box .desc {
   color: rgba(146, 120, 182, 0.9);
   font-size: 1.1em;
 }
+window#verification .verification .verification-button {
+  background: #11111b;
+  padding: 10px 0px;
+  margin: 5px 25px;
+  border: 2px solid;
+  border-color: #11111b;
+  border-radius: 11px;
+  opacity: 1;
+  transition: border-color 0.2s ease-in-out;
+  transition: opacity 0.3s ease-in-out;
+}
+window#verification .verification .verification-button:hover.bar-verification_yes {
+  border-color: #a6e3a1;
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:hover.bar-verification_no {
+  border-color: #f38ba8;
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:focus.bar-verification_yes {
+  border-color: #a6e3a1;
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:focus.bar-verification_no {
+  border-color: #f38ba8;
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:active.bar-verification_yes {
+  border-color: rgba(166, 227, 161, 0.4);
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:active.bar-verification_no {
+  border-color: rgba(243, 139, 168, 0.4);
+  transition: border-color 0.2s ease-in-out;
+}
+window#verification .verification .verification-button:active image {
+  opacity: 0.3;
+  transition: opacity 0.3s ease-in-out;
+}
+window#verification .verification .verification-button:active label {
+  opacity: 0.3;
+  transition: opacity 0.3s ease-in-out;
+}
+window#verification .verification .bar-verification_no label {
+  color: #f38ba8;
+}
+window#verification .verification .bar-verification_yes label {
+  color: #a6e3a1;
+}
 
 window#powermenu .powermenu {
   margin: 12px;

style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAyCN;EACE;EACJ;;AAEE;EACE;EACJ;;;AC/CF;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;;AAEA;EACI,eAVE;;AAYF;EACI;;AAGJ;EACI;EACA;;;AAKZ;EC7BI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;AD0BA;EACI;;AAGJ;EACI;;;AAMA;EACI,cb3BN;;Aa6BE;EACI,cb1BJ;;Aa4BA;EACI,cb3BN;;Aa6BE;EACI,cblCJ;;AawCA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,Ob1DF;;Aa4DF;EACI,ObzDA;;Aa2DJ;EACI,Ob9DA;;AagEJ;EACI,Ob7DF;;;AakEF;EACI,ObzEF;;Aa2EF;EACI,ObxEA;;Aa0EJ;EACI,Ob7EA;;Aa+EJ;EACI,Ob5EF","file":"style.css"}
+{"version":3,"sourceRoot":"","sources":["scss/main.scss","scss/common/common.scss","scss/colors.scss","scss/common/widget-button.scss","scss/bar/menu.scss","scss/bar/audio.scss","scss/bar/media.scss","scss/bar/network.scss","scss/bar/bluetooth.scss","scss/bar/clock.scss","scss/bar/workspace.scss","scss/bar/window_title.scss","scss/bar/systray.scss","scss/bar/power.scss","scss/bar/bar.scss","scss/menus/powermenu.scss","scss/common/floating-widget.scss"],"names":[],"mappings":"AAAA;EACE;EACA;;;ACFF;EACE;EACA;EACA,kBCFgB;EDGhB;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI,kBChBW;;ADkBf;EACE,OCnBa;;ADqBf;EACE;EACA;EACA;EACA;;AAGJ;EACE;EACA;EACA,kBC/Be;;;ADmCnB;EACE;EACA;EACA;EACA,OCvCiB;;;AD0CnB;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA,kBC9DiB;ED+DjB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;EACA,kBC9EgB;;;ADiFlB;AAAA;EAEE;EACA,kBCpFgB;;;ADuFlB;AAAA;AAAA;EAGE,OC1FgB;ED2FhB,kBC7CW;;;ADgDb;AAAA;AAAA;EAGE;EACA,kBCpDW;;;ADuDb;AAAA;AAAA;EAGE;EACA,kBC3DW;;;AD8Db;EACE;EACA;EACA;EACA;EACA,kBChHiB;EDiHjB;EACA;EACA;;;AAGF;EACE,kBC1EW;;;AD6Eb;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBCvIc;EDwId;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA,kBChKiB;;;ADmKnB;EACE;EACA,kBCxHW;;;AD2Hb;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA,OC1IW;ED2IX,kBCzLgB;ED0LhB;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE,kBC1MgB;ED2MhB,OC5Mc;ED6Md;;;AAGF;EACE;EACA;EACA,kBCjNiB;;;ADoNnB;EACE;IACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AE/NF;EACE,YDmCM;EClCN;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cD2BM;EC1BN;EACA;;AAEA;EACE;EACA,cDSO;ECRP;;AAGF;EAEE;EACA,cDEO;;ACCT;EACE;EACA;EACA;EACA;;AAGF;EACE,YApCM;;AAyCN;EACE;EACJ;;AAEE;EACE;EACJ;;;AC/CF;EACE,OFsBK;EErBL;EACA;;;ACFA;EACE;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA,OHRM;;;AGWR;EACE,OHZM;;;AIpBR;EACE;EACA,OJoBM;;;AIjBR;EACE;EACA,OJeM;;;AKtBR;EACE,OLgBM;;;AMjBR;EACE;EACA,ONsBI;;;AMnBN;EACE,ONkBI;;;AOxBN;EACE,OPeK;;;AQfL;EACE;EACA;EACA;EACA;EACA;EACA;EACA,kBRmBO;;AQjBP;EACE,kBRQG;EQPH;EACA;;AAGF;EACE,kBROA;EQNA;EACA;;;AAMN;EACE;;;AC1BF;EACE,OTeK;;;AUhBP;EACE;;;AAGF;EACE,YViCO;;;AU/BT;EACE;EACA,OVkBS;;;AUfX;EACE,kBVsBS;;;AUnBX;EACE,kBVmBS;EUlBT;;;AAGF;EACE,kBVKS;;;AW3BX;EACE,OXiBI;EWhBJ;;;ACFF;EACE,YZqCO;EYpCP;EACA;;;AAGF;EACE,YZ6BS;EY5BT;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;ACzBF;AAAA;EAGI;;;AAQJ;ECTI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;EDMA;EACA;EACA;EACA;;AAEA;EACI,eAXE;;AAaF;EACI;;AAGJ;EACI;EACA;;AAIR;EACI,YbOA;EaNA;EACA;EACA;EACA,cbGA;EaFA,eA5BC;EA6BD;EACA;EACA;;AAGI;EACI,cbtBR;EauBQ;;AAEJ;EACI,cb9BV;Ea+BU;;AAIJ;EACI,cbhCR;EaiCQ;;AAEJ;EACI,cbxCV;EayCU;;AAKJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIZ;EACI,OblEF;;AaoEF;EACI,ObjEA;;;AaqER;ECzFI;EACA;EACA,kBdiCG;EchCH,OdwCS;EcvCT;EACA;;ADsFA;EACI;;AAGJ;EACI;;;AAMA;EACI,cbvFN;;AayFE;EACI,cbtFJ;;AawFA;EACI,cbvFN;;AayFE;EACI,cb9FJ;;AaoGA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEJ;EACI;;;AAKR;EACI,ObtHF;;AawHF;EACI,ObrHA;;AauHJ;EACI,Ob1HA;;Aa4HJ;EACI,ObzHF;;;Aa8HF;EACI,ObrIF;;AauIF;EACI,ObpIA;;AasIJ;EACI,ObzIA;;Aa2IJ;EACI,ObxIF","file":"style.css"}