From 608137a604dd99ecfcf4597622cf1ef030ff05d2 Mon Sep 17 00:00:00 2001 From: Jas Singh Date: Sun, 9 Jun 2024 22:28:07 -0700 Subject: [PATCH] Styled power menu --- ; | 40 ------------------- modules/bar/media/index.js | 43 ++++++++++++++------ modules/bar/power/index.js | 6 ++- modules/bar/workspaces/index.js | 6 --- modules/menus/PopupWindow.js | 2 +- modules/menus/power/verification.js | 6 +-- modules/shared/barItemBox.js | 3 +- scss/bar/media.scss | 5 +++ scss/bar/power.scss | 4 ++ scss/menus/powermenu.scss | 62 ++++++++++++++++++++++++++++- style.css | 57 +++++++++++++++++++++++++- style.css.map | 2 +- 12 files changed, 166 insertions(+), 70 deletions(-) delete mode 100644 ; diff --git a/; b/; deleted file mode 100644 index 2ae433e..0000000 --- a/; +++ /dev/null @@ -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), - ], -}); diff --git a/modules/bar/media/index.js b/modules/bar/media/index.js index f3540ff..40c2e58 100644 --- a/modules/bar/media/index.js +++ b/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", () => { - if (activePlayer.value) { - const { track_title, identity } = activePlayer.value; - return `${getIconForPlayer(identity)} ${track_title}`; - } else { - return "󰎇 Nothing is playing 󰎇"; - } - }); + const songIcon = Variable(""); + + const label = Utils.watch( + "󰎇 No media playing 󰎇", + mpris, + "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({ - label, - truncate: 'end', - wrap: true, - maxWidthChars: 30, + child: Widget.Box({ + children: [ + Widget.Label({ + class_name: "bar-media_icon", + label: songIcon.bind("value"), + maxWidthChars: 30, + }), + Widget.Label({ + label, + truncate: "end", + wrap: true, + maxWidthChars: 30, + }), + ], }), }), }), diff --git a/modules/bar/power/index.js b/modules/bar/power/index.js index 60cdfda..a970b90 100644 --- a/modules/bar/power/index.js +++ b/modules/bar/power/index.js @@ -2,8 +2,7 @@ export const Power = () => { return { component: Widget.Box({ child: Widget.Button({ - class_name: "powermenu", - on_clicked: () => App.toggleWindow("powermenu"), + class_name: "bar-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"), + }, }; }; diff --git a/modules/bar/workspaces/index.js b/modules/bar/workspaces/index.js index 757f886..83fc5ff 100644 --- a/modules/bar/workspaces/index.js +++ b/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, diff --git a/modules/menus/PopupWindow.js b/modules/menus/PopupWindow.js index a7c8c90..49ab38a 100644 --- a/modules/menus/PopupWindow.js +++ b/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", diff --git a/modules/menus/power/verification.js b/modules/menus/power/verification.js index 87c22df..b66849d 100644 --- a/modules/menus/power/verification.js +++ b/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, }), diff --git a/modules/shared/barItemBox.js b/modules/shared/barItemBox.js index 587743d..36f3559 100644 --- a/modules/shared/barItemBox.js +++ b/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 }); }; diff --git a/scss/bar/media.scss b/scss/bar/media.scss index 4c5f23e..b90bbf1 100644 --- a/scss/bar/media.scss +++ b/scss/bar/media.scss @@ -4,3 +4,8 @@ font-size: 1rem; color: $green; } + +.bar-media_icon { + font-size: 1.3rem; + color: $green; +} diff --git a/scss/bar/power.scss b/scss/bar/power.scss index f316212..fcc6dc4 100644 --- a/scss/bar/power.scss +++ b/scss/bar/power.scss @@ -4,3 +4,7 @@ color: $red; margin-right: 2px; } + +.bar-powermenu { + // margin: 8px; +} diff --git a/scss/menus/powermenu.scss b/scss/menus/powermenu.scss index dfc5174..b837bed 100644 --- a/scss/menus/powermenu.scss +++ b/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 { diff --git a/style.css b/style.css index 0e6fc2f..463c887 100644 --- a/style.css +++ b/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; diff --git a/style.css.map b/style.css.map index 2393ac2..dc4f74c 100644 --- a/style.css.map +++ b/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"} \ No newline at end of file +{"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"} \ No newline at end of file