From 5e884fe06c0aaf44d00a8028172c1cb5415a3052 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 6 Nov 2018 21:12:04 +0100 Subject: [PATCH 1/8] align button to the left + use umb-button component --- .../src/views/stylesheets/views/rules/rules.html | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git 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 index 17b52f064e..3b8de8bc74 100644 --- 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,9 +18,12 @@ -
- -
+ + From 89266d48767b80340dd4bfbb409fdd251ed66d70 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 6 Nov 2018 21:24:55 +0100 Subject: [PATCH 2/8] move server calls to resource --- .../src/common/resources/codefile.resource.js | 71 +++++++++++++++++++ .../src/views/stylesheets/edit.controller.js | 24 +------ 2 files changed, 73 insertions(+), 22 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/codefile.resource.js index 7cd55b268a..bb1dad1dbd 100644 --- 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 + * 
+         * codefileResource.interpolateStylesheetRules(".box{background:purple;}", "[{name: "heading", selector: "h1", styles: "color: red"}]")
+         *    .then(function(data) {
+         *        alert('its here!');
+         *    });
+         *
+ * + * @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 + * 
+         * 
+         * var conntent
+         * codefileResource.extractStylesheetRules(".box{background:purple;}")
+         *    .then(function(data) {
+         *        alert('its here!');
+         *    });
+         *
+ * + * @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"); } }; 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 2705294d54..03dde41f36 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 @@ -240,31 +240,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, null); } $scope.selectApp = function (app) { From ca749537b2e65808d2b273cded42e25ab1c47082 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Nov 2018 09:13:54 +0100 Subject: [PATCH 3/8] add a little more space underneath content app icons --- .../src/less/components/umb-editor-navigation.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git 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 index 407cfaf6a7..3b49dceeb2 100644 --- 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 { From 1a41998bd13106ff674851a30c347d0a726695aa Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Nov 2018 09:29:56 +0100 Subject: [PATCH 4/8] add border radius to rich text rules --- .../src/less/components/umb-stylesheet.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-stylesheet.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-stylesheet.less index 31824590e8..59ded555a6 100644 --- 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 { From d0215050623bd52fd66c90a3804b806f02581c9c Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Nov 2018 11:18:23 +0100 Subject: [PATCH 5/8] use infinite editing for rich text rule dialog --- .../richtextrule/richtextrule.controller.js | 27 +++++++++ .../richtextrule/richtextrule.html | 60 +++++++++++++++++++ .../views/rules/rules.controller.js | 22 ++++--- .../views/stylesheets/views/rules/rules.html | 12 ---- 4 files changed, 101 insertions(+), 20 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html diff --git 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 new file mode 100644 index 0000000000..092cdaa55e --- /dev/null +++ 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); + +})(); diff --git 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 new file mode 100644 index 0000000000..6318ed0f23 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/stylesheets/infiniteeditors/richtextrule/richtextrule.html @@ -0,0 +1,60 @@ +
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ' + + +
+ +
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 28d1724b64..38fa0dd0c1 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 @@ -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', @@ -40,17 +40,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() { diff --git 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 index 3b8de8bc74..018d4d3741 100644 --- 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 @@ -28,17 +28,5 @@ - - - - - - - - - - - - From 7f0099ca576a3a603ca091937d237f5e957c7bf3 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Wed, 7 Nov 2018 10:26:51 +0000 Subject: [PATCH 6/8] Adds new create dialog option to create a stylesheet as RTE (will set URL location to include rtestyle=true) --- .../src/views/stylesheets/create.controller.js | 6 ++++++ src/Umbraco.Web.UI.Client/src/views/stylesheets/create.html | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.controller.js b/src/Umbraco.Web.UI.Client/src/views/stylesheets/create.controller.js index 229587cc63..8695935062 100644 --- 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); 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 82854635f9..867522b31a 100644 --- 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 @@ New style sheet file +
  • + + + New richtext style sheet file + +
    • From dca4c4e3bf19ab237457e83bed64b6bdfb358497 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Nov 2018 15:11:35 +0100 Subject: [PATCH 7/8] 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 @@
  • - + New richtext style sheet file
    • 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 @@ Document Type without a template New folder New data type - New JavaScript file + New JavaScript file New empty partial view New partial view macro New partial view from snippet New partial view macro from snippet New partial view macro (without macro) New style sheet file + New Rich Text Editor style sheet file Browse your website @@ -1357,7 +1358,7 @@ To manage your website, simply open the Umbraco back office and start adding con Styles The CSS that should be applied in the rich text editor, e.g. "color:red;" Code - Editor + Rich Text Editor Edit template From 1d07ef7e4df23e532d17b57a1d7e835e6cd05334 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 7 Nov 2018 18:23:43 +0100 Subject: [PATCH 8/8] add preview --- .../infiniteeditors/richtextrule/richtextrule.html | 12 ++++++++++++ src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml | 2 ++ 2 files changed, 14 insertions(+) diff --git 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 index 6318ed0f23..a36f3ef6a2 100644 --- 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 @@ -30,6 +30,18 @@ + +
    + 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 +
    + 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 +
    + 1 2 3 4 5 6 7 8 9 0 € £ $ % & (.,;:'\"!?) +
    + Just keep examining every bid quoted for zinc etchings. +
    +     + 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 fe9352a17f..a75fe839ab 100644 --- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml +++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml @@ -1359,6 +1359,8 @@ To manage your website, simply open the Umbraco back office and start adding con The CSS that should be applied in the rich text editor, e.g. "color:red;" Code Rich Text Editor + Preview + How the text will look like in the rich text editor. Edit template