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

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

@@ -3,9 +3,9 @@ import QtQuick 2.7
 // =============================================================================
 
 Item {
+  property alias updating: actionButton.updating
   property alias useStates: actionButton.useStates
   property bool enabled: true
-  property alias updating: actionButton.updating
   property int iconSize // Optionnal.
   property string icon
 

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

@@ -8,19 +8,31 @@ import Common.Styles 1.0
 Switch {
   id: control
 
+  // ---------------------------------------------------------------------------
+
+  property bool enabled: true
+
+  // ---------------------------------------------------------------------------
+
   checked: false
 
   indicator: Rectangle {
     implicitHeight: SwitchStyle.indicator.height
     implicitWidth: SwitchStyle.indicator.width
 
-    border.color: control.checked
+    border.color: control.enabled
-      ? SwitchStyle.indicator.border.color.checked
+      ? (
-      : SwitchStyle.indicator.border.color.normal
+        control.checked
+          ? SwitchStyle.indicator.border.color.checked
+          : SwitchStyle.indicator.border.color.normal
+      ) : SwitchStyle.indicator.border.color.disabled
 
-    color: control.checked
+    color: control.enabled
-      ? SwitchStyle.indicator.color.checked
+      ? (
-      : SwitchStyle.indicator.color.normal
+        control.checked
+          ? SwitchStyle.indicator.color.checked
+          : SwitchStyle.indicator.color.normal
+      ) : SwitchStyle.indicator.color.disabled
 
     radius: SwitchStyle.indicator.radius
     x: control.leftPadding
@@ -33,18 +45,29 @@ Switch {
       width: SwitchStyle.sphere.size
 
       anchors.verticalCenter: parent.verticalCenter
-      border.color: control.checked
-        ? (control.down
-          ? SwitchStyle.sphere.border.color.pressed
-          : SwitchStyle.sphere.border.color.checked
-        ) : SwitchStyle.sphere.border.color.normal
 
-      color: control.down
+      border.color: control.enabled
-        ? SwitchStyle.sphere.color.pressed
+        ?
-        : SwitchStyle.sphere.color.normal
+          (
+          control.checked
+            ? (
+              control.down
+                ? SwitchStyle.sphere.border.color.pressed
+                : SwitchStyle.sphere.border.color.checked
+            ) : SwitchStyle.sphere.border.color.normal
+        ) : SwitchStyle.sphere.border.color.disabled
+
+      color: control.enabled
+        ?
+          (
+          control.down
+            ? SwitchStyle.sphere.color.pressed
+            : SwitchStyle.sphere.color.normal
+        ) : SwitchStyle.sphere.color.disabled
 
       radius: width / 2
-      x: control.checked ? parent.width - width : 0
+
+      // -----------------------------------------------------------------------
 
       states: State {
         when: control.checked
@@ -65,4 +88,12 @@ Switch {
       }
     }
   }
+
+  // ---------------------------------------------------------------------------
+
+  MouseArea {
+    anchors.fill: parent
+
+    onClicked: control.enabled && control.toggle()
+  }
 }

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

@@ -17,12 +17,14 @@ QtObject {
     property QtObject border: QtObject {
       property QtObject color: QtObject {
         property color checked: Colors.i
+        property color disabled: Colors.c
         property color normal: Colors.c
       }
     }
 
     property QtObject color: QtObject {
       property color checked: Colors.i
+      property color disabled: Colors.e
       property color normal: Colors.k
     }
   }
@@ -33,12 +35,14 @@ QtObject {
     property QtObject border: QtObject {
       property QtObject color: QtObject {
         property color checked: Colors.i
+        property color disabled: Colors.c
         property color normal: Colors.w
         property color pressed: Colors.w
       }
     }
 
     property QtObject color: QtObject {
+      property color disabled: Colors.e
       property color pressed: Colors.c
       property color normal: Colors.k
     }

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

@@ -63,7 +63,7 @@ TabContainer {
           label: qsTr('sipUdpPortLabel')
 
           NumericField {
-            readOnly: randomSipUdpPort.checked
+            readOnly: randomSipUdpPort.checked || !enableSipUdpPort.checked
           }
         }
 
@@ -72,8 +72,14 @@ TabContainer {
 
           Switch {
             id: randomSipUdpPort
+
+            enabled: enableSipUdpPort.checked
           }
         }
+
+        Switch {
+          id: enableSipUdpPort
+        }
       }
 
       FormLine {
@@ -81,7 +87,7 @@ TabContainer {
           label: qsTr('sipTcpPortLabel')
 
           NumericField {
-            readOnly: randomSipTcpPort.checked
+            readOnly: randomSipTcpPort.checked || !enableSipTcpPort.checked
           }
         }
 
@@ -90,8 +96,14 @@ TabContainer {
 
           Switch {
             id: randomSipTcpPort
+
+            enabled: enableSipTcpPort.checked
           }
         }
+
+        Switch {
+          id: enableSipTcpPort
+        }
       }
 
       FormLine {
@@ -99,7 +111,7 @@ TabContainer {
           label: qsTr('audioRtpUdpPortLabel')
 
           NumericField {
-            readOnly: randomAudioRtpUdpPort.checked
+            readOnly: randomAudioRtpUdpPort.checked || !enableAudioRtpUdpPort.checked
           }
         }
 
@@ -108,8 +120,14 @@ TabContainer {
 
           Switch {
             id: randomAudioRtpUdpPort
+
+            enabled: enableAudioRtpUdpPort.checked
           }
         }
+
+        Switch {
+          id: enableAudioRtpUdpPort
+        }
       }
 
       FormLine {
@@ -126,6 +144,8 @@ TabContainer {
 
           Switch {
             id: randomVideoRtpUdpPort
+
+            enabled: enableVideoRtpUdpPort.checked
           }
         }