From c9d27e375f3878f8b3f3a2581239eb9a7db415e0 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Wed, 15 Feb 2017 14:47:50 +0100 Subject: [PATCH] feat(app): toolbar in progress --- linphone-desktop/assets/languages/en.ts | 35 +++ linphone-desktop/assets/languages/fr.ts | 35 +++ linphone-desktop/resources.qrc | 1 + .../modules/Linphone/Styles/TimelineStyle.qml | 2 + .../ui/modules/Linphone/Timeline.qml | 5 + .../ui/views/App/Main/MainWindow.qml | 258 ++++++++++-------- .../ui/views/App/Main/MainWindowMenuBar.qml | 66 +++++ 7 files changed, 282 insertions(+), 120 deletions(-) create mode 100644 linphone-desktop/ui/views/App/Main/MainWindowMenuBar.qml diff --git a/linphone-desktop/assets/languages/en.ts b/linphone-desktop/assets/languages/en.ts index 27f5e2ee2..2d8c6ff62 100644 --- a/linphone-desktop/assets/languages/en.ts +++ b/linphone-desktop/assets/languages/en.ts @@ -394,6 +394,41 @@ Server url not configured. auto + + MainWindowMenuBar + + tools + Tools + + + help + Help + + + options + Options + + + settings + Settings + + + accountAssistant + Account assistant + + + audioAssistant + Audio Assistant + + + debugWindow + Debug window + + + about + About + + ManageAccounts diff --git a/linphone-desktop/assets/languages/fr.ts b/linphone-desktop/assets/languages/fr.ts index 9d789daf4..4cf413f16 100644 --- a/linphone-desktop/assets/languages/fr.ts +++ b/linphone-desktop/assets/languages/fr.ts @@ -393,6 +393,41 @@ Url du serveur non configurée. auto + + MainWindowMenuBar + + tools + Outils + + + help + Aide + + + options + Options + + + settings + Paramètres + + + accountAssistant + Assistant de compte + + + audioAssistant + Assistant audio + + + debugWindow + Fenêtre de debug + + + about + À propos + + ManageAccounts diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index 98990302a..cbc418946 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -303,6 +303,7 @@ ui/views/App/Main/Contacts.qml ui/views/App/Main/Conversation.qml ui/views/App/Main/Home.qml + ui/views/App/Main/MainWindowMenuBar.qml ui/views/App/Main/MainWindow.qml ui/views/App/ManageAccounts.qml ui/views/App/qmldir diff --git a/linphone-desktop/ui/modules/Linphone/Styles/TimelineStyle.qml b/linphone-desktop/ui/modules/Linphone/Styles/TimelineStyle.qml index 49c433abf..6dad8d582 100644 --- a/linphone-desktop/ui/modules/Linphone/Styles/TimelineStyle.qml +++ b/linphone-desktop/ui/modules/Linphone/Styles/TimelineStyle.qml @@ -6,6 +6,8 @@ import Common 1.0 // ============================================================================= QtObject { + property color color: Colors.k + property QtObject contact: QtObject { property int height: 60 diff --git a/linphone-desktop/ui/modules/Linphone/Timeline.qml b/linphone-desktop/ui/modules/Linphone/Timeline.qml index a5e5678c1..6b462a123 100644 --- a/linphone-desktop/ui/modules/Linphone/Timeline.qml +++ b/linphone-desktop/ui/modules/Linphone/Timeline.qml @@ -45,6 +45,11 @@ ColumnLayout { spacing: 0 + Rectangle { + anchors.fill: parent + color: TimelineStyle.color + } + SmartConnect { Component.onCompleted: { // Handle if current entry was moved in timeline. diff --git a/linphone-desktop/ui/views/App/Main/MainWindow.qml b/linphone-desktop/ui/views/App/Main/MainWindow.qml index 94311d681..189146b92 100644 --- a/linphone-desktop/ui/views/App/Main/MainWindow.qml +++ b/linphone-desktop/ui/views/App/Main/MainWindow.qml @@ -2,6 +2,9 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.3 +// Explicit import to support Toolbar. +import QtQuick.Controls 1.4 as Controls1 + import Common 1.0 import Linphone 1.0 import Utils 1.0 @@ -10,7 +13,7 @@ import App.Styles 1.0 // ============================================================================= -ApplicationWindow { +Controls1.ApplicationWindow { id: window property string _currentView: '' @@ -84,145 +87,160 @@ ApplicationWindow { onActiveFocusItemChanged: activeFocusItem == null && smartSearchBar.hideMenu() // --------------------------------------------------------------------------- - // Toolbar properties. + // Mernu bar. // --------------------------------------------------------------------------- - header: ToolBar { - background: MainWindowStyle.toolBar.background - height: MainWindowStyle.toolBar.height + menuBar: MainWindowMenuBar {} - RowLayout { - anchors { - fill: parent - leftMargin: MainWindowStyle.toolBar.leftMargin - rightMargin: MainWindowStyle.toolBar.rightMargin - } - spacing: MainWindowStyle.toolBar.spacing - - Collapse { - id: collapse - - Layout.fillHeight: parent.height - target: window - targetHeight: MainWindowStyle.minimumHeight - } - - AccountStatus { - id: accountStatus - - Layout.fillHeight: parent.height - Layout.preferredWidth: MainWindowStyle.accountStatus.width - - account: AccountSettingsModel - - TooltipArea { - text: AccountSettingsModel.sipAddress - } - - onClicked: Utils.openWindow('ManageAccounts', window) - } - - Column { - width: MainWindowStyle.autoAnswerStatus.width - - Icon { - icon: SettingsModel.autoAnswerStatus - ? 'auto_answer' - : '' - iconSize: MainWindowStyle.autoAnswerStatus.iconSize - } - - Text { - clip: true - font { - pointSize: MainWindowStyle.autoAnswerStatus.text.fontSize - } - text: qsTr('autoAnswerStatus') - width: parent.width - color: MainWindowStyle.autoAnswerStatus.text.color - } - } - - SmartSearchBar { - id: smartSearchBar - - Layout.fillWidth: true - entryHeight: MainWindowStyle.searchBox.entryHeight - maxMenuHeight: MainWindowStyle.searchBox.maxHeight - placeholderText: qsTr('mainSearchBarPlaceholder') - - model: SmartSearchBarModel {} - - onAddContact: window.setView('ContactEdit', { - sipAddress: sipAddress - }) - - onLaunchCall: CallsListModel.launchAudioCall(sipAddress) - onLaunchChat: window.setView('Conversation', { - sipAddress: sipAddress - }) - - onLaunchVideoCall: CallsListModel.launchVideoCall(sipAddress) - - onEntryClicked: window.setView(entry.contact ? 'ContactEdit' : 'Conversation', { - sipAddress: entry.sipAddress - }) - } - } - } - - // --------------------------------------------------------------------------- - // Content. - // --------------------------------------------------------------------------- - - RowLayout { + ColumnLayout { anchors.fill: parent spacing: 0 - // Main menu. - ColumnLayout { - Layout.fillHeight: true - Layout.maximumWidth: MainWindowStyle.menu.width - Layout.preferredWidth: MainWindowStyle.menu.width - spacing: 0 + // ------------------------------------------------------------------------- + // Toolbar properties. + // ------------------------------------------------------------------------- - Menu { - id: menu + ToolBar { + Layout.fillWidth: true + Layout.preferredHeight: MainWindowStyle.toolBar.height - entryHeight: MainWindowStyle.menu.entryHeight - entryWidth: MainWindowStyle.menu.width + background: MainWindowStyle.toolBar.background - entries: [{ - entryName: qsTr('homeEntry'), - icon: 'home' - }, { - entryName: qsTr('contactsEntry'), - icon: 'contact' - }] + RowLayout { + anchors { + fill: parent + leftMargin: MainWindowStyle.toolBar.leftMargin + rightMargin: MainWindowStyle.toolBar.rightMargin + } + spacing: MainWindowStyle.toolBar.spacing - onEntrySelected: !entry ? setView('Home') : setView('Contacts') - } + Collapse { + id: collapse - // History. - Timeline { - id: timeline + Layout.fillHeight: parent.height + target: window + targetHeight: MainWindowStyle.minimumHeight + } - Layout.fillHeight: true - Layout.fillWidth: true - model: TimelineModel + AccountStatus { + id: accountStatus - onEntrySelected: setView('Conversation', { sipAddress: entry }) + Layout.fillHeight: parent.height + Layout.preferredWidth: MainWindowStyle.accountStatus.width + + account: AccountSettingsModel + + TooltipArea { + text: AccountSettingsModel.sipAddress + } + + onClicked: Utils.openWindow('ManageAccounts', window) + } + + Column { + width: MainWindowStyle.autoAnswerStatus.width + + Icon { + icon: SettingsModel.autoAnswerStatus + ? 'auto_answer' + : '' + iconSize: MainWindowStyle.autoAnswerStatus.iconSize + } + + Text { + clip: true + font { + pointSize: MainWindowStyle.autoAnswerStatus.text.fontSize + } + text: qsTr('autoAnswerStatus') + width: parent.width + color: MainWindowStyle.autoAnswerStatus.text.color + } + } + + SmartSearchBar { + id: smartSearchBar + + Layout.fillWidth: true + entryHeight: MainWindowStyle.searchBox.entryHeight + maxMenuHeight: MainWindowStyle.searchBox.maxHeight + placeholderText: qsTr('mainSearchBarPlaceholder') + + model: SmartSearchBarModel {} + + onAddContact: window.setView('ContactEdit', { + sipAddress: sipAddress + }) + + onLaunchCall: CallsListModel.launchAudioCall(sipAddress) + onLaunchChat: window.setView('Conversation', { + sipAddress: sipAddress + }) + + onLaunchVideoCall: CallsListModel.launchVideoCall(sipAddress) + + onEntryClicked: window.setView(entry.contact ? 'ContactEdit' : 'Conversation', { + sipAddress: entry.sipAddress + }) + } } } - // Main content. - Loader { - id: contentLoader + // ------------------------------------------------------------------------- + // Content. + // ------------------------------------------------------------------------- + RowLayout { Layout.fillHeight: true Layout.fillWidth: true - Component.onCompleted: setView('Home') + spacing: 0 + + // Main menu. + ColumnLayout { + Layout.maximumWidth: MainWindowStyle.menu.width + Layout.preferredWidth: MainWindowStyle.menu.width + + spacing: 0 + + Menu { + id: menu + + entryHeight: MainWindowStyle.menu.entryHeight + entryWidth: MainWindowStyle.menu.width + + entries: [{ + entryName: qsTr('homeEntry'), + icon: 'home' + }, { + entryName: qsTr('contactsEntry'), + icon: 'contact' + }] + + onEntrySelected: !entry ? setView('Home') : setView('Contacts') + } + + // History. + Timeline { + id: timeline + + Layout.fillHeight: true + Layout.fillWidth: true + model: TimelineModel + + onEntrySelected: setView('Conversation', { sipAddress: entry }) + } + } + + // Main content. + Loader { + id: contentLoader + + Layout.fillHeight: true + Layout.fillWidth: true + + Component.onCompleted: setView('Home') + } } } } diff --git a/linphone-desktop/ui/views/App/Main/MainWindowMenuBar.qml b/linphone-desktop/ui/views/App/Main/MainWindowMenuBar.qml new file mode 100644 index 000000000..20c39e090 --- /dev/null +++ b/linphone-desktop/ui/views/App/Main/MainWindowMenuBar.qml @@ -0,0 +1,66 @@ +import QtQuick 2.7 +import QtQuick.Controls 1.4 +import QtQuick.Controls.Styles 1.4 + + // ============================================================================ + + MenuBar { + style: MenuBarStyle { + background: Rectangle { + anchors.fill: parent + color: '#E8E8E7' + } + + itemDelegate: Rectangle { + implicitHeight: text.height + 8 + implicitWidth: text.width + 18 + color: 'transparent' + + Text { + id: text + + anchors.centerIn: parent + font: root.font + text: formatMnemonic(styleData.text, styleData.underlineMnemonic) + color: styleData.open ? '#FE5E00' : '#515557' + } + } + } + + // -------------------------------------------------------------------------- + + Menu { + title: qsTr('options') + + MenuItem { + text: qsTr('settings') + } + } + + Menu { + title: qsTr('tools') + + MenuItem { + text: qsTr('accountAssistant') + } + + MenuItem { + text: qsTr('audioAssistant') + } + + MenuSeparator {} + + MenuItem { + text: qsTr('debugWindow') + } + } + + Menu { + title: qsTr('help') + + MenuItem { + text: qsTr('about') + } + } + + }