fix: [UI] Adjusting the display effect of year and year views

1.Preview image stretched proportionally 2.And preview Image Border 3.Optimization of monthly view segmentation line display effect Log: [UI] Adjusting the display effect of year and year views Bug: https://pms.uniontech.com/bug-view-168163.html
linuxdeepin · Sep 7, 2023 · 1b1d017 · 1b1d017
1 parent ad852d5
commit 1b1d017
Show file tree

Hide file tree

Showing 10 changed files with 318 additions and 293 deletions.
diff --git a/src/deepin-album.qrc b/src/deepin-album.qrc
@@ -64,5 +64,7 @@
         <file>qml/Control/ListView/ThumbnailListDelegate2.qml</file>
         <file>qml/Control/ListView/ThumbnailListViewTools.js</file>
         <file>qml/Control/BaseView.qml</file>
+        <file>qml/Control/BorderImageEx.qml</file>
+        <file>qml/Control/MonthImage.qml</file>
     </qresource>
 </RCC>
diff --git a/src/qml/Control/BorderImageEx.qml b/src/qml/Control/BorderImageEx.qml
@@ -0,0 +1,24 @@
+// SPDX-FileCopyrightText: 2023 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+
+Image {
+    smooth: true
+    antialiasing: true
+    fillMode: Image.PreserveAspectCrop
+
+    //border and shadow
+    Rectangle {
+        id: borderRect
+        anchors.fill: parent
+        color: "transparent"
+        border.color: Qt.rgba(0, 0, 0, 0.2)
+        border.width: 1
+        visible: true
+    }
+}
+
diff --git a/src/qml/Control/MonthImage.qml b/src/qml/Control/MonthImage.qml
@@ -0,0 +1,150 @@
+// SPDX-FileCopyrightText: 2023 UnionTech Software Technology Co., Ltd.
+//
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+import QtQuick 2.11
+import QtQuick.Controls 2.4
+import QtQuick.Layouts 1.11
+
+Rectangle {
+    id: monthImage
+    property var paths
+    property double displayFlushHelper
+    property Item content: null
+
+    color: "white"
+    function createImage() {
+        if (paths.length === 1)
+            content = monthComponent_1pic.createObject(monthImage)
+        else if (paths.length === 2)
+            content = monthComponent_2pic.createObject(monthImage)
+        else if (paths.length === 3)
+            content = monthComponent_3pic.createObject(monthImage)
+        else if (paths.length === 4)
+            content = monthComponent_4pic.createObject(monthImage)
+        else if (paths.length === 5)
+            content = monthComponent_5pic.createObject(monthImage)
+        else if (paths.length === 6)
+            content = monthComponent_6pic.createObject(monthImage)
+    }
+
+    Component {
+        id: monthComponent_1pic
+
+        BorderImageEx {
+            width: monthImage.width
+            height: monthImage.height
+            source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_1_" + paths[0]
+        }
+    }
+
+    Component {
+        id: monthComponent_2pic
+
+        Row {
+            spacing: 2
+            Repeater {
+                model: paths
+                BorderImageEx {
+                    width: monthImage.width / 2
+                    height: monthImage.height
+                    source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_1_" + modelData
+                }
+            }
+        }
+    }
+
+    Component {
+        id: monthComponent_3pic
+
+        Row {
+            spacing: 2
+            BorderImageEx {
+                width: monthImage.width / 2
+                height: monthImage.height
+                source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_1_" + paths[0]
+            }
+
+            Column {
+                spacing: 2
+                Repeater {
+                    model: [paths[1], paths[2]]
+                    BorderImageEx {
+                        width: monthImage.width / 2
+                        height: monthImage.height / 2
+                        source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_2_" + modelData
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: monthComponent_4pic
+
+        Grid {
+            columns: 2
+            rows: 2
+            spacing: 2
+            Repeater {
+                model: paths
+                BorderImageEx {
+                    width: monthImage.width / 2
+                    height: monthImage.height / 2
+                    source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_2_" + modelData
+                }
+            }
+        }
+    }
+
+    Component {
+        id: monthComponent_5pic
+
+        Column {
+            spacing: 2
+            BorderImageEx {
+                width: monthImage.width
+                height: monthImage.height * 0.618
+                source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_3_" + paths[0]
+            }
+
+            Row {
+                spacing: 2
+                Repeater {
+                    model: [paths[1], paths[2], paths[3], paths[4]]
+                    BorderImageEx {
+                        width: monthImage.width / 4
+                        height: monthImage.height * (1 - 0.618)
+                        source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_4_" + modelData
+                    }
+                }
+            }
+        }
+    }
+
+    Component {
+        id: monthComponent_6pic
+
+        Column {
+            spacing: 2
+            BorderImageEx {
+                width: monthImage.width
+                height: monthImage.height * 0.618
+                source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_3_" + paths[0]
+            }
+
+            Row {
+                spacing: 2
+                Repeater {
+                    model: [paths[1], paths[2], paths[3], paths[4], paths[5]]
+                    BorderImageEx {
+                        width: monthImage.width / 5
+                        height: monthImage.height * (1 - 0.618)
+                        source: "image://collectionPublisher/" + monthImage.displayFlushHelper.toString() + "_M_5_" + modelData
+                    }
+                }
+            }
+        }
+    }
+}
+
diff --git a/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml b/src/qml/ThumbnailImageView/CollecttionView/MonthCollection.qml
@@ -13,6 +13,8 @@ import "../../Control"
 import "../../Control/ListView"
 import "../../"
 
+import org.deepin.album 1.0 as Album
+
 Item {
     id: monthView
 
@@ -77,65 +79,67 @@ Item {
         id: theDelegate
 
         Item {
+            id: delegateMain
             width: theView.width
             height: theView.height / 3 * 2
 
-            //圆角遮罩Rectangle
-            Rectangle {
-                id: maskRec
-                anchors.centerIn: parent
-                width: image.width
-                height: image.height
+            property var paths: albumControl.getMonthPaths(year, month)
 
-                color:"transparent"
-                Rectangle {
-                    anchors.centerIn: parent
-                    width: image.width
-                    height: image.height
-                    color:"black"
-                    radius: 18
+            MonthImage {
+                id: image
+                clip: true
+                anchors {
+                    left: parent.left
+                    top: parent.top
+                    leftMargin: -1
                 }
+                width: parent.width + 2
+                height: parent.height
+                paths: delegateMain.paths
+                displayFlushHelper: theView.displayFlushHelper
+
                 visible: false
+                Component.onCompleted: {
+                    image.createImage()
+                }
             }
 
-            Image {
-                id: image
-                //因为新版本的Qt的图片缓存机制，导致相同路径的图片只会加载一次,source要改变才能刷新图片，所以尾部添加itemCount。如果需要数量相同也能刷新，则在尾部添加随机数
-                source: "image://collectionPublisher/" + theView.displayFlushHelper.toString() + "_M_" + year + "_" + month + "_" + itemCount
-                asynchronous: true
-                anchors.fill: parent
-                width: parent.width
-                height: parent.height
-                fillMode: Image.PreserveAspectCrop
+            Rectangle {
+                id: mask
+                anchors.fill: image
+                radius: 18
                 visible: false
             }
 
-            //遮罩执行
-            OpacityMask {
-                id: mask
+            OpacityMask{
+                id: opacityMask
                 anchors.fill: image
                 source: image
-                maskSource: maskRec
+                maskSource: mask
+                antialiasing: true
+                smooth: true
             }
 
-            // 边框阴影立体效果
-            DropShadow {
-                anchors.fill: mask
-                z: 0
-
-                verticalOffset: 1
-
-                radius: 5
-                samples: radius * 2 + 1
-                spread: 0.3
-
-                color: "black"
-
-                opacity: 0.3
-
-                source: mask
+            //border and shadow
+            Rectangle {
+                id: borderRect
+                anchors.fill: parent
+                //color: "transparent"
+                gradient: Gradient {
+                    GradientStop {
+                        position: 0.0
+                        color: Qt.rgba(0,0,0,0.4)
+                    }
+                    GradientStop {
+                        position: 0.25
+                        color: Qt.rgba(0,0,0,0)
+                    }
+                }
 
+                border.color: Qt.rgba(0, 0, 0, 0.2)
+                border.width: 1
                 visible: true
+                radius: 18
             }
 
             Label {