feat: Modify sidebar behavior

Modify sidebar behavior

Log:
pms: TASK-361721

qml/DccWindow.qml

@@ -11,16 +11,19 @@ import org.deepin.dcc 1.0
 D.ApplicationWindow {
     id: root
     property string appProductName: Qt.application.displayName
-    property string appLicense: "LGPL-3.0-or-later"
+    property string appLicense: "GPL-3.0-or-later"
 
-    minimumWidth: 500
-    minimumHeight: 200
+    minimumWidth: 520
+    minimumHeight: 400
     visible: false
     flags: Qt.Window | Qt.WindowCloseButtonHint | Qt.WindowTitleHint | Qt.WindowMinimizeButtonHint | Qt.WindowMaximizeButtonHint
     modality: Qt.ApplicationModal
     color: "transparent"
     D.DWindow.enabled: true
 
+    D.StyledBehindWindowBlur {
+        anchors.fill: parent
+    }
     Shortcut {
         context: Qt.ApplicationShortcut
         sequences: [StandardKey.HelpContents, "F1"]
@@ -40,23 +43,19 @@ D.ApplicationWindow {
                 onTriggered: DccApp.showHelp()
             }
             D.AboutAction {
-                aboutDialog: titleBar.aboutDialog
+                aboutDialog: D.AboutDialog {
+                    D.DWindow.enabled: true
+                    productIcon: "preferences-system"
+                    modality: Qt.NonModal
+                    productName: appProductName
+                    websiteName: DTK.deepinWebsiteName
+                    websiteLink: DTK.deepinWebsiteLink
+                    description: qsTr("Control Center provides the options for system settings.")
+                    onClosing: destroy(10)
+                }
             }
             D.QuitAction {}
         }
-        aboutDialog: D.AboutDialog {
-            id: aboutDialog
-            D.DWindow.enabled: true
-            productIcon: "preferences-system"
-            modality: Qt.NonModal
-            productName: appProductName
-            companyLogo: "file://" + DTK.deepinDistributionOrgLogo
-            websiteName: DTK.deepinWebsiteName
-            websiteLink: DTK.deepinWebsiteLink
-            description: qsTr("Control Center provides the options for system settings.")
-            license: appLicense === "" ? "" : qsTr("%1 is released under %2").arg(appProductName).arg(appLicense)
-            onClosing: destroy(10)
-        }
         embedMode: false
         autoHideOnFullscreen: true
         focus: true
@@ -76,13 +75,13 @@ D.ApplicationWindow {
         anchors.fill: parent
         acceptedButtons: Qt.LeftButton
 
-        onPressed: function(mouse) {
+        onPressed: function (mouse) {
             mouse.accepted = false
 
             if (!root.activeFocusItem)
                 return
 
-            let pt = mapToItem(root.activeFocusItem, mouse.x ,mouse.y)
+            let pt = mapToItem(root.activeFocusItem, mouse.x, mouse.y)
             // clear focus if click out of activeFocusItem
             if (!root.activeFocusItem.contains(pt)) {
                 root.activeFocusItem.focus = false

qml/SecondPage.qml

@@ -10,22 +10,18 @@ import org.deepin.dtk.style 1.0 as DStyle
 
 import org.deepin.dcc 1.0
 
-SplitView {
+Item {
     id: root
-    orientation: Qt.Horizontal
-    handle: Rectangle {
-        implicitWidth: 2
-        color: palette.light // "#B9DEFB"
-    }
+    property real oldX: 180
 
-    StyledBehindWindowBlur {
+    Item {
         id: leftView
-        control: null // DccApp.mainWindow()
-        anchors.top: parent.top
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        SplitView.preferredWidth: 180
-
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: parent.left
+            right: splitter.left
+        }
         SearchBar {
             id: searchEdit
             anchors {
@@ -52,7 +48,6 @@ SplitView {
             currentIndex: dccObj ? dccObj.children.indexOf(dccObj.currentObject) : -1
             activeFocusOnTab: true
             clip: true
-            spacing: 8
             focus: true
             model: DccModel {
                 id: dccModel
@@ -90,9 +85,13 @@ SplitView {
             }
         }
     }
-
     Rectangle {
-        SplitView.minimumWidth: 500
+        anchors {
+            top: parent.top
+            bottom: parent.bottom
+            left: splitter.right
+            right: parent.right
+        }
         color: palette.window
         RowLayout {
             id: header
@@ -101,23 +100,19 @@ SplitView {
                 left: parent.left
                 right: parent.right
             }
+            Item {
+                implicitWidth: splitter.x < 110 ? 110 - splitter.x : 0
+            }
             ToolButton {
                 id: breakBut
                 icon.name: "arrow_ordinary_left"
                 Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
                 Layout.margins: 10
                 implicitHeight: 16
                 implicitWidth: 16
-                visible: DccApp.activeObject.parentName.length !== 0 && DccApp.activeObject.parentName !== "root"
+                enabled: DccApp.activeObject.parentName.length !== 0 && DccApp.activeObject.parentName !== "root"
                 onClicked: DccApp.toBack()
             }
-            Item {
-                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
-                Layout.margins: 10
-                implicitHeight: 16
-                implicitWidth: 16
-                visible: !breakBut.visible
-            }
 
             Crumb {
                 implicitHeight: parent.implicitHeight
@@ -142,6 +137,94 @@ SplitView {
             }
         }
     }
+    RowLayout {
+        height: 50
+        implicitWidth: 100
+        ToolButton {
+            property real oldSplitterX: 180
+            icon.name: "sidebar"
+            implicitHeight: 16
+            implicitWidth: 16
+            Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
+            Layout.leftMargin: 60
+            onClicked: {
+                if (splitter.x < 110) {
+                    var newX = oldSplitterX
+                    if (root.width - newX > 520) {
+                        splitter.x = newX
+                    } else if (root.width - 180 > 520) {
+                        splitter.x = 180
+                    } else if (root.width - 110 > 520) {
+                        splitter.x = 110
+                    } else {
+                        let dx = 630 - root.width
+                        DccApp.mainWindow().x -= dx
+                        DccApp.mainWindow().width = 630
+                        splitter.x = 110
+                    }
+                } else {
+                    oldSplitterX = splitter.x
+                    splitter.x = 0
+                    root.oldX = 0
+                }
+            }
+        }
+    }
+    Rectangle {
+        id: splitter
+        implicitWidth: 1
+        x: 180
+        height: root.height
+        color: palette.light // "#B9DEFB"
+    }
+    MouseArea {
+        x: splitter.x - 2
+        width: 5
+        anchors.top: parent.top
+        anchors.bottom: parent.bottom
+        cursorShape: Qt.SizeHorCursor
+        onPositionChanged: function (mouse) {
+            var newX = mouse.x + splitter.x
+            if (newX >= 0 && newX < root.width - splitter.width) {
+                if (root.width - newX < 520) {
+                    return
+                }
+                if (newX < 110) {
+                    newX = 0
+                }
+
+                splitter.x = newX
+                root.oldX = newX
+            }
+        }
+    }
+
+    onWidthChanged: {
+        var newX = width - 510
+        if (width - splitter.x < 510) {
+            if (newX < 0) {
+                return
+            }
+            if (newX < 110) {
+                newX = 0
+            }
+            splitter.x = newX
+        } else if (splitter.x < oldX) {
+
+            newX = width - 510
+            if (newX < 0) {
+                return
+            }
+            if (newX < 110) {
+                newX = 0
+            }
+            if (newX > oldX) {
+                newX = oldX
+            }
+
+            splitter.x = newX
+        }
+    }
     Component {
         id: rightLayout
         DccRightView {}

src/dde-control-center/dccmanager.cpp

@@ -123,13 +123,13 @@ void DccManager::loadModules(bool async, const QStringList &dirs)
 int DccManager::width() const
 {
     auto w = m_dconfig->value(WidthConfig).toInt();
-    return w > 780 ? w : 780;
+    return w > 520 ? w : 780;
 }
 
 int DccManager::height() const
 {
     auto h = m_dconfig->value(HeightConfig).toInt();
-    return h > 530 ? h : 530;
+    return h > 400 ? h : 530;
 }
 
 DccApp::UosEdition DccManager::uosEdition() const

src/dde-control-center/frame/plugin/DccItemBackground.qml

@@ -32,7 +32,7 @@ Item {
     }
     // 阴影
     Loader {
-        y: 2
+        y: 1
         z: 0
         width: parent.width
         height: parent.height

src/dde-control-center/frame/plugin/DccRightView.qml

@@ -4,11 +4,13 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import Qt.labs.qmlmodels 1.2
 import QtQuick.Layouts 1.15
+import "DccUtils.js" as DccUtils
 
 Flickable {
     id: root
     property alias spacing: groupView.spacing
     property alias isGroup: groupView.isGroup
+    property real margin: DccUtils.getMargin(width)
 
     contentHeight: groupView.height
     ScrollBar.vertical: ScrollBar {
@@ -21,8 +23,8 @@ Flickable {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 60
-            rightMargin: 60
+            leftMargin: root.margin
+            rightMargin: root.margin
         }
     }
     Rectangle {
@@ -38,8 +40,8 @@ Flickable {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 60
-            rightMargin: 60
+            leftMargin: root.margin
+            rightMargin: root.margin
         }
     }
     Timer {

src/dde-control-center/frame/plugin/DccSettingsView.qml

@@ -4,11 +4,13 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import Qt.labs.qmlmodels 1.2
 import QtQuick.Layouts 1.15
+import "DccUtils.js" as DccUtils
 
 Flickable {
     id: root
     property real spacing: 0
     property bool isGroup: false
+    property real margin: DccUtils.getMargin(width)
 
     contentHeight: centralItem.height + bottomItem.height + 10
     ScrollBar.vertical: ScrollBar {
@@ -33,8 +35,8 @@ Flickable {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 60
-            rightMargin: 60
+            leftMargin: root.margin
+            rightMargin: root.margin
         }
     }
     Rectangle {
@@ -43,8 +45,8 @@ Flickable {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 60
-            rightMargin: 60
+            leftMargin: root.margin
+            rightMargin: root.margin
         }
         // 防止鼠标穿透
         MouseArea {
@@ -77,8 +79,8 @@ Flickable {
         anchors {
             left: parent.left
             right: parent.right
-            leftMargin: 60
-            rightMargin: 60
+            leftMargin: root.margin
+            rightMargin: root.margin
         }
     }
     Timer {

src/dde-control-center/frame/plugin/DccUtils.js

@@ -1,15 +1,24 @@
 // SPDX-FileCopyrightText: 2024 - 2027 UnionTech Software Technology Co., Ltd.
 // SPDX-License-Identifier: GPL-3.0-or-later
-// import QtQuick 2.15
 .pragma library
 
 function copyFont(srcFont, propertys) {
     return Qt.font({
-        "family" : propertys.hasOwnProperty("family") ? propertys.family : srcFont.family,
-        "bold" : propertys.hasOwnProperty("bold") ? propertys.bold : srcFont.bold,
-        "italic" : propertys.hasOwnProperty("italic") ? propertys.italic : srcFont.italic,
-        "underline" : propertys.hasOwnProperty("underline") ? propertys.underline : srcFont.underline,
-        "pointSize" : propertys.hasOwnProperty("pointSize") ? propertys.pointSize : srcFont.pointSize,
-        "pixelSize" : propertys.hasOwnProperty("pixelSize") ? propertys.pixelSize : srcFont.pixelSize
-    })
+                       "family": propertys.hasOwnProperty("family") ? propertys.family : srcFont.family,
+                       "bold": propertys.hasOwnProperty("bold") ? propertys.bold : srcFont.bold,
+                       "italic": propertys.hasOwnProperty("italic") ? propertys.italic : srcFont.italic,
+                       "underline": propertys.hasOwnProperty("underline") ? propertys.underline : srcFont.underline,
+                       "pointSize": propertys.hasOwnProperty("pointSize") ? propertys.pointSize : srcFont.pointSize,
+                       "pixelSize": propertys.hasOwnProperty("pixelSize") ? propertys.pixelSize : srcFont.pixelSize
+                   })
+}
+
+function getMargin(w) {
+    if (w > 1300) {
+        return (w - 1200) / 2
+    }
+    if (w >= 600) {
+        return 50
+    }
+    return (w - 500) / 2
 }