feat(ui/modules/Common/Form/Placements): refactoring, responsive components

linphone-desktop/resources.qrc

@@ -194,13 +194,12 @@
     <file>ui/modules/Common/Form/+linux/SearchBox.qml</file>
     <file>ui/modules/Common/Form/ListForm.qml</file>
     <file>ui/modules/Common/Form/Placements/FormEmptyLine.qml</file>
-    <file>ui/modules/Common/Form/Placements/FormEntry.qml</file>
     <file>ui/modules/Common/Form/Placements/FormGroup.qml</file>
-    <file>ui/modules/Common/Form/Placements/FormHeaderEntry.qml</file>
-    <file>ui/modules/Common/Form/Placements/FormHeaderGroup.qml</file>
-    <file>ui/modules/Common/Form/Placements/FormHeader.qml</file>
     <file>ui/modules/Common/Form/Placements/FormLine.qml</file>
     <file>ui/modules/Common/Form/Placements/Form.qml</file>
+    <file>ui/modules/Common/Form/Placements/FormTableEntry.qml</file>
+    <file>ui/modules/Common/Form/Placements/FormTableLine.qml</file>
+    <file>ui/modules/Common/Form/Placements/FormTable.qml</file>
     <file>ui/modules/Common/Form/SearchBox.qml</file>
     <file>ui/modules/Common/Form/StaticListForm.qml</file>
     <file>ui/modules/Common/Form/Switch.qml</file>
@@ -241,10 +240,10 @@
     <file>ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/ListFormStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Placements/FormGroupStyle.qml</file>
-    <file>ui/modules/Common/Styles/Form/Placements/FormHeaderGroupStyle.qml</file>
-    <file>ui/modules/Common/Styles/Form/Placements/FormHeaderStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Placements/FormLineStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Placements/FormStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/Placements/FormTableLineStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/Placements/FormTableStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/SearchBoxStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/SwitchStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml</file>

linphone-desktop/ui/modules/Common/Form/Fields/HexField.qml

 import QtQuick 2.7
 
+import Common.Styles 1.0
+
 // =============================================================================
 
 Item {
@@ -23,7 +25,7 @@ Item {
   // ---------------------------------------------------------------------------
 
   implicitHeight: textField.height
-  implicitWidth: textField.width
+  width: TextFieldStyle.background.width
 
   // ---------------------------------------------------------------------------
 
@@ -40,6 +42,8 @@ Item {
       regExp: /[0-9A-Fa-f]*/
     }
 
+    width: parent.width
+
     onEditingFinished: {
       text = _computeText('0x' + text)
       wrapper.editingFinished(parseInt(text, 16))

linphone-desktop/ui/modules/Common/Form/Fields/PortField.qml

 import QtQuick 2.7
 
+import Common.Styles 1.0
 import Utils 1.0
 
 // =============================================================================
@@ -47,7 +48,7 @@ Item {
   // ---------------------------------------------------------------------------
 
   implicitHeight: textField.height
-  implicitWidth: textField.width
+  width: TextFieldStyle.background.width
 
   // ---------------------------------------------------------------------------
 
@@ -66,6 +67,8 @@ Item {
         : Utils.PORT_REGEX
     }
 
+    width: parent.width
+
     // Workaround to supports empty string.
     Keys.onReturnPressed: editingFinished()
     onActiveFocusChanged: !activeFocus && editingFinished()

linphone-desktop/ui/modules/Common/Form/Placements/Form.qml

@@ -12,10 +12,11 @@ Column {
 
   spacing: FormStyle.spacing
 
-  ColumnLayout {
-    width: parent.width
+  // ---------------------------------------------------------------------------
 
+  ColumnLayout {
     spacing: FormStyle.header.spacing
+    width: parent.width
 
     Text {
       id: title

linphone-desktop/ui/modules/Common/Form/Placements/FormEntry.qml

-import QtQuick 2.7
-import QtQuick.Layouts 1.3
-
-import Common.Styles 1.0
-
-// =============================================================================
-// Like a `FormGroup` but without label.
-// Must be used in a `FormLine`.
-// =============================================================================
-
-Item {
-  default property alias _content: content.data
-
-  // ---------------------------------------------------------------------------
-
-  implicitHeight: content.height
-  width: FormGroupStyle.content.width
-
-  Item {
-    id: content
-
-    readonly property int currentHeight: _content[0] ? _content[0].height : 0
-    readonly property int currentWidth: _content[0] ? _content[0].width : 0
-
-    anchors {
-      horizontalCenter: parent.horizontalCenter
-
-      top: width > FormGroupStyle.legend.width
-        ? parent.top
-        : undefined
-
-      verticalCenter: width > FormGroupStyle.legend.width
-        ? undefined
-        : parent.verticalCenter
-    }
-
-    height: currentHeight
-    width: currentWidth > FormGroupStyle.content.width
-      ? FormGroupStyle.content.width
-      : currentWidth
-  }
-}

linphone-desktop/ui/modules/Common/Form/Placements/FormGroup.qml

@@ -3,19 +3,19 @@ import QtQuick.Layouts 1.3
 
 import Common.Styles 1.0
 
-// =============================================================================
-// Display a form component with a legend.
-// Must be used in a `FormLine`.
 // =============================================================================
 
 RowLayout {
   property alias label: label.text
 
-  default property alias _content: content.data
+  default property var _content: null
 
   // ---------------------------------------------------------------------------
 
   spacing: FormGroupStyle.spacing
+  width: parent.maxItemWidth
+
+  // ---------------------------------------------------------------------------
 
   Text {
     id: label
@@ -31,17 +31,36 @@ RowLayout {
     verticalAlignment: Text.AlignVCenter
   }
 
-  Item {
-    id: content
+  // ---------------------------------------------------------------------------
 
-    readonly property int currentHeight: _content[0] ? _content[0].height : 0
+  Item {
+    readonly property int currentHeight: _content ? _content.height : 0
 
-    Layout.alignment: currentHeight < FormGroupStyle.legend.height
-      ? Qt.AlignVCenter
-      : Qt.AlignTop
+    Layout.alignment: (
+      currentHeight < FormGroupStyle.legend.height
+        ? Qt.AlignVCenter
+        : Qt.AlignTop
+    ) | Qt.AlignLeft
 
-    Layout.maximumWidth: FormGroupStyle.content.width
+    Layout.fillWidth: true
     Layout.preferredHeight: currentHeight
-    Layout.preferredWidth: FormGroupStyle.content.width
+
+    Loader {
+      active: !!_content
+      anchors.fill: parent
+
+      sourceComponent: Item {
+        id: content
+
+        data: [ _content ]
+        width: parent.width
+
+        Component.onCompleted: _content.width = Qt.binding(function () {
+          var contentWidth = content.width
+          var wishedWidth = FormGroupStyle.content.maxWidth
+          return contentWidth > wishedWidth ? wishedWidth : contentWidth
+        })
+      }
+    }
   }
 }

linphone-desktop/ui/modules/Common/Form/Placements/FormHeader.qml

-import Common.Styles 1.0
-
-// =============================================================================
-// Like a `FormLine` but used as form header.
-// =============================================================================
-
-FormLine {
-  height: FormHeaderStyle.height
-  width: parent.width
-}

linphone-desktop/ui/modules/Common/Form/Placements/FormHeaderEntry.qml

-import QtQuick 2.7
-
-import Common.Styles 1.0
-
-// =============================================================================
-// Display a title on a `FormEntry`.
-// Must be used in a `FormHeader`.
-// =============================================================================
-
-Item {
-  property alias text: text.text
-
-  height: parent.height
-  width: FormGroupStyle.content.width
-
-  Text {
-    id: text
-
-    anchors.centerIn: parent
-    color: FormHeaderGroupStyle.text.color
-    elide: Text.ElideRight
-
-    font {
-      bold: true
-      pointSize: FormHeaderGroupStyle.text.fontSize
-    }
-  }
-}

linphone-desktop/ui/modules/Common/Form/Placements/FormHeaderGroup.qml

-import QtQuick 2.7
-
-import Common.Styles 1.0
-
-// =============================================================================
-// Display a title on a `FormGroup`.
-// Must be used in a `FormHeader`.
-// =============================================================================
-
-Item {
-  property alias text: text.text
-
-  height: parent.height
-  width: FormGroupStyle.spacing + FormGroupStyle.legend.width + FormGroupStyle.content.width
-
-  Text {
-    id: text
-
-    anchors {
-      fill: parent
-      leftMargin: FormGroupStyle.spacing + FormGroupStyle.legend.width
-    }
-
-    color: FormHeaderGroupStyle.text.color
-    elide: Text.ElideRight
-    font {
-      bold: true
-      pointSize: FormHeaderGroupStyle.text.fontSize
-    }
-
-    horizontalAlignment: Text.AlignHCenter
-    verticalAlignment: Text.AlignVCenter
-  }
-}

linphone-desktop/ui/modules/Common/Form/Placements/FormLine.qml

 import QtQuick 2.7
+import QtQuick.Layouts 1.3
 
 import Common.Styles 1.0
 
-// =============================================================================
-// A line of `FormGroup`/`FormEntry`.
 // =============================================================================
 
 Row {
+  readonly property double maxItemWidth: {
+    var n = children.length
+    var curWidth = width / n - (n - 1) * spacing
+    var maxWidth = FormGroupStyle.legend.width + FormGroupStyle.content.maxWidth + FormGroupStyle.spacing
+
+    return curWidth < maxWidth ? curWidth : maxWidth
+  }
+
+  // ---------------------------------------------------------------------------
+
   spacing: FormLineStyle.spacing
   width: parent.width
 }

linphone-desktop/ui/modules/Common/Form/Placements/FormTable.qml

+import QtQuick 2.7
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+Column {
+  id: formTable
+
+  property alias titles: header.model
+  readonly property double maxItemWidth: {
+    var n = titles.length
+    var curWidth = (width - FormTableStyle.entry.width) / n - (n - 1) * FormTableLineStyle.spacing
+    var maxWidth = FormTableStyle.entry.maxWidth
+
+    return curWidth < maxWidth ? curWidth : maxWidth
+  }
+
+  // ---------------------------------------------------------------------------
+
+  spacing: FormTableStyle.spacing
+  width: parent.width
+
+  // ---------------------------------------------------------------------------
+
+  Row {
+    spacing: FormTableLineStyle.spacing
+    width: parent.width
+
+    // No title for the titles column.
+    Item {
+      height: FormTableStyle.entry.height
+      width: FormTableStyle.entry.width
+    }
+
+    Repeater {
+      id: header
+
+      Text {
+        id: text
+
+        color: FormTableStyle.entry.text.color
+        elide: Text.ElideRight
+        horizontalAlignment: Text.AlignHCenter
+        text: modelData
+        height: FormTableStyle.entry.height
+        width: formTable.maxItemWidth
+
+        font {
+          bold: true
+          pointSize: FormTableStyle.entry.text.fontSize
+        }
+      }
+    }
+  }
+}

linphone-desktop/ui/modules/Common/Form/Placements/FormTableEntry.qml

+import QtQuick 2.7
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+Item {
+  default property var _content
+  readonly property int currentHeight: _content ? _content.height : 0
+
+  // ---------------------------------------------------------------------------
+
+  height: currentHeight
+  width: parent.maxItemWidth
+
+  Loader {
+    active: !!_content
+    anchors.fill: parent
+
+    sourceComponent: Item {
+      id: item
+
+      data: [ _content ]
+
+      Component.onCompleted: _content.anchors.centerIn = item
+    }
+  }
+}

linphone-desktop/ui/modules/Common/Form/Placements/FormTableLine.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+Row {
+  property alias title: title.text
+  readonly property double maxItemWidth: parent.maxItemWidth
+
+  // ---------------------------------------------------------------------------
+
+  spacing: FormLineStyle.spacing
+  width: parent.width
+
+  // ---------------------------------------------------------------------------
+
+  Text {
+    id: title
+
+    color: FormTableStyle.entry.text.color
+    elide: Text.ElideRight
+
+    horizontalAlignment: Text.AlignRight
+    verticalAlignment: Text.AlignVCenter
+
+    height: FormTableStyle.entry.height
+    width: FormTableStyle.entry.width
+
+    font {
+      bold: false
+      pointSize: FormTableStyle.entry.text.fontSize
+    }
+  }
+}

linphone-desktop/ui/modules/Common/Form/Tab/TabContainer.qml

@@ -44,8 +44,6 @@ Rectangle {
           top: parent.top
           topMargin: TabContainerStyle.topMargin
         }
-
-        width: parent.width
       }
     }
 

linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml

@@ -11,7 +11,7 @@ QtObject {
     property int height: 36
     property int iconSize: 10
     property int radius: 4
-    property int width: 400
+    property int width: 200
 
     property QtObject border: QtObject {
       property color color: Colors.c

linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormGroupStyle.qml

@@ -9,8 +9,7 @@ QtObject {
   property int spacing: 20
 
   property QtObject content: QtObject {
-    property int height: 300
-    property int width: 200
+    property int maxWidth: 400
   }
 
   property QtObject legend: QtObject {

linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormLineStyle.qml

@@ -4,5 +4,5 @@ import QtQuick 2.7
 // =============================================================================
 
 QtObject {
-  property int spacing: 10
+  property int spacing: 20
 }

linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormHeaderStyle.qml → linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormTableLineStyle.qml

@@ -4,5 +4,5 @@ import QtQuick 2.7
 // =============================================================================
 
 QtObject {
-  property int height: 30
+  property int spacing: 20
 }

linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormHeaderGroupStyle.qml → linphone-desktop/ui/modules/Common/Styles/Form/Placements/FormTableStyle.qml

@@ -6,8 +6,16 @@ import Common 1.0
 // =============================================================================
 
 QtObject {
-  property QtObject text: QtObject {
-    property color color: Colors.j
-    property int fontSize: 10
+  property int spacing: 10
+
+  property QtObject entry: QtObject {
+    property int height: 36
+    property int width: 200
+    property int maxWidth: 400
+
+    property QtObject text: QtObject {
+      property color color: Colors.j
+      property int fontSize: 10
+    }
   }
 }

linphone-desktop/ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml

@@ -9,7 +9,7 @@ QtObject {
   property color color: Colors.k
   property int bottomMargin: 30
   property int leftMargin: 30
-  property int rightMargin: 30
+  property int rightMargin: 40
   property int topMargin: 30
 
   property QtObject separator: QtObject {

linphone-desktop/ui/modules/Common/Styles/qmldir

@@ -29,10 +29,10 @@ singleton TextAreaFieldStyle        1.0 Form/Fields/TextAreaFieldStyle.qml
 singleton TextFieldStyle            1.0 Form/Fields/TextFieldStyle.qml
 
 singleton FormGroupStyle            1.0 Form/Placements/FormGroupStyle.qml
-singleton FormHeaderStyle           1.0 Form/Placements/FormHeaderStyle.qml
-singleton FormHeaderGroupStyle      1.0 Form/Placements/FormHeaderGroupStyle.qml
 singleton FormLineStyle             1.0 Form/Placements/FormLineStyle.qml
 singleton FormStyle                 1.0 Form/Placements/FormStyle.qml
+singleton FormTableLineStyle        1.0 Form/Placements/FormTableLineStyle.qml
+singleton FormTableStyle            1.0 Form/Placements/FormTableStyle.qml
 
 singleton TabButtonStyle            1.0 Form/Tab/TabButtonStyle.qml
 singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml

linphone-desktop/ui/modules/Common/qmldir

@@ -41,12 +41,11 @@ TextField            1.0 Form/Fields/TextField.qml
 
 Form                 1.0 Form/Placements/Form.qml
 FormEmptyLine        1.0 Form/Placements/FormEmptyLine.qml
-FormEntry            1.0 Form/Placements/FormEntry.qml
 FormGroup            1.0 Form/Placements/FormGroup.qml
-FormHeader           1.0 Form/Placements/FormHeader.qml
-FormHeaderEntry      1.0 Form/Placements/FormHeaderEntry.qml
-FormHeaderGroup      1.0 Form/Placements/FormHeaderGroup.qml
 FormLine             1.0 Form/Placements/FormLine.qml
+FormTable            1.0 Form/Placements/FormTable.qml
+FormTableEntry       1.0 Form/Placements/FormTableEntry.qml
+FormTableLine        1.0 Form/Placements/FormTableLine.qml
 
 TabBar               1.0 Form/Tab/TabBar.qml
 TabButton            1.0 Form/Tab/TabButton.qml

linphone-desktop/ui/views/App/Settings/SettingsNetwork.qml

@@ -104,128 +104,123 @@ TabContainer {
       title: qsTr('networkProtocolAndPortsTitle')
       width: parent.width
 
-      FormHeader {
-        FormHeaderGroup {
-          text: qsTr('portHeader')
-        }
-
-        FormHeaderEntry {
-          text: qsTr('randomPortHeader')
-        }
-
-        FormHeaderEntry {
-          text: qsTr('enabledPortHeader')
-        }
-      }
-
-      FormLine {
-        FormGroup {
-          label: qsTr('sipUdpPortLabel')
-
-          NumericField {
-            minValue: 0
-            maxValue: 65535
-            readOnly: randomSipUdpPort.checked || !enableSipUdpPort.checked
+      FormTable {
+        titles: [
+          qsTr('portHeader'),
+          qsTr('randomPortHeader'),
+          qsTr('enabledPortHeader')
+        ]
+
+        FormTableLine {
+          title: qsTr('sipUdpPortLabel')
+
+          FormTableEntry {
+            NumericField {
+              minValue: 0
+              maxValue: 65535
+              readOnly: randomSipUdpPort.checked || !enableSipUdpPort.checked
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: randomSipUdpPort
+          FormTableEntry {
+            Switch {
+              id: randomSipUdpPort
 
-            enabled: enableSipUdpPort.checked
+              enabled: enableSipUdpPort.checked
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: enableSipUdpPort
+          FormTableEntry {
+            Switch {
+              id: enableSipUdpPort
+            }
           }
         }
-      }
 
-      FormLine {
-        FormGroup {
-          label: qsTr('sipTcpPortLabel')
+        FormTableLine {
+          title: qsTr('sipTcpPortLabel')
 
-          NumericField {
-            minValue: 0
-            maxValue: 65535
-            readOnly: randomSipTcpPort.checked || !enableSipTcpPort.checked
+          FormTableEntry {
+            NumericField {
+
+              minValue: 0
+              maxValue: 65535
+              readOnly: randomSipTcpPort.checked || !enableSipTcpPort.checked
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: randomSipTcpPort
+          FormTableEntry {
+            Switch {
+              id: randomSipTcpPort
 
-            enabled: enableSipTcpPort.checked
+              enabled: enableSipTcpPort.checked
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: enableSipTcpPort
+          FormTableEntry {
+            Switch {
+              id: enableSipTcpPort
+            }
           }
         }
-      }
 
-      FormLine {
-        id: audioRtpUdpPort
+        FormTableLine {
+          id: audioRtpUdpPort
 
-        readonly property int defaultPort: 7078
+          readonly property int defaultPort: 7078
 
-        FormGroup {
-          label: qsTr('audioRtpUdpPortLabel')
+          title: qsTr('audioRtpUdpPortLabel')
 
-          PortField {
-            readOnly: randomAudioRtpUdpPort.checked
-            supportsRange: true
-            text: SettingsModel.audioPortRange.join(':')
+          FormTableEntry {
+            PortField {
+              readOnly: randomAudioRtpUdpPort.checked
+              supportsRange: true
+              text: SettingsModel.audioPortRange.join(':')
 
-            onEditingFinished: SettingsModel.audioPortRange = [ portA, portB ]
+              onEditingFinished: SettingsModel.audioPortRange = [ portA, portB ]
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: randomAudioRtpUdpPort
+          FormTableEntry {
+            Switch {
+              id: randomAudioRtpUdpPort
 
-            checked: SettingsModel.audioPortRange[0] === -1
+              checked: SettingsModel.audioPortRange[0] === -1
 
-            onClicked: SettingsModel.audioPortRange = checked
-              ? [ audioRtpUdpPort.defaultPort, -1 ]
-              : [ -1, -1 ]
+              onClicked: SettingsModel.audioPortRange = checked
+                ? [ audioRtpUdpPort.defaultPort, -1 ]
+                : [ -1, -1 ]
+            }
           }
         }
-      }
 
-      FormLine {
-        id: videoRtpUdpPort
+        FormTableLine {
+          id: videoRtpUdpPort
 
-        readonly property int defaultPort: 9078
+          readonly property int defaultPort: 9078
 
-        FormGroup {
-          label: qsTr('videoRtpUdpPortLabel')
+          title: qsTr('videoRtpUdpPortLabel')
 
-          PortField {
-            readOnly: randomVideoRtpUdpPort.checked
-            supportsRange: true
-            text: SettingsModel.videoPortRange.join(':')
+          FormTableEntry {
+            PortField {
+              readOnly: randomVideoRtpUdpPort.checked
+              supportsRange: true
+              text: SettingsModel.videoPortRange.join(':')
 
-            onEditingFinished: SettingsModel.videoPortRange = [ portA, portB ]
+              onEditingFinished: SettingsModel.videoPortRange = [ portA, portB ]
+            }
           }
-        }
 
-        FormEntry {
-          Switch {
-            id: randomVideoRtpUdpPort
+          FormTableEntry {
+            Switch {
+              id: randomVideoRtpUdpPort
 
-            checked: SettingsModel.videoPortRange[0] === -1
+              checked: SettingsModel.videoPortRange[0] === -1
 
-            onClicked: SettingsModel.videoPortRange = checked
-              ? [ videoRtpUdpPort.defaultPort, -1 ]
-              : [ -1, -1 ]
+              onClicked: SettingsModel.videoPortRange = checked
+                ? [ videoRtpUdpPort.defaultPort, -1 ]
+                : [ -1, -1 ]
+            }
           }
         }
       }
@@ -304,9 +299,7 @@ TabContainer {
       }
 
       FormLine {
-        FormGroup {
-          label: ''
-        }
+        FormGroup {}
 
         FormGroup {
           label: qsTr('turnPasswordLabel')
@@ -338,6 +331,8 @@ TabContainer {
             onEditingFinished: SettingsModel.dscpSip = value
           }
         }
+
+        FormGroup {}
       }
 
       FormLine {