feat(app): add `NumericField` component

linphone-desktop/assets/languages/en.ts

@@ -552,6 +552,10 @@ Server url not configured.</translation>
         <source>autoAnswerLabel</source>
         <translation>Auto answer</translation>
     </message>
+    <message>
+        <source>autoAnswerDelayLabel</source>
+        <translation>Delay (in ms)</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/assets/languages/fr.ts

@@ -562,6 +562,10 @@ Url du serveur non configurée.</translation>
         <source>autoAnswerLabel</source>
         <translation>Répondre automatiquement</translation>
     </message>
+    <message>
+        <source>autoAnswerDelayLabel</source>
+        <translation>Délai (en ms)</translation>
+    </message>
 </context>
 <context>
     <name>SettingsWindow</name>

linphone-desktop/resources.qrc

@@ -179,7 +179,10 @@
     <file>ui/modules/Common/Form/ActionSwitch.qml</file>
     <file>ui/modules/Common/Form/CheckBoxText.qml</file>
     <file>ui/modules/Common/Form/ExclusiveButtons.qml</file>
+    <file>ui/modules/Common/Form/Fields/NumericField.qml</file>
+    <file>ui/modules/Common/Form/Fields/TextField.qml</file>
     <file>ui/modules/Common/Form/FormGroup.qml</file>
+    <file>ui/modules/Common/Form/FormLine.qml</file>
     <file>ui/modules/Common/Form/Form.qml</file>
     <file>ui/modules/Common/Form/ListForm.qml</file>
     <file>ui/modules/Common/Form/SmallButton.qml</file>
@@ -190,7 +193,6 @@
     <file>ui/modules/Common/Form/Tab/TabContainer.qml</file>
     <file>ui/modules/Common/Form/TextButtonA.qml</file>
     <file>ui/modules/Common/Form/TextButtonB.qml</file>
-    <file>ui/modules/Common/Form/TextField.qml</file>
     <file>ui/modules/Common/Form/TransparentComboBox.qml</file>
     <file>ui/modules/Common/Form/TransparentTextInput.qml</file>
     <file>ui/modules/Common/Image/Icon.qml</file>
@@ -218,7 +220,10 @@
     <file>ui/modules/Common/Styles/Form/ActionBarStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/CheckBoxTextStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/ExclusiveButtonsStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/FormGroupStyle.qml</file>
+    <file>ui/modules/Common/Styles/Form/FormLineStyle.qml</file>
     <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>
@@ -227,7 +232,6 @@
     <file>ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TextButtonAStyle.qml</file>
     <file>ui/modules/Common/Styles/Form/TextButtonBStyle.qml</file>
-    <file>ui/modules/Common/Styles/Form/TextFieldStyle.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>

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

+import QtQuick 2.7
+import QtQuick.Controls 2.1
+
+import Common 1.0
+import Common.Styles 1.0
+
+// =============================================================================
+
+TextField {
+  id: numericField
+
+  property int maxValue: 9999
+  property int minValue: 0
+  property int step: 1
+
+  // ---------------------------------------------------------------------------
+
+  function _decrease () {
+    var value = +numericField.text
+
+    if (value - step >= minValue) {
+      numericField.text = value - step
+    }
+  }
+
+  function _increase () {
+    var value = +numericField.text
+
+    if (value + step <= maxValue) {
+      numericField.text = value + step
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  tools: Rectangle {
+    border {
+      color: TextFieldStyle.background.border.color
+      width: TextFieldStyle.background.border.width
+    }
+    color: 'transparent' // Not a style.
+
+    height: parent.height
+    width: NumericFieldStyle.tools.width
+
+    Column {
+      id: container
+
+      anchors {
+        fill: parent
+        margins: TextFieldStyle.background.border.width
+      }
+
+      // -----------------------------------------------------------------------
+
+      Component {
+        id: button
+
+        Button {
+          id: buttonInstance
+
+          autoRepeat: true
+
+          background: Rectangle {
+            color: buttonInstance.down && !numericField.readOnly
+              ? NumericFieldStyle.tools.button.color.pressed
+              : NumericFieldStyle.tools.button.color.normal
+          }
+
+          contentItem: Text {
+            color: NumericFieldStyle.tools.button.text.color
+            text: buttonInstance.text
+            font.pointSize: NumericFieldStyle.tools.button.text.fontSize
+
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+          }
+
+          text: parent.text
+
+          height: container.height / 2
+          width: container.width
+
+          onClicked: !numericField.readOnly && handler()
+        }
+      }
+
+      // -----------------------------------------------------------------------
+
+      Loader {
+        property string text: '+'
+        property var handler: _increase
+
+        sourceComponent: button
+      }
+
+      Loader {
+        property string text: '-'
+        property var handler: _decrease
+
+        sourceComponent: button
+      }
+    }
+  }
+
+  validator: IntValidator {
+    bottom: numericField.minValue
+    top: numericField.maxValue
+  }
+}

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

@@ -9,22 +9,46 @@ import Common.Styles 1.0
 // =============================================================================
 
 Controls.TextField {
+  id: textField
+
   property alias icon: icon.icon
+  property var tools
 
   background: Rectangle {
     border {
       color: TextFieldStyle.background.border.color
       width: TextFieldStyle.background.border.width
     }
-    color: TextFieldStyle.background.color
+
+    color: textField.readOnly
+      ? TextFieldStyle.background.color.readOnly
+      : TextFieldStyle.background.color.normal
+
     implicitHeight: TextFieldStyle.background.height
     implicitWidth: TextFieldStyle.background.width
 
     radius: TextFieldStyle.background.radius
+
+    MouseArea {
+      anchors.right: parent.right
+      height: parent.height
+      hoverEnabled: true
+      implicitWidth: tools ? tools.width : 0
+
+      Rectangle {
+        id: toolsContainer
+
+        anchors.fill: parent
+        color: background.color
+        data: tools || []
+      }
+    }
   }
 
   color: TextFieldStyle.text.color
   font.pointSize: TextFieldStyle.text.fontSize
+  rightPadding: TextFieldStyle.text.rightPadding + toolsContainer.width
+  selectByMouse: true
 
   Icon {
     id: icon

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

+import QtQuick 2.7
+
+import Common.Styles 1.0
+
+// =============================================================================
+
+Row {
+  spacing: FormLineStyle.spacing
+}

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

@@ -167,6 +167,7 @@ RowLayout {
         inputMethodHints: listForm.inputMethodHints
         isInvalid: $isInvalid
         readOnly: listForm.readOnly
+        selectByMouse: true
         text: $value
 
         height: ListFormStyle.lineHeight

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

@@ -93,7 +93,6 @@ Item {
       ? TransparentTextInputStyle.text.color.focused
       : TransparentTextInputStyle.text.color.normal
     font.pointSize: TransparentTextInputStyle.text.fontSize
-    selectByMouse: true
     verticalAlignment: TextInput.AlignVCenter
 
     Keys.onEscapePressed: focus = false

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

@@ -69,7 +69,6 @@ Item {
       id: searchField
 
       icon: 'search'
-      selectByMouse: true
       width: parent.width
 
       Keys.onEscapePressed: searchBox.hideMenu()

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

+pragma Singleton
+import QtQuick 2.7
+
+import Common 1.0
+
+// =============================================================================
+
+QtObject {
+  property QtObject tools: QtObject {
+    property int width: 20
+
+    property QtObject button: QtObject {
+      property QtObject color: QtObject {
+        property color normal: Colors.q
+        property color pressed: Colors.c
+      }
+
+      property QtObject text: QtObject {
+        property color color: Colors.d
+        property int fontSize: 9
+      }
+    }
+  }
+}

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

@@ -7,7 +7,6 @@ import Common 1.0
 
 QtObject {
   property QtObject background: QtObject {
-    property color color: Colors.k
     property int height: 36
     property int width: 300
 
@@ -17,10 +16,16 @@ QtObject {
       property color color: Colors.c
       property int width: 1
     }
+
+    property QtObject color: QtObject {
+      property color normal: Colors.k
+      property color readOnly: Colors.e
+    }
   }
 
   property QtObject text: QtObject {
     property color color: Colors.d
     property int fontSize: 10
+    property int rightPadding: 10
   }
 }

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

+pragma Singleton
+import QtQuick 2.7
+
+// =============================================================================
+
+QtObject {
+  property int spacing: 10
+}

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

@@ -16,6 +16,9 @@ singleton DroppableTextAreaStyle    1.0 DroppableTextAreaStyle.qml
 
 singleton ForceScrollBarStyle       1.0 ForceScrollBarStyle.qml
 
+singleton NumericFieldStyle         1.0 Form/Fields/NumericFieldStyle.qml
+singleton TextFieldStyle            1.0 Form/Fields/TextFieldStyle.qml
+
 singleton TabButtonStyle            1.0 Form/Tab/TabButtonStyle.qml
 singleton TabContainerStyle         1.0 Form/Tab/TabContainerStyle.qml
 
@@ -23,14 +26,14 @@ singleton AbstractTextButtonStyle   1.0 Form/AbstractTextButtonStyle.qml
 singleton ActionBarStyle            1.0 Form/ActionBarStyle.qml
 singleton CheckBoxTextStyle         1.0 Form/CheckBoxTextStyle.qml
 singleton ExclusiveButtonsStyle     1.0 Form/ExclusiveButtonsStyle.qml
-singleton FormStyle                 1.0 Form/FormStyle.qml
 singleton FormGroupStyle            1.0 Form/FormGroupStyle.qml
+singleton FormLineStyle             1.0 Form/FormLineStyle.qml
+singleton FormStyle                 1.0 Form/FormStyle.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
 singleton TransparentComboBoxStyle  1.0 Form/TransparentComboBoxStyle.qml
 singleton TransparentTextInputStyle 1.0 Form/TransparentTextInputStyle.qml
 

linphone-desktop/ui/modules/Common/qmldir

@@ -31,6 +31,9 @@ DroppableTextArea    1.0 DroppableTextArea.qml
 ForceScrollBar       1.0 ForceScrollBar.qml
 
 # Form
+NumericField         1.0 Form/Fields/NumericField.qml
+TextField            1.0 Form/Fields/TextField.qml
+
 TabBar               1.0 Form/Tab/TabBar.qml
 TabButton            1.0 Form/Tab/TabButton.qml
 TabContainer         1.0 Form/Tab/TabContainer.qml
@@ -42,13 +45,13 @@ CheckBoxText         1.0 Form/CheckBoxText.qml
 ExclusiveButtons     1.0 Form/ExclusiveButtons.qml
 Form                 1.0 Form/Form.qml
 FormGroup            1.0 Form/FormGroup.qml
+FormLine             1.0 Form/FormLine.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
 TransparentComboBox  1.0 Form/TransparentComboBox.qml
 TransparentTextInput 1.0 Form/TransparentTextInput.qml
 

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

@@ -26,10 +26,22 @@ TabContainer {
         }
       }
 
-      FormGroup {
-        label: qsTr('autoAnswerLabel')
+      FormLine {
+        FormGroup {
+          label: qsTr('autoAnswerLabel')
+
+          Switch {
+            id: autoAnswer
+          }
+        }
 
-        Switch {}
+        FormGroup {
+          label: qsTr('autoAnswerDelayLabel')
+
+          NumericField {
+            readOnly: !autoAnswer.checked
+          }
+        }
       }
     }