appearance: "borderless" mode

for now applies only to the bar

.config/ags/modules/.configuration/user_options.js

@@ -26,6 +26,7 @@ let configOptions = {
             'from': "18:10",
             'to': "6:10",
         },
+        'borderless': false, // Uhm experimental...
         'keyboardUseFlag': false, // Use flag emoji instead of abbreviation letters
         'layerSmoke': false,
         'layerSmokeStrength': 0.2,

.config/ags/modules/bar/focus/workspaces_hyprland.js

@@ -182,7 +182,7 @@ export default () => EventBox({
         homogeneous: true,
         // className: 'bar-group-margin',
         children: [Box({
-            // className: 'bar-group bar-group-standalone bar-group-pad',
+            // className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad`,
             css: 'min-width: 2px;',
             children: [WorkspaceContents(userOptions.workspaces.shown)],
         })]

.config/ags/modules/bar/focus/workspaces_sway.js

@@ -154,7 +154,7 @@ export default () => EventBox({
         homogeneous: true,
         className: 'bar-group-margin',
         children: [Box({
-            className: 'bar-group bar-group-standalone bar-group-pad',
+            className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad`,
             css: 'min-width: 2px;',
             children: [
                 WorkspaceContents(10),

.config/ags/modules/bar/normal/music.js

@@ -37,13 +37,13 @@ const BarGroup = ({ child }) => Box({
     className: 'bar-group-margin bar-sides',
     children: [
         Box({
-            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad-system`,
             children: [child],
         }),
     ]
 });
 
-const BarResource = (name, icon, command, circprogClassName = 'bar-batt-circprog', textClassName = 'txt-onSurfaceVariant', iconClassName = 'bar-batt') => {
+const BarResource = (name, icon, command, circprogClassName = `bar-batt-circprog ${userOptions.appearance.borderless ? 'bar-batt-circprog-borderless' : ''}`, textClassName = 'txt-onSurfaceVariant', iconClassName = 'bar-batt') => {
     const resourceCircProg = AnimatedCircProg({
         className: `${circprogClassName}`,
         vpack: 'center',
@@ -89,12 +89,13 @@ const BarResource = (name, icon, command, circprogClassName = 'bar-batt-circprog
 const TrackProgress = () => {
     const _updateProgress = (circprog) => {
         const mpris = Mpris.getPlayer('');
-        if (!mpris) return;
+        if (!mpris)
-        // Set circular progress value
+            circprog.css = `font-size: ${userOptions.appearance.borderless ? 100 : 0}px;`
-        circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
+        else // Set circular progress value
+            circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
     }
     return AnimatedCircProg({
-        className: 'bar-music-circprog',
+        className: `bar-music-circprog ${userOptions.appearance.borderless ? 'bar-music-circprog-borderless' : ''}`,
         vpack: 'center', hpack: 'center',
         extraSetup: (self) => self
             .hook(Mpris, _updateProgress)
@@ -193,7 +194,7 @@ export default () => {
             child: Box({
                 children: [
                     BarResource(getString('RAM Usage'), 'memory', `LANG=C free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`,
-                        'bar-ram-circprog', 'bar-ram-txt', 'bar-ram-icon'),
+                        `bar-ram-circprog ${userOptions.appearance.borderless ? 'bar-ram-circprog-borderless' : ''}`, 'bar-ram-txt', 'bar-ram-icon'),
                     Revealer({
                         revealChild: true,
                         transition: 'slide_left',
@@ -202,9 +203,9 @@ export default () => {
                             className: 'spacing-h-10 margin-left-10',
                             children: [
                                 BarResource(getString('Swap Usage'), 'swap_horiz', `LANG=C free | awk '/^Swap/ {if ($2 > 0) printf("%.2f\\n", ($3/$2) * 100); else print "0";}'`,
-                                    'bar-swap-circprog', 'bar-swap-txt', 'bar-swap-icon'),
+                                    `bar-swap-circprog ${userOptions.appearance.borderless ? 'bar-swap-circprog-borderless' : ''}`, 'bar-swap-txt', 'bar-swap-icon'),
                                 BarResource(getString('CPU Usage'), 'settings_motion_mode', `LANG=C top -bn1 | grep Cpu | sed 's/\\,/\\./g' | awk '{print $2}'`,
-                                    'bar-cpu-circprog', 'bar-cpu-txt', 'bar-cpu-icon'),
+                                    `bar-cpu-circprog ${userOptions.appearance.borderless ? 'bar-cpu-circprog-borderless' : ''}`, 'bar-cpu-txt', 'bar-cpu-icon'),
                             ]
                         }),
                         setup: (self) => self.hook(Mpris, label => {

.config/ags/modules/bar/normal/system.js

@@ -8,6 +8,7 @@ import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 import { MaterialIcon } from '../../.commonwidgets/materialicon.js';
 import { AnimatedCircProg } from "../../.commonwidgets/cairo_circularprogress.js";
 import { WWO_CODE, WEATHER_SYMBOL, NIGHT_WEATHER_SYMBOL } from '../../.commondata/weather.js';
+import { setupCursorHover } from '../../.widgetutils/cursorhover.js';
 
 const WEATHER_CACHE_FOLDER = `${GLib.get_user_cache_dir()}/ags/weather`;
 Utils.exec(`mkdir -p ${WEATHER_CACHE_FOLDER}`);
@@ -20,7 +21,7 @@ const BarBatteryProgress = () => {
         circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
     }
     return AnimatedCircProg({
-        className: 'bar-batt-circprog',
+        className: `bar-batt-circprog ${userOptions.appearance.borderless ? 'bar-batt-circprog-borderless' : ''}`,
         vpack: 'center', hpack: 'center',
         extraSetup: (self) => self
             .hook(Battery, _updateProgress)
@@ -65,8 +66,9 @@ const UtilButton = ({ name, icon, onClicked }) => Button({
     vpack: 'center',
     tooltipText: name,
     onClicked: onClicked,
-    className: 'bar-util-btn icon-material txt-norm',
+    className: `bar-util-btn ${userOptions.appearance.borderless ? 'bar-util-btn-borderless' : ''} icon-material txt-norm`,
     label: `${icon}`,
+    setup: setupCursorHover
 })
 
 const Utilities = () => Box({
@@ -134,7 +136,7 @@ const BarGroup = ({ child }) => Widget.Box({
     className: 'bar-group-margin bar-sides',
     children: [
         Widget.Box({
-            className: 'bar-group bar-group-standalone bar-group-pad-system',
+            className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad-system`,
             children: [child],
         }),
     ]

.config/ags/modules/bar/normal/workspaces_hyprland.js

@@ -191,7 +191,7 @@ export default () => EventBox({
         homogeneous: true,
         className: 'bar-group-margin',
         children: [Box({
-            className: 'bar-group bar-group-standalone bar-group-pad',
+            className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad`,
             css: 'min-width: 2px;',
             children: [WorkspaceContents(userOptions.workspaces.shown)],
         })]

.config/ags/modules/bar/normal/workspaces_sway.js

@@ -154,7 +154,7 @@ export default () => EventBox({
         homogeneous: true,
         className: 'bar-group-margin',
         children: [Box({
-            className: 'bar-group bar-group-standalone bar-group-pad',
+            className: `bar-group${userOptions.appearance.borderless ? '-borderless' : ''} bar-group-standalone bar-group-pad`,
             css: 'min-width: 2px;',
             children: [
                 WorkspaceContents(10),

.config/ags/scss/_bar.scss

@@ -43,6 +43,10 @@ $bar_ws_width_focus_active: 2.045rem;
     background-color: $layer1;
 }
 
+.bar-group-borderless {
+    background-color: transparent;
+}
+
 .bar-group-pad {
     padding: 0.205rem;
 }
@@ -171,6 +175,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $battOnLayer2;
 }
 
+.bar-batt-circprog-borderless {
+    background-color: transparent;
+}
+
 .bar-batt-circprog-low {
     background-color: $error;
     color: $errorContainer;
@@ -200,6 +208,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $ramOnLayer2;
 }
 
+.bar-ram-circprog-borderless {
+    background-color: transparent;
+}
+
 .bar-ram-txt {
     color: $ramOnLayer1;
 }
@@ -222,6 +234,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $swapOnLayer2;
 }
 
+.bar-swap-circprog-borderless {
+    background-color: transparent;
+}
+
 .bar-swap-txt {
     color: $swapOnLayer1;
 }
@@ -244,6 +260,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $cpuOnLayer2;
 }
 
+.bar-cpu-circprog-borderless {
+    background-color: transparent;
+}
+
 .bar-cpu-txt {
     color: $cpuOnLayer1;
 }
@@ -265,6 +285,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $musicOnLayer2;
 }
 
+.bar-music-circprog-borderless {
+    background-color: transparent;
+}
+
 .bar-music-playstate-playing {
     min-height: 1.77rem;
     min-width: 1.77rem;
@@ -386,6 +410,10 @@ $bar_ws_width_focus_active: 2.045rem;
     color: $utilsOnLayer2;
 }
 
+.bar-util-btn-borderless {
+    background-color: transparent;
+}
+
 .bar-util-btn:hover,
 .bar-util-btn:focus {
     background-color: $layer2Hover;