Improve the layout and behaviour of topbar slightly

3 files changed, 39 insertions, 16 deletions

diff --git a/resources/qml/RoomList.qml b/resources/qml/RoomList.qml

index db255bd3..6780a3f7 100644
--- a/resources/qml/RoomList.qml
+++ b/resources/qml/RoomList.qml
@@ -480,6 +480,8 @@ Page {
 
                     visible: !collapsed
                     Layout.alignment: Qt.AlignVCenter
+                    Layout.preferredWidth: fontMetrics.lineSpacing * 2
+                    Layout.preferredHeight: fontMetrics.lineSpacing * 2
                     image: ":/icons/icons/ui/power-button-off.png"
                     ToolTip.visible: hovered
                     ToolTip.text: qsTr("Logout")
diff --git a/resources/qml/TopBar.qml b/resources/qml/TopBar.qml

index e9f482c9..aec99f43 100644
--- a/resources/qml/TopBar.qml
+++ b/resources/qml/TopBar.qml
@@ -3,8 +3,8 @@
 // SPDX-License-Identifier: GPL-3.0-or-later
 
 import Qt.labs.platform 1.1 as Platform
-import QtQuick 2.12
-import QtQuick.Controls 2.12
+import QtQuick 2.15
+import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.2
 import im.nheko 1.0
 
@@ -28,14 +28,27 @@ Rectangle {
 
     TapHandler {
         onSingleTapped: {
-            if (room)
-                TimelineManager.openRoomSettings(room.roomId);
+            if (room) {
+                let p = topBar.mapToItem(roomTopicC, eventPoint.position.x, eventPoint.position.y);
+                let link = roomTopicC.linkAt(p.x, p.y);
+
+                if (link) {
+                    Nheko.openLink(link);
+                } else {
+                    TimelineManager.openRoomSettings(room.roomId);
+                }
+            }
 
             eventPoint.accepted = true;
         }
         gesturePolicy: TapHandler.ReleaseWithinBounds
     }
 
+    HoverHandler {
+        grabPermissions: PointerHandler.TakeOverForbidden | PointerHandler.CanTakeOverFromAnything
+        //cursorShape: Qt.PointingHandCursor
+    }
+
     GridLayout {
         id: topLayout
 
@@ -51,8 +64,8 @@ Rectangle {
             Layout.row: 0
             Layout.rowSpan: 2
             Layout.alignment: Qt.AlignVCenter
-            width: Nheko.avatarSize
-            height: Nheko.avatarSize
+            Layout.preferredHeight: Nheko.avatarSize - Nheko.paddingMedium
+            Layout.preferredWidth: Nheko.avatarSize - Nheko.paddingMedium
             visible: showBackButton
             image: ":/icons/icons/ui/angle-pointing-to-left.png"
             ToolTip.visible: hovered
@@ -71,11 +84,7 @@ Rectangle {
             roomid: roomId
             userid: isDirect ? directChatOtherUserId : ""
             displayName: roomName
-            onClicked: {
-                if (room)
-                    TimelineManager.openRoomSettings(roomId);
-
-            }
+            enabled: false
         }
 
         Label {
@@ -91,10 +100,13 @@ Rectangle {
         }
 
         MatrixText {
+            id: roomTopicC
             Layout.fillWidth: true
             Layout.column: 2
             Layout.row: 1
             Layout.maximumHeight: fontMetrics.lineSpacing * 2 // show 2 lines
+            selectByMouse: false
+            enabled: false
             clip: true
             text: roomTopic
         }
@@ -103,6 +115,8 @@ Rectangle {
             Layout.column: 3
             Layout.row: 0
             Layout.rowSpan: 2
+            Layout.preferredHeight: Nheko.avatarSize - Nheko.paddingMedium
+            Layout.preferredWidth: Nheko.avatarSize - Nheko.paddingMedium
             visible: isEncrypted
             encrypted: isEncrypted
             trust: trustlevel
@@ -129,6 +143,8 @@ Rectangle {
             Layout.row: 0
             Layout.rowSpan: 2
             Layout.alignment: Qt.AlignVCenter
+            Layout.preferredHeight: Nheko.avatarSize - Nheko.paddingMedium
+            Layout.preferredWidth: Nheko.avatarSize - Nheko.paddingMedium
             image: ":/icons/icons/ui/vertical-ellipsis.png"
             ToolTip.visible: hovered
             ToolTip.text: qsTr("Room options")
@@ -164,4 +180,9 @@ Rectangle {
 
     }
 
+    CursorShape {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+    }
+
 }
diff --git a/resources/qml/dialogs/RoomSettings.qml b/resources/qml/dialogs/RoomSettings.qml

index b0f7730b..32357690 100644
--- a/resources/qml/dialogs/RoomSettings.qml
+++ b/resources/qml/dialogs/RoomSettings.qml
@@ -34,8 +34,8 @@ ApplicationWindow {
         id: contentLayout1
 
         anchors.fill: parent
-        anchors.margins: 10
-        spacing: 10
+        anchors.margins: Nheko.paddingMedium
+        spacing: Nheko.paddingMedium
 
         Avatar {
             url: roomSettings.roomAvatarUrl.replace("mxc://", "image://MxcImage/")
@@ -156,7 +156,7 @@ ApplicationWindow {
 
         GridLayout {
             columns: 2
-            rowSpacing: Nheko.paddingLarge
+            rowSpacing: Nheko.paddingMedium
 
             MatrixText {
                 text: qsTr("SETTINGS")
@@ -278,7 +278,7 @@ ApplicationWindow {
 
             MatrixText {
                 text: roomSettings.roomId
-                font.pixelSize: fontMetrics.font.pixelSize * 1.2
+                font.pixelSize: Math.floor(fontMetrics.font.pixelSize * 0.8)
                 Layout.alignment: Qt.AlignRight
             }
 
@@ -288,7 +288,7 @@ ApplicationWindow {
 
             MatrixText {
                 text: roomSettings.roomVersion
-                font.pixelSize: fontMetrics.font.pixelSize * 1.2
+                font.pixelSize: fontMetrics.font.pixelSize
                 Layout.alignment: Qt.AlignRight
             }