taskbar: window previews

2025-11-12 00:09:22 +01:00
parent a412688af2
commit 20e1f0e0bb
12 changed files with 390 additions and 78 deletions
@@ -0,0 +1,135 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import qs.services
+import qs.modules.common
+import qs.modules.common.functions
+import qs.modules.waffle.looks
+import Quickshell
+import Quickshell.Wayland
+
+Button {
+    id: root
+
+    required property var toplevel
+    property real previewWidthConstraint: 200
+    property real previewHeightConstraint: 110
+    padding: 5
+    Layout.fillHeight: true
+
+    onClicked: {
+        root.toplevel.activate(); // TODO: make this work with those who disable focus on activate because telegram is abusive
+    }
+
+    background: Rectangle {
+        id: background
+        radius: Looks.radius.medium
+        color: root.down ? Looks.colors.bg2Active : (root.hovered ? Looks.colors.bg2Hover : ColorUtils.transparentize(Looks.colors.bg2))
+        Behavior on color {
+            animation: Looks.transition.color.createObject(this)
+        }
+    }
+
+    contentItem: ColumnLayout {
+        id: contentItem
+        anchors.fill: parent
+        anchors.margins: root.padding
+        spacing: 5
+
+        RowLayout {
+            Layout.fillWidth: true
+            Layout.fillHeight: false
+            spacing: 8
+
+            AppIcon {
+                id: appIcon
+                Layout.leftMargin: Looks.radius.large - root.padding + 2
+                Layout.alignment: Qt.AlignVCenter
+                iconName: AppSearch.guessIcon(root.toplevel.appId)
+                implicitSize: 16
+            }
+
+            Item {
+                id: appTitleContainer
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+                implicitHeight: closeButton.implicitHeight // Enforce height, because closeButton doesn't contribute when it's invisible
+                WText {
+                    id: appTitleText
+                    anchors.fill: parent
+                    text: root.toplevel.title
+                    elide: Text.ElideRight
+                    font.pixelSize: Looks.font.pixelSize.large
+                    font.weight: Looks.font.weight.thin
+                    color: Looks.colors.fg1
+                }
+            }
+
+            CloseButton {
+                id: closeButton
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.margins: Looks.radius.large - root.padding
+            Layout.topMargin: 0
+            implicitWidth: Math.max(screencopyView.implicitWidth, 80)
+            implicitHeight: screencopyView.implicitHeight
+
+            ScreencopyView {
+                id: screencopyView
+                anchors.centerIn: parent
+                captureSource: root.toplevel
+                live: true
+                paintCursor: true
+                constraintSize: Qt.size(root.previewWidthConstraint, root.previewHeightConstraint)
+            }
+        }
+    }
+
+    component CloseButton: Button {
+        id: reusableCloseButton
+        visible: root.hovered
+        Layout.leftMargin: 4
+        implicitHeight: 30
+        implicitWidth: 30
+        onClicked: {
+            root.toplevel.close();
+        }
+
+        Rectangle {
+            z: 0
+            color: "transparent"
+            anchors.fill: closeButtonBg
+            anchors.margins: -1
+            opacity: closeButtonBg.opacity
+            border.width: 1
+            radius: closeButtonBg.radius + 1
+            border.color: Looks.colors.bg2Border
+        }
+
+        background: Rectangle {
+            id: closeButtonBg
+            z: 1
+            opacity: reusableCloseButton.hovered ? 1 : 0
+            radius: Looks.radius.large - root.padding
+            color: reusableCloseButton.pressed ? Looks.colors.dangerActive : Looks.colors.danger
+            Behavior on opacity {
+                animation: Looks.transition.opacity.createObject(this)
+            }
+            Behavior on color {
+                animation: Looks.transition.color.createObject(this)
+            }
+        }
+        
+        contentItem: FluentIcon {
+            z: 2
+            anchors.centerIn: parent
+            icon: "dismiss"
+            implicitSize: 10
+        }
+    }
+}