diff --git a/tests/assets/ressources_svg/chat_over.svg b/tests/assets/images/chat_hovered.svg similarity index 100% rename from tests/assets/ressources_svg/chat_over.svg rename to tests/assets/images/chat_hovered.svg diff --git a/tests/assets/ressources_svg/chat_default.svg b/tests/assets/images/chat_normal.svg similarity index 100% rename from tests/assets/ressources_svg/chat_default.svg rename to tests/assets/images/chat_normal.svg diff --git a/tests/assets/ressources_svg/chat_clic.svg b/tests/assets/images/chat_pressed.svg similarity index 100% rename from tests/assets/ressources_svg/chat_clic.svg rename to tests/assets/images/chat_pressed.svg diff --git a/tests/assets/images/delete_hovered.svg b/tests/assets/images/delete_hovered.svg new file mode 100644 index 000000000..160c078f1 --- /dev/null +++ b/tests/assets/images/delete_hovered.svg @@ -0,0 +1,12 @@ + + + + delete_over + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/delete_normal.svg b/tests/assets/images/delete_normal.svg new file mode 100644 index 000000000..3d89ea2f2 --- /dev/null +++ b/tests/assets/images/delete_normal.svg @@ -0,0 +1,12 @@ + + + + delete_default + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/delete_pressed.svg b/tests/assets/images/delete_pressed.svg new file mode 100644 index 000000000..63ea6aae0 --- /dev/null +++ b/tests/assets/images/delete_pressed.svg @@ -0,0 +1,12 @@ + + + + delete_clic + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/images/filter.svg b/tests/assets/images/filter.svg new file mode 100644 index 000000000..5f7298388 --- /dev/null +++ b/tests/assets/images/filter.svg @@ -0,0 +1,12 @@ + + + + filter + Created with Sketch. + + + + + + + \ No newline at end of file diff --git a/tests/assets/old_images/led_green.svg b/tests/assets/old_images/led_green.svg deleted file mode 100644 index 5c13ec21b..000000000 --- a/tests/assets/old_images/led_green.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - led_connected - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/led_orange.svg b/tests/assets/old_images/led_orange.svg deleted file mode 100644 index 0cbbd5b8b..000000000 --- a/tests/assets/old_images/led_orange.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - led_inprogress - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/led_red.svg b/tests/assets/old_images/led_red.svg deleted file mode 100644 index 91a4459bc..000000000 --- a/tests/assets/old_images/led_red.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - led_error - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/assets/old_images/led_white.svg b/tests/assets/old_images/led_white.svg deleted file mode 100644 index f9bae679f..000000000 --- a/tests/assets/old_images/led_white.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - led_disconnected - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file diff --git a/tests/resources.qrc b/tests/resources.qrc index a6cde16e8..02afa3054 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -5,6 +5,9 @@ assets/images/call_hovered.svg assets/images/call_normal.svg assets/images/call_pressed.svg + assets/images/chat_hovered.svg + assets/images/chat_normal.svg + assets/images/chat_pressed.svg assets/images/chevron_green.svg assets/images/chevron_orange.svg assets/images/chevron_red.svg @@ -12,6 +15,10 @@ assets/images/collapse.svg assets/images/contact_normal.svg assets/images/contact_selected.svg + assets/images/delete_hovered.svg + assets/images/delete_normal.svg + assets/images/delete_pressed.svg + assets/images/filter.svg assets/images/history.svg assets/images/home_normal.svg assets/images/home_selected.svg @@ -39,10 +46,6 @@ assets/old_images/history.svg assets/old_images/home.svg assets/old_images/incoming_call.svg - assets/old_images/led_green.svg - assets/old_images/led_orange.svg - assets/old_images/led_red.svg - assets/old_images/led_white.svg assets/old_images/lost_incoming_call.svg assets/old_images/lost_outgoing_call.svg assets/old_images/micro.svg @@ -52,9 +55,6 @@ assets/ressources_svg/avatar_L.svg assets/ressources_svg/avatar_s.svg assets/ressources_svg/avatar_xs.svg - assets/ressources_svg/chat_clic.svg - assets/ressources_svg/chat_default.svg - assets/ressources_svg/chat_over.svg ui/modules/Common/Animations/CaterpillarAnimation.qml ui/modules/Common/Borders.qml ui/modules/Common/Collapse.qml @@ -74,6 +74,7 @@ ui/modules/Common/Form/SmallButton.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/Image/Icon.qml ui/modules/Common/Image/RoundedImage.qml @@ -102,6 +103,7 @@ ui/modules/Common/Styles/Form/SmallButtonStyle.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/Menu/ActionMenuStyle.qml ui/modules/Common/Styles/Menu/MenuStyle.qml @@ -144,6 +146,7 @@ ui/views/App/ManageAccounts.qml ui/views/App/NewCall.qml ui/views/App/qmldir + ui/views/App/Styles/MainWindow/ContactsStyle.qml ui/views/App/Styles/MainWindow/MainWindowStyle.qml ui/views/App/Styles/qmldir diff --git a/tests/ui/modules/Common/Collapse.qml b/tests/ui/modules/Common/Collapse.qml index 888bb1122..9050c6196 100644 --- a/tests/ui/modules/Common/Collapse.qml +++ b/tests/ui/modules/Common/Collapse.qml @@ -32,7 +32,6 @@ Item { id: button anchors.centerIn: parent - background: CollapseStyle.background icon: 'collapse' iconSize: CollapseStyle.iconSize useStates: false diff --git a/tests/ui/modules/Common/Colors.qml b/tests/ui/modules/Common/Colors.qml index 7593d2968..24ef1b049 100644 --- a/tests/ui/modules/Common/Colors.qml +++ b/tests/ui/modules/Common/Colors.qml @@ -23,9 +23,7 @@ QtObject { property color r: '#8F8F8F' - property color s: '#D64D00' - property color t: '#FF8600' // ----------------------------------------------------------------- // OK. @@ -41,6 +39,8 @@ QtObject { property color j75: '#BF4B5964' property color k: '#FFFFFF' property color k50: '#32FFFFFF' + property color s: '#D64D00' + property color t: '#FF8600' property color u: '#B1B1B1' property color v: '#E2E2E2' } diff --git a/tests/ui/modules/Common/Form/TextField.qml b/tests/ui/modules/Common/Form/TextField.qml new file mode 100644 index 000000000..5620266a4 --- /dev/null +++ b/tests/ui/modules/Common/Form/TextField.qml @@ -0,0 +1,38 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 as Controls + +import Common 1.0 +import Common.Styles 1.0 + +// =================================================================== + +Controls.TextField { + property string icon + + background: Rectangle { + border { + color: TextFieldStyle.background.border.color + width: TextFieldStyle.background.border.width + } + color: TextFieldStyle.background.color + implicitHeight: TextFieldStyle.background.height + + radius: TextFieldStyle.background.radius + } + + color: TextFieldStyle.text.color + font.pointSize: TextFieldStyle.text.fontSize + + Icon { + id: icon + + anchors { + right: parent.right + rightMargin: parent.rightPadding + verticalCenter: parent.verticalCenter + } + + iconSize: parent.contentHeight + visible: !parent.text + } +} diff --git a/tests/ui/modules/Common/Image/Icon.qml b/tests/ui/modules/Common/Image/Icon.qml index fb25c88be..f3eff62f4 100644 --- a/tests/ui/modules/Common/Image/Icon.qml +++ b/tests/ui/modules/Common/Image/Icon.qml @@ -17,4 +17,7 @@ Image { source: icon ? Constants.imagesPath + icon + Constants.imagesFormat : '' + + // Warning: Perfomance cost. + mipmap: true } diff --git a/tests/ui/modules/Common/SearchBox.qml b/tests/ui/modules/Common/SearchBox.qml index 0b9825928..54778523a 100644 --- a/tests/ui/modules/Common/SearchBox.qml +++ b/tests/ui/modules/Common/SearchBox.qml @@ -1,6 +1,6 @@ import QtQuick 2.7 -import QtQuick.Controls 2.0 +import Common 1.0 import Common.Styles 1.0 import Utils 1.0 @@ -68,27 +68,13 @@ Item { TextField { id: searchField - background: SearchBoxStyle.searchFieldBackground - color: SearchBoxStyle.text.color - font.pointSize: SearchBoxStyle.text.fontSize + icon: 'search' width: parent.width Keys.onEscapePressed: searchBox.hideMenu() onActiveFocusChanged: activeFocus && searchBox.showMenu() onTextChanged: _filter() - - Icon { - anchors { - right: parent.right - rightMargin: parent.rightPadding - verticalCenter: parent.verticalCenter - } - - icon: 'search' - iconSize: parent.contentHeight - visible: !parent.text - } } // Wrap the search box menu in a window. diff --git a/tests/ui/modules/Common/Styles/CollapseStyle.qml b/tests/ui/modules/Common/Styles/CollapseStyle.qml index ad033335b..0c1193486 100644 --- a/tests/ui/modules/Common/Styles/CollapseStyle.qml +++ b/tests/ui/modules/Common/Styles/CollapseStyle.qml @@ -6,10 +6,4 @@ import QtQuick 2.7 QtObject { property int animationDuration: 200 property int iconSize: 14 - - property Rectangle background: Rectangle { - // Do not use `Colors` singleton. - // Collapse uses an icon without background color. - color: 'transparent' - } } diff --git a/tests/ui/modules/Common/Styles/ForceScrollBarStyle.qml b/tests/ui/modules/Common/Styles/ForceScrollBarStyle.qml index 2e8042ce9..f9d3d32d1 100644 --- a/tests/ui/modules/Common/Styles/ForceScrollBarStyle.qml +++ b/tests/ui/modules/Common/Styles/ForceScrollBarStyle.qml @@ -8,10 +8,10 @@ import Common 1.0 QtObject { property color backgroundColor: Colors.g20 - property Rectangle contentItem: Rectangle { - implicitHeight: 100 - implicitWidth: 8 - radius: 10 + property QtObject contentItem: QtObject { + property int implicitHeight: 100 + property int implicitWidth: 8 + property int radius: 10 } property QtObject color: QtObject { diff --git a/tests/ui/modules/Common/Styles/Form/TextButtonBStyle.qml b/tests/ui/modules/Common/Styles/Form/TextButtonBStyle.qml index e4e6d3460..25ae38053 100644 --- a/tests/ui/modules/Common/Styles/Form/TextButtonBStyle.qml +++ b/tests/ui/modules/Common/Styles/Form/TextButtonBStyle.qml @@ -7,14 +7,14 @@ import Common 1.0 QtObject { property QtObject backgroundColor: QtObject { - property color hovered: Colors.p - property color normal: Colors.m - property color pressed: Colors.i + property color hovered: Colors.s + property color normal: Colors.i + property color pressed: Colors.t } property QtObject textColor: QtObject { - property color hovered: Colors.d - property color normal: Colors.d + property color hovered: Colors.k + property color normal: Colors.k property color pressed: Colors.k } } diff --git a/tests/ui/modules/Common/Styles/Form/TextFieldStyle.qml b/tests/ui/modules/Common/Styles/Form/TextFieldStyle.qml new file mode 100644 index 000000000..2c707ab62 --- /dev/null +++ b/tests/ui/modules/Common/Styles/Form/TextFieldStyle.qml @@ -0,0 +1,24 @@ +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 radius: 4 + + property QtObject border: QtObject { + property color color: '#CBCBCB' + property int width: 1 + } + } + + property QtObject text: QtObject { + property color color: Colors.d + property int fontSize: 10 + } +} diff --git a/tests/ui/modules/Common/Styles/SearchBoxStyle.qml b/tests/ui/modules/Common/Styles/SearchBoxStyle.qml index 45428bba8..199a908a7 100644 --- a/tests/ui/modules/Common/Styles/SearchBoxStyle.qml +++ b/tests/ui/modules/Common/Styles/SearchBoxStyle.qml @@ -7,20 +7,4 @@ import Common 1.0 QtObject { property color shadowColor: Colors.f - - property Rectangle searchFieldBackground: Rectangle { - implicitHeight: 40 - - border { - color: '#CBCBCB' - width: 1 - } - - radius: 4 - } - - property QtObject text: QtObject { - property color color: Colors.d - property int fontSize: 11 - } } diff --git a/tests/ui/modules/Common/Styles/qmldir b/tests/ui/modules/Common/Styles/qmldir index c8557336f..03ed2d3f5 100644 --- a/tests/ui/modules/Common/Styles/qmldir +++ b/tests/ui/modules/Common/Styles/qmldir @@ -22,6 +22,7 @@ singleton ListFormStyle 1.0 Form/ListFormStyle.qml singleton SmallButtonStyle 1.0 Form/SmallButtonStyle.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 ActionMenuStyle 1.0 Menu/ActionMenuStyle.qml diff --git a/tests/ui/modules/Common/qmldir b/tests/ui/modules/Common/qmldir index c097b1f51..988596b68 100644 --- a/tests/ui/modules/Common/qmldir +++ b/tests/ui/modules/Common/qmldir @@ -39,6 +39,7 @@ LightButton 1.0 Form/LightButton.qml ListForm 1.0 Form/ListForm.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 # Image diff --git a/tests/ui/modules/Linphone/PresenceLevel.qml b/tests/ui/modules/Linphone/PresenceLevel.qml index 1fa84b702..ffa7c562f 100644 --- a/tests/ui/modules/Linphone/PresenceLevel.qml +++ b/tests/ui/modules/Linphone/PresenceLevel.qml @@ -11,7 +11,7 @@ Item { property string icon: 'led' Icon { - anchors.fill:parent + anchors.fill: parent function _getColorString () { if (level === Presence.Green) { diff --git a/tests/ui/modules/Linphone/Timeline.qml b/tests/ui/modules/Linphone/Timeline.qml index 49b3287c2..75020affd 100644 --- a/tests/ui/modules/Linphone/Timeline.qml +++ b/tests/ui/modules/Linphone/Timeline.qml @@ -7,8 +7,12 @@ import Linphone.Styles 1.0 // =================================================================== ColumnLayout { + id: timeline + property alias model: view.model + signal clicked (var contact) + spacing: 0 Rectangle { @@ -48,13 +52,27 @@ ColumnLayout { Layout.fillHeight: true Layout.fillWidth: true - delegate: Contact { - color: index % 2 == 0 - ? TimelineStyle.contact.colorA - : TimelineStyle.contact.colorB - contact: $contact + delegate: Item { height: TimelineStyle.contact.height width: parent.width + + Contact { + anchors.fill: parent + color: index % 2 == 0 + ? TimelineStyle.contact.colorA + : TimelineStyle.contact.colorB + contact: $contact + } + + MouseArea { + anchors.fill: parent + cursorShape: containsMouse + ? Qt.PointingHandCursor + : Qt.ArrowCursor + hoverEnabled: true + + onClicked: timeline.clicked($contact) + } } } } diff --git a/tests/ui/views/App/MainWindow/Contacts.qml b/tests/ui/views/App/MainWindow/Contacts.qml index c6719698a..0dc14d3a5 100644 --- a/tests/ui/views/App/MainWindow/Contacts.qml +++ b/tests/ui/views/App/MainWindow/Contacts.qml @@ -1,36 +1,37 @@ import QtQuick 2.7 -import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 import Common 1.0 import Linphone 1.0 import Utils 1.0 -ColumnLayout { - spacing: 2 +import App.Styles 1.0 - // Search bar. - Item { +// =================================================================== + +ColumnLayout { + spacing: 0 + + // ----------------------------------------------------------------- + // Search Bar & actions. + // ----------------------------------------------------------------- + + Rectangle { Layout.fillWidth: true - Layout.preferredHeight: 50 - anchors.left: parent.left - anchors.leftMargin: 18 - anchors.right: parent.right - anchors.rightMargin: 18 + Layout.preferredHeight: ContactsStyle.bar.height + + color: ContactsStyle.bar.color RowLayout { - anchors.verticalCenter: parent.verticalCenter - height: 30 - spacing: 20 - width: parent.width + anchors.fill: parent + anchors.leftMargin: ContactsStyle.bar.leftMargin + anchors.rightMargin: ContactsStyle.bar.rightMargin + + spacing: 20 - // TODO: Replace by top-level component. TextField { Layout.fillWidth: true - background: Rectangle { - color: '#EAEAEA' - implicitHeight: 30 - } + icon: 'filter' placeholderText: qsTr('searchContactPlaceholder') onTextChanged: { @@ -50,21 +51,23 @@ ColumnLayout { TextButtonB { text: qsTr('addContact') - onClicked: window.setView('Contact') } } } + // ----------------------------------------------------------------- // Contacts list. + // ----------------------------------------------------------------- + Rectangle { Layout.fillWidth: true Layout.fillHeight: true - color: '#F5F5F5' + color: ContactsStyle.backgroundColor ScrollableListView { anchors.fill: parent - spacing: 2 + spacing: ContactsStyle.contacts.spacing model: ContactsListModel { id: contacts @@ -138,16 +141,17 @@ ColumnLayout { iconSize: parent.height ActionButton { - icon: 'cam' + icon: 'video_call' + onClicked: CallsWindow.show() } ActionButton { icon: 'call' + onClicked: CallsWindow.show() } ActionButton { icon: 'chat' - onClicked: window.setView('Conversation') } } diff --git a/tests/ui/views/App/MainWindow/MainWindow.qml b/tests/ui/views/App/MainWindow/MainWindow.qml index 7f03b25c8..52209e672 100644 --- a/tests/ui/views/App/MainWindow/MainWindow.qml +++ b/tests/ui/views/App/MainWindow/MainWindow.qml @@ -151,6 +151,8 @@ ApplicationWindow { Layout.fillHeight: true Layout.fillWidth: true model: ContactsListModel {} // Use History list. + + onClicked: setView('Conversation') } } diff --git a/tests/ui/views/App/Styles/MainWindow/ContactsStyle.qml b/tests/ui/views/App/Styles/MainWindow/ContactsStyle.qml new file mode 100644 index 000000000..c2d25cdfc --- /dev/null +++ b/tests/ui/views/App/Styles/MainWindow/ContactsStyle.qml @@ -0,0 +1,21 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// =================================================================== + +QtObject { + property color backgroundColor: '#FFFFFF' + + property QtObject bar: QtObject { + property color color: '#F3F3F3' + property int height: 60 + property int leftMargin: 18 + property int rightMargin: 18 + } + + property QtObject contacts: QtObject { + property int spacing: 1 + } +} diff --git a/tests/ui/views/App/Styles/qmldir b/tests/ui/views/App/Styles/qmldir index f780f1551..f131e7626 100644 --- a/tests/ui/views/App/Styles/qmldir +++ b/tests/ui/views/App/Styles/qmldir @@ -4,4 +4,5 @@ module App.Styles # Views styles ------------------------------------------------------- +singleton ContactsStyle 1.0 MainWindow/ContactsStyle.qml singleton MainWindowStyle 1.0 MainWindow/MainWindowStyle.qml