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

linphone-desktop/assets/languages/en.ts

@@ -837,6 +837,21 @@ Server url not configured.</translation>
         <translation>Enable adaptive rate control</translation>
     </message>
 </context>
+<context>
+    <name>SettingsUi</name>
+    <message>
+        <source>pathsTitle</source>
+        <translation>Paths</translation>
+    </message>
+    <message>
+        <source>savedScreenshotsLabel</source>
+        <translation>Saved screenshots folder</translation>
+    </message>
+    <message>
+        <source>savedVideosLabel</source>
+        <translation>Saved videos folder</translation>
+    </message>
+</context>
 <context>
     <name>SettingsWindow</name>
     <message>

linphone-desktop/assets/languages/fr.ts

@@ -847,6 +847,21 @@ Url du serveur non configurée.</translation>
         <translation>Activer le contrôle de débit adaptif</translation>
     </message>
 </context>
+<context>
+    <name>SettingsUi</name>
+    <message>
+        <source>pathsTitle</source>
+        <translation>Chemins</translation>
+    </message>
+    <message>
+        <source>savedScreenshotsLabel</source>
+        <translation>Dossier des captures d&apos;écrans</translation>
+    </message>
+    <message>
+        <source>savedVideosLabel</source>
+        <translation>Dossier des captures vidéos</translation>
+    </message>
+</context>
 <context>
     <name>SettingsWindow</name>
     <message>

linphone-desktop/resources.qrc

@@ -78,6 +78,7 @@
     <file>assets/images/edit_normal.svg</file>
     <file>assets/images/edit_pressed.svg</file>
     <file>assets/images/ended_call.svg</file>
+    <file>assets/images/file.png</file>
     <file>assets/images/file_sign.svg</file>
     <file>assets/images/filter.svg</file>
     <file>assets/images/fullscreen_hovered.svg</file>
@@ -177,6 +178,7 @@
     <file>ui/modules/Common/Form/ActionSwitch.qml</file>
     <file>ui/modules/Common/Form/Buttons/AbstractTextButton.qml</file>
     <file>ui/modules/Common/Form/Buttons/ExclusiveButtons.qml</file>
+    <file>ui/modules/Common/Form/Buttons/FileChooserButton.qml</file>
     <file>ui/modules/Common/Form/Buttons/SmallButton.qml</file>
     <file>ui/modules/Common/Form/Buttons/TextButtonA.qml</file>
     <file>ui/modules/Common/Form/Buttons/TextButtonB.qml</file>
@@ -224,6 +226,7 @@
     <file>ui/modules/Common/Styles/Form/ActionBarStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/AbstractTextButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/ExclusiveButtonsStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/Buttons/FileChooserButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/SmallButtonStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/TextButtonAStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/Buttons/TextButtonBStyle.qml</file>

linphone-desktop/ui/modules/Common/Form/Buttons/FileChooserButton.qml

+import QtQuick 2.7
+import QtQuick.Dialogs 1.2
+
+import Common 1.0
+import Common.Styles 1.0
+import Utils 1.0
+
+// =============================================================================
+
+TextField {
+  id: textField
+
+  // ---------------------------------------------------------------------------
+
+  property alias selectExisting: fileDialog.selectExisting
+  property alias selectFolder: fileDialog.selectFolder
+  property alias title: fileDialog.title
+
+  property string selectedFile: ''
+
+  // ---------------------------------------------------------------------------
+
+  signal accepted (var selectedFile)
+  signal rejected
+
+  // ---------------------------------------------------------------------------
+
+  text: {
+    var path = textField.selectedFile
+    return path.length ? Utils.basename(path) : ''
+  }
+
+  tools: Item {
+    height: parent.height
+    width: FileChooserButtonStyle.tools.width
+
+    Rectangle {
+      anchors {
+        fill: parent
+        margins: TextFieldStyle.background.border.width
+      }
+
+      color: mouseArea.pressed
+        ? FileChooserButtonStyle.tools.button.color.pressed
+        : (
+          mouseArea.containsMouse
+            ? FileChooserButtonStyle.tools.button.color.hovered
+            : FileChooserButtonStyle.tools.button.color.normal
+        )
+
+      Icon {
+        anchors.centerIn: parent
+        // TODO: Set icon file or folder.
+        iconSize: FileChooserButtonStyle.tools.button.iconSize
+      }
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  FileDialog {
+    id: fileDialog
+
+    folder: {
+      if (!textField.selectedFile.length) {
+        return ''
+      }
+
+      var folder = Utils.dirname(textField.selectedFile)
+      return !Utils.startsWith(folder, 'file:')
+        ? 'file:' + folder
+        : folder
+    }
+
+    onAccepted: {
+      textField.selectedFile = fileUrl.toString().substring(7)
+      textField.accepted(textField.selectedFile)
+    }
+
+    onRejected: textField.rejected()
+  }
+
+  // ---------------------------------------------------------------------------
+
+  MouseArea {
+    id: mouseArea
+
+    anchors.fill: parent
+    hoverEnabled: true
+
+    onClicked: fileDialog.open()
+  }
+}

linphone-desktop/ui/modules/Common/Form/Fields/NumericField.qml

@@ -35,13 +35,7 @@ TextField {
 
   text: minValue
 
-  tools: Rectangle {
-    border {
-      color: TextFieldStyle.background.border.color
-      width: TextFieldStyle.background.border.width
-    }
-    color: 'transparent' // Not a style.
-
+  tools: Item {
     height: parent.height
     width: NumericFieldStyle.tools.width
 

linphone-desktop/ui/modules/Common/Form/Fields/TextField.qml

@@ -38,6 +38,11 @@ Controls.TextField {
       Rectangle {
         id: toolsContainer
 
+        border {
+          color: TextFieldStyle.background.border.color
+          width: TextFieldStyle.background.border.width
+        }
+
         anchors.fill: parent
         color: background.color
         data: tools || []

linphone-desktop/ui/modules/Common/Styles/Form/Buttons/FileChooserButtonStyle.qml

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject tools: QtObject {
+    property int width: 30
+
+    property QtObject button: QtObject {
+      property int iconSize: 16
+
+      property QtObject color: QtObject {
+        property color hovered: Colors.c
+        property color normal: Colors.q
+        property color pressed: Colors.c
+      }
+    }
+  }
+}

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

@@ -10,6 +10,7 @@ singleton DialogStyle               1.0 Dialog/DialogStyle.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
 singleton SmallButtonStyle          1.0 Form/Buttons/SmallButtonStyle.qml
 singleton TextButtonAStyle          1.0 Form/Buttons/TextButtonAStyle.qml
 singleton TextButtonBStyle          1.0 Form/Buttons/TextButtonBStyle.qml

linphone-desktop/ui/modules/Common/qmldir

@@ -29,6 +29,7 @@ TransparentComboBox  1.0 Form/TransparentComboBox.qml
 TransparentTextInput 1.0 Form/TransparentTextInput.qml
 
 ExclusiveButtons     1.0 Form/Buttons/ExclusiveButtons.qml
+FileChooserButton    1.0 Form/Buttons/FileChooserButton.qml
 TextButtonA          1.0 Form/Buttons/TextButtonA.qml
 TextButtonB          1.0 Form/Buttons/TextButtonB.qml
 

linphone-desktop/ui/scripts/Utils/utils.js

@@ -262,13 +262,27 @@ function assert (condition, message) {
 // -----------------------------------------------------------------------------
 
 function basename (str) {
-  return str.slice(str.lastIndexOf('/') + 1)
+  var str2 = str
+  var length = str2.length - 1
+
+  if (str2[length] === '/') {
+    str2 = str2.substring(0, length)
+  }
+
+  return str2.slice(str2.lastIndexOf('/') + 1)
 }
 
 // -----------------------------------------------------------------------------
 
 function dirname (str) {
-  return str.slice(0, str.lastIndexOf('/') + 1)
+  var str2 = str
+  var length = str2.length - 1
+
+  if (str2[length] === '/') {
+    str2 = str2.substring(0, length)
+  }
+
+  return str2.slice(0, str2.lastIndexOf('/') + 1)
 }
 
 // -----------------------------------------------------------------------------

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

@@ -2,8 +2,50 @@ import QtQuick 2.7
 
 import Common 1.0
 
+import App.Styles 1.0
+
 // =============================================================================
 
 TabContainer {
+  Column {
+    spacing: SettingsWindowStyle.forms.spacing
+    width: parent.width
+
+    // -------------------------------------------------------------------------
+    // Languages.
+    // -------------------------------------------------------------------------
+
+    // TODO
+
+    // -------------------------------------------------------------------------
+    // Paths.
+    // -------------------------------------------------------------------------
+
+    Form {
+      title: qsTr('pathsTitle')
+      width: parent.width
+
+      FormLine {
+        FormGroup {
+          label: qsTr('savedScreenshotsLabel')
+
+          FileChooserButton {
+            id: savedScreenshotsFolder
+
+            selectFolder: true
+          }
+        }
+
+        FormGroup {
+          label: qsTr('savedVideosLabel')
+
+          FileChooserButton {
+            id: savedVideosFolder
 
+            selectFolder: true
+          }
+        }
+      }
+    }
+  }
 }