Merge branch 'end-4:main' into feat/sticky

2025-11-09 11:44:33 +05:30
parent 819735169b f678a55e6a
commit eccfec4671
36 changed files with 931 additions and 105 deletions
@@ -58,7 +58,7 @@ Item {

    property var keyBlacklist: ["Super_L"]
    property var keySubstitutions: Object.assign({
-        "Super": "󰖳",
+        "Super": "",
        "mouse_up": "Scroll ↓",    // ikr, weird
        "mouse_down": "Scroll ↑",  // trust me bro
        "mouse:272": "LMB",
@@ -272,7 +272,7 @@ Singleton {
                // 0: 󰖳  | 1: 󰌽 | 2: 󰘳 | 3:  | 4: 󰨡
                // 5:  | 6:  | 7: 󰣇 | 8:  | 9: 
                // 10:  | 11:  | 12:  | 13:  | 14: 󱄛
-                property string superKey: "󰖳"
+                property string superKey: ""
                property bool useMacSymbol: false
                property bool splitButtons: true
                property bool useMouseSymbol: false
@@ -84,20 +84,26 @@ Singleton {
                property JsonObject crosshair: JsonObject {
                    property bool pinned: false
                    property bool clickthrough: true
-                    property real x: 835
-                    property real y: 483
+                    property real x: 827
+                    property real y: 441
+                    property real width: 250
+                    property real height: 100
                }
                property JsonObject recorder: JsonObject {
                    property bool pinned: false
                    property bool clickthrough: false
                    property real x: 80
                    property real y: 80
+                    property real width: 350
+                    property real height: 130
                }
                property JsonObject resources: JsonObject {
                    property bool pinned: false
                    property bool clickthrough: true
                    property real x: 1500
                    property real y: 770
+                    property real width: 350
+                    property real height: 200
                    property int tabIndex: 0
                }
                property JsonObject volumeMixer: JsonObject {
@@ -105,6 +111,8 @@ Singleton {
                    property bool clickthrough: false
                    property real x: 80
                    property real y: 280
+                    property real width: 350
+                    property real height: 600
                    property int tabIndex: 0
                }
                property JsonObject fpsLimiter: JsonObject {
@@ -112,6 +120,8 @@ Singleton {
                    property bool clickthrough: false
                    property real x: 1576
                    property real y: 630
+                    property real width: 280
+                    property real height: 80
                }
                property JsonObject stickypad: JsonObject {
                    property bool pinned: true
@@ -0,0 +1,15 @@
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Controls
+import qs.modules.common
+
+ComboBox {
+    id: root
+    
+    Material.theme: Material.System
+    Material.accent: Appearance.m3colors.m3primary
+    Material.primary: Appearance.m3colors.m3primary
+    Material.background: Appearance.m3colors.m3surface
+    Material.foreground: Appearance.m3colors.m3onSurface
+    Material.containerStyle: Material.Outlined
+}
@@ -12,7 +12,7 @@ import Quickshell.Widgets
 * It doesn't exactly match the spec because it does not make sense to have stuff on a computer that fucking huge.
 * Should be at 3/4 scale...
 */
- 
+
 Slider {
    id: root

@@ -8,6 +8,8 @@ import qs.modules.common
 MouseArea {
    id: root

+    property alias animateXPos: xBehavior.enabled
+    property alias animateYPos: yBehavior.enabled
    property bool draggable: true
    drag.target: draggable ? root : undefined
    cursorShape: (draggable && containsPress) ? Qt.ClosedHandCursor : draggable ? Qt.OpenHandCursor : Qt.ArrowCursor
@@ -18,9 +20,11 @@ MouseArea {
    }

    Behavior on x {
+        id: xBehavior
        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
    }
    Behavior on y {
+        id: yBehavior
        animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
    }
 }
@@ -13,29 +13,67 @@ import qs.modules.common.widgets.widgetCanvas
 * To make an overlay widget:
 * 1. Create a modules/overlay/<yourWidget>/<YourWidget>.qml, using this as the base class and declare your widget content as contentItem
 * 2. Add an entry to OverlayContext.availableWidgets with identifier=<yourWidgetIdentifier>
- * 3. Add an entry in Persistent.states.overlay.<yourWidgetIdentifier> with x, y, pinned, clickthrough properties set to reasonable defaults
+ * 3. Add an entry in Persistent.states.overlay.<yourWidgetIdentifier> with x, y, width, height, pinned, clickthrough properties set to reasonable defaults
 * 4. Add an entry in OverlayWidgetDelegateChooser with roleValue=<yourWidgetIdentifier> and Declare your widget in there
 * Use existing entries as reference.
 */
 AbstractOverlayWidget {
    id: root

+    // To be defined by subclasses
    required property Item contentItem
    property bool fancyBorders: true
    property bool showCenterButton: false
    property bool showClickabilityButton: true

+    // Defaults n stuff
    required property var modelData
    readonly property string identifier: modelData.identifier
    readonly property string materialSymbol: modelData.materialSymbol ?? "widgets"
    property string title: identifier.replace(/([A-Z])/g, " $1").replace(/^./, function(str){ return str.toUpperCase(); })
    property var persistentStateEntry: Persistent.states.overlay[identifier]
    property real radius: Appearance.rounding.windowRounding
-    property real minWidth: 250
+    property real minimumWidth: 250
+    property real minimumHeight: 100
+    property real resizeMargin: 8
    property real padding: 6
    property real contentRadius: radius - padding

+    // Resizing
+    function getXResizeDirection(x) {
+        return (x < root.resizeMargin) ? -1 : (x > root.width - root.resizeMargin) ? 1 : 0
+    }
+    function getYResizeDirection(y) {
+        return (y < root.resizeMargin) ? -1 : (y > root.height - root.resizeMargin) ? 1 : 0
+    }
+    hoverEnabled: true
+    property bool resizable: true
+    property bool resizing: false
+    property int resizeXDirection: getXResizeDirection(mouseX)
+    property int resizeYDirection: getYResizeDirection(mouseY)
    draggable: GlobalStates.overlayOpen
+    drag.target: undefined
+    animateXPos: !dragHandler.active
+    animateYPos: !dragHandler.active
+    z: dragHandler.active ? 2 : 1
+    cursorShape: {
+        if (dragHandler.active) return root.resizing ? cursorShape : Qt.ArrowCursor;
+        if (resizeMargin < mouseX && mouseX < width - resizeMargin &&
+            resizeMargin < mouseY && mouseY < height - resizeMargin) {
+            return Qt.ArrowCursor;
+        } else {
+            if (!root.resizable) return Qt.ArrowCursor;
+            const dragIsLeft = mouseX < width / 2
+            const dragIsTop = mouseY < height / 2
+            if ((dragIsLeft && dragIsTop) || (!dragIsLeft && !dragIsTop)) {
+                return Qt.SizeFDiagCursor
+            } else {
+                return Qt.SizeBDiagCursor
+            }
+        }
+    }
+
+    // Positioning & sizing
    x: Math.round(persistentStateEntry.x) // Round or it'll be blurry
    y: Math.round(persistentStateEntry.y) // Round or it'll be blurry
    pinned: persistentStateEntry.pinned
@@ -68,7 +106,52 @@ AbstractOverlayWidget {
    }

    // Hooks
-    onReleased: savePosition();
+    onPressed: (event) => {
+        // We're only interested in handling resize here
+        // Early returns
+        if (!root.resizable) return;
+        if (root.resizeMargin < event.x && event.x < root.width - root.resizeMargin &&
+            root.resizeMargin < event.y && event.y < root.height - root.resizeMargin) {
+            return;
+        }
+        // Resizing setup
+        root.resizing = true;
+        root.resizeXDirection = getXResizeDirection(event.x);
+        root.resizeYDirection = getYResizeDirection(event.y);
+        if (root.resizeYDirection !== 0 && root.resizeXDirection === 0) {
+            root.resizeXDirection = event.x < root.width / 2 ? -1 : 1;
+        } else if (root.resizeXDirection !== 0 && root.resizeYDirection === 0) {
+            root.resizeYDirection = event.y < root.height / 2 ? -1 : 1;
+        }
+    }
+    onPositionChanged: (event) => {
+        if (!resizing) return;
+        contentContainer.implicitWidth = Math.max(root.persistentStateEntry.width + dragHandler.xAxis.activeValue * root.resizeXDirection, root.minimumWidth);
+        contentContainer.implicitHeight = Math.max(root.persistentStateEntry.height + dragHandler.yAxis.activeValue * root.resizeYDirection, root.minimumHeight);
+        const negativeXDrag = root.resizeXDirection === -1;
+        const negativeYDrag = root.resizeYDirection === -1;
+        const wantedX = root.persistentStateEntry.x + (negativeXDrag ? dragHandler.xAxis.activeValue : 0)
+        const wantedY = root.persistentStateEntry.y + (negativeYDrag ? dragHandler.yAxis.activeValue : 0)
+        const negativeXDragLimit = root.persistentStateEntry.x + root.persistentStateEntry.width - contentContainer.implicitWidth;
+        const negativeYDragLimit = root.persistentStateEntry.y + root.persistentStateEntry.height - contentContainer.implicitHeight;
+        root.x = negativeXDrag ? Math.min(wantedX, negativeXDragLimit) : wantedX;
+        root.y = negativeYDrag ? Math.min(wantedY, negativeYDragLimit) : wantedY;
+    }
+    DragHandler {
+        id: dragHandler
+        acceptedButtons: Qt.LeftButton | Qt.RightButton
+        target: (root.draggable && !root.resizing) ? root : null
+        onActiveChanged: { // Handle drag release
+            if (!active) {
+                root.resizing = false;
+                root.savePosition();
+            }
+        }
+        xAxis.minimum: 0
+        xAxis.maximum: root.parent?.width - root.width
+        yAxis.minimum: 0
+        yAxis.maximum: root.parent?.height - root.height
+    }

    function close() {
        Persistent.states.overlay.open = Persistent.states.overlay.open.filter(type => type !== root.identifier);
@@ -82,35 +165,36 @@ AbstractOverlayWidget {
        persistentStateEntry.clickthrough = !persistentStateEntry.clickthrough;
    }

-    function savePosition(xPos = root.x, yPos = root.y) {
-        persistentStateEntry.x = xPos;
-        persistentStateEntry.y = yPos;
+    function savePosition(xPos = root.x, yPos = root.y, width = contentContainer.implicitWidth, height = contentContainer.implicitHeight) {
+        persistentStateEntry.x = Math.round(xPos);
+        persistentStateEntry.y = Math.round(yPos);
+        persistentStateEntry.width = Math.round(width);
+        persistentStateEntry.height = Math.round(height);
    }

    function center() {
-        const targetX = (root.parent.width - contentColumn.width) / 2
-        const targetY = (root.parent.height - contentItem.height) / 2 - titleBar.implicitHeight + border.border.width
+        const targetX = (root.parent.width - contentColumn.width) / 2 - root.resizeMargin
+        const targetY = (root.parent.height - contentContainer.height) / 2 - titleBar.implicitHeight + border.border.width - root.resizeMargin
        root.x = targetX
        root.y = targetY
        root.savePosition(targetX, targetY)
    }

    visible: GlobalStates.overlayOpen || actuallyPinned
-    implicitWidth: Math.max(contentColumn.implicitWidth, minWidth)
-    implicitHeight: contentColumn.implicitHeight
+    implicitWidth: contentColumn.implicitWidth + resizeMargin * 2
+    implicitHeight: contentColumn.implicitHeight + resizeMargin * 2

    Rectangle {
        id: border
-        anchors.fill: parent
-        color: (root.fancyBorders && GlobalStates.overlayOpen) ? Appearance.colors.colLayer1 : "transparent"
+        anchors {
+            fill: parent
+            margins: root.resizeMargin
+        }
+        color: ColorUtils.transparentize(Appearance.colors.colLayer1, (root.fancyBorders && GlobalStates.overlayOpen) ? 0 : 1)
        radius: root.radius
        border.color: ColorUtils.transparentize(Appearance.colors.colOutlineVariant, GlobalStates.overlayOpen ? 0 : 1)
        border.width: 1

-        Behavior on color {
-            animation: Appearance.animation.elementMoveFast.colorAnimation.createObject(this)
-        }
-
        layer.enabled: GlobalStates.overlayOpen
        layer.effect: OpacityMask {
            maskSource: Rectangle {
@@ -205,8 +289,8 @@ AbstractOverlayWidget {
                Layout.margins: root.fancyBorders ? root.padding : 0
                Layout.topMargin: -border.border.width // Border of a rectangle is drawn inside its bounds, so we do this to make the gap not too big
                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-                implicitWidth: root.contentItem.implicitWidth
-                implicitHeight: root.contentItem.implicitHeight
+                implicitWidth: Math.max(root.persistentStateEntry.width, root.minimumWidth)
+                implicitHeight: Math.max(root.persistentStateEntry.height, root.minimumHeight)
                children: [root.contentItem]
            }
        }
@@ -11,6 +11,7 @@ StyledOverlayWidget {
    opacity: 1 // The crosshair itself already has transparency if configured
    showClickabilityButton: false
    clickthrough: true
+    resizable: false

    contentItem: CrosshairContent {
        anchors.centerIn: parent
@@ -6,6 +6,8 @@ import qs.modules.overlay
 StyledOverlayWidget {
    id: root
    title: "MangoHud FPS"
+    minimumWidth: 275
+    minimumHeight: 100
    contentItem: FpsLimiterContent {
        radius: root.contentRadius
    }
@@ -9,25 +9,22 @@ import qs.modules.overlay

 StyledOverlayWidget {
    id: root
+    minimumWidth: 310
+    minimumHeight: 130

    contentItem: Rectangle {
        id: contentItem
-        anchors.centerIn: parent
+        anchors.fill: parent
        radius: root.contentRadius
        color: Appearance.m3colors.m3surfaceContainer
        property real padding: 8
-        implicitHeight: contentColumn.implicitHeight + padding * 2
-        implicitWidth: 350
        ColumnLayout {
            id: contentColumn
-            anchors {
-                fill: parent
-                margins: parent.padding
-            }
+            anchors.centerIn: parent
            spacing: 10

            Row {
-                Layout.alignment: Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                spacing: 10

                BigRecorderButton {
@@ -68,7 +65,7 @@ StyledOverlayWidget {
            }

            RippleButton {
-                Layout.alignment: Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
                Layout.fillWidth: false
                buttonRadius: height / 2
                colBackground: Appearance.colors.colLayer3
@@ -14,6 +14,8 @@ import qs.modules.overlay

 StyledOverlayWidget {
    id: root
+    minimumWidth: 300
+    minimumHeight: 200
    property list<var> resources: [
        {
            "icon": "planner_review",
@@ -37,13 +39,10 @@ StyledOverlayWidget {

    contentItem: Rectangle {
        id: contentItem
-        anchors.centerIn: parent
+        anchors.fill: parent
        color: Appearance.m3colors.m3surfaceContainer
        radius: root.contentRadius
        property real padding: 4
-        implicitWidth: 350
-        implicitHeight: 200
-        // implicitHeight: contentColumn.implicitHeight + padding * 2
        ColumnLayout {
            id: contentColumn
            anchors {
@@ -10,13 +10,14 @@ import qs.modules.sidebarRight.volumeMixer

 StyledOverlayWidget {
    id: root
+    minimumWidth: 300
+    minimumHeight: 380
+
    contentItem: Rectangle {
-        anchors.centerIn: parent
+        anchors.fill: parent
        color: Appearance.m3colors.m3surfaceContainer
        radius: root.contentRadius
        property real padding: 6
-        implicitHeight: 600
-        implicitWidth: 350

        ColumnLayout {
            id: contentColumn
@@ -11,21 +11,22 @@ import Quickshell.Services.Pipewire
 WindowDialog {
    id: root
    property bool isSink: true
-    backgroundHeight: 700
+    backgroundHeight: 600

    WindowDialogTitle {
        text: root.isSink ? Translation.tr("Audio output") : Translation.tr("Audio input")
    }

-    VolumeDialogContent {
-        isSink: root.isSink
-    }
-
    WindowDialogSeparator {
+        Layout.topMargin: -22
        Layout.leftMargin: 0
        Layout.rightMargin: 0
    }

+    VolumeDialogContent {
+        isSink: root.isSink
+    }
+
    WindowDialogButtonRow {
        DialogButton {
            buttonText: Translation.tr("Details")
@@ -16,25 +16,15 @@ ColumnLayout {
    readonly property list<var> appPwNodes: Pipewire.nodes.values.filter((node) => { // Should be list<PwNode> but it breaks ScriptModel
        return root.correctType(node) && node.isStream
    })
+    readonly property list<var> devices: Pipewire.nodes.values.filter(node => {
+        return root.correctType(node) && !node.isStream
+    })
    readonly property bool hasApps: appPwNodes.length > 0
    spacing: 16

-    WindowDialogSectionHeader {
-        visible: root.hasApps
-        text: Translation.tr("Applications")
-    }
-
-    WindowDialogSeparator {
-        visible: root.hasApps
-        Layout.topMargin: -22
-        Layout.leftMargin: 0
-        Layout.rightMargin: 0
-        color: Appearance.colors.colOutlineVariant
-    }
-
    DialogSectionListView {
-        visible: root.hasApps
        Layout.fillHeight: true
+        topMargin: 14

        model: ScriptModel {
            values: root.appPwNodes
@@ -49,44 +39,26 @@ ColumnLayout {
        }
    }

-    WindowDialogSectionHeader {
-        text: Translation.tr("Devices")
-    }
-
-    WindowDialogSeparator {
-        Layout.topMargin: -22
-        Layout.leftMargin: 0
-        Layout.rightMargin: 0
-        color: Appearance.colors.colOutlineVariant
-    }
-
-    DialogSectionListView {
-        Layout.fillHeight: !root.hasApps
-        Layout.preferredHeight: 180
-
-        model: ScriptModel {
-            values: Pipewire.nodes.values.filter(node => {
-                return root.correctType(node) && !node.isStream
-            })
-        }
-        delegate: StyledRadioButton {
-            id: radioButton
-            required property var modelData
-            anchors {
-                left: parent?.left
-                right: parent?.right
+    StyledComboBox {
+        id: deviceSelector
+        Layout.fillHeight: false
+        Layout.fillWidth: true
+        Layout.bottomMargin: 6
+        model: root.devices.map(node => node.description)
+        currentIndex: root.devices.findIndex(item => {
+            if (root.isSink) {
+                return item.id === Pipewire.preferredDefaultAudioSink?.id
+            } else {
+                return item.id === Pipewire.preferredDefaultAudioSource?.id
            }
-
-            description: modelData.description
-            checked: modelData.id === (root.isSink ? Pipewire.preferredDefaultAudioSink?.id : Pipewire.preferredDefaultAudioSource?.id)
-
-            onCheckedChanged: {
-                if (!checked) return;
-                if (root.isSink) {
-                    Pipewire.preferredDefaultAudioSink = modelData
-                } else {
-                    Pipewire.preferredDefaultAudioSource = modelData
-                }
+        })
+        onActivated: (index) => {
+            print(index)
+            const item = root.devices[index]
+            if (root.isSink) {
+                Pipewire.preferredDefaultAudioSink = item
+            } else {
+                Pipewire.preferredDefaultAudioSource = item
            }
        }
    }
@@ -106,4 +78,9 @@ ColumnLayout {
        spacing: 4
        animateAppearance: false
    }
+
+    Component {
+        id: listElementComp
+        ListElement {}
+    }
 }
@@ -146,14 +146,14 @@ Singleton {

    // Thumbnail generation
    function generateThumbnail(size: string) {
-        // console.log("[Wallpapers] Updating thumbnails")
        if (!["normal", "large", "x-large", "xx-large"].includes(size)) throw new Error("Invalid thumbnail size");
        thumbgenProc.directory = root.directory
        thumbgenProc.running = false
        thumbgenProc.command = [
            "bash", "-c",
-            `${thumbgenScriptPath} --size ${size} --machine_progress -d ${FileUtils.trimFileProtocol(root.directory)} || ${generateThumbnailsMagickScriptPath} --size ${size} -d ${root.directory}`,
+            `${thumbgenScriptPath} --size ${size} --machine_progress -d ${FileUtils.trimFileProtocol(root.directory)} || ${generateThumbnailsMagickScriptPath} --size ${size} -d ${FileUtils.trimFileProtocol(root.directory)}`,
        ]
+        // console.log("[Wallpapers] Updating thumbnails with command ", thumbgenProc.command.join(" "))
        root.thumbnailGenerationProgress = 0
        thumbgenProc.running = true
    }
@@ -177,6 +177,7 @@ Singleton {
            }
        }
        onExited: (exitCode, exitStatus) => {
+            // print("[Wallpapers] Thumbnail generation completed with exit code", exitCode)
            root.thumbnailGenerated(thumbgenProc.directory)
        }
    }