diff --git a/tests/languages/en.ts b/tests/languages/en.ts index bff3b1a10..1a69fee4b 100644 --- a/tests/languages/en.ts +++ b/tests/languages/en.ts @@ -112,4 +112,23 @@ CANCEL + + searchContact + + searchContactPlaceholder + Search contact + + + selectAllContacts + All + + + selectConnectedContacts + Connected + + + addContact + ADD CONTACT + + diff --git a/tests/languages/fr.ts b/tests/languages/fr.ts index b8e00eb17..48f232e9b 100644 --- a/tests/languages/fr.ts +++ b/tests/languages/fr.ts @@ -112,4 +112,23 @@ ANNULER + + searchContact + + searchContactPlaceholder + Rechercher contact + + + selectAllContacts + Tous + + + selectConnectedContacts + Connectés + + + addContact + AJOUTER CONTACT + + diff --git a/tests/linphone.pro b/tests/linphone.pro index 927c46f77..a17dda657 100644 --- a/tests/linphone.pro +++ b/tests/linphone.pro @@ -21,6 +21,8 @@ TRANSLATIONS = \ lupdate_only{ # Each component folder must be added explicitly. SOURCES = \ + ui/components/collapse/*.qml \ + ui/components/contact/*.qml \ ui/components/dialog/*.qml \ ui/components/form/*.qml \ ui/components/misc/*.qml \ diff --git a/tests/resources.qrc b/tests/resources.qrc index b24185f1a..e0d5fa590 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -5,20 +5,26 @@ languages/fr.qm + ui/components/collapse/Collapse.qml + ui/components/contact/Avatar.qml ui/components/dialog/DialogDescription.qml ui/components/dialog/DialogPlus.qml - ui/components/form/Collapse.qml - ui/components/form/DialogButton.qml + ui/components/form/DarkButton.qml ui/components/form/DialogCheckBox.qml + ui/components/form/ExclusiveButtons.qml + ui/components/form/LightButton.qml + ui/components/form/SmallButton.qml ui/components/form/ToolBarButton.qml ui/components/form/TransparentComboBox.qml ui/components/misc/Contact.qml ui/components/misc/MenuEntry.qml + ui/components/scrollBar/ForceScrollBar.qml ui/components/select/SelectContact.qml ui/views/mainWindow/home.qml ui/views/mainWindow/mainWindow.qml + ui/views/mainWindow/searchContact.qml ui/views/manageAccounts.qml ui/views/newCall.qml diff --git a/tests/ui/components/form/Collapse.qml b/tests/ui/components/collapse/Collapse.qml similarity index 96% rename from tests/ui/components/form/Collapse.qml rename to tests/ui/components/collapse/Collapse.qml index 69e471ed9..d6e2bd9b9 100644 --- a/tests/ui/components/form/Collapse.qml +++ b/tests/ui/components/collapse/Collapse.qml @@ -1,5 +1,4 @@ import QtQuick 2.7 -import QtQuick.Controls 2.0 // =================================================================== diff --git a/tests/ui/components/contact/Avatar.qml b/tests/ui/components/contact/Avatar.qml new file mode 100644 index 000000000..3cd001690 --- /dev/null +++ b/tests/ui/components/contact/Avatar.qml @@ -0,0 +1,24 @@ +import QtQuick 2.7 + +Rectangle { + property string username + property string image + + color: '#8F8F8F' + radius: 20 + + Text { + anchors.centerIn: parent + text: (function () { + var spaceIndex = username.indexOf(' ') + var firstLetter = username.charAt(0) + + if (spaceIndex === -1) { + return firstLetter + } + + return firstLetter + username.charAt(spaceIndex + 1) + })() + color: '#FFFFFF' + } +} diff --git a/tests/ui/components/dialog/DialogDescription.qml b/tests/ui/components/dialog/DialogDescription.qml index bd459aafd..37f9470c9 100644 --- a/tests/ui/components/dialog/DialogDescription.qml +++ b/tests/ui/components/dialog/DialogDescription.qml @@ -1,5 +1,7 @@ import QtQuick 2.7 +// =================================================================== +// Description content used by dialogs. // =================================================================== Item { diff --git a/tests/ui/components/dialog/DialogPlus.qml b/tests/ui/components/dialog/DialogPlus.qml index e68d51062..e1e20b422 100644 --- a/tests/ui/components/dialog/DialogPlus.qml +++ b/tests/ui/components/dialog/DialogPlus.qml @@ -2,12 +2,15 @@ import QtQuick 2.7 import QtQuick.Layouts 1.3 import QtQuick.Window 2.2 +// =================================================================== +// Helper to build quickly dialogs. // =================================================================== Window { default property alias contents: content.data // Required. property alias buttons: buttons.data // Required. property alias descriptionText: description.text // Optionnal. + property bool centeredButtons // Optionnal. modality: Qt.WindowModal diff --git a/tests/ui/components/form/DialogButton.qml b/tests/ui/components/form/DarkButton.qml similarity index 100% rename from tests/ui/components/form/DialogButton.qml rename to tests/ui/components/form/DarkButton.qml diff --git a/tests/ui/components/form/ExclusiveButtons.qml b/tests/ui/components/form/ExclusiveButtons.qml new file mode 100644 index 000000000..e039d71d3 --- /dev/null +++ b/tests/ui/components/form/ExclusiveButtons.qml @@ -0,0 +1,48 @@ +import QtQuick 2.7 + +// =================================================================== + +Row { + property alias text1: button1.text + property alias text2: button2.text + + property bool button1IsSelected: true + + signal buttonChanged (int button) + + spacing: 8 + + SmallButton { + anchors.verticalCenter: parent.verticalCenter + backgroundColor: button1IsSelected + ? '#8E8E8E' + : (button1.down + ? '#FE5E00' + : '#D1D1D1' + ) + id: button1 + onClicked: { + if (!button1IsSelected) { + button1IsSelected = true + buttonChanged(1) + } + } + } + + SmallButton { + anchors.verticalCenter: parent.verticalCenter + backgroundColor: !button1IsSelected + ? '#8E8E8E' + : (button2.down + ? '#FE5E00' + : '#D1D1D1' + ) + id: button2 + onClicked: { + if (button1IsSelected) { + button1IsSelected = false + buttonChanged(2) + } + } + } +} diff --git a/tests/ui/components/form/LightButton.qml b/tests/ui/components/form/LightButton.qml new file mode 100644 index 000000000..fe09cfff1 --- /dev/null +++ b/tests/ui/components/form/LightButton.qml @@ -0,0 +1,9 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +// =================================================================== + +DarkButton { + backgroundColor: '#D1D1D1' + textColor: '#5A585B' +} diff --git a/tests/ui/components/form/SmallButton.qml b/tests/ui/components/form/SmallButton.qml new file mode 100644 index 000000000..3205543f3 --- /dev/null +++ b/tests/ui/components/form/SmallButton.qml @@ -0,0 +1,24 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +// =================================================================== + +Button { + property alias backgroundColor: background.color + + background: Rectangle { + color: button.down ? '#FE5E00' : '#8E8E8E' + id: background + implicitHeight: 22 + radius: 10 + } + contentItem: Text { + color:'#FFFFFF' + font.pointSize: 8 + horizontalAlignment: Text.AlignHCenter + id: text + text: button.text + verticalAlignment: Text.AlignVCenter + } + id: button +} diff --git a/tests/ui/components/scrollBar/ForceScrollBar.qml b/tests/ui/components/scrollBar/ForceScrollBar.qml new file mode 100644 index 000000000..7a424d171 --- /dev/null +++ b/tests/ui/components/scrollBar/ForceScrollBar.qml @@ -0,0 +1,17 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +// =================================================================== + +ScrollBar { + background: Rectangle { + color: '#F4F4F4' + } + contentItem: Rectangle { + color: scrollBar.pressed ? '#5E5E5F' : '#C5C5C5' + implicitHeight: 100 + implicitWidth: 8 + radius: 10 + } + id: scrollBar +} diff --git a/tests/ui/views/mainWindow/home.qml b/tests/ui/views/mainWindow/home.qml index 303612033..ccd167bba 100644 --- a/tests/ui/views/mainWindow/home.qml +++ b/tests/ui/views/mainWindow/home.qml @@ -4,8 +4,6 @@ import QtQuick.Layouts 1.3 import 'qrc:/ui/components/form' -// =================================================================== - ColumnLayout { spacing: 0 @@ -32,10 +30,8 @@ ColumnLayout { font.pointSize: 11 } - DialogButton { - backgroundColor: '#D1D1D1' + LightButton { text: qsTr('invitContact') - textColor: '#5A585B' } } @@ -50,10 +46,8 @@ ColumnLayout { font.pointSize: 11 } - DialogButton { - backgroundColor: '#D1D1D1' + LightButton { text: qsTr('addContact') - textColor: '#5A585B' } } } diff --git a/tests/ui/views/mainWindow/mainWindow.qml b/tests/ui/views/mainWindow/mainWindow.qml index 0eac26d30..c82acca78 100644 --- a/tests/ui/views/mainWindow/mainWindow.qml +++ b/tests/ui/views/mainWindow/mainWindow.qml @@ -2,6 +2,7 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 +import 'qrc:/ui/components/collapse' import 'qrc:/ui/components/form' import 'qrc:/ui/components/misc' @@ -59,7 +60,7 @@ ApplicationWindow { // User actions. ToolBarButton { onClicked: { - var component = Qt.createComponent('qrc:/ui/views/newCall.qml'); + var component = Qt.createComponent('qrc:/ui/views/manageAccounts.qml'); if (component.status !== Component.Ready) { console.debug('Window not ready.') if(component.status === Component.Error) { @@ -141,7 +142,7 @@ ApplicationWindow { Loader { Layout.fillHeight: true Layout.fillWidth: true - source: 'qrc:/ui/views/mainWindow/home.qml' + source: 'qrc:/ui/views/mainWindow/searchContact.qml' } } } diff --git a/tests/ui/views/mainWindow/searchContact.qml b/tests/ui/views/mainWindow/searchContact.qml new file mode 100644 index 000000000..ebe83e04e --- /dev/null +++ b/tests/ui/views/mainWindow/searchContact.qml @@ -0,0 +1,217 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 +import QtQuick.Layouts 1.3 + +import 'qrc:/ui/components/contact' +import 'qrc:/ui/components/form' +import 'qrc:/ui/components/scrollBar' + +ColumnLayout { + spacing: 2 + + // Search bar. + Item { + Layout.fillWidth: true + Layout.preferredHeight: 50 + anchors.left: parent.left + anchors.leftMargin: 18 + anchors.right: parent.right + anchors.rightMargin: 18 + + RowLayout { + anchors.verticalCenter: parent.verticalCenter + height: 30 + spacing: 20 + width: parent.width + + TextField { + Layout.fillWidth: true + Layout.preferredHeight: parent.height + background: Rectangle { + color: '#EAEAEA' + } + placeholderText: qsTr('searchContactPlaceholder') + } + + ExclusiveButtons { + Layout.preferredHeight: parent.height + text1: qsTr('selectAllContacts') + text2: qsTr('selectConnectedContacts') + } + + LightButton { + Layout.preferredHeight: parent.height + text: qsTr('addContact') + } + } + } + + // Contacts list. + Rectangle { + Layout.fillWidth: true + Layout.fillHeight: true + color: '#F5F5F5' + + ListView { + ScrollBar.vertical: ForceScrollBar { } + anchors.fill: parent + boundsBehavior: Flickable.StopAtBounds + clip: true + highlightRangeMode: ListView.ApplyRange + spacing: 1 + + // TODO: Remove, use C++ model instead. + model: ListModel { + ListElement { + $image: '' + $presence: 'connected' + $username: 'Isabella Ahornton' + } + ListElement { + $image: '' + $presence: 'connected' + $username: 'Mary Boreno' + } + ListElement { + $image: '' + $presence: 'disconnected' + $username: 'Cecelia Cyler' + } + ListElement { + $image: '' + $presence: 'absent' + $username: 'Daniel Elliott' + } + ListElement { + $image: '' + $presence: 'do_not_disturb' + $username: 'Effie Forton' + } + ListElement { + $image: '' + $presence: 'do_not_disturb' + $username: 'Agnes Hurner' + } + ListElement { + $image: '' + $presence: 'disconnected' + $username: 'Luke Leming' + } + ListElement { + $image: '' + $presence: 'connected' + $username: 'Olga Manning' + } + ListElement { + $image: '' + $presence: 'connected' + $username: 'Isabella Ahornton' + } + ListElement { + $image: '' + $presence: 'connected' + $username: 'Mary Boreno' + } + ListElement { + $image: '' + $presence: 'disconnected' + $username: 'Cecelia Cyler' + } + ListElement { + $image: '' + $presence: 'absent' + $username: 'Daniel Elliott' + } + ListElement { + $image: '' + $presence: 'do_not_disturb' + $username: 'Effie Forton' + } + ListElement { + $image: '' + $presence: 'do_not_disturb' + $username: 'Agnes Hurner' + } + ListElement { + $image: '' + $presence: 'disconnected' + $username: 'Luke Leming' + } + ListElement { + $image: '' + $presence: 'connected' + $username: 'Olga Manning' + } + } + delegate: Rectangle { + color: '#FFFFFF' + height: 50 + id: contact + width: parent.width + + Item { + anchors.verticalCenter: parent.verticalCenter + height: 30 + width: parent.width + + RowLayout { + anchors.fill: parent + anchors.leftMargin: 15 + anchors.rightMargin: 15 + spacing: 15 + + // Avatar. + Avatar { + Layout.fillHeight: parent.height + Layout.preferredWidth: 30 + image: $image + username: $username + } + + // Presence. + Item { + Layout.fillHeight: parent.height + Layout.preferredWidth: 20 + + Image { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: 'qrc:/imgs/led_' + $presence + '.svg' + } + } + + // Username. + Item { + Layout.fillHeight: parent.height + Layout.fillWidth: true + + Text { + anchors.fill: parent + clip: true + color: '#5A585B' + font.weight: Font.DemiBold + text: $username + verticalAlignment: Text.AlignVCenter + + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: contact.state = 'hover' + onExited: contact.state = '' + } + } + } + + // Actions. + // TODO. + } + } + + states: State { + name: 'hover' + PropertyChanges { target: contact; color: '#D1D1D1' } + } + } + } + } +} diff --git a/tests/ui/views/manageAccounts.qml b/tests/ui/views/manageAccounts.qml index 80d79c792..bacc8dda2 100644 --- a/tests/ui/views/manageAccounts.qml +++ b/tests/ui/views/manageAccounts.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts 1.3 import 'qrc:/ui/components/dialog' import 'qrc:/ui/components/form' +import 'qrc:/ui/components/scrollBar' DialogPlus { descriptionText: qsTr('manageAccountsDescription') @@ -11,7 +12,7 @@ DialogPlus { minimumWidth: 480 title: qsTr('manageAccountsTitle') - buttons: DialogButton { + buttons: DarkButton { text: qsTr('validate') } @@ -20,6 +21,7 @@ DialogPlus { anchors.fill: parent ListView { + ScrollBar.vertical: ForceScrollBar { } anchors.fill: parent boundsBehavior: Flickable.StopAtBounds clip: true diff --git a/tests/ui/views/newCall.qml b/tests/ui/views/newCall.qml index 65157beaa..18d673459 100644 --- a/tests/ui/views/newCall.qml +++ b/tests/ui/views/newCall.qml @@ -11,7 +11,7 @@ DialogPlus { minimumWidth: 420 title: qsTr('newCallTitle') - buttons: DialogButton { + buttons: DarkButton { text: qsTr('cancel') }