Merge pull request #3542 from umbraco/temp8-stylesheet-fixes

Temp8 stylesheet fixes
2018-11-07 18:27:18 +00:00
parent c5c4d93c5f 1d07ef7e4d
commit 9608d20b38
11 changed files with 249 additions and 67 deletions
--- a/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js
+++ b/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");
        }

    };
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-editor-navigation.less
+++ b/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 {
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-stylesheet.less
+++ b/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 {
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.controller.js
+++ b/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);
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html
+++ b/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>
--- 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;
@@ -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) {
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.controller.js
+++ b/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);
+
+})();
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html
+++ b/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>
--- 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
@@ -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() {
--- a/src/Umbraco.Web.UI.Client/src/views/stylesheets/views/rules/rules.html
+++ b/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>
--- 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,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>