Merge pull request #4829 from nextcloud/feature/unified-search-alignm…

…ents Align, resize, and layout everything uniformly in the unified search view
nextcloud · Sep 6, 2022 · 05d3c7a · 05d3c7a
2 parents b248696 + 316f398
commit 05d3c7a
Show file tree

Hide file tree

Showing 12 changed files with 218 additions and 114 deletions.
diff --git a/resources.qrc b/resources.qrc
@@ -23,6 +23,7 @@
         <file>src/gui/tray/UnifiedSearchResultItem.qml</file>
         <file>src/gui/tray/UnifiedSearchResultItemSkeleton.qml</file>
         <file>src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml</file>
+        <file>src/gui/tray/UnifiedSearchResultItemSkeletonGradientRectangle.qml</file>
         <file>src/gui/tray/UnifiedSearchResultListItem.qml</file>
         <file>src/gui/tray/UnifiedSearchResultNothingFound.qml</file>
         <file>src/gui/tray/UnifiedSearchResultSectionItem.qml</file>

diff --git a/src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml b/src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml
@@ -8,7 +8,6 @@ ColumnLayout {
     id: unifiedSearchResultItemFetchMore
 
     property bool isFetchMoreInProgress: false
-
     property bool isWithinViewPort: false
 
     property int fontSize: Style.unifiedSearchResultTitleFontSize
@@ -21,22 +20,29 @@ ColumnLayout {
 
     Label {
         id: unifiedSearchResultItemFetchMoreText
-        text: qsTr("Load more results")
-        visible: !unifiedSearchResultItemFetchMore.isFetchMoreInProgress
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
+
         Layout.fillWidth: true
         Layout.fillHeight: true
+        Layout.leftMargin: Style.trayHorizontalMargin
+        Layout.rightMargin: Style.trayHorizontalMargin
+
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+        text: qsTr("Load more results")
+        wrapMode: Text.Wrap
         font.pixelSize: unifiedSearchResultItemFetchMore.fontSize
         color: unifiedSearchResultItemFetchMore.textColor
+        visible: !unifiedSearchResultItemFetchMore.isFetchMoreInProgress
     }
 
     BusyIndicator {
         id: unifiedSearchResultItemFetchMoreIconInProgress
-        running: visible
-        visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
-        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
         Layout.preferredWidth: parent.height * 0.70
         Layout.preferredHeight: parent.height * 0.70
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+
+        running: visible
+        visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
     }
 }
diff --git a/src/gui/tray/UnifiedSearchResultItem.qml b/src/gui/tray/UnifiedSearchResultItem.qml
@@ -2,24 +2,22 @@ import QtQml 2.15
 import QtQuick 2.9
 import QtQuick.Controls 2.3
 import QtQuick.Layouts 1.2
-import Style 1.0
 import QtGraphicalEffects 1.0
 
+import Style 1.0
+
 RowLayout {
     id: unifiedSearchResultItemDetails
 
     property string title: ""
     property string subline: ""
     property string icons: ""
     property string iconPlaceholder: ""
-    property bool isRounded: false
 
+    property bool iconsIsThumbnail: false
+    property bool isRounded: false
 
-    property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
-    property int textRightMargin: Style.unifiedSearchResultTextRightMargin
-    property int iconWidth: Style.unifiedSearchResultIconWidth
-    property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
-
+    property int iconWidth: iconsIsThumbnail && icons !== "" ? Style.unifiedSearchResultIconWidth : Style.unifiedSearchResultSmallIconWidth
     property int titleFontSize: Style.unifiedSearchResultTitleFontSize
     property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
 
@@ -30,76 +28,78 @@ RowLayout {
     Accessible.name: resultTitle
     Accessible.onPressAction: unifiedSearchResultMouseArea.clicked()
 
-    ColumnLayout {
+    spacing: Style.trayHorizontalMargin
+
+    Item {
         id: unifiedSearchResultImageContainer
-        visible: true
-        Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth + 10
-        Layout.preferredHeight: unifiedSearchResultItemDetails.height
+
+        property int whiteSpace: (Style.trayListItemIconSize - unifiedSearchResultItemDetails.iconWidth)
+
+        Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
+        Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
+        Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+        Layout.leftMargin: Style.trayHorizontalMargin + (whiteSpace * (0.5 - Style.thumbnailImageSizeReduction))
+        Layout.rightMargin: whiteSpace * (0.5 + Style.thumbnailImageSizeReduction)
+
         Image {
             id: unifiedSearchResultThumbnail
+            anchors.fill: parent
             visible: false
             asynchronous: true
-            source: "image://tray-image-provider/" + icons
+            source: "image://tray-image-provider/" + unifiedSearchResultItemDetails.icons
             cache: true
-            sourceSize.width: imageData.width
-            sourceSize.height: imageData.height
-            width: imageData.width
-            height: imageData.height
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
+            sourceSize.width: width
+            sourceSize.height: height
         }
         Rectangle {
             id: mask
+            anchors.fill: unifiedSearchResultThumbnail
             visible: false
-            radius: isRounded ? width / 2 : 0
-            width: imageData.width
-            height: imageData.height
+            radius: unifiedSearchResultItemDetails.isRounded ? width / 2 : 3
         }
         OpacityMask {
             id: imageData
-            visible: !unifiedSearchResultThumbnailPlaceholder.visible && icons
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.leftMargin: iconLeftMargin
-            Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
-            Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
+            anchors.fill: unifiedSearchResultThumbnail
+            visible: unifiedSearchResultItemDetails.icons !== ""
             source: unifiedSearchResultThumbnail
             maskSource: mask
         }
         Image {
             id: unifiedSearchResultThumbnailPlaceholder
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
-            Layout.leftMargin: iconLeftMargin
-            verticalAlignment: Qt.AlignCenter
+            anchors.fill: parent
+            verticalAlignment: Qt.AlignVCenter
+            horizontalAlignment: Qt.AlignHCenter
             cache: true
-            source: "image://tray-image-provider/" + iconPlaceholder
-            visible: false
+            source: "image://tray-image-provider/" + unifiedSearchResultItemDetails.iconPlaceholder
+            visible: unifiedSearchResultItemDetails.iconPlaceholder !== "" && unifiedSearchResultItemDetails.icons === ""
             sourceSize.height: unifiedSearchResultItemDetails.iconWidth
             sourceSize.width: unifiedSearchResultItemDetails.iconWidth
-            Layout.preferredWidth: unifiedSearchResultItemDetails.iconWidth
-            Layout.preferredHeight: unifiedSearchResultItemDetails.iconWidth
         }
     }
 
     ColumnLayout {
         id: unifiedSearchResultTextContainer
+
         Layout.fillWidth: true
+        Layout.rightMargin: Style.trayHorizontalMargin
+        spacing: Style.standardSpacing
 
         Label {
             id: unifiedSearchResultTitleText
-            text: title.replace(/[\r\n]+/g, " ")
-            Layout.leftMargin: textLeftMargin
-            Layout.rightMargin: textRightMargin
             Layout.fillWidth: true
+            text: unifiedSearchResultItemDetails.title.replace(/[\r\n]+/g, " ")
             elide: Text.ElideRight
             font.pixelSize: unifiedSearchResultItemDetails.titleFontSize
             color: unifiedSearchResultItemDetails.titleColor
         }
         Label {
             id: unifiedSearchResultTextSubline
-            text: subline.replace(/[\r\n]+/g, " ")
+            Layout.fillWidth: true
+            text: unifiedSearchResultItemDetails.subline.replace(/[\r\n]+/g, " ")
             elide: Text.ElideRight
             font.pixelSize: unifiedSearchResultItemDetails.sublineFontSize
-            Layout.leftMargin: textLeftMargin
-            Layout.rightMargin: textRightMargin
-            Layout.fillWidth: true
             color: unifiedSearchResultItemDetails.sublineColor
         }
     }

diff --git a/src/gui/tray/UnifiedSearchResultItemSkeleton.qml b/src/gui/tray/UnifiedSearchResultItemSkeleton.qml
@@ -7,18 +7,15 @@ import Style 1.0
 RowLayout {
     id: unifiedSearchResultSkeletonItemDetails
 
-    property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
-    property int textRightMargin: Style.unifiedSearchResultTextRightMargin
     property int iconWidth: Style.unifiedSearchResultIconWidth
-    property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
-
     property int titleFontSize: Style.unifiedSearchResultTitleFontSize
     property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
 
     Accessible.role: Accessible.ListItem
     Accessible.name: qsTr("Search result skeleton.").arg(model.index)
 
     height: Style.trayWindowHeaderHeight
+    spacing: Style.trayHorizontalMargin
 
     /*
     * An overview of what goes on here:
@@ -41,52 +38,16 @@ RowLayout {
     */
 
     property color baseGradientColor: Style.lightHover
-    property color progressGradientColor: Style.darkMode ? Qt.lighter(baseGradientColor, 1.2) : Qt.darker(baseGradientColor, 1.1)
-
     property int animationRectangleWidth: Style.trayWindowWidth
-    property int animationStartX: -animationRectangleWidth
-    property int animationEndX: animationRectangleWidth
-
-    Component {
-        id: gradientAnimationRectangle
-        Rectangle {
-            width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
-            height: parent.height
-            gradient: Gradient {
-                orientation: Gradient.Horizontal
-                GradientStop {
-                    position: 0
-                    color: "transparent"
-                }
-                GradientStop {
-                    position: 0.4
-                    color: unifiedSearchResultSkeletonItemDetails.progressGradientColor
-                }
-                GradientStop {
-                    position: 0.6
-                    color: unifiedSearchResultSkeletonItemDetails.progressGradientColor
-                }
-                GradientStop {
-                    position: 1.0
-                    color: "transparent"
-                }
-            }
-
-            NumberAnimation on x {
-                from: unifiedSearchResultSkeletonItemDetails.animationStartX
-                to: unifiedSearchResultSkeletonItemDetails.animationEndX
-                duration: 1000
-                loops: Animation.Infinite
-                running: true
-            }
-        }
-    }
 
     Item {
+        property int whiteSpace: (Style.trayListItemIconSize - unifiedSearchResultSkeletonItemDetails.iconWidth)
+
         Layout.preferredWidth: unifiedSearchResultSkeletonItemDetails.iconWidth
         Layout.preferredHeight: unifiedSearchResultSkeletonItemDetails.iconWidth
-        Layout.leftMargin: unifiedSearchResultSkeletonItemDetails.iconLeftMargin
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
+        Layout.leftMargin: Style.trayHorizontalMargin + (whiteSpace * (0.5 - Style.thumbnailImageSizeReduction))
+        Layout.rightMargin: whiteSpace * (0.5 + Style.thumbnailImageSizeReduction)
 
         Rectangle {
             id: unifiedSearchResultSkeletonThumbnail
@@ -98,7 +59,10 @@ RowLayout {
             Loader {
                 x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
                 height: parent.height
-                sourceComponent: gradientAnimationRectangle
+                sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+                    width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+                    height: parent.height
+                }
             }
         }
 
@@ -121,9 +85,7 @@ RowLayout {
         id: unifiedSearchResultSkeletonTextContainer
 
         Layout.fillWidth: true
-        Layout.leftMargin: unifiedSearchResultSkeletonItemDetails.textLeftMargin
-        Layout.rightMargin: unifiedSearchResultSkeletonItemDetails.textRightMargin
-
+        Layout.rightMargin: Style.trayHorizontalMargin
         spacing: Style.standardSpacing
 
         Item {
@@ -140,7 +102,10 @@ RowLayout {
                 Loader {
                     x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
                     height: parent.height
-                    sourceComponent: gradientAnimationRectangle
+                    sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+                        width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+                        height: parent.height
+                    }
                 }
             }
 
@@ -173,7 +138,10 @@ RowLayout {
                 Loader {
                     x: mapFromItem(unifiedSearchResultSkeletonItemDetails, 0, 0).x
                     height: parent.height
-                    sourceComponent: gradientAnimationRectangle
+                    sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+                        width: unifiedSearchResultSkeletonItemDetails.animationRectangleWidth
+                        height: parent.height
+                    }
                 }
             }
 

diff --git a/src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml b/src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml
@@ -1,12 +1,65 @@
 import QtQml 2.15
 import QtQuick 2.15
+import QtQuick.Layouts 1.15
+import QtGraphicalEffects 1.15
+
 import Style 1.0
 
-Column {
+ColumnLayout {
     id: unifiedSearchResultsListViewSkeletonColumn
 
     property int animationRectangleWidth: Style.trayWindowWidth
 
+    Item {
+        id: placeholderSectionHeader
+
+        property rect textRect: fontMetrics.boundingRect("Dummy text")
+
+        Layout.topMargin: Style.unifiedSearchResultSectionItemVerticalPadding / 2
+        Layout.bottomMargin: Style.unifiedSearchResultSectionItemVerticalPadding / 2
+        Layout.leftMargin: Style.unifiedSearchResultSectionItemLeftPadding
+
+        width: textRect.width
+        height: textRect.height
+
+        FontMetrics {
+            id: fontMetrics
+            font.pixelSize: Style.unifiedSearchResultTitleFontSize
+        }
+
+        Rectangle {
+            id: placeholderSectionHeaderRectangle
+            anchors.fill: parent
+            radius: Style.veryRoundedButtonRadius
+            color: Style.lightHover
+            clip: true
+            visible: false
+
+            Loader {
+                x: mapFromItem(placeholderSectionHeader, 0, 0).x
+                height: parent.height
+                sourceComponent: UnifiedSearchResultItemSkeletonGradientRectangle {
+                    width: unifiedSearchResultsListViewSkeletonColumn.animationRectangleWidth
+                    height: parent.height
+                }
+            }
+        }
+
+        Rectangle {
+            id: placeholderSectionHeaderMask
+            anchors.fill: placeholderSectionHeaderRectangle
+            color: "white"
+            radius: Style.veryRoundedButtonRadius
+            visible: false
+        }
+
+        OpacityMask {
+            anchors.fill: placeholderSectionHeaderRectangle
+            source: placeholderSectionHeaderRectangle
+            maskSource: placeholderSectionHeaderMask
+        }
+    }
+
     Repeater {
         model: Math.ceil(unifiedSearchResultsListViewSkeletonColumn.height / Style.trayWindowHeaderHeight)
         UnifiedSearchResultItemSkeleton {