1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2017-09-18 12:46:03 -04:00
parent 6b5c8e2380
commit 25d8cf9179
8 changed files with 22 additions and 28 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,13 +1,10 @@
<form class="uploadItemImageForm" style="max-width: 100%;">
<h2>${HeaderAddUpdateImage}</h2>
<div>
<p>${LabelJpgPngOnly}</p>
<input type="file" accept="image/*" id="uploadImage" name="uploadImage" />
<br />
<br />
<div id="imageDropZone" class="imageDropZone">
<h3>${LabelDropImageHere}</h3>
<output id="imageOutput"></output>
<div id="userImageDropZone" class="imageDropZone fieldDescription">
<div>${LabelDropImageHere}</div>
<output id="imageOutput" 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="uploadImage" name="uploadImage" style="position: absolute;top:0;left:0;right:0;bottom:0;width:100%;opacity:0;" />
</div>
<div id="fldUpload" style="display: none;">
<br />
@ -26,7 +23,7 @@
<option value="Thumb">${OptionThumb}</option>
</select>
</div>
<button is="emby-button" type="submit" class="raised submit block">
<button is="emby-button" type="submit" class="raised button-submit block">
<span>${ButtonUpload}</span>
</button>
</div>

File diff suppressed because one or more lines are too long

View file

@ -1 +1 @@
body,html{margin:0;padding:0;height:100%}.backgroundContainer{position:fixed;top:0;left:0;right:0;bottom:0;contain:layout style}html{background-color:#242424;line-height:1.35}.smallerFontSize{font-size:82%}h1,h2,h3{margin-top:1em}body{overflow-y:scroll!important;overflow-x:hidden;background-color:transparent!important;-webkit-font-smoothing:antialiased}body.autoScrollY{overflow-y:auto!important}.mainAnimatedPage{contain:style!important}.pageContainer{overflow-x:visible!important}.bodyWithPopupOpen{overflow-y:hidden!important}.libraryPage h1 a{color:inherit!important}h1 a:hover{text-decoration:underline}div[data-role=page]{outline:0}.hide{display:none!important}.pageTitle{margin-top:0;font-family:inherit}.fieldDescription{padding-left:.15em;font-weight:400;white-space:normal!important}.fieldDescription+.fieldDescription{margin-top:.3em}div[data-role=content]{border-width:0;overflow:visible;overflow-x:hidden;padding:1em}.content-primary,.padded-bottom-page,.page,.pageWithAbsoluteTabs .pageTabContent{padding-bottom:14em!important}.supporterPromotionContainer{margin:0 0 2em}@media all and (min-width:80em){.supporterPromotionContainer{position:fixed;top:120px;right:0}}.fullWidthContent .supporterPromotionContainer{position:static!important}@media all and (min-width:50em){.readOnlyContent,form{max-width:54em}.supporterPromotionContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.supporterPromotion{text-align:center;padding:0 2em}.supporterPromotion button{padding-left:2em;padding-right:2em}}.imageDropZone{border:.25em dashed #bbb;-webkit-border-radius:.3em;border-radius:.3em;padding:1.6em;text-align:center;color:#bbb}
body,html{margin:0;padding:0;height:100%}.backgroundContainer{position:fixed;top:0;left:0;right:0;bottom:0;contain:layout style}html{background-color:#242424;line-height:1.35}.smallerFontSize{font-size:82%}h1,h2,h3{margin-top:1em}body{overflow-y:scroll!important;overflow-x:hidden;background-color:transparent!important;-webkit-font-smoothing:antialiased}body.autoScrollY{overflow-y:auto!important}.mainAnimatedPage{contain:style!important}.pageContainer{overflow-x:visible!important}.bodyWithPopupOpen{overflow-y:hidden!important}.libraryPage h1 a{color:inherit!important}h1 a:hover{text-decoration:underline}div[data-role=page]{outline:0}.hide{display:none!important}.pageTitle{margin-top:0;font-family:inherit}.fieldDescription{padding-left:.15em;font-weight:400;white-space:normal!important}.fieldDescription+.fieldDescription{margin-top:.3em}div[data-role=content]{border-width:0;overflow:visible;overflow-x:hidden;padding:1em}.content-primary,.padded-bottom-page,.page,.pageWithAbsoluteTabs .pageTabContent{padding-bottom:14em!important}.supporterPromotionContainer{margin:0 0 2em}@media all and (min-width:80em){.supporterPromotionContainer{position:fixed;top:120px;right:0}}.fullWidthContent .supporterPromotionContainer{position:static!important}@media all and (min-width:50em){.readOnlyContent,form{max-width:54em}.supporterPromotionContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;flex-direction:row-reverse}.supporterPromotion{text-align:center;padding:0 2em}.supporterPromotion button{padding-left:2em;padding-right:2em}}.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}

View file

@ -22,22 +22,19 @@
<form class="newImageForm userProfileSettingsForm hide" style="margin: 1em auto 0;">
<div is="emby-collapse" title="${HeaderUploadNewImage}">
<div class="collapseContent">
<div id="fldNewImage">
<p>${ImageUploadAspectRatioHelp}</p>
<input type="file" accept="image/*" id="uploadUserImage" name="uploadUserImage" />
<h1>${HeaderUploadNewImage}</h1>
<div id="userImageDropZone" class="imageDropZone">
<h3>${LabelDropImageHere}</h3>
<output id="userImageOutput"></output>
</div>
</div>
<div id="fldNewImagePreview"></div>
<div id="fldUpload" class="hide">
<button type="submit" data-icon="check">${ButtonUpload}</button>
<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>

View file

@ -1 +1 @@
define(["scripts/userpasswordpage","loading","libraryMenu","apphost","emby-linkbutton"],function(Userpasswordpage,loading,libraryMenu,appHost){"use strict";function reloadUser(page){var userId=getParameterByName("userId");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,fldImage=page.querySelector("#fldImage");imageUrl=user.PrimaryImageTag?ApiClient.getUserImageUrl(user.Id,{height:200,tag:user.PrimaryImageTag,type:"Primary"}):"css/images/logindefault.png",fldImage.classList.remove("hide"),fldImage.innerHTML="<img width='140px' src='"+imageUrl+"' />";var showImageEditing=!1;"Guest"==user.ConnectLinkType?page.querySelector(".connectMessage").classList.remove("hide"):user.PrimaryImageTag?(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")):(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")),Dashboard.getCurrentUser().then(function(loggedInUser){showImageEditing&&appHost.supports("fileinput")&&(loggedInUser.Policy.IsAdministrator||user.Policy.EnableUserPreferenceAccess)?(page.querySelector(".newImageForm").classList.remove("hide"),page.querySelector("#btnDeleteImage").classList.remove("hide")):(page.querySelector(".newImageForm").classList.add("hide"),page.querySelector("#btnDeleteImage").classList.add("hide"))}),loading.hide()})}function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){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:break;default:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))})}}function onFileReaderAbort(evt){loading.hide(),require(["toast"],function(toast){toast(Globalize.translate("FileReadCancelled"))})}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return page.querySelector("#userImageOutput").innerHTML="",page.querySelector("#fldUpload").classList.add("hide"),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(e){var html=['<img style="max-width:500px;max-height:200px;" src="',e.target.result,'" title="',escape(file.name),'"/>'].join("");page.querySelector("#userImageOutput").innerHTML=html,page.querySelector("#fldUpload").classList.remove("hide")},reader.readAsDataURL(file)}function onImageDragOver(e){return e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="Copy",!1}var currentFile;return function(view,params){reloadUser(view);var userImageDropZone=(new Userpasswordpage(view,params),view.querySelector("#userImageDropZone"));userImageDropZone.addEventListener("dragOver",onImageDragOver),userImageDropZone.addEventListener("drop",function(e){return e.preventDefault(),setFiles(view,e.originalEvent.dataTransfer.files),!1}),view.querySelector("#btnDeleteImage").addEventListener("click",function(){require(["confirm"],function(confirm){confirm(Globalize.translate("DeleteImageConfirmation"),Globalize.translate("DeleteImage")).then(function(){loading.show();var userId=getParameterByName("userId");ApiClient.deleteUserImage(userId,"primary").then(function(){loading.hide(),reloadUser(view)})})})}),view.querySelector(".newImageForm").addEventListener("submit",function(e){var file=currentFile;if(!file)return!1;if("image/png"!=file.type&&"image/jpeg"!=file.type&&"image/jpeg"!=file.type)return!1;loading.show();var userId=getParameterByName("userId");return ApiClient.uploadUserImage(userId,"Primary",file).then(function(){loading.hide(),reloadUser(view)}),e.preventDefault(),!1}),view.querySelector("#uploadUserImage").addEventListener("change",function(e){setFiles(view,e.target.files)})}});
define(["scripts/userpasswordpage","loading","libraryMenu","apphost","emby-linkbutton"],function(Userpasswordpage,loading,libraryMenu,appHost){"use strict";function reloadUser(page){var userId=getParameterByName("userId");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,fldImage=page.querySelector("#fldImage");imageUrl=user.PrimaryImageTag?ApiClient.getUserImageUrl(user.Id,{height:200,tag:user.PrimaryImageTag,type:"Primary"}):"css/images/logindefault.png",fldImage.classList.remove("hide"),fldImage.innerHTML="<img width='140px' src='"+imageUrl+"' />";var showImageEditing=!1;"Guest"==user.ConnectLinkType?page.querySelector(".connectMessage").classList.remove("hide"):user.PrimaryImageTag?(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")):(showImageEditing=!0,page.querySelector(".connectMessage").classList.add("hide")),Dashboard.getCurrentUser().then(function(loggedInUser){showImageEditing&&appHost.supports("fileinput")&&(loggedInUser.Policy.IsAdministrator||user.Policy.EnableUserPreferenceAccess)?(page.querySelector(".newImageForm").classList.remove("hide"),user.PrimaryImageTag?page.querySelector("#btnDeleteImage").classList.remove("hide"):page.querySelector("#btnDeleteImage").classList.add("hide")):(page.querySelector(".newImageForm").classList.add("hide"),page.querySelector("#btnDeleteImage").classList.add("hide"))}),loading.hide()})}function onFileReaderError(evt){switch(loading.hide(),evt.target.error.code){case evt.target.error.NOT_FOUND_ERR:require(["toast"],function(toast){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:break;default:require(["toast"],function(toast){toast(Globalize.translate("FileReadError"))})}}function onFileReaderAbort(evt){loading.hide(),require(["toast"],function(toast){toast(Globalize.translate("FileReadCancelled"))})}function setFiles(page,files){var file=files[0];if(!file||!file.type.match("image.*"))return page.querySelector("#userImageOutput").innerHTML="",page.querySelector("#fldUpload").classList.add("hide"),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(e){var html=['<img style="max-width:100%;max-height:100%;" src="',e.target.result,'" title="',escape(file.name),'"/>'].join("");page.querySelector("#userImageOutput").innerHTML=html,page.querySelector("#fldUpload").classList.remove("hide")},reader.readAsDataURL(file)}function onImageDragOver(e){return e.preventDefault(),e.originalEvent.dataTransfer.dropEffect="Copy",!1}var currentFile;return function(view,params){reloadUser(view);var userImageDropZone=(new Userpasswordpage(view,params),view.querySelector("#userImageDropZone"));userImageDropZone.addEventListener("dragOver",onImageDragOver),view.querySelector("#btnDeleteImage").addEventListener("click",function(){require(["confirm"],function(confirm){confirm(Globalize.translate("DeleteImageConfirmation"),Globalize.translate("DeleteImage")).then(function(){loading.show();var userId=getParameterByName("userId");ApiClient.deleteUserImage(userId,"primary").then(function(){loading.hide(),reloadUser(view)})})})}),view.querySelector(".newImageForm").addEventListener("submit",function(e){var file=currentFile;if(!file)return!1;if("image/png"!=file.type&&"image/jpeg"!=file.type&&"image/jpeg"!=file.type)return!1;loading.show();var userId=getParameterByName("userId");return ApiClient.uploadUserImage(userId,"Primary",file).then(function(){loading.hide(),reloadUser(view)}),e.preventDefault(),!1}),view.querySelector("#uploadUserImage").addEventListener("change",function(e){setFiles(view,e.target.files)})}});

View file

@ -853,7 +853,7 @@
"HeaderImages": "Images",
"HeaderBackdrops": "Backdrops",
"HeaderAddUpdateImage": "Add/Update Image",
"LabelDropImageHere": "Drop image here",
"LabelDropImageHere": "Drop image here, or click to browse.",
"LabelJpgPngOnly": "JPG/PNG only",
"LabelImageType": "Image type:",
"OptionPrimary": "Primary",