improve the user avatar interface

src/controllers/myprofile.js

@@ -1,4 +1,4 @@
-define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "emby-button"], function (Userpasswordpage, loading, libraryMenu, appHost) {
+define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "emby-button"], function (UserPasswordPage, loading, libraryMenu, appHost) {
     "use strict";
 
     function reloadUser(page) {
@@ -6,10 +6,8 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
         loading.show();
         ApiClient.getUser(userId).then(function (user) {
             page.querySelector(".username").innerHTML = user.Name;
-            var uploadUserImage = page.querySelector("#uploadUserImage");
-            uploadUserImage.value = "";
-            uploadUserImage.dispatchEvent(new CustomEvent("change", {}));
             libraryMenu.setTitle(user.Name);
+
             var imageUrl = "img/logindefault.png";
             if (user.PrimaryImageTag) {
                 imageUrl = ApiClient.getUserImageUrl(user.Id, {
@@ -18,21 +16,17 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
                     type: "Primary"
                 });
             }
-            var fldImage = page.querySelector("#fldImage");
-            fldImage.classList.remove("hide");
-            fldImage.innerHTML = "<img width='140px' src='" + imageUrl + "' />";
-            Dashboard.getCurrentUser().then(function (loggedInUser) {
-                if (appHost.supports("fileinput") && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
-                    page.querySelector(".newImageForm").classList.remove("hide");
 
-                    if (user.PrimaryImageTag) {
+            var userImage = page.querySelector("#image");
-                        page.querySelector("#btnDeleteImage").classList.remove("hide");
+            userImage.src = imageUrl;
-                    } else {
+
-                        page.querySelector("#btnDeleteImage").classList.add("hide");
+            Dashboard.getCurrentUser().then(function (loggedInUser) {
-                    }
+                if (user.PrimaryImageTag) {
-                } else {
+                    page.querySelector("#btnAddImage").classList.add("hide");
-                    page.querySelector(".newImageForm").classList.add("hide");
+                    page.querySelector("#btnDeleteImage").classList.remove("hide");
+                } else if (appHost.supports("fileinput") && (loggedInUser.Policy.IsAdministrator || user.Policy.EnableUserPreferenceAccess)) {
                     page.querySelector("#btnDeleteImage").classList.add("hide");
+                    page.querySelector("#btnAddImage").classList.remove("hide");
                 }
             });
             loading.hide();
@@ -47,13 +41,10 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
                     toast(Globalize.translate("FileNotFound"));
                 });
                 break;
-            case evt.target.error.NOT_READABLE_ERR:
-                require(["toast"], function (toast) {
-                    toast(Globalize.translate("FileReadError"));
-                });
-                break;
             case evt.target.error.ABORT_ERR:
+                onFileReaderAbort();
                 break;
+            case evt.target.error.NOT_READABLE_ERR:
             default:
                 require(["toast"], function (toast) {
                     toast(Globalize.translate("FileReadError"));
@@ -63,51 +54,37 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
 
     function onFileReaderAbort(evt) {
         loading.hide();
-
         require(["toast"], function (toast) {
             toast(Globalize.translate("FileReadCancelled"));
         });
     }
 
     function setFiles(page, files) {
+        var userImage = page.querySelector("#image");
         var file = files[0];
 
         if (!file || !file.type.match("image.*")) {
-            page.querySelector("#userImageOutput").innerHTML = "";
+            return false;
-            page.querySelector("#fldUpload").classList.add("hide");
-            return void (currentFile = null);
         }
 
-        currentFile = file;
         var reader = new FileReader();
         reader.onerror = onFileReaderError;
-
-        reader.onloadstart = function () {
-            page.querySelector("#fldUpload").classList.add("hide");
-        };
-
         reader.onabort = onFileReaderAbort;
-
         reader.onload = function (evt) {
-            var html = ['<img style="max-width:100%;max-height:100%;" src="', evt.target.result, '" title="', escape(file.name), '"/>'].join("");
+            userImage.src = evt.target.result;
-            page.querySelector("#userImageOutput").innerHTML = html;
+            var userId = getParameterByName("userId");
-            page.querySelector("#fldUpload").classList.remove("hide");
+            ApiClient.uploadUserImage(userId, "Primary", file).then(function () {
+                loading.hide();
+                reloadUser(page);
+            });
         };
 
         reader.readAsDataURL(file);
     }
 
-    function onImageDragOver(evt) {
-        evt.preventDefault();
-        evt.originalEvent.dataTransfer.dropEffect = "Copy";
-        return false;
-    }
-
-    var currentFile;
     return function (view, params) {
         reloadUser(view);
-        new Userpasswordpage(view, params);
+        new UserPasswordPage(view, params);
-        view.querySelector("#userImageDropZone").addEventListener("dragOver", onImageDragOver);
         view.querySelector("#btnDeleteImage").addEventListener("click", function () {
             require(["confirm"], function (confirm) {
                 confirm(Globalize.translate("DeleteImageConfirmation"), Globalize.translate("DeleteImage")).then(function () {
@@ -120,25 +97,10 @@ define(["controllers/userpasswordpage", "loading", "libraryMenu", "apphost", "em
                 });
             });
         });
-        view.querySelector(".btnBrowse").addEventListener("click", function () {
+        view.querySelector("#btnAddImage").addEventListener("click", function (evt) {
-            view.querySelector("#uploadUserImage").click();
+            view.querySelector("#uploadImage").click();
         });
-        view.querySelector(".newImageForm").addEventListener("submit", function (evt) {
+        view.querySelector("#uploadImage").addEventListener("change", function (evt) {
-            var file = currentFile;
-            if (!file || "image/png" != file.type && "image/jpeg" != file.type && "image/jpeg" != file.type) {
-                return false;
-            }
-
-            loading.show();
-            var userId = getParameterByName("userId");
-            ApiClient.uploadUserImage(userId, "Primary", file).then(function () {
-                loading.hide();
-                reloadUser(view);
-            });
-            evt.preventDefault();
-            return false;
-        });
-        view.querySelector("#uploadUserImage").addEventListener("change", function (evt) {
             setFiles(view, evt.target.files);
         });
     };

src/css/site.css

@@ -80,29 +80,6 @@ div[data-role=page] {
     }
 }
 
-.imageDropZone {
-    border: .2em dashed currentcolor;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
-    text-align: center;
-    position: relative;
-    height: 12em;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center
-}
-
-.squareImageDropZone {
-    height: 12em;
-    width: 12em
-}
-
 .headerHelpButton {
     margin-left: 1.25em !important;
     padding-bottom: .4em !important;

src/myprofile.html

@@ -1,46 +1,22 @@
 <div id="userImagePage" data-role="page" class="page libraryPage userPreferencesPage userPasswordPage noSecondaryNavPage" data-title="${HeaderProfile}" data-menubutton="false">
-
     <div class="padded-left padded-right padded-bottom-page">
-        <br />
         <div class="readOnlyContent" style="margin: 0 auto; padding: 0 1em;">
-            <div id="fldImage" style="display:inline-block;"></div>
+            <div style="position:relative;display:inline-block;max-width:200px;">
-
+                <img id="image" width="200px" />
-            <div style="vertical-align:top;margin: .5em 0 0 1em;display:inline-block;">
+                <input id="uploadImage" type="file" accept="image/*" style="position:absolute;right:0;width:100%;height:100%;opacity:0;" />
-                <h2 class="username" style="margin: 0;"></h2>
+            </div>
-                <br />
+            <div style="vertical-align:top;margin:1em 2em;display:inline-block;">
+                <h2 class="username" style="margin:0;font-size:xx-large;"></h2>
+                <br/>
+                <button is="emby-button" type="button" class="raised hide" id="btnAddImage">
+                    <span>${ButtonAddImage}</span>
+                </button>
                 <button is="emby-button" type="button" class="raised hide" id="btnDeleteImage">
                     <span>${ButtonDeleteImage}</span>
                 </button>
             </div>
         </div>
-        
-        <form class="newImageForm userProfileSettingsForm hide" style="margin: 1em auto 0;">
-
-            <div class="flex align-items-center" style="margin:1.5em 0;">
-                <h1 style="margin:0;">${HeaderUploadNewImage}</h1>
-
-                <button is="emby-button" type="button" class="fab btnBrowse" style="margin-left:1em;" title="${Browse}">
-                    <i class="md-icon">add</i>
-                </button>
-            </div>
-
-            <div id="fldNewImage">
-
-                <div id="userImageDropZone" class="imageDropZone squareImageDropZone fieldDescription">
-                    <div>${LabelDropImageHere}</div>
-                    <output id="userImageOutput" class="flex align-items-center justify-content-center" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;"></output>
-                    <input type="file" accept="image/*" id="uploadUserImage" name="uploadUserImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
-                </div>
-            </div>
-
-            <div id="fldUpload" class="hide" style="margin-top:1em;">
-                <button is="emby-button" type="submit" class="raised button-submit block">${ButtonUpload}</button>
-            </div>
-
-        </form>
-
         <form class="updatePasswordForm passwordSection userProfileSettingsForm hide" style="margin: 3em auto 0;">
-
             <div class="verticalSection">
                 <h2 class="sectionTitle">
                     ${HeaderPassword}
@@ -55,7 +31,9 @@
                     <input is="emby-input" type="password" id="txtNewPasswordConfirm" label="${LabelNewPasswordConfirm}" autocomplete="off" />
                 </div>
                 <div>
-                    <button is="emby-button" type="submit" class="raised button-submit block"><span>${ButtonSave}</span></button>
+                    <button is="emby-button" type="submit" class="raised button-submit block">
+                        <span>${ButtonSave}</span>
+                    </button>
                     <button is="emby-button" type="button" id="btnResetPassword" class="raised cancel block hide">
                         <span>${ButtonResetPassword}</span>
                     </button>

src/strings/en-us.json

@@ -57,6 +57,7 @@
     "BrowsePluginCatalogMessage": "Browse our plugin catalog to view available plugins.",
     "BurnSubtitlesHelp": "Determines if the server should burn in subtitles when converting video depending on the subtitle format. Avoiding burning in subtitles will improve server performance. Select Auto to burn image based formats (VOBSUB, PGS, SUB/IDX, etc) and certain ASS/SSA subtitles.",
     "ButtonAdd": "Add",
+    "ButtonAddImage": "Add Image",
     "ButtonAddMediaLibrary": "Add Media Library",
     "ButtonAddScheduledTaskTrigger": "Add Trigger",
     "ButtonAddServer": "Add Server",
@@ -78,7 +79,7 @@
     "ButtonEditImages": "Edit images",
     "ButtonEditOtherUserPreferences": "Edit this user's profile, image and personal preferences.",
     "ButtonFilter": "Filter",
-    "ButtonForgotPassword": "Forgot password",
+    "ButtonForgotPassword": "Forgot Password",
     "ButtonFullscreen": "Fullscreen",
     "ButtonGotIt": "Got It",
     "ButtonGuide": "Guide",