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

update image editor

This commit is contained in:
Luke Pulverenti 2016-08-30 13:39:15 -04:00
parent 32434416d7
commit d5577ab04d
9 changed files with 130 additions and 67 deletions

View file

@ -14,12 +14,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.4.204",
"_release": "1.4.204",
"version": "1.4.206",
"_release": "1.4.206",
"_resolution": {
"type": "version",
"tag": "1.4.204",
"commit": "0e3bdeb9f16833a9cb5e5d7047621e888cd72148"
"tag": "1.4.206",
"commit": "3f48458370184be23fcd9dd588f86109d0a5f5ba"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.1",

View file

@ -71,13 +71,16 @@
.cardBox-focustransform {
will-change: transform;
/*transition: transform 200ms ease-out;*/
}
/*.card:focus > .cardBox-focustransform {
transition-delay: 50ms;
.cardBox-focustransform-transition {
will-change: transform;
transition: transform 200ms ease-out;
}
.card-focusscale:focus > .cardBox-focustransform {
transform: scale(1.16, 1.16);
}*/
}
@media all and (min-width: 600px) {
@ -327,10 +330,6 @@
width: 50%;
}
.midBackdropCard-scalable {
width: 100%;
}
.squareCard-scalable {
width: 50%;
}
@ -358,10 +357,6 @@
.backdropCard-scalable {
width: 50%;
}
.midBackdropCard-scalable {
width: 50%;
}
}
@media all and (min-width: 500px) {
@ -392,10 +387,6 @@
.overflowSquareCard-scalable {
width: 30%;
}
.midBackdropCard-scalable {
width: 33.333333333333333333333333333333%;
}
}
@media all and (min-width: 700px) {
@ -431,10 +422,6 @@
.squareCard-scalable {
width: 20%;
}
.midBackdropCard-scalable {
width: 25%;
}
}
@media all and (min-width: 1000px) {
@ -478,10 +465,6 @@
.smallBackdropCard-scalable {
width: 16.666666666666666666666666666667%;
}
.midBackdropCard-scalable {
width: 20%;
}
}

View file

@ -1,6 +1,6 @@
.emby-button {
position: relative;
display: inline-block;
display: inline-flex;
align-items: center;
box-sizing: border-box;
margin: 0 .29em;
@ -89,7 +89,7 @@
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.emby-button i + span {
.emby-button > i + span {
margin-left: .5em;
}
@ -97,12 +97,12 @@
margin-left: .5em;
}
.emby-button.iconRight i {
.emby-button.iconRight > i {
margin-left: auto;
margin-right: .25em;
}
.emby-button-noflex.iconRight i {
.emby-button-noflex.iconRight > i {
position: absolute;
right: 0;
top: 25%;

View file

@ -31,12 +31,14 @@
}
}
function addListeners(elems, eventName, fn) {
function addListeners(container, className, eventName, fn) {
for (var i = 0, length = elems.length; i < length; i++) {
elems[i].addEventListener(eventName, fn);
container.addEventListener(eventName, function (e) {
var elem = dom.parentWithClass(e.target, className);
if (elem) {
fn.call(elem, e);
}
});
}
function reloadItem(page, item, apiClient) {
@ -84,24 +86,31 @@
// For search hints
return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
}
function getCardHtml(image, index, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
var html = '';
var cssClass = "card scalableCard";
cssClass += " midBackdropCard midBackdropCard-scalable";
var cardBoxCssClass = 'cardBox visualCardBox';
cssClass += " backdropCard backdropCard-scalable";
if (tagName == 'button') {
html += '<button type="button" class="' + cssClass + '">';
cssClass += ' card-focusscale btnImageCard';
cardBoxCssClass += ' cardBox-focustransform cardBox-focustransform-transition';
html += '<button type="button" class="' + cssClass + '"';
} else {
html += '<div class="' + cssClass + '">';
html += '<div class="' + cssClass + '"';
}
html += '<div class="cardBox visualCardBox">';
html += ' data-id="' + currentItem.Id + '" data-serverid="' + apiClient.serverId() + '" data-index="' + index + '" data-imagetype="' + image.ImageType + '" data-providers="' + imageProviders.length + '"';
html += '>';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable" style="background-color:transparent;">';
html += '<div class="cardPadder-backdrop"></div>';
@ -161,6 +170,28 @@
return html;
}
function deleteImage(context, itemId, type, index, apiClient, enableConfirmation) {
var afterConfirm = function () {
apiClient.deleteItemImage(itemId, type, index).then(function () {
hasChanges = true;
reload(context);
});
};
if (!enableConfirmation) {
afterConfirm();
return;
}
require(['confirm'], function (confirm) {
confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(afterConfirm);
});
}
function renderImages(page, item, apiClient, images, imageProviders, elem) {
var html = '';
@ -184,30 +215,19 @@
elem.innerHTML = html;
imageLoader.lazyChildren(elem);
addListeners(elem.querySelectorAll('.btnSearchImages'), 'click', function () {
addListeners(elem, 'btnSearchImages', 'click', function () {
showImageDownloader(page, this.getAttribute('data-imagetype'));
});
addListeners(elem.querySelectorAll('.btnDeleteImage'), 'click', function () {
addListeners(elem, 'btnDeleteImage', 'click', function () {
var type = this.getAttribute('data-imagetype');
var index = this.getAttribute('data-index');
index = index == "null" ? null : parseInt(index);
require(['confirm'], function (confirm) {
confirm(globalize.translate('sharedcomponents#ConfirmDeleteImage')).then(function () {
apiClient.deleteItemImage(currentItem.Id, type, index).then(function () {
hasChanges = true;
reload(page);
});
});
});
deleteImage(page, currentItem.Id, type, index, apiClient, true);
});
addListeners(elem.querySelectorAll('.btnMoveImage'), 'click', function () {
addListeners(elem, 'btnMoveImage', 'click', function () {
var type = this.getAttribute('data-imagetype');
var index = parseInt(this.getAttribute('data-index'));
var newIndex = parseInt(this.getAttribute('data-newindex'));
@ -274,9 +294,58 @@
});
}
function showActionSheet(context, imageCard) {
var itemId = imageCard.getAttribute('data-id');
var serverId = imageCard.getAttribute('data-serverid');
var apiClient = connectionManager.getApiClient(serverId);
var type = imageCard.getAttribute('data-imagetype');
var index = parseInt(imageCard.getAttribute('data-index'));
var providerCount = parseInt(imageCard.getAttribute('data-providers'));
require(['actionsheet'], function (actionSheet) {
var commands = [];
commands.push({
name: globalize.translate('sharedcomponents#Delete'),
id: 'delete'
});
if (providerCount) {
commands.push({
name: globalize.translate('sharedcomponents#Search'),
id: 'search'
});
}
actionSheet.show({
items: commands,
positionTo: imageCard
}).then(function (id) {
switch (id) {
case 'delete':
deleteImage(context, itemId, type, index, apiClient, false);
break;
case 'search':
showImageDownloader(context, type);
break;
default:
break;
}
});
});
}
function initEditor(page, options) {
addListeners(page.querySelectorAll('.btnOpenUploadMenu'), 'click', function () {
addListeners(page, 'btnOpenUploadMenu', 'click', function () {
var imageType = this.getAttribute('data-imagetype');
require(['components/imageuploader/imageuploader'], function (imageUploader) {
@ -296,9 +365,13 @@
});
});
addListeners(page.querySelectorAll('.btnBrowseAllImages'), 'click', function () {
addListeners(page, 'btnBrowseAllImages', 'click', function () {
showImageDownloader(page, this.getAttribute('data-imagetype') || 'Primary');
});
addListeners(page, 'btnImageCard', 'click', function () {
showActionSheet(page, this);
});
}
function showEditor(options, resolve, reject) {
@ -327,7 +400,6 @@
dlg.classList.add('formDialog');
dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
dlg.querySelector('.formDialogHeaderTitle').innerHTML = item.Name;
document.body.appendChild(dlg);

View file

@ -1,6 +1,7 @@
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="formDialogHeaderTitle">
${HeaderEditImages}
</div>
</div>

View file

@ -174,6 +174,7 @@
var html = '';
var cssClass = "card scalableCard";
var cardBoxCssClass = 'cardBox visualCardBox';
var padderClass;
if (currentItemType == "Episode") {
@ -189,8 +190,13 @@
padderClass = 'cardPadder-portrait';
}
if (layoutManager.tv) {
cssClass += ' card-focusscale';
cardBoxCssClass += ' cardBox-focustransform cardBox-focustransform-transition';
}
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="' + cardBoxCssClass + '">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="' + padderClass + '"></div>';

View file

@ -275,5 +275,6 @@
"Screenshots": "Screenshots",
"MoveRight": "Move right",
"MoveLeft": "Move left",
"ConfirmDeleteImage": "Delete image?"
"ConfirmDeleteImage": "Delete image?",
"HeaderEditImages": "Edit Images"
}

View file

@ -32,14 +32,14 @@
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
},
"private": true,
"homepage": "https://github.com/Polymer/polymer",
"homepage": "https://github.com/polymer/polymer",
"_release": "1.6.1",
"_resolution": {
"type": "version",
"tag": "v1.6.1",
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
},
"_source": "git://github.com/Polymer/polymer.git",
"_source": "git://github.com/polymer/polymer.git",
"_target": "^1.1.0",
"_originalSource": "Polymer/polymer"
"_originalSource": "polymer/polymer"
}

View file

@ -300,7 +300,7 @@
style += "min-width:33.3%;";
}
html += '<div class="card midBackdropCard scalableCard midBackdropCard-scalable" style="' + style + '" data-index="' + index + '">';
html += '<div class="card backdropCard scalableCard backdropCard-scalable" style="' + style + '" data-index="' + index + '">';
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';