mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
improve the user avatar interface
This commit is contained in:
dkanada
parent
0286cc60d5
commit
c679336b87
4 changed files with 40 additions and 122 deletions
|
|
@ -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) {
|
||||
page.querySelector("#btnDeleteImage").classList.remove("hide");
|
||||
} else {
|
||||
page.querySelector("#btnDeleteImage").classList.add("hide");
|
||||
}
|
||||
} else {
|
||||
page.querySelector(".newImageForm").classList.add("hide");
|
||||
var userImage = page.querySelector("#image");
|
||||
userImage.src = imageUrl;
|
||||
|
||||
Dashboard.getCurrentUser().then(function (loggedInUser) {
|
||||
if (user.PrimaryImageTag) {
|
||||
page.querySelector("#btnAddImage").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 = "";
|
||||
page.querySelector("#fldUpload").classList.add("hide");
|
||||
return void (currentFile = null);
|
||||
return false;
|
||||
}
|
||||
|
||||
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("");
|
||||
page.querySelector("#userImageOutput").innerHTML = html;
|
||||
page.querySelector("#fldUpload").classList.remove("hide");
|
||||
userImage.src = evt.target.result;
|
||||
var userId = getParameterByName("userId");
|
||||
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);
|
||||
view.querySelector("#userImageDropZone").addEventListener("dragOver", onImageDragOver);
|
||||
new UserPasswordPage(view, params);
|
||||
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("#uploadUserImage").click();
|
||||
view.querySelector("#btnAddImage").addEventListener("click", function (evt) {
|
||||
view.querySelector("#uploadImage").click();
|
||||
});
|
||||
view.querySelector(".newImageForm").addEventListener("submit", 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) {
|
||||
view.querySelector("#uploadImage").addEventListener("change", function (evt) {
|
||||
setFiles(view, evt.target.files);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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="vertical-align:top;margin: .5em 0 0 1em;display:inline-block;">
|
||||
<h2 class="username" style="margin: 0;"></h2>
|
||||
<br />
|
||||
<div style="position:relative;display:inline-block;max-width:200px;">
|
||||
<img id="image" width="200px" />
|
||||
<input id="uploadImage" type="file" accept="image/*" style="position:absolute;right:0;width:100%;height:100%;opacity:0;" />
|
||||
</div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue