Make it possible to create folders for stylesheets

src/Umbraco.Core/Services/IFileService.cs

@@ -108,6 +108,19 @@ namespace Umbraco.Core.Services
         /// <param name="folderPath"></param>
         void DeleteScriptFolder(string folderPath);
 
+        /// <summary>
+        /// Creates a folder for style sheets
+        /// </summary>
+        /// <param name="folderPath"></param>
+        /// <returns></returns>
+        void CreateStyleSheetFolder(string folderPath);
+
+        /// <summary>
+        /// Deletes a folder for style sheets
+        /// </summary>
+        /// <param name="folderPath"></param>
+        void DeleteStyleSheetFolder(string folderPath);
+
         /// <summary>
         /// Gets a list of all <see cref="ITemplate"/> objects
         /// </summary>

src/Umbraco.Core/Services/Implement/FileService.cs

@@ -140,6 +140,24 @@ namespace Umbraco.Core.Services.Implement
             }
         }
 
+        public void CreateStyleSheetFolder(string folderPath)
+        {
+            using (var scope = ScopeProvider.CreateScope())
+            {
+                ((StylesheetRepository) _stylesheetRepository).AddFolder(folderPath);
+                scope.Complete();
+            }
+        }
+
+        public void DeleteStyleSheetFolder(string folderPath)
+        {
+            using (var scope = ScopeProvider.CreateScope())
+            {
+                ((StylesheetRepository) _stylesheetRepository).DeleteFolder(folderPath);
+                scope.Complete();
+            }
+        }
+
         public Stream GetStylesheetFileContentStream(string filepath)
         {
             using (var scope = ScopeProvider.CreateScope(autoComplete: true))

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>

src/Umbraco.Web/Editors/CodeFileController.cs

@@ -68,7 +68,7 @@ namespace Umbraco.Web.Editors
         }
 
         /// <summary>
-        /// Used to create a container/folder in 'partialViews', 'partialViewMacros' or 'scripts'
+        /// Used to create a container/folder in 'partialViews', 'partialViewMacros', 'scripts' or 'stylesheets'
         /// </summary>
         /// <param name="type">'partialViews', 'partialViewMacros' or 'scripts'</param>
         /// <param name="parentId">The virtual path of the parent.</param>
@@ -111,6 +111,10 @@ namespace Umbraco.Web.Editors
                     virtualPath = NormalizeVirtualPath(name, SystemDirectories.Scripts);
                     Services.FileService.CreateScriptFolder(virtualPath);
                     break;
+                case Core.Constants.Trees.Stylesheets:
+                    virtualPath = NormalizeVirtualPath(name, SystemDirectories.Css);
+                    Services.FileService.CreateStyleSheetFolder(virtualPath);
+                    break;
 
             }
 
@@ -328,6 +332,11 @@ namespace Umbraco.Web.Editors
                     return Request.CreateErrorResponse(HttpStatusCode.NotFound, "No Script or folder found with the specified path");
 
                 case Core.Constants.Trees.Stylesheets:
+                    if (IsDirectory(virtualPath, SystemDirectories.Css))
+                    {
+                        Services.FileService.DeleteStyleSheetFolder(virtualPath);
+                        return Request.CreateResponse(HttpStatusCode.OK);
+                    }
                     if (Services.FileService.GetStylesheetByName(virtualPath) != null)
                     {
                         Services.FileService.DeleteStylesheet(virtualPath, Security.CurrentUser.Id);