Add upload avatar hover overlay

Also fix name colors and always use fit-crop mode for avatars.

TODO.md

@@ -19,6 +19,9 @@
 - Handle thumbnail response status 400
 - "Loading..." if going to edit account page while it's loading
 - Improve avatar tooltips position, add stuff to room tooltips (last msg?)
+- Accept drag and dropping a picture in account settings to set avatar
+- When all the events loaded on beginning in a room are name/avatar changes,
+  no last event room text is displayed
 
 - Qt 5.12
   - New input handlers

src/icons/upload_avatar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#e6e6e6" d="M16 16h-3v5h-2v-5h-3l4-4 4 4zm3.479-5.908c-.212-3.951-3.473-7.092-7.479-7.092s-7.267 3.141-7.479 7.092c-2.57.463-4.521 2.706-4.521 5.408 0 3.037 2.463 5.5 5.5 5.5h3.5v-2h-3.5c-1.93 0-3.5-1.57-3.5-3.5 0-2.797 2.479-3.833 4.433-3.72-.167-4.218 2.208-6.78 5.567-6.78 3.453 0 5.891 2.797 5.567 6.78 1.745-.046 4.433.751 4.433 3.72 0 1.93-1.57 3.5-3.5 3.5h-3.5v2h3.5c3.037 0 5.5-2.463 5.5-5.5 0-2.702-1.951-4.945-4.521-5.408z"/></svg>

src/qml/Base/HAvatar.qml

@@ -16,6 +16,8 @@ HRectangle {
     property var toolTipImageUrl: imageUrl
     property alias fillMode: avatarImage.fillMode
 
+    readonly property alias hovered: hoverHandler.hovered
+
     onImageUrlChanged: if (imageUrl) { avatarImage.source = imageUrl }
 
     onToolTipImageUrlChanged: if (imageUrl) {
@@ -45,7 +47,7 @@ HRectangle {
         z: 2
         sourceSize.width: params.width
         sourceSize.height: params.height
-        fillMode: params.fillMode
+        fillMode: Image.PreserveAspectCrop
 
         HoverHandler {
             id: hoverHandler

src/qml/Base/HFileDialogOpener.qml

@@ -36,7 +36,7 @@ Item {
             )
 
         title: "Select file"
-        modality: Qt.WindowModal
+        modality: Qt.NonModal
 
         onVisibleChanged: if (visible) {
             selectedFile = Qt.binding(() => Qt.resolvedUrl(currentFile))

src/qml/Pages/EditAccount/Profile.qml

@@ -51,6 +51,38 @@ HGridLayout {
         Layout.preferredWidth: Math.min(flickable.height, avatarPreferredSize)
         Layout.preferredHeight: Layout.preferredWidth
 
+        HRectangle {
+            z: 10
+            visible: opacity > 0
+            opacity: ! avatar.imageUrl || avatar.hovered ? 1 : 0
+            Behavior on opacity { HNumberAnimation {} }
+
+            anchors.fill: parent
+            color: Qt.hsla(0, 0, 0, avatar.imageUrl ? 0.7 : 1)
+
+            HColumnLayout {
+                anchors.centerIn: parent
+                spacing: currentSpacing
+
+                HIcon {
+                    svgName: "upload_avatar"
+                    dimension: 64
+                    Layout.alignment: Qt.AlignCenter
+                }
+
+                Item { Layout.preferredHeight: 8 }
+
+                HLabel {
+                    text: qsTr("Upload profile picture")
+                    color: Qt.hsla(0, 0, 0.9, 1)
+                    font.pixelSize: theme.fontSize.big
+                    wrapMode: Text.WordWrap
+                    Layout.fillWidth: true
+                    Layout.alignment: Qt.AlignCenter
+                }
+            }
+        }
+
         HFileDialogOpener {
             id: fileDialog
             fileType: HFileDialogOpener.FileType.Images
@@ -69,7 +101,7 @@ HGridLayout {
 
             HLabel {
                 text: qsTr("User ID:<br>%1")
-                      .arg(Utils.coloredNameHtml(userId, userId))
+                      .arg(Utils.coloredNameHtml(userId, userId, userId))
                 textFormat: Text.StyledText
                 wrapMode: Text.Wrap
 

src/qml/utils.js

@@ -45,10 +45,10 @@ function nameColor(name) {
 }
 
 
-function coloredNameHtml(name, alt_id) {
+function coloredNameHtml(name, user_id, display_text) {
     // substring: remove leading @
-    return "<font color='" + nameColor(alt_id.substring(1)) + "'>" +
+    return "<font color='" + nameColor(name || alt_id.substring(1)) + "'>" +
-           escapeHtml(name || alt_id) +
+           escapeHtml(display_text || name || alt_id) +
            "</font>"
 }