diff --git a/src/plugin-personalization/operation/qrc/icons/arrow_left.dci b/src/plugin-personalization/operation/qrc/icons/arrow_left.dci new file mode 100644 index 0000000000..a7eb5e578c Binary files /dev/null and b/src/plugin-personalization/operation/qrc/icons/arrow_left.dci differ diff --git a/src/plugin-personalization/operation/qrc/icons/arrow_right.dci b/src/plugin-personalization/operation/qrc/icons/arrow_right.dci new file mode 100644 index 0000000000..5f0508e8f5 Binary files /dev/null and b/src/plugin-personalization/operation/qrc/icons/arrow_right.dci differ diff --git a/src/plugin-personalization/operation/qrc/personalization.qrc b/src/plugin-personalization/operation/qrc/personalization.qrc index 561ffc04f9..00a881ccf7 100644 --- a/src/plugin-personalization/operation/qrc/personalization.qrc +++ b/src/plugin-personalization/operation/qrc/personalization.qrc @@ -39,5 +39,7 @@ icons/topic_cursor.dci icons/color_extractor.dci icons/close.dci + icons/arrow_left.dci + icons/arrow_right.dci diff --git a/src/plugin-personalization/qml/ColorAndIcons.qml b/src/plugin-personalization/qml/ColorAndIcons.qml index f35d453e26..c3091b7fa6 100644 --- 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 index 0c625ddb65..f5921cbf3d 100644 --- a/src/plugin-personalization/qml/DccColorDialog.qml +++ b/src/plugin-personalization/qml/DccColorDialog.qml @@ -118,7 +118,7 @@ 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 @@ -126,7 +126,7 @@ ColorDialogImpl { 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 index 44d51d963f..8bb568c37f 100644 --- 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 index 4b418e8baf..62c7b8749a 100644 --- 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 index 1937e5e718..e074a356cd 100644 --- 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 diff --git a/src/plugin-personalization/qml/WallpaperSelectView.qml b/src/plugin-personalization/qml/WallpaperSelectView.qml index 11580f6c44..2620bdeea0 100644 --- a/src/plugin-personalization/qml/WallpaperSelectView.qml +++ b/src/plugin-personalization/qml/WallpaperSelectView.qml @@ -14,9 +14,14 @@ import org.deepin.dtk.private as P ColumnLayout { id: root property var model - readonly property int imageRectH: 120 - readonly property int imageRectW: 180 - readonly property int imageSpacing: 10 + readonly property int imageRectW: 84 + readonly property int imageRectH: 54 + readonly property int imageBorder: 2 + // 1 is the distance between the border and the image + readonly property int imageMargin: imageBorder + 1 + readonly property int itemWidth: imageRectW + imageBorder * 2 + 1 + readonly property int itemHeight: imageRectH + imageBorder * 2 + 1 + readonly property int imageSpacing: 5 property bool isExpand: false property var currentItem @@ -32,19 +37,28 @@ ColumnLayout { Layout.fillWidth: true Label { Layout.leftMargin: 10 - font: D.DTK.fontManager.t4 + font: D.DTK.fontManager.t6 text: dccObj.displayName } Item { Layout.fillWidth: true } D.ToolButton { - text: isExpand ? qsTr("unfold") : qsTr("show all") + `-${model.rowCount()}` + qsTr("items") - font: D.DTK.fontManager.t6 - flat: true + textColor: D.Palette { + normal { + common: D.DTK.makeColor(D.Color.Highlight) + } + normalDark: normal + hovered { + common: D.DTK.makeColor(D.Color.Highlight).lightness(+30) + } + hoveredDark: hovered + } + text: root.isExpand ? qsTr("unfold") : qsTr("show all") + `-${root.model.rowCount()}` + qsTr("items") onClicked: { - isExpand = !isExpand + root.isExpand = !root.isExpand } + background: Item {} } } @@ -68,10 +82,10 @@ ColumnLayout { Flow { id: layout - property int lineCount: Math.floor((parent.width + imageSpacing) / (imageRectW + imageSpacing)) - width: lineCount * (imageRectW + imageSpacing) - imageSpacing - spacing: imageSpacing - bottomPadding: imageSpacing + property int lineCount: Math.floor((parent.width + root.imageSpacing) / (root.itemWidth + root.imageSpacing)) + width: lineCount * (root.itemWidth + root.imageSpacing) - root.imageSpacing + spacing: root.imageSpacing + bottomPadding: root.imageSpacing anchors.horizontalCenter: parent.horizontalCenter move: Transition { @@ -90,7 +104,7 @@ ColumnLayout { return left.index < right.index } filterAcceptsItem: function(item) { - return isExpand ? true : item.index < maxCount + return root.isExpand ? true : item.index < maxCount } onMaxCountChanged: { sortedModel.update() @@ -98,24 +112,23 @@ ColumnLayout { delegate: Control { id: control - width: root.imageRectW - height: root.imageRectH + width: root.itemWidth + height: root.itemHeight hoverEnabled: true contentItem: Item { id: wallpaperItem - readonly property int imageMargin: 3 function requestSetWallpaper(isLock) { img2x2.grabToImage(function(result) { - const isDarkType = dccData.imageHelper.isDarkType(result.image); + const isDarkType = dccData.imageHelper.isDarkType(result.image) root.wallpaperSelected(model.url, isDarkType, isLock) - }, Qt.size(2, 2)); + }, Qt.size(2, 2)) } Image { + id: img2x2 property bool isDarktype: true anchors.centerIn : parent - id: img2x2 width: 2 height: 2 source: model.url @@ -124,9 +137,11 @@ ColumnLayout { } Image { - anchors.fill: parent - anchors.margins: parent.imageMargin id: image + anchors.centerIn: parent + width: root.imageRectW + height: root.imageRectH + sourceSize: Qt.size(width, height) source: model.url mipmap: true visible: false @@ -140,17 +155,18 @@ ColumnLayout { color: "transparent" border.width: 2 border.color: D.DTK.platformTheme.activeColor - radius: 9 + radius: 8 } OpacityMask { anchors.fill: parent - anchors.margins: parent.imageMargin + anchors.margins: root.imageMargin source: image maskSource: Rectangle { + anchors.fill: parent implicitWidth: image.width implicitHeight: image.height - radius: 8 + radius: 6 } } Control { @@ -158,8 +174,8 @@ ColumnLayout { implicitWidth: 24 anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: - height / 2 + parent.imageMargin - anchors.rightMargin: - width / 2 + parent.imageMargin + anchors.topMargin: - height / 2 + root.imageMargin + anchors.rightMargin: - width / 2 + root.imageMargin hoverEnabled: true contentItem: D.IconButton { icon.name: "close" diff --git a/src/plugin-personalization/qml/WindowEffectPage.qml b/src/plugin-personalization/qml/WindowEffectPage.qml index 2057d96fff..3aec3a3fc3 100644 --- a/src/plugin-personalization/qml/WindowEffectPage.qml +++ b/src/plugin-personalization/qml/WindowEffectPage.qml @@ -23,7 +23,7 @@ DccObject { weight: 100 pageType: DccObject.Item visible: dccData.platformName() !== "wayland" - page: InterfaceEffectListview { } + page: InterfaceEffectListview {} } DccTitleObject { @@ -57,60 +57,58 @@ DccObject { Layout.leftMargin: 10 } - ListView { + Flow { id: listview Layout.fillWidth: true - Layout.preferredHeight: 100 - Layout.margins: 10 - clip: true + Layout.bottomMargin: 10 + Layout.leftMargin: 10 property var tips: [qsTr("None"), qsTr("Small"), qsTr("Medium"), qsTr("Large")] property var icons: ["corner_none", "corner_small", "corner_middle", "corner_big"] - - model: tips.length - orientation: ListView.Horizontal - layoutDirection: Qt.LeftToRight - spacing: 12 - delegate: ColumnLayout { - id: layout - property bool checked : dccData.model.windowRadius === 6 * index - width: 112 - height: 104 - Item { - Layout.preferredHeight: 77 - Layout.fillWidth: true - Rectangle { - anchors.fill: parent - radius: 7 - color: "transparent" - visible: layout.checked - border.width: 2 - border.color: D.DTK.platformTheme.activeColor - } - Rectangle { - anchors.fill: parent - anchors.margins: 4 - color: Qt.rgba(0, 0, 0, 0.05) - radius: 7 - D.DciIcon { - sourceSize: Qt.size(parent.width, parent.height) - name: listview.icons[index] + spacing: 8 + Repeater { + model: listview.tips.length + ColumnLayout { + id: layout + property bool checked: dccData.model.windowRadius === 6 * index + width: 112 + height: 104 + Item { + Layout.preferredHeight: 77 + Layout.fillWidth: true + Rectangle { + anchors.fill: parent + radius: 7 + color: "transparent" + visible: layout.checked + border.width: 2 + border.color: D.DTK.platformTheme.activeColor } - } - MouseArea { - anchors.fill: parent - onClicked: { - dccData.worker.setWindowRadius(6 * index) + Rectangle { + anchors.fill: parent + anchors.margins: 4 + color: Qt.rgba(0, 0, 0, 0.05) + radius: 7 + D.DciIcon { + sourceSize: Qt.size(parent.width, parent.height) + name: listview.icons[index] + } + } + MouseArea { + anchors.fill: parent + onClicked: { + dccData.worker.setWindowRadius(6 * index) + } } } - } - Text { - Layout.fillWidth: true - Layout.fillHeight: true - text: listview.tips[index] - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: layout.checked ? D.DTK.platformTheme.activeColor : this.palette.windowText + Text { + Layout.fillWidth: true + Layout.fillHeight: true + text: listview.tips[index] + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: layout.checked ? D.DTK.platformTheme.activeColor : this.palette.windowText + } } } } @@ -148,7 +146,6 @@ DccObject { } } } - } DccObject { @@ -228,7 +225,7 @@ DccObject { onCurrentIndexChanged: { if (currentIndex === 0) { dccData.worker.setScrollBarPolicy(Qt.ScrollBarAsNeeded) - } else if(currentIndex === 1) { + } else if (currentIndex === 1) { dccData.worker.setScrollBarPolicy(Qt.ScrollBarAlwaysOn) } } @@ -265,10 +262,22 @@ DccObject { flat: true currentIndex: indexOfValue(dccData.model.titleBarHeight) model: [ - { text: qsTr("Extremely small"), value: 24 }, - { text: qsTr("Small"), value: 32 }, - { text: qsTr("Medium"), value: 40 }, - { text: qsTr("Large"), value: 50 } + { + text: qsTr("Extremely small"), + value: 24 + }, + { + text: qsTr("Small"), + value: 32 + }, + { + text: qsTr("Medium"), + value: 40 + }, + { + text: qsTr("Large"), + value: 50 + } ] textRole: "text" diff --git a/src/plugin-personalization/qml/personalizationMain.qml b/src/plugin-personalization/qml/personalizationMain.qml index 32d0d43cc3..70f17757a4 100644 --- a/src/plugin-personalization/qml/personalizationMain.qml +++ b/src/plugin-personalization/qml/personalizationMain.qml @@ -27,9 +27,11 @@ DccObject { Layout.margins: 10 RowLayout { Layout.fillWidth: true + spacing: 10 + Layout.topMargin: 10 + Layout.rightMargin: 10 Label { - Layout.topMargin: 10 - font: D.DTK.fontManager.t5 + font: D.DTK.fontManager.t6 text: dccObj.displayName Layout.leftMargin: 10 } @@ -42,24 +44,35 @@ DccObject { D.IconButton { flat: true enabled: themeSelectView.currentIndex !== 0 - icon.name: "arrow_ordinary_left" + icon.name: "arrow_left" + icon.width: 16 + icon.height: 16 + implicitWidth: 16 + implicitHeight: 16 onClicked: { themeSelectView.decrementCurrentIndex() } + background:{} } D.IconButton { flat: true enabled: themeSelectView.currentIndex !== themeSelectView.count - 1 - icon.name: "arrow_ordinary_right" + icon.name: "arrow_right" + icon.width: 16 + icon.height: 16 + implicitWidth: 16 + implicitHeight: 16 onClicked: { themeSelectView.incrementCurrentIndex() } + background:{} } } ThemeSelectView { id: themeSelectView Layout.fillWidth: true - Layout.preferredHeight: 320 + Layout.preferredHeight: 240 + Layout.bottomMargin: 15 } } } @@ -76,6 +89,7 @@ DccObject { flat: true textRole: "text" model: dccData.appearanceSwitchModel + implicitWidth: 180 currentIndex: { for (var i = 0; i < model.length; ++i) { if (model[i].value === dccData.currentAppearance) {