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

update shared collection editor

This commit is contained in:
Luke Pulverenti 2016-05-22 00:17:28 -04:00
parent 69fad5e57d
commit dcb6b103ec
10 changed files with 133 additions and 44 deletions

View file

@ -16,12 +16,12 @@
},
"devDependencies": {},
"ignore": [],
"version": "1.3.54",
"_release": "1.3.54",
"version": "1.3.65",
"_release": "1.3.65",
"_resolution": {
"type": "version",
"tag": "1.3.54",
"commit": "5b18c68f85be83718bb5c653da5baeed956bb2bb"
"tag": "1.3.65",
"commit": "8a512f0acee81e973007eb43566b7d3aebb7a613"
},
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
"_target": "^1.2.0",

View file

@ -1,4 +1,4 @@
define(['dialogHelper', 'loading', 'connectionManager', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-input', 'paper-icon-button-light', 'emby-select'], function (dialogHelper, loading, connectionManager, embyRouter, globalize) {
define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
var currentServerId;
@ -94,11 +94,6 @@
});
}
function onDialogClosed() {
loading.hide();
}
function triggerChange(select) {
select.dispatchEvent(new CustomEvent('change', {}));
}
@ -123,7 +118,7 @@
var html = '';
html += '<option value="">' + globalize.translate('OptionNewCollection') + '</option>';
html += '<option value="">' + globalize.translate('sharedcomponents#NewCollection') + '</option>';
html += result.Items.map(function (i) {
@ -142,47 +137,58 @@
var html = '';
html += '<div class="dialogContent smoothScrollY">';
html += '<div class="dialogContentInner centeredContent">';
html += '<form class="newCollectionForm" style="margin:auto;">';
html += '<div>';
html += globalize.translate('CreateCollectionHelp');
html += globalize.translate('sharedcomponents#NewCollectionHelp');
html += '</div>';
html += '<div class="fldSelectCollection">';
html += '<br/>';
html += '<br/>';
html += '<select is="emby-select" label="' + globalize.translate('LabelSelectCollection') + '" id="selectCollectionToAddTo" autofocus></select>';
html += '<select is="emby-select" label="' + globalize.translate('sharedcomponents#LabelCollection') + '" id="selectCollectionToAddTo" autofocus></select>';
html += '</div>';
html += '<div class="newCollectionInfo">';
html += '<div>';
html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('LabelName') + '"></paper-input>';
html += '<div class="fieldDescription">' + globalize.translate('NewCollectionNameExample') + '</div>';
html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '"></paper-input>';
html += '<div class="fieldDescription">' + globalize.translate('sharedcomponents#NewCollectionNameExample') + '</div>';
html += '</div>';
html += '<br />';
html += '<br />';
html += '<div>';
html += '<paper-checkbox id="chkEnableInternetMetadata">' + globalize.translate('OptionSearchForInternetMetadata') + '</paper-checkbox>';
html += '<paper-checkbox id="chkEnableInternetMetadata">' + globalize.translate('sharedcomponents#SearchForCollectionInternetMetadata') + '</paper-checkbox>';
html += '</div>';
// newCollectionInfo
html += '</div>';
html += '<br />';
html += '<br />';
html += '<div>';
html += '<button type="submit" class="clearButton" data-role="none"><paper-button raised class="submit block">' + globalize.translate('ButtonOk') + '</paper-button></button>';
html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
html += '</div>';
html += '<input type="hidden" class="fldSelectedItemIds" />';
html += '</form>';
html += '</div>';
html += '</div>';
return html;
}
function onHelpClick(e) {
shell.openUrl(this.href);
e.preventDefault();
return false;
}
function initEditor(content, items) {
content.querySelector('#selectCollectionToAddTo').addEventListener('change', function () {
@ -195,6 +201,21 @@
}
});
content.querySelector('.btnSubmit').addEventListener('submit', function () {
// Do a fake form submit this the button isn't a real submit button
var fakeSubmit = document.createElement('input');
fakeSubmit.setAttribute('type', 'submit');
fakeSubmit.style.display = 'none';
var form = content.querySelector('form');
form.appendChild(fakeSubmit);
fakeSubmit.click();
// Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
setTimeout(function () {
form.removeChild(fakeSubmit);
}, 500);
});
content.querySelector('.newCollectionForm').addEventListener('submit', onSubmit);
content.querySelector('.fldSelectedItemIds', content).value = items.join(',');
@ -221,16 +242,23 @@
var items = options.items || {};
currentServerId = options.serverId;
var dlg = dialogHelper.createDialog({
size: 'small',
removeOnClose: true
});
var dialogOptions = {
removeOnClose: true,
scrollY: false
};
dlg.classList.add('ui-body-b');
dlg.classList.add('background-theme-b');
if (layoutManager.tv) {
dialogOptions.size = 'fullscreen';
} else {
dialogOptions.size = 'small';
}
var dlg = dialogHelper.createDialog(dialogOptions);
dlg.classList.add('formDialog');
var html = '';
var title = items.length ? globalize.translate('HeaderAddToCollection') : globalize.translate('HeaderNewCollection');
var title = items.length ? globalize.translate('sharedcomponents#AddToCollection') : globalize.translate('sharedcomponents#NewCollection');
html += '<div class="dialogHeader" style="margin:0 0 2em;">';
html += '<button is="paper-icon-button-light" class="btnCancel" tabindex="-1"><iron-icon icon="nav:arrow-back"></iron-icon></button>';
@ -238,7 +266,7 @@
html += title;
html += '</div>';
html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('ButtonHelp') + '"><iron-icon icon="info"></iron-icon><span style="margin-left:.25em;">' + globalize.translate('ButtonHelp') + '</span></a>';
html += '<a class="btnHelp" href="https://github.com/MediaBrowser/Wiki/wiki/Collections" target="_blank" style="margin-left:auto;margin-right:.5em;display:inline-block;padding:.25em;display:flex;align-items:center;" title="' + globalize.translate('sharedcomponents#Help') + '"><iron-icon icon="nav:info"></iron-icon><span style="margin-left:.25em;">' + globalize.translate('sharedcomponents#Help') + '</span></a>';
html += '</div>';
@ -249,14 +277,20 @@
initEditor(dlg, items);
dlg.addEventListener('close', onDialogClosed);
dialogHelper.open(dlg);
dlg.querySelector('.btnCancel').addEventListener('click', function () {
dialogHelper.close(dlg);
});
if (layoutManager.tv) {
scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
}
return new Promise(function (resolve, reject) {
dlg.addEventListener('close', resolve);
dialogHelper.open(dlg);
});
};
}

View file

@ -2,6 +2,18 @@
var globalOnOpenCallback;
function enableAnimation() {
if (browser.animate) {
return true;
}
if (browser.mobile || browser.tv) {
return false;
}
return true;
}
function dialogHashHandler(dlg, hash, resolve) {
var self = this;
@ -150,7 +162,7 @@
// Without this, seeing some script errors in Firefox
// Also for some reason it won't auto-focus without a delay here, still investigating that
var delay = browser.animate ? 0 : 300;
var delay = enableAnimation() ? 300 : 0;
setTimeout(function () {
focusManager.autoFocus(dlg);
@ -409,7 +421,7 @@
};
// too buggy in IE, not even worth it
if (!browser.animate) {
if (!enableAnimation()) {
dlg.animationConfig = null;
dlg.entryAnimation = null;
dlg.exitAnimation = null;

View file

@ -14,28 +14,31 @@
font-size: inherit;
/* General select styles: change as needed */
font-family: inherit;
font-weight: bold;
font-weight: inherit;
color: inherit;
padding: .6em .8em .3em 0;
cursor: pointer;
outline: none !important;
width: 100%;
}
.selectLabel {
display: block;
}
.selectLabelFocus {
.selectLabelFocused {
color: #52B54B;
}
.emby-select-selectionbar {
height: 2px;
transform: scale(.01);
transition: transform .2s ease-out;
transform: scale(.01, 1);
transition: transform .25s ease-out;
position: relative;
top: -1px;
margin-bottom: .5em;
-webkit-transform-origin: center center;
transform-origin: center center;
}
[is="emby-select"]:focus + .emby-select-selectionbar {

View file

@ -16,14 +16,25 @@
return true;
}
function triggerChange(select) {
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
select.dispatchEvent(evt);
}
function showActionSheeet(select) {
var labelElem = getLabel(select);
var title = labelElem ? (labelElem.textContent || labelElem.innerText) : null;
actionsheet.show({
items: select.options,
positionTo: select
positionTo: select,
title: title
}).then(function (value) {
select.value = value;
triggerChange(select);
});
}
@ -38,20 +49,23 @@
function onFocus(e) {
var label = getLabel(this);
if (label) {
label.classList.add('selectLabelFocus');
label.classList.add('selectLabelFocused');
label.classList.remove('selectLabelUnfocused');
}
}
function onBlur(e) {
var label = getLabel(this);
if (label) {
label.classList.remove('selectLabelFocus');
label.classList.add('selectLabelUnfocused');
label.classList.remove('selectLabelFocused');
}
}
function onMouseDown(e) {
if (!enableNativeMenu()) {
// e.button=0 for primary (left) mouse button click
if (!e.button && !enableNativeMenu()) {
e.preventDefault();
showActionSheeet(this);
}

View file

@ -36,6 +36,7 @@ See [iron-iconset](#iron-iconset) and [iron-iconset-svg](#iron-iconset-svg) for
<defs>
<g id="arrow-back"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" /></g>
<g id="check"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" /></g>
<g id="info"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" /></g>
</defs>
</svg>
</iron-iconset-svg>

View file

@ -11,6 +11,11 @@ define(['apphost', 'globalize', 'connectionManager'], function (appHost, globali
var commands = [];
commands.push({
name: globalize.translate('sharedcomponents#AddToCollection'),
id: 'addtocollection'
});
if (item.CanDelete) {
commands.push({
name: globalize.translate('sharedcomponents#Delete'),
@ -54,6 +59,18 @@ define(['apphost', 'globalize', 'connectionManager'], function (appHost, globali
switch (id) {
case 'addtocollection':
{
require(['collectionEditor'], function (collectionEditor) {
new collectionEditor().show({
items: [itemId],
serverId: serverId
}).then(reject, reject);
});
break;
}
case 'download':
{
require(['fileDownloader'], function (fileDownloader) {

View file

@ -54,5 +54,13 @@
"HeaderDeleteItem": "Delete Item",
"ConfirmDeleteItem": "Deleting this item will delete it from both the file system and your media library. Are you sure you wish to continue?",
"Refresh": "Refresh",
"RefreshQueued": "Refresh queued."
"RefreshQueued": "Refresh queued.",
"AddToCollection": "Add to Collection",
"NewCollection": "New Collection",
"LabelCollection": "Collection:",
"Help": "Help",
"NewCollectionHelp": "Collections allow you to create personalized groupings of movies and other library content.",
"SearchForCollectionInternetMetadata": "Search the internet for artwork and metadata",
"LabelName": "Name:",
"NewCollectionNameExample": "Example: Star Wars Collection"
}

View file

@ -1767,13 +1767,13 @@ var AppInfo = {};
define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);
define("recordingCreator", [embyWebComponentsBowerPath + "/recordingcreator/recordingcreator"], returnFirstDependency);
define("recordingEditor", [embyWebComponentsBowerPath + "/recordingcreator/recordingeditor"], returnFirstDependency);
define("mediaInfo", [embyWebComponentsBowerPath + "/mediainfo/mediainfo"], returnFirstDependency);
define("backdrop", [embyWebComponentsBowerPath + "/backdrop/backdrop"], returnFirstDependency);
define("fetchHelper", [embyWebComponentsBowerPath + "/fetchhelper"], returnFirstDependency);
define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
define("tvguide", [embyWebComponentsBowerPath + "/guide/guide", 'embyRouter'], returnFirstDependency);

View file

@ -436,7 +436,7 @@ paper-input label, paper-textarea label {
color: #ccc;
}
.ui-body-b .selectLabel:not(.selectLabelFocus) {
.ui-body-b .selectLabelUnfocused {
color: #ccc;
}
@ -586,5 +586,5 @@ paper-progress.mini #progressContainer {
}
.formDialog.background-theme-b {
background-color: #202020;
background-color: #181818;
}