feat(ui/views/App/Settings/SettingsNetwork): view in progress

linphone-desktop/assets/languages/en.ts

@@ -639,6 +639,22 @@ Server url not configured.</translation>
         <source>videoRtpUdpPortLabel</source>
         <translation>Video RTP UDP port</translation>
     </message>
+    <message>
+        <source>portsHeader</source>
+        <translation type="vanished">Port</translation>
+    </message>
+    <message>
+        <source>portHeader</source>
+        <translation>Port</translation>
+    </message>
+    <message>
+        <source>randomPortHeader</source>
+        <translation>Use a random port</translation>
+    </message>
+    <message>
+        <source>enabledPortHeader</source>
+        <translation>Enabled port</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/assets/languages/fr.ts

@@ -649,6 +649,22 @@ Url du serveur non configurée.</translation>
         <source>videoRtpUdpPortLabel</source>
         <translation>Port Vidéo RTP UDP</translation>
     </message>
+    <message>
+        <source>portsHeader</source>
+        <translation type="vanished">Port</translation>
+    </message>
+    <message>
+        <source>portHeader</source>
+        <translation>Port</translation>
+    </message>
+    <message>
+        <source>randomPortHeader</source>
+        <translation>Utiliser un port aléatoire</translation>
+    </message>
+    <message>
+        <source>enabledPortHeader</source>
+        <translation>Port activé</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/resources.qrc

@@ -184,6 +184,9 @@
     <file>ui/modules/Common/Form/ListForm.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/SmallButton.qml</file>
@@ -224,6 +227,8 @@
     <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/SmallButtonStyle.qml</file>

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

@@ -5,26 +5,38 @@ import Common.Styles 1.0
 
 // =============================================================================
 // Like a `FormGroup` but without label.
+// Must be used in a `FormLine`.
 // =============================================================================
 
-RowLayout {
+Item {
   default property alias _content: content.data
 
   // ---------------------------------------------------------------------------
 
-	spacing: 0
-	width: FormGroupStyle.content.width
+  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
 
-    Layout.alignment: (
-			currentHeight < FormGroupStyle.legend.height ? Qt.AlignVCenter : Qt.AlignTop
-		) | Qt.AlignHCenter
+    anchors {
+      horizontalCenter: parent.horizontalCenter
 
-    Layout.preferredHeight: currentHeight
-		Layout.maximumWidth: FormGroupStyle.content.width
+      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,6 +3,9 @@ import QtQuick.Layouts 1.3
 
 import Common.Styles 1.0
 
+// =============================================================================
+// Display a form component with a legend.
+// Must be used in a `FormLine`.
 // =============================================================================
 
 RowLayout {

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

@@ -2,8 +2,11 @@ import QtQuick 2.7
 
 import Common.Styles 1.0
 
+// =============================================================================
+// A line of `FormGroup`/`FormEntry`.
 // =============================================================================
 
 Row {
   spacing: FormLineStyle.spacing
+  width: parent.width
 }

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

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject text: QtObject {
+    property color color: Colors.j
+    property int fontSize: 10
+  }
+}

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

+pragma Singleton
+import QtQuick 2.7
+
+// =============================================================================
+
+QtObject {
+  property int height: 30
+}

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

@@ -18,6 +18,8 @@ singleton NumericFieldStyle         1.0 Form/Fields/NumericFieldStyle.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
 

linphone-desktop/ui/modules/Common/qmldir

@@ -37,6 +37,9 @@ TextField            1.0 Form/Fields/TextField.qml
 Form                 1.0 Form/Placements/Form.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
 
 TabBar               1.0 Form/Tab/TabBar.qml

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

@@ -15,16 +15,18 @@ TabContainer {
       title: qsTr('callsTitle')
       width: parent.width
 
-      FormGroup {
-        label: qsTr('encryptionLabel')
-
-        ExclusiveButtons {
-          texts: [
-            qsTr('noEncryption'),
-            'SRTP',
-            'ZRTP',
-            'DTLS'
-          ]
+      FormLine {
+        FormGroup {
+          label: qsTr('encryptionLabel')
+
+          ExclusiveButtons {
+            texts: [
+              qsTr('noEncryption'),
+              'SRTP',
+              'ZRTP',
+              'DTLS'
+            ]
+          }
         }
       }
 
@@ -51,21 +53,25 @@ TabContainer {
       title: qsTr('chatTitle')
       width: parent.width
 
-      FormGroup {
-        label: qsTr('fileServerLabel')
+      FormLine {
+        FormGroup {
+          label: qsTr('fileServerLabel')
 
-        TextField {}
+          TextField {}
+        }
       }
 
-      FormGroup {
-        label: qsTr('encryptWithLimeLabel')
-
-        ExclusiveButtons {
-          texts: [
-            qsTr('limeDisabled'),
-            qsTr('limeRequired'),
-            qsTr('limePreferred')
-          ]
+      FormLine {
+        FormGroup {
+          label: qsTr('encryptWithLimeLabel')
+
+          ExclusiveButtons {
+            texts: [
+              qsTr('limeDisabled'),
+              qsTr('limeRequired'),
+              qsTr('limePreferred')
+            ]
+          }
         }
       }
     }

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

@@ -58,6 +58,20 @@ 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')