feat(app): add `Switch` component

linphone-desktop/assets/languages/en.ts

@@ -548,6 +548,10 @@ Server url not configured.</translation>
         <source>noEncryption</source>
         <translation>None</translation>
     </message>
+    <message>
+        <source>autoAnswerLabel</source>
+        <translation>Auto answer</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/assets/languages/fr.ts

@@ -558,6 +558,10 @@ Url du serveur non configurée.</translation>
         <source>noEncryption</source>
         <translation>Aucune</translation>
     </message>
+    <message>
+        <source>autoAnswerLabel</source>
+        <translation>Répondre automatiquement</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/resources.qrc

@@ -184,6 +184,7 @@
     <file>ui/modules/Common/Form/ListForm.qml</file>
     <file>ui/modules/Common/Form/SmallButton.qml</file>
     <file>ui/modules/Common/Form/StaticListForm.qml</file>
+    <file>ui/modules/Common/Form/Switch.qml</file>
     <file>ui/modules/Common/Form/Tab/TabBar.qml</file>
     <file>ui/modules/Common/Form/Tab/TabButton.qml</file>
     <file>ui/modules/Common/Form/Tab/TabContainer.qml</file>
@@ -221,6 +222,7 @@
     <file>ui/modules/Common/Styles/Form/FormStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/ListFormStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/SmallButtonStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/SwitchStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TextButtonAStyle.qml</file>

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

@@ -21,6 +21,7 @@ RowLayout {
     Layout.preferredWidth: FormGroupStyle.legend.width
 
     color: FormGroupStyle.legend.color
+    elide: Text.ElideRight
     font.pointSize: FormGroupStyle.legend.fontSize
 
     horizontalAlignment: Text.AlignRight

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

+import QtQuick 2.7
+import QtQuick.Controls 2.1
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+Switch {
+  id: control
+
+  checked: false
+
+  indicator: Rectangle {
+    implicitHeight: SwitchStyle.indicator.height
+    implicitWidth: SwitchStyle.indicator.width
+
+    border.color: control.checked
+      ? SwitchStyle.indicator.border.color.checked
+      : SwitchStyle.indicator.border.color.normal
+
+    color: control.checked
+      ? SwitchStyle.indicator.color.checked
+      : SwitchStyle.indicator.color.normal
+
+    radius: SwitchStyle.indicator.radius
+    x: control.leftPadding
+    y: parent.height / 2 - height / 2
+
+    Rectangle {
+      id: sphere
+
+      height: SwitchStyle.sphere.size
+      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
+        ? SwitchStyle.sphere.color.pressed
+        : SwitchStyle.sphere.color.normal
+
+      radius: width / 2
+      x: control.checked ? parent.width - width : 0
+
+      states: State {
+        when: control.checked
+
+        PropertyChanges {
+          target: sphere
+          x: parent.width - width
+        }
+      }
+
+      transitions: Transition {
+        NumberAnimation {
+          properties: 'x'
+
+          duration: SwitchStyle.animation.duration
+          easing.type: Easing.InOutQuad
+        }
+      }
+    }
+  }
+}

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

@@ -55,7 +55,7 @@ Controls.TabButton {
   }
 
   contentItem: RowLayout {
-    spacing: 8
+    spacing: TabButtonStyle.spacing
 
     Icon {
       id: icon

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

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject animation: QtObject {
+    property int duration: 200
+  }
+
+  property QtObject indicator: QtObject {
+    property int height: 18
+    property int radius: 10
+    property int width: 48
+    property QtObject border: QtObject {
+      property QtObject color: QtObject {
+        property color checked: Colors.i
+        property color normal: Colors.c
+      }
+    }
+
+    property QtObject color: QtObject {
+      property color checked: Colors.i
+      property color normal: Colors.k
+    }
+  }
+
+  property QtObject sphere: QtObject {
+    property int size: 22
+
+    property QtObject border: QtObject {
+      property QtObject color: QtObject {
+        property color checked: Colors.i
+        property color normal: Colors.w
+        property color pressed: Colors.w
+      }
+    }
+
+    property QtObject color: QtObject {
+      property color pressed: Colors.c
+      property color normal: Colors.k
+    }
+  }
+}

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

@@ -6,6 +6,8 @@ import Common 1.0
 // =============================================================================
 
 QtObject {
+  property int spacing: 8
+
   property QtObject backgroundColor: QtObject {
     property color hovered: Colors.s
     property color normal: Colors.i

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

@@ -27,6 +27,7 @@ singleton FormStyle                 1.0 Form/FormStyle.qml
 singleton FormGroupStyle            1.0 Form/FormGroupStyle.qml
 singleton ListFormStyle             1.0 Form/ListFormStyle.qml
 singleton SmallButtonStyle          1.0 Form/SmallButtonStyle.qml
+singleton SwitchStyle               1.0 Form/SwitchStyle.qml
 singleton TextButtonAStyle          1.0 Form/TextButtonAStyle.qml
 singleton TextButtonBStyle          1.0 Form/TextButtonBStyle.qml
 singleton TextFieldStyle            1.0 Form/TextFieldStyle.qml

linphone-desktop/ui/modules/Common/qmldir

@@ -45,6 +45,7 @@ FormGroup            1.0 Form/FormGroup.qml
 LightButton          1.0 Form/LightButton.qml
 ListForm             1.0 Form/ListForm.qml
 StaticListForm       1.0 Form/StaticListForm.qml
+Switch               1.0 Form/Switch.qml
 TextButtonA          1.0 Form/TextButtonA.qml
 TextButtonB          1.0 Form/TextButtonB.qml
 TextField            1.0 Form/TextField.qml

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

@@ -25,6 +25,12 @@ TabContainer {
           ]
         }
       }
+
+      FormGroup {
+        label: qsTr('autoAnswerLabel')
+
+        Switch {}
+      }
     }
 
     Form {
@@ -42,9 +48,9 @@ TabContainer {
 
         ExclusiveButtons {
           texts: [
-          qsTr('limeDisabled'),
-          qsTr('limeRequired'),
-          qsTr('limePreferred')
+            qsTr('limeDisabled'),
+            qsTr('limeRequired'),
+            qsTr('limePreferred')
           ]
         }
       }

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

@@ -15,8 +15,8 @@ ApplicationWindow {
   height: SettingsWindowStyle.height
   width: SettingsWindowStyle.width
 
-  //maximumHeight: height
-  //maximumWidth: width
+  maximumHeight: height
+  maximumWidth: width
 
   minimumHeight: height
   minimumWidth: width

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

@@ -4,8 +4,8 @@ import QtQuick 2.7
 // =============================================================================
 
 QtObject {
-  property int height: 480
-  property int width: 800
+  property int height: 640
+  property int width: 1024
 
   property QtObject validButton: QtObject {
     property int bottomMargin: 30