Merge remote-tracking branch 'origin/temp8' into temp8-224-db-updates-sched-publishing-with-variants

src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js

@@ -243,6 +243,77 @@ function codefileResource($q, $http, umbDataFormatter, umbRequestHelper) {
                     "PostCreateContainer", 
                     { type: type, parentId: parentId, name: encodeURIComponent(name) })),
                 'Failed to create a folder under parent id ' + parentId);
+        },
+
+        /**
+         * @ngdoc method
+         * @name umbraco.resources.codefileResource#interpolateStylesheetRules
+         * @methodOf umbraco.resources.codefileResource
+         *
+         * @description
+         * Takes all rich text editor styling rules and turns them into css
+         * 
+         * ##usage
+         * <pre>
+         * codefileResource.interpolateStylesheetRules(".box{background:purple;}", "[{name: "heading", selector: "h1", styles: "color: red"}]")
+         *    .then(function(data) {
+         *        alert('its here!');
+         *    });
+         * </pre>
+         *
+         * @param {string} content The style sheet content.
+         * @param {string} rules The rich text editor rules
+         * @returns {Promise} resourcePromise object.
+         *
+         */
+        interpolateStylesheetRules: function (content, rules) {
+            var payload = {
+                content: content,
+                rules: rules
+            };
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "codeFileApiBaseUrl",
+                        "PostInterpolateStylesheetRules"),
+                    payload),
+                "Failed to interpolate sheet rules");
+        },
+        
+        /**
+         * @ngdoc method
+         * @name umbraco.resources.codefileResource#extractStylesheetRules
+         * @methodOf umbraco.resources.codefileResource
+         *
+         * @description
+         * Find all rich text editor styles in the style sheets and turns them into "rules"
+         * 
+         * ##usage
+         * <pre>
+         * 
+         * var conntent
+         * codefileResource.extractStylesheetRules(".box{background:purple;}")
+         *    .then(function(data) {
+         *        alert('its here!');
+         *    });
+         * </pre>
+         *
+         * @param {string} content The style sheet content.
+         * @returns {Promise} resourcePromise object.
+         *
+         */
+        extractStylesheetRules: function(content) {
+            var payload = {
+                content: content,
+                rules: null
+            };
+            return umbRequestHelper.resourcePromise(
+                $http.post(
+                    umbRequestHelper.getApiUrl(
+                        "codeFileApiBaseUrl",
+                        "PostExtractStylesheetRules"),
+                    payload),
+                "Failed to extract style sheet rules");
         }
 
     };

src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less

@@ -43,7 +43,7 @@
   font-size: 24px;
   display: block;
   text-align: center;
-  margin-bottom: 5px;
+  margin-bottom: 7px;
 }
 
 .umb-sub-views-nav-item-text {

src/Umbraco.Web.UI.Client/src/less/components/umb-stylesheet.less

@@ -8,6 +8,7 @@
     margin: 10px 0 !important;
     background: @gray-10;
     cursor: pointer;
+    border-radius: @baseBorderRadius;
 }
 
 .umb-stylesheet-rules__listitem i {

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

@@ -7,11 +7,17 @@
         var node = $scope.dialogOptions.currentNode;
 
         vm.createFile = createFile;
+        vm.createRichtextStyle = createRichtextStyle;
 
         function createFile() {
             $location.path("/settings/stylesheets/edit/" + node.id).search("create", "true");
             navigationService.hideMenu();
         }
+
+        function createRichtextStyle() {
+            $location.path("/settings/stylesheets/edit/" + node.id).search("create", "true").search("rtestyle", "true");
+            navigationService.hideMenu();
+        }
     }
 
     angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.CreateController", StyleSheetsCreateController);

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

@@ -10,6 +10,12 @@
                     <span class="menu-label"><localize key="create_newStyleSheetFile">New style sheet file</localize></span>
                 </a>
             </li>
+            <li class="umb-action">
+                <a href="" ng-click="vm.createRichtextStyle()" class="umb-action-link">
+                    <i class="large icon icon-script"></i>
+                    <span class="menu-label"><localize key="create_newRteStyleSheetFile">New richtext style sheet file</localize></span>
+                </a>
+            </li>
         </ul>
 
     </div>

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;
@@ -240,31 +256,11 @@
         }
 
         function interpolateRules() {
-            var payload = {
-                content: vm.stylesheet.content,
-                rules: vm.stylesheet.rules
-            };
-            return umbRequestHelper.resourcePromise(
-                $http.post(
-                    umbRequestHelper.getApiUrl(
-                        "codeFileApiBaseUrl",
-                        "PostInterpolateStylesheetRules"),
-                    payload),
-                "Failed to interpolate sheet rules");
+            return codefileResource.interpolateStylesheetRules(vm.stylesheet.content, vm.stylesheet.rules);
         }
 
         function extractRules() {
-            var payload = {
-                content: vm.stylesheet.content,
-                rules: null
-            };
-            return umbRequestHelper.resourcePromise(
-                $http.post(
-                    umbRequestHelper.getApiUrl(
-                        "codeFileApiBaseUrl",
-                        "PostExtractStylesheetRules"),
-                    payload),
-                "Failed to extract style sheet rules");
+            return codefileResource.extractStylesheetRules(vm.stylesheet.content);
         }
         
         $scope.selectApp = function (app) {

src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.controller.js

@@ -0,0 +1,27 @@
+(function() {
+	"use strict";
+
+	function RichTextRuleController($scope, formHelper) {
+
+        const vm = this;
+
+        vm.submit = submit;
+        vm.close = close;
+
+        function submit() {
+            if ($scope.model && $scope.model.submit && formHelper.submitForm({scope: $scope})) {
+                $scope.model.submit($scope.model);
+            }
+        }
+
+        function close() {
+            if ($scope.model && $scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+	}
+
+	angular.module("umbraco").controller("Umbraco.Editors.RichTextRuleController", RichTextRuleController);
+
+})();

src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html

@@ -0,0 +1,72 @@
+<div ng-controller="Umbraco.Editors.RichTextRuleController as vm">
+    
+    <form novalidate name="richTextRuleForm" val-form-manager>
+
+    <umb-editor-view>
+
+            <umb-editor-header
+                name="model.title"
+                name-locked="true"
+                hide-alias="true"
+                hide-icon="true"
+                hide-description="true">
+            </umb-editor-header>
+
+            <umb-editor-container>
+
+                <umb-box>
+
+                    <umb-box-content class="block-form">
+                        
+                        <umb-control-group label="@general_name" description="@stylesheet_nameHelp">
+                            <input type="text" ng-model="model.rule.name" umb-auto-focus required />
+                        </umb-control-group>
+
+                        <umb-control-group label="@stylesheet_selector" description="@stylesheet_selectorHelp">
+                            <input type="text" ng-model="model.rule.selector" required />
+                        </umb-control-group>
+
+                        <umb-control-group label="@stylesheet_styles" description="@stylesheet_stylesHelp">
+                            <textarea ng-model="model.rule.styles" required></textarea>
+                        </umb-control-group>
+
+                        <umb-control-group label="@stylesheet_preview" description="@stylesheet_previewHelp">
+                            <div style="{{model.rule.styles}}">
+                                a b c d e f g h i j k l m n o p q r s t u v w x t z
+                                <br>
+                                A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+                                <br>
+                                1 2 3 4 5 6 7 8 9 0 € £ $ % & (.,;:'\"!?) 
+                                <br>
+                                Just keep examining every bid quoted for zinc etchings.
+                            </div>
+                        </umb-control-group>
+
+                    </umb-box-content>
+                </umb-box>
+
+            </umb-editor-container>
+
+            <umb-editor-footer>
+                <umb-editor-footer-content-right>
+                    <umb-button
+                        type="button"
+                        button-style="link"
+                        label-key="general_close"
+                        action="vm.close()">
+                    </umb-button>
+                    <umb-button
+                        type="button"
+                        button-style="success"
+                        label-key="general_submit"
+                        state="vm.saveButtonState"
+                        action="vm.submit(model)">
+                    </umb-button>
+                </umb-editor-footer-content-right>
+            </umb-editor-footer>
+            '        
+    </umb-editor-view>
+
+    </form>
+
+</div>

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

@@ -1,5 +1,5 @@
 angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesController",
-    function ($scope, localizationService) {       
+    function ($scope, localizationService, editorService) {       
         $scope.sortableOptions = {
             axis: 'y',
             containment: 'parent',
@@ -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();
             });
@@ -40,17 +43,23 @@ angular.module("umbraco").controller("Umbraco.Editors.StyleSheets.RulesControlle
         }
 
         function openOverlay(rule, title, onSubmit) {
-            $scope.model.overlay = {
+
+            const ruleDialog = {
                 title: title,
-                submit: function (model) {
+                rule: _.clone(rule),
+                view: "views/stylesheets/infiniteeditors/richtextrule/richtextrule.html",
+                size: "small",
+                submit: function(model) {
                     onSubmit(model.rule);
-                    $scope.model.overlay = null;
+                    editorService.close();
                 },
-                close: function (oldModel) {
-                    $scope.model.overlay = null;
-                },
-                rule: _.clone(rule)
+                close: function() {
+                    editorService.close();
+                }
             };
+
+            editorService.open(ruleDialog);
+
         }
 
         function setDirty() {

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

@@ -18,24 +18,15 @@
                             </div>
                         </div>
                     </div>
-                    <div class="text-right">
-                        <button class="btn btn-info" ng-click="add($event)"><localize key="general_add">Add</localize></button>
-                    </div>
+                    <umb-button
+                        type="button"
+                        button-style="info"
+                        action="add($event)"
+                        label-key="general_add">
+                    </umb-button>
                 </div>
             </div>
         </div>
 
-        <umb-overlay ng-if="model.overlay" model="model.overlay" position="right" class="umb-stylesheet-rule-overlay">
-            <umb-control-group label="@general_name" description="@stylesheet_nameHelp">
-                <input type="text" ng-model="model.overlay.rule.name" required />
-            </umb-control-group>
-            <umb-control-group label="@stylesheet_selector" description="@stylesheet_selectorHelp">
-                <input type="text" ng-model="model.overlay.rule.selector" required />
-            </umb-control-group>
-            <umb-control-group label="@stylesheet_styles" description="@stylesheet_stylesHelp">
-                <textarea ng-model="model.overlay.rule.styles" required></textarea>
-            </umb-control-group>
-        </umb-overlay>
-
     </umb-box-content>
 </umb-box>

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,9 @@ 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>
+    <key alias="preview">Preview</key>
+    <key alias="previewHelp">How the text will look like in the rich text editor.</key>
   </area>
   <area alias="template">
     <key alias="edittemplate">Edit template</key>