appearance: "borderless" mode

for now applies only to the bar
This commit is contained in:
end-4 2025-03-30 23:51:24 +02:00
parent a8004a32ea
commit 46fe87f90c
8 changed files with 48 additions and 16 deletions

View file

@ -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,

View file

@ -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)],
})]

View file

@ -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),

View file

@ -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 => {

View file

@ -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],
}),
]

View file

@ -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)],
})]

View file

@ -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),

View file

@ -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;