From dca4c4e3bf19ab237457e83bed64b6bdfb358497 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 7 Nov 2018 15:11:35 +0100
Subject: [PATCH] open the correct view based on which item you are creating
 and on the content of the stylesheet file

---
 .../src/views/stylesheets/create.html         |  2 +-
 .../src/views/stylesheets/edit.controller.js  | 56 ++++++++++++-------
 .../views/rules/rules.controller.js           |  3 +
 .../Umbraco/config/lang/en_us.xml             |  5 +-
 4 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html b/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html
index 867522b31a..c735d2fe3c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html
+++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html
@@ -12,7 +12,7 @@
             </li>
             <li class="umb-action">
                 <a href="" ng-click="vm.createRichtextStyle()" class="umb-action-link">
-                    <i class="large icon icon-folder"></i>
+                    <i class="large icon icon-script"></i>
                     <span class="menu-label"><localize key="create_newRteStyleSheetFile">New richtext style sheet file</localize></span>
                 </a>
             </li>
diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/stylesheets/edit.controller.js
index 03dde41f36..a05836be06 100644
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/edit.controller.js
@@ -12,24 +12,6 @@
         vm.page.menu.currentNode = null;
         vm.page.saveButtonState = "init";
 
-        localizationService.localizeMany(["stylesheet_tabCode", "stylesheet_tabRules"]).then(function (data) {
-            vm.page.navigation = [
-                {
-                    "name": data[0],
-                    "alias": "code",
-                    "icon": "icon-brackets",
-                    "view": "views/stylesheets/views/code/code.html",
-                    "active": true
-                },
-                {
-                    "name": data[1],
-                    "alias": "rules",
-                    "icon": "icon-font",
-                    "view": "views/stylesheets/views/rules/rules.html"
-                }
-            ];
-        });
-
          //Used to toggle the keyboard shortcut modal
         //From a custom keybinding in ace editor - that conflicts with our own to show the dialog
         vm.showKeyboardShortcut = false;
@@ -45,7 +27,10 @@
             vm.page.keyboardShortcutsOverview.push(shortcuts);
         });
 
-        vm.stylesheet = {};
+        vm.stylesheet = {
+            content: "",
+            rules: []
+        };
 
         // bind functions to view model
         vm.save = interpolateAndSave;
@@ -139,16 +124,47 @@
 
             if ($routeParams.create) {
                 codefileResource.getScaffold("stylesheets", $routeParams.id).then(function (stylesheet) {
+                    const mode = $routeParams.rtestyle ? "RTE" : null;
                     ready(stylesheet, false);
+                    generateNavigation(mode);
                 });
             } else {
                 codefileResource.getByPath('stylesheets', $routeParams.id).then(function (stylesheet) {
                     ready(stylesheet, true);
+                    extractRules().then(rules => {
+                        vm.stylesheet.rules = rules;
+                        const mode = rules && rules.length > 0 ? "RTE" : null;
+                        generateNavigation(mode);
+                    });
                 });
             }
 
         }
 
+        function generateNavigation(mode) {
+            localizationService.localizeMany(["stylesheet_tabRules", "stylesheet_tabCode"]).then(function (data) {
+                vm.page.navigation = [
+                    {
+                        "name": data[0],
+                        "alias": "rules",
+                        "icon": "icon-font",
+                        "view": "views/stylesheets/views/rules/rules.html"
+                    },
+                    {
+                        "name": data[1],
+                        "alias": "code",
+                        "icon": "icon-brackets",
+                        "view": "views/stylesheets/views/code/code.html"
+                    }
+                ];
+                if(mode === "RTE") {
+                    vm.page.navigation[0].active = true;
+                } else {
+                    vm.page.navigation[1].active = true;
+                }
+            });
+        }
+
         function ready(stylesheet, syncTree) {
 
             vm.page.loading = false;
@@ -244,7 +260,7 @@
         }
 
         function extractRules() {
-            return codefileResource.extractStylesheetRules(vm.stylesheet.content, null);
+            return codefileResource.extractStylesheetRules(vm.stylesheet.content);
         }
         
         $scope.selectApp = function (app) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.controller.js b/src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.controller.js
index 38fa0dd0c1..b3aeedeb6e 100644
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.controller.js
@@ -16,6 +16,9 @@ angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesControlle
             evt.preventDefault();
 
             openOverlay({}, $scope.labels.addRule, (newRule) => {
+                if(!$scope.model.stylesheet.rules) {
+                    $scope.model.stylesheet.rules = [];
+                } 
                 $scope.model.stylesheet.rules.push(newRule);
                 setDirty();
             });
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index a7a7c7d8e5..fe9352a17f 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -309,13 +309,14 @@
     <key alias="documentTypeWithoutTemplate">Document Type without a template</key>
     <key alias="newFolder">New folder</key>
     <key alias="newDataType">New data type</key>
-        <key alias="newJavascriptFile">New JavaScript file</key>
+    <key alias="newJavascriptFile">New JavaScript file</key>
     <key alias="newEmptyPartialView">New empty partial view</key>
     <key alias="newPartialViewMacro">New partial view macro</key>
     <key alias="newPartialViewFromSnippet">New partial view from snippet</key>
     <key alias="newPartialViewMacroFromSnippet">New partial view macro from snippet</key>
     <key alias="newPartialViewMacroNoMacro">New partial view macro (without macro)</key>
     <key alias="newStyleSheetFile">New style sheet file</key>
+    <key alias="newRteStyleSheetFile">New Rich Text Editor style sheet file</key>
   </area>
   <area alias="dashboard">
     <key alias="browser">Browse your website</key>
@@ -1357,7 +1358,7 @@ To manage your website, simply open the Umbraco back office and start adding con
     <key alias="styles">Styles</key>
     <key alias="stylesHelp">The CSS that should be applied in the rich text editor, e.g. "color:red;"</key>
     <key alias="tabCode">Code</key>
-    <key alias="tabRules">Editor</key>
+    <key alias="tabRules">Rich Text Editor</key>
   </area>
   <area alias="template">
     <key alias="edittemplate">Edit template</key>