Stop styling QML unified search items hierarchically, use global Style constants
authorClaudio Cambra <claudio.cambra@gmail.com>
Mon, 11 Jul 2022 16:56:35 +0000 (18:56 +0200)
committerClaudio Cambra <claudio.cambra@gmail.com>
Thu, 21 Jul 2022 13:38:18 +0000 (15:38 +0200)
Signed-off-by: Claudio Cambra <claudio.cambra@gmail.com>
src/gui/tray/UnifiedSearchResultFetchMoreTrigger.qml
src/gui/tray/UnifiedSearchResultItem.qml
src/gui/tray/UnifiedSearchResultItemSkeleton.qml
src/gui/tray/UnifiedSearchResultItemSkeletonContainer.qml
src/gui/tray/UnifiedSearchResultListItem.qml
src/gui/tray/UnifiedSearchResultNothingFound.qml
src/gui/tray/UnifiedSearchResultSectionItem.qml
src/gui/tray/Window.qml
theme/Style/Style.qml

index 02ea71f2b950f573149809b336399a136af9b661..83982841d19a0314d696964adddb51669b31e458 100644 (file)
@@ -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
index 702b3a331f99f24ec81c7239b82380894c3fa138..d8a520f1ee8c28cfaddc2c0afd8748467141aed0 100644 (file)
@@ -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
index ddc38d29dc4e4665732c5c7555e3a252feaaa91d..a7a1a6f95369a7ecfb9d60db7940ee2527b5dd2b 100644 (file)
@@ -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
index e128f6860a991359a6ccf5e2a2ae8b621158cec0..0ed23482cc316ef0dff5fea266045b5ac5397bc2 100644 (file)
@@ -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
         }
     }
 }
index ce942a4d15ea8055e5a45ff3291e89aeef489da6..c53ca4066f67debbd430945f0870a3f46d96e72b 100644 (file)
@@ -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
         }
     }
 
index 67bd8108e8636d4476bb292aae9dafddf9b449b0..cee73c3363d03bc493a5dc94818a89c5ef2ea1d0 100644 (file)
@@ -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
index 89ad6bf31e91e27009e96b23ed9884a69c505a2a..ebc691a9c5722d021ae0f53261eb5cf24b52ffc4 100644 (file)
@@ -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
index 1e84e1847c68691a223f3e30e4b39684cab95e93..5508d080386d4252fe1587269fb58158b1bcdbe9 100644 (file)
@@ -665,9 +665,6 @@ Window {
             id: unifiedSearchResultsErrorLabel\r
             visible:  UserModel.currentUser.unifiedSearchResultsListModel.errorString && !unifiedSearchResultsListView.visible && ! UserModel.currentUser.unifiedSearchResultsListModel.isSearchInProgress && ! UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId\r
             text:  UserModel.currentUser.unifiedSearchResultsListModel.errorString\r
-            color: Style.errorBoxBackgroundColor\r
-            backgroundColor: Style.errorBoxTextColor\r
-            borderColor: "transparent"\r
             anchors.top: trayWindowUnifiedSearchInputContainer.bottom\r
             anchors.left: trayWindowBackground.left\r
             anchors.right: trayWindowBackground.right\r
@@ -716,16 +713,6 @@ Window {
             anchors.left: trayWindowBackground.left\r
             anchors.right: trayWindowBackground.right\r
             anchors.bottom: trayWindowBackground.bottom\r
-            textLeftMargin: trayWindowBackground.Style.unifiedSearchResultTextLeftMargin\r
-            textRightMargin: trayWindowBackground.Style.unifiedSearchResultTextRightMargin\r
-            iconWidth: trayWindowBackground.Style.unifiedSearchResulIconWidth\r
-            iconLeftMargin: trayWindowBackground.Style.unifiedSearchResulIconLeftMargin\r
-            itemHeight: trayWindowBackground.Style.unifiedSearchItemHeight\r
-            titleFontSize: trayWindowBackground.Style.unifiedSearchResulTitleFontSize\r
-            sublineFontSize: trayWindowBackground.Style.unifiedSearchResulSublineFontSize\r
-            titleColor: Style.ncTextColor\r
-            sublineColor: Style.ncSecondaryTextColor\r
-            iconColor: "#afafaf"\r
         }\r
 \r
         ScrollView {\r
@@ -761,16 +748,7 @@ Window {
 \r
                 delegate: UnifiedSearchResultListItem {\r
                     width: unifiedSearchResultsListView.width\r
-                    height: Style.unifiedSearchItemHeight\r
                     isSearchInProgress:  unifiedSearchResultsListView.model.isSearchInProgress\r
-                    textLeftMargin: Style.unifiedSearchResultTextLeftMargin\r
-                    textRightMargin: Style.unifiedSearchResultTextRightMargin\r
-                    iconWidth: Style.unifiedSearchResulIconWidth\r
-                    iconLeftMargin: Style.unifiedSearchResulIconLeftMargin\r
-                    titleFontSize: Style.unifiedSearchResulTitleFontSize\r
-                    sublineFontSize: Style.unifiedSearchResulSublineFontSize\r
-                    titleColor: Style.ncTextColor\r
-                    sublineColor: Style.ncSecondaryTextColor\r
                     currentFetchMoreInProgressProviderId: unifiedSearchResultsListView.model.currentFetchMoreInProgressProviderId\r
                     fetchMoreTriggerClicked: unifiedSearchResultsListView.model.fetchMoreTriggerClicked\r
                     resultClicked: unifiedSearchResultsListView.model.resultClicked\r
index 42e32a036c595c24dea290e96e6355aec5357e16..1d8b200e3852fdbdc58bdeb259fe5452047c2467 100644 (file)
@@ -101,10 +101,13 @@ QtObject {
     readonly property int unifiedSearchItemHeight: trayWindowHeaderHeight\r
     readonly property int unifiedSearchResultTextLeftMargin: 18\r
     readonly property int unifiedSearchResultTextRightMargin: 16\r
-    readonly property int unifiedSearchResulIconWidth: 24\r
-    readonly property int unifiedSearchResulIconLeftMargin: 12\r
-    readonly property int unifiedSearchResulTitleFontSize: topLinePixelSize\r
-    readonly property int unifiedSearchResulSublineFontSize: subLinePixelSize\r
+    readonly property int unifiedSearchResultIconWidth: 24\r
+    readonly property int unifiedSearchResultIconLeftMargin: 12\r
+    readonly property int unifiedSearchResultTitleFontSize: topLinePixelSize\r
+    readonly property int unifiedSearchResultSublineFontSize: subLinePixelSize\r
+    readonly property int unifiedSearchResultSectionItemLeftPadding: 16\r
+    readonly property int unifiedSearchResultSectionItemVerticalPadding: 8\r
+    readonly property int unifiedSearchResultNothingFoundHorizontalMargin: 10\r
 \r
     readonly property var fontMetrics: FontMetrics {}\r
 \r