Add main pane top bar, improve readability

src/backend/backend.py

@@ -243,6 +243,10 @@ class Backend:
 
     # General functions
 
+    async def get_config_dir(self) -> Path:
+        return Path(self.appdirs.user_config_dir)
+
+
     async def load_settings(self) -> tuple:
         """Return parsed user config files."""
 

src/gui/GlobalShortcuts.qml

@@ -33,33 +33,34 @@ Item {
         flickTarget
 
 
+    function toggleConsole() {
+        if (debugConsole) {
+            debugConsole.visible = ! debugConsole.visible
+
+        } else if (! defaultDebugConsoleLoader.active) {
+            defaultDebugConsoleLoader.active = true
+
+        } else {
+            defaultDebugConsole.visible = ! defaultDebugConsole.visible
+        }
+    }
+
+
     // App
 
     HShortcut {
-        enabled: debugMode
         sequences: settings.keys.startPythonDebugger
         onActivated: py.call("BRIDGE.pdb")
     }
 
     HShortcut {
-        enabled: debugMode
         sequences: settings.keys.toggleDebugConsole
-        onActivated:  {
+        onActivated: toggleConsole()
-            if (debugConsole) {
-                debugConsole.visible = ! debugConsole.visible
-
-            } else if (! defaultDebugConsoleLoader.active) {
-                defaultDebugConsoleLoader.active = true
-
-            } else {
-                defaultDebugConsole.visible = ! defaultDebugConsole.visible
-            }
-        }
     }
 
     HShortcut {
         sequences: settings.keys.reloadConfig
-        onActivated: py.loadSettings(() => { mainUI.pressAnimation.start() })
+        onActivated: mainUI.reloadSettings()
     }
 
     HShortcut {

src/gui/MainPane/Account.qml

@@ -7,18 +7,17 @@ import "../Base"
 
 HTileDelegate {
     id: account
-    spacing: 0
+    rightPadding: 0
-    topPadding: model.index > 0 ? theme.spacing / 2 : 0
-    bottomPadding: topPadding
-
     backgroundColor: theme.mainPane.account.background
     opacity: collapsed && ! mainPane.filter ?
              theme.mainPane.account.collapsedOpacity : 1
 
-    title.color: theme.mainPane.account.name
     title.text: model.display_name || model.id
     title.font.pixelSize: theme.fontSize.big
-    title.leftPadding: theme.spacing
+    title.color:
+        hovered ?
+        utils.nameColor(model.display_name || model.id.substring(1)) :
+        theme.mainPane.account.name
 
     image: HUserAvatar {
         userId: model.id
@@ -68,63 +67,66 @@ HTileDelegate {
     }
 
 
+    Behavior on title.color { HColorAnimation {} }
     Behavior on opacity { HNumberAnimation {} }
 
 
-    HButton {
+    HRowLayout {
-        id: addChat
+        HButton {
-        iconItem.small: true
+            id: addChat
-        icon.name: "add-chat"
+            iconItem.small: true
-        backgroundColor: "transparent"
+            icon.name: "add-chat"
-        toolTip.text: qsTr("Add new chat")
+            backgroundColor: "transparent"
-        onClicked: pageLoader.showPage(
+            toolTip.text: qsTr("Add new chat")
-            "AddChat/AddChat", {userId: model.id},
+            onClicked: pageLoader.showPage(
-        )
+                "AddChat/AddChat", {userId: model.id},
+            )
 
-        leftPadding: theme.spacing / 2
+            leftPadding: theme.spacing / 2
-        rightPadding: leftPadding
+            rightPadding: leftPadding
 
-        opacity: expand.loading ? 0 : 1
+            opacity: expand.loading ? 0 : 1
-        visible: opacity > 0 && Layout.maximumWidth > 0
+            visible: opacity > 0 && Layout.maximumWidth > 0
 
-        Layout.fillHeight: true
+            Layout.fillHeight: true
-        Layout.maximumWidth:
+            Layout.maximumWidth:
-            account.width >= 100 * theme.uiScale ?  implicitWidth : 0
+                account.width >= 100 * theme.uiScale ?  implicitWidth : 0
 
-        Behavior on Layout.maximumWidth { HNumberAnimation {} }
+            Behavior on Layout.maximumWidth { HNumberAnimation {} }
-        Behavior on opacity { HNumberAnimation {} }
+            Behavior on opacity { HNumberAnimation {} }
-    }
-
-    HButton {
-        id: expand
-        loading:
-            ! model.first_sync_done || model.profile_updated < new Date(1)
-        iconItem.small: true
-        icon.name: "expand"
-        backgroundColor: "transparent"
-        toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")
-        onClicked: account.toggleCollapse()
-
-        leftPadding: theme.spacing / 2
-        rightPadding: leftPadding
-
-        opacity: ! loading && mainPane.filter ? 0 : 1
-        visible: opacity > 0 && Layout.maximumWidth > 0
-
-        Layout.fillHeight: true
-        Layout.maximumWidth:
-            account.width >= 120 * theme.uiScale ?  implicitWidth : 0
-
-
-        iconItem.transform: Rotation {
-            origin.x: expand.iconItem.width / 2
-            origin.y: expand.iconItem.height / 2
-            angle: expand.loading ? 0 : collapsed ? 180 : 90
-
-            Behavior on angle { HNumberAnimation {} }
         }
 
-        Behavior on Layout.maximumWidth { HNumberAnimation {} }
+        HButton {
-        Behavior on opacity { HNumberAnimation {} }
+            id: expand
+            loading:
+                ! model.first_sync_done || model.profile_updated < new Date(1)
+            iconItem.small: true
+            icon.name: "expand"
+            backgroundColor: "transparent"
+            toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")
+            onClicked: account.toggleCollapse()
+
+            leftPadding: theme.spacing / 2
+            rightPadding: theme.spacing
+
+            opacity: ! loading && mainPane.filter ? 0 : 1
+            visible: opacity > 0 && Layout.maximumWidth > 0
+
+            Layout.fillHeight: true
+            Layout.maximumWidth:
+                account.width >= 120 * theme.uiScale ?  implicitWidth : 0
+
+
+            iconItem.transform: Rotation {
+                origin.x: expand.iconItem.width / 2
+                origin.y: expand.iconItem.height / 2
+                angle: expand.loading ? 0 : collapsed ? 180 : 90
+
+                Behavior on angle { HNumberAnimation {} }
+            }
+
+            Behavior on Layout.maximumWidth { HNumberAnimation {} }
+            Behavior on opacity { HNumberAnimation {} }
+        }
     }
 }

src/gui/MainPane/MainPane.qml

@@ -45,6 +45,12 @@ HDrawer {
     HColumnLayout {
         anchors.fill: parent
 
+        TopBar {
+            Layout.fillWidth: true
+            Layout.fillHeight: false
+            Layout.preferredHeight: theme.baseElementsHeight
+        }
+
         AccountRoomsList {
             id: mainPaneList
             clip: true
@@ -60,7 +66,6 @@ HDrawer {
             Layout.fillWidth: true
             Layout.fillHeight: false
             Layout.preferredHeight: theme.baseElementsHeight
-
         }
     }
 }

src/gui/MainPane/Room.qml

@@ -7,10 +7,14 @@ import ".."
 import "../Base"
 
 HTileDelegate {
-    spacing: theme.spacing
     backgroundColor: theme.mainPane.room.background
     opacity: model.left ? theme.mainPane.room.leftRoomOpacity : 1
 
+    topPadding: theme.spacing / (model.index === 0 ? 1 : 1.5)
+    bottomPadding: theme.spacing / (model.index === view.count - 1 ? 1 : 1.5)
+    leftPadding: theme.spacing * 2
+    rightPadding: theme.spacing
+
     image: HRoomAvatar {
         roomId: model.id
         displayName: model.display_name

src/gui/MainPane/TopBar.qml

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import "../Base"
+
+Rectangle {
+    color: theme.mainPane.topBar.background
+
+    HRowLayout {
+        anchors.fill: parent
+
+        HButton {
+            icon.name: "placeholder-logo"
+            icon.color: theme.mainPane.topBar.placeholderLogo
+
+            text: qsTr("%1 %2")
+                  .arg(Qt.application.displayName).arg(Qt.application.version)
+            label.color: theme.mainPane.topBar.nameVersionLabel
+            label.horizontalAlignment: Text.AlignLeft
+            toolTip.text: qsTr("Open project repository")
+
+            onClicked:
+                Qt.openUrlExternally("https://github.com/mirukan/mirage")
+
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+        }
+
+        HButton {
+            icon.name: "developper-console"
+            toolTip.text: qsTr("Developper console")
+
+            onClicked: mainUI.shortcuts.toggleConsole()  // FIXME
+
+            Layout.fillHeight: true
+        }
+
+        HButton {
+            icon.name: "reload-config-files"
+            toolTip.text: qsTr("Reload config files")
+
+            onClicked: mainUI.reloadSettings()
+
+            Layout.fillHeight: true
+        }
+
+        HButton {
+            icon.name: "settings"
+            toolTip.text: qsTr("Open config folder")
+
+            onClicked: py.callCoro("get_config_dir", [], Qt.openUrlExternally)
+
+            Layout.fillHeight: true
+        }
+    }
+}

src/gui/Pages/Chat/Timeline/EventDelegate.qml

@@ -168,7 +168,6 @@ HColumnLayout {
         HMenuItem {
             icon.name: "debug"
             text: qsTr("Debug this event")
-            visible: debugMode
             onTriggered: eventContent.debugConsoleLoader.toggle()
         }
 

src/gui/UI.qml

@@ -24,6 +24,11 @@ Item {
     readonly property alias pressAnimation: pressAnimation
 
 
+    function reloadSettings() {
+        py.loadSettings(() => { mainUI.pressAnimation.start() })
+    }
+
+
     SequentialAnimation {
         id: pressAnimation
         HNumberAnimation {

src/icons/thin/developper-console.svg

@@ -0,0 +1,3 @@
+<svg height="1792" viewBox="0 0 1792 1792" width="1792" xmlns="http://www.w3.org/2000/svg">
+    <path d="m649 983-466 466q-10 10-23 10t-23-10l-50-50q-10-10-10-23t10-23l393-393-393-393q-10-10-10-23t10-23l50-50q10-10 23-10t23 10l466 466q10 10 10 23t-10 23zm1079 457v64q0 14-9 23t-23 9h-960q-14 0-23-9t-9-23v-64q0-14 9-23t23-9h960q14 0 23 9t9 23z"/>
+</svg>

src/icons/thin/placeholder-logo.svg

@@ -0,0 +1,3 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m12 0-12 12.001 12 11.999 12.001-11.999zm-9.171 12.001 9.171-9.172 9.172 9.172-9.172 9.172z"/>
+</svg>

src/icons/thin/reload-config-files.svg

@@ -0,0 +1,3 @@
+<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+    <path d="m14.408 24h-13.408v-24h10.189c3.163 0 9.811 7.223 9.811 9.614v2.068c-.622-.296-1.293-.502-2-.603v-.623c0-4.106-6-2.456-6-2.456s1.518-6-2.638-6h-7.362v20h9.26c.566.81 1.299 1.49 2.148 2zm2.257-8.669c.402-.206.852-.331 1.335-.331 1.455 0 2.67 1.042 2.941 2.418l1.96-.398c-.456-2.291-2.475-4.02-4.901-4.02-.957 0-1.845.278-2.604.745l-1.396-1.745-1 5h5zm5.335 8.669-1.396-1.745c-.759.467-1.647.745-2.604.745-2.426 0-4.445-1.729-4.901-4.02l1.96-.398c.271 1.376 1.486 2.418 2.941 2.418.483 0 .933-.125 1.335-.331l-1.335-1.669h5z"/>
+</svg>

src/icons/thin/settings.svg

@@ -1,3 +1,3 @@
 <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
-    <path d="m24 13.616v-3.232c-1.651-.587-2.694-.752-3.219-2.019v-.001c-.527-1.271.1-2.134.847-3.707l-2.285-2.285c-1.561.742-2.433 1.375-3.707.847h-.001c-1.269-.526-1.435-1.576-2.019-3.219h-3.232c-.582 1.635-.749 2.692-2.019 3.219h-.001c-1.271.528-2.132-.098-3.707-.847l-2.285 2.285c.745 1.568 1.375 2.434.847 3.707-.527 1.271-1.584 1.438-3.219 2.02v3.232c1.632.58 2.692.749 3.219 2.019.53 1.282-.114 2.166-.847 3.707l2.285 2.286c1.562-.743 2.434-1.375 3.707-.847h.001c1.27.526 1.436 1.579 2.019 3.219h3.232c.582-1.636.75-2.69 2.027-3.222h.001c1.262-.524 2.12.101 3.698.851l2.285-2.286c-.744-1.563-1.375-2.433-.848-3.706.527-1.271 1.588-1.44 3.221-2.021zm-12 2.384c-2.209 0-4-1.791-4-4s1.791-4 4-4 4 1.791 4 4-1.791 4-4 4z"/>
+    <path d="m24 14.187v-4.374c-2.148-.766-2.726-.802-3.027-1.529-.303-.729.083-1.169 1.059-3.223l-3.093-3.093c-2.026.963-2.488 1.364-3.224 1.059-.727-.302-.768-.889-1.527-3.027h-4.375c-.764 2.144-.8 2.725-1.529 3.027-.752.313-1.203-.1-3.223-1.059l-3.093 3.093c.977 2.055 1.362 2.493 1.059 3.224-.302.727-.881.764-3.027 1.528v4.375c2.139.76 2.725.8 3.027 1.528.304.734-.081 1.167-1.059 3.223l3.093 3.093c1.999-.95 2.47-1.373 3.223-1.059.728.302.764.88 1.529 3.027h4.374c.758-2.131.799-2.723 1.537-3.031.745-.308 1.186.099 3.215 1.062l3.093-3.093c-.975-2.05-1.362-2.492-1.059-3.223.3-.726.88-.763 3.027-1.528zm-4.875.764c-.577 1.394-.068 2.458.488 3.578l-1.084 1.084c-1.093-.543-2.161-1.076-3.573-.49-1.396.581-1.79 1.693-2.188 2.877h-1.534c-.398-1.185-.791-2.297-2.183-2.875-1.419-.588-2.507-.045-3.579.488l-1.083-1.084c.557-1.118 1.066-2.18.487-3.58-.579-1.391-1.691-1.784-2.876-2.182v-1.533c1.185-.398 2.297-.791 2.875-2.184.578-1.394.068-2.459-.488-3.579l1.084-1.084c1.082.538 2.162 1.077 3.58.488 1.392-.577 1.785-1.69 2.183-2.875h1.534c.398 1.185.792 2.297 2.184 2.875 1.419.588 2.506.045 3.579-.488l1.084 1.084c-.556 1.121-1.065 2.187-.488 3.58.577 1.391 1.689 1.784 2.875 2.183v1.534c-1.188.398-2.302.791-2.877 2.183zm-7.125-5.951c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3zm0-2c-2.762 0-5 2.238-5 5s2.238 5 5 5 5-2.238 5-5-2.238-5-5-5z"/>
 </svg>

src/themes/Glass.qpl

@@ -256,6 +256,11 @@ ui:
 mainPane:
     color background: colors.mediumBackground
 
+    topBar:
+        color background:       colors.strongBackground
+        color placeholderLogo:  colors.accentElement
+        color nameVersionLabel: colors.text
+
     account:
         real collapsedOpacity: 0.3
         color background:      "transparent"

src/themes/Midnight.qpl

@@ -263,6 +263,11 @@ ui:
 mainPane:
     color background: colors.mediumBackground
 
+    topBar:
+        color background:       colors.strongBackground
+        color placeholderLogo:  colors.accentElement
+        color nameVersionLabel: colors.text
+
     account:
         real collapsedOpacity: 0.3
         color background:      "transparent"