From 46fe87f90c5d8c754616bdc099405f3c243a1392 Mon Sep 17 00:00:00 2001 From: end-4 <97237370+end-4@users.noreply.github.com> Date: Sun, 30 Mar 2025 23:51:24 +0200 Subject: [PATCH] appearance: "borderless" mode for now applies only to the bar --- .../modules/.configuration/user_options.js | 1 + .../modules/bar/focus/workspaces_hyprland.js | 2 +- .../ags/modules/bar/focus/workspaces_sway.js | 2 +- .config/ags/modules/bar/normal/music.js | 19 +++++++------ .config/ags/modules/bar/normal/system.js | 8 ++++-- .../modules/bar/normal/workspaces_hyprland.js | 2 +- .../ags/modules/bar/normal/workspaces_sway.js | 2 +- .config/ags/scss/_bar.scss | 28 +++++++++++++++++++ 8 files changed, 48 insertions(+), 16 deletions(-) diff --git a/.config/ags/modules/.configuration/user_options.js b/.config/ags/modules/.configuration/user_options.js index af127fd8..eb87825d 100644 --- a/.config/ags/modules/.configuration/user_options.js +++ b/.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, diff --git a/.config/ags/modules/bar/focus/workspaces_hyprland.js b/.config/ags/modules/bar/focus/workspaces_hyprland.js index 58ca462c..b5a101aa 100644 --- a/.config/ags/modules/bar/focus/workspaces_hyprland.js +++ b/.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)], })] diff --git a/.config/ags/modules/bar/focus/workspaces_sway.js b/.config/ags/modules/bar/focus/workspaces_sway.js index 02fed9fa..e883ece5 100644 --- a/.config/ags/modules/bar/focus/workspaces_sway.js +++ b/.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), diff --git a/.config/ags/modules/bar/normal/music.js b/.config/ags/modules/bar/normal/music.js index eb9f2227..c266a25f 100644 --- a/.config/ags/modules/bar/normal/music.js +++ b/.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; - // Set circular progress value - circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;` + if (!mpris) + circprog.css = `font-size: ${userOptions.appearance.borderless ? 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 => { diff --git a/.config/ags/modules/bar/normal/system.js b/.config/ags/modules/bar/normal/system.js index 41f3eff6..c69abe68 100644 --- a/.config/ags/modules/bar/normal/system.js +++ b/.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], }), ] diff --git a/.config/ags/modules/bar/normal/workspaces_hyprland.js b/.config/ags/modules/bar/normal/workspaces_hyprland.js index 8e7e789b..5bc24180 100644 --- a/.config/ags/modules/bar/normal/workspaces_hyprland.js +++ b/.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)], })] diff --git a/.config/ags/modules/bar/normal/workspaces_sway.js b/.config/ags/modules/bar/normal/workspaces_sway.js index 02fed9fa..e883ece5 100644 --- a/.config/ags/modules/bar/normal/workspaces_sway.js +++ b/.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), diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss index e614a538..248f1fbc 100644 --- a/.config/ags/scss/_bar.scss +++ b/.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;