forked from Shinonome/dots-hyprland
ags: sync
This commit is contained in:
end-4
@@ -74,18 +74,16 @@ export const ModuleLeftSpace = () => Widget.EventBox({
|
||||
Widget.Label({
|
||||
xalign: 0,
|
||||
className: 'txt-smaller bar-topdesc txt',
|
||||
connections: [[Hyprland.active.client, label => { // Hyprland.active.client
|
||||
setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
|
||||
label.label = Hyprland.active.client._class.length === 0 ? 'Desktop' : Hyprland.active.client._class;
|
||||
}]],
|
||||
}),
|
||||
}),
|
||||
Widget.Label({
|
||||
xalign: 0,
|
||||
className: 'txt txt-smallie',
|
||||
connections: [
|
||||
[Hyprland.active.client, label => { // Hyprland.active.client
|
||||
label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
|
||||
}]
|
||||
],
|
||||
setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
|
||||
label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
|
||||
}),
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
@@ -6,19 +6,19 @@ import { ModuleLeftSpace } from "./leftspace.js";
|
||||
import { ModuleMusic } from "./music.js";
|
||||
import { ModuleRightSpace } from "./rightspace.js";
|
||||
import { ModuleSystem } from "./system.js";
|
||||
import { ModuleWorkspaces } from "./workspaces.js";
|
||||
import ModuleWorkspaces from "./workspaces.js";
|
||||
import { RoundedCorner } from "../../lib/roundedcorner.js";
|
||||
|
||||
const left = Widget.Box({
|
||||
className: 'bar-sidemodule',
|
||||
children: [ModuleMusic()],
|
||||
children: [
|
||||
ModuleMusic()
|
||||
],
|
||||
});
|
||||
|
||||
const center = Widget.Box({
|
||||
children: [
|
||||
RoundedCorner('topright', { className: 'corner-bar-group' }),
|
||||
ModuleWorkspaces(),
|
||||
RoundedCorner('topleft', { className: 'corner-bar-group' }),
|
||||
],
|
||||
});
|
||||
|
||||
@@ -36,7 +36,7 @@ export default () => Widget.Window({
|
||||
className: 'bar-bg',
|
||||
startWidget: ModuleLeftSpace(),
|
||||
centerWidget: Widget.Box({
|
||||
className: 'spacing-h--20',
|
||||
className: 'spacing-h-4',
|
||||
children: [
|
||||
left,
|
||||
center,
|
||||
|
||||
@@ -9,12 +9,12 @@ const TrackProgress = () => {
|
||||
const _updateProgress = (circprog) => {
|
||||
const mpris = Mpris.getPlayer('');
|
||||
if (!mpris) return;
|
||||
// Set circular progress (font size cuz that's how this hacky circprog works)
|
||||
// Set circular progress value
|
||||
circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
|
||||
}
|
||||
return AnimatedCircProg({
|
||||
className: 'bar-music-circprog',
|
||||
vpack: 'center',
|
||||
vpack: 'center', hpack: 'center',
|
||||
connections: [ // Update on change/once every 3 seconds
|
||||
[Mpris, _updateProgress],
|
||||
[3000, _updateProgress]
|
||||
@@ -65,7 +65,7 @@ export const ModuleMusic = () => Widget.EventBox({
|
||||
Widget.Scrollable({
|
||||
hexpand: true,
|
||||
child: Widget.Label({
|
||||
className: 'txt txt-smallie',
|
||||
className: 'txt-smallie txt-onSurfaceVariant',
|
||||
connections: [[Mpris, label => {
|
||||
const mpris = Mpris.getPlayer('');
|
||||
if (mpris)
|
||||
|
||||
@@ -11,11 +11,11 @@ export const ModuleRightSpace = () => {
|
||||
const barTray = Tray();
|
||||
const barStatusIcons = StatusIcons({
|
||||
className: 'bar-statusicons',
|
||||
connections: [[App, (self, currentName, visible) => {
|
||||
setup: (self) => self.hook(App, (self, currentName, visible) => {
|
||||
if (currentName === 'sideright') {
|
||||
self.toggleClassName('bar-statusicons-active', visible);
|
||||
}
|
||||
}]],
|
||||
}),
|
||||
});
|
||||
|
||||
return Widget.EventBox({
|
||||
|
||||
+130
-103
@@ -1,146 +1,173 @@
|
||||
// This is for the right pill of the bar.
|
||||
// For the cool memory indicator on the sidebar, see sysinfo.js
|
||||
import { Service, Utils, Widget } from '../../imports.js';
|
||||
const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
|
||||
const { exec, execAsync } = Utils;
|
||||
const { GLib } = imports.gi;
|
||||
import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
|
||||
import { MaterialIcon } from '../../lib/materialicon.js';
|
||||
import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
|
||||
|
||||
const BATTERY_LOW = 20;
|
||||
|
||||
const BatBatteryProgress = () => {
|
||||
const _updateProgress = (circprog) => { // Set circular progress value
|
||||
circprog.css = `font-size: ${Battery.percent}px;`
|
||||
|
||||
circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= BATTERY_LOW);
|
||||
circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
|
||||
}
|
||||
return AnimatedCircProg({
|
||||
className: 'bar-batt-circprog',
|
||||
vpack: 'center', hpack: 'center',
|
||||
connections: [
|
||||
[Battery, _updateProgress],
|
||||
],
|
||||
})
|
||||
}
|
||||
|
||||
const BarClock = () => Widget.Box({
|
||||
vpack: 'center',
|
||||
className: 'spacing-h-5',
|
||||
className: 'spacing-h-5 txt-onSurfaceVariant',
|
||||
children: [
|
||||
Widget.Label({
|
||||
className: 'bar-clock',
|
||||
connections: [[5000, label => {
|
||||
label: GLib.DateTime.new_now_local().format("%H:%M"),
|
||||
setup: (self) => self.poll(5000, label => {
|
||||
label.label = GLib.DateTime.new_now_local().format("%H:%M");
|
||||
}]],
|
||||
}),
|
||||
}),
|
||||
Widget.Label({
|
||||
className: 'txt-norm txt',
|
||||
className: 'txt-norm',
|
||||
label: '•',
|
||||
}),
|
||||
Widget.Label({
|
||||
className: 'txt-smallie txt',
|
||||
connections: [[5000, label => {
|
||||
className: 'txt-smallie',
|
||||
label: GLib.DateTime.new_now_local().format("%A, %d/%m"),
|
||||
setup: (self) => self.poll(5000, label => {
|
||||
label.label = GLib.DateTime.new_now_local().format("%A, %d/%m");
|
||||
}]],
|
||||
}),
|
||||
}),
|
||||
],
|
||||
});
|
||||
|
||||
const BarBattery = () => {
|
||||
const BarResourceValue = (name, icon, command) => Widget.Box({
|
||||
vpack: 'center',
|
||||
className: 'bar-batt spacing-h-5',
|
||||
children: [
|
||||
MaterialIcon(icon, 'small'),
|
||||
Widget.ProgressBar({ // Progress
|
||||
vpack: 'center', hexpand: true,
|
||||
className: 'bar-prog-batt',
|
||||
connections: [[5000, (progress) => execAsync(['bash', '-c', command])
|
||||
.then((output) => {
|
||||
progress.value = Number(output) / 100;
|
||||
progress.tooltipText = `${name}: ${Number(output)}%`
|
||||
})
|
||||
.catch(print)
|
||||
]],
|
||||
}),
|
||||
]
|
||||
});
|
||||
const batteryWidget = Widget.Box({
|
||||
vpack: 'center',
|
||||
hexpand: true,
|
||||
className: 'spacing-h-5 bar-batt',
|
||||
connections: [[Battery, box => {
|
||||
box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
|
||||
box.toggleClassName('bar-batt-full', Battery.charged);
|
||||
}]],
|
||||
children: [
|
||||
MaterialIcon('settings_heart', 'small'),
|
||||
Widget.Label({ // Percentage
|
||||
className: 'bar-batt-percentage',
|
||||
connections: [[Battery, label => {
|
||||
label.label = `${Battery.percent}`;
|
||||
}]],
|
||||
}),
|
||||
Widget.ProgressBar({ // Progress
|
||||
vpack: 'center',
|
||||
hexpand: true,
|
||||
className: 'bar-prog-batt',
|
||||
connections: [[Battery, progress => {
|
||||
progress.value = Math.abs(Battery.percent / 100); // battery could be initially negative wtf
|
||||
progress.toggleClassName('bar-prog-batt-low', Battery.percent <= BATTERY_LOW);
|
||||
progress.toggleClassName('bar-prog-batt-full', Battery.charged);
|
||||
batteryWidget.tooltipText = `Battery: ${Battery.percent}%`
|
||||
}]],
|
||||
}),
|
||||
Widget.Revealer({ // A dot for charging state
|
||||
transitionDuration: 150,
|
||||
revealChild: false,
|
||||
transition: 'slide_left',
|
||||
child: Widget.Box({
|
||||
className: 'spacing-h-3',
|
||||
children: [
|
||||
Widget.Box({
|
||||
vpack: 'center',
|
||||
className: 'bar-batt-chargestate-charging-smaller',
|
||||
connections: [[Battery, box => {
|
||||
box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
|
||||
box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
|
||||
}]],
|
||||
}),
|
||||
Widget.Box({
|
||||
vpack: 'center',
|
||||
className: 'bar-batt-chargestate-charging',
|
||||
connections: [[Battery, box => {
|
||||
box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
|
||||
box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
|
||||
}]],
|
||||
}),
|
||||
]
|
||||
}),
|
||||
connections: [[Battery, revealer => {
|
||||
revealer.revealChild = Battery.charging;
|
||||
}]],
|
||||
}),
|
||||
],
|
||||
});
|
||||
const memUsage = Widget.Box({
|
||||
const UtilButton = ({ name, icon, onClicked }) => Button({
|
||||
vpack: 'center',
|
||||
tooltipText: name,
|
||||
onClicked: onClicked,
|
||||
className: 'bar-util-btn icon-material txt-norm',
|
||||
label: `${icon}`,
|
||||
})
|
||||
|
||||
const Utilities = () => Scrollable({
|
||||
hexpand: true,
|
||||
child: Box({
|
||||
hpack: 'center',
|
||||
className: 'spacing-h-5',
|
||||
children: [
|
||||
BarResourceValue('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
|
||||
BarResourceValue('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
|
||||
UtilButton({
|
||||
name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
|
||||
Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
|
||||
.catch(print)
|
||||
}
|
||||
}),
|
||||
UtilButton({
|
||||
name: 'Color picker', icon: 'colorize', onClicked: () => {
|
||||
Utils.execAsync(['hyprpicker', '-a']).catch(print)
|
||||
}
|
||||
}),
|
||||
UtilButton({
|
||||
name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
|
||||
App.toggleWindow('osk');
|
||||
}
|
||||
}),
|
||||
]
|
||||
})
|
||||
const widgetStack = Widget.Stack({
|
||||
transition: 'slide_up_down',
|
||||
vpack: 'center',
|
||||
hexpand: true,
|
||||
items: [
|
||||
['fallback', memUsage],
|
||||
['battery', batteryWidget],
|
||||
],
|
||||
setup: (stack) => Utils.timeout(1, () => {
|
||||
if (Battery.available) stack.shown = 'battery';
|
||||
else stack.shown = 'fallback';
|
||||
})
|
||||
})
|
||||
return widgetStack;
|
||||
}
|
||||
})
|
||||
|
||||
const BarBattery = () => Box({
|
||||
className: 'spacing-h-4 txt-onSurfaceVariant',
|
||||
children: [
|
||||
// Revealer({ // A dot for charging state
|
||||
// transitionDuration: 150,
|
||||
// revealChild: false,
|
||||
// transition: 'crossfade',
|
||||
// child: Widget.Box({
|
||||
// className: 'spacing-h-3',
|
||||
// children: [
|
||||
// Widget.Box({
|
||||
// vpack: 'center',
|
||||
// className: 'bar-batt-chargestate-charging-smaller',
|
||||
// setup: (self) => self.hook(Battery, box => {
|
||||
// box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
|
||||
// box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
|
||||
// }),
|
||||
// }),
|
||||
// Widget.Box({
|
||||
// vpack: 'center',
|
||||
// className: 'bar-batt-chargestate-charging',
|
||||
// setup: (self) => self.hook(Battery, box => {
|
||||
// box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
|
||||
// box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
|
||||
// }),
|
||||
// }),
|
||||
// ]
|
||||
// }),
|
||||
// setup: (self) => self.hook(Battery, revealer => {
|
||||
// revealer.revealChild = Battery.charging;
|
||||
// }),
|
||||
// }),
|
||||
Stack({
|
||||
transition: 'slide_up_down',
|
||||
items: [
|
||||
['discharging', Widget.Label({
|
||||
className: 'txt-norm txt',
|
||||
label: '•',
|
||||
}),],
|
||||
['charging', MaterialIcon('bolt', 'norm')],
|
||||
],
|
||||
setup: (self) => self.hook(Battery, revealer => {
|
||||
self.shown = Battery.charging ? 'charging' : 'discharging';
|
||||
}),
|
||||
}),
|
||||
Label({
|
||||
className: 'txt-smallie txt-onSurfaceVariant',
|
||||
setup: (self) => self.hook(Battery, label => {
|
||||
label.label = `${Battery.percent}%`;
|
||||
}),
|
||||
}),
|
||||
Overlay({
|
||||
child: Widget.Box({
|
||||
vpack: 'center',
|
||||
className: 'bar-batt',
|
||||
homogeneous: true,
|
||||
children: [
|
||||
MaterialIcon('settings_heart', 'small'),
|
||||
],
|
||||
setup: (self) => self.hook(Battery, box => {
|
||||
box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
|
||||
box.toggleClassName('bar-batt-full', Battery.charged);
|
||||
}),
|
||||
}),
|
||||
overlays: [
|
||||
BatBatteryProgress(),
|
||||
]
|
||||
}),
|
||||
]
|
||||
});
|
||||
|
||||
export const ModuleSystem = () => Widget.EventBox({
|
||||
onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
|
||||
onScrollDown: () => execAsync('hyprctl dispatch workspace +1'),
|
||||
onPrimaryClick: () => App.toggleWindow('sideright'),
|
||||
child: Widget.Box({
|
||||
className: 'bar-group-margin bar-sides',
|
||||
children: [
|
||||
Widget.Box({
|
||||
className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-15',
|
||||
className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
|
||||
children: [
|
||||
BarClock(),
|
||||
Utilities(),
|
||||
BarBattery(),
|
||||
],
|
||||
}),
|
||||
|
||||
@@ -10,7 +10,13 @@ const SysTrayItem = item => Button({
|
||||
className: 'bar-systray-item',
|
||||
child: Icon({
|
||||
hpack: 'center',
|
||||
binds: [['icon', item, 'icon']]
|
||||
binds: [['icon', item, 'icon']],
|
||||
setup: (self) => Utils.timeout(1, () => {
|
||||
const styleContext = self.get_parent().get_style_context();
|
||||
const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
|
||||
const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
|
||||
self.size = Math.max(width, height, 1); // im too lazy to add another box lol
|
||||
}),
|
||||
}),
|
||||
binds: [['tooltipMarkup', item, 'tooltip-markup']],
|
||||
onClicked: btn => item.menu.popup_at_widget(btn, Gravity.SOUTH, Gravity.NORTH, null),
|
||||
@@ -19,8 +25,7 @@ const SysTrayItem = item => Button({
|
||||
|
||||
export const Tray = (props = {}) => {
|
||||
const trayContent = Box({
|
||||
vpack: 'center',
|
||||
className: 'bar-systray bar-group',
|
||||
className: 'bar-systray spacing-h-10',
|
||||
properties: [
|
||||
['items', new Map()],
|
||||
['onAdded', (box, id) => {
|
||||
@@ -31,7 +36,7 @@ export const Tray = (props = {}) => {
|
||||
return;
|
||||
const widget = SysTrayItem(item);
|
||||
box._items.set(id, widget);
|
||||
box.pack_start(widget, false, false, 0);
|
||||
box.add(widget);
|
||||
box.show_all();
|
||||
if (box._items.size === 1)
|
||||
trayRevealer.revealChild = true;
|
||||
@@ -46,10 +51,10 @@ export const Tray = (props = {}) => {
|
||||
trayRevealer.revealChild = false;
|
||||
}],
|
||||
],
|
||||
connections: [
|
||||
[SystemTray, (box, id) => box._onAdded(box, id), 'added'],
|
||||
[SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
|
||||
],
|
||||
setup: (self) => self
|
||||
.hook(SystemTray, (box, id) => box._onAdded(box, id), 'added')
|
||||
.hook(SystemTray, (box, id) => box._onRemoved(box, id), 'removed')
|
||||
,
|
||||
});
|
||||
const trayRevealer = Widget.Revealer({
|
||||
revealChild: false,
|
||||
|
||||
@@ -1,100 +1,169 @@
|
||||
const { GLib, Gdk, Gtk } = imports.gi;
|
||||
const Lang = imports.lang;
|
||||
const Cairo = imports.cairo;
|
||||
const Pango = imports.gi.Pango;
|
||||
const PangoCairo = imports.gi.PangoCairo;
|
||||
import { App, Service, Utils, Widget } from '../../imports.js';
|
||||
const { Box, DrawingArea, EventBox } = Widget;
|
||||
import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
|
||||
|
||||
const WORKSPACE_SIDE_PAD = 0.546; // rem
|
||||
const NUM_OF_WORKSPACES = 10;
|
||||
let lastWorkspace = 0;
|
||||
const dummyWs = Box({ className: 'bar-ws' }); // Not shown. Only for getting size props
|
||||
const dummyActiveWs = Box({ className: 'bar-ws bar-ws-active' }); // Not shown. Only for getting size props
|
||||
const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not shown. Only for getting size props
|
||||
|
||||
const activeWorkspaceIndicator = Widget.Box({
|
||||
css: `
|
||||
padding: 0rem ${WORKSPACE_SIDE_PAD}rem;
|
||||
`,
|
||||
children: [
|
||||
Widget.Box({
|
||||
vpack: 'center',
|
||||
hpack: 'start',
|
||||
className: 'bar-ws-active-box',
|
||||
connections: [
|
||||
[Hyprland.active.workspace, (box) => {
|
||||
const ws = Hyprland.active.workspace.id;
|
||||
box.setCss(`
|
||||
margin-left: ${1.774 * (ws - 1) + 0.068}rem;
|
||||
`);
|
||||
lastWorkspace = ws;
|
||||
}],
|
||||
],
|
||||
children: [
|
||||
Widget.Label({
|
||||
vpack: 'center',
|
||||
className: 'bar-ws-active',
|
||||
label: `•`,
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
// Font size = workspace id
|
||||
const WorkspaceContents = (count = 10) => {
|
||||
return DrawingArea({
|
||||
properties: [
|
||||
['workspaceMask', 0],
|
||||
],
|
||||
css: `transition: 500ms cubic-bezier(0.1, 1, 0, 1);`,
|
||||
setup: (area) => area
|
||||
.hook(Hyprland.active.workspace, (area) =>
|
||||
area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
|
||||
)
|
||||
.hook(Hyprland, (area) => {
|
||||
const workspaces = Hyprland.workspaces;
|
||||
let workspaceMask = 0;
|
||||
for (let i = 0; i < workspaces.length; i++) {
|
||||
const ws = workspaces[i];
|
||||
if (ws.id < 0) continue; // Ignore scratchpads
|
||||
if (ws.id > count) return; // Not rendered
|
||||
if (workspaces[i].windows > 0) {
|
||||
workspaceMask |= (1 << ws.id);
|
||||
}
|
||||
}
|
||||
area._workspaceMask = workspaceMask;
|
||||
}, 'notify::workspaces')
|
||||
.on('draw', Lang.bind(area, (area, cr) => {
|
||||
const allocation = area.get_allocation();
|
||||
const { width, height } = allocation;
|
||||
|
||||
export const ModuleWorkspaces = () => Widget.EventBox({
|
||||
onScrollUp: () => Utils.execAsync(['bash', '-c', 'hyprctl dispatch workspace -1 &']),
|
||||
onScrollDown: () => Utils.execAsync(['bash', '-c', 'hyprctl dispatch workspace +1 &']),
|
||||
const workspaceStyleContext = dummyWs.get_style_context();
|
||||
const workspaceDiameter = workspaceStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
|
||||
const workspaceRadius = workspaceDiameter / 2;
|
||||
const workspaceFontSize = workspaceStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 4 * 3;
|
||||
const workspaceFontFamily = workspaceStyleContext.get_property('font-family', Gtk.StateFlags.NORMAL);
|
||||
const wsbg = workspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const wsfg = workspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const occupiedWorkspaceStyleContext = dummyOccupiedWs.get_style_context();
|
||||
const occupiedbg = occupiedWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const occupiedfg = occupiedWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const activeWorkspaceStyleContext = dummyActiveWs.get_style_context();
|
||||
const activebg = activeWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
|
||||
const activefg = activeWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
|
||||
area.set_size_request(workspaceDiameter * count, -1);
|
||||
const widgetStyleContext = area.get_style_context();
|
||||
const activeWs = widgetStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
|
||||
|
||||
const activeWsCenterX = -(workspaceDiameter / 2) + (workspaceDiameter * activeWs);
|
||||
const activeWsCenterY = height / 2;
|
||||
|
||||
// Font
|
||||
const layout = PangoCairo.create_layout(cr);
|
||||
const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
|
||||
layout.set_font_description(fontDesc);
|
||||
cr.setAntialias(Cairo.Antialias.BEST);
|
||||
// Get kinda min radius for number indicators
|
||||
layout.set_text("0".repeat(count.toString().length), -1);
|
||||
const [layoutWidth, layoutHeight] = layout.get_pixel_size();
|
||||
const indicatorRadius = Math.max(layoutWidth, layoutHeight) / 2 * 1.2; // a bit smaller than sqrt(2)*radius
|
||||
const indicatorGap = workspaceRadius - indicatorRadius;
|
||||
|
||||
// Draw workspace numbers
|
||||
for (let i = 1; i <= count; i++) {
|
||||
if (area._workspaceMask & (1 << i)) {
|
||||
// Draw bg highlight
|
||||
cr.setSourceRGBA(occupiedbg.red, occupiedbg.green, occupiedbg.blue, occupiedbg.alpha);
|
||||
const wsCenterX = -(workspaceRadius) + (workspaceDiameter * i);
|
||||
const wsCenterY = height / 2;
|
||||
if (!(area._workspaceMask & (1 << (i - 1)))) { // Left
|
||||
cr.arc(wsCenterX, wsCenterY, workspaceRadius, 0.5 * Math.PI, 1.5 * Math.PI);
|
||||
cr.fill();
|
||||
}
|
||||
else {
|
||||
cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
|
||||
cr.fill();
|
||||
}
|
||||
if (!(area._workspaceMask & (1 << (i + 1)))) { // Right
|
||||
cr.arc(wsCenterX, wsCenterY, workspaceRadius, -0.5 * Math.PI, 0.5 * Math.PI);
|
||||
cr.fill();
|
||||
}
|
||||
else {
|
||||
cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
|
||||
cr.fill();
|
||||
}
|
||||
|
||||
// Set color for text
|
||||
cr.setSourceRGBA(occupiedfg.red, occupiedfg.green, occupiedfg.blue, occupiedfg.alpha);
|
||||
}
|
||||
else
|
||||
cr.setSourceRGBA(wsfg.red, wsfg.green, wsfg.blue, wsfg.alpha);
|
||||
layout.set_text(`${i}`, -1);
|
||||
const [layoutWidth, layoutHeight] = layout.get_pixel_size();
|
||||
const x = -workspaceRadius + (workspaceDiameter * i) - (layoutWidth / 2);
|
||||
const y = (height - layoutHeight) / 2;
|
||||
cr.moveTo(x, y);
|
||||
// cr.showText(text);
|
||||
PangoCairo.show_layout(cr, layout);
|
||||
cr.stroke();
|
||||
}
|
||||
|
||||
// Draw active ws
|
||||
// base
|
||||
cr.setSourceRGBA(activebg.red, activebg.green, activebg.blue, activebg.alpha);
|
||||
cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius, 0, 2 * Math.PI);
|
||||
cr.fill();
|
||||
// inner decor
|
||||
cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
|
||||
cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
|
||||
cr.fill();
|
||||
}))
|
||||
,
|
||||
})
|
||||
}
|
||||
|
||||
export default () => EventBox({
|
||||
onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
|
||||
onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
|
||||
onMiddleClickRelease: () => App.toggleWindow('overview'),
|
||||
onSecondaryClickRelease: () => App.toggleWindow('osk'),
|
||||
child: Widget.Box({
|
||||
properties: [
|
||||
['clicked', false],
|
||||
],
|
||||
child: Box({
|
||||
homogeneous: true,
|
||||
className: 'bar-ws-width',
|
||||
children: [
|
||||
Widget.Overlay({
|
||||
passThrough: true,
|
||||
child: Widget.Box({
|
||||
homogeneous: true,
|
||||
className: 'bar-group-center',
|
||||
children: [Widget.Box({
|
||||
className: 'bar-group-standalone bar-group-pad',
|
||||
})]
|
||||
}),
|
||||
overlays: [
|
||||
Widget.Overlay({
|
||||
setup: (self) => self.set_overlay_pass_through(self.get_children()[1], true),
|
||||
child: Widget.Box({
|
||||
hpack: 'center',
|
||||
css: `
|
||||
padding: 0rem ${WORKSPACE_SIDE_PAD}rem;
|
||||
`,
|
||||
// homogeneous: true,
|
||||
children: Array.from({ length: NUM_OF_WORKSPACES }, (_, i) => i + 1).map(i => Widget.Button({
|
||||
onPrimaryClick: () => Utils.execAsync(['bash', '-c', `hyprctl dispatch workspace ${i} &`]).catch(print),
|
||||
child: Widget.Label({
|
||||
vpack: 'center',
|
||||
label: `${i}`,
|
||||
className: 'bar-ws txt',
|
||||
}),
|
||||
})),
|
||||
connections: [
|
||||
[Hyprland, (box) => {
|
||||
// console.log('update');
|
||||
const kids = box.children;
|
||||
kids.forEach((child, i) => {
|
||||
child.child.toggleClassName('bar-ws-occupied', false);
|
||||
child.child.toggleClassName('bar-ws-occupied-left', false);
|
||||
child.child.toggleClassName('bar-ws-occupied-right', false);
|
||||
child.child.toggleClassName('bar-ws-occupied-left-right', false);
|
||||
});
|
||||
const occupied = Array.from({ length: NUM_OF_WORKSPACES }, (_, i) => Hyprland.getWorkspace(i + 1)?.windows > 0);
|
||||
for (let i = 0; i < occupied.length; i++) {
|
||||
if (!occupied[i]) continue;
|
||||
const child = kids[i];
|
||||
child.child.toggleClassName(`bar-ws-occupied${!occupied[i - 1] ? '-left' : ''}${!occupied[i + 1] ? '-right' : ''}`, true);
|
||||
}
|
||||
}, 'notify::workspaces'],
|
||||
],
|
||||
}),
|
||||
overlays: [
|
||||
activeWorkspaceIndicator,
|
||||
]
|
||||
})
|
||||
],
|
||||
})
|
||||
]
|
||||
})
|
||||
});
|
||||
className: 'bar-group-margin',
|
||||
children: [Box({
|
||||
className: 'bar-group bar-group-standalone bar-group-pad',
|
||||
css: 'min-width: 2px;',
|
||||
children: [
|
||||
WorkspaceContents(10),
|
||||
]
|
||||
})]
|
||||
}),
|
||||
setup: (self) => {
|
||||
self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
|
||||
self.on('motion-notify-event', (self, event) => {
|
||||
if (!self._clicked) return;
|
||||
console.log('switching move');
|
||||
const [_, cursorX, cursorY] = event.get_coords();
|
||||
const widgetWidth = self.get_allocation().width;
|
||||
const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
|
||||
Hyprland.sendMessage(`dispatch workspace ${wsId}`)
|
||||
})
|
||||
self.on('button-press-event', (self, event) => {
|
||||
if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
|
||||
console.log('switching');
|
||||
self._clicked = true;
|
||||
const [_, cursorX, cursorY] = event.get_coords();
|
||||
const widgetWidth = self.get_allocation().width;
|
||||
const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
|
||||
Hyprland.sendMessage(`dispatch workspace ${wsId}`);
|
||||
})
|
||||
self.on('button-release-event', (self) => self._clicked = false);
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user