feat(ui/views/App/Settings/SettingsUi): view in progress, add a `ComboBox` component

linphone-desktop/assets/images/drop_down.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
+    <title>drop_down_list</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="drop_down_list" stroke="#6B7A86" stroke-width="2">
+            <path d="M3.5,8.5 L8.5,3.5 M3.50419639,-1.5 L8.5,3.5" id="status_username_disconnected" transform="translate(6.000000, 3.500000) rotate(-270.000000) translate(-6.000000, -3.500000) "></path>
+        </g>
+    </g>
+</svg>

linphone-desktop/assets/languages/en.ts

@@ -851,6 +851,14 @@ Server url not configured.</translation>
         <source>savedVideosLabel</source>
         <translation>Saved videos folder</translation>
     </message>
+    <message>
+        <source>languagesTitle</source>
+        <translation>Languages</translation>
+    </message>
+    <message>
+        <source>languagesLabel</source>
+        <translation>Language</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/assets/languages/fr.ts

@@ -861,6 +861,14 @@ Url du serveur non configurée.</translation>
         <source>savedVideosLabel</source>
         <translation>Dossier des captures vidéos</translation>
     </message>
+    <message>
+        <source>languagesTitle</source>
+        <translation>Langues</translation>
+    </message>
+    <message>
+        <source>languagesLabel</source>
+        <translation>Langue</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/resources.qrc

@@ -74,6 +74,7 @@
     <file>assets/images/delete_hovered.svg</file>
     <file>assets/images/delete_normal.svg</file>
     <file>assets/images/delete_pressed.svg</file>
+    <file>assets/images/drop_down.svg</file>
     <file>assets/images/edit_hovered.svg</file>
     <file>assets/images/edit_normal.svg</file>
     <file>assets/images/edit_pressed.svg</file>
@@ -183,6 +184,7 @@
     <file>ui/modules/Common/Form/Buttons/TextButtonA.qml</file>
     <file>ui/modules/Common/Form/Buttons/TextButtonB.qml</file>
     <file>ui/modules/Common/Form/CheckBoxText.qml</file>
+    <file>ui/modules/Common/Form/ComboBox.qml</file>
     <file>ui/modules/Common/Form/DroppableTextArea.qml</file>
     <file>ui/modules/Common/Form/Fields/NumericField.qml</file>
     <file>ui/modules/Common/Form/Fields/TextAreaField.qml</file>
@@ -203,7 +205,6 @@
     <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>
-    <file>ui/modules/Common/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Common/Form/TransparentTextInput.qml</file>
     <file>ui/modules/Common/Helpers/InvertedMouseArea.qml</file>
     <file>ui/modules/Common/Image/Icon.qml</file>
@@ -231,6 +232,7 @@
     <file>ui/modules/Common/Styles/Form/Buttons/TextButtonAStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/TextButtonBStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/CheckBoxTextStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/ComboBoxStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/DroppableTextAreaStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Fields/TextAreaFieldStyle.qml</file>
@@ -245,7 +247,6 @@
     <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/TransparentComboBoxStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml</file>
     <file>ui/modules/Common/Styles/Menu/ActionMenuStyle.qml</file>
     <file>ui/modules/Common/Styles/Menu/MenuStyle.qml</file>

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

+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import Common 1.0
+import Common.Styles 1.0
+
+// =============================================================================
+
+ComboBox {
+  id: comboBox
+
+  textRole: 'key'
+
+  // ---------------------------------------------------------------------------
+
+  background: Rectangle {
+    border {
+      color: ComboBoxStyle.background.border.color
+      width: ComboBoxStyle.background.border.width
+    }
+
+    color: ComboBoxStyle.background.color
+    radius: ComboBoxStyle.background.radius
+
+    implicitHeight: ComboBoxStyle.background.height
+    implicitWidth: ComboBoxStyle.background.width
+  }
+
+  indicator: Icon {
+    icon: 'drop_down'
+    iconSize: ComboBoxStyle.background.iconSize
+
+    x: comboBox.width - width - comboBox.rightPadding
+    y: comboBox.topPadding + (comboBox.availableHeight - height) / 2
+  }
+
+  // ---------------------------------------------------------------------------
+
+  delegate: ItemDelegate {
+    id: item
+
+    background: Rectangle {
+      color: item.hovered
+        ? ComboBoxStyle.delegate.color.hovered
+        : ComboBoxStyle.delegate.color.normal
+
+      Rectangle {
+        anchors.left: parent.left
+        color: ComboBoxStyle.delegate.indicator.color
+
+        height: parent.height
+        width: ComboBoxStyle.delegate.indicator.width
+
+        visible: item.hovered
+      }
+
+      Rectangle {
+        anchors.bottom: parent.bottom
+        color: ComboBoxStyle.delegate.separator.color
+
+        height: ComboBoxStyle.delegate.separator.height
+        width: parent.width
+
+        visible: comboBox.count !== index + 1
+      }
+    }
+
+    font.bold: comboBox.currentIndex === index
+    hoverEnabled: true
+    text: key
+    width: comboBox.width
+  }
+}

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

-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-import Common.Styles 1.0
-
-// =============================================================================
-// Discrete ComboBox that can be integrated in text.
-// =============================================================================
-
-ComboBox {
-  id: comboBox
-
-  background: Rectangle {
-    // No Style constant, see component name.
-    // It's a `transparent` ComboBox.
-    color: 'transparent'
-  }
-  delegate: ItemDelegate {
-    id: item
-
-    background: Rectangle {
-      color: item.down
-        ? TransparentComboBoxStyle.item.color.pressed
-        : (comboBox.currentIndex === index
-           ? TransparentComboBoxStyle.item.color.selected
-           : TransparentComboBoxStyle.item.color.normal
-          )
-    }
-    font.bold: comboBox.currentIndex === index
-    text: key || modelData
-    width: comboBox.width
-  }
-}

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

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject background: QtObject {
+    property color color: Colors.k
+    property int height: 36
+    property int iconSize: 10
+    property int radius: 4
+    property int width: 400
+
+    property QtObject border: QtObject {
+      property color color: Colors.c
+      property int width: 1
+    }
+  }
+
+  property QtObject delegate: QtObject {
+    property QtObject color: QtObject {
+      property color hovered: Colors.y
+      property color normal: Colors.k
+    }
+
+    property QtObject indicator: QtObject {
+      property color color: Colors.i
+      property int width: 5
+    }
+
+    property QtObject separator: QtObject {
+      property color color: Colors.c
+      property int height: 1
+    }
+  }
+}

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

-pragma Singleton
-import QtQuick 2.7
-
-import Common 1.0
-
-// =============================================================================
-
-QtObject {
-  property QtObject item: QtObject {
-    property QtObject color: QtObject {
-      property color normal: Colors.k
-      property color pressed: Colors.i
-      property color selected: Colors.k
-    }
-  }
-}

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

@@ -8,6 +8,15 @@ singleton BusyIndicatorStyle        1.0 Animations/BusyIndicatorStyle.qml
 
 singleton DialogStyle               1.0 Dialog/DialogStyle.qml
 
+singleton ActionBarStyle            1.0 Form/ActionBarStyle.qml
+singleton CheckBoxTextStyle         1.0 Form/CheckBoxTextStyle.qml
+singleton ComboBoxStyle             1.0 Form/ComboBoxStyle.qml
+singleton DroppableTextAreaStyle    1.0 Form/DroppableTextAreaStyle.qml
+singleton ListFormStyle             1.0 Form/ListFormStyle.qml
+singleton SearchBoxStyle            1.0 Form/SearchBoxStyle.qml
+singleton SwitchStyle               1.0 Form/SwitchStyle.qml
+singleton TransparentTextInputStyle 1.0 Form/TransparentTextInputStyle.qml
+
 singleton AbstractTextButtonStyle   1.0 Form/Buttons/AbstractTextButtonStyle.qml
 singleton ExclusiveButtonsStyle     1.0 Form/Buttons/ExclusiveButtonsStyle.qml
 singleton FileChooserButtonStyle    1.0 Form/Buttons/FileChooserButtonStyle.qml
@@ -28,15 +37,6 @@ singleton FormStyle                 1.0 Form/Placements/FormStyle.qml
 singleton TabButtonStyle            1.0 Form/Tab/TabButtonStyle.qml
 singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml
 
-singleton ActionBarStyle            1.0 Form/ActionBarStyle.qml
-singleton CheckBoxTextStyle         1.0 Form/CheckBoxTextStyle.qml
-singleton DroppableTextAreaStyle    1.0 Form/DroppableTextAreaStyle.qml
-singleton ListFormStyle             1.0 Form/ListFormStyle.qml
-singleton SearchBoxStyle            1.0 Form/SearchBoxStyle.qml
-singleton SwitchStyle               1.0 Form/SwitchStyle.qml
-singleton TransparentComboBoxStyle  1.0 Form/TransparentComboBoxStyle.qml
-singleton TransparentTextInputStyle 1.0 Form/TransparentTextInputStyle.qml
-
 singleton ActionMenuStyle           1.0 Menu/ActionMenuStyle.qml
 singleton MenuStyle                 1.0 Menu/MenuStyle.qml
 

linphone-desktop/ui/modules/Common/qmldir

@@ -20,12 +20,12 @@ ActionBar            1.0 Form/ActionBar.qml
 ActionButton         1.0 Form/ActionButton.qml
 ActionSwitch         1.0 Form/ActionSwitch.qml
 CheckBoxText         1.0 Form/CheckBoxText.qml
+ComboBox             1.0 Form/ComboBox.qml
 DroppableTextArea    1.0 Form/DroppableTextArea.qml
 ListForm             1.0 Form/ListForm.qml
 SearchBox            1.0 Form/SearchBox.qml
 StaticListForm       1.0 Form/StaticListForm.qml
 Switch               1.0 Form/Switch.qml
-TransparentComboBox  1.0 Form/TransparentComboBox.qml
 TransparentTextInput 1.0 Form/TransparentTextInput.qml
 
 ExclusiveButtons     1.0 Form/Buttons/ExclusiveButtons.qml

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

@@ -15,7 +15,23 @@ TabContainer {
     // Languages.
     // -------------------------------------------------------------------------
 
-    // TODO
+    Form {
+      title: qsTr('languagesTitle')
+      width: parent.width
+
+      FormLine {
+        FormGroup {
+          label: qsTr('languagesLabel')
+
+          ComboBox {
+            model: ListModel {
+              ListElement { key: 'English'; value: 0 }
+              ListElement { key: 'Français'; value: 1 }
+            }
+          }
+        }
+      }
+    }
 
     // -------------------------------------------------------------------------
     // Paths.