From 36a308b7f53a36c31bd86187fb93e30dc9b505ec Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 28 Dec 2016 13:42:54 +0100 Subject: [PATCH] feat(ui/modules/Linphone/SmartSearchBar): - it uses a style file - provide signals handlers --- tests/assets/languages/en.ts | 7 ++ tests/assets/languages/fr.ts | 7 ++ tests/resources.qrc | 2 + .../Common/Popup/DropDownDynamicMenu.qml | 7 +- tests/ui/modules/Common/SearchBox.qml | 3 +- tests/ui/modules/Linphone/SmartSearchBar.qml | 91 +++++++++++++++---- .../Linphone/Styles/SmartSearchBarStyle.qml | 49 ++++++++++ tests/ui/modules/Linphone/Styles/qmldir | 4 +- tests/ui/views/App/MainWindow/MainWindow.qml | 15 +++ .../App/Styles/MainWindow/MainWindowStyle.qml | 3 +- 10 files changed, 164 insertions(+), 24 deletions(-) create mode 100644 tests/ui/modules/Linphone/Styles/SmartSearchBarStyle.qml diff --git a/tests/assets/languages/en.ts b/tests/assets/languages/en.ts index ee6911bc2..e51ffde24 100644 --- a/tests/assets/languages/en.ts +++ b/tests/assets/languages/en.ts @@ -486,6 +486,13 @@ Search contact or enter SIP address + + SmartSearchBar + + addContact + ADD CONTACT + + Timeline diff --git a/tests/assets/languages/fr.ts b/tests/assets/languages/fr.ts index 712f8928b..e8b858334 100644 --- a/tests/assets/languages/fr.ts +++ b/tests/assets/languages/fr.ts @@ -474,6 +474,13 @@ Rechercher un contact ou entrer une adresse SIP + + SmartSearchBar + + addContact + AJOUTER CONTACT + + Timeline diff --git a/tests/resources.qrc b/tests/resources.qrc index 1f6777985..14bb2d260 100644 --- a/tests/resources.qrc +++ b/tests/resources.qrc @@ -43,6 +43,7 @@ assets/images/contact_add_hovered.svg assets/images/contact_add_normal.svg assets/images/contact_add_pressed.svg + assets/images/contact_add.svg assets/images/contact_card_photo_disabled.svg assets/images/contact_card_photo_hovered.svg assets/images/contact_card_photo_normal.svg @@ -222,6 +223,7 @@ ui/modules/Linphone/Styles/NotificationStyle.qml ui/modules/Linphone/Styles/Presence/PresenceStringStyle.qml ui/modules/Linphone/Styles/qmldir + ui/modules/Linphone/Styles/SmartSearchBarStyle.qml ui/modules/Linphone/Styles/TimelineStyle.qml ui/modules/Linphone/Timeline.qml ui/scripts/LinphoneUtils/linphone-utils.js diff --git a/tests/ui/modules/Common/Popup/DropDownDynamicMenu.qml b/tests/ui/modules/Common/Popup/DropDownDynamicMenu.qml index c7d6e7074..492ebca30 100644 --- a/tests/ui/modules/Common/Popup/DropDownDynamicMenu.qml +++ b/tests/ui/modules/Common/Popup/DropDownDynamicMenu.qml @@ -1,5 +1,6 @@ import QtQuick 2.7 +import Common 1.0 import Utils 1.0 // ============================================================================= @@ -7,8 +8,7 @@ import Utils 1.0 // ============================================================================= AbstractDropDownMenu { - // Can be computed, but for performance usage, it must be given - // in attribute. + // Can be computed, but for performance usage, it must be given in attribute. property int entryHeight property int maxMenuHeight @@ -22,6 +22,9 @@ AbstractDropDownMenu { var height = list.count * entryHeight if (list.headerPositioning === ListView.OverlayHeader) { + // Workaround to force header layout. + list.headerItem.z = Constants.zMax + height += list.headerItem.height } diff --git a/tests/ui/modules/Common/SearchBox.qml b/tests/ui/modules/Common/SearchBox.qml index 667fa4e96..38ea4a744 100644 --- a/tests/ui/modules/Common/SearchBox.qml +++ b/tests/ui/modules/Common/SearchBox.qml @@ -12,9 +12,10 @@ import Utils 1.0 Item { id: searchBox - property alias header: list.header + readonly property alias filter: searchField.text property alias delegate: list.delegate + property alias header: list.header property alias entryHeight: menu.entryHeight property alias maxMenuHeight: menu.maxMenuHeight diff --git a/tests/ui/modules/Linphone/SmartSearchBar.qml b/tests/ui/modules/Linphone/SmartSearchBar.qml index 586c4fd7d..da68ec21c 100644 --- a/tests/ui/modules/Linphone/SmartSearchBar.qml +++ b/tests/ui/modules/Linphone/SmartSearchBar.qml @@ -3,26 +3,75 @@ import QtQuick.Layouts 1.3 import Common 1.0 import Linphone 1.0 +import Linphone.Styles 1.0 // ============================================================================= SearchBox { id: searchBox - header: Rectangle { - color: '#4B5964' - height: 40 + // --------------------------------------------------------------------------- + + signal addContact (string sipAddress) + signal launchChat (string sipAddress) + signal launchCall (string sipAddress) + signal launchVideoCall (string sipAddress) + + // --------------------------------------------------------------------------- + + header: MouseArea { + id: headerContent + + height: SmartSearchBarStyle.header.height width: parent.width - MouseArea { + onClicked: { + searchBox.hideMenu() + searchBox.addContact(searchBox.filter) + } + + Rectangle { anchors.fill: parent - hoverEnabled: true + color: parent.pressed + ? SmartSearchBarStyle.header.color.pressed + : SmartSearchBarStyle.header.color.normal + + Text { + anchors { + left: parent.left + leftMargin: SmartSearchBarStyle.header.leftMargin + verticalCenter: parent.verticalCenter + } + font { + bold: true + pointSize: SmartSearchBarStyle.header.text.fontSize + } + color: headerContent.pressed + ? SmartSearchBarStyle.header.text.color.pressed + : SmartSearchBarStyle.header.text.color.normal + text: qsTr('addContact') + } + + Icon { + anchors { + right: parent.right + rightMargin: SmartSearchBarStyle.header.rightMargin + verticalCenter: parent.verticalCenter + } + icon: 'contact_add' + iconSize: SmartSearchBarStyle.header.iconSize + } } } + // --------------------------------------------------------------------------- + // Entries. + // --------------------------------------------------------------------------- + delegate: Rectangle { id: searchBoxEntry + color: SmartSearchBarStyle.entry.color.normal height: searchBox.entryHeight width: parent ? parent.width : 0 @@ -32,7 +81,7 @@ SearchBox { anchors.left: parent.left color: 'transparent' height: parent.height - width: 5 + width: SmartSearchBarStyle.entry.indicator.width } MouseArea { @@ -44,12 +93,12 @@ SearchBox { RowLayout { anchors { fill: parent - rightMargin: 10 + rightMargin: SmartSearchBarStyle.entry.rightMargin } spacing: 0 // --------------------------------------------------------------------- - // Contact or address info + // Contact or address info. // --------------------------------------------------------------------- Contact { @@ -63,35 +112,39 @@ SearchBox { // --------------------------------------------------------------------- ActionBar { - iconSize: 36 + iconSize: SmartSearchBarStyle.entry.iconSize ActionButton { icon: 'video_call' - onClicked: CallsWindow.show() + onClicked: { + searchBox.hideMenu() + searchBox.launchVideoCall($entry.sipAddress) + } } ActionButton { icon: 'call' - onClicked: CallsWindow.show() + onClicked: { + searchBox.hideMenu() + searchBox.launchCall($entry.sipAddress) + } } ActionButton { icon: 'chat' onClicked: { searchBox.hideMenu() - window.ensureCollapsed() - window.setView('Conversation', { - sipAddress: $entry.sipAddress - }) + searchBox.launchChat($entry.sipAddress) } } } } } + // Separator. Rectangle { - color: '#CBCBCB' - height: 1 + color: SmartSearchBarStyle.entry.separator.color + height: SmartSearchBarStyle.entry.separator.height width: parent.width } @@ -101,12 +154,12 @@ SearchBox { when: mouseArea.containsMouse PropertyChanges { - color: '#D0D8DE' + color: SmartSearchBarStyle.entry.color.hovered target: searchBoxEntry } PropertyChanges { - color: '#FF5E00' + color: SmartSearchBarStyle.entry.indicator.color target: indicator } } diff --git a/tests/ui/modules/Linphone/Styles/SmartSearchBarStyle.qml b/tests/ui/modules/Linphone/Styles/SmartSearchBarStyle.qml new file mode 100644 index 000000000..4f206a013 --- /dev/null +++ b/tests/ui/modules/Linphone/Styles/SmartSearchBarStyle.qml @@ -0,0 +1,49 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// ============================================================================= + +QtObject { + property QtObject entry: QtObject { + property int rightMargin: 10 + property int iconSize: 36 + + property QtObject color: QtObject { + property color normal: Colors.k + property color hovered: Colors.y + } + + 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 + } + } + + property QtObject header: QtObject { + property int height: 40 + property int iconSize: 22 + property int leftMargin: 20 + property int rightMargin: 10 + + property QtObject color: QtObject { + property color normal: Colors.j + property color pressed: Colors.i + } + + property QtObject text: QtObject { + property int fontSize: 9 + + property QtObject color: QtObject { + property color normal: Colors.k + property color pressed: Colors.k + } + } + } +} diff --git a/tests/ui/modules/Linphone/Styles/qmldir b/tests/ui/modules/Linphone/Styles/qmldir index 6a261c06b..5ae24cc2f 100644 --- a/tests/ui/modules/Linphone/Styles/qmldir +++ b/tests/ui/modules/Linphone/Styles/qmldir @@ -2,7 +2,7 @@ module Linphone.Style -# Components styles -------------------------------------------------- +# Components styles ------------------------------------------------------------ singleton AccountStatusStyle 1.0 Account/AccountStatusStyle.qml @@ -16,4 +16,6 @@ singleton NotificationStyle 1.0 NotificationStyle.qml singleton PresenceStringStyle 1.0 Presence/PresenceStringStyle.qml +singleton SmartSearchBarStyle 1.0 SmartSearchBarStyle.qml + singleton TimelineStyle 1.0 TimelineStyle.qml diff --git a/tests/ui/views/App/MainWindow/MainWindow.qml b/tests/ui/views/App/MainWindow/MainWindow.qml index 43cc342af..bd77ec2d2 100644 --- a/tests/ui/views/App/MainWindow/MainWindow.qml +++ b/tests/ui/views/App/MainWindow/MainWindow.qml @@ -146,6 +146,21 @@ ApplicationWindow { placeholderText: qsTr('mainSearchBarPlaceholder') model: SmartSearchBarModel {} + + onAddContact: { + window.ensureCollapsed() + window.setView('ContactEdit', { + sipAddress: sipAddress + }) + } + onLaunchCall: CallsWindow.show() + onLaunchChat: { + window.ensureCollapsed() + window.setView('Conversation', { + sipAddress: sipAddress + }) + } + onLaunchVideoCall: CallsWindow.show() } } } diff --git a/tests/ui/views/App/Styles/MainWindow/MainWindowStyle.qml b/tests/ui/views/App/Styles/MainWindow/MainWindowStyle.qml index adb2510b4..15d026c9f 100644 --- a/tests/ui/views/App/Styles/MainWindow/MainWindowStyle.qml +++ b/tests/ui/views/App/Styles/MainWindow/MainWindowStyle.qml @@ -2,6 +2,7 @@ pragma Singleton import QtQuick 2.7 import Common 1.0 +import Linphone.Styles 1.0 // ============================================================================= @@ -30,7 +31,7 @@ QtObject { } property QtObject searchBox: QtObject { - property int entryHeight: 51 + property int entryHeight: 50 + SmartSearchBarStyle.entry.separator.height property int maxHeight: 300 // See Hick's law for good choice. }