update config screens

dashboard-ui/scripts/librarymenu.js

@@ -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 = '';
+                    slideUpToHide(viewMenuBarTabs);
-                    viewMenuBarTabs.classList.add('hide');
+                    //viewMenuBarTabs.innerHTML = '';
                     LibraryMenu.tabType = null;
                 }
                 return;
@@ -736,10 +775,6 @@
 
             viewMenuBarTabs = document.querySelector('.viewMenuBarTabs');
 
-            if (!LibraryMenu.tabType) {
-                viewMenuBarTabs.classList.remove('hide');
-            }
-
             if (LibraryMenu.tabType != type) {
 
                 require(['paper-tabs'], function() {
@@ -752,12 +787,23 @@
 
                     }).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;
         },
 

dashboard-ui/scripts/site.js

@@ -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'
         }, {

dashboard-ui/scripts/userlibraryaccess.js

@@ -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 += '<paper-checkbox class="chkFolder" data-id="' + folder.Id + '" type="checkbox"' + checkedAttribute + '>' + folder.Name + '</paper-checkbox>';
-            html += '<label for="' + id + '">' + folder.Name + '</label>';
         }
 
-        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 += '<paper-checkbox class="chkChannel" data-id="' + folder.Id + '" type="checkbox"' + checkedAttribute + '>' + folder.Name + '</paper-checkbox>';
-            html += '<label for="' + id + '">' + folder.Name + '</label>';
         }
 
-        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 += '<paper-checkbox class="chkChannel" data-id="' + device.Id + '" type="checkbox"' + checkedAttribute + '>' + device.Name + ' - ' + device.AppName + '</paper-checkbox>';
-            html += '<label for="' + id + '">' + device.Name;
-
-            html += '<br/><span>' + device.AppName + '</span>';
-            html += '</label>';
         }
 
-        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 () {
+            $('.chkFolder', page).get().filter(function (c) {
-
+                return c.checked;
-                return this.getAttribute('data-id');
+            }).map(function (c) {
-
+                return c.getAttribute('data-id');
-            }).get();
+            });
 
         user.Policy.EnableAllChannels = $('#chkEnableAllChannels', page).checked();
         user.Policy.EnabledChannels = user.Policy.EnableAllChannels ?
             [] :
-            $('.chkChannel:checked', page).map(function () {
+            $('.chkChannel', page).get().filter(function (c) {
-
+                return c.checked;
-                return this.getAttribute('data-id');
+            }).map(function (c) {
-
+                return c.getAttribute('data-id');
-            }).get();
+            });
 
         user.Policy.EnableAllDevices = $('#chkEnableAllDevices', page).checked();
         user.Policy.EnabledDevices = user.Policy.EnableAllDevices ?
             [] :
-            $('.chkDevice:checked', page).map(function () {
+            $('.chkDevice', page).get().filter(function (c) {
-
+                return c.checked;
-                return this.getAttribute('data-id');
+            }).map(function (c) {
-
+                return c.getAttribute('data-id');
-            }).get();
+            });
 
         // Legacy
         user.Policy.BlockedChannels = null;

dashboard-ui/thirdparty/paper-button-style.css

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

dashboard-ui/useredit.html

@@ -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">

dashboard-ui/userlibraryaccess.html

@@ -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>
+                        <paper-checkbox id="chkEnableAllFolders">${OptionEnableAccessToAllLibraries}</paper-checkbox>
-                        <input type="checkbox" id="chkEnableAllFolders" />
-                        <div class="fieldDescription">${LibraryAccessHelp}</div>
                     </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>
+                        <paper-checkbox id="chkEnableAllChannels">${OptionEnableAccessToAllChannels}</paper-checkbox>
-                        <input type="checkbox" id="chkEnableAllChannels" />
-                        <div class="fieldDescription">${ChannelAccessHelp}</div>
                     </div>
                     <div class="channelAccessListContainer">
                         <br />
                         <div class="channelAccess">
                         </div>
+                        <div class="fieldDescription">${ChannelAccessHelp}</div>
                     </div>
                 </div>
                 <br />
                 <div class="deviceAccessContainer hide">
-                    <br />
+                    <h2>${HeaderDeviceAccess}</h2>
-                    <div class="ui-controlgroup-label">${HeaderDeviceAccess}</div>
                     <div>
-                        <label for="chkEnableAllDevices">${OptionEnableAccessFromAllDevices}</label>
+                        <paper-checkbox id="chkEnableAllDevices">${OptionEnableAccessFromAllDevices}</paper-checkbox>
-                        <input type="checkbox" id="chkEnableAllDevices" />
                     </div>
                     <div class="deviceAccessListContainer">
                         <br />