refactor(ags): make all widgets functions, use export default and some formatting
This commit is contained in:
parent
f6160e3e0b
commit
9b4e7fac44
39 changed files with 797 additions and 694 deletions
|
@ -1,8 +1,8 @@
|
|||
import { App, Applications, Utils, Widget } from '../../imports.js';
|
||||
const { Label, Box, Icon, Button, Scrollable, Entry } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import { PopupWindow } from '../misc/popup.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import PopupWindow from '../misc/popup.js';
|
||||
|
||||
const icons = {
|
||||
apps: {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import { Audio, Widget } from '../../imports.js';
|
||||
const { Label, Box, Icon } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
const items = {
|
||||
101: 'audio-volume-overamplified-symbolic',
|
||||
|
@ -13,36 +13,36 @@ const items = {
|
|||
};
|
||||
|
||||
|
||||
const SpeakerIndicator = params => Icon({
|
||||
...params,
|
||||
const SpeakerIndicator = props => Icon({
|
||||
...props,
|
||||
icon: '',
|
||||
connections: [[Audio, icon => {
|
||||
if (Audio.speaker) {
|
||||
connections: [[Audio, self => {
|
||||
if (!Audio.speaker)
|
||||
return;
|
||||
|
||||
if (Audio.speaker.stream.isMuted) {
|
||||
icon.icon = items[0];
|
||||
self.icon = items[0];
|
||||
}
|
||||
else {
|
||||
const vol = Audio.speaker.volume * 100;
|
||||
|
||||
for (const threshold of [-1, 0, 33, 66, 100]) {
|
||||
if (vol > threshold + 1) {
|
||||
icon.icon = items[threshold + 1];
|
||||
}
|
||||
}
|
||||
if (vol > threshold + 1)
|
||||
self.icon = items[threshold + 1];
|
||||
}
|
||||
}
|
||||
}, 'speaker-changed']],
|
||||
});
|
||||
|
||||
const SpeakerPercentLabel = params => Label({
|
||||
...params,
|
||||
const SpeakerPercentLabel = props => Label({
|
||||
...props,
|
||||
connections: [[Audio, label => {
|
||||
if (Audio.speaker) {
|
||||
if (Audio.speaker)
|
||||
label.label = Math.round(Audio.speaker.volume * 100) + '%';
|
||||
}
|
||||
}, 'speaker-changed']],
|
||||
});
|
||||
|
||||
export const AudioIndicator = EventBox({
|
||||
export default () => EventBox({
|
||||
onPrimaryClickRelease: 'pavucontrol',
|
||||
className: 'toggle-off',
|
||||
child: Box({
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { Battery, Widget } from '../../imports.js';
|
||||
const { Label, Icon, Stack, Box } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
|
||||
const icons = charging => ([
|
||||
...Array.from({ length: 10 }, (_, i) => i * 10).map(i => ([
|
||||
|
@ -27,9 +27,9 @@ const Indicators = charging => Stack({
|
|||
const Indicator = ({
|
||||
charging = Indicators(true),
|
||||
discharging = Indicators(false),
|
||||
...params
|
||||
...props
|
||||
} = {}) => Stack({
|
||||
...params,
|
||||
...props,
|
||||
className: 'battery-indicator',
|
||||
items: [
|
||||
['true', charging],
|
||||
|
@ -43,13 +43,13 @@ const Indicator = ({
|
|||
}]],
|
||||
});
|
||||
|
||||
const LevelLabel = params => Label({
|
||||
...params,
|
||||
const LevelLabel = props => Label({
|
||||
...props,
|
||||
className: 'label',
|
||||
connections: [[Battery, label => label.label = `${Battery.percent}%`]],
|
||||
connections: [[Battery, self => self.label = `${Battery.percent}%`]],
|
||||
});
|
||||
|
||||
export const BatteryIndicator = Box({
|
||||
export default () => Box({
|
||||
className: 'toggle-off battery',
|
||||
children: [
|
||||
Indicator(),
|
||||
|
|
|
@ -1,25 +1,23 @@
|
|||
import { Utils, Widget } from '../../imports.js';
|
||||
const { ProgressBar, Overlay, Box } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import { Heart } from './heart.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import Heart from './heart.js';
|
||||
|
||||
|
||||
export const Brightness = Overlay({
|
||||
setup: widget => {
|
||||
widget.set_tooltip_text('Brightness');
|
||||
},
|
||||
export default () => Overlay({
|
||||
tooltipText: 'Brightness',
|
||||
child: ProgressBar({
|
||||
className: 'toggle-off brightness',
|
||||
connections: [
|
||||
[200, progress => {
|
||||
[200, self => {
|
||||
Utils.execAsync('brightnessctl get').then(out => {
|
||||
let br = out / 255;
|
||||
if (br > 0.33) {
|
||||
progress.value = br;
|
||||
self.value = br;
|
||||
}
|
||||
else {
|
||||
progress.value = 0.33;
|
||||
self.value = 0.33;
|
||||
}
|
||||
}).catch(print);
|
||||
}],
|
||||
|
@ -30,7 +28,7 @@ export const Brightness = Overlay({
|
|||
style: 'color: #CBA6F7;',
|
||||
children: [
|
||||
Separator(25),
|
||||
Heart,
|
||||
Heart(),
|
||||
],
|
||||
}),
|
||||
],
|
||||
|
|
|
@ -4,30 +4,32 @@ const { Box, Label } = Widget;
|
|||
import GLib from 'gi://GLib';
|
||||
const { DateTime } = GLib;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
const ClockModule = ({
|
||||
interval = 1000,
|
||||
...params
|
||||
...props
|
||||
}) => Label({
|
||||
...params,
|
||||
...props,
|
||||
className: 'clock',
|
||||
connections: [
|
||||
[interval, label => {
|
||||
[interval, self => {
|
||||
var time = DateTime.new_now_local();
|
||||
label.label = time.format('%a. ') + time.get_day_of_month() + time.format(' %b. %H:%M');
|
||||
self.label = time.format('%a. ') +
|
||||
time.get_day_of_month() +
|
||||
time.format(' %b. %H:%M');
|
||||
}],
|
||||
],
|
||||
});
|
||||
|
||||
export const Clock = EventBox({
|
||||
export default () => EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: () => App.toggleWindow('calendar'),
|
||||
connections: [
|
||||
[App, (box, windowName, visible) => {
|
||||
[App, (self, windowName, visible) => {
|
||||
if (windowName == 'calendar') {
|
||||
box.toggleClassName('toggle-on', visible);
|
||||
self.toggleClassName('toggle-on', visible);
|
||||
}
|
||||
}],
|
||||
],
|
||||
|
|
|
@ -2,12 +2,8 @@ import { Widget, Hyprland } from '../../imports.js';
|
|||
const { Label } = Widget;
|
||||
|
||||
|
||||
export const CurrentWindow = Label({
|
||||
export default () => Label({
|
||||
style: 'color: #CBA6F7; font-size: 18px',
|
||||
truncate: 'end',
|
||||
connections: [
|
||||
[Hyprland, label => {
|
||||
label.label = Hyprland.active.client.title;
|
||||
}, 'changed'],
|
||||
],
|
||||
binds: [['label', Hyprland.active.client, 'title']],
|
||||
});
|
||||
|
|
|
@ -4,19 +4,14 @@ const { Box, EventBox, Overlay } = Widget;
|
|||
const Revealed = Variable(true);
|
||||
const Hovering = Variable(false);
|
||||
|
||||
import { Gesture } from './gesture.js';
|
||||
import { RoundedCorner } from '../screen-corners.js';
|
||||
import Gesture from './gesture.js';
|
||||
|
||||
|
||||
export const Revealer = params => Overlay({
|
||||
export default (props) => Overlay({
|
||||
overlays: [
|
||||
RoundedCorner('topleft', {
|
||||
className: 'corner',
|
||||
}),
|
||||
|
||||
RoundedCorner('topright', {
|
||||
className: 'corner',
|
||||
}),
|
||||
RoundedCorner('topleft', { className: 'corner' }),
|
||||
RoundedCorner('topright', { className: 'corner' }),
|
||||
],
|
||||
|
||||
child: Box({
|
||||
|
@ -27,14 +22,14 @@ export const Revealer = params => Overlay({
|
|||
Widget.Revealer({
|
||||
transition: 'slide_down',
|
||||
setup: self => self.revealChild = true,
|
||||
properties: [
|
||||
['timeouts', []],
|
||||
],
|
||||
|
||||
properties: [['timeouts', []]],
|
||||
connections: [[Hyprland, self => {
|
||||
Utils.execAsync('hyprctl activewindow -j')
|
||||
.then(result => {
|
||||
let client = JSON.parse(result);
|
||||
if (client.fullscreen !== Revealed.value) {
|
||||
Utils.execAsync('hyprctl activewindow -j').then(out => {
|
||||
let client = JSON.parse(out);
|
||||
if (client.fullscreen === Revealed.value)
|
||||
return;
|
||||
|
||||
Revealed.value = client.fullscreen;
|
||||
|
||||
if (Revealed.value) {
|
||||
|
@ -46,7 +41,6 @@ export const Revealer = params => Overlay({
|
|||
else {
|
||||
self.revealChild = true;
|
||||
}
|
||||
}
|
||||
}).catch(print);
|
||||
}]],
|
||||
|
||||
|
@ -63,7 +57,7 @@ export const Revealer = params => Overlay({
|
|||
}, 2000);
|
||||
}
|
||||
},
|
||||
...params,
|
||||
...props,
|
||||
}),
|
||||
}),
|
||||
|
||||
|
|
|
@ -4,30 +4,25 @@ const { CenterBox, EventBox } = Widget;
|
|||
import Gtk from 'gi://Gtk';
|
||||
|
||||
|
||||
export const Gesture = ({
|
||||
export default ({
|
||||
child,
|
||||
...params
|
||||
...props
|
||||
}) => {
|
||||
let w = EventBox({
|
||||
...params,
|
||||
let widget = EventBox({
|
||||
...props,
|
||||
});
|
||||
|
||||
let gesture = Gtk.GestureSwipe.new(w);
|
||||
let gesture = Gtk.GestureSwipe.new(widget);
|
||||
|
||||
w.child = CenterBox({
|
||||
children: [
|
||||
child,
|
||||
],
|
||||
connections: [
|
||||
|
||||
[gesture, _ => {
|
||||
widget.child = CenterBox({
|
||||
children: [ child ],
|
||||
connections: [[gesture, () => {
|
||||
const velocity = gesture.get_velocity()[1];
|
||||
if (velocity < -100)
|
||||
App.openWindow('quick-settings');
|
||||
}, 'update'],
|
||||
|
||||
],
|
||||
}, 'update']],
|
||||
});
|
||||
|
||||
return w;
|
||||
return widget;
|
||||
};
|
||||
|
|
|
@ -2,26 +2,28 @@ import { Utils, Widget } from '../../imports.js';
|
|||
const { Box, Label } = Widget;
|
||||
const { subprocess, execAsync } = Utils;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
subprocess(
|
||||
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
|
||||
(output) => {
|
||||
Heart.child.children[0].label = ' ' + output;
|
||||
},
|
||||
);
|
||||
export const Heart = EventBox({
|
||||
export default () => EventBox({
|
||||
halign: 'center',
|
||||
|
||||
onPrimaryClickRelease: () => {
|
||||
execAsync(['bash', '-c', '$AGS_PATH/heart.sh toggle']).catch(print);
|
||||
},
|
||||
|
||||
child: Box({
|
||||
className: 'heart-toggle',
|
||||
vertical: false,
|
||||
|
||||
child: Label({
|
||||
label: '',
|
||||
setup: self => {
|
||||
subprocess(
|
||||
['bash', '-c', 'tail -f /home/matt/.config/.heart'],
|
||||
(output) => self.label = ' ' + output,
|
||||
);
|
||||
},
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
|
|
@ -3,7 +3,7 @@ const { Label, Box, Icon } = Widget;
|
|||
|
||||
const DEFAULT_KB = "at-translated-set-2-keyboard";
|
||||
|
||||
export default Box({
|
||||
export default () => Box({
|
||||
className: 'toggle-off',
|
||||
children: [
|
||||
Icon({
|
||||
|
|
|
@ -1,19 +1,19 @@
|
|||
import { Widget } from '../../imports.js';
|
||||
const { Window, CenterBox, Box } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import { CurrentWindow } from './current-window.js';
|
||||
import { Workspaces } from './workspaces.js';
|
||||
import { OskToggle } from './osk-toggle.js';
|
||||
import { TabletToggle } from './tablet-toggle.js';
|
||||
import { QsToggle } from './quick-settings.js';
|
||||
import { NotifButton } from './notif-button.js';
|
||||
import { Clock } from './clock.js';
|
||||
import { SysTray } from './systray.js';
|
||||
import { BatteryIndicator } from './battery.js';
|
||||
import { Brightness } from './brightness.js';
|
||||
import { AudioIndicator } from './audio.js';
|
||||
import { Revealer } from './fullscreen.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import CurrentWindow from './current-window.js';
|
||||
import Workspaces from './workspaces.js';
|
||||
import OskToggle from './osk-toggle.js';
|
||||
import TabletToggle from './tablet-toggle.js';
|
||||
import QsToggle from './quick-settings.js';
|
||||
import NotifButton from './notif-button.js';
|
||||
import Clock from './clock.js';
|
||||
import SysTray from './systray.js';
|
||||
import Battery from './battery.js';
|
||||
import Brightness from './brightness.js';
|
||||
import Audio from './audio.js';
|
||||
import Revealer from './fullscreen.js';
|
||||
//import KeyboardLayout from './keyboard-layout.js';
|
||||
|
||||
|
||||
|
@ -31,55 +31,55 @@ export const Bar = () => Window({
|
|||
halign: 'start',
|
||||
children: [
|
||||
|
||||
OskToggle,
|
||||
OskToggle(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
TabletToggle,
|
||||
TabletToggle(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
SysTray,
|
||||
SysTray(),
|
||||
|
||||
AudioIndicator,
|
||||
Audio(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
Brightness,
|
||||
Brightness(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
Workspaces,
|
||||
Workspaces(),
|
||||
|
||||
],
|
||||
}),
|
||||
|
||||
centerWidget: Box({
|
||||
children: [
|
||||
CurrentWindow,
|
||||
CurrentWindow(),
|
||||
],
|
||||
}),
|
||||
|
||||
endWidget: Box({
|
||||
halign: 'end',
|
||||
children: [
|
||||
BatteryIndicator,
|
||||
Battery(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
//KeyboardLayout,
|
||||
//KeyboardLayout(),
|
||||
|
||||
//Separator(12),
|
||||
|
||||
Clock,
|
||||
Clock(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
NotifButton,
|
||||
NotifButton(),
|
||||
|
||||
Separator(12),
|
||||
|
||||
QsToggle,
|
||||
QsToggle(),
|
||||
],
|
||||
}),
|
||||
}),
|
||||
|
|
|
@ -1,20 +1,17 @@
|
|||
import { App, Notifications, Widget } from '../../imports.js';
|
||||
const { Box, Label, Icon } = Widget;
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
export const NotifButton = EventBox({
|
||||
export default () => EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: () => App.toggleWindow('notification-center'),
|
||||
connections: [
|
||||
[App, (box, windowName, visible) => {
|
||||
if (windowName == 'notification-center') {
|
||||
box.toggleClassName('toggle-on', visible);
|
||||
}
|
||||
}],
|
||||
],
|
||||
connections: [[App, (self, windowName, visible) => {
|
||||
if (windowName == 'notification-center')
|
||||
self.toggleClassName('toggle-on', visible);
|
||||
}]],
|
||||
child: Box({
|
||||
className: 'notif-panel',
|
||||
vertical: false,
|
||||
|
@ -22,30 +19,26 @@ export const NotifButton = EventBox({
|
|||
Separator(28),
|
||||
|
||||
Icon({
|
||||
connections: [
|
||||
[Notifications, icon => {
|
||||
connections: [[Notifications, self => {
|
||||
if (Notifications.dnd) {
|
||||
icon.icon = 'notification-disabled-symbolic'
|
||||
self.icon = 'notification-disabled-symbolic'
|
||||
}
|
||||
else {
|
||||
if (Notifications.notifications.length > 0) {
|
||||
icon.icon = 'notification-new-symbolic'
|
||||
self.icon = 'notification-new-symbolic'
|
||||
}
|
||||
else {
|
||||
icon.icon = 'notification-symbolic'
|
||||
self.icon = 'notification-symbolic'
|
||||
}
|
||||
}
|
||||
}],
|
||||
],
|
||||
}]],
|
||||
}),
|
||||
|
||||
Separator(8),
|
||||
|
||||
Label({
|
||||
connections: [
|
||||
[Notifications, label => {
|
||||
label.label = String(Notifications.notifications.length);
|
||||
}],
|
||||
binds: [
|
||||
['label', Notifications, 'notifications', n => String(n.length)],
|
||||
],
|
||||
}),
|
||||
|
||||
|
|
|
@ -2,33 +2,25 @@ import { Utils, Widget } from '../../imports.js';
|
|||
const { Box, Label } = Widget;
|
||||
const { subprocess } = Utils;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
subprocess(
|
||||
['bash', '-c', '$AGS_PATH/osk-toggle.sh getState'],
|
||||
(output) => {
|
||||
if (output == 'Running') {
|
||||
OskToggle.toggleClassName('toggle-on', true);
|
||||
} else {
|
||||
OskToggle.toggleClassName('toggle-on', false);
|
||||
}
|
||||
},
|
||||
);
|
||||
export const OskToggle = EventBox({
|
||||
export default () => EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: function() {
|
||||
setup: self => {
|
||||
subprocess(
|
||||
['bash', '-c', '$AGS_PATH/osk-toggle.sh toggle'],
|
||||
(output) => {
|
||||
if (output == 'Running') {
|
||||
OskToggle.toggleClassName('toggle-on', false);
|
||||
} else {
|
||||
OskToggle.toggleClassName('toggle-on', true);
|
||||
}
|
||||
},
|
||||
['bash', '-c', '$AGS_PATH/osk-toggle.sh getState'],
|
||||
(output) => self.toggleClassName('toggle-on', output === 'Running'),
|
||||
);
|
||||
},
|
||||
|
||||
onPrimaryClickRelease: self => {
|
||||
subprocess(
|
||||
['bash', '-c', '$AGS_PATH/osk-toggle.sh toggle'],
|
||||
(output) => self.toggleClassName('toggle-on', output !== 'Running'),
|
||||
);
|
||||
},
|
||||
|
||||
child: Box({
|
||||
className: 'osk-toggle',
|
||||
vertical: false,
|
||||
|
|
|
@ -1,19 +1,16 @@
|
|||
import { Widget, App } from '../../imports.js';
|
||||
const { Box, Label } = Widget;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
export const QsToggle = EventBox({
|
||||
export default () => EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: () => App.toggleWindow('quick-settings'),
|
||||
connections: [
|
||||
[App, (box, windowName, visible) => {
|
||||
if (windowName == 'quick-settings') {
|
||||
box.toggleClassName('toggle-on', visible);
|
||||
}
|
||||
}],
|
||||
],
|
||||
connections: [[App, (self, windowName, visible) => {
|
||||
if (windowName == 'quick-settings')
|
||||
self.toggleClassName('toggle-on', visible);
|
||||
}]],
|
||||
child: Box({
|
||||
className: 'quick-settings-toggle',
|
||||
vertical: false,
|
||||
|
|
|
@ -3,7 +3,7 @@ const { Box, Revealer, Icon, MenuItem } = Widget;
|
|||
|
||||
import Gtk from 'gi://Gtk';
|
||||
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
|
||||
|
||||
const SysTrayItem = item => MenuItem({
|
||||
|
@ -21,7 +21,7 @@ const SysTrayItem = item => MenuItem({
|
|||
}]]
|
||||
});
|
||||
|
||||
export const SysTray = Revealer({
|
||||
export default () => Revealer({
|
||||
transition: 'slide_right',
|
||||
connections: [[SystemTray, rev => {
|
||||
rev.revealChild = rev.child.children[0].get_children().length > 0;
|
||||
|
|
|
@ -2,22 +2,15 @@ import { Utils, Widget } from '../../imports.js';
|
|||
const { Box, Label } = Widget;
|
||||
const { subprocess } = Utils;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
export const TabletToggle = EventBox({
|
||||
export default () => EventBox({
|
||||
className: 'toggle-off',
|
||||
onPrimaryClickRelease: function() {
|
||||
onPrimaryClickRelease: self => {
|
||||
subprocess(
|
||||
['bash', '-c', '$AGS_PATH/tablet-toggle.sh toggle'],
|
||||
(output) => {
|
||||
print(output)
|
||||
if (output == 'Tablet') {
|
||||
TabletToggle.toggleClassName('toggle-on', true);
|
||||
} else {
|
||||
TabletToggle.toggleClassName('toggle-on', false);
|
||||
}
|
||||
},
|
||||
(output) => self.toggleClassName('toggle-on', output == 'Tablet'),
|
||||
);
|
||||
},
|
||||
child: Box({
|
||||
|
|
|
@ -1,69 +1,69 @@
|
|||
import { Hyprland, Utils, Widget } from '../../imports.js';
|
||||
const { Box, Label, Revealer } = Widget;
|
||||
const { Box, Revealer } = Widget;
|
||||
const { execAsync } = Utils;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
const Workspace = ({ i } = {}) =>
|
||||
Revealer({
|
||||
transition: "slide_right",
|
||||
properties: [
|
||||
['id', i],
|
||||
],
|
||||
properties: [['id', i]],
|
||||
|
||||
child: EventBox({
|
||||
tooltipText: `${i}`,
|
||||
onPrimaryClickRelease: () => execAsync(`hyprctl dispatch workspace ${i}`).catch(print),
|
||||
onPrimaryClickRelease: () => {
|
||||
execAsync(`hyprctl dispatch workspace ${i}`)
|
||||
.catch(print);
|
||||
},
|
||||
child: Box({
|
||||
className: 'button',
|
||||
connections: [
|
||||
[Hyprland, btn => {
|
||||
connections: [[Hyprland, self => {
|
||||
const occupied = Hyprland.getWorkspace(i)?.windows > 0;
|
||||
btn.toggleClassName('active', Hyprland.active.workspace.id === i);
|
||||
btn.toggleClassName('occupied', occupied);
|
||||
btn.toggleClassName('empty', !occupied);
|
||||
}]
|
||||
],
|
||||
self.toggleClassName('active', Hyprland.active.workspace.id === i);
|
||||
self.toggleClassName('occupied', occupied);
|
||||
self.toggleClassName('empty', !occupied);
|
||||
}]],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
|
||||
export const Workspaces = Box({
|
||||
export default () => Box({
|
||||
className: 'workspaces',
|
||||
children: [EventBox({
|
||||
child: Box({
|
||||
properties: [
|
||||
['workspaces'],
|
||||
|
||||
['refresh', box => {
|
||||
box.children.forEach(rev => rev.reveal_child = false);
|
||||
box._workspaces.forEach(ws => {
|
||||
['refresh', self => {
|
||||
self.children.forEach(rev => rev.reveal_child = false);
|
||||
self._workspaces.forEach(ws => {
|
||||
ws.revealChild = true;
|
||||
});
|
||||
}],
|
||||
|
||||
['updateWs', box => {
|
||||
['updateWs', self => {
|
||||
Hyprland.workspaces.forEach(ws => {
|
||||
let currentWs = box.children.find(ch => ch._id == ws.id);
|
||||
let currentWs = self.children.find(ch => ch._id == ws.id);
|
||||
if (!currentWs && ws.id > 0) {
|
||||
box.add(Workspace({ i: ws.id}));
|
||||
self.add(Workspace({ i: ws.id}));
|
||||
}
|
||||
});
|
||||
box.show_all();
|
||||
self.show_all();
|
||||
|
||||
// Make sure the order is correct
|
||||
box._workspaces.forEach((workspace, i) => {
|
||||
self._workspaces.forEach((workspace, i) => {
|
||||
workspace.get_parent().reorder_child(workspace, i);
|
||||
});
|
||||
}],
|
||||
],
|
||||
connections: [[Hyprland, box => {
|
||||
box._workspaces = box.children.filter(ch => {
|
||||
connections: [[Hyprland, self => {
|
||||
self._workspaces = self.children.filter(ch => {
|
||||
return Hyprland.workspaces.find(ws => ws.id == ch._id)
|
||||
}).sort((a, b) => a._id - b._id);
|
||||
|
||||
box._updateWs(box);
|
||||
box._refresh(box);
|
||||
self._updateWs(self);
|
||||
self._refresh(self);
|
||||
}]],
|
||||
}),
|
||||
})],
|
||||
|
|
|
@ -5,7 +5,7 @@ import Gtk from 'gi://Gtk';
|
|||
import GLib from 'gi://GLib';
|
||||
const { DateTime } = GLib;
|
||||
|
||||
import { PopupWindow } from './misc/popup.js';
|
||||
import PopupWindow from './misc/popup.js';
|
||||
|
||||
|
||||
const Divider = () => Box({
|
||||
|
@ -27,8 +27,8 @@ const Time = () => Box({
|
|||
Label({
|
||||
className: 'content',
|
||||
label: 'hour',
|
||||
connections: [[1000, label => {
|
||||
label.label = DateTime.new_now_local().format('%H');
|
||||
connections: [[1000, self => {
|
||||
self.label = DateTime.new_now_local().format('%H');
|
||||
}]],
|
||||
}),
|
||||
|
||||
|
@ -37,8 +37,8 @@ const Time = () => Box({
|
|||
Label({
|
||||
className: 'content',
|
||||
label: 'minute',
|
||||
connections: [[1000, label => {
|
||||
label.label = DateTime.new_now_local().format('%M');
|
||||
connections: [[1000, self => {
|
||||
self.label = DateTime.new_now_local().format('%M');
|
||||
}]],
|
||||
}),
|
||||
|
||||
|
@ -51,9 +51,11 @@ const Time = () => Box({
|
|||
child: Label({
|
||||
style: 'font-size: 20px',
|
||||
label: 'complete date',
|
||||
connections: [[1000, label => {
|
||||
connections: [[1000, self => {
|
||||
var time = DateTime.new_now_local();
|
||||
label.label = time.format("%A, %B ") + time.get_day_of_month() + time.format(", %Y");
|
||||
self.label = time.format("%A, %B ") +
|
||||
time.get_day_of_month() +
|
||||
time.format(", %Y");
|
||||
}]],
|
||||
}),
|
||||
}),
|
||||
|
@ -68,7 +70,6 @@ const CalendarWidget = () => Box({
|
|||
showDayNames: true,
|
||||
showHeading: true,
|
||||
className: 'cal',
|
||||
connections: [/* */]
|
||||
}),
|
||||
});
|
||||
|
||||
|
|
|
@ -8,12 +8,12 @@ const OFFSCREEN = 500;
|
|||
const TRANSITION = 'transition: margin 0.5s ease, opacity 3s ease;';
|
||||
|
||||
|
||||
export default ({ properties, connections, params } = {}) => {
|
||||
export default ({ properties, connections, props } = {}) => {
|
||||
let widget = EventBox();
|
||||
let gesture = Gtk.GestureDrag.new(widget)
|
||||
|
||||
widget.child = Overlay({
|
||||
...params,
|
||||
...props,
|
||||
properties: [
|
||||
...properties,
|
||||
['dragging', false],
|
||||
|
|
|
@ -5,8 +5,8 @@ const { execAsync, lookUpIcon } = Utils;
|
|||
import Gdk from 'gi://Gdk';
|
||||
const display = Gdk.Display.get_default();
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
const icons = {
|
||||
mpris: {
|
||||
|
@ -29,34 +29,35 @@ const icons = {
|
|||
}
|
||||
|
||||
|
||||
export const CoverArt = (player, params) => CenterBox({
|
||||
...params,
|
||||
export const CoverArt = (player, props) => CenterBox({
|
||||
...props,
|
||||
vertical: true,
|
||||
properties: [['bgStyle', '']],
|
||||
connections: [
|
||||
[player, box => {
|
||||
execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] && coloryou "${player.coverPath}" | grep -v Warning`])
|
||||
connections: [[player, self => {
|
||||
execAsync(['bash', '-c', `[[ -f "${player.coverPath}" ]] &&
|
||||
coloryou "${player.coverPath}" | grep -v Warning`])
|
||||
.then(out => {
|
||||
if (!Mpris.players.find(p => player === p))
|
||||
return;
|
||||
|
||||
player.colors.value = JSON.parse(out);
|
||||
|
||||
box._bgStyle = `background: radial-gradient(circle,
|
||||
self._bgStyle = `background: radial-gradient(circle,
|
||||
rgba(0, 0, 0, 0.4) 30%,
|
||||
${player.colors.value.imageAccent}),
|
||||
url("${player.coverPath}");
|
||||
background-size: cover;
|
||||
background-position: center;`;
|
||||
if (!box.get_parent()._dragging)
|
||||
box.setStyle(box._bgStyle);
|
||||
}).catch(err => { if (err !== "") print(err) });
|
||||
}],
|
||||
],
|
||||
|
||||
if (!self.get_parent()._dragging)
|
||||
self.setStyle(self._bgStyle);
|
||||
|
||||
}).catch(err => {if (err !== "") print(err)});
|
||||
}]],
|
||||
});
|
||||
|
||||
export const TitleLabel = (player, params) => Label({
|
||||
...params,
|
||||
export const TitleLabel = (player, props) => Label({
|
||||
...props,
|
||||
xalign: 0,
|
||||
maxWidthChars: 40,
|
||||
truncate: 'end',
|
||||
|
@ -65,8 +66,8 @@ export const TitleLabel = (player, params) => Label({
|
|||
binds: [['label', player, 'track-title']],
|
||||
});
|
||||
|
||||
export const ArtistLabel = (player, params) => Label({
|
||||
...params,
|
||||
export const ArtistLabel = (player, props) => Label({
|
||||
...props,
|
||||
xalign: 0,
|
||||
maxWidthChars: 40,
|
||||
truncate: 'end',
|
||||
|
@ -75,27 +76,29 @@ export const ArtistLabel = (player, params) => Label({
|
|||
binds: [['label', player, 'track-artists', a => a.join(', ') || '']],
|
||||
});
|
||||
|
||||
export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => {
|
||||
export const PlayerIcon = (player, { symbolic = true, ...props } = {}) => {
|
||||
let MainIcon = Icon({
|
||||
...params,
|
||||
...props,
|
||||
className: 'player-icon',
|
||||
size: 32,
|
||||
tooltipText: player.identity || '',
|
||||
connections: [
|
||||
[player, icon => {
|
||||
connections: [[player, self => {
|
||||
const name = `${player.entry}${symbolic ? '-symbolic' : ''}`;
|
||||
lookUpIcon(name) ? icon.icon = name
|
||||
: icon.icon = icons.mpris.fallback;
|
||||
}],
|
||||
],
|
||||
lookUpIcon(name) ? self.icon = name
|
||||
: self.icon = icons.mpris.fallback;
|
||||
}]],
|
||||
});
|
||||
|
||||
return Box({
|
||||
connections: [
|
||||
[Mpris, box => {
|
||||
let overlays = box.get_parent().get_parent().get_parent().list();
|
||||
let player = overlays.find(overlay => overlay === box.get_parent().get_parent());
|
||||
let index = overlays.indexOf(player)
|
||||
connections: [[Mpris, self => {
|
||||
let overlays = self.get_parent().get_parent()
|
||||
.get_parent().list();
|
||||
|
||||
let player = overlays.find(overlay => {
|
||||
overlay === self.get_parent().get_parent();
|
||||
});
|
||||
|
||||
let index = overlays.indexOf(player);
|
||||
|
||||
let children = [];
|
||||
for (let i = 0; i < overlays.length; ++i) {
|
||||
|
@ -104,33 +107,34 @@ export const PlayerIcon = (player, { symbolic = true, ...params } = {}) => {
|
|||
children.push(Separator(2));
|
||||
}
|
||||
else {
|
||||
children.push(Box({ className: 'position-indicator' }));
|
||||
children.push(Box({className: 'position-indicator'}));
|
||||
children.push(Separator(2));
|
||||
}
|
||||
}
|
||||
box.children = children;
|
||||
}],
|
||||
],
|
||||
self.children = children;
|
||||
}]],
|
||||
});
|
||||
}
|
||||
|
||||
export const PositionSlider = (player, params) => EventBox({
|
||||
// FIXME: get the cursors right or just don't display when disabled
|
||||
export const PositionSlider = (player, props) => EventBox({
|
||||
child: Slider({
|
||||
...params,
|
||||
...props,
|
||||
className: 'position-slider',
|
||||
hexpand: true,
|
||||
drawValue: false,
|
||||
onChange: ({ value }) => {
|
||||
player.position = player.length * value;
|
||||
},
|
||||
properties: [
|
||||
['update', slider => {
|
||||
properties: [['update', slider => {
|
||||
if (slider.dragging) {
|
||||
slider.get_parent().window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
|
||||
slider.get_parent().window.set_cursor(Gdk.Cursor
|
||||
.new_from_name(display, 'grabbing'));
|
||||
}
|
||||
else {
|
||||
if (slider.get_parent() && slider.get_parent().window) {
|
||||
slider.get_parent().window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
slider.get_parent().window.set_cursor(Gdk.Cursor
|
||||
.new_from_name(display, 'pointer'));
|
||||
}
|
||||
|
||||
slider.sensitive = player.length > 0;
|
||||
|
@ -138,17 +142,17 @@ export const PositionSlider = (player, params) => EventBox({
|
|||
slider.value = player.position / player.length;
|
||||
}
|
||||
}
|
||||
}],
|
||||
],
|
||||
}]],
|
||||
connections: [
|
||||
[player, s => s._update(s), 'position'],
|
||||
[1000, s => s._update(s)],
|
||||
[player.colors, s => {
|
||||
if (player.colors.value)
|
||||
s.setCss(`highlight { background-color: ${player.colors.value.buttonAccent}; }
|
||||
slider { background-color: ${player.colors.value.buttonAccent}; }
|
||||
slider:hover { background-color: ${player.colors.value.hoverAccent}; }
|
||||
trough { background-color: ${player.colors.value.buttonText}; }`);
|
||||
let c = player.colors.value;
|
||||
if (c)
|
||||
s.setCss(`highlight { background-color: ${c.buttonAccent}; }
|
||||
slider { background-color: ${c.buttonAccent}; }
|
||||
slider:hover { background-color: ${c.hoverAccent}; }
|
||||
trough { background-color: ${c.buttonText}; }`);
|
||||
}],
|
||||
],
|
||||
}),
|
||||
|
@ -162,9 +166,9 @@ function lengthStr(length) {
|
|||
}
|
||||
|
||||
export const PositionLabel = player => Label({
|
||||
properties: [['update', label => {
|
||||
player.length > 0 ? label.label = lengthStr(player.position)
|
||||
: label.visible = !!player;
|
||||
properties: [['update', self => {
|
||||
player.length > 0 ? self.label = lengthStr(player.position)
|
||||
: self.visible = !!player;
|
||||
}]],
|
||||
connections: [
|
||||
[player, l => l._update(l), 'position'],
|
||||
|
@ -173,16 +177,16 @@ export const PositionLabel = player => Label({
|
|||
});
|
||||
|
||||
export const LengthLabel = player => Label({
|
||||
connections: [[player, label => {
|
||||
player.length > 0 ? label.label = lengthStr(player.length)
|
||||
: label.visible = !!player;
|
||||
connections: [[player, self => {
|
||||
player.length > 0 ? self.label = lengthStr(player.length)
|
||||
: self.visible = !!player;
|
||||
}]],
|
||||
});
|
||||
|
||||
export const Slash = player => Label({
|
||||
label: '/',
|
||||
connections: [[player, label => {
|
||||
label.visible = player.length > 0;
|
||||
connections: [[player, self => {
|
||||
self.visible = player.length > 0;
|
||||
}]],
|
||||
});
|
||||
|
||||
|
@ -191,13 +195,13 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
|
|||
child: Stack({ items }),
|
||||
onPrimaryClickRelease: () => player[onClick](),
|
||||
properties: [['hovered', false]],
|
||||
onHover: box => {
|
||||
box._hovered = true;
|
||||
if (! box.child.sensitive || ! box.sensitive) {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
onHover: self => {
|
||||
self._hovered = true;
|
||||
if (! self.child.sensitive || ! self.sensitive) {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
}
|
||||
else {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
}
|
||||
|
||||
if (prop == 'playBackStatus') {
|
||||
|
@ -209,9 +213,9 @@ const PlayerButton = ({ player, items, onClick, prop }) => Button({
|
|||
});
|
||||
}
|
||||
},
|
||||
onHoverLost: box => {
|
||||
box._hovered = false;
|
||||
box.window.set_cursor(null);
|
||||
onHoverLost: self => {
|
||||
self._hovered = false;
|
||||
self.window.set_cursor(null);
|
||||
if (prop == 'playBackStatus') {
|
||||
items.forEach(item => {
|
||||
item[1].setStyle(`background-color: ${player.colors.value.buttonAccent};
|
||||
|
|
|
@ -3,7 +3,9 @@ const { Box, CenterBox, Label } = Widget;
|
|||
|
||||
import * as mpris from './mpris.js';
|
||||
import PlayerGesture from './gesture.js';
|
||||
import { Separator } from '../misc/separator.js';
|
||||
import Separator from '../misc/separator.js';
|
||||
|
||||
const FAVE_PLAYER = 'org.mpris.MediaPlayer2.spotify';
|
||||
|
||||
|
||||
const Top = player => Box({
|
||||
|
@ -56,20 +58,22 @@ const Center = player => Box({
|
|||
const Bottom = player => Box({
|
||||
className: 'bottom',
|
||||
children: [
|
||||
|
||||
mpris.PreviousButton(player, {
|
||||
valign: 'end',
|
||||
halign: 'start',
|
||||
}),
|
||||
Separator(8),
|
||||
|
||||
mpris.PositionSlider(player),
|
||||
Separator(8),
|
||||
|
||||
mpris.NextButton(player),
|
||||
Separator(8),
|
||||
|
||||
mpris.ShuffleButton(player),
|
||||
Separator(8),
|
||||
mpris.LoopButton(player),
|
||||
|
||||
mpris.LoopButton(player),
|
||||
],
|
||||
});
|
||||
|
||||
|
@ -98,11 +102,13 @@ export default () => Box({
|
|||
|
||||
if (!busName) {
|
||||
let player = Mpris.players.find(p => !overlay._players.has(p.busName));
|
||||
if (player)
|
||||
if (player) {
|
||||
busName = player.busName;
|
||||
else
|
||||
}
|
||||
else {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const player = Mpris.getPlayer(busName);
|
||||
player.colors = Variable();
|
||||
|
@ -115,18 +121,20 @@ export default () => Box({
|
|||
|
||||
overlay.overlays = result;
|
||||
|
||||
// Favor spotify
|
||||
// Select favorite player at startup
|
||||
if (!overlay._setup) {
|
||||
if (overlay._players.has('org.mpris.MediaPlayer2.spotify')) {
|
||||
overlay._selected = overlay._players.get('org.mpris.MediaPlayer2.spotify');
|
||||
if (overlay._players.has(FAVE_PLAYER)) {
|
||||
overlay._selected = overlay._players.get(FAVE_PLAYER);
|
||||
}
|
||||
overlay._setup = true;
|
||||
}
|
||||
|
||||
if (overlay._selected)
|
||||
overlay.reorder_overlay(overlay._selected, -1);
|
||||
|
||||
}, 'player-added'],
|
||||
|
||||
|
||||
[Mpris, (overlay, busName) => {
|
||||
if (!busName || !overlay._players.has(busName))
|
||||
return;
|
||||
|
@ -141,6 +149,7 @@ export default () => Box({
|
|||
overlay.overlays = result;
|
||||
if (overlay._selected)
|
||||
overlay.reorder_overlay(overlay._selected, -1);
|
||||
|
||||
}, 'player-closed'],
|
||||
],
|
||||
}),
|
||||
|
|
|
@ -21,7 +21,7 @@ const closeAll = () => {
|
|||
});
|
||||
App.closeWindow('closer');
|
||||
};
|
||||
globalThis.closeAll = () => closeAll();
|
||||
globalThis.closeAll = closeAll;
|
||||
|
||||
Pointers.connect('new-line', (_, out) => {
|
||||
if (out) {
|
||||
|
|
|
@ -4,34 +4,43 @@ import Gdk from 'gi://Gdk';
|
|||
const display = Gdk.Display.get_default();
|
||||
|
||||
|
||||
export const EventBox = ({ reset = true, ...params }) => Widget.EventBox({
|
||||
...params,
|
||||
onHover: box => {
|
||||
if (! box.child.sensitive || ! box.sensitive) {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
export default ({
|
||||
type = "EventBox",
|
||||
reset = true,
|
||||
...props
|
||||
}) => {
|
||||
if (type === "EventBox") {
|
||||
return Widget.EventBox({
|
||||
...props,
|
||||
onHover: self => {
|
||||
if (!self.child.sensitive || !self.sensitive) {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
}
|
||||
else {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
}
|
||||
},
|
||||
onHoverLost: box => {
|
||||
onHoverLost: self => {
|
||||
if (reset)
|
||||
box.window.set_cursor(null);
|
||||
self.window.set_cursor(null);
|
||||
},
|
||||
});
|
||||
|
||||
export const Button = ({ reset = true, ...params }) => Widget.Button({
|
||||
...params,
|
||||
onHover: box => {
|
||||
if (! box.child.sensitive || ! box.sensitive) {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
});
|
||||
}
|
||||
else {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
return Widget.Button({
|
||||
...props,
|
||||
onHover: self => {
|
||||
if (!self.child.sensitive || !self.sensitive) {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'not-allowed'));
|
||||
}
|
||||
else {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'pointer'));
|
||||
}
|
||||
},
|
||||
onHoverLost: box => {
|
||||
onHoverLost: self => {
|
||||
if (reset)
|
||||
box.window.set_cursor(null);
|
||||
self.window.set_cursor(null);
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,26 +2,29 @@ import { App, Widget } from '../../imports.js';
|
|||
const { Revealer, Box, Window } = Widget;
|
||||
|
||||
|
||||
export const PopupWindow = ({
|
||||
export default ({
|
||||
name,
|
||||
child,
|
||||
transition = 'slide_down',
|
||||
...params
|
||||
}) => Window({
|
||||
onOpen = rev => {},
|
||||
...props
|
||||
}) => {
|
||||
let window = Window({
|
||||
name,
|
||||
popup: true,
|
||||
visible: false,
|
||||
layer: 'overlay',
|
||||
...params,
|
||||
...props,
|
||||
|
||||
child: Box({
|
||||
style: 'min-height:1px; min-width:1px',
|
||||
child: Revealer({
|
||||
transition,
|
||||
transitionDuration: 500,
|
||||
connections: [[App, (revealer, currentName, visible) => {
|
||||
connections: [[App, (rev, currentName, visible) => {
|
||||
if (currentName === name) {
|
||||
revealer.reveal_child = visible;
|
||||
rev.reveal_child = visible;
|
||||
onOpen(child);
|
||||
|
||||
if (visible && name !== 'overview')
|
||||
App.openWindow('closer');
|
||||
|
@ -30,4 +33,7 @@ export const PopupWindow = ({
|
|||
child: child,
|
||||
}),
|
||||
}),
|
||||
});
|
||||
});
|
||||
window.getChild = () => child;
|
||||
return window;
|
||||
}
|
||||
|
|
|
@ -2,6 +2,15 @@ import { Widget } from '../../imports.js';
|
|||
const { Box } = Widget;
|
||||
|
||||
|
||||
export const Separator = width => Box({
|
||||
style: `min-width: ${width}px;`,
|
||||
});
|
||||
export default (size, { vertical = false } = {}) => {
|
||||
if (vertical) {
|
||||
return Box({
|
||||
style: `min-height: ${size}px;`,
|
||||
});
|
||||
}
|
||||
else {
|
||||
return Box({
|
||||
style: `min-width: ${size}px;`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,8 +4,17 @@ const { Box, Icon, Label, Button } = Widget;
|
|||
|
||||
import GLib from 'gi://GLib';
|
||||
|
||||
const setTime = time => {
|
||||
return GLib.DateTime
|
||||
.new_from_unix_local(time)
|
||||
.format('%H:%M');
|
||||
};
|
||||
|
||||
const getDragState = box => box.get_parent().get_parent()
|
||||
.get_parent().get_parent().get_parent()._dragging;
|
||||
|
||||
import Gesture from './gesture.js';
|
||||
import { EventBox } from '../misc/cursorbox.js'
|
||||
import EventBox from '../misc/cursorbox.js'
|
||||
|
||||
|
||||
const NotificationIcon = notif => {
|
||||
|
@ -14,19 +23,19 @@ const NotificationIcon = notif => {
|
|||
if (Applications.query(notif.appEntry).length > 0) {
|
||||
let app = Applications.query(notif.appEntry)[0];
|
||||
|
||||
if (app.app.get_string('StartupWMClass') != null) {
|
||||
let wmClass = app.app.get_string('StartupWMClass');
|
||||
if (app.app.get_filename().includes('discord'))
|
||||
wmClass = 'discord';
|
||||
|
||||
if (wmClass != null) {
|
||||
iconCmd = box => {
|
||||
if (!box.get_parent().get_parent().get_parent().get_parent().get_parent()._dragging) {
|
||||
execAsync(['bash', '-c', `$AGS_PATH/launch-app.sh ${app.app.get_string('StartupWMClass')} ${app.app.get_string('Exec')}`]).catch(print);
|
||||
globalThis.closeAll();
|
||||
}
|
||||
}
|
||||
}
|
||||
else if (app.app.get_filename().includes('discord')) {
|
||||
iconCmd = box => {
|
||||
if (!box.get_parent().get_parent().get_parent().get_parent().get_parent()._dragging) {
|
||||
execAsync(['bash', '-c', `$AGS_PATH/launch-app.sh discord ${app.app.get_string('Exec')}`])
|
||||
.catch(print);
|
||||
if (!getDragState(box)) {
|
||||
execAsync(['bash', '-c',
|
||||
`$AGS_PATH/launch-app.sh
|
||||
${wmClass}
|
||||
${app.app.get_string('Exec')}`
|
||||
]).catch(print);
|
||||
|
||||
globalThis.closeAll();
|
||||
}
|
||||
}
|
||||
|
@ -82,7 +91,7 @@ const NotificationIcon = notif => {
|
|||
});
|
||||
};
|
||||
|
||||
export default ({ notif, command = () => {}} = {}) => {
|
||||
export default ({ notif, command = () => {}, } = {}) => {
|
||||
const BlockedApps = [
|
||||
'Spotify',
|
||||
];
|
||||
|
@ -142,7 +151,7 @@ export default ({ notif, command = () => {}} = {}) => {
|
|||
Label({
|
||||
className: 'time',
|
||||
valign: 'start',
|
||||
label: GLib.DateTime.new_from_unix_local(notif.time).format('%H:%M'),
|
||||
label: setTime(notif.time),
|
||||
}),
|
||||
EventBox({
|
||||
reset: false,
|
||||
|
|
|
@ -3,23 +3,30 @@ const { Button, Label, Box, Icon, Scrollable, Revealer } = Widget;
|
|||
const { timeout } = Utils;
|
||||
|
||||
import Notification from './base.js';
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import { PopupWindow } from '../misc/popup.js';
|
||||
import PopupWindow from '../misc/popup.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
const ClearButton = () => EventBox({
|
||||
child: Button({
|
||||
onPrimaryClickRelease: button => {
|
||||
button._popups.children.forEach(ch => ch.child.setStyle(ch.child._leftAnim1));
|
||||
button._popups.children.forEach(ch => {
|
||||
ch.child.setStyle(ch.child._leftAnim1);
|
||||
});
|
||||
|
||||
button._notifList.children.forEach(ch => {
|
||||
if (ch.child)
|
||||
ch.child.setStyle(ch.child._rightAnim1);
|
||||
timeout(500, () => {
|
||||
button._notifList.remove(ch);
|
||||
Notifications.notifications.forEach(n => n.close());
|
||||
Notifications.clear();
|
||||
});
|
||||
});
|
||||
},
|
||||
properties: [['notifList'], ['popups']],
|
||||
properties: [
|
||||
['notifList'],
|
||||
['popups'],
|
||||
],
|
||||
connections: [[Notifications, button => {
|
||||
if (!button._notifList)
|
||||
button._notifList = NotificationList;
|
||||
|
@ -33,8 +40,8 @@ const ClearButton = () => EventBox({
|
|||
children: [
|
||||
Label('Clear '),
|
||||
Icon({
|
||||
connections: [[Notifications, icon => {
|
||||
icon.icon = Notifications.notifications.length > 0
|
||||
connections: [[Notifications, self => {
|
||||
self.icon = Notifications.notifications.length > 0
|
||||
? 'user-trash-full-symbolic' : 'user-trash-symbolic';
|
||||
}]],
|
||||
}),
|
||||
|
@ -46,7 +53,11 @@ const ClearButton = () => EventBox({
|
|||
const Header = () => Box({
|
||||
className: 'header',
|
||||
children: [
|
||||
Label({ label: 'Notifications', hexpand: true, xalign: 0 }),
|
||||
Label({
|
||||
label: 'Notifications',
|
||||
hexpand: true,
|
||||
xalign: 0,
|
||||
}),
|
||||
ClearButton(),
|
||||
],
|
||||
});
|
||||
|
@ -110,14 +121,15 @@ const Placeholder = () => Revealer({
|
|||
}),
|
||||
});
|
||||
|
||||
const NotificationCenterWidget = Box({
|
||||
const NotificationCenterWidget = () => Box({
|
||||
className: 'notification-center',
|
||||
vertical: true,
|
||||
children: [
|
||||
Header(),
|
||||
Box({
|
||||
className: 'notification-wallpaper-box',
|
||||
children: [Scrollable({
|
||||
children: [
|
||||
Scrollable({
|
||||
className: 'notification-list-box',
|
||||
hscroll: 'never',
|
||||
vscroll: 'automatic',
|
||||
|
@ -129,7 +141,8 @@ const NotificationCenterWidget = Box({
|
|||
Placeholder(),
|
||||
],
|
||||
}),
|
||||
})],
|
||||
})
|
||||
],
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
@ -138,5 +151,5 @@ export default () => PopupWindow({
|
|||
name: 'notification-center',
|
||||
anchor: [ 'top', 'right' ],
|
||||
margin: [ 8, 60, 0, 0 ],
|
||||
child: NotificationCenterWidget,
|
||||
child: NotificationCenterWidget(),
|
||||
});
|
||||
|
|
|
@ -16,25 +16,25 @@ export default ({
|
|||
child = '',
|
||||
children = [],
|
||||
properties = [[]],
|
||||
...params
|
||||
...props
|
||||
}) => {
|
||||
let w = EventBox({
|
||||
...params,
|
||||
let widget = EventBox({
|
||||
...props,
|
||||
properties: [
|
||||
['dragging', false],
|
||||
...properties,
|
||||
],
|
||||
onHover: box => {
|
||||
box.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
onHover(box);
|
||||
onHover: self => {
|
||||
self.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
onHover(self);
|
||||
},
|
||||
onHoverLost: box => {
|
||||
box.window.set_cursor(null);
|
||||
onHoverLost(box);
|
||||
onHoverLost: self => {
|
||||
self.window.set_cursor(null);
|
||||
onHoverLost(self);
|
||||
},
|
||||
});
|
||||
|
||||
let gesture = Gtk.GestureDrag.new(w);
|
||||
let gesture = Gtk.GestureDrag.new(widget);
|
||||
|
||||
let leftAnim1 = `transition: margin 0.5s ease, opacity 0.5s ease;
|
||||
margin-left: -${Number(maxOffset + endMargin)}px;
|
||||
|
@ -56,7 +56,7 @@ export default ({
|
|||
margin-right: -${Number(maxOffset + endMargin)}px;
|
||||
margin-bottom: -70px; margin-top: -70px; opacity: 0;`;
|
||||
|
||||
w.child = Box({
|
||||
widget.child = Box({
|
||||
properties: [
|
||||
['leftAnim1', leftAnim1],
|
||||
['leftAnim2', leftAnim2],
|
||||
|
@ -71,39 +71,39 @@ export default ({
|
|||
style: leftAnim2,
|
||||
connections: [
|
||||
|
||||
[gesture, box => {
|
||||
[gesture, self => {
|
||||
var offset = gesture.get_offset()[1];
|
||||
|
||||
if (offset >= 0) {
|
||||
box.setStyle('margin-left: ' + Number(offset + startMargin) + 'px; ' +
|
||||
'margin-right: -' + Number(offset + startMargin) + 'px;');
|
||||
self.setStyle(`margin-left: ${Number(offset + startMargin)}px;
|
||||
margin-right: -${Number(offset + startMargin)}px;`);
|
||||
}
|
||||
else {
|
||||
offset = Math.abs(offset);
|
||||
box.setStyle('margin-right: ' + Number(offset + startMargin) + 'px; ' +
|
||||
'margin-left: -' + Number(offset + startMargin) + 'px;');
|
||||
self.setStyle(`margin-right: ${Number(offset + startMargin)}px;
|
||||
margin-left: -${Number(offset + startMargin)}px;`);
|
||||
}
|
||||
|
||||
box.get_parent()._dragging = Math.abs(offset) > 10;
|
||||
self.get_parent()._dragging = Math.abs(offset) > 10;
|
||||
|
||||
if (w.window)
|
||||
w.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
|
||||
if (widget.window)
|
||||
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
|
||||
}, 'drag-update'],
|
||||
|
||||
[gesture, box => {
|
||||
if (!box._ready) {
|
||||
box.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
|
||||
[gesture, self => {
|
||||
if (!self._ready) {
|
||||
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
|
||||
margin-left: -${Number(maxOffset + endMargin)}px;
|
||||
margin-right: ${Number(maxOffset + endMargin)}px;
|
||||
margin-bottom: 0px; margin-top: 0px; opacity: 0;`);
|
||||
|
||||
setTimeout(() => {
|
||||
box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' +
|
||||
'margin-left: ' + startMargin + 'px; ' +
|
||||
'margin-right: ' + startMargin + 'px; ' +
|
||||
'margin-bottom: unset; margin-top: unset; opacity: 1;');
|
||||
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
|
||||
margin-left: ${startMargin}px;
|
||||
margin-right: ${startMargin}px;
|
||||
margin-bottom: unset; margin-top: unset; opacity: 1;`);
|
||||
}, 500);
|
||||
setTimeout(() => box._ready = true, 1000);
|
||||
setTimeout(() => self._ready = true, 1000);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -111,32 +111,32 @@ export default ({
|
|||
|
||||
if (Math.abs(offset) > maxOffset) {
|
||||
if (offset > 0) {
|
||||
box.setStyle(rightAnim1);
|
||||
setTimeout(() => box.setStyle(rightAnim2), 500);
|
||||
self.setStyle(rightAnim1);
|
||||
setTimeout(() => self.setStyle(rightAnim2), 500);
|
||||
}
|
||||
else {
|
||||
box.setStyle(leftAnim1);
|
||||
setTimeout(() => box.setStyle(leftAnim2), 500);
|
||||
self.setStyle(leftAnim1);
|
||||
setTimeout(() => self.setStyle(leftAnim2), 500);
|
||||
}
|
||||
setTimeout(() => {
|
||||
command();
|
||||
box.destroy();
|
||||
self.destroy();
|
||||
}, 1000);
|
||||
}
|
||||
else {
|
||||
box.setStyle('transition: margin 0.5s ease, opacity 0.5s ease; ' +
|
||||
'margin-left: ' + startMargin + 'px; ' +
|
||||
'margin-right: ' + startMargin + 'px; ' +
|
||||
'margin-bottom: unset; margin-top: unset; opacity: 1;');
|
||||
if (w.window)
|
||||
w.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
self.setStyle(`transition: margin 0.5s ease, opacity 0.5s ease;
|
||||
margin-left: ${startMargin}px;
|
||||
margin-right: ${startMargin}px;
|
||||
margin-bottom: unset; margin-top: unset; opacity: 1;`);
|
||||
if (widget.window)
|
||||
widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grab'));
|
||||
|
||||
box.get_parent()._dragging = false;
|
||||
self.get_parent()._dragging = false;
|
||||
}
|
||||
}, 'drag-end'],
|
||||
|
||||
],
|
||||
});
|
||||
|
||||
return w;
|
||||
return widget;
|
||||
};
|
||||
|
|
|
@ -8,12 +8,13 @@ const Popups = () => Box({
|
|||
vertical: true,
|
||||
properties: [
|
||||
['map', new Map()],
|
||||
['dismiss', (box, id, force = false) => {
|
||||
if (!id || !box._map.has(id))
|
||||
return;
|
||||
|
||||
if (box._map.get(id)._hovered && !force)
|
||||
['dismiss', (box, id, force = false) => {
|
||||
if (!id || !box._map.has(id) ||
|
||||
box._map.get(id)._hovered && !force) {
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (box._map.size - 1 === 0)
|
||||
box.get_parent().reveal_child = false;
|
||||
|
@ -27,6 +28,7 @@ const Popups = () => Box({
|
|||
box._map.delete(id);
|
||||
}, 200);
|
||||
}],
|
||||
|
||||
['notify', (box, id) => {
|
||||
if (!id || Notifications.dnd)
|
||||
return;
|
||||
|
@ -43,11 +45,12 @@ const Popups = () => Box({
|
|||
}));
|
||||
|
||||
box.children = Array.from(box._map.values()).reverse();
|
||||
|
||||
setTimeout(() => {
|
||||
box.get_parent().revealChild = true;
|
||||
}, 10);
|
||||
|
||||
box._map.get(id).interval = setInterval(() => {
|
||||
print('interval')
|
||||
if (!box._map.get(id)._hovered) {
|
||||
box._map.get(id).child.setStyle(box._map.get(id).child._leftAnim1);
|
||||
|
||||
|
|
|
@ -5,10 +5,12 @@ const { execAsync } = Utils;
|
|||
import { WindowButton } from './dragndrop.js';
|
||||
import * as VARS from './variables.js';
|
||||
|
||||
// Has to be a traditional function for 'this' scope
|
||||
Array.prototype.remove = function (el) { this.splice(this.indexOf(el), 1) };
|
||||
|
||||
const scale = size => size * VARS.SCALE - VARS.MARGIN;
|
||||
const getFontSize = client => Math.min(scale(client.size[0]), scale(client.size[1])) * VARS.ICON_SCALE;
|
||||
const getFontSize = client => Math.min(scale(client.size[0]),
|
||||
scale(client.size[1])) * VARS.ICON_SCALE;
|
||||
|
||||
const IconStyle = client => `transition: font-size 0.2s linear;
|
||||
min-width: ${scale(client.size[0])}px;
|
||||
|
@ -31,14 +33,22 @@ const Client = (client, active, clients) => {
|
|||
],
|
||||
child: WindowButton({
|
||||
address: client.address,
|
||||
onSecondaryClickRelease: () => execAsync(`hyprctl dispatch closewindow ${addr}`).catch(print),
|
||||
onSecondaryClickRelease: () => {
|
||||
execAsync(`hyprctl dispatch closewindow ${addr}`)
|
||||
.catch(print);
|
||||
},
|
||||
|
||||
onPrimaryClickRelease: () => {
|
||||
if (wsId < 0) {
|
||||
if (client.workspace.name === 'special') {
|
||||
execAsync(`hyprctl dispatch movetoworkspacesilent special:${wsId},${addr}`).then(
|
||||
execAsync(`hyprctl dispatch
|
||||
movetoworkspacesilent special:${wsId},${addr}`)
|
||||
.then(
|
||||
|
||||
execAsync(`hyprctl dispatch togglespecialworkspace ${wsId}`).then(
|
||||
() => App.closeWindow('overview')
|
||||
).catch(print)
|
||||
|
||||
).catch(print);
|
||||
}
|
||||
else {
|
||||
|
@ -53,13 +63,15 @@ const Client = (client, active, clients) => {
|
|||
let currentActive = clients.find(c => c.address === activeAddress)
|
||||
|
||||
if (currentActive && currentActive.workspace.id < 0) {
|
||||
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`).catch(print);
|
||||
execAsync(`hyprctl dispatch togglespecialworkspace ${wsName}`)
|
||||
.catch(print);
|
||||
}
|
||||
execAsync(`hyprctl dispatch focuswindow ${addr}`).then(
|
||||
() => App.closeWindow('overview')
|
||||
).catch(print);
|
||||
}
|
||||
},
|
||||
|
||||
child: Icon({
|
||||
className: `window ${active}`,
|
||||
style: IconStyle(client) + 'font-size: 10px;',
|
||||
|
@ -70,15 +82,15 @@ const Client = (client, active, clients) => {
|
|||
};
|
||||
|
||||
export function updateClients(box) {
|
||||
execAsync('hyprctl clients -j').then(
|
||||
result => {
|
||||
let clients = JSON.parse(result).filter(client => client.class)
|
||||
execAsync('hyprctl clients -j').then(out => {
|
||||
let clients = JSON.parse(out).filter(client => client.class)
|
||||
|
||||
box._workspaces.forEach(workspace => {
|
||||
let fixed = workspace.child.child.get_children()[2].children[0];
|
||||
let fixed = workspace.getFixed();
|
||||
let toRemove = fixed.get_children();
|
||||
|
||||
clients.filter(client => client.workspace.id == workspace._id).forEach(client => {
|
||||
clients.filter(client => client.workspace.id == workspace._id)
|
||||
.forEach(client => {
|
||||
let active = '';
|
||||
if (client.address == Hyprland.active.client.address) {
|
||||
active = 'active';
|
||||
|
|
|
@ -6,7 +6,7 @@ import Gtk from 'gi://Gtk';
|
|||
import Gdk from 'gi://Gdk';
|
||||
import Cairo from 'cairo';
|
||||
|
||||
import { Button } from '../misc/cursorbox.js';
|
||||
import Button from '../misc/cursorbox.js';
|
||||
import { updateClients } from './clients.js';
|
||||
|
||||
const TARGET = [Gtk.TargetEntry.new('text/plain', Gtk.TargetFlags.SAME_APP, 0)];
|
||||
|
@ -29,13 +29,13 @@ function createSurfaceFromWidget(widget) {
|
|||
};
|
||||
|
||||
let hidden = 0;
|
||||
export const WorkspaceDrop = params => EventBox({
|
||||
...params,
|
||||
connections: [['drag-data-received', (eventbox, _c, _x, _y, data) => {
|
||||
let id = eventbox.get_parent()._id;
|
||||
export const WorkspaceDrop = props => EventBox({
|
||||
...props,
|
||||
connections: [['drag-data-received', (self, _c, _x, _y, data) => {
|
||||
let id = self.get_parent()._id;
|
||||
|
||||
if (id < -1) {
|
||||
id = eventbox.get_parent()._name;
|
||||
id = self.get_parent()._name;
|
||||
}
|
||||
else if (id === -1) {
|
||||
id = `special:${++hidden}`;
|
||||
|
@ -46,26 +46,27 @@ export const WorkspaceDrop = params => EventBox({
|
|||
execAsync(`hyprctl dispatch movetoworkspacesilent ${id},address:${data.get_text()}`)
|
||||
.catch(print);
|
||||
}]],
|
||||
setup: eventbox => {
|
||||
eventbox.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
|
||||
setup: self => {
|
||||
self.drag_dest_set(Gtk.DestDefaults.ALL, TARGET, Gdk.DragAction.COPY);
|
||||
},
|
||||
});
|
||||
|
||||
export const WindowButton = ({address, ...params} = {}) => Button({
|
||||
...params,
|
||||
setup: button => {
|
||||
button.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
|
||||
button.connect('drag-data-get', (_w, _c, data) => {
|
||||
export const WindowButton = ({address, ...props} = {}) => Button({
|
||||
type: "Button",
|
||||
...props,
|
||||
setup: self => {
|
||||
self.drag_source_set(Gdk.ModifierType.BUTTON1_MASK, TARGET, Gdk.DragAction.COPY);
|
||||
self.connect('drag-data-get', (_w, _c, data) => {
|
||||
data.set_text(address, address.length);
|
||||
});
|
||||
button.connect('drag-begin', (_, context) => {
|
||||
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(button));
|
||||
button.get_parent().revealChild = false;
|
||||
self.connect('drag-begin', (_, context) => {
|
||||
Gtk.drag_set_icon_surface(context, createSurfaceFromWidget(self));
|
||||
self.get_parent().revealChild = false;
|
||||
});
|
||||
button.connect('drag-end', () => {
|
||||
button.get_parent().destroy();
|
||||
self.connect('drag-end', () => {
|
||||
self.get_parent().destroy();
|
||||
|
||||
let mainBox = App.getWindow('overview').child.children[0].child;
|
||||
let mainBox = App.getWindow('overview').getChild();
|
||||
updateClients(mainBox);
|
||||
});
|
||||
},
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
import { App, Hyprland, Widget } from '../../imports.js';
|
||||
const { Box } = Widget;
|
||||
|
||||
import { PopupWindow } from '../misc/popup.js';
|
||||
import PopupWindow from '../misc/popup.js';
|
||||
import { WorkspaceRow, getWorkspaces, updateWorkspaces } from './workspaces.js';
|
||||
import { updateClients } from './clients.js';
|
||||
|
||||
|
||||
function update(box) {
|
||||
getWorkspaces(box);
|
||||
updateWorkspaces(box);
|
||||
|
@ -14,6 +15,7 @@ function update(box) {
|
|||
export default () => PopupWindow({
|
||||
name: 'overview',
|
||||
transition: 'crossfade',
|
||||
onOpen: child => update(child),
|
||||
|
||||
child: Box({
|
||||
className: 'overview',
|
||||
|
@ -32,17 +34,12 @@ export default () => PopupWindow({
|
|||
],
|
||||
}),
|
||||
],
|
||||
// The timeout is because the list of clients is async
|
||||
setup: box => setTimeout(() => update(box), 100),
|
||||
connections: [
|
||||
[Hyprland, box => {
|
||||
connections: [[Hyprland, self => {
|
||||
if (!App.getWindow('overview').visible)
|
||||
return;
|
||||
|
||||
print('running overview');
|
||||
update(box);
|
||||
}],
|
||||
],
|
||||
update(self);
|
||||
}]],
|
||||
properties: [
|
||||
['workspaces'],
|
||||
],
|
||||
|
|
|
@ -48,46 +48,24 @@ export const WorkspaceRow = (className, i) => Revealer({
|
|||
child: Box({
|
||||
className: className,
|
||||
children: [
|
||||
Revealer({
|
||||
transition: 'slide_right',
|
||||
properties: [
|
||||
['id', className === 'special' ? -1 : 1000],
|
||||
['name', className === 'special' ? 'special' : ''],
|
||||
],
|
||||
child: WorkspaceDrop({
|
||||
child: Overlay({
|
||||
child: Box({
|
||||
className: 'workspace',
|
||||
style: DEFAULT_STYLE,
|
||||
}),
|
||||
overlays: [
|
||||
Box({
|
||||
className: 'workspace active',
|
||||
style: `${DEFAULT_STYLE} opacity: 0;`,
|
||||
}),
|
||||
Box({
|
||||
style: DEFAULT_STYLE,
|
||||
children: [
|
||||
Widget({
|
||||
type: Gtk.Fixed,
|
||||
}),
|
||||
Label({
|
||||
label: ' +',
|
||||
style: 'font-size: 40px;',
|
||||
}),
|
||||
],
|
||||
})
|
||||
],
|
||||
}),
|
||||
}),
|
||||
}),
|
||||
Workspace(className === 'special' ? -1 : 1000,
|
||||
className === 'special' ? 'special' : '',
|
||||
true),
|
||||
],
|
||||
}),
|
||||
}), null],
|
||||
}),
|
||||
});
|
||||
|
||||
const Workspace = (id, name) => Revealer({
|
||||
// TODO: please make this readable for the love of god
|
||||
const Workspace = (id, name, extra = false) => {
|
||||
let workspace;
|
||||
let fixed = Widget({
|
||||
type: Gtk.Fixed,
|
||||
});
|
||||
|
||||
if (!extra) {
|
||||
workspace = Revealer({
|
||||
transition: 'slide_right',
|
||||
transitionDuration: 500,
|
||||
properties: [
|
||||
|
@ -160,14 +138,50 @@ const Workspace = (id, name) => Revealer({
|
|||
Box({
|
||||
className: 'workspace',
|
||||
style: DEFAULT_STYLE,
|
||||
child: Widget({
|
||||
type: Gtk.Fixed,
|
||||
}),
|
||||
child: fixed,
|
||||
})
|
||||
],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
});
|
||||
}
|
||||
else {
|
||||
workspace = Revealer({
|
||||
transition: 'slide_right',
|
||||
properties: [
|
||||
['id', id],
|
||||
['name', name],
|
||||
],
|
||||
child: WorkspaceDrop({
|
||||
child: Overlay({
|
||||
child: Box({
|
||||
className: 'workspace',
|
||||
style: DEFAULT_STYLE,
|
||||
}),
|
||||
overlays: [
|
||||
Box({
|
||||
className: 'workspace active',
|
||||
style: `${DEFAULT_STYLE} opacity: 0;`,
|
||||
}),
|
||||
Box({
|
||||
style: DEFAULT_STYLE,
|
||||
children: [
|
||||
fixed,
|
||||
Label({
|
||||
label: ' +',
|
||||
style: 'font-size: 40px;',
|
||||
}),
|
||||
],
|
||||
})
|
||||
],
|
||||
}),
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
workspace.getFixed = () => fixed;
|
||||
return workspace;
|
||||
};
|
||||
|
||||
export function updateWorkspaces(box) {
|
||||
Hyprland.workspaces.forEach(ws => {
|
||||
|
|
|
@ -1,15 +1,16 @@
|
|||
import { Widget } from '../imports.js';
|
||||
const { CenterBox, Label } = Widget;
|
||||
|
||||
import { PopupWindow } from './misc/popup.js';
|
||||
import { Button } from './misc/cursorbox.js'
|
||||
import PopupWindow from './misc/popup.js';
|
||||
import Button from './misc/cursorbox.js'
|
||||
|
||||
|
||||
const PowermenuWidget = CenterBox({
|
||||
const PowermenuWidget = () => CenterBox({
|
||||
className: 'powermenu',
|
||||
vertical: false,
|
||||
|
||||
startWidget: Button({
|
||||
type: "Button",
|
||||
className: 'shutdown',
|
||||
onPrimaryClickRelease: 'systemctl poweroff',
|
||||
|
||||
|
@ -19,6 +20,7 @@ const PowermenuWidget = CenterBox({
|
|||
}),
|
||||
|
||||
centerWidget: Button({
|
||||
type: "Button",
|
||||
className: 'reboot',
|
||||
onPrimaryClickRelease: 'systemctl reboot',
|
||||
|
||||
|
@ -28,6 +30,7 @@ const PowermenuWidget = CenterBox({
|
|||
}),
|
||||
|
||||
endWidget: Button({
|
||||
type: "Button",
|
||||
className: 'logout',
|
||||
onPrimaryClickRelease: 'hyprctl dispatch exit',
|
||||
|
||||
|
@ -40,5 +43,5 @@ const PowermenuWidget = CenterBox({
|
|||
export default () => PopupWindow({
|
||||
name: 'powermenu',
|
||||
transition: 'crossfade',
|
||||
child: PowermenuWidget,
|
||||
child: PowermenuWidget(),
|
||||
});
|
||||
|
|
|
@ -2,10 +2,14 @@ import { Network, Bluetooth, Audio, App, Utils, Widget } from '../../imports.js'
|
|||
const { Box, CenterBox, Label, Icon } = Widget;
|
||||
const { execAsync } = Utils;
|
||||
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
|
||||
|
||||
const GridButton = ({ command = () => {}, secondaryCommand = () => {}, icon } = {}) => Box({
|
||||
const GridButton = ({
|
||||
command = () => {},
|
||||
secondaryCommand = () => {},
|
||||
icon
|
||||
} = {}) => Box({
|
||||
className: 'grid-button',
|
||||
children: [
|
||||
|
||||
|
@ -27,7 +31,7 @@ const GridButton = ({ command = () => {}, secondaryCommand = () => {}, icon } =
|
|||
],
|
||||
});
|
||||
|
||||
const FirstRow = Box({
|
||||
const FirstRow = () => Box({
|
||||
className: 'button-row',
|
||||
halign: 'center',
|
||||
style: 'margin-top: 15px; margin-bottom: 7px;',
|
||||
|
@ -35,7 +39,10 @@ const FirstRow = Box({
|
|||
|
||||
GridButton({
|
||||
command: () => Network.toggleWifi(),
|
||||
secondaryCommand: () => execAsync(['bash', '-c', 'nm-connection-editor']).catch(print),
|
||||
secondaryCommand: () => {
|
||||
execAsync(['bash', '-c', 'nm-connection-editor'])
|
||||
.catch(print);
|
||||
},
|
||||
icon: Icon({
|
||||
className: 'grid-label',
|
||||
connections: [[Network, icon => {
|
||||
|
@ -50,35 +57,47 @@ const FirstRow = Box({
|
|||
}),
|
||||
|
||||
GridButton({
|
||||
command: () => execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh blue-toggle']).catch(print),
|
||||
secondaryCommand: () => execAsync(['bash', '-c', 'blueberry']).catch(print),
|
||||
command: () => {
|
||||
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh blue-toggle'])
|
||||
.catch(print);
|
||||
},
|
||||
secondaryCommand: () => {
|
||||
execAsync(['bash', '-c', 'blueberry'])
|
||||
.catch(print)
|
||||
},
|
||||
icon: Icon({
|
||||
className: 'grid-label',
|
||||
connections: [[Bluetooth, icon => {
|
||||
connections: [[Bluetooth, self => {
|
||||
if (Bluetooth.enabled) {
|
||||
icon.icon = 'bluetooth-active-symbolic';
|
||||
execAsync(['bash', '-c', 'echo > $HOME/.config/.bluetooth']).catch(print);
|
||||
self.icon = 'bluetooth-active-symbolic';
|
||||
execAsync(['bash', '-c', 'echo > $HOME/.config/.bluetooth'])
|
||||
.catch(print);
|
||||
}
|
||||
else {
|
||||
icon.icon = 'bluetooth-disabled-symbolic';
|
||||
execAsync(['bash', '-c', 'echo > $HOME/.config/.bluetooth']).catch(print);
|
||||
self.icon = 'bluetooth-disabled-symbolic';
|
||||
execAsync(['bash', '-c', 'echo > $HOME/.config/.bluetooth'])
|
||||
.catch(print);
|
||||
}
|
||||
}, 'changed']],
|
||||
})
|
||||
}),
|
||||
|
||||
GridButton({
|
||||
command: () => execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh toggle-radio']).catch(print),
|
||||
secondaryCommand: () => execAsync(['notify-send', 'set this up moron']).catch(print),
|
||||
command: () => {
|
||||
execAsync(['bash', '-c', '$AGS_PATH/qs-toggles.sh toggle-radio'])
|
||||
.catch(print);
|
||||
},
|
||||
secondaryCommand: () => {
|
||||
execAsync(['notify-send', 'set this up moron'])
|
||||
.catch(print);
|
||||
},
|
||||
icon: Icon({
|
||||
className: 'grid-label',
|
||||
connections: [[Network, icon => {
|
||||
if (Network.wifi.enabled) {
|
||||
icon.icon = 'airplane-mode-disabled-symbolic';
|
||||
}
|
||||
else {
|
||||
icon.icon = 'airplane-mode-symbolic';
|
||||
}
|
||||
connections: [[Network, self => {
|
||||
if (Network.wifi.enabled)
|
||||
self.icon = 'airplane-mode-disabled-symbolic';
|
||||
else
|
||||
self.icon = 'airplane-mode-symbolic';
|
||||
}, 'changed']],
|
||||
}),
|
||||
}),
|
||||
|
@ -86,7 +105,7 @@ const FirstRow = Box({
|
|||
],
|
||||
});
|
||||
|
||||
const SubRow = CenterBox({
|
||||
const SubRow = () => CenterBox({
|
||||
halign: 'start',
|
||||
children: [
|
||||
|
||||
|
@ -94,8 +113,9 @@ const SubRow = CenterBox({
|
|||
className: 'sub-label',
|
||||
truncate: 'end',
|
||||
maxWidthChars: 12,
|
||||
connections: [[Network, label => {
|
||||
label.label = Network.wifi.ssid;
|
||||
connections: [[Network, self => {
|
||||
// TODO: handle ethernet too
|
||||
self.label = Network.wifi.ssid;
|
||||
}, 'changed']],
|
||||
}),
|
||||
|
||||
|
@ -103,20 +123,15 @@ const SubRow = CenterBox({
|
|||
className: 'sub-label',
|
||||
truncate: 'end',
|
||||
maxWidthChars: 12,
|
||||
connections: [[Bluetooth, label => {
|
||||
label.label = Bluetooth.connectedDevices[0] ? String(Bluetooth.connectedDevices[0]) :
|
||||
'Disconnected';
|
||||
connections: [[Bluetooth, self => {
|
||||
if (Bluetooth.connectedDevices[0])
|
||||
self.label = String(Bluetooth.connectedDevices[0])
|
||||
else
|
||||
self.label = 'Disconnected';
|
||||
}, 'changed']],
|
||||
}),
|
||||
|
||||
Label({
|
||||
className: '',
|
||||
truncate: 'end',
|
||||
maxWidthChars: 12,
|
||||
/*connections: [[Network, label => {
|
||||
label.label = Network.wifi.ssid;
|
||||
}, 'changed']],*/
|
||||
}),
|
||||
null,
|
||||
|
||||
],
|
||||
});
|
||||
|
@ -135,15 +150,23 @@ const itemsMic = {
|
|||
0: 'audio-input-microphone-muted-symbolic',
|
||||
};
|
||||
|
||||
const SecondRow = Box({
|
||||
const SecondRow = () => Box({
|
||||
className: 'button-row',
|
||||
halign: 'center',
|
||||
style: 'margin-top: 7px; margin-bottom: 15px;',
|
||||
children: [
|
||||
|
||||
GridButton({
|
||||
command: () => execAsync(['swayosd-client', '--output-volume', 'mute-toggle']).catch(print),
|
||||
secondaryCommand: () => execAsync(['bash', '-c', 'pavucontrol']).catch(print),
|
||||
command: () => {
|
||||
execAsync(['swayosd-client', '--output-volume', 'mute-toggle'])
|
||||
.catch(print);
|
||||
},
|
||||
|
||||
secondaryCommand: () => {
|
||||
execAsync(['bash', '-c', 'pavucontrol'])
|
||||
.catch(print);
|
||||
},
|
||||
|
||||
icon: Icon({
|
||||
className: 'grid-label',
|
||||
connections: [[Audio, icon => {
|
||||
|
@ -165,8 +188,16 @@ const SecondRow = Box({
|
|||
}),
|
||||
|
||||
GridButton({
|
||||
command: () => execAsync(['swayosd-client', '--input-volume', 'mute-toggle']).catch(print),
|
||||
secondaryCommand: () => execAsync(['bash', '-c', 'pavucontrol']).catch(print),
|
||||
command: () => {
|
||||
execAsync(['swayosd-client', '--input-volume', 'mute-toggle'])
|
||||
.catch(print);
|
||||
},
|
||||
|
||||
secondaryCommand: () => {
|
||||
execAsync(['bash', '-c', 'pavucontrol'])
|
||||
.catch(print);
|
||||
},
|
||||
|
||||
icon: Icon({
|
||||
className: 'grid-label',
|
||||
connections: [[Audio, icon => {
|
||||
|
@ -188,7 +219,10 @@ const SecondRow = Box({
|
|||
}),
|
||||
|
||||
GridButton({
|
||||
command: () => execAsync(['bash', '-c', '$LOCK_PATH/lock.sh']).catch(print),
|
||||
command: () => {
|
||||
execAsync(['bash', '-c', '$LOCK_PATH/lock.sh'])
|
||||
.catch(print);
|
||||
},
|
||||
secondaryCommand: () => App.openWindow('powermenu'),
|
||||
icon: Label({
|
||||
className: 'grid-label',
|
||||
|
@ -199,14 +233,13 @@ const SecondRow = Box({
|
|||
],
|
||||
});
|
||||
|
||||
|
||||
export const ButtonGrid = Box({
|
||||
export default () => Box({
|
||||
className: 'button-grid',
|
||||
vertical: true,
|
||||
halign: 'center',
|
||||
children: [
|
||||
FirstRow,
|
||||
SubRow,
|
||||
SecondRow,
|
||||
FirstRow(),
|
||||
SubRow(),
|
||||
SecondRow(),
|
||||
],
|
||||
});
|
||||
|
|
|
@ -3,14 +3,14 @@ const { Box, Label, Revealer, Icon } = Widget;
|
|||
|
||||
import Gtk from 'gi://Gtk';
|
||||
|
||||
import { ButtonGrid } from './button-grid.js';
|
||||
import { SliderBox } from './slider-box.js';
|
||||
import ButtonGrid from './button-grid.js';
|
||||
import SliderBox from './slider-box.js';
|
||||
import Player from '../media-player/player.js';
|
||||
import { EventBox } from '../misc/cursorbox.js';
|
||||
import { PopupWindow } from '../misc/popup.js';
|
||||
import EventBox from '../misc/cursorbox.js';
|
||||
import PopupWindow from '../misc/popup.js';
|
||||
|
||||
|
||||
const QuickSettingsWidget = Box({
|
||||
const QuickSettingsWidget = () => Box({
|
||||
className: 'qs-container',
|
||||
vertical: true,
|
||||
children: [
|
||||
|
@ -27,9 +27,9 @@ const QuickSettingsWidget = Box({
|
|||
style: 'margin-left: 20px'
|
||||
}),
|
||||
|
||||
ButtonGrid,
|
||||
ButtonGrid(),
|
||||
|
||||
SliderBox,
|
||||
SliderBox(),
|
||||
|
||||
EventBox({
|
||||
child: Widget({
|
||||
|
@ -41,13 +41,15 @@ const QuickSettingsWidget = Box({
|
|||
});
|
||||
},
|
||||
connections: [['toggled', button => {
|
||||
let rev = button.get_parent().get_parent().get_parent().children[1];
|
||||
|
||||
if (button.get_active()) {
|
||||
button.child.setStyle("-gtk-icon-transform: rotate(0deg);");
|
||||
button.get_parent().get_parent().get_parent().children[1].revealChild = true;
|
||||
rev.revealChild = true;
|
||||
}
|
||||
else {
|
||||
button.child.setStyle('-gtk-icon-transform: rotate(180deg);');
|
||||
button.get_parent().get_parent().get_parent().children[1].revealChild = false;
|
||||
rev.revealChild = false;
|
||||
}
|
||||
}]],
|
||||
child: Icon({
|
||||
|
@ -73,5 +75,5 @@ export default () => PopupWindow({
|
|||
name: 'quick-settings',
|
||||
anchor: [ 'top', 'right' ],
|
||||
margin: [ 8, 5, 0, ],
|
||||
child: QuickSettingsWidget,
|
||||
child: QuickSettingsWidget(),
|
||||
});
|
||||
|
|
|
@ -11,7 +11,7 @@ const items = {
|
|||
};
|
||||
|
||||
|
||||
export const SliderBox = Box({
|
||||
export default () => Box({
|
||||
className: 'slider-box',
|
||||
vertical: true,
|
||||
halign: 'center',
|
||||
|
@ -73,11 +73,14 @@ export const SliderBox = Box({
|
|||
['canChange', true],
|
||||
],
|
||||
onChange: ({ value }) => {
|
||||
execAsync(`brightnessctl set ${value}`).catch(print);
|
||||
execAsync(`brightnessctl set ${value}`)
|
||||
.catch(print);
|
||||
},
|
||||
connections: [[1000, slider => {
|
||||
if (slider._canChange) {
|
||||
execAsync('brightnessctl get').then(out => slider.value = out).catch(print);
|
||||
execAsync('brightnessctl get')
|
||||
.then(out => slider.value = out)
|
||||
.catch(print);
|
||||
}
|
||||
}]],
|
||||
min: 0,
|
||||
|
|
|
@ -8,13 +8,23 @@ export const RoundedCorner = (place, props) => Widget({
|
|||
halign: place.includes('left') ? 'start' : 'end',
|
||||
valign: place.includes('top') ? 'start' : 'end',
|
||||
setup: widget => {
|
||||
const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
const r = widget.get_style_context()
|
||||
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
|
||||
widget.set_size_request(r, r);
|
||||
widget.connect('draw', Lang.bind(widget, (widget, cr) => {
|
||||
const c = widget.get_style_context().get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const r = widget.get_style_context().get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
const borderColor = widget.get_style_context().get_property('color', Gtk.StateFlags.NORMAL);
|
||||
const borderWidth = widget.get_style_context().get_border(Gtk.StateFlags.NORMAL).left; // ur going to write border-width: something anyway
|
||||
const c = widget.get_style_context()
|
||||
.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const r = widget.get_style_context()
|
||||
.get_property('border-radius', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const borderColor = widget.get_style_context()
|
||||
.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
// ur going to write border-width: something anyway
|
||||
const borderWidth = widget.get_style_context()
|
||||
.get_border(Gtk.StateFlags.NORMAL).left;
|
||||
widget.set_size_request(r, r);
|
||||
|
||||
switch (place) {
|
||||
|
@ -43,7 +53,10 @@ export const RoundedCorner = (place, props) => Widget({
|
|||
cr.setSourceRGBA(c.red, c.green, c.blue, c.alpha);
|
||||
cr.fill();
|
||||
cr.setLineWidth(borderWidth);
|
||||
cr.setSourceRGBA(borderColor.red, borderColor.green, borderColor.blue, borderColor.alpha);
|
||||
cr.setSourceRGBA(borderColor.red,
|
||||
borderColor.green,
|
||||
borderColor.blue,
|
||||
borderColor.alpha);
|
||||
cr.stroke();
|
||||
}));
|
||||
},
|
||||
|
|
|
@ -28,7 +28,7 @@ exec-once = ags
|
|||
exec-once = gnome-keyring-daemon --start --components=secrets
|
||||
exec-once = squeekboard
|
||||
|
||||
exec-once = bash -c "sleep 1; ags -t applauncher"
|
||||
exec-once = bash -c "sleep 3; ags -t applauncher"
|
||||
exec-once = hyprpaper
|
||||
|
||||
exec-once = wl-paste --watch cliphist store
|
||||
|
|
Loading…
Reference in a new issue