feat(ags): combine heart and brightness widget

This commit is contained in:
matt1432 2023-09-10 01:55:13 -04:00
parent aca5725ade
commit 56ea245a9b
5 changed files with 20 additions and 36 deletions

View file

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

View file

@ -1,25 +1,16 @@
const { Label, Icon, Stack, ProgressBar, Overlay, Box } = ags.Widget; const { Label, Icon, Stack, ProgressBar, Overlay, Box } = ags.Widget;
import { Separator } from '../common.js';
const { exec } = ags.Utils; const { exec } = ags.Utils;
import { Separator } from '../common.js';
import { Heart } from './heart.js';
const Indicator = props => Icon({ export const Brightness = Overlay({
...props, setup: widget => {
size: 28, widget.set_tooltip_text('Brightness');
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({
child: ProgressBar({ child: ProgressBar({
className: 'toggle-off brightness', className: 'toggle-off brightness',
connections: [ connections: [
[ 200, progress => { [200, progress => {
let br = exec('brightnessctl get') / 255; let br = exec('brightnessctl get') / 255;
if (br > 0.33) { if (br > 0.33) {
progress.value = br; progress.value = br;
@ -32,15 +23,11 @@ const BrightnessModule = () => Overlay({
}), }),
overlays: [ overlays: [
Box({ Box({
className: 'battery',
style: 'color: #CBA6F7;', style: 'color: #CBA6F7;',
children: [ children: [
Indicator(), Separator(25),
Separator(2), Heart,
LevelLabel(),
], ],
}), }),
], ],
}); });
export const Brightness = BrightnessModule();

View file

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

View file

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

View file

@ -110,7 +110,11 @@
margin-top: -30px; margin-top: -30px;
border-radius: 80px; border-radius: 80px;
min-height: 37px; 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 { .workspaces {
background-color: rgba(40, 42, 54, 0.8); background-color: rgba(40, 42, 54, 0.8);