Make it possible to create folders for stylesheets

src/Umbraco.Web.UI.Client/src/views/stylesheets/create.controller.js

@@ -1,7 +1,7 @@
 (function () {
     "use strict";
 
-    function StyleSheetsCreateController($scope, $location, navigationService) {
+    function StyleSheetsCreateController($scope, $location, navigationService, formHelper, codefileResource) {
 
         var vm = this;
         var node = $scope.currentNode;
@@ -9,6 +9,9 @@
         vm.createFile = createFile;
         vm.createRichtextStyle = createRichtextStyle;
         vm.close = close;
+        vm.creatingFolder = false;
+        vm.showCreateFolder = showCreateFolder;
+        vm.createFolder = createFolder;
 
         function createFile() {
             $location.path("/settings/stylesheets/edit/" + node.id).search("create", "true");
@@ -19,6 +22,36 @@
             $location.path("/settings/stylesheets/edit/" + node.id).search("create", "true").search("rtestyle", "true");
             navigationService.hideMenu();
         }
+        
+        function showCreateFolder() {
+            vm.creatingFolder = true;
+        }
+
+        function createFolder(form) {
+
+            if (formHelper.submitForm({scope: $scope, formCtrl: form })) {
+
+                codefileResource.createContainer("stylesheets", node.id, vm.folderName).then(function (saved) {
+
+                    navigationService.hideMenu();
+
+                    navigationService.syncTree({
+                        tree: "stylesheets",
+                        path: saved.path,
+                        forceReload: true,
+                        activate: true
+                    });
+
+                    formHelper.resetForm({ scope: $scope });
+
+                }, function(err) {
+
+                  vm.createFolderError = err;
+                    
+                });
+            }
+
+        }
 
         function close() {
             const showMenu = true;

src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html

@@ -2,7 +2,7 @@
 
     <div class="umbracoDialog umb-dialog-body with-footer" ng-cloak>
 
-        <div class="umb-pane">
+        <div class="umb-pane" ng-if="!vm.creatingFolder">
             <h5><localize key="create_createUnder">Create an item under</localize> {{currentNode.name}}</h5>
 
             <ul class="umb-actions umb-actions-child">
@@ -18,10 +18,36 @@
                         <span class="menu-label"><localize key="create_newRteStyleSheetFile">New richtext style sheet file</localize></span>
                     </a>
                 </li>
+                <li class="umb-action">
+                    <a href="" class="umb-action-link" ng-click="vm.showCreateFolder()">
+                        <i class="large icon icon-folder"></i>
+                        <span class="menu-label"><localize key="general_folder"></localize>...</span>
+                    </a>
+                </li>
             </ul>
 
         </div>
 
+        <div class="umb-pane" ng-if="vm.creatingFolder">
+            <form novalidate name="createFolderForm"
+                  ng-submit="vm.createFolder(createFolderForm)"
+                  val-form-manager>
+
+                <div ng-show="vm.createFolderError">
+                    <div class="alert alert-error">
+                        <div><strong>{{vm.createFolderError.errorMsg}}</strong></div>
+                        <div>{{vm.createFolderError.data.message}}</div>
+                    </div>
+                </div>
+
+                <umb-control-group label="Enter a folder name" hide-label="false">
+                    <input type="text" name="folderName" ng-model="vm.folderName" class="umb-textstring textstring input-block-level" umb-auto-focus required />
+                </umb-control-group>
+
+                <button type="submit" class="btn btn-primary"><localize key="general_create">Create</localize></button>
+            </form>
+        </div>
+
     </div>
 
     <div class="umb-dialog-footer btn-toolbar umb-btn-toolbar">
@@ -30,4 +56,4 @@
         </button>
     </div>
 
-</div>
+</div>