chore(personalization): ui optimization

- Theme thumbnail size adjustment - Wallpaper thumbnail size adjustment - Wallpaper expansion button color adjustment - Optimization of Window Rounded Corner Display Layout pms: BUG-296997
linuxdeepin · Dec 24, 2024 · ab8cce9 · ab8cce9
1 parent 6e08208
commit ab8cce9
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 157 deletions.
diff --git a/src/plugin-personalization/operation/qrc/icons/arrow_left.dci b/src/plugin-personalization/operation/qrc/icons/arrow_left.dci
diff --git a/src/plugin-personalization/operation/qrc/icons/arrow_right.dci b/src/plugin-personalization/operation/qrc/icons/arrow_right.dci
diff --git a/src/plugin-personalization/operation/qrc/personalization.qrc b/src/plugin-personalization/operation/qrc/personalization.qrc
@@ -39,5 +39,7 @@
         <file>icons/topic_cursor.dci</file>
         <file>icons/color_extractor.dci</file>
 	    <file>icons/close.dci</file>
+        <file>icons/arrow_left.dci</file>
+        <file>icons/arrow_right.dci</file>
     </qresource>
 </RCC>
diff --git a/src/plugin-personalization/qml/ColorAndIcons.qml b/src/plugin-personalization/qml/ColorAndIcons.qml
@@ -45,6 +45,7 @@ DccObject {
                 Rectangle {
                     anchors.fill: parent
                     border.width: 2
+                    color: "transparent"
                     visible: activeColor === currentColor || (currentColor == "CUSTOM" && listview.cutColors.indexOf(activeColor) === -1)
                     border.color: currentColor == "CUSTOM" ? activeColor : currentColor
                     radius: width / 2
@@ -60,8 +61,8 @@ DccObject {
                     D.BoxShadow {
                         anchors.fill: parent
                         shadowColor: parent.color
-                        shadowOffsetY: 2
-                        shadowBlur: 6
+                        shadowOffsetY: 3
+                        shadowBlur: 4
                         cornerRadius: parent.radius
                     }
 

diff --git a/src/plugin-personalization/qml/DccColorDialog.qml b/src/plugin-personalization/qml/DccColorDialog.qml
@@ -118,15 +118,15 @@ ColorDialogImpl {
             }
 
             D.TextField {
-                text: control.color.toString().substring(1)
+                text: control.color.toString().substring(1).toUpperCase()
                 Layout.preferredWidth: 70
                 horizontalAlignment: Text.AlignHCenter
                 verticalAlignment: Text.AlignVCenter
                 validator: RegularExpressionValidator {
                     regularExpression: /^[0-9a-fA-F]{6}$/
                 }
                 onEditingFinished: {
-                    control.color = "#" + text
+                    control.color = "#" + text.toUpperCase()
                 }
             }
 

diff --git a/src/plugin-personalization/qml/IconThemeGridView.qml b/src/plugin-personalization/qml/IconThemeGridView.qml
@@ -8,80 +8,80 @@ import QtQuick.Dialogs
 import org.deepin.dcc 1.0
 import org.deepin.dtk 1.0 as D
 
-GridLayout {
+ColumnLayout {
     id: root
     property alias model: repeater.model
+    readonly property int itemWidth: 245
+    readonly property int itemHeight: 97
+    readonly property int itemSpacing: 10
+
     signal requsetSetTheme(string id)
+    Item {
+        Layout.fillWidth: true
+        Layout.preferredHeight: flow.height
+        Flow {
+            id: flow
+            property int lineCount: Math.floor((parent.width + root.itemSpacing) / (root.itemWidth + root.itemSpacing))
+            width: lineCount * (root.itemWidth + root.itemSpacing) - root.itemSpacing
+            spacing: 10
+            anchors.horizontalCenter: parent.horizontalCenter
+            Repeater {
+                id: repeater
+                Rectangle {
+                    id: rect
+                    width: root.itemWidth
+                    height: root.itemHeight
+                    radius: 8
+                    color: this.palette.base
+                    ColumnLayout {
+                        anchors.fill: parent
+                        anchors.margins: 10
+                        spacing: 6
+                        RowLayout {
+                            Layout.fillWidth: true
+                            Text {
+                                text: model.id
+                                color: this.palette.windowText
+                            }
 
-    Layout.fillHeight: true
-    Layout.margins: 10
-    columns: width / 250
-    rowSpacing: 10
-    columnSpacing: 10
-    Repeater {
-        id: repeater
-        Item {
-            Layout.preferredHeight: 110
-            Layout.fillWidth: true
-            Rectangle {
-                anchors.fill: parent
-                color: "transparent"
-            }
-            Rectangle {
-                id: rect
-                anchors.centerIn: parent
-                width: 245
-                height: 110
-                radius: 8
-                color: this.palette.base
-                ColumnLayout {
-                    anchors.fill: parent
-                    anchors.margins: 10
-                    RowLayout {
-                        Layout.preferredHeight: 20
-                        Layout.fillWidth: true
-                        Text {
-                            text: model.id
-                            color: this.palette.windowText
+                            Item {
+                                Layout.fillWidth: true
+                            }
+
+                            DccCheckIcon {
+                                visible: model.checked
+                            }
                         }
 
-                        Item {
+                        Rectangle {
+                            Layout.preferredHeight: 2
                             Layout.fillWidth: true
+                            color: this.palette.window
                         }
 
-                        DccCheckIcon {
-                            visible: model.checked
+                        Rectangle {
+                            Layout.fillWidth: true
+                            Layout.fillHeight: true
+                            color: "transparent"
+                            Image {
+                                anchors.fill: parent
+                                fillMode: Image.PreserveAspectFit
+                                mipmap: true
+                                source: model.pic
+                                asynchronous: true
+                            }
                         }
                     }
-
-                    Rectangle {
-                        Layout.preferredHeight: 2
-                        Layout.fillWidth: true
-                        color: this.palette.window
-                    }
-
-                    Rectangle {
-                        Layout.fillWidth: true
-                        Layout.fillHeight: true
-                        color: "transparent"
-                        Image {
-                            anchors.fill: parent
-                            fillMode: Image.PreserveAspectFit
-                            mipmap: true
-                            source: model.pic
-                            asynchronous: true
+                    MouseArea {
+                        anchors.fill: parent
+                        onClicked: {
+                            if (!model.checked) {
+                                root.requsetSetTheme(model.id);
+                            }
                         }
                     }
                 }
             }
-            MouseArea {
-                anchors.fill: parent
-                onClicked: {
-                    if (!model.checked) {
-                        root.requsetSetTheme(model.id)
-                    }
-                }
-            }
         }
     }
 }
diff --git a/src/plugin-personalization/qml/ThemeSelectView.qml b/src/plugin-personalization/qml/ThemeSelectView.qml
@@ -11,11 +11,11 @@ import org.deepin.dtk 1.0 as D
 ListView {
     id: listview
     // 132 = 130 + itemBorderWidth
-    readonly property int itemWidth: 185
-    readonly property int itemHeight: 150
+    readonly property int itemWidth: 132
+    readonly property int itemHeight: 100
     readonly property int itemBorderWidth: 2
-    readonly property int itemSpacing: 50
-    readonly property int imageRectH: 110
+    readonly property int itemSpacing: 18
+    readonly property int imageRectH: 86
     readonly property int imageRectW: itemWidth
 
     property int gridMaxColumns: Math.floor(listview.width / (itemWidth + itemSpacing))
@@ -70,7 +70,7 @@ ListView {
                     width: listview.itemWidth
                     height: listview.itemHeight
                     anchors.centerIn: parent
-
+    
                     Item {
                         Layout.preferredHeight: listview.imageRectH
                         Layout.preferredWidth: listview.imageRectW
@@ -81,14 +81,14 @@ ListView {
                             color: "transparent"
                             border.width: 2
                             border.color: D.DTK.platformTheme.activeColor
-                            radius: 10
+                            radius: 8
                         }
 
                         Rectangle {
                             anchors.fill: parent
                             anchors.margins: listview.itemBorderWidth + 1
                             color: "transparent"
-                            radius: 10
+                            radius: 8
 
                             Image {
                                 anchors.fill: parent
@@ -110,6 +110,7 @@ ListView {
                         text: model.name
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
+                        font: D.DTK.fontManager.t9
                         color: delegateRoot.isCurrent ? D.DTK.platformTheme.activeColor : this.palette.windowText
                     }
                 }
@@ -156,7 +157,7 @@ ListView {
                             anchors.fill: parent
                             anchors.margins: listview.itemBorderWidth + 1
                             color: "transparent"
-                            radius: 10
+                            radius: 8
 
                             Image {
                                 anchors.fill: parent
@@ -179,6 +180,7 @@ ListView {
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
                         color: this.palette.windowText
+                        font: D.DTK.fontManager.t9
                     }
                 }
                 MouseArea {

diff --git a/src/plugin-personalization/qml/WallpaperPage.qml b/src/plugin-personalization/qml/WallpaperPage.qml
@@ -32,8 +32,8 @@ DccObject {
         pageType: DccObject.Item
         page: RowLayout {
             Item {
-                width: 270
-                height: 180
+                implicitWidth: 197
+                implicitHeight: 110
 
                 Image {
                     id: image
@@ -80,6 +80,8 @@ DccObject {
                 pageType: DccObject.Editor
                 page: D.ComboBox {
                     flat: true
+                    implicitWidth: 150
+                    implicitHeight: 30
                     model: dccData.model.screens
                     onCurrentTextChanged: {
                         dccData.model.currentSelectScreen = currentText