refactor(ags): rearrange bar js

This commit is contained in:
matt1432 2023-09-04 22:27:34 -04:00
parent 07ad1cddbe
commit ac869537e7
6 changed files with 152 additions and 148 deletions

View file

@ -1,6 +1,6 @@
import { exec } from 'resource:///com/github/Aylur/ags/utils.js'; import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
import { Powermenu } from './js/powermenu.js'; import { Powermenu } from './js/powermenu.js';
import { LeftBar } from './js/bar/traybuttons.js'; import { Bar } from './js/bar/bar.js';
import { Closer } from './js/common.js'; import { Closer } from './js/common.js';
const scss = ags.App.configDir + '/scss/main.scss'; const scss = ags.App.configDir + '/scss/main.scss';
@ -13,7 +13,7 @@ export default {
style: css, style: css,
windows: [ windows: [
Powermenu, Powermenu,
LeftBar, Bar,
Closer, Closer,
] ]
} }

65
config/ags/js/bar/bar.js Normal file
View file

@ -0,0 +1,65 @@
const { Window, CenterBox, Box } = ags.Widget;
import { Separator, EventBox } from '../common.js';
import { CurrentWindow } from './current-window.js';
import { Workspaces } from './workspaces.js';
import { OskToggle } from './osk-toggle.js'
import { Heart } from './heart.js'
export const Bar = Window({
name: 'left-bar',
layer: 'overlay',
anchor: 'top left right',
exclusive: true,
child: CenterBox({
className: 'transparent',
halign: 'fill',
style: 'margin-top: 5px; margin-left: 5px;',
vertical: false,
children: [
// Left
Box({
halign: 'start',
children: [
OskToggle,
Separator(12),
EventBox({
className: 'toggle-off',
onPrimaryClickRelease: '',
child: ags.Widget.Box({
className: 'tablet-toggle',
vertical: false,
child: ags.Widget.Label({
label: " 󰦧 ",
}),
}),
}),
Separator(12),
Heart,
Separator(12),
Workspaces(),
],
}),
// Center
CurrentWindow,
// Right
Box({
halign: 'end',
}),
],
}),
});

View file

@ -0,0 +1,31 @@
import { EventBox } from '../common.js';
ags.Utils.subprocess(
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
(output) => {
Heart.child.children[0].label = ' ' + output;
if (output == '󰣐') {
Heart.toggleClassName('toggle-on', true);
} else {
Heart.toggleClassName('toggle-on', false);
}
},
);
export const Heart = EventBox({
className: 'toggle-off',
halign: 'center',
onPrimaryClickRelease: function() {
ags.Utils.exec('/home/matt/.nix/config/ags/bin/heart.sh toggle');
},
child: ags.Widget.Box({
className: 'heart-toggle',
vertical: false,
child: ags.Widget.Label({
label: '',
}),
}),
});

View file

@ -0,0 +1,37 @@
import { Separator, EventBox } from '../common.js';
ags.Utils.subprocess(
['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh getState'],
(output) => {
if (output == 'Running') {
OskToggle.toggleClassName('toggle-on', true);
} else {
OskToggle.toggleClassName('toggle-on', false);
}
},
);
export const OskToggle = EventBox({
className: 'toggle-off',
onPrimaryClickRelease: function() {
ags.Utils.subprocess(
['bash', '-c', '/home/matt/.nix/config/ags/bin/osk-toggle.sh toggle'],
(output) => {
if (output == 'Running') {
OskToggle.toggleClassName('toggle-on', false);
} else {
OskToggle.toggleClassName('toggle-on', true);
}
},
);
},
child: ags.Widget.Box({
className: 'osk-toggle',
vertical: false,
children: [
ags.Widget.Label({
label: " 󰌌 ",
}),
],
}),
});

View file

@ -1,146 +0,0 @@
import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default();
import { CurrentWindow } from './current-window.js';
import { Workspaces } from './workspaces.js';
const Separator = width => ags.Widget.Box({
style: `min-width: ${width}px;`,
});
ags.Utils.subprocess(
['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh getState'],
(output) => {
if (output == 'Running') {
OskToggle.toggleClassName('toggle-on', true);
} else {
OskToggle.toggleClassName('toggle-on', false);
}
},
);
const OskToggle = ags.Widget.EventBox({
className: 'toggle-off',
onPrimaryClickRelease: function() {
ags.Utils.subprocess(
['bash', '-c', '/home/matt/.nix/config/ags/scripts/osk-toggle.sh toggle'],
(output) => {
if (output == 'Running') {
OskToggle.toggleClassName('toggle-on', false);
} else {
OskToggle.toggleClassName('toggle-on', true);
}
},
);
},
onHover: box => {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: box => {
box.window.set_cursor(null);
},
child: ags.Widget.Box({
className: 'osk-toggle',
vertical: false,
children: [
ags.Widget.Label({
label: " 󰌌 ",
}),
],
}),
});
ags.Utils.subprocess(
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
(output) => {
HeartToggle.child.children[0].label = ' ' + output;
if (output == '󰣐') {
HeartToggle.toggleClassName('toggle-on', true);
} else {
HeartToggle.toggleClassName('toggle-on', false);
}
},
);
const HeartToggle = ags.Widget.EventBox({
className: 'toggle-off',
halign: 'center',
onPrimaryClickRelease: function() {
ags.Utils.exec('/home/matt/.nix/config/ags/scripts/heart.sh toggle');
},
onHover: box => {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: box => {
box.window.set_cursor(null);
},
child: ags.Widget.Box({
className: 'heart-toggle',
vertical: false,
child: ags.Widget.Label({
label: '',
}),
}),
});
export const LeftBar = ags.Widget.Window({
name: 'left-bar',
layer: 'overlay',
anchor: 'top left right',
exclusive: true,
child: ags.Widget.CenterBox({
className: 'transparent',
halign: 'fill',
style: 'margin-top: 5px; margin-left: 5px;',
vertical: false,
children: [
ags.Widget.Box({
halign: 'start',
children: [
OskToggle,
Separator(12),
ags.Widget.EventBox({
className: 'toggle-off',
onPrimaryClickRelease: '',
onHover: box => {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: box => {
box.window.set_cursor(null);
},
child: ags.Widget.Box({
className: 'tablet-toggle',
vertical: false,
child: ags.Widget.Label({
label: " 󰦧 ",
}),
}),
}),
Separator(12),
HeartToggle,
Separator(12),
Workspaces(),
],
}),
CurrentWindow,
ags.Widget.Box({
halign: 'end',
style: 'background: red; min-width: 100px; min-height: 40px',
}),
],
}),
});

View file

@ -11,3 +11,20 @@ export const Closer = ags.Widget.Window({
}, },
}), }),
}); });
export const Separator = width => ags.Widget.Box({
style: `min-width: ${width}px;`,
});
import Gdk from 'gi://Gdk';
const display = Gdk.Display.get_default();
export const EventBox = ({ ...params }) => ags.Widget.EventBox({
...params,
onHover: box => {
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
},
onHoverLost: box => {
box.window.set_cursor(null);
},
});