refactor: use DTK WindowButton

replace Rectangel Log: 使用DTK的控件代替当前按钮
linuxdeepin · Jan 16, 2024 · c2b24ee · c2b24ee
1 parent f4c6a4b
commit c2b24ee
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 62 deletions.
diff --git a/src/treeland/quick/qml/CMakeLists.txt b/src/treeland/quick/qml/CMakeLists.txt
@@ -3,6 +3,8 @@ set_source_files_properties(QmlHelper.qml
         QT_QML_SINGLETON_TYPE TRUE
 )
 
+find_package(Dtk6 REQUIRED COMPONENTS Declarative)
+
 qt_add_qml_module(treeland-qml
     URI TreeLand
     VERSION "1.0"
@@ -29,3 +31,7 @@ qt_add_qml_module(treeland-qml
         ${PROJECT_BINARY_DIR}/qt/qml/TreeLand
 )
 
+target_link_libraries(treeland-qml
+    PUBLIC
+        Dtk6::Declarative
+)
diff --git a/src/treeland/quick/qml/StackWorkspace.qml b/src/treeland/quick/qml/StackWorkspace.qml
@@ -116,6 +116,7 @@ Item {
                 id: decoration
                 anchors.fill: parent
                 z: toplevelSurfaceItem.contentItem.z - 1
+                surface: toplevelSurfaceItem.waylandSurface
                 visible: enable
             }
 
@@ -330,6 +331,7 @@ Item {
                 anchors.fill: parent
                 z: xwaylandSurfaceItem.contentItem.z - 1
                 visible: enable
+                surface: waylandSurface
             }
 
             OutputLayoutItem {

diff --git a/src/treeland/quick/qml/WindowDecoration.qml b/src/treeland/quick/qml/WindowDecoration.qml
@@ -2,8 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0 OR LGPL-3.0-only OR GPL-2.0-only OR GPL-3.0-only
 
 import QtQuick
+import Qt5Compat.GraphicalEffects
 import QtQuick.Controls
 import Waylib.Server
+import org.deepin.dtk 1.0 as D
+import org.deepin.dtk.style 1.0 as DS
 
 Item {
     id: root
@@ -19,6 +22,8 @@ Item {
     readonly property real leftMargin: 0
     readonly property real rightMargin: 0
 
+    required property WaylandXdgSurface surface
+
     MouseArea {
         property int edges: 0
 
@@ -60,11 +65,22 @@ Item {
         }
     }
 
-    Rectangle {
+
+    D.RoundRectangle {
         id: titlebar
         anchors.top: parent.top
         width: parent.width
         height: 30
+        radius: 15
+        corners: D.RoundRectangle.TopLeftCorner | D.RoundRectangle.TopRightCorner
+    }
+
+    Item {
+        anchors.fill: titlebar
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: titlebar
+        }
 
         MouseArea {
             anchors.fill: parent
@@ -79,76 +95,63 @@ Item {
             anchors {
                 verticalCenter: parent.verticalCenter
                 right: parent.right
-                rightMargin: 8
             }
 
-            Rectangle {
-                width: 80
-                height: titlebar.height
-                color: "#dcdcdc"
-
-                Text {
-                    anchors.fill: parent
-                    text: "Min"
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    MouseArea {
-                        anchors.fill: parent
-                        onReleased: {
-                            root.requestMinimize()
-                        }
+            Item {
+                id: control
+                property D.Palette textColor: DS.Style.button.text
+                property D.Palette backgroundColor: DS.Style.windowButton.background
+            }
+
+            Loader {
+                objectName: "minimizeBtn"
+                sourceComponent: D.WindowButton {
+                    icon.name: "window_minimize"
+                    textColor: control.textColor
+                    height: titlebar.height
+
+                    onClicked: {
+                        root.requestMinimize()
+                    }
+                }
+            }
+
+            Loader {
+                objectName: "quitFullBtn"
+                visible: false
+                sourceComponent: D.WindowButton {
+                    icon.name: "window_quit_full"
+                    textColor: control.textColor
+                    height: titlebar.height
+
+                    onClicked: {
                     }
                 }
             }
 
-            Rectangle {
-                width: 80
-                height: titlebar.height
-                color: "#dcdcdc"
-                id: maxBtn
-
-                Text {
-                    text: "Max"
-                    anchors.fill: parent
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    MouseArea {
-                        anchors.fill: parent
-                        onReleased: {
-                            const max = (parent.text === "Max")
-                            root.requestToggleMaximize(max)
-
-                            if (max) {
-                                parent.text = "Restore"
-                            } else {
-                                parent.text = "Max"
-                            }
-                        }
+            Loader {
+                id: maxOrWindedBtn
+                objectName: "maxOrWindedBtn"
+                sourceComponent: D.WindowButton {
+                    icon.name: surface.isMaximized ? "window_restore" : "window_maximize"
+                    textColor: control.textColor
+                    height: titlebar.height
+
+                    onClicked: {
+                        root.requestToggleMaximize(!surface.isMaximized) 
                     }
                 }
             }
-            Rectangle {
-                width: 80
-                height: titlebar.height
-                color: "#dcdcdc"
-                id: closeBtn
-
-                Text {
-                    text: "Close"
-                    anchors.fill: parent
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-                    MouseArea {
-                        anchors.fill: parent
-                        onPressed: {
-                            closeBtn.color = "#ff6347"
-                        }
-                        onReleased: {
-                            closeBtn.color = "#dcdcdc"
-                            if (containsMouse) {
-                                root.requestClose()
-                            }
-                        }
+
+            Loader {
+                objectName: "closeBtn"
+                sourceComponent: D.WindowButton {
+                    icon.name: "window_close"
+                    textColor: control.textColor
+                    height: titlebar.height
+
+                    onClicked: {
+                        root.requestClose()
                     }
                 }
             }