From a2efc6fa5518c164ed623600a9cf242b0037900f Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 14 Sep 2016 14:10:55 +0200 Subject: [PATCH] fix(app): refactoring --- tests/imgs/{phone.svg => call.svg} | 0 tests/imgs/{camera.svg => cam.svg} | 0 .../{start_conference.svg => conference.svg} | 0 tests/imgs/{avatar.svg => contact.svg} | 0 tests/imgs/delete.svg | 17 ++++ tests/resources.qrc | 85 +++++++++---------- tests/ui/components/collapse/Collapse.qml | 2 +- tests/ui/components/contact/Avatar.qml | 14 ++- tests/ui/components/contact/Contact.qml | 43 ++++++++++ .../contact/ShortContactDescription.qml | 8 +- .../components/dialog/DialogDescription.qml | 1 - tests/ui/components/dialog/DialogPlus.qml | 2 +- tests/ui/components/form/ActionBar.qml | 10 +++ tests/ui/components/form/ActionButton.qml | 22 +++++ tests/ui/components/form/CheckBoxText.qml | 16 ++-- tests/ui/components/form/ExclusiveButtons.qml | 6 +- tests/ui/components/form/LightButton.qml | 1 - tests/ui/components/form/SmallButton.qml | 8 +- tests/ui/components/form/ToolBarButton.qml | 14 --- .../components/form/TransparentComboBox.qml | 9 +- tests/ui/components/misc/Contact.qml | 75 ---------------- tests/ui/components/misc/MenuEntry.qml | 2 + tests/ui/components/select/SelectContact.qml | 18 +++- tests/ui/views/mainWindow/conversation.qml | 38 ++++----- tests/ui/views/mainWindow/mainWindow.qml | 50 ++++++----- tests/ui/views/manageAccounts.qml | 1 - 26 files changed, 229 insertions(+), 213 deletions(-) rename tests/imgs/{phone.svg => call.svg} (100%) rename tests/imgs/{camera.svg => cam.svg} (100%) rename tests/imgs/{start_conference.svg => conference.svg} (100%) rename tests/imgs/{avatar.svg => contact.svg} (100%) create mode 100644 tests/imgs/delete.svg create mode 100644 tests/ui/components/contact/Contact.qml create mode 100644 tests/ui/components/form/ActionBar.qml create mode 100644 tests/ui/components/form/ActionButton.qml delete mode 100644 tests/ui/components/form/ToolBarButton.qml delete mode 100644 tests/ui/components/misc/Contact.qml diff --git a/tests/imgs/phone.svg b/tests/imgs/call.svg similarity index 100% rename from tests/imgs/phone.svg rename to tests/imgs/call.svg diff --git a/tests/imgs/camera.svg b/tests/imgs/cam.svg similarity index 100% rename from tests/imgs/camera.svg rename to tests/imgs/cam.svg diff --git a/tests/imgs/start_conference.svg b/tests/imgs/conference.svg similarity index 100% rename from tests/imgs/start_conference.svg rename to tests/imgs/conference.svg diff --git a/tests/imgs/avatar.svg b/tests/imgs/contact.svg similarity index 100% rename from tests/imgs/avatar.svg rename to tests/imgs/contact.svg diff --git a/tests/imgs/delete.svg b/tests/imgs/delete.svg new file mode 100644 index 000000000..51b051ac0 --- /dev/null +++ b/tests/imgs/delete.svg @@ -0,0 +1,17 @@ + + + + delete + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/tests/resources.qrc b/tests/resources.qrc index 8151ca2f0..009368127 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -1,47 +1,42 @@ - - - languages/en.qm - languages/fr.qm - - - ui/components/collapse/Collapse.qml - ui/components/contact/Avatar.qml - ui/components/contact/ShortContactDescription.qml - ui/components/dialog/DialogDescription.qml - ui/components/dialog/DialogPlus.qml - ui/components/form/DarkButton.qml - ui/components/form/CheckBoxText.qml - ui/components/form/DropZone.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/contacts.qml - ui/views/mainWindow/conversation.qml - ui/views/mainWindow/home.qml - ui/views/mainWindow/mainWindow.qml - ui/views/manageAccounts.qml - ui/views/newCall.qml - - - imgs/avatar.svg - imgs/camera.svg - imgs/chat_attachment.svg - imgs/collapse.svg - imgs/led_absent.svg - imgs/led_connected.svg - imgs/led_disconnected.svg - imgs/led_do_not_disturb.svg - imgs/phone.svg - imgs/start_conference.svg - imgs/valid.svg - + + languages/fr.qm + languages/en.qm + ui/components/scrollBar/ForceScrollBar.qml + ui/components/misc/MenuEntry.qml + ui/components/select/SelectContact.qml + ui/components/collapse/Collapse.qml + ui/components/contact/Contact.qml + ui/components/contact/ShortContactDescription.qml + ui/components/contact/Avatar.qml + ui/components/dialog/DialogDescription.qml + ui/components/dialog/DialogPlus.qml + ui/components/form/CheckBoxText.qml + ui/components/form/DropZone.qml + ui/components/form/LightButton.qml + ui/components/form/ExclusiveButtons.qml + ui/components/form/ActionBar.qml + ui/components/form/ActionButton.qml + ui/components/form/TransparentComboBox.qml + ui/components/form/SmallButton.qml + ui/components/form/DarkButton.qml + ui/views/newCall.qml + ui/views/manageAccounts.qml + ui/views/mainWindow/mainWindow.qml + ui/views/mainWindow/contacts.qml + ui/views/mainWindow/home.qml + ui/views/mainWindow/conversation.qml + imgs/led_disconnected.svg + imgs/valid.svg + imgs/led_do_not_disturb.svg + imgs/conference.svg + imgs/cam.svg + imgs/chat_attachment.svg + imgs/led_connected.svg + imgs/led_absent.svg + imgs/call.svg + imgs/collapse.svg + imgs/delete.svg + imgs/contact.svg + diff --git a/tests/ui/components/collapse/Collapse.qml b/tests/ui/components/collapse/Collapse.qml index d6e2bd9b9..37a132153 100644 --- a/tests/ui/components/collapse/Collapse.qml +++ b/tests/ui/components/collapse/Collapse.qml @@ -4,7 +4,6 @@ import QtQuick 2.7 Item { property bool enabled: false - property alias image: backgroundImage.source signal collapsed (bool collapsed) @@ -18,6 +17,7 @@ Item { anchors.fill: parent fillMode: Image.PreserveAspectFit id: backgroundImage + source: 'qrc:/imgs/collapse.svg' MouseArea { anchors.fill: parent diff --git a/tests/ui/components/contact/Avatar.qml b/tests/ui/components/contact/Avatar.qml index fa07c0385..4c0bd6db2 100644 --- a/tests/ui/components/contact/Avatar.qml +++ b/tests/ui/components/contact/Avatar.qml @@ -1,5 +1,5 @@ import QtQuick 2.7 -import QtGraphicalEffects 1.0 +import QtGraphicalEffects 1.0 // OpacityMask. // =================================================================== @@ -44,8 +44,8 @@ Item { // Avatar. OpacityMask { anchors.fill: imageToFilter - source: imageToFilter maskSource: avatar + source: imageToFilter } // Presence. @@ -55,13 +55,9 @@ Item { fillMode: Image.PreserveAspectFit height: parent.height/ 3 id: presenceImage - source: (function () { - if (!presence) { - return '' - } - - return 'qrc:/imgs/led_' + presence + '.svg' - })() + source: presence + ? 'qrc:/imgs/led_' + presence + '.svg' + : '' width: parent.width / 3 } } diff --git a/tests/ui/components/contact/Contact.qml b/tests/ui/components/contact/Contact.qml new file mode 100644 index 000000000..6ea1e0c82 --- /dev/null +++ b/tests/ui/components/contact/Contact.qml @@ -0,0 +1,43 @@ +import QtQuick 2.7 +import QtQuick.Layouts 1.3 + +import 'qrc:/ui/components/form' + +// =================================================================== + +Item { + property alias actions: actionBar.data + property alias image: avatar.image + property alias presence: avatar.presence + property alias sipAddress: contactDescription.sipAddress + property string username + + id: contact + height: 50 + + RowLayout { + anchors.fill: parent + anchors.leftMargin: 14 + anchors.rightMargin: 14 + spacing: 14 + + Avatar { + Layout.preferredHeight: 32 + Layout.preferredWidth: 32 + id: avatar + username: contact.username + } + + ShortContactDescription { + Layout.fillHeight: true + Layout.fillWidth: true + id: contactDescription + username: contact.username + } + + ActionBar { + Layout.preferredHeight: 32 + id: actionBar + } + } +} diff --git a/tests/ui/components/contact/ShortContactDescription.qml b/tests/ui/components/contact/ShortContactDescription.qml index c4564f8b0..3728dc195 100644 --- a/tests/ui/components/contact/ShortContactDescription.qml +++ b/tests/ui/components/contact/ShortContactDescription.qml @@ -3,8 +3,8 @@ import QtQuick 2.7 // =================================================================== Column { - property string sipAddress - property string username + property alias sipAddress: sipAddress.text + property alias username: username.text // Username. Text { @@ -13,7 +13,7 @@ Column { font.pointSize: 11 font.weight: Font.DemiBold height: parent.height / 2 - text: username + id: username verticalAlignment: Text.AlignBottom width: parent.width } @@ -23,7 +23,7 @@ Column { clip: true color: '#5A585B' height: parent.height / 2 - text: sipAddress + id: sipAddress verticalAlignment: Text.AlignTop width: parent.width } diff --git a/tests/ui/components/dialog/DialogDescription.qml b/tests/ui/components/dialog/DialogDescription.qml index 37f9470c9..84b4f9888 100644 --- a/tests/ui/components/dialog/DialogDescription.qml +++ b/tests/ui/components/dialog/DialogDescription.qml @@ -5,7 +5,6 @@ import QtQuick 2.7 // =================================================================== Item { - property alias fontSize: description.font.pointSize property alias text: description.text height: text ? 90 : 25 diff --git a/tests/ui/components/dialog/DialogPlus.qml b/tests/ui/components/dialog/DialogPlus.qml index e1e20b422..15df4939b 100644 --- a/tests/ui/components/dialog/DialogPlus.qml +++ b/tests/ui/components/dialog/DialogPlus.qml @@ -7,7 +7,7 @@ import QtQuick.Window 2.2 // =================================================================== Window { - default property alias contents: content.data // Required. + default property alias content: content.data // Required. property alias buttons: buttons.data // Required. property alias descriptionText: description.text // Optionnal. diff --git a/tests/ui/components/form/ActionBar.qml b/tests/ui/components/form/ActionBar.qml new file mode 100644 index 000000000..64ad659b0 --- /dev/null +++ b/tests/ui/components/form/ActionBar.qml @@ -0,0 +1,10 @@ +import QtQuick 2.7 + +// =================================================================== +// Bar which can contains ActionButton. +// =================================================================== + +Row { + property int iconSize + spacing: 8 +} diff --git a/tests/ui/components/form/ActionButton.qml b/tests/ui/components/form/ActionButton.qml new file mode 100644 index 000000000..fd9304f7c --- /dev/null +++ b/tests/ui/components/form/ActionButton.qml @@ -0,0 +1,22 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +// =================================================================== +// An animated small button with an image. +// =================================================================== + +Button { + property int iconSize + property string icon + + // Ugly hack, use current size, ActionBar size, + // or other parent height. + height: iconSize || parent.iconSize || parent.height + width: iconSize || parent.iconSize || parent.height + + Image { + anchors.fill: parent + fillMode: Image.PreserveAspectFit + source: 'qrc:/imgs/' + parent.icon + '.svg' + } +} diff --git a/tests/ui/components/form/CheckBoxText.qml b/tests/ui/components/form/CheckBoxText.qml index 03951b59f..11e574dac 100644 --- a/tests/ui/components/form/CheckBoxText.qml +++ b/tests/ui/components/form/CheckBoxText.qml @@ -6,6 +6,14 @@ import QtQuick.Controls 2.0 // =================================================================== CheckBox { + contentItem: Text { + color: checkBox.down ? '#FE5E00' : '#8E8E8E' + font: checkBox.font + horizontalAlignment: Text.AlignHCenter + leftPadding: checkBox.indicator.width + checkBox.spacing + text: checkBox.text + verticalAlignment: Text.AlignVCenter + } id: checkBox indicator: Rectangle { border.color: checkBox.down ? '#FE5E00' : '#8E8E8E' @@ -25,12 +33,4 @@ CheckBox { y: 4 } } - contentItem: Text { - color: checkBox.down ? '#FE5E00' : '#8E8E8E' - font: checkBox.font - horizontalAlignment: Text.AlignHCenter - leftPadding: checkBox.indicator.width + checkBox.spacing - text: checkBox.text - verticalAlignment: Text.AlignVCenter - } } diff --git a/tests/ui/components/form/ExclusiveButtons.qml b/tests/ui/components/form/ExclusiveButtons.qml index f4464137a..e48f14ed8 100644 --- a/tests/ui/components/form/ExclusiveButtons.qml +++ b/tests/ui/components/form/ExclusiveButtons.qml @@ -12,13 +12,17 @@ Row { Repeater { model: texts + SmallButton { anchors.verticalCenter: parent.verticalCenter backgroundColor: selectedButton === index ? '#8E8E8E' : (button.down ? '#FE5E00' - : '#D1D1D1' + : (button.hovered + ? '#C0C0C0' + : '#D1D1D1' + ) ) id: button text: modelData diff --git a/tests/ui/components/form/LightButton.qml b/tests/ui/components/form/LightButton.qml index fe09cfff1..b28dec65d 100644 --- a/tests/ui/components/form/LightButton.qml +++ b/tests/ui/components/form/LightButton.qml @@ -1,5 +1,4 @@ import QtQuick 2.7 -import QtQuick.Controls 2.0 // =================================================================== diff --git a/tests/ui/components/form/SmallButton.qml b/tests/ui/components/form/SmallButton.qml index 3205543f3..ef91d4fbe 100644 --- a/tests/ui/components/form/SmallButton.qml +++ b/tests/ui/components/form/SmallButton.qml @@ -7,7 +7,12 @@ Button { property alias backgroundColor: background.color background: Rectangle { - color: button.down ? '#FE5E00' : '#8E8E8E' + color: button.down + ? '#FE5E00' + : (button.hovered + ? '#C0C0C0' + : '#D1D1D1' + ) id: background implicitHeight: 22 radius: 10 @@ -20,5 +25,6 @@ Button { text: button.text verticalAlignment: Text.AlignVCenter } + hoverEnabled: true id: button } diff --git a/tests/ui/components/form/ToolBarButton.qml b/tests/ui/components/form/ToolBarButton.qml deleted file mode 100644 index 8e0cd07a4..000000000 --- a/tests/ui/components/form/ToolBarButton.qml +++ /dev/null @@ -1,14 +0,0 @@ -import QtQuick 2.7 -import QtQuick.Controls 2.0 - -// =================================================================== - -ToolButton { - property alias image: backgroundImage.source - - Image { - anchors.fill: parent - fillMode: Image.PreserveAspectFit - id: backgroundImage - } -} diff --git a/tests/ui/components/form/TransparentComboBox.qml b/tests/ui/components/form/TransparentComboBox.qml index 8f01bc8aa..4f612bf79 100644 --- a/tests/ui/components/form/TransparentComboBox.qml +++ b/tests/ui/components/form/TransparentComboBox.qml @@ -14,11 +14,10 @@ ComboBox { background: Rectangle { color: delegate.down ? '#FE5E00' - : ( - comboBox.currentIndex === index - ? '#F0F0F0' - : '#FFFFFF' - ) + : (comboBox.currentIndex === index + ? '#F0F0F0' + : '#FFFFFF' + ) opacity: enabled ? 1 : 0.3 } font.weight: comboBox.currentIndex === index diff --git a/tests/ui/components/misc/Contact.qml b/tests/ui/components/misc/Contact.qml deleted file mode 100644 index 1a4dceaed..000000000 --- a/tests/ui/components/misc/Contact.qml +++ /dev/null @@ -1,75 +0,0 @@ -import QtQuick 2.7 -import QtQuick.Layouts 1.3 - -Item { - property alias sipAddress: sipAddressText.text - property alias username: usernameText.text - property string avatar: 'qrc:/imgs/avatar.svg' // Default. - - id: contact - height: 50 - - RowLayout { - anchors.fill: parent - - // Avatar. - Image { - Layout.fillHeight: parent.height - Layout.margins: 5 - Layout.preferredWidth: 50 - fillMode: Image.PreserveAspectFit - id: avatarImage - source: contact.avatar - } - - // Sip address & username. - Column { - Layout.fillHeight: parent.height - Layout.fillWidth: true - - // Username. - Text { - clip: true - color: '#5A585B' - font.weight: Font.DemiBold - height: parent.height / 2 - id: usernameText - verticalAlignment: Text.AlignBottom - width: parent.width - } - - // Sip address. - Text { - clip: true - color: '#5A585B' - height: parent.height / 2 - id: sipAddressText - verticalAlignment: Text.AlignTop - width: parent.width - } - } - - // Actions. - Row { - Layout.fillHeight: parent.height - Layout.preferredWidth: 90 - Layout.margins: 10 - - // Call. - Image { - fillMode: Image.PreserveAspectFit - height: parent.height - source: 'qrc:/imgs/phone.svg' - width: parent.width / 2 - } - - // Camera. - Image { - fillMode: Image.PreserveAspectFit - height: parent.height - source: 'qrc:/imgs/camera.svg' - width: parent.width / 2 - } - } - } -} diff --git a/tests/ui/components/misc/MenuEntry.qml b/tests/ui/components/misc/MenuEntry.qml index f6ace3ae8..a97240029 100644 --- a/tests/ui/components/misc/MenuEntry.qml +++ b/tests/ui/components/misc/MenuEntry.qml @@ -13,6 +13,7 @@ Rectangle { spacing: 10 Image { + fillMode: Image.PreserveAspectFit height: parent.height width: 30 } @@ -26,6 +27,7 @@ Rectangle { } Image { + fillMode: Image.PreserveAspectFit height: parent.height } } diff --git a/tests/ui/components/select/SelectContact.qml b/tests/ui/components/select/SelectContact.qml index 65bec4e4a..7a469607f 100644 --- a/tests/ui/components/select/SelectContact.qml +++ b/tests/ui/components/select/SelectContact.qml @@ -2,12 +2,13 @@ import QtGraphicalEffects 1.0 import QtQuick 2.7 import QtQuick.Controls 2.0 -import 'qrc:/ui/components/misc' +import 'qrc:/ui/components/contact' +import 'qrc:/ui/components/form' // TODO: Contacts list. Item { function setPopupVisibility (visibility) { - popup.visible = popupShadow.visible = visibility + popup.visible = true } function filterContacts (text) { @@ -92,9 +93,22 @@ Item { } delegate: Contact { + presence: $presence sipAddress: $sipAddress username: $username width: parent.width + + actions: [ + ActionButton { + icon: 'call' + onClicked: console.log('clicked') + }, + + ActionButton { + icon: 'cam' + onClicked: console.log('cam clicked') + } + ] } } } diff --git a/tests/ui/views/mainWindow/conversation.qml b/tests/ui/views/mainWindow/conversation.qml index 379386345..9e77ab93d 100644 --- a/tests/ui/views/mainWindow/conversation.qml +++ b/tests/ui/views/mainWindow/conversation.qml @@ -48,40 +48,34 @@ ColumnLayout { height: parent.height * 0.40 width: parent.width - Row { - height: parent.height - spacing: 10 + ActionBar { + iconSize: 32 width: parent.width / 2 - Rectangle { - color: 'blue' - width: 32 - height: 32 + ActionButton { + icon: 'cam' + onClicked: console.log('clicked!!!') } - Rectangle { - color: 'red' - width: 32 - height: 32 + ActionButton { + icon: 'call' + onClicked: console.log('clicked!!!') } } - Row { - height: parent.height + ActionBar { + iconSize: 32 layoutDirection: Qt.RightToLeft - spacing: 10 width: parent.width / 2 - Rectangle { - color: 'green' - width: 32 - height: 32 + ActionButton { + icon: 'delete' + onClicked: console.log('clicked!!!') } - Rectangle { - color: 'orange' - width: 32 - height: 32 + ActionButton { + icon: 'contact' + onClicked: console.log('clicked!!!') } } } diff --git a/tests/ui/views/mainWindow/mainWindow.qml b/tests/ui/views/mainWindow/mainWindow.qml index 9090c1752..efa32fad9 100644 --- a/tests/ui/views/mainWindow/mainWindow.qml +++ b/tests/ui/views/mainWindow/mainWindow.qml @@ -8,6 +8,24 @@ import 'qrc:/ui/components/form' import 'qrc:/ui/components/misc' ApplicationWindow { + function openWindow (name) { + var component = Qt.createComponent('qrc:/ui/views/' + name + '.qml'); + if (component.status !== Component.Ready) { + console.debug('Window not ready.') + if(component.status === Component.Error) { + console.debug('Error:' + component.errorString()) + } + } else { + component.createObject(mainWindow).show() + } + } + + id: mainWindow + minimumHeight: 70 + minimumWidth: 780 + title: 'Linphone' + visible: true + header: ToolBar { background: Rectangle { color: '#EAEAEA' @@ -24,7 +42,6 @@ ApplicationWindow { Collapse { Layout.preferredWidth: 25 Layout.fillHeight: parent.height - image: 'qrc:/imgs/collapse.svg' onCollapsed: { mainWindow.height = collapsed ? 500 : 70 } @@ -39,18 +56,12 @@ ApplicationWindow { } // User actions. - ToolBarButton { - onClicked: { - var component = Qt.createComponent('qrc:/ui/views/manageAccounts.qml'); - if (component.status !== Component.Ready) { - console.debug('Window not ready.') - if(component.status === Component.Error) { - console.debug('Error:' + component.errorString()) - } - } else { - component.createObject(mainWindow).show() - } - } + ActionButton { + onClicked: openWindow('manageAccounts') + } + + ActionButton { + onClicked: openWindow('newCall') } // Search. @@ -68,18 +79,13 @@ ApplicationWindow { } // Start conference. - ToolBarButton { - Layout.fillHeight: parent.height + ActionButton { Layout.preferredWidth: 32 - image: 'qrc:/imgs/start_conference.svg' + Layout.preferredHeight: 32 + icon: 'conference' } } } - id: mainWindow - minimumHeight: 70 - minimumWidth: 780 - title: 'Linphone' - visible: true RowLayout { anchors.fill: parent @@ -123,7 +129,7 @@ ApplicationWindow { Loader { Layout.fillHeight: true Layout.fillWidth: true - source: 'qrc:/ui/views/mainWindow/conversation.qml' + source: 'qrc:/ui/views/mainWindow/contacts.qml' } } } diff --git a/tests/ui/views/manageAccounts.qml b/tests/ui/views/manageAccounts.qml index bacc8dda2..2070b1c4a 100644 --- a/tests/ui/views/manageAccounts.qml +++ b/tests/ui/views/manageAccounts.qml @@ -17,7 +17,6 @@ DialogPlus { } Item { - id: listViewContainer anchors.fill: parent ListView {