update image editor

This commit is contained in:
Luke Pulverenti 2016-08-30 14:13:41 -04:00
parent d5577ab04d
commit 8fb207e4ca
9 changed files with 82 additions and 33 deletions

View file

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

View file

@ -17,7 +17,7 @@
} }
.checkboxContainer { .checkboxContainer {
margin-bottom: 2em; margin-bottom: 1.8em;
display: flex; display: flex;
} }

View file

@ -24,7 +24,7 @@
} }
.inputContainer { .inputContainer {
margin-bottom: 2em; margin-bottom: 1.8em;
} }
.inputLabel { .inputLabel {

View file

@ -30,7 +30,7 @@
} }
.selectContainer { .selectContainer {
margin-bottom: 2em; margin-bottom: 1.8em;
position: relative; position: relative;
} }

View file

@ -25,7 +25,7 @@
} }
.inputContainer { .inputContainer {
margin-bottom: 2em; margin-bottom: 1.8em;
} }
.textareaLabel { .textareaLabel {

View file

@ -31,3 +31,11 @@
.dialogContentTitle { .dialogContentTitle {
margin-top: 1em; margin-top: 1em;
} }
@media all and (min-width: 1280px) {
.dialogContentInner {
padding-left: 2em;
padding-right: 2em;
}
}

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, connectionManager, loading, dom, layoutManager, globalize, scrollHelper, imageLoader, require) { define(['dialogHelper', 'connectionManager', 'loading', 'dom', 'layoutManager', 'focusManager', 'globalize', 'scrollHelper', 'imageLoader', 'require', 'cardStyle', 'formDialogStyle', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, connectionManager, loading, dom, layoutManager, focusManager, globalize, scrollHelper, imageLoader, require) {
var currentItem; var currentItem;
var hasChanges = false; var hasChanges = false;
@ -12,7 +12,7 @@
return options; return options;
} }
function reload(page, item) { function reload(page, item, focusContext) {
loading.show(); loading.show();
@ -20,13 +20,13 @@
if (item) { if (item) {
apiClient = connectionManager.getApiClient(item.ServerId); apiClient = connectionManager.getApiClient(item.ServerId);
reloadItem(page, item, apiClient); reloadItem(page, item, apiClient, focusContext);
} }
else { else {
apiClient = connectionManager.getApiClient(currentItem.ServerId); apiClient = connectionManager.getApiClient(currentItem.ServerId);
apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) { apiClient.getItem(apiClient.getCurrentUserId(), currentItem.Id).then(function (item) {
reloadItem(page, item, apiClient); reloadItem(page, item, apiClient, focusContext);
}); });
} }
} }
@ -41,7 +41,7 @@
}); });
} }
function reloadItem(page, item, apiClient) { function reloadItem(page, item, apiClient, focusContext) {
currentItem = item; currentItem = item;
@ -64,6 +64,10 @@
renderBackdrops(page, apiClient, item, imageInfos, providers); renderBackdrops(page, apiClient, item, imageInfos, providers);
renderScreenshots(page, apiClient, item, imageInfos, providers); renderScreenshots(page, apiClient, item, imageInfos, providers);
loading.hide(); loading.hide();
if (layoutManager.tv) {
focusManager.autoFocus((focusContext || page));
}
}); });
}); });
} }
@ -88,11 +92,11 @@
return apiClient.getScaledImageUrl(item.Id || item.ItemId, options); return apiClient.getScaledImageUrl(item.Id || item.ItemId, options);
} }
function getCardHtml(image, index, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) { function getCardHtml(image, index, numImages, apiClient, imageProviders, imageSize, tagName, enableFooterButtons) {
var html = ''; var html = '';
var cssClass = "card scalableCard"; var cssClass = "card scalableCard imageEditorCard";
var cardBoxCssClass = 'cardBox visualCardBox'; var cardBoxCssClass = 'cardBox visualCardBox';
cssClass += " backdropCard backdropCard-scalable"; cssClass += " backdropCard backdropCard-scalable";
@ -106,7 +110,7 @@
html += '<div class="' + cssClass + '"'; html += '<div class="' + cssClass + '"';
} }
html += ' data-id="' + currentItem.Id + '" data-serverid="' + apiClient.serverId() + '" data-index="' + index + '" data-imagetype="' + image.ImageType + '" data-providers="' + imageProviders.length + '"'; html += ' data-id="' + currentItem.Id + '" data-serverid="' + apiClient.serverId() + '" data-index="' + index + '" data-numimages="' + numImages + '" data-imagetype="' + image.ImageType + '" data-providers="' + imageProviders.length + '"';
html += '>'; html += '>';
@ -146,7 +150,7 @@
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveLeft') + '"><i class="md-icon">chevron_left</i></button>'; html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveLeft') + '"><i class="md-icon">chevron_left</i></button>';
} }
if (index < length - 1) { if (index < numImages - 1) {
html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>'; html += '<button is="paper-icon-button-light" class="btnMoveImage autoSize" data-imagetype="' + image.ImageType + '" data-index="' + image.ImageIndex + '" data-newindex="' + (image.ImageIndex + 1) + '" title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
} else { } else {
html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>'; html += '<button is="paper-icon-button-light" class="autoSize" disabled title="' + globalize.translate('sharedcomponents#MoveRight') + '"><i class="md-icon">chevron_right</i></button>';
@ -192,6 +196,15 @@
}); });
} }
function moveImage(context, apiClient, itemId, type, index, newIndex, focusContext) {
apiClient.updateItemImageIndex(itemId, type, index, newIndex).then(function () {
hasChanges = true;
reload(context, null, focusContext);
});
}
function renderImages(page, item, apiClient, images, imageProviders, elem) { function renderImages(page, item, apiClient, images, imageProviders, elem) {
var html = ''; var html = '';
@ -209,7 +222,7 @@
var image = images[i]; var image = images[i];
html += getCardHtml(image, i, apiClient, imageProviders, imageSize, tagName, enableFooterButtons); html += getCardHtml(image, i, length, apiClient, imageProviders, imageSize, tagName, enableFooterButtons);
} }
elem.innerHTML = html; elem.innerHTML = html;
@ -229,14 +242,9 @@
addListeners(elem, 'btnMoveImage', 'click', function () { addListeners(elem, 'btnMoveImage', 'click', function () {
var type = this.getAttribute('data-imagetype'); var type = this.getAttribute('data-imagetype');
var index = parseInt(this.getAttribute('data-index')); var index = this.getAttribute('data-index');
var newIndex = parseInt(this.getAttribute('data-newindex')); var newIndex = this.getAttribute('data-newindex');
apiClient.updateItemImageIndex(currentItem.Id, type, index, newIndex).then(function () { moveImage(page, apiClient, currentItem.Id, type, index, newIndex, dom.parentWithClass(this, 'itemsContainer'));
hasChanges = true;
reload(page);
});
}); });
} }
@ -303,6 +311,7 @@
var type = imageCard.getAttribute('data-imagetype'); var type = imageCard.getAttribute('data-imagetype');
var index = parseInt(imageCard.getAttribute('data-index')); var index = parseInt(imageCard.getAttribute('data-index'));
var providerCount = parseInt(imageCard.getAttribute('data-providers')); var providerCount = parseInt(imageCard.getAttribute('data-providers'));
var numImages = parseInt(imageCard.getAttribute('data-numimages'));
require(['actionsheet'], function (actionSheet) { require(['actionsheet'], function (actionSheet) {
@ -313,6 +322,22 @@
id: 'delete' id: 'delete'
}); });
if (type == 'Backdrop' || type == 'Screenshot') {
if (index > 0) {
commands.push({
name: globalize.translate('sharedcomponents#MoveLeft'),
id: 'moveleft'
});
}
if (index < numImages - 1) {
commands.push({
name: globalize.translate('sharedcomponents#MoveRight'),
id: 'moveright'
});
}
}
if (providerCount) { if (providerCount) {
commands.push({ commands.push({
name: globalize.translate('sharedcomponents#Search'), name: globalize.translate('sharedcomponents#Search'),
@ -335,6 +360,12 @@
case 'search': case 'search':
showImageDownloader(context, type); showImageDownloader(context, type);
break; break;
case 'moveleft':
moveImage(context, apiClient, itemId, type, index, index - 1, dom.parentWithClass(imageCard, 'itemsContainer'));
break;
case 'moveright':
moveImage(context, apiClient, itemId, type, index, index + 1, dom.parentWithClass(imageCard, 'itemsContainer'));
break;
default: default:
break; break;
} }

View file

@ -1,4 +1,14 @@
<div class="formDialogHeader"> <style>
@media all and (min-width: 1200px) {
.imageEditorCard {
width: 20%;
}
}
</style>
<div class="formDialogHeader">
<button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button> <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
<div class="formDialogHeaderTitle"> <div class="formDialogHeaderTitle">
${HeaderEditImages} ${HeaderEditImages}
@ -9,7 +19,7 @@
<div class="dialogContentInner"> <div class="dialogContentInner">
<div id="imagesContainer"> <div id="imagesContainer">
<div style="display: flex; align-items: center;margin:2em 0 .5em;"> <div style="display: flex; align-items: center;margin:2em 0 1em;">
<h1 style="margin:0;">${Images}</h1> <h1 style="margin:0;">${Images}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
<i class="md-icon">search</i> <i class="md-icon">search</i>
@ -24,7 +34,7 @@
</div> </div>
<div id="backdropsContainer" class="hide"> <div id="backdropsContainer" class="hide">
<div style="display: flex; align-items: center;margin:1em 0 .5em;"> <div style="display: flex; align-items: center;margin:1em 0 1em;">
<h1 style="margin:0;">${Backdrops}</h1> <h1 style="margin:0;">${Backdrops}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
<i class="md-icon">search</i> <i class="md-icon">search</i>
@ -39,7 +49,7 @@
</div> </div>
<div id="screenshotsContainer" class="hide"> <div id="screenshotsContainer" class="hide">
<div style="display: flex; align-items: center; margin: 1em 0 .5em;"> <div style="display: flex; align-items: center; margin: 1em 0 1em;">
<h1 style="margin: 0;">${Screenshots}</h1> <h1 style="margin: 0;">${Screenshots}</h1>
<button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot"> <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Screenshot">
<i class="md-icon">search</i> <i class="md-icon">search</i>

View file

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