Stop styling QML unified search items hierarchically, use global Style constants

Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>

src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml

@@ -9,9 +9,9 @@ ColumnLayout {
 
     property bool isFetchMoreInProgress: false
 
-    property bool isWihinViewPort: false
+    property bool isWithinViewPort: false
 
-    property int fontSize: Style.topLinePixelSize
+    property int fontSize: Style.unifiedSearchResultTitleFontSize
 
     property string textColor: Style.ncSecondaryTextColor
 
@@ -34,7 +34,7 @@ ColumnLayout {
     BusyIndicator {
         id: unifiedSearchResultItemFetchMoreIconInProgress
         running: visible
-        visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWihinViewPort
+        visible: unifiedSearchResultItemFetchMore.isFetchMoreInProgress && unifiedSearchResultItemFetchMore.isWithinViewPort
         Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
         Layout.preferredWidth: parent.height * 0.70
         Layout.preferredHeight: parent.height * 0.70

src/gui/tray/UnifiedSearchResultItem.qml

@@ -15,13 +15,13 @@ RowLayout {
     property bool isRounded: false
 
 
-    property int textLeftMargin: 18
-    property int textRightMargin: 16
-    property int iconWidth: 24
-    property int iconLeftMargin: 12
+    property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
+    property int textRightMargin: Style.unifiedSearchResultTextRightMargin
+    property int iconWidth: Style.unifiedSearchResultIconWidth
+    property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
 
-    property int titleFontSize: Style.topLinePixelSize
-    property int sublineFontSize: Style.subLinePixelSize
+    property int titleFontSize: Style.unifiedSearchResultTitleFontSize
+    property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
 
     property color titleColor: Style.ncTextColor
     property color sublineColor: Style.ncSecondaryTextColor

src/gui/tray/UnifiedSearchResultItemSkeleton.qml

@@ -6,13 +6,13 @@ import Style 1.0
 RowLayout {
     id: unifiedSearchResultSkeletonItemDetails
 
-    property int textLeftMargin: 18
-    property int textRightMargin: 16
-    property int iconWidth: 24
-    property int iconLeftMargin: 12
+    property int textLeftMargin: Style.unifiedSearchResultTextLeftMargin
+    property int textRightMargin: Style.unifiedSearchResultTextRightMargin
+    property int iconWidth: Style.unifiedSearchResultIconWidth
+    property int iconLeftMargin: Style.unifiedSearchResultIconLeftMargin
 
-    property int titleFontSize: Style.topLinePixelSize
-    property int sublineFontSize: Style.subLinePixelSize
+    property int titleFontSize: Style.unifiedSearchResultTitleFontSize
+    property int sublineFontSize: Style.unifiedSearchResultSublineFontSize
 
     property color titleColor: Style.ncTextColor
     property color sublineColor: Style.ncSecondaryTextColor
@@ -24,6 +24,8 @@ RowLayout {
     Accessible.role: Accessible.ListItem
     Accessible.name: qsTr("Search result skeleton.").arg(index)
 
+    height: Style.trayWindowHeaderHeight
+
     Rectangle {
         id: unifiedSearchResultSkeletonThumbnail
         color: unifiedSearchResultSkeletonItemDetails.iconColor

src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml

@@ -1,49 +1,26 @@
 import QtQml 2.15
 import QtQuick 2.15
-import QtQuick.Controls 2.3
 import Style 1.0
 
 Column {
     id: unifiedSearchResultsListViewSkeletonColumn
 
-    property int textLeftMargin: 18
-    property int textRightMargin: 16
-    property int iconWidth: 24
-    property int iconLeftMargin: 12
-    property int itemHeight: Style.trayWindowHeaderHeight
-    property int titleFontSize: Style.topLinePixelSize
-    property int sublineFontSize: Style.subLinePixelSize
-    property color titleColor: Style.ncTextColor
-    property color sublineColor: Style.ncSecondaryTextColor
-    property color iconColor: "#afafaf"
-
     Repeater {
         model: 10
         UnifiedSearchResultItemSkeleton {
-            textLeftMargin: unifiedSearchResultsListViewSkeletonColumn.textLeftMargin
-            textRightMargin: unifiedSearchResultsListViewSkeletonColumn.textRightMargin
-            iconWidth: unifiedSearchResultsListViewSkeletonColumn.iconWidth
-            iconLeftMargin: unifiedSearchResultsListViewSkeletonColumn.iconLeftMargin
             width: unifiedSearchResultsListViewSkeletonColumn.width
-            height: unifiedSearchResultsListViewSkeletonColumn.itemHeight
-            index: model.index
-            titleFontSize: unifiedSearchResultsListViewSkeletonColumn.titleFontSize
-            sublineFontSize: unifiedSearchResultsListViewSkeletonColumn.sublineFontSize
-            titleColor: unifiedSearchResultsListViewSkeletonColumn.titleColor
-            sublineColor: unifiedSearchResultsListViewSkeletonColumn.sublineColor
-            iconColor: unifiedSearchResultsListViewSkeletonColumn.iconColor
         }
     }
 
     OpacityAnimator {
-        target: unifiedSearchResultsListViewSkeletonColumn;
-        from: 0.5;
-        to: 1;
+        target: unifiedSearchResultsListViewSkeletonColumn
+        from: 0.5
+        to: 1
         duration: 800
         running: unifiedSearchResultsListViewSkeletonColumn.visible
-        loops: Animation.Infinite;
+        loops: Animation.Infinite
         easing {
-            type: Easing.InOutBounce;
+            type: Easing.InOutBounce
         }
     }
 }

src/gui/tray/UnifiedSearchResultListItem.qml

@@ -7,17 +7,6 @@ import com.nextcloud.desktopclient 1.0
 MouseArea {
     id: unifiedSearchResultMouseArea
 
-    property int textLeftMargin: 18
-    property int textRightMargin: 16
-    property int iconWidth: 24
-    property int iconLeftMargin: 12
-
-    property int titleFontSize: Style.topLinePixelSize
-    property int sublineFontSize: Style.subLinePixelSize
-
-    property color titleColor: Style.ncTextColor
-    property color sublineColor: Style.ncSecondaryTextColor
-
     property string currentFetchMoreInProgressProviderId: ""
 
     readonly property bool isFetchMoreTrigger: model.typeAsString === "FetchMoreTrigger"
@@ -33,6 +22,8 @@ MouseArea {
     enabled: !isFetchMoreTrigger || !isSearchInProgress
     hoverEnabled: enabled
 
+    height: Style.unifiedSearchItemHeight
+
     ToolTip {
         id: unifiedSearchResultMouseAreaTooltip
         visible: unifiedSearchResultMouseArea.containsMouse
@@ -64,14 +55,6 @@ MouseArea {
             icons: Theme.darkMode ? model.darkIcons : model.lightIcons
             iconPlaceholder: Theme.darkMode ? model.darkImagePlaceholder : model.lightImagePlaceholder
             isRounded: model.isRounded
-            textLeftMargin: unifiedSearchResultMouseArea.textLeftMargin
-            textRightMargin: unifiedSearchResultMouseArea.textRightMargin
-            iconWidth: unifiedSearchResultMouseArea.iconWidth
-            iconLeftMargin: unifiedSearchResultMouseArea.iconLeftMargin
-            titleFontSize: unifiedSearchResultMouseArea.titleFontSize
-            sublineFontSize: unifiedSearchResultMouseArea.sublineFontSize
-            titleColor: unifiedSearchResultMouseArea.titleColor
-            sublineColor: unifiedSearchResultMouseArea.sublineColor
         }
     }
 
@@ -81,9 +64,7 @@ MouseArea {
             isFetchMoreInProgress: unifiedSearchResultMouseArea.isFetchMoreInProgress
             width: unifiedSearchResultMouseArea.width
             height: unifiedSearchResultMouseArea.height
-            isWihinViewPort: !unifiedSearchResultMouseArea.isPooled
-            fontSize: unifiedSearchResultMouseArea.titleFontSize
-            textColor: unifiedSearchResultMouseArea.sublineColor
+            isWithinViewPort: !unifiedSearchResultMouseArea.isPooled
         }
     }
 

src/gui/tray/UnifiedSearchResultNothingFound.qml

@@ -9,9 +9,9 @@ ColumnLayout {
 
     required property string text
 
-    spacing: 8
-    anchors.leftMargin: 10
-    anchors.rightMargin: 10
+    spacing: Style.standardSpacing
+    anchors.leftMargin: Style.unifiedSearchResultNothingFoundHorizontalMargin
+    anchors.rightMargin: Style.unifiedSearchResultNothingFoundHorizontalMargin
 
     Image {
         id: unifiedSearchResultsNoResultsLabelIcon

src/gui/tray/UnifiedSearchResultSectionItem.qml

@@ -8,12 +8,12 @@ import com.nextcloud.desktopclient 1.0
 Label {
     required property string section
 
-    topPadding: 8
-    bottomPadding: 8
-    leftPadding: 16
+    topPadding: Style.unifiedSearchResultSectionItemVerticalPadding
+    bottomPadding: Style.unifiedSearchResultSectionItemVerticalPadding
+    leftPadding: Style.unifiedSearchResultSectionItemLeftPadding
 
     text: section
-    font.pixelSize: Style.topLinePixelSize
+    font.pixelSize: Style.unifiedSearchResultTitleFontSize
     color: UserModel.currentUser.accentColor
 
     Accessible.role: Accessible.Separator

src/gui/tray/Window.qml

@@ -665,9 +665,6 @@ Window {
             id: unifiedSearchResultsErrorLabel
             visible:  UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId
             text:  UserModel.currentUser.unifiedSearchResultsListModel.errorString
-            color: Style.errorBoxBackgroundColor
-            backgroundColor: Style.errorBoxTextColor
-            borderColor: "transparent"
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom
             anchors.left: trayWindowBackground.left
             anchors.right: trayWindowBackground.right
@@ -716,16 +713,6 @@ Window {
             anchors.left: trayWindowBackground.left
             anchors.right: trayWindowBackground.right
             anchors.bottom: trayWindowBackground.bottom
-            textLeftMargin: trayWindowBackground.Style.unifiedSearchResultTextLeftMargin
-            textRightMargin: trayWindowBackground.Style.unifiedSearchResultTextRightMargin
-            iconWidth: trayWindowBackground.Style.unifiedSearchResulIconWidth
-            iconLeftMargin: trayWindowBackground.Style.unifiedSearchResulIconLeftMargin
-            itemHeight: trayWindowBackground.Style.unifiedSearchItemHeight
-            titleFontSize: trayWindowBackground.Style.unifiedSearchResulTitleFontSize
-            sublineFontSize: trayWindowBackground.Style.unifiedSearchResulSublineFontSize
-            titleColor: Style.ncTextColor
-            sublineColor: Style.ncSecondaryTextColor
-            iconColor: "#afafaf"
         }
 
         ScrollView {
@@ -761,16 +748,7 @@ Window {
 
                 delegate: UnifiedSearchResultListItem {
                     width: unifiedSearchResultsListView.width
-                    height: Style.unifiedSearchItemHeight
                     isSearchInProgress:  unifiedSearchResultsListView.model.isSearchInProgress
-                    textLeftMargin: Style.unifiedSearchResultTextLeftMargin
-                    textRightMargin: Style.unifiedSearchResultTextRightMargin
-                    iconWidth: Style.unifiedSearchResulIconWidth
-                    iconLeftMargin: Style.unifiedSearchResulIconLeftMargin
-                    titleFontSize: Style.unifiedSearchResulTitleFontSize
-                    sublineFontSize: Style.unifiedSearchResulSublineFontSize
-                    titleColor: Style.ncTextColor
-                    sublineColor: Style.ncSecondaryTextColor
                     currentFetchMoreInProgressProviderId: unifiedSearchResultsListView.model.currentFetchMoreInProgressProviderId
                     fetchMoreTriggerClicked: unifiedSearchResultsListView.model.fetchMoreTriggerClicked
                     resultClicked: unifiedSearchResultsListView.model.resultClicked

theme/Style/Style.qml

@@ -101,10 +101,13 @@ QtObject {
     readonly property int unifiedSearchItemHeight: trayWindowHeaderHeight
     readonly property int unifiedSearchResultTextLeftMargin: 18
     readonly property int unifiedSearchResultTextRightMargin: 16
-    readonly property int unifiedSearchResulIconWidth: 24
-    readonly property int unifiedSearchResulIconLeftMargin: 12
-    readonly property int unifiedSearchResulTitleFontSize: topLinePixelSize
-    readonly property int unifiedSearchResulSublineFontSize: subLinePixelSize
+    readonly property int unifiedSearchResultIconWidth: 24
+    readonly property int unifiedSearchResultIconLeftMargin: 12
+    readonly property int unifiedSearchResultTitleFontSize: topLinePixelSize
+    readonly property int unifiedSearchResultSublineFontSize: subLinePixelSize
+    readonly property int unifiedSearchResultSectionItemLeftPadding: 16
+    readonly property int unifiedSearchResultSectionItemVerticalPadding: 8
+    readonly property int unifiedSearchResultNothingFoundHorizontalMargin: 10
 
     readonly property var fontMetrics: FontMetrics {}