From f514b2d6e3e4f3feca16f91453a149e399f46404 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 22 Feb 2017 16:31:32 +0100 Subject: [PATCH] feat(ui/views/App/Settings/SettingsUi): view in progress, add a `ComboBox` component --- linphone-desktop/assets/images/drop_down.svg | 12 +++ linphone-desktop/assets/languages/en.ts | 8 ++ linphone-desktop/assets/languages/fr.ts | 8 ++ linphone-desktop/resources.qrc | 5 +- .../ui/modules/Common/Form/ComboBox.qml | 73 +++++++++++++++++++ .../Common/Form/TransparentComboBox.qml | 33 --------- .../Common/Styles/Form/ComboBoxStyle.qml | 38 ++++++++++ .../Styles/Form/TransparentComboBoxStyle.qml | 16 ---- .../ui/modules/Common/Styles/qmldir | 18 ++--- linphone-desktop/ui/modules/Common/qmldir | 2 +- .../ui/views/App/Settings/SettingsUi.qml | 18 ++++- 11 files changed, 169 insertions(+), 62 deletions(-) create mode 100644 linphone-desktop/assets/images/drop_down.svg create mode 100644 linphone-desktop/ui/modules/Common/Form/ComboBox.qml delete mode 100644 linphone-desktop/ui/modules/Common/Form/TransparentComboBox.qml create mode 100644 linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml delete mode 100644 linphone-desktop/ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml diff --git a/linphone-desktop/assets/images/drop_down.svg b/linphone-desktop/assets/images/drop_down.svg new file mode 100644 index 000000000..3e852d784 --- /dev/null +++ b/linphone-desktop/assets/images/drop_down.svg @@ -0,0 +1,12 @@ + + + + drop_down_list + Created with Sketch. + + + + + + + diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index 1d593343e..361c3c0e1 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -851,6 +851,14 @@ Server url not configured. savedVideosLabel Saved videos folder + + languagesTitle + Languages + + + languagesLabel + Language + SettingsWindow diff --git a/linphone-desktop/assets/languages/fr.ts b/linphone-desktop/assets/languages/fr.ts index 98b33137f..90e117183 100644 --- a/linphone-desktop/assets/languages/fr.ts +++ b/linphone-desktop/assets/languages/fr.ts @@ -861,6 +861,14 @@ Url du serveur non configurée. savedVideosLabel Dossier des captures vidéos + + languagesTitle + Langues + + + languagesLabel + Langue + SettingsWindow diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index 5e87b31dd..c11aa5908 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -74,6 +74,7 @@ assets/images/delete_hovered.svg assets/images/delete_normal.svg assets/images/delete_pressed.svg + assets/images/drop_down.svg assets/images/edit_hovered.svg assets/images/edit_normal.svg assets/images/edit_pressed.svg @@ -183,6 +184,7 @@ ui/modules/Common/Form/Buttons/TextButtonA.qml ui/modules/Common/Form/Buttons/TextButtonB.qml ui/modules/Common/Form/CheckBoxText.qml + ui/modules/Common/Form/ComboBox.qml ui/modules/Common/Form/DroppableTextArea.qml ui/modules/Common/Form/Fields/NumericField.qml ui/modules/Common/Form/Fields/TextAreaField.qml @@ -203,7 +205,6 @@ ui/modules/Common/Form/Tab/TabBar.qml ui/modules/Common/Form/Tab/TabButton.qml ui/modules/Common/Form/Tab/TabContainer.qml - ui/modules/Common/Form/TransparentComboBox.qml ui/modules/Common/Form/TransparentTextInput.qml ui/modules/Common/Helpers/InvertedMouseArea.qml ui/modules/Common/Image/Icon.qml @@ -231,6 +232,7 @@ ui/modules/Common/Styles/Form/Buttons/TextButtonAStyle.qml ui/modules/Common/Styles/Form/Buttons/TextButtonBStyle.qml ui/modules/Common/Styles/Form/CheckBoxTextStyle.qml + ui/modules/Common/Styles/Form/ComboBoxStyle.qml ui/modules/Common/Styles/Form/DroppableTextAreaStyle.qml ui/modules/Common/Styles/Form/Fields/NumericFieldStyle.qml ui/modules/Common/Styles/Form/Fields/TextAreaFieldStyle.qml @@ -245,7 +247,6 @@ ui/modules/Common/Styles/Form/SwitchStyle.qml ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml - ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml ui/modules/Common/Styles/Menu/ActionMenuStyle.qml ui/modules/Common/Styles/Menu/MenuStyle.qml diff --git a/linphone-desktop/ui/modules/Common/Form/ComboBox.qml b/linphone-desktop/ui/modules/Common/Form/ComboBox.qml new file mode 100644 index 000000000..29004747d --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Form/ComboBox.qml @@ -0,0 +1,73 @@ +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 + } +} diff --git a/linphone-desktop/ui/modules/Common/Form/TransparentComboBox.qml b/linphone-desktop/ui/modules/Common/Form/TransparentComboBox.qml deleted file mode 100644 index 0d3ad7858..000000000 --- a/linphone-desktop/ui/modules/Common/Form/TransparentComboBox.qml +++ /dev/null @@ -1,33 +0,0 @@ -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 - } -} diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml new file mode 100644 index 000000000..ee15fee45 --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Styles/Form/ComboBoxStyle.qml @@ -0,0 +1,38 @@ +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 + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml deleted file mode 100644 index ee80396cd..000000000 --- a/linphone-desktop/ui/modules/Common/Styles/Form/TransparentComboBoxStyle.qml +++ /dev/null @@ -1,16 +0,0 @@ -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 - } - } -} diff --git a/linphone-desktop/ui/modules/Common/Styles/qmldir b/linphone-desktop/ui/modules/Common/Styles/qmldir index 052097cd8..afae90bb1 100644 --- a/linphone-desktop/ui/modules/Common/Styles/qmldir +++ b/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 diff --git a/linphone-desktop/ui/modules/Common/qmldir b/linphone-desktop/ui/modules/Common/qmldir index 130dba8a2..e291216af 100644 --- a/linphone-desktop/ui/modules/Common/qmldir +++ b/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 diff --git a/linphone-desktop/ui/views/App/Settings/SettingsUi.qml b/linphone-desktop/ui/views/App/Settings/SettingsUi.qml index 0d10e03a4..a32a9b16f 100644 --- a/linphone-desktop/ui/views/App/Settings/SettingsUi.qml +++ b/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.