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

linphone-desktop/assets/languages/en.ts

@@ -607,6 +607,38 @@ Server url not configured.</translation>
         <source>networkProtocolAndPortsTitle</source>
         <translation>Network protocol and Ports</translation>
     </message>
+    <message>
+        <source>sipUdpPortLabel</source>
+        <translation>SIP UDP port</translation>
+    </message>
+    <message>
+        <source>randomSipUdpPortLabel</source>
+        <translation>Random</translation>
+    </message>
+    <message>
+        <source>sipTcpPortLabel</source>
+        <translation>SIP TCP port</translation>
+    </message>
+    <message>
+        <source>randomSipTcpPortLabel</source>
+        <translation>Random</translation>
+    </message>
+    <message>
+        <source>audioRtpUdpPortLabel</source>
+        <translation>Audio RTP UDP port</translation>
+    </message>
+    <message>
+        <source>randomAudioRtpUdpPortLabel</source>
+        <translation>Random</translation>
+    </message>
+    <message>
+        <source>randomVideoRtpUdpPortLabel</source>
+        <translation>Random</translation>
+    </message>
+    <message>
+        <source>videoRtpUdpPortLabel</source>
+        <translation>Video RTP UDP port</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/assets/languages/fr.ts

@@ -556,7 +556,7 @@ Url du serveur non configurée.</translation>
     </message>
     <message>
         <source>noEncryption</source>
-        <translation>Aucune</translation>
+        <translation>Aucun</translation>
     </message>
     <message>
         <source>autoAnswerLabel</source>
@@ -617,6 +617,38 @@ Url du serveur non configurée.</translation>
         <source>networkProtocolAndPortsTitle</source>
         <translation>Protocol réseau et ports</translation>
     </message>
+    <message>
+        <source>sipUdpPortLabel</source>
+        <translation>Port SIP UDP</translation>
+    </message>
+    <message>
+        <source>randomSipUdpPortLabel</source>
+        <translation>Aléatoire</translation>
+    </message>
+    <message>
+        <source>sipTcpPortLabel</source>
+        <translation>Port SIP TCP</translation>
+    </message>
+    <message>
+        <source>randomSipTcpPortLabel</source>
+        <translation>Aléatoire</translation>
+    </message>
+    <message>
+        <source>audioRtpUdpPortLabel</source>
+        <translation>Port Audio RTP UDP</translation>
+    </message>
+    <message>
+        <source>randomAudioRtpUdpPortLabel</source>
+        <translation>Aléatoire</translation>
+    </message>
+    <message>
+        <source>randomVideoRtpUdpPortLabel</source>
+        <translation>Aléatoire</translation>
+    </message>
+    <message>
+        <source>videoRtpUdpPortLabel</source>
+        <translation>Port Vidéo RTP UDP</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/ui/modules/Common/ForceScrollBar.qml

@@ -26,4 +26,6 @@ ScrollBar {
     radius: ForceScrollBarStyle.contentItem.radius
   }
   hoverEnabled: true
+
+  visible: size < 1.0
 }

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

 import QtQuick 2.7
+import QtQuick.Layouts 1.3
+import QtQuick.Controls 2.1
 
+import Common 1.0
 import Common.Styles 1.0
+import Utils 1.0
 
 // =============================================================================
 
@@ -10,16 +14,47 @@ Rectangle {
   anchors.fill: parent
   color: TabContainerStyle.color
 
+  ColumnLayout {
+    anchors.fill: parent
+    spacing: 0
+
+    Flickable {
+      ScrollBar.vertical: ForceScrollBar {
+        id: scrollBar
+      }
+
+      Layout.fillHeight: true
+      Layout.fillWidth: true
+
+      boundsBehavior: Flickable.StopAtBounds
+      clip: true
+
+      contentHeight: Utils.ensureArray(_content).reduce(function (acc, item) { return item.height }, 0, []) +
+        TabContainerStyle.topMargin + TabContainerStyle.bottomMargin
+      contentWidth: width
+
       Item {
         id: content
 
         anchors {
-      fill: parent
-
-      bottomMargin: TabContainerStyle.bottomMargin
+          left: parent.left
           leftMargin: TabContainerStyle.leftMargin
+          right: parent.right
           rightMargin: TabContainerStyle.rightMargin
+          top: parent.top
           topMargin: TabContainerStyle.topMargin
         }
+
+        width: parent.width
+      }
+    }
+
+    Rectangle {
+      Layout.fillWidth: true
+      Layout.preferredHeight: TabContainerStyle.separator.height
+
+      color: TabContainerStyle.separator.color
+      visible: scrollBar.visible
+    }
   }
 }

linphone-desktop/ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml

@@ -8,7 +8,7 @@ import Common 1.0
 QtObject {
   property QtObject background: QtObject {
     property int height: 36
-    property int width: 300
+    property int width: 200
 
     property int radius: 4
 

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

@@ -7,8 +7,13 @@ import Common 1.0
 
 QtObject {
   property color color: Colors.k
-  property int bottomMargin: 15
+  property int bottomMargin: 30
   property int leftMargin: 30
   property int rightMargin: 30
   property int topMargin: 30
+
+  property QtObject separator: QtObject {
+    property int height: 2
+    property color color: Colors.u
+  }
 }

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

@@ -8,8 +8,8 @@ import App.Styles 1.0
 
 TabContainer {
   Column {
-    anchors.fill: parent
     spacing: SettingsWindowStyle.forms.spacing
+    width: parent.width
 
     // -------------------------------------------------------------------------
     // Transport.
@@ -59,7 +59,79 @@ TabContainer {
       width: parent.width
 
       FormLine {
+        FormGroup {
+          label: qsTr('sipUdpPortLabel')
+
+          NumericField {
+            readOnly: randomSipUdpPort.checked
+          }
+        }
+
+        FormGroup {
+          label: qsTr('randomSipUdpPortLabel')
+
+          Switch {
+            id: randomSipUdpPort
+          }
+        }
+      }
+
+      FormLine {
+        FormGroup {
+          label: qsTr('sipTcpPortLabel')
+
+          NumericField {
+            readOnly: randomSipTcpPort.checked
+          }
+        }
+
+        FormGroup {
+          label: qsTr('randomSipTcpPortLabel')
+
+          Switch {
+            id: randomSipTcpPort
+          }
+        }
+      }
+
+      FormLine {
+        FormGroup {
+          label: qsTr('audioRtpUdpPortLabel')
+
+          NumericField {
+            readOnly: randomAudioRtpUdpPort.checked
+          }
+        }
+
+        FormGroup {
+          label: qsTr('randomAudioRtpUdpPortLabel')
+
+          Switch {
+            id: randomAudioRtpUdpPort
+          }
+        }
+      }
+
+      FormLine {
+        FormGroup {
+          label: qsTr('videoRtpUdpPortLabel')
+
+          NumericField {
+            readOnly: randomVideoRtpUdpPort.checked || !enableVideoRtpUdpPort.checked
+          }
+        }
+
+        FormGroup {
+          label: qsTr('randomVideoRtpUdpPortLabel')
 
+          Switch {
+            id: randomVideoRtpUdpPort
+          }
+        }
+
+        Switch {
+          id: enableVideoRtpUdpPort
+        }
       }
     }
 

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

@@ -15,11 +15,8 @@ ApplicationWindow {
   height: SettingsWindowStyle.height
   width: SettingsWindowStyle.width
 
-  maximumHeight: height
-  maximumWidth: width
-
-  minimumHeight: height
-  minimumWidth: width
+  minimumHeight: SettingsWindowStyle.height
+  minimumWidth: SettingsWindowStyle.width
 
   title: qsTr('settingsTitle')
   visible: true
@@ -108,6 +105,7 @@ ApplicationWindow {
 
     TextButtonB {
       Layout.alignment: Qt.AlignRight
+      Layout.topMargin: SettingsWindowStyle.validButton.topMargin
       Layout.bottomMargin: SettingsWindowStyle.validButton.bottomMargin
       Layout.rightMargin: SettingsWindowStyle.validButton.rightMargin
 

linphone-desktop/ui/views/App/Styles/Settings/SettingsWindowStyle.qml

@@ -14,5 +14,6 @@ QtObject {
   property QtObject validButton: QtObject {
     property int bottomMargin: 30
     property int rightMargin: 30
+    property int topMargin: 30
   }
 }