update library setup

dashboard-ui/apiclient/apiclient.js

@@ -1800,7 +1800,7 @@
        * Adds a virtual folder
        * @param {String} name
        */
-        self.addVirtualFolder = function (name, type, refreshLibrary) {
+        self.addVirtualFolder = function (name, type, refreshLibrary, initialPath) {
 
             if (!name) {
                 throw new Error("null name");
@@ -1821,7 +1821,10 @@
 
             return self.ajax({
                 type: "POST",
-                url: url
+                url: url,
+                data: {
+                    Path: initialPath
+                }
             });
         };
 

dashboard-ui/components/medialibrarycreator/medialibrarycreator.js

@@ -9,7 +9,11 @@
         var form = this;
         var dlg = $(form).parents('paper-dialog')[0];
 
-        ApiClient.addVirtualFolder($('#txtValue', form).val(), $('#selectCollectionType', form).val(), currentOptions.refresh).done(function () {
+        var name = $('#txtValue', form).val();
+        var type = $('#selectCollectionType', form).val();
+        var path = $('#txtPath', form).val();
+
+        ApiClient.addVirtualFolder(name, type, currentOptions.refresh, path).done(function () {
 
             hasChanges = true;
             PaperDialogHelper.close(dlg);
@@ -37,7 +41,49 @@
 
     function initEditor(page, collectionTypeOptions) {
 
-        $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('');
+        $('#selectCollectionType', page).html(getCollectionTypeOptionsHtml(collectionTypeOptions)).val('').on('change', function () {
+
+            var dlg = $(this).parents('paper-dialog')[0];
+
+            var index = this.selectedIndex;
+            if (index != -1) {
+
+                var name = this.options[index].innerHTML
+                    .replace('*', '')
+                    .replace('&', '&');
+
+                var value = this.value;
+
+                $('#txtValue', dlg).val(name);
+
+                var folderOption = collectionTypeOptions.filter(function (i) {
+
+                    return i.value == value;
+
+                })[0];
+
+                $('.collectionTypeFieldDescription', dlg).html(folderOption.message || '');
+            }
+        });
+
+        $('#btnSelectPath').on('click', function () {
+
+            require(['directorybrowser'], function (directoryBrowser) {
+
+                var picker = new directoryBrowser();
+
+                picker.show({
+
+                    callback: function (path) {
+                        if (path) {
+                            $('#txtPath', page).val(path);
+                        }
+                        picker.close();
+                    }
+
+                });
+            });
+        });
 
         $('form', page).off('submit', onSubmit).on('submit', onSubmit);
     }
@@ -66,7 +112,7 @@
                 HttpClient.send({
 
                     type: 'GET',
-                    url: 'components/medialibraryeditor/medialibraryeditor.template.html'
+                    url: 'components/medialibrarycreator/medialibrarycreator.template.html'
 
                 }).done(function (template) {
 
@@ -96,7 +142,7 @@
 
                     $(dlg).on('iron-overlay-closed', onDialogClosed);
 
-                    PaperDialogHelper.openWithHash(dlg, 'medialibraryeditor');
+                    PaperDialogHelper.openWithHash(dlg, 'medialibrarycreator');
 
                     $('.btnCloseDialog', dlg).on('click', function () {
 

dashboard-ui/components/medialibrarycreator/medialibrarycreator.template.html

@@ -6,9 +6,14 @@
         <div class="collectionTypeFieldDescription fieldDescription">
         </div>
     </div>
-    <p>
+    <div>
         <paper-input type="text" id="txtValue" required="required" label="${LabelName}"></paper-input>
-    </p>
+    </div>
+    <div>
+        <paper-input type="text" id="txtPath" required="required" label="${LabelFolder}" style="display: inline-block;width:84%;"></paper-input>
+        <paper-icon-button id="btnSelectPath" icon="search"></paper-icon-button>
+        <div class="fieldDescription">${LabelAdditionalFoldersCanBeAddedHelp}</div>
+    </div>
     <br />
     <div>
         <button type="submit" class="clearButton" data-role="none">

dashboard-ui/library.html

@@ -13,16 +13,13 @@
                     <a href="librarypathmapping.html" data-role="button">${TabPathSubstitution}</a>
                     <a href="librarysettings.html" data-role="button">${TabAdvanced}</a>
                 </div>
-                <div id="divVirtualFolders"></div>
 
-                <br />
+                <div style="text-align: right;">
-                <div>
+
-                    <paper-button raised class="btnRefresh block submit"><iron-icon icon="refresh"></iron-icon><span>${ButtonScanLibrary}</span></paper-button>
+                    <paper-button raised class="btnRefresh"><iron-icon icon="refresh"></iron-icon><span>${ButtonScanLibrary}</span></paper-button>
-                    <div style="margin:5px;">
+                    <progress max="100" min="0" style="display: inline-block; vertical-align: middle;" class="refreshProgress"></progress>
-                        <progress max="100" min="0" style="width: 100%;" class="refreshProgress"></progress>
-                        <div style="margin-top: 5px;">${LabelLastResult} <span class="lastRefreshResult"></span></div>
-                    </div>
                 </div>
+                <div id="divVirtualFolders"></div>
 
             </div>
         </div>

dashboard-ui/scripts/librarybrowser.js

@@ -1964,7 +1964,7 @@
                 cssClass += ' groupedCard';
             }
 
-            if (showTitle && !options.overlayText) {
+            if ((showTitle || options.showItemCounts) && !options.overlayText) {
                 cssClass += ' bottomPaddedCard';
             }
 

dashboard-ui/scripts/medialibrarypage.js

@@ -76,9 +76,9 @@
 
     function addVirtualFolder(page) {
 
-        require(['medialibraryeditor'], function (medialibraryeditor) {
+        require(['medialibrarycreator'], function (medialibrarycreator) {
 
-            new medialibraryeditor().show({
+            new medialibrarycreator().show({
 
                 collectionTypeOptions: getCollectionTypeOptions(),
                 refresh: shouldRefreshLibraryAfterChanges()
@@ -212,9 +212,7 @@
             showType: false,
             showLocations: false,
             showMenu: false,
-            showNameWithIcon: true,
+            showNameWithIcon: true
-            color: 'green',
-            contentClass: 'addLibrary'
         });
 
         for (var i = 0, length = virtualFolders.length; i < length; i++) {
@@ -299,12 +297,7 @@
 
         html += '<div class="cardPadder"></div>';
 
-        var contentClass = "cardContent";
+        html += '<div class="cardContent">';
-        if (virtualFolder.contentClass) {
-            contentClass += " " + virtualFolder.contentClass;
-        }
-
-        html += '<div class="' + contentClass + '">';
         var imgUrl = '';
 
         if (virtualFolder.PrimaryImageItemId) {
@@ -315,21 +308,10 @@
 
         if (imgUrl) {
             html += '<div class="cardImage" style="background-image:url(\'' + imgUrl + '\');"></div>';
-        } else {
+        } else if (!virtualFolder.showNameWithIcon) {
             html += '<div class="cardImage iconCardImage">';
-
+            html += '<div>';
-            if (virtualFolder.color) {
-                html += '<div style="color:' + virtualFolder.color + ';cursor:pointer;">';
-            } else {
-                html += '<div>';
-            }
             html += '<iron-icon icon="' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '"></iron-icon>';
-
-            if (virtualFolder.showNameWithIcon) {
-                html += '<div style="margin-top:1em;position:width:100%;font-weight:bold;">';
-                html += virtualFolder.Name;
-                html += "</div>";
-            }
             html += "</div>";
 
             html += '</div>';
@@ -341,6 +323,22 @@
         // cardScalable
         html += "</div>";
 
+        if (!imgUrl && virtualFolder.showNameWithIcon) {
+            html += '<div class="cardImage iconCardImage addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;font-size:140%;cursor:pointer;">';
+
+            html += '<div>';
+            html += '<iron-icon icon="' + (virtualFolder.icon || getIcon(virtualFolder.CollectionType)) + '" style="width:45%;height:45%;color:#888;"></iron-icon>';
+
+            if (virtualFolder.showNameWithIcon) {
+                html += '<div style="margin:1.5em 0;position:width:100%;font-weight:500;color:#444;">';
+                html += virtualFolder.Name;
+                html += "</div>";
+            }
+            html += "</div>";
+
+            html += '</div>';
+        }
+
         html += '<div class="cardFooter">';
 
         if (virtualFolder.showMenu !== false) {
@@ -471,7 +469,6 @@ var WizardLibraryPage = {
         $('.btnRefresh', page).taskButton({
             mode: 'on',
             progressElem: page.querySelector('.refreshProgress'),
-            lastResultElem: $('.lastRefreshResult', page),
             taskKey: 'RefreshLibrary'
         });
 

dashboard-ui/scripts/site.js

@@ -2062,7 +2062,7 @@ var AppInfo = {};
             directorybrowser: 'components/directorybrowser/directorybrowser',
             collectioneditor: 'components/collectioneditor/collectioneditor',
             playlisteditor: 'components/playlisteditor/playlisteditor',
-            medialibraryeditor: 'components/medialibraryeditor/medialibraryeditor',
+            medialibrarycreator: 'components/medialibrarycreator/medialibrarycreator',
             howler: 'bower_components/howler.js/howler.min',
             dragula: 'bower_components/dragula.js/dist/dragula.min'
         };

dashboard-ui/strings/html/en-US.json

@@ -1521,5 +1521,7 @@
     "HeaderCameraUpload": "Camera Upload",
     "SelectCameraUploadServers": "Upload camera photos to the following servers:",
     "ButtonClear": "Clear",
-    "ButtonEditImages": "Edit Images"
+    "ButtonEditImages": "Edit Images",
+    "LabelFolder": "Folder:",
+    "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up."
 }

dashboard-ui/strings/html/server.json

@@ -1537,5 +1537,7 @@
     "HeaderCameraUpload": "Camera Upload",
     "SelectCameraUploadServers": "Upload camera photos to the following servers:",
     "ButtonClear": "Clear",
-    "ButtonEditImages": "Edit Images"
+    "ButtonEditImages": "Edit Images",
+    "LabelFolder": "Folder:",
+    "LabelAdditionalFoldersCanBeAddedHelp": "Additional folders can be added to this library after setting it up."
 }

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

@@ -557,6 +557,10 @@ paper-dialog.popupEditor .dialogHeader {
     margin-top: .7em;
 }
 
+paper-dialog.popupEditor {
+    padding-bottom: 100px;
+}
+
 .paperToggleContainer {
     padding: .5em 0;
 }