Rewrite toolbar

Related: #11588

src/gui/CMakeLists.txt

@@ -126,6 +126,8 @@ ecm_add_qml_module(owncloudGui
         VERSION 1.0
         NAMESPACE OCC
         QML_FILES
+            qml/AccountBar.qml
+            qml/AccountButton.qml
             qml/FolderDelegate.qml
             qml/FolderError.qml
 )

src/gui/accountstate.h

@@ -186,6 +186,7 @@ protected Q_SLOTS:
 
 private:
     Account *accountForQml() const;
+
     AccountPtr _account;
     JobQueueGuard _queueGuard;
     State _state;

src/gui/owncloudgui.cpp

@@ -965,7 +965,7 @@ void ownCloudGui::slotShowSettings()
 void ownCloudGui::slotShowSyncProtocol()
 {
     slotShowSettings();
-    _settingsDialog->showActivityPage();
+    _settingsDialog->setCurrentPage(SettingsDialog::SettingsPage::Activity);
 }
 
 

src/gui/qml/AccountBar.qml

@@ -0,0 +1,131 @@
+/*
+ * Copyright (C) by Hannah von Reth <hannah.vonreth@owncloud.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
+ * for more details.
+ */
+
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import org.ownCloud.gui 1.0
+import org.ownCloud.libsync 1.0
+
+Pane {
+    id: bar
+
+    RowLayout {
+        anchors.fill: parent
+
+        Repeater {
+            id: accountButtons
+
+            model: AccountManager.accounts
+
+            delegate: AccountButton {
+                property AccountState accountState: modelData
+
+                Layout.fillWidth: true
+                Layout.maximumWidth: widthHint
+                checked: settingsDialog.currentAccount === accountState.account
+                icon.source: "image://ownCloud/core/account"
+                text: accountState.account.displayName.replace("@", "\n")
+
+                Keys.onBacktabPressed: event => {
+                    if (index === 0) {
+                        // We're the first button, handle the back-tab
+                        settingsDialog.focusPrevious();
+                    } else {
+                        event.accepted = false;
+                    }
+                }
+                onClicked: {
+                    settingsDialog.currentAccount = accountState.account;
+                }
+            }
+        }
+        AccountButton {
+            id: addButton
+
+            Layout.fillWidth: true
+            Layout.maximumWidth: widthHint
+            icon.source: "image://ownCloud/core/plus-solid"
+            text: qsTr("Add Account")
+            visible: Theme.multiAccount | !AccountManager.accounts
+
+            Keys.onBacktabPressed: event => {
+                // If there are no account buttons, we're the first button, so handle the back-tab
+                if (accountButtons.count === 0) {
+                    settingsDialog.focusPrevious();
+                } else {
+                    event.accepted = false;
+                }
+            }
+            onClicked: {
+                settingsDialog.addAccount();
+            }
+        }
+        Item {
+            // spacer
+            Layout.fillWidth: true
+        }
+        AccountButton {
+            Layout.fillWidth: true
+            Layout.maximumWidth: widthHint
+            checked: settingsDialog.currentPage === SettingsDialog.Activity
+            icon.source: "image://ownCloud/core/activity"
+            text: qsTr("Activity")
+
+            onClicked: {
+                settingsDialog.currentPage = SettingsDialog.Activity;
+            }
+        }
+        AccountButton {
+            Layout.fillWidth: true
+            Layout.maximumWidth: widthHint
+            checked: settingsDialog.currentPage === SettingsDialog.Settings
+            icon.source: "image://ownCloud/core/settings"
+            text: qsTr("Settings")
+
+            onClicked: {
+                settingsDialog.currentPage = SettingsDialog.Settings;
+            }
+        }
+        Repeater {
+            model: Theme.urlButtons
+
+            delegate: AccountButton {
+                property UrlButtonData urlButton: modelData
+
+                Layout.fillWidth: true
+                Layout.maximumWidth: widthHint
+                icon.source: urlButton.icon
+                text: urlButton.name
+
+                onClicked: {
+                    Qt.openUrlExternally(urlButton.url);
+                }
+            }
+        }
+        AccountButton {
+            Layout.fillWidth: true
+            Layout.maximumWidth: widthHint
+            icon.source: "image://ownCloud/core/quit"
+            text: qsTr("Quit")
+
+            Keys.onTabPressed: {
+                settingsDialog.focusNext();
+            }
+            onClicked: {
+                Qt.quit();
+            }
+        }
+    }
+}

src/gui/qml/AccountButton.qml

@@ -0,0 +1,57 @@
+/*
+ * Copyright (C) by Hannah von Reth <hannah.vonreth@owncloud.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ * or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License
+ * for more details.
+ */
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+ToolButton {
+    id: control
+
+    readonly property real goldenRatio: 1.618
+    readonly property real widthHint: height * goldenRatio
+
+    clip: true
+    icon.height: 32
+    icon.width: 32
+    implicitWidth: Math.min(implicitContentWidth + leftPadding + rightPadding, widthHint)
+
+    // make the current button pop
+    palette.button: palette.highlight
+
+    contentItem: ColumnLayout {
+        spacing: control.spacing
+
+        Image {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.preferredHeight: control.icon.height
+            Layout.preferredWidth: control.icon.width
+            fillMode: Image.PreserveAspectFit
+            source: control.icon.source
+        }
+        Label {
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            color: control.visualFocus ? control.palette.highlight : control.palette.buttonText
+            // elide middle would look better but doesn't work with wrapping
+            elide: Text.ElideRight
+            font: control.font
+            horizontalAlignment: Text.AlignHCenter
+            maximumLineCount: 2
+            opacity: enabled ? 1.0 : 0.3
+            text: control.text
+            verticalAlignment: Text.AlignTop
+            wrapMode: Text.WordWrap
+        }
+    }
+}