Add tooltips to buttons and room invite button

src/icons/light-thin/room-send-invite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M9.602 3.7c-1.154 1.937-.635 5.227 1.424 9.025.93 1.712.697 3.02.338 3.815-.982 2.178-3.675 2.799-6.525 3.456-1.964.454-1.839.87-1.839 4.004h-1.995l-.005-1.241c0-2.52.199-3.975 3.178-4.663 3.365-.777 6.688-1.473 5.09-4.418-4.733-8.729-1.35-13.678 3.732-13.678 3.321 0 5.97 2.117 5.97 6.167 0 3.555-1.949 6.833-2.383 7.833h-2.115c.392-1.536 2.499-4.366 2.499-7.842 0-5.153-5.867-4.985-7.369-2.458zm13.398 15.3h-3v-3h-2v3h-3v2h3v3h2v-3h3v-2z"/></svg>

src/qml/Base/HAvatar.qml

@@ -50,9 +50,7 @@ HRectangle {
         fillMode: Image.PreserveAspectCrop
         source: Qt.resolvedUrl(imageUrl)
 
-        HoverHandler {
+        HoverHandler { id: hoverHandler }
-            id: hoverHandler
-        }
 
         HToolTip {
             id: avatarToolTip
@@ -65,17 +63,10 @@ HRectangle {
             height: width
             delay: 1000
 
-            background: HRectangle {
-                id: background
-                border.color: "black"
-                border.width: 2
-            }
-
             HImage {
                 id: avatarToolTipImage
-                anchors.centerIn: parent
+                sourceSize.width: parent.width
-                sourceSize.width: parent.width - background.border.width * 2
+                sourceSize.height: parent.height
-                sourceSize.height: parent.height - background.border.width * 2
                 width: sourceSize.width
                 height: sourceSize.width
                 fillMode: Image.PreserveAspectCrop

src/qml/Base/HButton.qml

@@ -21,6 +21,11 @@ Button {
     property bool loading: false
     property bool circle: false
 
+    property HToolTip toolTip: HToolTip {
+        id: toolTip
+        visible: text && hovered
+    }
+
 
     background: HButtonBackground {
         button: button

src/qml/Base/HMenuItem.qml

@@ -5,9 +5,9 @@ MenuItem {
     id: menuItem
     spacing: theme.spacing
     leftPadding: spacing
-    rightPadding: spacing
+    rightPadding: leftPadding
     topPadding: spacing / 1.75
-    bottomPadding: spacing / 1.75
+    bottomPadding: topPadding
     height: visible ? implicitHeight : 0
 
 

src/qml/Base/HToolTip.qml

@@ -2,12 +2,25 @@ import QtQuick 2.12
 import QtQuick.Controls 2.12
 
 ToolTip {
-    // Be sure to have a width and height set, to prevent the tooltip from
-    // going out of the window's boundaries
-
     id: toolTip
-    delay: 150
+    delay: theme.controls.toolTip.delay
-    padding: 0
+    padding: background.border.width
+
+    background: HRectangle {
+        id: background
+        color: theme.controls.toolTip.background
+        border.color: theme.controls.toolTip.border
+        border.width: theme.controls.toolTip.borderWidth
+    }
+
+    contentItem: HLabel {
+        color: theme.controls.toolTip.text
+        text: toolTip.text
+        leftPadding: theme.spacing / 1.5
+        rightPadding: leftPadding
+        topPadding: theme.spacing / 2
+        bottomPadding: topPadding
+    }
 
     enter: Transition {
         HNumberAnimation { property: "opacity"; from: 0.0; to: 1.0 }
@@ -21,6 +34,6 @@ ToolTip {
     }
 
     HoverHandler {
-        onHoveredChanged: if (!hovered) { toolTip.hide() }
+        onHoveredChanged: if (! hovered) toolTip.hide()
     }
 }

src/qml/Chat/RoomHeader.qml

@@ -80,6 +80,10 @@ HRectangle {
                     height: parent.height
                     autoExclusive: true
                     checked: activeButton == modelData
+                    enabled: modelData == "members"
+                    toolTip.text: qsTr(
+                        modelData.charAt(0).toUpperCase() + modelData.slice(1)
+                    )
                     onClicked: activeButton =
                         activeButton == modelData ?  null : modelData
                 }

src/qml/Chat/RoomSidePane/MembersView.qml

@@ -40,15 +40,29 @@ HColumnLayout {
         }
     }
 
+    HRowLayout {
+        Layout.minimumHeight: theme.baseElementsHeight
+        Layout.maximumHeight: Layout.minimumHeight
+
         HTextField {
             id: filterField
             placeholderText: qsTr("Filter members")
-        backgroundColor: theme.sidePane.filterRooms.background
+            backgroundColor: theme.chat.roomSidePane.filterMembers.background
             bordered: false
 
             onTextChanged: filterLimiter.requestFire()
 
             Layout.fillWidth: true
-        Layout.preferredHeight: theme.baseElementsHeight
+            Layout.fillHeight: true
+        }
+
+        HButton {
+            icon.name: "room-send-invite"
+            iconItem.dimension: parent.height
+            toolTip.text: qsTr("Invite to this room")
+            backgroundColor: theme.chat.roomSidePane.inviteButton.background
+
+            Layout.fillHeight: true
+        }
     }
 }

src/qml/SidePane/DelegateAccount.qml

@@ -58,6 +58,7 @@ HTileDelegate {
         backgroundColor: "transparent"
         padding: sidePane.currentSpacing / 1.5
         rightPadding: leftPadding
+        toolTip.text: collapsed ? qsTr("Expand") : qsTr("Collapse")
         onClicked: accountDelegate.toggleCollapse()
 
         visible: opacity > 0

src/qml/SidePane/PaneToolBar.qml

@@ -9,14 +9,16 @@ HRowLayout {
     property alias roomFilter: filterField.text
 
     Layout.fillWidth: true
-    Layout.preferredHeight: theme.baseElementsHeight
+    Layout.minimumHeight: theme.baseElementsHeight
+    Layout.maximumHeight: Layout.minimumHeight
 
     HButton {
         icon.name: "add-account"
+        toolTip.text: qsTr("Add another account")
         backgroundColor: theme.sidePane.settingsButton.background
         onClicked: pageLoader.showPage("SignIn")
 
-        Layout.preferredHeight: parent.height
+        Layout.fillHeight: true
     }
 
     HTextField {
@@ -26,7 +28,7 @@ HRowLayout {
         bordered: false
 
         Layout.fillWidth: true
-        Layout.preferredHeight: parent.height
+        Layout.fillHeight: true
 
         onTextChanged: {
             if (window.uiState.sidePaneFilter == text) return

src/themes/Default.qpl

@@ -136,6 +136,13 @@ controls:
         color background: colors.inputBackground
         color text:       colors.text
 
+    toolTip:
+        int delay:        500
+        color background: colors.inputBackground
+        color text:       colors.text
+        color border:     "black"
+        int borderWidth:  2
+
     avatar:
         int size:   baseElementsHeight
         int radius: theme.radius
@@ -209,6 +216,12 @@ chat:
             color name:       colors.text
             color subtitle:   colors.dimText
 
+        inviteButton:
+            color background: colors.inputBackground
+
+        filterMembers:
+            color background: colors.inputBackground
+
     eventList:
         int ownEventsOnRightUnderWidth: 768
         color background:               "transparent"