feat(app): toolbar in progress

2026-04-30 07:16:22 +00:00 · 2017-02-15 14:47:50 +01:00 · 2017-02-15 14:47:50 +01:00 · c9d27e375f
commit c9d27e375f
parent 2b46a4c540
7 changed files with 282 additions and 120 deletions
--- a/linphone-desktop/assets/languages/en.ts
+++ b/linphone-desktop/assets/languages/en.ts
@ -394,6 +394,41 @@ Server url not configured.</translation>
        <translation>auto</translation>
    </message>
 </context>
+<context>
+    <name>MainWindowMenuBar</name>
+    <message>
+        <source>tools</source>
+        <translation>Tools</translation>
+    </message>
+    <message>
+        <source>help</source>
+        <translation>Help</translation>
+    </message>
+    <message>
+        <source>options</source>
+        <translation>Options</translation>
+    </message>
+    <message>
+        <source>settings</source>
+        <translation>Settings</translation>
+    </message>
+    <message>
+        <source>accountAssistant</source>
+        <translation>Account assistant</translation>
+    </message>
+    <message>
+        <source>audioAssistant</source>
+        <translation>Audio Assistant</translation>
+    </message>
+    <message>
+        <source>debugWindow</source>
+        <translation>Debug window</translation>
+    </message>
+    <message>
+        <source>about</source>
+        <translation>About</translation>
+    </message>
+</context>
 <context>
    <name>ManageAccounts</name>
    <message>
--- a/linphone-desktop/assets/languages/fr.ts
+++ b/linphone-desktop/assets/languages/fr.ts
@ -393,6 +393,41 @@ Url du serveur non configurée.</translation>
        <translation>auto</translation>
    </message>
 </context>
+<context>
+    <name>MainWindowMenuBar</name>
+    <message>
+        <source>tools</source>
+        <translation>Outils</translation>
+    </message>
+    <message>
+        <source>help</source>
+        <translation>Aide</translation>
+    </message>
+    <message>
+        <source>options</source>
+        <translation>Options</translation>
+    </message>
+    <message>
+        <source>settings</source>
+        <translation>Paramètres</translation>
+    </message>
+    <message>
+        <source>accountAssistant</source>
+        <translation>Assistant de compte</translation>
+    </message>
+    <message>
+        <source>audioAssistant</source>
+        <translation>Assistant audio</translation>
+    </message>
+    <message>
+        <source>debugWindow</source>
+        <translation>Fenêtre de debug</translation>
+    </message>
+    <message>
+        <source>about</source>
+        <translation>À propos</translation>
+    </message>
+</context>
 <context>
    <name>ManageAccounts</name>
    <message>
--- a/linphone-desktop/resources.qrc
+++ b/linphone-desktop/resources.qrc
@ -303,6 +303,7 @@
    <file>ui/views/App/Main/Contacts.qml</file>
    <file>ui/views/App/Main/Conversation.qml</file>
    <file>ui/views/App/Main/Home.qml</file>
+    <file>ui/views/App/Main/MainWindowMenuBar.qml</file>
    <file>ui/views/App/Main/MainWindow.qml</file>
    <file>ui/views/App/ManageAccounts.qml</file>
    <file>ui/views/App/qmldir</file>
--- 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

--- 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.
--- 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')
+      }
    }
  }
 }
--- a/linphone-desktop/ui/views/App/Main/MainWindowMenuBar.qml
+++ 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')
+     }
+   }
+
+ }