Avoiding using QfTextField when we mix up other material controls & popup height fixes

src/app/main.cpp

@@ -232,6 +232,7 @@ int main( int argc, char **argv )
   app.installTranslator( &qfieldTranslator );
 
   qputenv( "QT_QUICK_CONTROLS_STYLE", QByteArray( "Material" ) );
+  qputenv( "QT_QUICK_CONTROLS_MATERIAL_VARIANT", QByteArray( "Dense" ) );
 
   QgisMobileapp mApp( &app );
 

src/qml/BookmarkProperties.qml

@@ -49,36 +49,26 @@ Popup {
 
     ColumnLayout {
       id: propertiesLayout
-      spacing: 4
+      spacing: 10
       width: parent.width
 
-      Label {
-        Layout.fillWidth: true
-        text: qsTr('Name')
-        font: Theme.defaultFont
-      }
-
-      QfTextField {
+      TextField {
         id: nameField
         Layout.fillWidth: true
         font: Theme.defaultFont
+        placeholderText: qsTr('Name')
         text: ''
 
         onTextChanged: {
           saveBookmark();
         }
       }
 
-      Label {
-        Layout.fillWidth: true
-        text: qsTr('Color')
-        font: Theme.defaultFont
-      }
-
       RowLayout {
         id: groupField
         spacing: 8
         Layout.fillWidth: true
+        Layout.alignment: Qt.AlignHCenter
 
         property int iconSize: 32
         property string value: ''
@@ -89,7 +79,6 @@ Popup {
 
         Rectangle {
           id: defaultColor
-          Layout.alignment: Qt.AlignVCenter
           width: groupField.iconSize
           height: groupField.iconSize
           color: Theme.bookmarkDefault
@@ -144,15 +133,11 @@ Popup {
             onClicked: groupField.value = 'blue'
           }
         }
-        Item {
-          Layout.fillWidth: true
-        }
       }
 
       QfButton {
         id: updateBookmarkButton
         Layout.fillWidth: true
-        Layout.topMargin: 10
         text: qsTr('Copy bookmark details')
 
         onClicked: {

src/qml/Changelog.qml

@@ -11,10 +11,10 @@ Popup {
   id: changelogPopup
 
   parent: mainWindow.contentItem
+  width: mainWindow.width - Theme.popupScreenEdgeMargin * 2
+  height: mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4)
   x: Theme.popupScreenEdgeMargin
-  y: Theme.popupScreenEdgeMargin
-  width: parent.width - Theme.popupScreenEdgeMargin * 2
-  height: parent.height - Theme.popupScreenEdgeMargin * 2
+  y: (mainWindow.height - height) / 2
   padding: 0
   modal: true
   closePolicy: Popup.CloseOnEscape

src/qml/CodeReader.qml

@@ -21,7 +21,7 @@ Popup {
   property bool openedOnce: false
 
   width: popupWidth
-  height: Math.min(mainWindow.height - Theme.popupScreenEdgeMargin, popupWidth + toolBar.height + acceptButton.height)
+  height: Math.min(mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4), popupWidth + toolBar.height + acceptButton.height)
   x: (parent.width - width) / 2
   y: (parent.height - height) / 2
   z: 10000 // 1000s are embedded feature forms, use a higher value to insure feature form popups always show above embedded feature formes

src/qml/EmbeddedFeatureForm.qml

@@ -48,13 +48,12 @@ Popup {
   parent: mainWindow.contentItem
   closePolicy: form.state === "ReadOnly" ? Popup.CloseOnEscape : Popup.NoAutoClose // prevent accidental feature addition and editing
 
+  padding: 0
+  width: mainWindow.width - Theme.popupScreenEdgeMargin
+  height: mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4)
   x: Theme.popupScreenEdgeMargin / 2
-  y: Theme.popupScreenEdgeMargin
+  y: (mainWindow.height - height) / 2
   z: 1000 + embeddedLevel
-
-  padding: 0
-  width: parent.width - Theme.popupScreenEdgeMargin
-  height: parent.height - Theme.popupScreenEdgeMargin * 2
   modal: true
   focus: visible
 

src/qml/LayerLoginDialog.qml

@@ -27,6 +27,7 @@ Page {
   Flickable {
     id: flickable
     anchors.fill: parent
+    anchors.margins: 20
     Layout.fillWidth: true
     Layout.fillHeight: true
     contentHeight: content.height
@@ -37,94 +38,78 @@ Page {
     ColumnLayout {
       id: content
       width: parent.width
-      spacing: 2
-      anchors {
-        margins: 4
-        topMargin: 52 // Leave space for the toolbar
-      }
-
-      Item {
-        // spacer item
-        height: 24
-      }
+      spacing: 10
 
       Image {
         Layout.alignment: Qt.AlignHCenter
+        Layout.topMargin: 30
+        Layout.bottomMargin: 10
         source: Theme.getThemeVectorIcon('ic_password_48dp')
         sourceSize.width: Math.min(64, parent.width / 5)
         sourceSize.height: Math.min(64, parent.width / 5)
       }
 
-      Item {
-        // spacer item
-        height: 8
-      }
-
       Text {
         text: credentialTitle
-        horizontalAlignment: Text.AlignHCenter
         Layout.fillWidth: true
+        Layout.bottomMargin: 10
+        horizontalAlignment: Text.AlignHCenter
         wrapMode: Text.WordWrap
         font: Theme.defaultFont
         color: Theme.mainTextColor
         padding: 16
       }
 
-      Item {
-        // spacer item
-        height: 35
-      }
-
-      Text {
-        id: usernamelabel
+      TextField {
+        id: usernameField
         Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        text: qsTr("Username")
-        font: Theme.defaultFont
-        color: Theme.mainTextColor
-      }
-
-      QfTextField {
-        id: username
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.preferredWidth: Math.max(parent.width / 2, usernamelabel.width)
+        Layout.preferredWidth: parent.width - showPasswordButton.width * 2
         inputMethodHints: Qt.ImhNoPredictiveText | Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase
         horizontalAlignment: Text.AlignHCenter
+        placeholderText: qsTr("Username")
       }
 
-      Item {
-        // spacer item
-        height: 35
-      }
-
-      Text {
-        id: passwordlabel
+      TextField {
+        id: passwordField
         Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        text: qsTr("Password")
-        font: Theme.defaultFont
-        color: Theme.mainTextColor
-      }
-
-      QfTextField {
-        id: password
-        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.preferredWidth: Math.max(parent.width / 2, usernamelabel.width)
+        Layout.preferredWidth: parent.width - showPasswordButton.width * 2
+        Layout.bottomMargin: 10
         echoMode: TextInput.Password
         inputMethodHints: Qt.ImhHiddenText | Qt.ImhNoPredictiveText | Qt.ImhSensitiveData | Qt.ImhNoAutoUppercase | Qt.ImhPreferLowercase
         horizontalAlignment: Text.AlignHCenter
+        placeholderText: qsTr("Password")
 
         Keys.onReturnPressed: _processAuth()
         Keys.onEnterPressed: _processAuth()
-      }
 
-      Item {
-        // spacer item
-        height: 35
+        QfToolButton {
+          id: showPasswordButton
+
+          property var linkedField: passwordField
+          property int originalEchoMode: TextInput.Normal
+
+          visible: (!!linkedField.echoMode && linkedField.echoMode !== TextInput.Normal) || originalEchoMode !== TextInput.Normal
+          iconSource: linkedField.echoMode === TextInput.Normal ? Theme.getThemeVectorIcon('ic_hide_green_48dp') : Theme.getThemeVectorIcon('ic_show_green_48dp')
+          iconColor: Theme.mainColor
+          anchors.left: linkedField.right
+          anchors.verticalCenter: linkedField.verticalCenter
+          opacity: linkedField.text.length > 0 ? 1 : 0.25
+
+          onClicked: {
+            if (linkedField.echoMode !== TextInput.Normal) {
+              originalEchoMode = linkedField.echoMode;
+              linkedField.echoMode = TextInput.Normal;
+            } else {
+              linkedField.echoMode = originalEchoMode;
+            }
+          }
+        }
       }
 
       QfButton {
         id: submit
         Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
-        Layout.preferredWidth: Math.max(parent.width / 2, usernamelabel.width)
+        Layout.fillWidth: true
         text: "Submit"
         onClicked: _processAuth()
       }
@@ -139,13 +124,13 @@ Page {
 
   onVisibleChanged: {
     if (visible) {
-      username.forceActiveFocus();
+      usernameField.forceActiveFocus();
     }
   }
 
   function _processAuth() {
-    enter(username.text, password.text);
-    username.text = '';
-    password.text = '';
+    enter(usernameField.text, passwordField.text);
+    usernameField.text = '';
+    passwordField.text = '';
   }
 }

src/qml/LayerTreeItemProperties.qml

@@ -26,6 +26,7 @@ Popup {
 
   parent: mainWindow.contentItem
   width: Math.min(childrenRect.width, mainWindow.width - Theme.popupScreenEdgeMargin)
+  height: Math.min(popupLayout.childrenRect.height + headerLayout.childrenRect.height + 20, mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4))
   x: (mainWindow.width - width) / 2
   y: (mainWindow.height - height) / 2
   padding: 0
@@ -60,8 +61,10 @@ Popup {
   Page {
     id: popupContent
     width: parent.width
-    padding: 0
+    height: parent.height
+    padding: 10
     header: RowLayout {
+      id: headerLayout
       spacing: 2
       Label {
         id: titleLabel
@@ -95,13 +98,13 @@ Popup {
     }
 
     ScrollView {
-      padding: 10
+      padding: 0
       ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
       ScrollBar.vertical: QfScrollBar {
       }
       contentWidth: popupLayout.childrenRect.width
       contentHeight: popupLayout.childrenRect.height
-      height: Math.min(popupLayout.childrenRect.height + 20, mainWindow.height - mainWindow.sceneTopMargin - mainWindow.sceneBottomMargin)
+      height: parent.height
       clip: true
 
       ColumnLayout {

src/qml/PluginManagerSettings.qml

@@ -312,7 +312,7 @@ Popup {
         color: Theme.mainTextColor
       }
 
-      QfTextField {
+      TextField {
         id: installFromUrlInput
         width: installFromUrlLabel.width
       }

src/qml/PositioningDeviceSettings.qml

@@ -15,10 +15,11 @@ Popup {
   signal apply
 
   width: mainWindow.width - Theme.popupScreenEdgeMargin * 2
-  height: mainWindow.height - Theme.popupScreenEdgeMargin * 2
+  height: mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4)
   x: Theme.popupScreenEdgeMargin
-  y: Theme.popupScreenEdgeMargin
+  y: (mainWindow.height - height) / 2
   padding: 0
+  modal: true
   focus: visible
 
   property alias name: positioningDeviceName.text
@@ -108,26 +109,12 @@ Popup {
     }
 
     ColumnLayout {
-      spacing: 5
+      spacing: 10
       width: parent.width
 
       Label {
         Layout.fillWidth: true
-        text: qsTr("Name:")
-        font: Theme.defaultFont
-        wrapMode: Text.WordWrap
-      }
-
-      QfTextField {
-        id: positioningDeviceName
-        Layout.fillWidth: true
-        font: Theme.defaultFont
-        placeholderText: displayText === '' ? qsTr('Leave empty to auto-fill') : ''
-      }
-
-      Label {
-        Layout.fillWidth: true
-        text: qsTr("Connection type:")
+        text: qsTr("Connection type")
         font: Theme.defaultFont
         wrapMode: Text.WordWrap
       }
@@ -198,6 +185,20 @@ Popup {
         }
       }
 
+      TextField {
+        id: positioningDeviceName
+        Layout.fillWidth: true
+        font: Theme.defaultFont
+        placeholderText: qsTr("Name") + (displayText === '' ? qsTr(' (leave empty to auto-fill)') : '')
+      }
+
+      Label {
+        Layout.fillWidth: true
+        text: qsTr("Connection details")
+        font: Theme.defaultFont
+        wrapMode: Text.WordWrap
+      }
+
       ListModel {
         id: positioningDeviceTypeModel
         ListElement {

src/qml/QFieldAudioRecorder.qml

@@ -21,7 +21,7 @@ Popup {
   property int popupWidth: Math.min(400, mainWindow.width <= mainWindow.height ? mainWindow.width - Theme.popupScreenEdgeMargin : mainWindow.height - Theme.popupScreenEdgeMargin)
 
   width: popupWidth
-  height: Math.min(mainWindow.height - Theme.popupScreenEdgeMargin, popupWidth + toolBar.height + recordButton.height)
+  height: Math.min(mainWindow.height - Math.max(Theme.popupScreenEdgeMargin * 2, mainWindow.sceneTopMargin * 2 + 4, mainWindow.sceneBottomMargin * 2 + 4), popupWidth + toolBar.height + recordButton.height)
   x: (parent.width - width) / 2
   y: (parent.height - height) / 2
   z: 10000 // 1000s are embedded feature forms, use a higher value to insure feature form popups always show above embedded feature formes