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
parent
799e86de4a
commit
077f440dcc
6 changed files with 102 additions and 69 deletions
|
|
@ -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;
|
||||
|
||||
if (!LibraryMenu.tabType) {
|
||||
//viewMenuBarTabs.classList.remove('hide');
|
||||
slideDownToShow(viewMenuBarTabs);
|
||||
}
|
||||
}
|
||||
LibraryMenu.tabType = type;
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
}, {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -471,6 +471,10 @@ paper-textarea.mono textarea {
|
|||
background-color: #fff;
|
||||
}
|
||||
|
||||
.paperCheckboxList.paperList {
|
||||
padding: .5em 1em;
|
||||
}
|
||||
|
||||
.ui-body-b .paperList {
|
||||
background-color: #323232;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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 />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue