feat(ags): combine heart and brightness widget

config/ags/js/bar/bar.js

@@ -4,7 +4,6 @@ import { Separator }      from '../common.js';
 import { CurrentWindow }  from './current-window.js';
 import { Workspaces }     from './workspaces.js';
 import { OskToggle }      from './osk-toggle.js';
-import { Heart }          from './heart.js';
 import { TabletToggle }   from './tablet-toggle.js';
 import { QsToggle }       from './quick-settings.js';
 import { NotifButton }    from './notif-button.js';
@@ -38,10 +37,6 @@ export const Bar = Window({
       
         Separator(12),
 
-        Heart,
-
-        Separator(12),
-
         SysTray,
 
         Separator(12),

config/ags/js/bar/brightness.js

@@ -1,21 +1,12 @@
 const { Label, Icon, Stack, ProgressBar, Overlay, Box } = ags.Widget;
-import { Separator } from '../common.js';
 const { exec } = ags.Utils;
+import { Separator } from '../common.js';
+import { Heart }     from './heart.js';
 
-const Indicator = props => Icon({
-  ...props,
-  size: 28,
-  style: 'margin-left: -5px',
-  icon: 'display-brightness-symbolic',
-});
-
-const LevelLabel = props => Label({
-  ...props,
-  className: 'label',
-  connections: [[200, label => label.label = `${Math.floor(exec('brightnessctl get') / 2.55)}%`]],
-});
-
-const BrightnessModule = () => Overlay({
+export const Brightness = Overlay({
+  setup: widget => {
+    widget.set_tooltip_text('Brightness');
+  },
   child: ProgressBar({
     className: 'toggle-off brightness',
     connections: [
@@ -32,15 +23,11 @@ const BrightnessModule = () => Overlay({
   }),
   overlays: [
     Box({
-      className: 'battery',
       style: 'color: #CBA6F7;',
       children: [
-        Indicator(),
-        Separator(2),
-        LevelLabel(),
+        Separator(25),
+        Heart,
       ],
     }),
   ],
 });
-
-export const Brightness = BrightnessModule();

config/ags/js/bar/heart.js

@@ -8,16 +8,9 @@ deflisten(
   ['bash', '-c', 'tail -f /home/matt/.config/.heart'],
   (output) => {
     Heart.child.children[0].label = ' ' + output;
-
-    if (output == '󰣐') {
-      Heart.toggleClassName('toggle-on', true);
-    } else {
-      Heart.toggleClassName('toggle-on', false);
-    }
   },
 );
 export const Heart = EventBox({
-  className: 'toggle-off',
   halign: 'center',
   onPrimaryClickRelease: () => {
     exec("bash -c '$AGS_PATH/heart.sh toggle'");

config/ags/scss/widgets/traybuttons.scss

@@ -96,7 +96,12 @@
       margin-top: -30px;
       border-radius: 80px;
       min-height: 37px;
-      background: $bgSecondary;
+      background: rgba(#8466ae, 0.8);
     }
   }
 }
+  
+tooltip {
+  background: rgba(0,0,0, 0.6);
+  border-radius: 5px;
+}

config/ags/style.css

@@ -110,7 +110,11 @@
     margin-top: -30px;
     border-radius: 80px;
     min-height: 37px;
-    background: rgba(56, 44, 74, 0.8); }
+    background: rgba(132, 102, 174, 0.8); }
+
+tooltip {
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 5px; }
 
 .workspaces {
   background-color: rgba(40, 42, 54, 0.8);