feat(ags): add slider box to quick settings

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

@@ -1,13 +1,13 @@
 const { Window, CenterBox, Box, Label } = ags.Widget;
 
 import { ButtonGrid } from './button-grid.js';
-//import { SliderBox } from './slider-box';
+import { SliderBox } from './slider-box.js';
 //import { Player } from 
 
 export const QuickSettings = Window({
   name: 'quick-settings',
   layer: 'overlay',
-  //popup: true,
+  popup: true,
   anchor: 'top right',
   child: Box({
     className: 'qs-container',
@@ -22,11 +22,13 @@ export const QuickSettings = Window({
           Label({
             label: 'Control Center',
             className: 'title',
+            halign: 'start',
+            style: 'margin-left: 20px'
           }),
 
           ButtonGrid,
 
-          //SliderBox,
+          SliderBox,
 
         ],
       }),

config/ags/js/quick-settings/slider-box.js

@@ -0,0 +1,75 @@
+const { Box, Slider, Label, Icon } = ags.Widget;
+const { Audio } = ags.Service;
+const { exec } = ags.Utils;
+
+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',
+};
+
+export const SliderBox = Box({
+  className: 'slider-box',
+  vertical: true,
+  halign: 'center',
+  children: [
+
+    Box({
+      className: 'slider',
+      valign: 'start',
+      halign: 'center',
+      children: [
+        Icon({
+          size: 26,
+          className: 'slider-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']],
+        }),
+
+        Slider({
+          value: `${exec('bash -c "$EWW_PATH/volume.sh vol"')}`,
+          onChange: 'bash -c "$EWW_PATH/volume.sh set {}"',
+          min: 0,
+          max: 100,
+          draw_value: false,
+        }),
+      ],
+    }),
+
+    Box({
+      className: 'slider',
+      valign: 'start',
+      halign: 'center',
+      children: [
+        Icon({
+          className: 'slider-label',
+          icon: 'display-brightness-symbolic',
+        }),
+
+        Slider({
+          value: `${exec('brightnessctl get') / 2.55}`,
+          onChange: "brightnessctl set {}%",
+          min: 0,
+          max: 100,
+          draw_value: false,
+        }),
+      ],
+    }),
+
+  ],
+});

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

@@ -1,4 +1,6 @@
 .quick-settings {
+  margin-right: 5px;
+  margin-top: 8px;
   font-size: 30px;
   min-width: 500px;
   padding: 0px 0px 0px 0px;

config/ags/style.css

@@ -456,6 +456,8 @@ calendar:indeterminate {
   color: #262831; }
 
 .quick-settings {
+  margin-right: 5px;
+  margin-top: 8px;
   font-size: 30px;
   min-width: 500px;
   padding: 0px 0px 0px 0px;