Updated folder styling and auto focus form control for new folders. F…

…ixes #1141, Fixes #1142

core/Piranha.Manager/Areas/Manager/Pages/MediaList.cshtml

@@ -40,7 +40,7 @@
             <div class="row">
                 <div class="col-lg-3 col-4">
                     <div class="mb-3">
-                        <button class="btn btn-sm btn-primary" v-on:click="isAdding = true">
+                        <button class="btn btn-sm btn-primary" v-on:click="editAddFolder()">
                             <i class="fas fa-plus"></i>
                         </button>
                         <button v-if="currentFolderId != null" v-on:click="editFolder()" class="btn btn-sm btn-primary">

core/Piranha.Manager/assets/dist/js/piranha.media.js

@@ -1,6 +1,6 @@
 Vue.component("folder-item", {
   props: ["item", "selected"],
-  template: "\n<li class=\"dd-item expanded\" :class=\"{ active: item.id === selected, expanded: item.isExpanded || item.items.length === 0 }\" :data-id=\"item.id\">\n    <a v-if=\"!item.edit\" class=\"droppable\" v-on:click.prevent=\"piranha.media.load(item.id)\" href=\"#\" draggable=\"true\" v-on:dragstart=\"piranha.media.drag($event, item)\" v-on:dragover=\"piranha.media.dragover\" v-on:dragleave=\"piranha.media.dragleave\" v-on:drop=\"piranha.media.drop($event, item.id)\">\n        <i class=\"fas fa-folder\"></i>{{ item.name }}\n        <span class=\"badge badge-light float-right\">{{ item.mediaCount }}</span>\n    </a>\n    <form v-else v-on:submit.prevent=\"piranha.media.updateFolder()\" class=\"d-inline-block\">\n        <i class=\"fas fa-folder\"></i>\n        <input :id=\"'folder-' + item.id\" type=\"text\" v-on:keyup.esc=\"piranha.media.cancelEditFolder()\" v-model=\"piranha.media.currentFolderName\" class=\"form-control form-control-sm d-inline-block w-auto\">\n    </form>\n    <ol v-if=\"selected === item.id && piranha.media.isAdding\" class=\"dd-list\">\n        <form v-on:submit.prevent=\"piranha.media.addFolder()\" class=\"d-inline-block\">\n            <i class=\"fas fa-folder\"></i><input id=\"add-folder\" type=\"text\" v-on:keyup.esc=\"piranha.media.isAdding = false\" v-model=\"piranha.media.folder.name\" class=\"form-control form-control-sm d-inline-block w-auto\">\n        </form>\n    </ol>\n    <ol v-if=\"item.items.length > 0\" class=\"dd-list\">\n        <folder-item v-for=\"child in item.items\" v-bind:key=\"child.id\" v-bind:selected=\"selected\" v-bind:item=\"child\"></folder-item>\n    </ol>\n</li>\n"
+  template: "\n<li class=\"dd-item expanded\" :class=\"{ active: item.id === selected, expanded: item.isExpanded || item.items.length === 0 }\" :data-id=\"item.id\">\n    <a v-if=\"!item.edit\" class=\"droppable\" v-on:click.prevent=\"piranha.media.load(item.id)\" href=\"#\" draggable=\"true\" v-on:dragstart=\"piranha.media.drag($event, item)\" v-on:dragover=\"piranha.media.dragover\" v-on:dragleave=\"piranha.media.dragleave\" v-on:drop=\"piranha.media.drop($event, item.id)\">\n        <i class=\"fas fa-folder\"></i>{{ item.name }}\n        <span class=\"badge badge-light float-right\">{{ item.mediaCount }}</span>\n    </a>\n    <form v-else v-on:submit.prevent=\"piranha.media.updateFolder()\" class=\"d-flex\">\n        <i class=\"fas fa-folder\"></i>\n        <input :id=\"'folder-' + item.id\" type=\"text\" v-on:keyup.esc=\"piranha.media.cancelEditFolder()\" v-model=\"piranha.media.currentFolderName\" class=\"form-control form-control-sm\">\n    </form>\n    <ol v-if=\"selected === item.id && piranha.media.isAdding\" class=\"dd-list\">\n        <form v-on:submit.prevent=\"piranha.media.addFolder()\" class=\"d-flex\">\n            <i class=\"fas fa-folder\"></i><input id=\"add-folder\" type=\"text\" v-on:keyup.esc=\"piranha.media.isAdding = false\" v-model=\"piranha.media.folder.name\" class=\"form-control form-control-sm\">\n        </form>\n    </ol>\n    <ol v-if=\"item.items.length > 0\" class=\"dd-list\">\n        <folder-item v-for=\"child in item.items\" v-bind:key=\"child.id\" v-bind:selected=\"selected\" v-bind:item=\"child\"></folder-item>\n    </ol>\n</li>\n"
 });
 /*global
     piranha
@@ -64,6 +64,13 @@ piranha.media = new Vue({
                 document.getElementById("folder-" + this.currentFolderId).focus();
             });
         },
+        editAddFolder: function () {
+            this.isAdding = true;
+
+            this.$nextTick(function () {
+                document.getElementById("add-folder").focus();
+            });
+        },
         cancelEditFolder: function () {
             this.currentFolder.edit = false;
             this.currentFolderName = this.currentFolder.name;

core/Piranha.Manager/assets/src/js/components/folder-item.vue

@@ -4,13 +4,13 @@
             <i class="fas fa-folder"></i>{{ item.name }}
             <span class="badge badge-light float-right">{{ item.mediaCount }}</span>
         </a>
-        <form v-else v-on:submit.prevent="piranha.media.updateFolder()" class="d-inline-block">
+        <form v-else v-on:submit.prevent="piranha.media.updateFolder()" class="d-flex">
             <i class="fas fa-folder"></i>
-            <input :id="'folder-' + item.id" type="text" v-on:keyup.esc="piranha.media.cancelEditFolder()" v-model="piranha.media.currentFolderName" class="form-control form-control-sm d-inline-block w-auto">
+            <input :id="'folder-' + item.id" type="text" v-on:keyup.esc="piranha.media.cancelEditFolder()" v-model="piranha.media.currentFolderName" class="form-control form-control-sm">
         </form>
         <ol v-if="selected === item.id && piranha.media.isAdding" class="dd-list">
-            <form v-on:submit.prevent="piranha.media.addFolder()" class="d-inline-block">
-                <i class="fas fa-folder"></i><input id="add-folder" type="text" v-on:keyup.esc="piranha.media.isAdding = false" v-model="piranha.media.folder.name" class="form-control form-control-sm d-inline-block w-auto">
+            <form v-on:submit.prevent="piranha.media.addFolder()" class="d-flex">
+                <i class="fas fa-folder"></i><input id="add-folder" type="text" v-on:keyup.esc="piranha.media.isAdding = false" v-model="piranha.media.folder.name" class="form-control form-control-sm">
             </form>
         </ol>
         <ol v-if="item.items.length > 0" class="dd-list">

core/Piranha.Manager/assets/src/js/piranha.media.js

@@ -60,6 +60,13 @@ piranha.media = new Vue({
                 document.getElementById("folder-" + this.currentFolderId).focus();
             });
         },
+        editAddFolder: function () {
+            this.isAdding = true;
+
+            this.$nextTick(function () {
+                document.getElementById("add-folder").focus();
+            });
+        },
         cancelEditFolder: function () {
             this.currentFolder.edit = false;
             this.currentFolderName = this.currentFolder.name;

core/Piranha.Manager/assets/src/scss/inc/_folders.scss

@@ -20,7 +20,7 @@
         a {
             color: $gray-700;
             display: block;
-            padding: .35rem .25rem;
+            padding: .5rem;
 
             i {
                 color: $gray-600;
@@ -39,7 +39,11 @@
         }
 
         form {
-            padding: .15rem .25rem .09rem;
+            padding: .15rem .25rem .09rem .5rem;
+
+            i {
+                margin-top: .35rem;
+            }
         }
 
         &.active {