Move composer alias "?" icon to be inside field

Be more consistent with the user ID field and its copy button.

src/gui/Base/Buttons/FieldHelpButton.qml

@@ -0,0 +1,19 @@
+// Copyright Mirage authors & contributors <https://github.com/mirukana/mirage>
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import ".."
+
+HButton {
+    property string helpText
+
+    icon.name: "field-help"
+    iconItem.small: true
+    toolTip.text: helpText
+
+    onClicked: toolTip.instantShow()
+    onActiveFocusChanged: if (! activeFocus && toolTip.visible) toolTip.hide()
+
+    Layout.fillHeight: true
+}

src/gui/Base/HLabeledItem.qml

@@ -13,7 +13,6 @@ HColumnLayout {
     readonly property Item item: itemHolder.children[0]
     readonly property alias label: label
     readonly property alias errorLabel: errorLabel
-    readonly property alias toolTip: toolTip
 
 
     spacing: theme.spacing / 2
@@ -29,32 +28,6 @@ HColumnLayout {
             Layout.fillWidth: true
         }
 
-        HIcon {
-            svgName: "field-tooltip-available"
-            opacity: elementsOpacity
-            visible: toolTip.text
-
-            Binding on colorize {
-                value: theme.colors.accentElement
-                when: hoverHandler.hovered || toolTip.visible
-            }
-        }
-
-        HoverHandler {
-            id: hoverHandler
-            enabled: toolTip.text
-        }
-
-        TapHandler {
-            onTapped: toolTip.instantShow()
-            enabled: toolTip.text
-        }
-
-        HToolTip {
-            id: toolTip
-            visible: toolTip.text && hoverHandler.hovered
-        }
-
         HLoader {
             source: "HBusyIndicator.qml"
             active: loading

src/gui/Pages/AccountSettings/Account.qml

@@ -33,8 +33,8 @@ HFlickableColumnPage {
             )
         }
 
-        if (aliasField.item.changed) {
+        if (aliasFieldItem.changed) {
-            window.settings.writeAliases[userId] = aliasField.item.text
+            window.settings.writeAliases[userId] = aliasFieldItem.text
             window.settingsChanged()
         }
 
@@ -57,7 +57,7 @@ HFlickableColumnPage {
 
     function cancel() {
         nameField.item.reset()
-        aliasField.item.reset()
+        aliasFieldItem.reset()
         fileDialog.selectedFile = ""
         fileDialog.file         = ""
     }
@@ -75,7 +75,7 @@ HFlickableColumnPage {
             enabled:
                 avatar.changed ||
                 nameField.item.changed ||
-                (aliasField.item.changed && ! aliasField.item.error)
+                (aliasFieldItem.changed && ! aliasFieldItem.error)
 
             onClicked: applyChanges()
         }
@@ -270,25 +270,33 @@ HFlickableColumnPage {
             alreadyTakenBy ? qsTr("Taken by %1").arg(alreadyTakenBy) :
             ""
 
-        toolTip.text: qsTr(
-            "From any chat, start a message with specified alias " +
-            "followed by a space to type and send as this " +
-            "account.\n" +
-            "The account must have permission to talk in the room.\n"+
-            "To ignore the alias when typing, prepend it with a space."
-        )
-
         Layout.fillWidth: true
 
-        HTextField {
+        HRowLayout {
             width: parent.width
-            error: aliasField.hasWhiteSpace || aliasField.alreadyTakenBy
+
-            defaultText: aliasField.currentAlias
+            HTextField {
-            placeholderText: qsTr("e.g. %1").arg((
+                id: aliasFieldItem
-                nameField.item.text ||
+                error: aliasField.hasWhiteSpace || aliasField.alreadyTakenBy
-                (ready && account.display_name) ||
+                defaultText: aliasField.currentAlias
-                userId.substring(1)
+                placeholderText: qsTr("e.g. %1").arg((
-            )[0])
+                    nameField.item.text ||
+                    (ready && account.display_name) ||
+                    userId.substring(1)
+                )[0])
+
+                Layout.fillWidth: true
+                Layout.fillHeight: true
+            }
+
+            FieldHelpButton {
+                helpText: qsTr(
+                    "From any chat, start a message with specified alias " +
+                    "followed by a space to type and send as this account.\n" +
+                    "The account must have permission to talk in the room.\n"+
+                    "To ignore the alias when typing, prepend it with a space."
+                )
+            }
         }
     }
 }

src/icons/thin/field-help.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.601 21.5c0 1.38-1.116 2.5-2.499 2.5-1.378 0-2.499-1.12-2.499-2.5s1.121-2.5 2.499-2.5c1.383 0 2.499 1.119 2.499 2.5zm-2.42-21.5c-4.029 0-7.06 2.693-7.06 8h3.955c0-2.304.906-4.189 3.024-4.189 1.247 0 2.57.828 2.684 2.411.123 1.666-.767 2.511-1.892 3.582-2.924 2.78-2.816 4.049-2.816 7.196h3.943c0-1.452-.157-2.508 1.838-4.659 1.331-1.436 2.986-3.222 3.021-5.943.047-3.963-2.751-6.398-6.697-6.398z"/></svg>

src/icons/thin/field-tooltip-available.svg

@@ -1,5 +0,0 @@
-<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg">
-    <path d="m-1.6740984.044417h48.0000004v48h-48.0000004z" fill="none"/>
-    <path d="m10 3c-2.21 0-4 1.79-4 4v28c0 2.21 1.79 4 4 4h8l6 6 6-6h8c2.21 0 4-1.79 4-4v-28c0-2.21-1.79-4-4-4zm2.361328 2.7285156h23.277344c1.837282 0 3.326172 1.5242625 3.326172 3.4042964v23.81836c0 1.880035-1.48889 3.402344-3.326172 3.402344h-6.650391l-4.988281 5.105468-4.988281-5.105468h-6.650391c-1.837282 0-3.326172-1.522309-3.326172-3.402344v-23.81836c0-1.8800339 1.48889-3.4042964 3.326172-3.4042964z"/>
-    <path d="m26.689255 30.476144c0 1.38-1.116 2.5-2.499 2.5-1.378 0-2.499-1.12-2.499-2.5s1.121-2.5 2.499-2.5c1.383 0 2.499 1.119 2.499 2.5zm-2.42-21.5000002c-4.029 0-7.06 2.6930012-7.06 8.0000012h3.955c0-2.304.906-4.189 3.024-4.189 1.247 0 2.57.828 2.684 2.411.123 1.666-.767 2.511-1.892 3.582-2.924 2.78-2.816 4.049-2.816 7.196h3.943c0-1.452-.157-2.508 1.838-4.659 1.331-1.436 2.986-3.222 3.021-5.943.047-3.963-2.751-6.3980012-6.697-6.3980012z"/>
-</svg>