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

update config screens

This commit is contained in:
Luke Pulverenti 2016-04-15 00:44:51 -04:00
parent 799e86de4a
commit 077f440dcc
6 changed files with 102 additions and 69 deletions

View file

@ -47,7 +47,7 @@
html += '</div>';
html += '</div>';
html += '<div class="viewMenuBarTabs hiddenScrollX">';
html += '<div class="viewMenuBarTabs hiddenScrollX hide">';
html += '</div>';
var viewMenuBar = document.createElement('div');
@ -652,6 +652,45 @@
return getParameterByName('topParentId') || null;
}
function slideDownToShow(elem) {
if (!elem.classList.contains('hide')) {
return;
}
elem.classList.remove('hide');
requestAnimationFrame(function () {
var keyframes = [
{ height: '0', offset: 0 },
{ height: elem.clientHeight + 'px', offset: 1 }];
var timing = { duration: 200, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing);
});
}
function slideUpToHide(elem) {
if (elem.classList.contains('hide')) {
return;
}
var height = elem.clientHeight;
requestAnimationFrame(function () {
elem.innerHTML = '';
var keyframes = [
{ height: height + 'px', offset: 0 },
{ height: '0', offset: 1 }];
var timing = { duration: 200, iterations: 1, easing: 'ease-out' };
elem.animate(keyframes, timing).onfinish = function () {
elem.classList.add('hide');
};
});
}
window.LibraryMenu = {
getTopParentId: getTopParentId,
@ -727,8 +766,8 @@
mainDrawerPanel.classList.remove('withTallToolbar');
viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
viewMenuBarTabs.innerHTML = '';
viewMenuBarTabs.classList.add('hide');
slideUpToHide(viewMenuBarTabs);
//viewMenuBarTabs.innerHTML = '';
LibraryMenu.tabType = null;
}
return;
@ -736,28 +775,35 @@
viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
if (!LibraryMenu.tabType) {
viewMenuBarTabs.classList.remove('hide');
}
if (LibraryMenu.tabType != type) {
require(['paper-tabs'], function () {
require(['paper-tabs'], function() {
var noInk = browserInfo.animate ? '' : ' noink';
viewMenuBarTabs.innerHTML = '<paper-tabs selected="' + selectedIndex + '" hidescrollbuttons ' + noInk + '>' + builder().map(function (t) {
viewMenuBarTabs.innerHTML = '<paper-tabs selected="' + selectedIndex + '" hidescrollbuttons ' + noInk + '>' + builder().map(function(t) {
return '<paper-tab link><a class="clearLink paperTabLink" href="' + t.href + '"><div>' + t.name + '</div></a></paper-tab>';
}).join('') + '</paper-tabs>';
mainDrawerPanel.classList.add('withTallToolbar');
if (!LibraryMenu.tabType) {
//viewMenuBarTabs.classList.remove('hide');
slideDownToShow(viewMenuBarTabs);
}
LibraryMenu.tabType = type;
});
return;
}
} else {
viewMenuBarTabs.querySelector('paper-tabs').selected = selectedIndex;
viewMenuBarTabs.querySelector('paper-tabs').selected = selectedIndex;
if (!LibraryMenu.tabType) {
//viewMenuBarTabs.classList.remove('hide');
slideDownToShow(viewMenuBarTabs);
}
}
LibraryMenu.tabType = type;
},

View file

@ -743,7 +743,7 @@ var Dashboard = {
divider: true,
name: Globalize.translate('TabLibrary'),
href: "library.html",
pageIds: ['mediaLibraryPage', 'libraryPathMappingPage'],
pageIds: ['mediaLibraryPage', 'libraryPathMappingPage', 'librarySettingsPage'],
icon: 'folder',
color: '#009688'
}, {

View file

@ -4,52 +4,46 @@
var html = '';
html += '<fieldset data-role="controlgroup">';
html += '<div class="paperCheckboxListLabel">' + Globalize.translate('HeaderLibraries') + '</div>';
html += '<legend>' + Globalize.translate('HeaderLibraries') + '</legend>';
html += '<div class="paperCheckboxList paperList">';
for (var i = 0, length = mediaFolders.length; i < length; i++) {
var folder = mediaFolders[i];
var id = 'mediaFolder' + i;
var isChecked = user.Policy.EnableAllFolders || user.Policy.EnabledFolders.indexOf(folder.Id) != -1;
var checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<input class="chkFolder" data-id="' + folder.Id + '" type="checkbox" id="' + id + '"' + checkedAttribute + ' />';
html += '<label for="' + id + '">' + folder.Name + '</label>';
html += '<paper-checkbox class="chkFolder" data-id="' + folder.Id + '" type="checkbox"' + checkedAttribute + '>' + folder.Name + '</paper-checkbox>';
}
html += '</fieldset>';
html += '</div>';
$('.folderAccess', page).html(html).trigger('create');
$('#chkEnableAllFolders', page).checked(user.Policy.EnableAllFolders).checkboxradio('refresh').trigger('change');
$('#chkEnableAllFolders', page).checked(user.Policy.EnableAllFolders).trigger('change');
}
function loadChannels(page, user, channels) {
var html = '';
html += '<fieldset data-role="controlgroup">';
html += '<div class="paperCheckboxListLabel">' + Globalize.translate('HeaderChannels') + '</div>';
html += '<legend>' + Globalize.translate('HeaderChannels') + '</legend>';
html += '<div class="paperCheckboxList paperList">';
for (var i = 0, length = channels.length; i < length; i++) {
var folder = channels[i];
var id = 'channels' + i;
var isChecked = user.Policy.EnableAllChannels || user.Policy.EnabledChannels.indexOf(folder.Id) != -1;
var checkedAttribute = isChecked ? ' checked="checked"' : '';
html += '<input class="chkChannel" data-id="' + folder.Id + '" type="checkbox" id="' + id + '"' + checkedAttribute + ' />';
html += '<label for="' + id + '">' + folder.Name + '</label>';
html += '<paper-checkbox class="chkChannel" data-id="' + folder.Id + '" type="checkbox"' + checkedAttribute + '>' + folder.Name + '</paper-checkbox>';
}
html += '</fieldset>';
html += '</div>';
$('.channelAccess', page).show().html(html).trigger('create');
@ -59,37 +53,31 @@
$('.channelAccessContainer', page).hide();
}
$('#chkEnableAllChannels', page).checked(user.Policy.EnableAllChannels).checkboxradio('refresh').trigger('change');
$('#chkEnableAllChannels', page).checked(user.Policy.EnableAllChannels).trigger('change');
}
function loadDevices(page, user, devices) {
var html = '';
html += '<fieldset data-role="controlgroup">';
html += '<div class="paperCheckboxListLabel">' + Globalize.translate('HeaderDevices') + '</div>';
html += '<legend>' + Globalize.translate('HeaderDevices') + '</legend>';
html += '<div class="paperCheckboxList paperList">';
for (var i = 0, length = devices.length; i < length; i++) {
var device = devices[i];
var id = 'device' + i;
var checkedAttribute = user.Policy.EnableAllDevices || user.Policy.EnabledDevices.indexOf(device.Id) != -1 ? ' checked="checked"' : '';
html += '<input class="chkDevice" data-id="' + device.Id + '" type="checkbox" id="' + id + '"' + checkedAttribute + ' />';
html += '<label for="' + id + '">' + device.Name;
html += '<br/><span>' + device.AppName + '</span>';
html += '</label>';
html += '<paper-checkbox class="chkChannel" data-id="' + device.Id + '" type="checkbox"' + checkedAttribute + '>' + device.Name + ' - ' + device.AppName + '</paper-checkbox>';
}
html += '</fieldset>';
html += '</div>';
$('.deviceAccess', page).show().html(html).trigger('create');
$('#chkEnableAllDevices', page).checked(user.Policy.EnableAllDevices).checkboxradio('refresh').trigger('change');
$('#chkEnableAllDevices', page).checked(user.Policy.EnableAllDevices).trigger('change');
if (user.Policy.IsAdministrator) {
page.querySelector('.deviceAccessContainer').classList.add('hide');
@ -125,29 +113,29 @@
user.Policy.EnableAllFolders = $('#chkEnableAllFolders', page).checked();
user.Policy.EnabledFolders = user.Policy.EnableAllFolders ?
[] :
$('.chkFolder:checked', page).map(function () {
return this.getAttribute('data-id');
}).get();
$('.chkFolder', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
user.Policy.EnabledChannels = user.Policy.EnableAllChannels ?
[] :
$('.chkChannel:checked', page).map(function () {
return this.getAttribute('data-id');
}).get();
$('.chkChannel', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).checked();
user.Policy.EnabledDevices = user.Policy.EnableAllDevices ?
[] :
$('.chkDevice:checked', page).map(function () {
return this.getAttribute('data-id');
}).get();
$('.chkDevice', page).get().filter(function (c) {
return c.checked;
}).map(function (c) {
return c.getAttribute('data-id');
});
// Legacy
user.Policy.BlockedChannels = null;

View file

@ -471,6 +471,10 @@ paper-textarea.mono textarea {
background-color: #fff;
}
.paperCheckboxList.paperList {
padding: .5em 1em;
}
.ui-body-b .paperList {
background-color: #323232;
}

View file

@ -1,4 +1,4 @@
<div id="editUserPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="jqmcollapsible,scripts/useredit,paper-input,jqmcheckbox,paper-checkbox">
<div id="editUserPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="jqmcollapsible,scripts/useredit,paper-input,paper-checkbox">
<div data-role="content">
<div class="content-primary">

View file

@ -1,4 +1,4 @@
<div id="userLibraryAccessPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/userlibraryaccess,jqmcheckbox">
<div id="userLibraryAccessPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/userlibraryaccess,paper-checkbox">
<div data-role="content">
<div class="content-primary">
@ -11,40 +11,35 @@
<form class="userLibraryAccessForm">
<div class="folderAccessContainer">
<div class="ui-controlgroup-label">${HeaderLibraryAccess}</div>
<h2>${HeaderLibraryAccess}</h2>
<div>
<label for="chkEnableAllFolders">${OptionEnableAccessToAllLibraries}</label>
<input type="checkbox" id="chkEnableAllFolders" />
<div class="fieldDescription">${LibraryAccessHelp}</div>
<paper-checkbox id="chkEnableAllFolders">${OptionEnableAccessToAllLibraries}</paper-checkbox>
</div>
<div class="folderAccessListContainer">
<br />
<div class="folderAccess">
</div>
<div class="fieldDescription">${LibraryAccessHelp}</div>
</div>
</div>
<br />
<br />
<div class="channelAccessContainer" style="display:none;">
<div class="ui-controlgroup-label">${HeaderChannelAccess}</div>
<h2>${HeaderChannelAccess}</h2>
<div>
<label for="chkEnableAllChannels">${OptionEnableAccessToAllChannels}</label>
<input type="checkbox" id="chkEnableAllChannels" />
<div class="fieldDescription">${ChannelAccessHelp}</div>
<paper-checkbox id="chkEnableAllChannels">${OptionEnableAccessToAllChannels}</paper-checkbox>
</div>
<div class="channelAccessListContainer">
<br />
<div class="channelAccess">
</div>
<div class="fieldDescription">${ChannelAccessHelp}</div>
</div>
</div>
<br />
<div class="deviceAccessContainer hide">
<br />
<div class="ui-controlgroup-label">${HeaderDeviceAccess}</div>
<h2>${HeaderDeviceAccess}</h2>
<div>
<label for="chkEnableAllDevices">${OptionEnableAccessFromAllDevices}</label>
<input type="checkbox" id="chkEnableAllDevices" />
<paper-checkbox id="chkEnableAllDevices">${OptionEnableAccessFromAllDevices}</paper-checkbox>
</div>
<div class="deviceAccessListContainer">
<br />