osd values redesign

.config/ags/modules/indicators/indicatorvalues.js

@@ -5,9 +5,10 @@ const { Box, Label, ProgressBar } = Widget;
 import { MarginRevealer } from '../.widgethacks/advancedrevealers.js';
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
+import { MaterialIcon } from '../.commonwidgets/materialicon.js';
 
 const OsdValue = ({
-    name, nameSetup = undefined, labelSetup, progressSetup,
+    name, icon, nameSetup = undefined, labelSetup, progressSetup,
     extraClassName = '', extraProgressClassName = '',
     ...rest
 }) => {
@@ -22,27 +23,33 @@ const OsdValue = ({
         setup: labelSetup,
     });
     return Box({ // Volume
-        vertical: true,
         hexpand: true,
-        className: `osd-bg osd-value ${extraClassName}`,
+        className: `osd-bg osd-value ${extraClassName} spacing-h-5`,
         attribute: {
             'disable': () => {
                 valueNumber.label = '󰖭';
             }
         },
         children: [
+            MaterialIcon(icon, 'hugeass', {vpack: 'center'}),
             Box({
-                vexpand: true,
+                vertical: true,
+                className: 'spacing-v-5',
+                vpack: 'center',
                 children: [
-                    valueName,
+                    Box({
-                    valueNumber,
+                        children: [
+                            valueName,
+                            valueNumber,
+                        ]
+                    }),
+                    ProgressBar({
+                        className: `osd-progress ${extraProgressClassName}`,
+                        hexpand: true,
+                        vertical: false,
+                        setup: progressSetup,
+                    })
                 ]
-            }),
-            ProgressBar({
-                className: `osd-progress ${extraProgressClassName}`,
-                hexpand: true,
-                vertical: false,
-                setup: progressSetup,
             })
         ],
         ...rest,
@@ -52,6 +59,7 @@ const OsdValue = ({
 export default (monitor = 0) => {
     const brightnessIndicator = OsdValue({
         name: 'Brightness',
+        icon: 'light_mode',
         extraClassName: 'osd-brightness',
         extraProgressClassName: 'osd-brightness-progress',
         labelSetup: (self) => self.hook(Brightness[monitor], self => {
@@ -66,6 +74,7 @@ export default (monitor = 0) => {
 
     const volumeIndicator = OsdValue({
         name: 'Volume',
+        icon: 'volume_up',
         extraClassName: 'osd-volume',
         extraProgressClassName: 'osd-volume-progress',
         attribute: { headphones: undefined , device: undefined},

.config/ags/scss/_osd.scss

@@ -4,28 +4,27 @@
 
 .osd-bg {
     min-width: 8.864rem;
-    min-height: 3.409rem;
 }
 
 .osd-value {
     @include elevation-border;
     @include elevation2;
+    @include full-rounding;
     background-color: $layer0;
-    border-radius: 1.023rem;
+    padding: 0.341rem 1.023rem 0.341rem 0.682rem;
-    padding: 0.625rem 1.023rem;
+    min-width: 9.545rem;
-    padding-top: 0.313rem;
 }
 
 .osd-progress {
-    min-height: 0.955rem;
+    min-height: 0.682rem;
-    min-width: 0.068rem;
+    min-width: 8.182rem;
     padding: 0rem;
     border-radius: 10rem;
     @include fluent_decel;
 
     trough {
-        min-height: 0.954rem;
+        min-height: 0.682rem;
-        min-width: 0.068rem;
+        min-width: 8.182rem;
         border-radius: 10rem;
         background-color: $layer2;
         // border: 0.068rem solid $onSecondaryContainer;
@@ -33,8 +32,8 @@
 
     progress {
         @include fluent_decel;
-        min-height: 0.680rem;
+        min-height: 0.409rem;
-        min-width: 0.680rem;
+        min-width: 0.409rem;
         margin: 0rem 0.137rem;
         border-radius: 10rem;
         background-color: $onLayer2;
@@ -44,12 +43,10 @@
 .osd-label {
     font-size: 1.023rem;
     font-weight: 500;
-    margin-top: 0.341rem;
 }
 
 .osd-value-txt {
-    @include titlefont;
+    font-size: 1.023rem;
-    font-size: 1.688rem;
     font-weight: 500;
     color: $onLayer0;
 }

.config/ags/user_options.jsonc

@@ -2,7 +2,7 @@
 //     ~/.config/ags/modules/.configuration/default_options.jsonc
 //
 // vscode: ctrl+click this: file://./modules/.configuration/default_options.jsonc
-// vim : `:vsp` to split window, move cursor to the path, press `gf`. 
+// vim: `:vsp` to split window, move cursor to the path, press `gf`. 
 //      `Ctrl-w` twice to switch between the files
 //
 // Limitations of this file: