feat(ags): start doing quick-settings menu

config/ags/bin/qs-toggle.sh

@@ -1,8 +1,6 @@
 #!/usr/bin/env bash
 
 on () {
-  eww open closer &&
-
   eww open quick-settings-reveal;
   eww update showqs=true;
 }

config/ags/config.js

@@ -1,10 +1,11 @@
 import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 import { Powermenu } from './js/powermenu.js';
-import { Bar } from './js/bar/bar.js';
+import { Bar } from './js/bar/main.js';
 import { NotificationCenter } from './js/notifications/center.js';
 import { NotificationsPopupList } from './js/notifications/popup.js'
 import { Closer } from './js/misc/closer.js';
 import { Calendar } from './js/date.js';
+import { QuickSettings } from './js/quick-settings/main.js'
 
 const scss = ags.App.configDir + '/scss/main.scss';
 const css = ags.App.configDir + '/style.css';
@@ -22,5 +23,6 @@ export default {
     NotificationCenter,
     NotificationsPopupList,
     Calendar,
+    QuickSettings,
   ],
 };

config/ags/js/quick-settings/button-grid.js

@@ -0,0 +1,211 @@
+const { Box, CenterBox, Label, Icon } = ags.Widget;
+const { Network, Bluetooth, Audio } = ags.Service;
+const { exec } = ags.Utils;
+
+import { EventBox } from '../misc/cursorbox.js';
+
+const GridButton = ({ command = () => {}, secondaryCommand = () => {}, icon } = {}) => Box({
+  className: 'grid-button',
+  children: [
+
+    EventBox({
+      className: 'left-part',
+      onPrimaryClickRelease: () => command(),
+      child: icon,
+    }),
+
+    EventBox({
+      className: 'right-part',
+      onPrimaryClickRelease: () => secondaryCommand(),
+      child: Label({
+        label: " ",
+        className: 'grid-chev',
+      }),
+    }),
+
+  ],
+});
+
+const FirstRow = Box({
+  className: 'button-row',
+  halign: 'center',
+  style: 'margin-top: 15px; margin-bottom: 7px;',
+  children: [
+
+    GridButton({
+      command: () => Network.toggleWifi(),
+      secondaryCommand: () => exec("bash -c 'nm-connection-editor &'"),
+      icon: Icon({
+        className: 'grid-label',
+        connections: [[Network, icon => {
+          if (Network.wifi.enabled) {
+            icon.icon = 'network-wireless-connected-symbolic';
+          }
+          else {
+            icon.icon = 'network-wireless-offline-symbolic';
+          }
+        }, 'changed']],
+      }),
+    }),
+
+    GridButton({
+      command: () => exec("bash -c '$EWW_PATH/bluetooth.sh toggle'"),
+      secondaryCommand: () => exec("bash -c 'blueberry &'"),
+      icon: Icon({
+        className: 'grid-label',
+        connections: [[Bluetooth, icon => {
+          if (Bluetooth.enabled) {
+            icon.icon = 'bluetooth-active-symbolic';
+          }
+          else {
+            icon.icon = 'bluetooth-disabled-symbolic';
+          }
+        }, 'changed']],
+      })
+    }),
+
+    GridButton({
+      command: () => exec('bash -c "$EWW_PATH/network.sh toggle-radio"'),
+      secondaryCommand: () => exec("notify-send 'set this up moron'"),
+      icon: Icon({
+        className: 'grid-label',
+        connections: [[Network, icon => {
+          if (Network.wifi.enabled) {
+            icon.icon = 'airplane-mode-disabled-symbolic';
+          }
+          else {
+            icon.icon = 'airplane-mode-symbolic';
+          }
+        }, 'changed']],
+      }),
+    }),
+
+  ],
+});
+
+const SubRow = CenterBox({
+  halign: 'start',
+  children: [
+
+    Label({
+      className: 'sub-label',
+      truncate: 'end',
+      maxWidthChars: 12,
+      connections: [[Network, label => {
+        label.label = Network.wifi.ssid;
+      }, 'changed']],
+    }),
+
+    Label({
+      className: 'sub-label',
+      truncate: 'end',
+      maxWidthChars: 12,
+      connections: [[Bluetooth, label => {
+        label.label = String(Bluetooth.connectedDevices[0]);
+      }, 'changed']],
+    }),
+
+    Label({
+      className: '',
+      truncate: 'end',
+      maxWidthChars: 12,
+      /*connections: [[Network, label => {
+        label.label = Network.wifi.ssid;
+      }, 'changed']],*/
+    }),
+
+  ],
+});
+
+const items = {
+  101: 'audio-volume-overamplified-symbolic',
+  67: 'audio-volume-high-symbolic',
+  34: 'audio-volume-medium-symbolic',
+  1: 'audio-volume-low-symbolic',
+  0: 'audio-volume-muted-symbolic',
+};
+
+const itemsMic = {
+  2: 'audio-input-microphone-high-symbolic',
+  1: 'audio-input-microphone-muted-symbolic',
+  0: 'audio-input-microphone-muted-symbolic',
+};
+
+const SecondRow = Box({
+  className: 'button-row',
+  halign: 'center',
+  style: 'margin-top: 7px; margin-bottom: 15px;',
+  children: [
+
+    GridButton({
+      command: () => exec("swayosd-client --output-volume mute-toggle"),
+      secondaryCommand: () => exec('bash -c "pavucontrol &"'),
+      icon: Icon({
+        className: 'grid-label',
+        connections: [[Audio, icon => {
+          if (Audio.speaker) {
+            if (Audio.speaker.isMuted) {
+              icon.icon = items[0];
+            }
+            else {
+              const vol = Audio.speaker.volume * 100;
+              for (const threshold of [-1, 0, 33, 66, 100]) {
+                if (vol > threshold + 1) {
+                  icon.icon = items[threshold + 1];
+                }
+              }
+            }
+          }
+        }, 'speaker-changed']],
+      }),
+    }),
+
+    GridButton({
+      command: () => exec("swayosd-client --input-volume mute-toggle"),
+      secondaryCommand: () => exec('bash -c "pavucontrol &"'),
+      icon: Icon({
+        className: 'grid-label',
+        connections: [[Audio, icon => {
+          if (Audio.microphone) {
+            if (Audio.microphone.isMuted) {
+              icon.icon = itemsMic[0];
+            }
+            else {
+              const vol = Audio.microphone.volume * 100;
+              for (const threshold of [-1, 0, 1]) {
+                if (vol > threshold + 1) {
+                  icon.icon = itemsMic[threshold + 1];
+                }
+              }
+            }
+          }
+        }, 'microphone-changed']],
+      })
+    }),
+
+    GridButton({
+      command: () => exec('bash -c "$LOCK_PATH/lock.sh &"'),
+      secondaryCommand: () => {
+        ags.App.openWindow('closer');
+        ags.App.openWindow('powermenu');
+      },
+      icon: Label({
+        className: 'grid-label',
+        label: " 󰌾 ", 
+      }),
+    }),
+
+  ],
+});
+
+
+export const ButtonGrid = Box({
+  className: 'button-grid',
+  vertical: true,
+  halign: 'center',
+  children: [
+    FirstRow,
+    SubRow,
+    SecondRow,
+  ],
+});

config/ags/js/quick-settings/main.js

@@ -0,0 +1,38 @@
+const { Window, CenterBox, Box, Label } = ags.Widget;
+
+import { ButtonGrid } from './button-grid.js';
+//import { SliderBox } from './slider-box';
+//import { Player } from 
+
+export const QuickSettings = Window({
+  name: 'quick-settings',
+  layer: 'overlay',
+  //popup: true,
+  anchor: 'top right',
+  child: Box({
+    className: 'qs-container',
+    vertical: true,
+    children: [
+      
+      Box({
+        className: 'quick-settings',
+        vertical: true,
+        children: [
+
+          Label({
+            label: 'Control Center',
+            className: 'title',
+          }),
+
+          ButtonGrid,
+
+          //SliderBox,
+
+        ],
+      }),
+
+      //Player,
+
+    ],
+  }),
+});

config/ags/scss/main.scss

@@ -10,3 +10,4 @@
 @import "./widgets/notification-center.scss";
 @import "./widgets/notification.scss";
 @import "./widgets/date.scss";
+@import "./widgets/quick-settings.scss";

config/ags/scss/widgets/quick-settings.scss

@@ -0,0 +1,165 @@
+.quick-settings {
+  font-size: 30px;
+  min-width: 500px;
+  padding: 0px 0px 0px 0px;
+  background-color: $bg;
+  border-top-right-radius: 0px;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+  border: 2px solid $contrastbg;
+}
+
+.title {
+  font-size: 22px;
+  margin-top: 30px;
+}
+
+.grid-label {
+  font-size: 30px;
+  margin-left: 15px;
+  margin-right: 10px;
+  min-width: 50px;
+}
+
+.sub-label {
+  font-size: 14px;
+  margin-top: -10px;
+  margin-left: 31px;
+  &:nth-child(1) {
+    margin-left: 25px;
+  }
+  margin-bottom: 10px;
+  padding: 3px;
+  border: 2px solid $contrastbg;
+  border-top-right-radius: 20px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 20px;
+  min-width: 106px;
+  background: #1b1b1b;
+}
+
+.grid-chev {
+  margin-left: 0px;
+
+  font-size: 40px;
+  margin-right: 5px;
+}
+
+.button-grid {
+  font-size: 10px;
+  min-height: 160px;
+  min-width: 470px;
+  background-color: $bgfull;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  border-radius: 15px;
+  margin-top: 30px;
+}
+
+.button-row {
+  min-height: 70px;
+  min-width: 450px;
+  margin-left: 20px;
+}
+
+.grid-button {
+  min-height: 65px;
+  min-width: 70px;
+  margin: 5px;
+  margin-left: 22px;
+  &:nth-child(1) {
+    margin-left: 5px;
+  }
+}
+
+.left-part {
+  background: #1b1b1b;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  border-left: 2px solid $contrastbg;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  transition: all 0.5s ease-in-out;
+}
+
+.right-part {
+  background: #1b1b1b;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  border-right: 2px solid $contrastbg;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  transition: all 0.5s ease-in-out;
+}
+
+.right-part:hover, .right-part:active {
+  color: $contrastbg;
+  border: 2px solid $contrastbg;
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
+  transition: all 0.5s ease-in-out;
+}
+
+.left-part:hover, .left-part:active {
+  color: $contrastbg;
+  border: 2px solid $contrastbg;
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+  transition: all 0.5s ease-in-out;
+}
+
+.player {
+  margin-top: 6px;
+  min-height: 220px;
+  opacity: 0;
+}
+
+.slider-box {
+  min-height: 100px;
+  min-width: 470px;
+  background-color: $bgfull;
+  border-top: 2px solid $contrastbg;
+  border-bottom: 2px solid $contrastbg;
+  border-radius: 15px;
+  margin-top: 30px;
+  margin-bottom: 20px;
+
+  .slider-label {
+    font-size: 30px;
+    min-width: 30px;
+  }
+
+  scale {
+    min-height: 55px;
+    min-width: 400px;
+    margin-left: 18px;
+    margin-right: 20px;
+
+    highlight {
+      margin: 0px;
+      background-color: #79659f;
+      border-radius: 2em;
+    }
+
+    trough {
+      background-color: #363847;
+      border-radius: 2em;
+    }
+
+    slider {
+      margin: -4px;
+      min-width: 20px;
+      min-height: 20px;
+      background: #3e4153;
+      border-radius: 100%;
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+      transition: background-color 0.5s ease-in-out;
+    }
+    slider:hover {
+      background-color: #303240;
+      transition: background-color 0.5s ease-in-out;
+    }
+  }
+}

config/ags/style.css

@@ -454,3 +454,141 @@ calendar.highlight {
 
 calendar:indeterminate {
   color: #262831; }
+
+.quick-settings {
+  font-size: 30px;
+  min-width: 500px;
+  padding: 0px 0px 0px 0px;
+  background-color: rgba(40, 42, 54, 0.8);
+  border-top-right-radius: 0px;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  border-bottom-right-radius: 30px;
+  border: 2px solid rgba(189, 147, 249, 0.8); }
+
+.title {
+  font-size: 22px;
+  margin-top: 30px; }
+
+.grid-label {
+  font-size: 30px;
+  margin-left: 15px;
+  margin-right: 10px;
+  min-width: 50px; }
+
+.sub-label {
+  font-size: 14px;
+  margin-top: -10px;
+  margin-left: 31px;
+  margin-bottom: 10px;
+  padding: 3px;
+  border: 2px solid rgba(189, 147, 249, 0.8);
+  border-top-right-radius: 20px;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+  border-bottom-right-radius: 20px;
+  min-width: 106px;
+  background: #1b1b1b; }
+  .sub-label:nth-child(1) {
+    margin-left: 25px; }
+
+.grid-chev {
+  margin-left: 0px;
+  font-size: 40px;
+  margin-right: 5px; }
+
+.button-grid {
+  font-size: 10px;
+  min-height: 160px;
+  min-width: 470px;
+  background-color: #282a36;
+  border-top: 2px solid rgba(189, 147, 249, 0.8);
+  border-bottom: 2px solid rgba(189, 147, 249, 0.8);
+  border-radius: 15px;
+  margin-top: 30px; }
+
+.button-row {
+  min-height: 70px;
+  min-width: 450px;
+  margin-left: 20px; }
+
+.grid-button {
+  min-height: 65px;
+  min-width: 70px;
+  margin: 5px;
+  margin-left: 22px; }
+  .grid-button:nth-child(1) {
+    margin-left: 5px; }
+
+.left-part {
+  background: #1b1b1b;
+  border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px;
+  border-left: 2px solid rgba(189, 147, 249, 0.8);
+  border-top: 2px solid rgba(189, 147, 249, 0.8);
+  border-bottom: 2px solid rgba(189, 147, 249, 0.8);
+  transition: all 0.5s ease-in-out; }
+
+.right-part {
+  background: #1b1b1b;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  border-right: 2px solid rgba(189, 147, 249, 0.8);
+  border-top: 2px solid rgba(189, 147, 249, 0.8);
+  border-bottom: 2px solid rgba(189, 147, 249, 0.8);
+  transition: all 0.5s ease-in-out; }
+
+.right-part:hover, .right-part:active {
+  color: rgba(189, 147, 249, 0.8);
+  border: 2px solid rgba(189, 147, 249, 0.8);
+  border-top-left-radius: 7px;
+  border-bottom-left-radius: 7px;
+  transition: all 0.5s ease-in-out; }
+
+.left-part:hover, .left-part:active {
+  color: rgba(189, 147, 249, 0.8);
+  border: 2px solid rgba(189, 147, 249, 0.8);
+  border-top-right-radius: 7px;
+  border-bottom-right-radius: 7px;
+  transition: all 0.5s ease-in-out; }
+
+.player {
+  margin-top: 6px;
+  min-height: 220px;
+  opacity: 0; }
+
+.slider-box {
+  min-height: 100px;
+  min-width: 470px;
+  background-color: #282a36;
+  border-top: 2px solid rgba(189, 147, 249, 0.8);
+  border-bottom: 2px solid rgba(189, 147, 249, 0.8);
+  border-radius: 15px;
+  margin-top: 30px;
+  margin-bottom: 20px; }
+  .slider-box .slider-label {
+    font-size: 30px;
+    min-width: 30px; }
+  .slider-box scale {
+    min-height: 55px;
+    min-width: 400px;
+    margin-left: 18px;
+    margin-right: 20px; }
+    .slider-box scale highlight {
+      margin: 0px;
+      background-color: #79659f;
+      border-radius: 2em; }
+    .slider-box scale trough {
+      background-color: #363847;
+      border-radius: 2em; }
+    .slider-box scale slider {
+      margin: -4px;
+      min-width: 20px;
+      min-height: 20px;
+      background: #3e4153;
+      border-radius: 100%;
+      box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+      transition: background-color 0.5s ease-in-out; }
+    .slider-box scale slider:hover {
+      background-color: #303240;
+      transition: background-color 0.5s ease-in-out; }