Simplify layout and fix alignments, sizings, and layouts of items with native theming...

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

diff --git a/src/gui/tray/MainWindow.qml b/src/gui/tray/MainWindow.qml
index 28cec013f4b68d921b39f38d414f498b89e782c9..4a421d9addec7526d1a7650040bc2b90266ac9c4 100644 (file)
--- a/src/gui/tray/MainWindow.qml
+++ b/src/gui/tray/MainWindow.qml
@@ -580,17 +580,13 @@ ApplicationWindow {
 \r
         UnifiedSearchInputContainer {\r
             id: trayWindowUnifiedSearchInputContainer\r
-            height: Math.max(Style.talkReplyTextFieldPreferredHeight, contentHeight)\r
 \r
-            anchors {\r
-                top: trayWindowHeaderBackground.bottom\r
-                left: trayWindowMainItem.left\r
-                right: trayWindowMainItem.right\r
-\r
-                topMargin: Style.trayHorizontalMargin + controlRoot.padding\r
-                leftMargin: Style.trayHorizontalMargin + controlRoot.padding\r
-                rightMargin: Style.trayHorizontalMargin + controlRoot.padding\r
-            }\r
+            anchors.top: trayWindowHeaderBackground.bottom\r
+            anchors.left: trayWindowMainItem.left\r
+            anchors.right: trayWindowMainItem.right\r
+            anchors.topMargin: Style.trayHorizontalMargin\r
+            anchors.leftMargin: Style.trayHorizontalMargin\r
+            anchors.rightMargin: Style.trayHorizontalMargin\r
 \r
             text: UserModel.currentUser.unifiedSearchResultsListModel.searchTerm\r
             readOnly: !UserModel.currentUser.isConnected || UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId\r

diff --git a/src/gui/tray/UnifiedSearchInputContainer.qml b/src/gui/tray/UnifiedSearchInputContainer.qml
index 7a6457c3603554c31cf4192aa7de85004f0460a5..186d344815de776b2fe8b928e8987341b4096b7c 100644 (file)
--- a/src/gui/tray/UnifiedSearchInputContainer.qml
+++ b/src/gui/tray/UnifiedSearchInputContainer.qml
@@ -21,98 +21,85 @@ import Style
 import com.nextcloud.desktopclient
 
 TextField {
-    id: trayWindowUnifiedSearchTextField
+    id: root
+
+    signal clearText()
 
     property bool isSearchInProgress: false
 
     readonly property color textFieldIconsColor: palette.dark
-
     readonly property color placeholderColor: palette.dark
 
-    readonly property int textFieldIconsOffset: Style.trayHorizontalMargin
-
-    readonly property double textFieldIconsScaleFactor: 0.6
-
-    readonly property int textFieldHorizontalPaddingOffset: Style.trayHorizontalMargin
+    readonly property int iconInset: Style.smallSpacing
 
-    signal clearText()
-
-    leftPadding: trayWindowUnifiedSearchTextFieldSearchIcon.width + trayWindowUnifiedSearchTextFieldSearchIcon.anchors.leftMargin + textFieldHorizontalPaddingOffset - 1
-    rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset
+    topPadding: topInset
+    bottomPadding: bottomInset
+    leftPadding: searchIconImage.width + searchIconImage.x + Style.smallSpacing
+    rightPadding: (width - clearTextButton.x) + Style.smallSpacing
+    verticalAlignment: Qt.AlignVCenter
 
     placeholderText: qsTr("Search files, messages, events …")
-    verticalAlignment: Qt.AlignVCenter
 
     selectByMouse: true
 
-    background: Rectangle {
-        border.color: palette.dark
-        radius: Style.trayWindowRadius
-        color: palette.base
-    }
-
     Image {
-        id: trayWindowUnifiedSearchTextFieldSearchIcon
-        width: Style.trayListItemIconSize - anchors.leftMargin
-        fillMode: Image.PreserveAspectFit
-        horizontalAlignment: Image.AlignLeft
+        id: searchIconImage
 
         anchors {
-            left: parent.left
-            leftMargin: parent.textFieldIconsOffset
-            verticalCenter: parent.verticalCenter
+            left: root.left
+            leftMargin: iconInset
+            top: root.top
+            topMargin: Style.extraSmallSpacing
+            bottom: root.bottom
+            bottomMargin: Style.extraSmallSpacing 
         }
 
-        visible: !trayWindowUnifiedSearchTextField.isSearchInProgress
-
-        smooth: true;
+        fillMode: Image.PreserveAspectFit
+        smooth: true
         antialiasing: true
         mipmap: true
-        source: "image://svgimage-custom-color/search.svg" + "/" + trayWindowUnifiedSearchTextField.textFieldIconsColor
-        sourceSize: Qt.size(parent.height * parent.textFieldIconsScaleFactor, parent.height * parent.textFieldIconsScaleFactor)
+        source: "image://svgimage-custom-color/search.svg" + "/" + root.textFieldIconsColor
+        visible: !root.isSearchInProgress
     }
 
     NCBusyIndicator {
         id: busyIndicator
 
         anchors {
-            left: trayWindowUnifiedSearchTextField.left
-            bottom: trayWindowUnifiedSearchTextField.bottom
-            leftMargin: trayWindowUnifiedSearchTextField.textFieldIconsOffset - 4
-            topMargin: Style.smallSpacing
-            bottomMargin: Style.smallSpacing
-            verticalCenter: trayWindowUnifiedSearchTextField.verticalCenter
+            top: root.top
+            topMargin: Style.extraSmallSpacing
+            bottom: root.bottom
+            bottomMargin: Style.extraSmallSpacing
+            left: root.left
+            leftMargin: iconInset
         }
 
         width: height
-        color: trayWindowUnifiedSearchTextField.textFieldIconsColor
-        visible: trayWindowUnifiedSearchTextField.isSearchInProgress
+        color: root.textFieldIconsColor
+        visible: root.isSearchInProgress
         running: visible
     }
 
     Image {
-        id: trayWindowUnifiedSearchTextFieldClearTextButton
+        id: clearTextButton
 
         anchors {
-            right: parent.right
-            rightMargin: parent.textFieldIconsOffset
-            verticalCenter: parent.verticalCenter
+            top: root.top
+            topMargin: Style.extraSmallSpacing
+            bottom: root.bottom
+            bottomMargin: Style.extraSmallSpacing
+            right: root.right
+            rightMargin: iconInset
         }
 
-        smooth: true;
-        antialiasing: true
-        mipmap: true
-
-        visible: parent.text
-        source: "image://svgimage-custom-color/clear.svg" + "/" + trayWindowUnifiedSearchTextField.textFieldIconsColor
-        sourceSize: Qt.size(parent.height * parent.textFieldIconsScaleFactor, parent.height * parent.textFieldIconsScaleFactor)
+        fillMode: Image.PreserveAspectFit
+        visible: root.text
+        source: "image://svgimage-custom-color/clear.svg" + "/" + root.textFieldIconsColor
 
         MouseArea {
-            id: trayWindowUnifiedSearchTextFieldClearTextButtonMouseArea
-
+            id: clearTextButtonMouseArea
             anchors.fill: parent
-
-            onClicked: trayWindowUnifiedSearchTextField.clearText()
+            onClicked: root.clearText()
         }
     }
 }

diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml
index a41247831450a43ed0c323cb157c93bab410713c..cda260235dcb1d2967526f3c4ef14b724925d880 100644 (file)
--- a/theme/Style/Style.qml
+++ b/theme/Style/Style.qml
@@ -151,6 +151,7 @@ QtObject {
     readonly property int unifiedSearchResultSectionItemLeftPadding: 16\r
     readonly property int unifiedSearchResultSectionItemVerticalPadding: 8\r
     readonly property int unifiedSearchResultNothingFoundHorizontalMargin: 10\r
+    readonly property int unifiedSearchInputContainerHeight: 40\r
 \r
     readonly property int radioButtonCustomMarginLeftInner: 4\r
     readonly property int radioButtonCustomMarginLeftOuter: 5\r