update, split up ags config

This commit is contained in:
Varris 2023-10-12 21:52:06 +02:00
parent ac3baf7ab9
commit c7bdc9d968
13 changed files with 303 additions and 280 deletions

View File

@ -5,7 +5,7 @@
}: {
services.locate = {
enable = true;
locate = pkgs.plocate;
package = pkgs.plocate;
localuser = null;
prunePaths = lib.mkOptionDefault [];
interval = "hourly";

View File

@ -1,191 +1,5 @@
const { Mpris, Hyprland, SystemTray, Audio } = ags.Service;
const { execAsync } = ags.Utils;
const { Box, Button, Label, Icon, CenterBox, Stack, Window } = ags.Widget;
const Workspaces = (monitor) => Box({
className: 'workspaces',
connections: [[Hyprland, box => {
if (monitor == 0) {
box.children = [1,2,3].map(i => Button({
onClicked: () => execAsync(`hyprctl dispatch workspace ${i}`),
onScrollDown: () => execAsync(`hyprctl dispatch workspace +1`),
onScrollUp: () => execAsync(`hyprctl dispatch workspace -1`),
child: Label({ label: `${i}` }),
className: Hyprland.active.workspace.id == i ? 'focused' : '',
}));
} else if (monitor == 1) {
box.children = [4,5,6].map(i => Button({
onClicked: () => execAsync(`hyprctl dispatch workspace ${i}`),
onScrollDown: () => execAsync(`hyprctl dispatch workspace +1`),
onScrollUp: () => execAsync(`hyprctl dispatch workspace -1`),
child: Label({ label: `${i}` }),
className: Hyprland.active.workspace.id == i ? 'focused' : '',
}));
}
}]],
});
const WindowTitle = () => Label({
connections: [[Hyprland, label => {
label.label = Hyprland.active.client.title || '';
label.toggleClassName('windowTitle', label.label);
}]],
});
const Volume = () => Button({
className: 'volume',
onScrollUp: () => execAsync('pamixer -i 10'),
onScrollDown: () => execAsync('pamixer -d 10'),
child: Box({
children: [
Stack({
items: [
// tuples of [string, Widget]
['101', Icon('audio-volume-overamplified-symbolic')],
['67', Icon('audio-volume-high-symbolic')],
['34', Icon('audio-volume-medium-symbolic')],
['1', Icon('audio-volume-low-symbolic')],
['0', Icon('audio-volume-muted-symbolic')],
],
connections: [[Audio, stack => {
if (!Audio.speaker)
return;
if (Audio.speaker.isMuted) {
stack.shown = '0';
return;
}
const show = [101, 67, 34, 1, 0].find(
threshold => threshold <= Audio.speaker.volume * 100);
stack.shown = `${show}`;
}, 'speaker-changed']],
}),
Label({
connections: [[Audio, label => {
if (!Audio.speaker)
return;
label.label = ` ${Math.ceil((Audio.speaker.volume * 100) / 10) * 10}%`; // round up to nearest 10
}, 'speaker-changed' ]],
}),
],
}),
});
const Media = () => Button({
className: 'media',
onPrimaryClick: () => Mpris.getPlayer('')?.playPause(),
onScrollUp: () => Mpris.getPlayer('')?.previous(),
onScrollDown: () => Mpris.getPlayer('')?.next(),
child: Box({
children: [
Stack({
items: [
['paused', Icon('media-playback-pause-symbolic')],
['playing', Icon('media-playback-start-symbolic')],
['stopped', Icon('media-playback-stop-symbolic')],
],
connections: [[Mpris, stack => {
const mpris = Mpris.getPlayer('');
switch (mpris.playBackStatus) {
case "Playing":
stack.shown = 'playing';
break;
case "Paused":
stack.shown = 'paused';
break;
default:
stack.shown = 'stopped';
}
}]],
}),
Label({
connections: [[Mpris, label => {
const mpris = Mpris.getPlayer('');
if (!mpris || mpris.playBackStatus == "Stopped")
label.label = ' Stopped';
else
label.label = ` ${mpris.trackArtists.join(', ')} - ${mpris.trackTitle}`;
}]],
}),
],
}),
})
const SysTray = () => Box({
className: 'tray',
connections: [[SystemTray, box => {
box.children = SystemTray.items.map(item => Button({
className: 'tray-icon',
child: Icon(),
onPrimaryClick: (_, event) => item.activate(event),
onSecondaryClick: (_, event) => item.openMenu(event),
connections: [[item, button => {
button.child.icon = item.icon;
button.tooltipMarkup = item.tooltipMarkup;
}]],
}));
}]],
});
const Clock = () => Box({
className: 'date',
children: [
Icon({
icon: 'x-office-calendar-symbolic',
}),
Label({
connections: [
[1000, label => execAsync(['date', '+%a %d, %B %H:%M'])
.then(date => label.label = ' ' + date).catch(console.error)],
],
}),
],
});
const Left = (monitor) => Box({
children: [
Workspaces(monitor),
WindowTitle(),
],
});
const Center = () => Box({
children: [
Volume(),
Media(),
],
});
const Right = () => Box({
halign: 'end',
children: [
SysTray(),
Clock(),
],
});
const Bar = ({ monitor } = {}) => Window({
name: `bar-${monitor}`, // name has to be unique
className: 'bar',
monitor,
anchor: ['top', 'left', 'right'],
exclusive: true,
child: CenterBox({
startWidget: Left(`${monitor}`),
centerWidget: Center(),
endWidget: Right(),
}),
})
import Panel from './js/panel/panel.js';
import VolumeOSD from './js/volume_osd/volosd.js';
const scss = ags.App.configDir + '/style.scss';
const css = '/tmp/style-ags.css';
@ -194,7 +8,9 @@ ags.Utils.exec(`sassc ${scss} ${css}`);
export default {
style: css,
windows: [
Bar({monitor: 0}),
Bar({monitor: 1}),
Panel(0),
Panel(1),
// VolumeOSD(),
],
};

View File

@ -0,0 +1,44 @@
import Workspaces from './widgets/workspaces.js';
import WindowTitle from './widgets/windowTitle.js';
//
import Volume from './widgets/volume.js';
import Mpris from './widgets/mpris.js'
//
import SysTray from './widgets/sysTray.js';
import Clock from './widgets/clock.js';
const Left = monitor => ags.Widget.Box({
children: [
Workspaces(monitor),
WindowTitle(),
],
});
const Center = () => ags.Widget.Box({
children: [
Volume(),
Mpris('mpd')
],
});
const Right = () => ags.Widget.Box({
halign: 'end',
children: [
SysTray(),
Clock(),
],
});
export default monitor => ags.Widget.Window({
name: `bar-${monitor}`, // name has to be unique
className: 'bar',
monitor,
anchor: ['top', 'left', 'right'],
exclusive: true,
child: ags.Widget.CenterBox({
startWidget: Left(`${monitor}`),
centerWidget: Center(),
endWidget: Right(),
}),
})

View File

@ -0,0 +1,16 @@
export default () => ags.Widget.Box({
className: 'date',
children: [
ags.Widget.Icon({
icon: 'x-office-calendar-symbolic',
}),
ags.Widget.Label({
connections: [
[1000, label => ags.Utils.execAsync(['date', '+%a %d, %B %H:%M'])
.then(date => label.label = ' ' + date).catch(console.error)],
],
}),
],
});

View File

@ -0,0 +1,45 @@
export default player => ags.Widget.Button({
className: 'media',
onPrimaryClick: () => ags.Service.Mpris.getPlayer(player)?.playPause(),
onScrollUp: () => ags.Service.Mpris.getPlayer(player)?.previous(),
onScrollDown: () => ags.Service.Mpris.getPlayer(player)?.next(),
child: ags.Widget.Box({
children: [
ags.Widget.Stack({
items: [
['paused', ags.Widget.Icon('media-playback-pause-symbolic')],
['playing', ags.Widget.Icon('media-playback-start-symbolic')],
['stopped', ags.Widget.Icon('media-playback-stop-symbolic')],
],
connections: [[ags.Service.Mpris, statusIcon => {
const mpris = ags.Service.Mpris.getPlayer(player);
switch (mpris.playBackStatus) {
case "Playing":
statusIcon.shown = 'playing';
break;
case "Paused":
statusIcon.shown = 'paused';
break;
default:
statusIcon.shown = 'stopped';
}
}]],
}),
ags.Widget.Label({
connections: [[ags.Service.Mpris, label => {
const mpris = ags.Service.Mpris.getPlayer(player);
if (!mpris || mpris.playBackStatus == "Stopped")
label.label = ' Stopped';
else
label.label = ` ${mpris.trackArtists.join(', ')} - ${mpris.trackTitle}`;
}]],
}),
],
}),
})

View File

@ -0,0 +1,17 @@
export default () => ags.Widget.Box({
className: 'tray',
connections: [[ags.Service.SystemTray, box => {
box.children = ags.Service.SystemTray.items.map(item => ags.Widget.Button({
className: 'tray-icon',
child: ags.Widget.Icon(),
onPrimaryClick: (_, event) => item.activate(event),
onSecondaryClick: (_, event) => item.openMenu(event),
connections: [[item, button => {
button.child.icon = item.icon;
button.tooltipMarkup = item.tooltipMarkup;
}]],
}));
}]],
});

View File

@ -0,0 +1,44 @@
export default () => ags.Widget.Button({
className: 'volume',
onScrollUp: () => ags.Utils.execAsync('pamixer -i 10'),
onScrollDown: () => ags.Utils.execAsync('pamixer -d 10'),
child: ags.Widget.Box({
children: [
ags.Widget.Stack({
items: [
// tuples of [string, Widget]
['101', ags.Widget.Icon('audio-volume-overamplified-symbolic')],
['67', ags.Widget.Icon('audio-volume-high-symbolic')],
['34', ags.Widget.Icon('audio-volume-medium-symbolic')],
['1', ags.Widget.Icon('audio-volume-low-symbolic')],
['0', ags.Widget.Icon('audio-volume-muted-symbolic')],
],
connections: [[ags.Service.Audio, stack => {
if (!ags.Service.Audio.speaker)
return;
if (ags.Service.Audio.speaker.isMuted) {
stack.shown = '0';
return;
}
const show = [101, 67, 34, 1, 0].find(
threshold => threshold <= ags.Service.Audio.speaker.volume * 100);
stack.shown = `${show}`;
}, 'speaker-changed']],
}),
ags.Widget.Label({
connections: [[ags.Service.Audio, label => {
if (!ags.Service.Audio.speaker)
return;
label.label = ` ${Math.ceil((ags.Service.Audio.speaker.volume * 100) / 10) * 10}%`; // round up to nearest 10
}, 'speaker-changed' ]],
}),
],
}),
});

View File

@ -0,0 +1,8 @@
export default () => ags.Widget.Label({
connections: [[ags.Service.Hyprland, label => {
label.label = ags.Service.Hyprland.active.client.title || '';
label.toggleClassName('windowTitle', label.label);
}]],
});

View File

@ -0,0 +1,24 @@
export default monitor => ags.Widget.Box({
className: 'workspaces',
connections: [[ags.Service.Hyprland, box => {
if (monitor == 0) {
box.children = [1,2,3].map(i => ags.Widget.Button({
onClicked: () => ags.Utils.execAsync(`hyprctl dispatch workspace ${i}`),
onScrollDown: () => ags.Utils.execAsync(`hyprctl dispatch workspace +1`),
onScrollUp: () => ags.Utils.execAsync(`hyprctl dispatch workspace -1`),
child: ags.Widget.Label({ label: `${i}` }),
className: ags.Service.Hyprland.active.workspace.id == i ? 'focused' : '',
}));
} else if (monitor == 1) {
box.children = [4,5,6].map(i => ags.Widget.Button({
onClicked: () => ags.Utils.execAsync(`hyprctl dispatch workspace ${i}`),
onScrollDown: () => ags.Utils.execAsync(`hyprctl dispatch workspace +1`),
onScrollUp: () => ags.Utils.execAsync(`hyprctl dispatch workspace -1`),
child: ags.Widget.Label({ label: `${i}` }),
className: ags.Service.Hyprland.active.workspace.id == i ? 'focused' : '',
}));
}
}]],
});

View File

@ -0,0 +1,10 @@
export default () => ags.Widget.Window({
name: `volume-osd`,
className: `osd`,
monitor: null,
focusable: false,
anchor: [ 'center' ],
popup: true,
child: ags.Widget.Label('hello world'),
})

View File

@ -0,0 +1,80 @@
@import './themes/gruvbox.scss';
* {
min-height: unset;
}
.bar {
min-height: 33px;
font-family: "JetBrainsMono Nerd Font";
font-size: 12px;
background-color: $bg;
color: $fg;
}
.workspaces {
background-color: $box-bg;
border-radius: $box-border-radius;
margin: 5px 0px 5px 10px;
font-size: 0px;
}
.workspaces button {
border-radius: 0;
background-color: $wsbg;
font-size: 10px;
}
.workspaces button.focused {
border-radius: 0px;
background-color: $activewsbg;
}
.workspaces button:first-child {
border-radius: $box-border-radius 0px 0px $box-border-radius;
}
.workspaces button:last-child {
border-radius: 0px $box-border-radius $box-border-radius 0px;
}
.windowTitle {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 0px 5px 10px;
}
.volume {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 5px 5px 0px;
}
.media {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 10px 5px 0px;
}
.date {
background-color: $box-bg;
padding: 0px 10px 0px 10px;
border-radius: $box-border-radius;
margin: 5px 10px 5px 0px;
};
.tray {
background-color: $box-bg;
padding: 0px 10px 0px 10px;
border-radius: $box-border-radius;
margin: 5px 10px 5px 0px;
}
.tray-icon {
font-size: 18px;
background-color: $box-bg;
padding: 2px;
}

View File

@ -0,0 +1,7 @@
$bg: rgba(40,40,40,0.8);
$fg: rgb(235,219,178);
$wsfg: rgb(235,219,178);
$wsbg: rgb(60,56,54);
$activewsbg: rgb(102,92,84);
$box-bg: rgb(80,73,69);
$box-border-radius: 10px;

View File

@ -1,89 +1 @@
$bg: rgba(40,40,40,0.8);
$fg: rgb(235,219,178);
$wsfg: rgb(235,219,178);
$wsbg: rgb(60,56,54);
$activewsbg: rgb(102,92,84);
$box-bg: rgb(80,73,69);
$box-border-radius: 10px;
* {
min-height: unset;
}
.bar {
min-height: 33px;
font-family: "JetBrainsMono Nerd Font";
font-size: 12px;
background-color: $bg;
color: $fg;
}
.workspaces {
background-color: $box-bg;
border-radius: $box-border-radius;
margin: 5px 0px 5px 10px;
font-size: 0px;
}
.workspaces button {
border-radius: 0;
background-color: $wsbg;
font-size: 10px;
}
.workspaces button.focused {
border-radius: 0px;
background-color: $activewsbg;
}
.workspaces button:first-child {
border-radius: $box-border-radius 0px 0px $box-border-radius;
}
.workspaces button:last-child {
border-radius: 0px $box-border-radius $box-border-radius 0px;
}
.windowTitle {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 0px 5px 10px;
}
.volume {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 5px 5px 0px;
}
.media {
background-color: $box-bg;
border-radius: $box-border-radius;
padding: 0px 10px 0px 10px;
margin: 5px 10px 5px 0px;
}
.date {
background-color: $box-bg;
padding: 0px 10px 0px 10px;
border-radius: $box-border-radius;
margin: 5px 10px 5px 0px;
};
.tray {
background-color: $box-bg;
padding: 0px 10px 0px 10px;
border-radius: $box-border-radius;
margin: 5px 10px 5px 0px;
}
.tray-icon {
font-size: 18px;
background-color: $box-bg;
padding: 2px;
}
@import './scss/panel.scss';