Fix internal layouting of unified search input container

Signed-off-by: Claudio Cambra <[email protected]>
nextcloud · Nov 24, 2022 · b48f714 · b48f714
1 parent 23ce3b7
commit b48f714
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 44 deletions.
diff --git a/src/gui/tray/UnifiedSearchInputContainer.qml b/src/gui/tray/UnifiedSearchInputContainer.qml
@@ -7,22 +7,34 @@ import Style 1.0
 import com.nextcloud.desktopclient 1.0
 
 TextField {
-    id: trayWindowUnifiedSearchTextField
+    id: root
+
+    signal clearText()
 
     property bool isSearchInProgress: false
 
     readonly property color textFieldIconsColor: Style.menuBorder
 
-    readonly property int textFieldIconsOffset: Style.trayHorizontalMargin
+    readonly property int textFieldIconsPadding: 4
+    readonly property int textFieldIconsLeftOffset: Style.trayHorizontalMargin + leftInset
+    readonly property int textFieldIconsRightOffset: Style.trayHorizontalMargin + rightInset
+    readonly property int textFieldIconsTopOffset: topInset
+    readonly property int textFieldIconsBottomOffset: bottomInset
 
     readonly property double textFieldIconsScaleFactor: 0.6
 
-    readonly property int textFieldHorizontalPaddingOffset: Style.trayHorizontalMargin
-
-    signal clearText()
+    readonly property int textFieldTextLeftOffset: Style.trayHorizontalMargin + leftInset
+    readonly property int textFieldTextRightOffset: Style.trayHorizontalMargin + rightInset
 
-    leftPadding: trayWindowUnifiedSearchTextFieldSearchIcon.width + trayWindowUnifiedSearchTextFieldSearchIcon.anchors.leftMargin + textFieldHorizontalPaddingOffset - 1
-    rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width + trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin + textFieldHorizontalPaddingOffset
+    topPadding: topInset
+    bottomPadding: bottomInset
+    leftPadding: trayWindowUnifiedSearchTextFieldSearchIcon.width +
+                 trayWindowUnifiedSearchTextFieldSearchIcon.anchors.leftMargin +
+                 textFieldTextLeftOffset - 1
+    rightPadding: trayWindowUnifiedSearchTextFieldClearTextButton.width +
+                  trayWindowUnifiedSearchTextFieldClearTextButton.anchors.rightMargin +
+                  textFieldTextRightOffset
+    verticalAlignment: Qt.AlignVCenter
 
     placeholderText: qsTr("Search files, messages, events …")
 
@@ -32,73 +44,79 @@ TextField {
 
     background: Rectangle {
         radius: 5
-        border.color: parent.activeFocus ? UserModel.currentUser.accentColor : Style.menuBorder
+        border.color: root.activeFocus ? UserModel.currentUser.accentColor : Style.menuBorder
         border.width: 1
         color: Style.backgroundColor
     }
 
     Image {
         id: trayWindowUnifiedSearchTextFieldSearchIcon
-        width: Style.trayListItemIconSize - anchors.leftMargin
-        fillMode: Image.PreserveAspectFit
-        horizontalAlignment: Image.AlignLeft
 
         anchors {
-            left: parent.left
-            leftMargin: parent.textFieldIconsOffset
-            verticalCenter: parent.verticalCenter
+            left: root.left
+            leftMargin: root.textFieldIconsLeftOffset
+            top: root.top
+            topMargin: root.textFieldIconsTopOffset + root.textFieldIconsPadding
+            bottom: root.bottom
+            bottomMargin: root.textFieldIconsBottomOffset + root.textFieldIconsPadding
         }
 
-        visible: !trayWindowUnifiedSearchTextField.isSearchInProgress
+        width: Style.trayListItemIconSize - anchors.leftMargin
+        fillMode: Image.PreserveAspectFit
+        horizontalAlignment: Image.AlignLeft
 
         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
+        sourceSize: Qt.size(root.height * root.textFieldIconsScaleFactor, root.height * root.textFieldIconsScaleFactor)
+
+        visible: !root.isSearchInProgress
     }
 
     NCBusyIndicator {
         id: busyIndicator
 
         anchors {
-            left: trayWindowUnifiedSearchTextField.left
-            bottom: trayWindowUnifiedSearchTextField.bottom
-            leftMargin: trayWindowUnifiedSearchTextField.textFieldIconsOffset - 4
-            topMargin: 4
-            bottomMargin: 4
-            verticalCenter: trayWindowUnifiedSearchTextField.verticalCenter
+            top: root.top
+            topMargin: root.textFieldIconsTopOffset + root.textFieldIconsPadding
+            bottom: root.bottom
+            bottomMargin: root.textFieldIconsBottomOffset + root.textFieldIconsPadding
+            left: root.left
+            leftMargin: root.textFieldIconsLeftOffset
         }
 
         width: height
-        color: trayWindowUnifiedSearchTextField.textFieldIconsColor
-        visible: trayWindowUnifiedSearchTextField.isSearchInProgress
+        color: root.textFieldIconsColor
+        visible: root.isSearchInProgress
         running: visible
     }
 
     Image {
         id: trayWindowUnifiedSearchTextFieldClearTextButton
 
         anchors {
-            right: parent.right
-            rightMargin: parent.textFieldIconsOffset
-            verticalCenter: parent.verticalCenter
+            top: root.top
+            topMargin: root.textFieldIconsTopOffset + root.textFieldIconsPadding
+            bottom: root.bottom
+            bottomMargin: root.textFieldIconsBottomOffset + root.textFieldIconsPadding
+            right: root.right
+            rightMargin: root.textFieldIconsRightOffset
         }
 
-        smooth: true;
+        fillMode: Image.PreserveAspectFit
+        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)
+        visible: root.text
+        source: "image://svgimage-custom-color/clear.svg" + "/" + root.textFieldIconsColor
+        sourceSize: Qt.size(root.height * root.textFieldIconsScaleFactor, root.height * root.textFieldIconsScaleFactor)
 
         MouseArea {
             id: trayWindowUnifiedSearchTextFieldClearTextButtonMouseArea
-
             anchors.fill: parent
-
-            onClicked: trayWindowUnifiedSearchTextField.clearText()
+            onClicked: root.clearText()
         }
     }
 }
diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml
@@ -665,17 +665,17 @@ ApplicationWindow {
 
         UnifiedSearchInputContainer {
             id: trayWindowUnifiedSearchInputContainer
-            height: Style.trayWindowHeaderHeight * 0.65
+            height: Style.unifiedSearchInputContainerHeight +
+                    topInset +
+                    bottomInset
 
-            anchors {
-                top: trayWindowHeaderBackground.bottom
-                left: trayWindowMainItem.left
-                right: trayWindowMainItem.right
+            anchors.top: trayWindowHeaderBackground.bottom
+            anchors.left: trayWindowMainItem.left
+            anchors.right: trayWindowMainItem.right
 
-                topMargin: Style.trayHorizontalMargin + controlRoot.padding
-                leftMargin: Style.trayHorizontalMargin + controlRoot.padding
-                rightMargin: Style.trayHorizontalMargin + controlRoot.padding
-            }
+            topInset: Style.trayHorizontalMargin + controlRoot.padding
+            leftInset: Style.trayHorizontalMargin + controlRoot.padding
+            rightInset: Style.trayHorizontalMargin + controlRoot.padding
 
             text: UserModel.currentUser.unifiedSearchResultsListModel.searchTerm
             readOnly: !UserModel.currentUser.isConnected || UserModel.currentUser.unifiedSearchResultsListModel.currentFetchMoreInProgressProviderId

diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml
@@ -121,6 +121,7 @@ QtObject {
     readonly property int unifiedSearchResultSectionItemLeftPadding: 16
     readonly property int unifiedSearchResultSectionItemVerticalPadding: 8
     readonly property int unifiedSearchResultNothingFoundHorizontalMargin: 10
+    readonly property int unifiedSearchInputContainerHeight: 40
 
     readonly property var fontMetrics: FontMetrics {}