Avatar change working

src/qml/Base/HAvatar.qml

@@ -54,15 +54,23 @@ HRectangle {
         HToolTip {
             id: avatarToolTip
             visible: toolTipImageUrl && hoverHandler.hovered
-            width: 128
-            height: 128
+            width: 192 + background.border.width * 2
+            height: width
+            delay: 1000
+
+            background: HRectangle {
+                id: background
+                border.color: "black"
+                border.width: 2
+            }
 
             HImage {
                 id: avatarToolTipImage
-                width: parent.width
-                height: parent.height
-                sourceSize.width: parent.width
-                sourceSize.height: parent.height
+                anchors.centerIn: parent
+                sourceSize.width: parent.width - background.border.width * 2
+                sourceSize.height: parent.height - background.border.width * 2
+                width: sourceSize.width
+                height: sourceSize.width
                 fillMode: Image.PreserveAspectCrop
             }
         }

src/qml/Base/HFileDialogOpener.qml

@@ -0,0 +1,46 @@
+// Copyright 2019 miruka
+// This file is part of harmonyqml, licensed under LGPLv3.
+
+import QtQuick 2.12
+import Qt.labs.platform 1.1
+
+Item {
+    anchors.fill: parent
+
+    property alias dialog: fileDialog
+    property var selectedFile: null
+
+    enum FileType { All, Images }
+    property int fileType: FileType.All
+
+    TapHandler { onTapped: fileDialog.open() }
+
+    FileDialog {
+        id: fileDialog
+
+        property var filters: ({
+            all:    qsTr("All files") + " (*)",
+            images: qsTr("Image files") +
+                    " (*.jpg *.jpeg *.png *.gif *.bmp *.webp)"
+        })
+
+        nameFilters:
+            fileType == HFileDialogOpener.FileType.Images ?
+            [filters.images, filters.all] :
+            [filters.all]
+
+            folder: StandardPaths.writableLocation(
+                fileType == HFileDialogOpener.FileType.Images ?
+                StandardPaths.PicturesLocation :
+                StandardPaths.HomeLocation
+            )
+
+        title: "Select file"
+        modality: Qt.WindowModal
+
+        onVisibleChanged: if (visible) {
+            selectedFile = Qt.binding(() => Qt.resolvedUrl(currentFile))
+        }
+        onRejected: selectedFile = null
+    }
+}

src/qml/Base/HToolTip.qml

@@ -6,7 +6,7 @@ ToolTip {
     // going out of the window's boundaries
 
     id: toolTip
-    delay: Qt.styleHints.mousePressAndHoldInterval
+    delay: 150
     padding: 0
 
     enter: Transition {

src/qml/Base/HUIButton.qml

@@ -38,18 +38,12 @@ HBaseButton {
                 svgName: loading ? "hourglass" : iconName
                 dimension: iconDimension || contentLayout.height
                 transform: iconTransform
+                opacity: button.enabled ? 1 : 0.7
 
                 Layout.topMargin: verticalMargin
                 Layout.bottomMargin: verticalMargin
                 Layout.leftMargin: horizontalMargin
                 Layout.rightMargin: horizontalMargin
-
-                // Colorize {
-                    // anchors.fill: parent
-                    // source: parent
-                    // visible: ! button.enabled
-                    // saturation: 0
-                // }
             }
 
             HLabel {

src/qml/Base/HUserAvatar.qml

@@ -7,15 +7,16 @@ HAvatar {
     property string userId: ""
     readonly property var userInfo: userId ? users.find(userId) : ({})
 
-    name:
-        userInfo.displayName || userId.substring(1)  // no leading @
-
-    imageUrl:
+    readonly property var defaultImageUrl:
         userInfo.avatarUrl ? ("image://python/" + userInfo.avatarUrl) : null
 
-    toolTipImageUrl:
+    readonly property var defaultToolTipImageUrl:
         userInfo.avatarUrl ? ("image://python/" + userInfo.avatarUrl) : null
 
+    name: userInfo.displayName || userId.substring(1)  // no leading @
+    imageUrl: defaultImageUrl
+    toolTipImageUrl:defaultToolTipImageUrl
+
     //HImage {
         //id: status
         //anchors.right: parent.right

src/qml/Pages/EditAccount/Profile.qml

@@ -9,12 +9,27 @@ import "../../utils.js" as Utils
 
 HGridLayout {
     function applyChanges() {
-        saveButton.loading = true
+        if (nameField.changed) {
+            saveButton.nameChangeRunning = true
 
-        py.callClientCoro(
-            userId, "set_displayname", [nameField.field.text],
-            () => { saveButton.loading = false }
-        )
+            py.callClientCoro(
+                userId, "set_displayname", [nameField.field.text], () => {
+                    saveButton.nameChangeRunning = false
+                }
+            )
+        }
+
+        if (avatar.changed) {
+            saveButton.avatarChangeRunning = true
+            var path = Qt.resolvedUrl(avatar.imageUrl).replace(/^file:/, "")
+
+            py.callClientCoro(
+                userId, "set_avatar_from_file", [path], response => {
+                    saveButton.avatarChangeRunning = false
+                    if (response != true) { print(response) }
+                }
+            )
+        }
     }
 
     columns: 2
@@ -24,8 +39,11 @@ HGridLayout {
     Component.onCompleted: nameField.field.forceActiveFocus()
 
     HUserAvatar {
+        property bool changed: avatar.imageUrl != avatar.defaultImageUrl
+
         id: avatar
         userId: editAccount.userId
+        imageUrl: fileDialog.selectedFile || defaultImageUrl
         toolTipImageUrl: null
 
         Layout.alignment: Qt.AlignHCenter
@@ -33,6 +51,13 @@ HGridLayout {
 
         Layout.preferredWidth: thinMaxWidth
         Layout.preferredHeight: Layout.preferredWidth
+
+        HFileDialogOpener {
+            id: fileDialog
+            fileType: HFileDialogOpener.FileType.Images
+            dialog.title: qsTr("Select profile picture for %1")
+                              .arg(userInfo.displayName)
+        }
     }
 
     HColumnLayout {
@@ -53,6 +78,8 @@ HGridLayout {
             }
 
             HLabeledTextField {
+                property bool changed: field.text != userInfo.displayName
+
                 id: nameField
                 label.text: qsTr("Display name:")
                 field.text: userInfo.displayName
@@ -69,11 +96,15 @@ HGridLayout {
             Layout.alignment: Qt.AlignBottom
 
             HUIButton {
+                property bool nameChangeRunning: false
+                property bool avatarChangeRunning: false
+
                 id: saveButton
                 iconName: "save"
                 text: qsTr("Save")
                 centerText: false
-                enabled: nameField.field.text != userInfo.displayName
+                loading: nameChangeRunning || avatarChangeRunning
+                enabled: nameField.changed || avatar.changed
 
                 Layout.fillWidth: true
                 Layout.alignment: Qt.AlignBottom

src/qml/Window.qml

@@ -18,10 +18,11 @@ ApplicationWindow {
     property bool ready: false
 
     Component.onCompleted: {
-        Qt.application.name        = "harmonyqml"
-        Qt.application.displayName = "Harmony QML"
-        Qt.application.version     = "0.1.0"
-        window.ready = true
+        Qt.application.organization = "harmonyqml"
+        Qt.application.name         = "harmonyqml"
+        Qt.application.displayName  = "Harmony QML"
+        Qt.application.version      = "0.1.0"
+        window.ready                = true
     }
 
     Theme { id: theme }