From 1b3fce8df333003ebf2f443a57561c41715e2d45 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Mon, 13 Feb 2017 14:59:57 +0100 Subject: [PATCH] feat(app): add `NumericField` component --- linphone-desktop/assets/languages/en.ts | 4 + linphone-desktop/assets/languages/fr.ts | 4 + linphone-desktop/resources.qrc | 8 +- .../Common/Form/Fields/NumericField.qml | 110 ++++++++++++++++++ .../Common/Form/{ => Fields}/TextField.qml | 26 ++++- .../ui/modules/Common/Form/FormLine.qml | 9 ++ .../ui/modules/Common/Form/ListForm.qml | 1 + .../Common/Form/TransparentTextInput.qml | 1 - .../ui/modules/Common/SearchBox.qml | 1 - .../Styles/Form/Fields/NumericFieldStyle.qml | 24 ++++ .../Form/{ => Fields}/TextFieldStyle.qml | 7 +- .../Common/Styles/Form/FormLineStyle.qml | 8 ++ .../ui/modules/Common/Styles/qmldir | 7 +- linphone-desktop/ui/modules/Common/qmldir | 5 +- .../views/App/Settings/SettingsCallsChat.qml | 18 ++- 15 files changed, 221 insertions(+), 12 deletions(-) create mode 100644 linphone-desktop/ui/modules/Common/Form/Fields/NumericField.qml rename linphone-desktop/ui/modules/Common/Form/{ => Fields}/TextField.qml (63%) create mode 100644 linphone-desktop/ui/modules/Common/Form/FormLine.qml create mode 100644 linphone-desktop/ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml rename linphone-desktop/ui/modules/Common/Styles/Form/{ => Fields}/TextFieldStyle.qml (75%) create mode 100644 linphone-desktop/ui/modules/Common/Styles/Form/FormLineStyle.qml diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index 7dc89d4c1..4ce35647b 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -552,6 +552,10 @@ Server url not configured. autoAnswerLabel Auto answer + + autoAnswerDelayLabel + Delay (in ms) + SettingsWindow diff --git a/linphone-desktop/assets/languages/fr.ts b/linphone-desktop/assets/languages/fr.ts index 0fae4c952..edca709df 100644 --- a/linphone-desktop/assets/languages/fr.ts +++ b/linphone-desktop/assets/languages/fr.ts @@ -562,6 +562,10 @@ Url du serveur non configurée. autoAnswerLabel Répondre automatiquement + + autoAnswerDelayLabel + Délai (en ms) + SettingsWindow diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index 6a93173a3..00100d9fd 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -179,7 +179,10 @@ ui/modules/Common/Form/ActionSwitch.qml ui/modules/Common/Form/CheckBoxText.qml ui/modules/Common/Form/ExclusiveButtons.qml + ui/modules/Common/Form/Fields/NumericField.qml + ui/modules/Common/Form/Fields/TextField.qml ui/modules/Common/Form/FormGroup.qml + ui/modules/Common/Form/FormLine.qml ui/modules/Common/Form/Form.qml ui/modules/Common/Form/ListForm.qml ui/modules/Common/Form/SmallButton.qml @@ -190,7 +193,6 @@ ui/modules/Common/Form/Tab/TabContainer.qml ui/modules/Common/Form/TextButtonA.qml ui/modules/Common/Form/TextButtonB.qml - ui/modules/Common/Form/TextField.qml ui/modules/Common/Form/TransparentComboBox.qml ui/modules/Common/Form/TransparentTextInput.qml ui/modules/Common/Image/Icon.qml @@ -218,7 +220,10 @@ ui/modules/Common/Styles/Form/ActionBarStyle.qml ui/modules/Common/Styles/Form/CheckBoxTextStyle.qml ui/modules/Common/Styles/Form/ExclusiveButtonsStyle.qml + ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml + ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml ui/modules/Common/Styles/Form/FormGroupStyle.qml + ui/modules/Common/Styles/Form/FormLineStyle.qml ui/modules/Common/Styles/Form/FormStyle.qml ui/modules/Common/Styles/Form/ListFormStyle.qml ui/modules/Common/Styles/Form/SmallButtonStyle.qml @@ -227,7 +232,6 @@ ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml ui/modules/Common/Styles/Form/TextButtonAStyle.qml ui/modules/Common/Styles/Form/TextButtonBStyle.qml - ui/modules/Common/Styles/Form/TextFieldStyle.qml ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml ui/modules/Common/Styles/Menu/ActionMenuStyle.qml diff --git a/linphone-desktop/ui/modules/Common/Form/Fields/NumericField.qml b/linphone-desktop/ui/modules/Common/Form/Fields/NumericField.qml new file mode 100644 index 000000000..43c783c63 --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Form/Fields/NumericField.qml @@ -0,0 +1,110 @@ +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 + } +} diff --git a/linphone-desktop/ui/modules/Common/Form/TextField.qml b/linphone-desktop/ui/modules/Common/Form/Fields/TextField.qml similarity index 63% rename from linphone-desktop/ui/modules/Common/Form/TextField.qml rename to linphone-desktop/ui/modules/Common/Form/Fields/TextField.qml index 6604961e0..30c6ea61c 100644 --- a/linphone-desktop/ui/modules/Common/Form/TextField.qml +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/Form/FormLine.qml b/linphone-desktop/ui/modules/Common/Form/FormLine.qml new file mode 100644 index 000000000..fbafb8e3a --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Form/FormLine.qml @@ -0,0 +1,9 @@ +import QtQuick 2.7 + +import Common.Styles 1.0 + +// ============================================================================= + +Row { + spacing: FormLineStyle.spacing +} diff --git a/linphone-desktop/ui/modules/Common/Form/ListForm.qml b/linphone-desktop/ui/modules/Common/Form/ListForm.qml index f68ba8190..f091d462a 100644 --- a/linphone-desktop/ui/modules/Common/Form/ListForm.qml +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/Form/TransparentTextInput.qml b/linphone-desktop/ui/modules/Common/Form/TransparentTextInput.qml index 630d27193..e5722e9f5 100644 --- a/linphone-desktop/ui/modules/Common/Form/TransparentTextInput.qml +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/SearchBox.qml b/linphone-desktop/ui/modules/Common/SearchBox.qml index df8e43b14..b63d0a285 100644 --- a/linphone-desktop/ui/modules/Common/SearchBox.qml +++ b/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() diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml new file mode 100644 index 000000000..a5a4b558c --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml @@ -0,0 +1,24 @@ +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 + } + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/TextFieldStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml similarity index 75% rename from linphone-desktop/ui/modules/Common/Styles/Form/TextFieldStyle.qml rename to linphone-desktop/ui/modules/Common/Styles/Form/Fields/TextFieldStyle.qml index 505bcf433..8820ef56e 100644 --- a/linphone-desktop/ui/modules/Common/Styles/Form/TextFieldStyle.qml +++ b/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 } } diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/FormLineStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/FormLineStyle.qml new file mode 100644 index 000000000..2e8763336 --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Styles/Form/FormLineStyle.qml @@ -0,0 +1,8 @@ +pragma Singleton +import QtQuick 2.7 + +// ============================================================================= + +QtObject { + property int spacing: 10 +} diff --git a/linphone-desktop/ui/modules/Common/Styles/qmldir b/linphone-desktop/ui/modules/Common/Styles/qmldir index 9afe1ae36..5e4ed5a33 100644 --- a/linphone-desktop/ui/modules/Common/Styles/qmldir +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/qmldir b/linphone-desktop/ui/modules/Common/qmldir index be374d8df..813b3b9a4 100644 --- a/linphone-desktop/ui/modules/Common/qmldir +++ b/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 diff --git a/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml b/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml index 02a5c6098..90a653795 100644 --- a/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml +++ b/linphone-desktop/ui/views/App/Settings/SettingsCallsChat.qml @@ -26,10 +26,22 @@ TabContainer { } } - FormGroup { - label: qsTr('autoAnswerLabel') + FormLine { + FormGroup { + label: qsTr('autoAnswerLabel') - Switch {} + Switch { + id: autoAnswer + } + } + + FormGroup { + label: qsTr('autoAnswerDelayLabel') + + NumericField { + readOnly: !autoAnswer.checked + } + } } }