From eaafc4b04cf1f19ed46f72a2c6a0c59d48edf112 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Tue, 27 Sep 2016 14:19:46 +0200 Subject: [PATCH] feat(Popup): use style file --- .../modules/Linphone/Popup/DropDownMenu.qml | 165 ++----- .../ui/modules/Linphone/Popup/PopupShadow.qml | 10 +- tests/ui/modules/Linphone/SearchBox.qml | 125 ++--- .../ui/modules/Linphone/Styles/PopupStyle.qml | 16 +- tests/ui/views/MainWindow/MainWindow.qml | 437 +++++++++++------- 5 files changed, 381 insertions(+), 372 deletions(-) diff --git a/tests/ui/modules/Linphone/Popup/DropDownMenu.qml b/tests/ui/modules/Linphone/Popup/DropDownMenu.qml index fe527b928..ce372db93 100644 --- a/tests/ui/modules/Linphone/Popup/DropDownMenu.qml +++ b/tests/ui/modules/Linphone/Popup/DropDownMenu.qml @@ -1,148 +1,39 @@ -import QtGraphicalEffects 1.0 import QtQuick 2.7 -import QtQuick.Controls 2.0 -import Linphone 1.0 import Linphone.Styles 1.0 +// =================================================================== +// Low component to display a list/menu in a popup. +// =================================================================== + Rectangle { - readonly property int entryHeight: 50 + default property alias content: content.data + property int entryHeight + property int maxMenuHeight - property int maxMenuHeight + // Ugly. Just ugly. + // `model` is a reference on a unknown component! + // See usage with SearchBox. + implicitHeight: { + var height = model.count * entryHeight + return height > maxMenuHeight ? maxMenuHeight : height + } + visible: false - implicitHeight: { - var height = model.count * entryHeight - return height > maxMenuHeight ? maxMenuHeight : height - } - visible: false + function show () { + visible = true + } - function show () { - visible = true - } + function hide () { + visible = false + } - function hide () { - visible = false - } + Rectangle { + id: content - Rectangle { - anchors.fill: parent - id: listContainer - - ScrollableListView { - anchors.fill: parent - id: list - height: console.log(model.count) || count - - // TODO: Remove, use C++ model instead. - model: ListModel { - id: model - - ListElement { - $presence: 'connected' - $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'toto.lala.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'machin.truc.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'absent' - $sipAddress: 'hey.listen.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'valentin.cognito.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'charles.henri.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'yesyes.nono.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'nsa.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'toto.lala.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'machin.truc.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'absent' - $sipAddress: 'hey.listen.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'valentin.cognito.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'charles.henri.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'yesyes.nono.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'nsa.sip.linphone.org' - $username: 'Toto' - } - } - - 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') - } - ] - } - } - } - - PopupShadow { - anchors.fill: listContainer - source: listContainer - visible: true - } + anchors.fill: parent + color: PopupStyle.backgroundColor + layer.enabled: true + layer.effect: PopupShadow { } + } } diff --git a/tests/ui/modules/Linphone/Popup/PopupShadow.qml b/tests/ui/modules/Linphone/Popup/PopupShadow.qml index e9f166971..21fa0d3c2 100644 --- a/tests/ui/modules/Linphone/Popup/PopupShadow.qml +++ b/tests/ui/modules/Linphone/Popup/PopupShadow.qml @@ -5,9 +5,9 @@ import Linphone.Styles 1.0 // =================================================================== DropShadow { - color: PopupStyle.shadow.color - horizontalOffset: PopupStyle.shadow.horizontalOffset - radius: PopupStyle.shadow.radius - samples: PopupStyle.shadow.samples - verticalOffset: PopupStyle.shadow.verticalOffset + color: PopupStyle.shadow.color + horizontalOffset: PopupStyle.shadow.horizontalOffset + radius: PopupStyle.shadow.radius + samples: PopupStyle.shadow.samples + verticalOffset: PopupStyle.shadow.verticalOffset } diff --git a/tests/ui/modules/Linphone/SearchBox.qml b/tests/ui/modules/Linphone/SearchBox.qml index 506c4c279..7592d31a1 100644 --- a/tests/ui/modules/Linphone/SearchBox.qml +++ b/tests/ui/modules/Linphone/SearchBox.qml @@ -7,71 +7,82 @@ import Linphone.Styles 1.0 // =================================================================== Item { - property alias placeholderText: searchField.placeholderText - property alias maxMenuHeight: menu.maxMenuHeight + id: item - signal menuClosed () - signal menuOpened () - signal searchTextChanged (string text) + property alias delegate: list.delegate + property alias entryHeight: menu.entryHeight + property alias maxMenuHeight: menu.maxMenuHeight + property alias model: list.model + property alias placeholderText: searchField.placeholderText - function _hideMenu () { - menu.hide() - shadow.visible = false - searchField.focus = false + signal menuClosed () + signal menuOpened () + signal searchTextChanged (string text) - menuClosed() + function _hideMenu () { + menu.hide() + shadow.visible = false + searchField.focus = false + + menuClosed() + } + + function _showMenu () { + menu.show() + shadow.visible = true + + menuOpened() + } + + implicitHeight: searchField.height + + Item { + implicitHeight: searchField.height + menu.height + width: parent.width + + TextField { + id: searchField + + background: SearchBoxStyle.searchFieldBackground + width: parent.width + + Keys.onEscapePressed: _hideMenu() + + onActiveFocusChanged: activeFocus && _showMenu() + onTextChanged: searchTextChanged(text) } - function _showMenu () { - menu.show() - shadow.visible = true + DropDownMenu { + id: menu - menuOpened() + anchors.top: searchField.bottom + width: searchField.width + z: Constants.zPopup + + Keys.onEscapePressed: _hideMenu() + + ScrollableListView { + id: list + + anchors.fill: parent + } } - implicitHeight: searchField.height + InvertedMouseArea { + enabled: menu.visible + height: parent.height + parent: parent + width: parent.width - Item { - implicitHeight: searchField.height + menu.height - width: parent.width - - TextField { - id: searchField - - background: SearchBoxStyle.searchFieldBackground - width: parent.width - - Keys.onEscapePressed: _hideMenu() - - onActiveFocusChanged: activeFocus && _showMenu() - onTextChanged: searchTextChanged(text) - } - - DropDownMenu { - id: menu - - anchors.top: searchField.bottom - width: searchField.width - z: Constants.zPopup - - Keys.onEscapePressed: _hideMenu() - } - - InvertedMouseArea { - enabled: menu.visible - height: parent.height - parent: parent - width: parent.width - - onPressed: _hideMenu() - } - - PopupShadow { - id: shadow - - anchors.fill: searchField - source: searchField - visible: false - } + onPressed: _hideMenu() } + + PopupShadow { + id: shadow + + anchors.fill: searchField + source: searchField + visible: false + } + } } diff --git a/tests/ui/modules/Linphone/Styles/PopupStyle.qml b/tests/ui/modules/Linphone/Styles/PopupStyle.qml index 86a466406..a0f1d1a40 100644 --- a/tests/ui/modules/Linphone/Styles/PopupStyle.qml +++ b/tests/ui/modules/Linphone/Styles/PopupStyle.qml @@ -4,13 +4,15 @@ import QtQuick 2.7 import Linphone 1.0 QtObject { - property QtObject shadow: QtObject { - property double radius: 8.0 + property string backgroundColor: Colors.k - property int horizontalOffset: 0 - property int samples: 15 - property int verticalOffset: 2 + property QtObject shadow: QtObject { + property double radius: 8.0 - property string color: Colors.f - } + property int horizontalOffset: 0 + property int samples: 15 + property int verticalOffset: 2 + + property string color: Colors.f + } } diff --git a/tests/ui/views/MainWindow/MainWindow.qml b/tests/ui/views/MainWindow/MainWindow.qml index bbfaf106d..af99fc5be 100644 --- a/tests/ui/views/MainWindow/MainWindow.qml +++ b/tests/ui/views/MainWindow/MainWindow.qml @@ -7,186 +7,291 @@ import Linphone 1.0 import 'qrc:/ui/scripts/utils.js' as Utils ApplicationWindow { - id: mainWindow - maximumHeight: 70 - minimumHeight: 70 - minimumWidth: 780 - title: 'Linphone' - visible: true + id: mainWindow + maximumHeight: 70 + minimumHeight: 70 + minimumWidth: 780 + title: 'Linphone' + visible: true - header: ToolBar { - background: Rectangle { - color: '#EAEAEA' - } - height: 70 - - RowLayout { - anchors.fill: parent - anchors.leftMargin: 20 - anchors.rightMargin: 20 - spacing: 20 - - // Collapse. - Collapse { - Layout.preferredWidth: 25 - Layout.fillHeight: parent.height - id: collapse - - onCollapsed: mainWindowStates.state = isCollapsed() - ? 'collapsed' - : '' - } - - // User info. - ContactDescription { - Layout.fillHeight: parent.height - Layout.preferredWidth: 200 - sipAddress: 'e.miller@sip-linphone.org' - username: 'Edward Miller' - } - - // User actions. - ActionButton { - Layout.preferredWidth: 16 - onClicked: Utils.openWindow('ManageAccounts', mainWindow) - } - - ActionButton { - Layout.preferredWidth: 16 - onClicked: Utils.openWindow('NewCall', mainWindow) - } - - // Search. - SearchBox { - Layout.fillWidth: true - maxMenuHeight: 300 // See Hick's law for good choice. - placeholderText: qsTr('mainSearchBarPlaceholder') - - onMenuClosed: content.enabled = true - - onMenuOpened: { - if (!collapse.isCollapsed()) { - collapse.collapse() - } - content.enabled = false - } - } - - // Start conference. - ActionButton { - Layout.preferredWidth: 32 - Layout.preferredHeight: 32 - icon: 'conference' - } - } + header: ToolBar { + background: Rectangle { + color: '#EAEAEA' } + height: 70 RowLayout { - anchors.fill: parent - id: content - spacing: 0 + anchors.fill: parent + anchors.leftMargin: 20 + anchors.rightMargin: 20 + spacing: 20 - // Main menu. - ColumnLayout { - Layout.fillHeight: true - Layout.maximumWidth: 250 - Layout.preferredWidth: 250 - spacing: 0 + // Collapse. + Collapse { + Layout.preferredWidth: 25 + Layout.fillHeight: parent.height + id: collapse - Menu { - entryHeight: 50 - entryWidth: parent.width + onCollapsed: mainWindowStates.state = isCollapsed() + ? 'collapsed' + : '' + } - entries: [{ - entryName: qsTr('homeEntry'), - icon: 'home' - }, { - entryName: qsTr('contactsEntry'), - icon: 'contacts_list' - }] + // User info. + ContactDescription { + Layout.fillHeight: parent.height + Layout.preferredWidth: 200 + sipAddress: 'e.miller@sip-linphone.org' + username: 'Edward Miller' + } - onEntrySelected: { - console.log('entry', entry) - } - } + // User actions. + ActionButton { + Layout.preferredWidth: 16 + onClicked: Utils.openWindow('ManageAccounts', mainWindow) + } - // History. - Timeline { - Layout.fillHeight: true - Layout.fillWidth: true + ActionButton { + Layout.preferredWidth: 16 + onClicked: Utils.openWindow('NewCall', mainWindow) + } - model: ListModel { - ListElement { - $presence: 'connected' - $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'toto.lala.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'machin.truc.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'absent' - $sipAddress: 'hey.listen.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'valentin.cognito.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'do_not_disturb' - $sipAddress: 'charles.henri.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'disconnected' - $sipAddress: 'yesyes.nono.sip.linphone.org' - $username: 'Toto' - } - ListElement { - $presence: 'connected' - $sipAddress: 'nsa.sip.linphone.org' - $username: 'Toto' - } - } - } - // Logo. - Rectangle { - Layout.fillWidth: true - Layout.preferredHeight: 70 - color: '#EAEAEA' - } + // Search. + SearchBox { + Layout.fillWidth: true + maxMenuHeight: 300 // See Hick's law for good choice. + placeholderText: qsTr('mainSearchBarPlaceholder') + entryHeight: 50 + + onMenuClosed: content.enabled = true + + onMenuOpened: { + if (!collapse.isCollapsed()) { + collapse.collapse() + } + content.enabled = false } - // Main content. - Loader { - Layout.fillHeight: true - Layout.fillWidth: true - source: 'qrc:/ui/views/MainWindow/Contacts.qml' + model: ListModel { + id: model + + ListElement { + $presence: 'connected' + $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'toto.lala.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'machin.truc.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'absent' + $sipAddress: 'hey.listen.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'valentin.cognito.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'charles.henri.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'yesyes.nono.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'nsa.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'toto.lala.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'machin.truc.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'absent' + $sipAddress: 'hey.listen.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'valentin.cognito.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'charles.henri.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'yesyes.nono.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'nsa.sip.linphone.org' + $username: 'Toto' + } } + + 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') + } + ] + } + } + + // Start conference. + ActionButton { + Layout.preferredWidth: 32 + Layout.preferredHeight: 32 + icon: 'conference' + } + } + } + + RowLayout { + anchors.fill: parent + id: content + spacing: 0 + + // Main menu. + ColumnLayout { + Layout.fillHeight: true + Layout.maximumWidth: 250 + Layout.preferredWidth: 250 + spacing: 0 + + Menu { + entryHeight: 50 + entryWidth: parent.width + + entries: [{ + entryName: qsTr('homeEntry'), + icon: 'home' + }, { + entryName: qsTr('contactsEntry'), + icon: 'contacts_list' + }] + + onEntrySelected: { + console.log('entry', entry) + } + } + + // History. + Timeline { + Layout.fillHeight: true + Layout.fillWidth: true + + model: ListModel { + ListElement { + $presence: 'connected' + $sipAddress: 'jim.williams.zzzz.yyyy.kkkk.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'toto.lala.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'machin.truc.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'absent' + $sipAddress: 'hey.listen.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'valentin.cognito.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'do_not_disturb' + $sipAddress: 'charles.henri.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'disconnected' + $sipAddress: 'yesyes.nono.sip.linphone.org' + $username: 'Toto' + } + ListElement { + $presence: 'connected' + $sipAddress: 'nsa.sip.linphone.org' + $username: 'Toto' + } + } + } + // Logo. + Rectangle { + Layout.fillWidth: true + Layout.preferredHeight: 70 + color: '#EAEAEA' + } } - StateGroup { - id: mainWindowStates - - states: State { - name: 'collapsed' - - PropertyChanges { - height: 480 - maximumHeight: 99999 - maximumWidth: 99999 - minimumHeight: 480 - target: mainWindow - } - } + // Main content. + Loader { + Layout.fillHeight: true + Layout.fillWidth: true + source: 'qrc:/ui/views/MainWindow/Contacts.qml' } + } + + StateGroup { + id: mainWindowStates + + states: State { + name: 'collapsed' + + PropertyChanges { + height: 480 + maximumHeight: 99999 + maximumWidth: 99999 + minimumHeight: 480 + target: mainWindow + } + } + } }