ags: sync

2024-02-05 13:20:00 +07:00
parent 14368314e5
commit 73c8454c1c
61 changed files with 1327 additions and 1220 deletions
@@ -83,22 +83,22 @@ export const AnimatedCircProg = ({

        // Init animation
        if (initFrom != initTo) {
-            // area.css = `font-size: ${initFrom}px; transition: ${initAnimTime}ms linear;`;
+            area.css = `font-size: ${initFrom}px; transition: ${initAnimTime}ms linear;`;
            Utils.timeout(20, () => {
                area.css = `font-size: ${initTo}px;`;
            }, area)
-            // const transitionDistance = initTo - initFrom;
-            // const oneStep = initAnimTime / initAnimPoints;
-            // area.css = `
-            //     font-size: ${initFrom}px;
-            //     transition: ${oneStep}ms linear;
-            // `;
-            // for (let i = 0; i < initAnimPoints; i++) {
-            //     Utils.timeout(Math.max(10, i * oneStep), () => {
-            //         if(!area) return;
-            //         area.css = `${initFrom != initTo ? 'font-size: ' + (initFrom + (transitionDistance / initAnimPoints * (i + 1))) + 'px;' : ''}`;
-            //     });
-            // }
+            const transitionDistance = initTo - initFrom;
+            const oneStep = initAnimTime / initAnimPoints;
+            area.css = `
+                font-size: ${initFrom}px;
+                transition: ${oneStep}ms linear;
+            `;
+            for (let i = 0; i < initAnimPoints; i++) {
+                Utils.timeout(Math.max(10, i * oneStep), () => {
+                    if(!area) return;
+                    area.css = `${initFrom != initTo ? 'font-size: ' + (initFrom + (transitionDistance / initAnimPoints * (i + 1))) + 'px;' : ''}`;
+                });
+            }
        }
        else area.css = 'font-size: 0px;';
        extraSetup(area);
@@ -1,6 +1,6 @@
 const { Gdk } = imports.gi;

-export function setupCursorHover(button) {
+export function setupCursorHover(button) { // Hand pointing cursor on hover
    const display = Gdk.Display.get_default();
    button.connect('enter-notify-event', () => {
        const cursor = Gdk.Cursor.new_from_name(display, 'pointer');
@@ -14,7 +14,7 @@ export function setupCursorHover(button) {

 }

-export function setupCursorHoverAim(button) {
+export function setupCursorHoverAim(button) { // Crosshair cursor on hover
    button.connect('enter-notify-event', () => {
        const display = Gdk.Display.get_default();
        const cursor = Gdk.Cursor.new_from_name(display, 'crosshair');
@@ -28,7 +28,7 @@ export function setupCursorHoverAim(button) {
    });
 }

-export function setupCursorHoverGrab(button) {
+export function setupCursorHoverGrab(button) { // Hand ready to grab on hover
    button.connect('enter-notify-event', () => {
        const display = Gdk.Display.get_default();
        const cursor = Gdk.Cursor.new_from_name(display, 'grab');
@@ -42,7 +42,7 @@ export function setupCursorHoverGrab(button) {
    });
 }

-export function setupCursorHoverInfo(button) {
+export function setupCursorHoverInfo(button) { // "?" mark cursor on hover
    const display = Gdk.Display.get_default();
    button.connect('enter-notify-event', () => {
        const cursor = Gdk.Cursor.new_from_name(display, 'help');
@@ -55,43 +55,3 @@ export function setupCursorHoverInfo(button) {
    });
 }

-// failed radial ripple experiment
-//
-// var clicked = false;
-// var dummy = false;
-// var cursorX = 0;
-// var cursorY = 0;
-// const styleContext = button.get_style_context();
-// var clickColor = styleContext.get_property('background-color', Gtk.StateFlags.HOVER);
-// clickColor.green += CLICK_BRIGHTEN_AMOUNT;
-// clickColor.blue += CLICK_BRIGHTEN_AMOUNT;
-// clickColor.red += CLICK_BRIGHTEN_AMOUNT;
-// clickColor = clickColor.to_string();
-// button.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
-// button.connect('motion-notify-event', (widget, event) => {
-//     [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
-//     if(!clicked) widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
-//     `;
-// });
-
-// button.connect('button-press-event', (widget, event) => {
-//     clicked = true;
-//     [dummy, cursorX, cursorY] = event.get_coords(); // Get the mouse coordinates relative to the widget
-//     cursorX = Math.round(cursorX); cursorY = Math.round(cursorY);
-//     widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%);
-//     `;
-//     widget.toggleClassName('growingRadial', true);
-//     widget.css = `
-//         background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, ${clickColor} 0%, ${clickColor} 0%, ${clickColor} 70%, ${clickColor} 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
-//     `
-// });
-// button.connect('button-release-event', (widget, event) => {
-//     widget.toggleClassName('growingRadial', false);
-//     widget.toggleClassName('fadingRadial', false);
-//     widget.css = `
-//     background-image: radial-gradient(circle at ${cursorX}px ${cursorY}px, rgba(0,0,0,0), rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%, rgba(0,0,0,0) 70%);
-//     `
-//     clicked = false;
-// });
@@ -20,6 +20,10 @@ function guessMessageType(summary) {
    return 'chat';
 }

+function exists(widget) {
+    return widget !== null;
+}
+
 const NotificationIcon = (notifObject) => {
    // { appEntry, appIcon, image }, urgency = 'normal'
    if (notifObject.image) {
@@ -71,9 +75,9 @@ const NotificationIcon = (notifObject) => {
 export default ({
    notifObject,
    isPopup = false,
-    popupTimeout = 3000,
    props = {},
 } = {}) => {
+    const popupTimeout = notifObject.timeout || (notifObject.urgency == 'critical' ? 8000 : 3000);
    const command = (isPopup ?
        () => notifObject.dismiss() :
        () => notifObject.close()
@@ -82,11 +86,14 @@ export default ({
        widget.sensitive = false;
        notificationBox.setCss(middleClickClose);
        Utils.timeout(200, () => {
-            wholeThing.revealChild = false;
+            if (wholeThing) wholeThing.revealChild = false;
        }, wholeThing);
        Utils.timeout(400, () => {
            command();
-            wholeThing.destroy();
+            if (wholeThing) {
+                wholeThing.destroy();
+                wholeThing = null;
+            }
        }, wholeThing);
    }
    const widget = EventBox({
@@ -105,22 +112,39 @@ export default ({
        },
        onMiddleClick: (self) => {
            destroyWithAnims();
+        },
+        setup: (self) => {
+            self.on("button-press-event", () => {
+                wholeThing.attribute.held = true;
+                notificationContent.toggleClassName(`${isPopup ? 'popup-' : ''}notif-clicked-${notifObject.urgency}`, true);
+                Utils.timeout(800, () => {
+                    if (wholeThing?.attribute.held) {
+                        Utils.execAsync(['wl-copy', `${notifObject.body}`])
+                        notifTextSummary.label = notifObject.summary + " (copied)";
+                        Utils.timeout(3000, () => notifTextSummary.label = notifObject.summary)
+                    }
+                })
+            }).on("button-release-event", () => {
+                wholeThing.attribute.held = false;
+                notificationContent.toggleClassName(`${isPopup ? 'popup-' : ''}notif-clicked-${notifObject.urgency}`, false);
+            })
        }
    });
-    const wholeThing = Revealer({
+    let wholeThing = Revealer({
        attribute: {
-            'id': notifObject.id,
            'close': undefined,
-            'hovered': false,
+            'destroyWithAnims': destroyWithAnims,
            'dragging': false,
-            'destroyWithAnims': () => destroyWithAnims,
+            'held': false,
+            'hovered': false,
+            'id': notifObject.id,
        },
        revealChild: false,
        transition: 'slide_down',
        transitionDuration: 200,
        child: Box({ // Box to make sure css-based spacing works
            homogeneous: true,
-        })
+        }),
    });

    const display = Gdk.Display.get_default();
@@ -205,6 +229,23 @@ export default ({
        notifTime = 'Yesterday';
    else
        notifTime = messageTime.format('%d/%m');
+    const notifTextSummary = Label({
+        xalign: 0,
+        className: 'txt-small txt-semibold titlefont',
+        justify: Gtk.Justification.LEFT,
+        hexpand: true,
+        maxWidthChars: 24,
+        truncate: 'end',
+        ellipsize: 3,
+        useMarkup: notifObject.summary.startsWith('<'),
+        label: notifObject.summary,
+    });
+    const notifTextBody = Label({
+        vpack: 'center',
+        justification: 'right',
+        className: 'txt-smaller txt-semibold',
+        label: notifTime,
+    });
    const notifText = Box({
        valign: Gtk.Align.CENTER,
        vertical: true,
@@ -212,23 +253,8 @@ export default ({
        children: [
            Box({
                children: [
-                    Label({
-                        xalign: 0,
-                        className: 'txt-small txt-semibold titlefont',
-                        justify: Gtk.Justification.LEFT,
-                        hexpand: true,
-                        maxWidthChars: 24,
-                        truncate: 'end',
-                        ellipsize: 3,
-                        useMarkup: notifObject.summary.startsWith('<'),
-                        label: notifObject.summary,
-                    }),
-                    Label({
-                        vpack: 'center',
-                        justification: 'right',
-                        className: 'txt-smaller txt-semibold',
-                        label: notifTime,
-                    }),
+                    notifTextSummary,
+                    notifTextBody,
                ]
            }),
            notifTextPreview,
@@ -313,6 +339,7 @@ export default ({
            .hook(gesture, self => {
                var offset_x = gesture.get_offset()[1];
                var offset_y = gesture.get_offset()[2];
+                // Which dir?
                if (initDirVertical == -1) {
                    if (Math.abs(offset_y) > MOVE_THRESHOLD)
                        initDirVertical = 1;
@@ -321,7 +348,7 @@ export default ({
                        initDirX = (offset_x > 0 ? 1 : -1);
                    }
                }
-
+                // Horizontal drag
                if (initDirVertical == 0 && offset_x > MOVE_THRESHOLD) {
                    if (initDirX < 0)
                        self.setCss(`margin-left: 0px; margin-right: 0px;`);
@@ -342,12 +369,12 @@ export default ({
                        `);
                    }
                }
-
-                wholeThing.attribute.dragging = Math.abs(offset_x) > 10;
-
-                if (widget.window)
-                    widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
-
+                // Update dragging
+                wholeThing.attribute.dragging = Math.abs(offset_x) > MOVE_THRESHOLD;
+                if (Math.abs(offset_x) > MOVE_THRESHOLD ||
+                    Math.abs(offset_y) > MOVE_THRESHOLD) wholeThing.attribute.held = false;
+                widget.window?.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
+                // Vertical drag
                if (initDirVertical == 1 && offset_y > MOVE_THRESHOLD && !expanded) {
                    notifTextPreview.revealChild = false;
                    notifTextExpanded.revealChild = true;
@@ -380,11 +407,14 @@ export default ({
                        widget.sensitive = false;
                    }
                    Utils.timeout(200, () => {
-                        wholeThing.revealChild = false
+                        if (wholeThing) wholeThing.revealChild = false;
                    }, wholeThing);
                    Utils.timeout(400, () => {
                        command();
-                        wholeThing.destroy();
+                        if (wholeThing) {
+                            wholeThing.destroy();
+                            wholeThing = null;
+                        }
                    }, wholeThing);
                }
                else {
@@ -405,6 +435,17 @@ export default ({
    })
    widget.add(notificationBox);
    wholeThing.child.children = [widget];
-
+    if (isPopup) Utils.timeout(popupTimeout, () => {
+        if (wholeThing) {
+            wholeThing.revealChild = false;
+            Utils.timeout(200, () => {
+                if (wholeThing) {
+                    wholeThing.destroy();
+                    wholeThing = null;
+                }
+                command();
+            }, wholeThing);
+        }
+    })
    return wholeThing;
 }
@@ -73,10 +73,10 @@ export const NotificationIndicator = (notifCenterName = 'sideright') => {

 export const BluetoothIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['false', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' })],
-        ['true', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' })],
-    ],
+    children: {
+        'false': Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' }),
+        'true': Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' }),
+    },
    setup: (self) => self
        .hook(Bluetooth, stack => {
            stack.shown = String(Bluetooth.enabled);
@@ -87,13 +87,13 @@ export const BluetoothIndicator = () => Widget.Stack({

 const NetworkWiredIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['fallback', SimpleNetworkIndicator()],
-        ['unknown', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
-        ['connected', Widget.Label({ className: 'txt-norm icon-material', label: 'lan' })],
-        ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
-    ],
+    children: {
+        'fallback': SimpleNetworkIndicator(),
+        'unknown': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
+        'disconnected': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' }),
+        'connected': Widget.Label({ className: 'txt-norm icon-material', label: 'lan' }),
+        'connecting': Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' }),
+    },
    setup: (self) => self.hook(Network, stack => {
        if (!Network.wired)
            return;
@@ -118,16 +118,16 @@ const SimpleNetworkIndicator = () => Widget.Icon({

 const NetworkWifiIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['disabled', Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' })],
-        ['disconnected', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' })],
-        ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
-        ['0', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' })],
-        ['1', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_1_bar' })],
-        ['2', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_2_bar' })],
-        ['3', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' })],
-        ['4', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' })],
-    ],
+    children: {
+        'disabled': Widget.Label({ className: 'txt-norm icon-material', label: 'wifi_off' }),
+        'disconnected': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_off' }),
+        'connecting': Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' }),
+        '0': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_0_bar' }),
+        '1': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_1_bar' }),
+        '2': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_2_bar' }),
+        '3': Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' }),
+        '4': Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' }),
+    },
    setup: (self) => self.hook(Network, (stack) => {
        if (!Network.wifi) {
            return;
@@ -143,11 +143,11 @@ const NetworkWifiIndicator = () => Widget.Stack({

 export const NetworkIndicator = () => Widget.Stack({
    transition: 'slide_up_down',
-    items: [
-        ['fallback', SimpleNetworkIndicator()],
-        ['wifi', NetworkWifiIndicator()],
-        ['wired', NetworkWiredIndicator()],
-    ],
+    children: {
+        'fallback': SimpleNetworkIndicator(),
+        'wifi': NetworkWifiIndicator(),
+        'wired': NetworkWiredIndicator(),
+    },
    setup: (self) => self.hook(Network, stack => {
        if (!Network.primary) {
            stack.shown = 'wifi';
@@ -176,14 +176,21 @@ const HyprlandXkbKeyboardLayout = async ({ useFlag } = {}) => {
            }
            languageStackArray = Array.from({ length: initLangs.length }, (_, i) => {
                const lang = languages.find(lang => lang.layout == initLangs[i]);
-                if (!lang) return [
-                    initLangs[i],
-                    Widget.Label({ label: initLangs[i] })
-                ];
-                return [
-                    lang.layout,
-                    Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
-                ];
+                // if (!lang) return [
+                //     initLangs[i],
+                //     Widget.Label({ label: initLangs[i] })
+                // ];
+                // return [
+                //     lang.layout,
+                //     Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
+                // ];
+                // Object
+                if (!lang) return {
+                    [initLangs[i]]: Widget.Label({ label: initLangs[i] })
+                };
+                return {
+                    [lang.layout]: Widget.Label({ label: (useFlag ? lang.flag : lang.layout) })
+                };
            });
        };
        updateCurrentKeyboards();
@@ -192,12 +199,15 @@ const HyprlandXkbKeyboardLayout = async ({ useFlag } = {}) => {
            transition: 'slide_left',
            revealChild: languageStackArray.length > 1,
        });
+        const widgetKids = {
+            ...languageStackArray.reduce((obj, lang) => {
+                return { ...obj, ...lang };
+            }, {}),
+            'undef': Widget.Label({ label: '?' }),
+        }
        const widgetContent = Widget.Stack({
            transition: 'slide_up_down',
-            items: [
-                ...languageStackArray,
-                ['undef', Widget.Label({ label: '?' })]
-            ],
+            children: widgetKids,
            setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
                if (!kbName) {
                    return;