mirror of
https://github.com/danbulant/dots-hyprland
synced 2026-05-24 12:22:09 +00:00
appearance: "borderless" mode
for now applies only to the bar
This commit is contained in:
parent
a8004a32ea
commit
46fe87f90c
8 changed files with 48 additions and 16 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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)],
|
||||
})]
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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],
|
||||
}),
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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)],
|
||||
})]
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue