From 1a85c4a635a73fd00e7ed04e7b9d6341e8bc546e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 26 Sep 2019 15:05:02 +0200 Subject: [PATCH 1/9] overwrite TinyMCE skin to match Umbraco Visuals --- .../src/less/components/umb-grid.less | 3 +- src/Umbraco.Web.UI.Client/src/less/rte.less | 82 ++++++++++++++++++- .../propertyeditors/grid/editors/rte.html | 2 +- 3 files changed, 80 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less index 852f4411d5..8aac6191dc 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less @@ -637,8 +637,7 @@ } .umb-grid .mce-toolbar { - border-bottom: 1px solid @gray-8; - background-color: rgba(250, 250, 250, 1); + border-bottom: 1px solid @gray-7; display: none; } diff --git a/src/Umbraco.Web.UI.Client/src/less/rte.less b/src/Umbraco.Web.UI.Client/src/less/rte.less index 01af7c3936..a02b341a06 100644 --- a/src/Umbraco.Web.UI.Client/src/less/rte.less +++ b/src/Umbraco.Web.UI.Client/src/less/rte.less @@ -40,6 +40,10 @@ white-space: normal; } +.umb-rte .mce-top-part.mce-container { + padding: 1px 0; +} + .umb-rte .mce-tinymce .mce-edit-area { border-radius: 0px !important; } @@ -56,14 +60,15 @@ } */ -.mce-ico { +.umb-rte .mce-ico { + text-align: center; font-size: 12px !important; /*color: @gray-1 !important;*/ } /* Special case to support helviticons for the tiny mce button controls */ -.mce-ico.mce-i-custom[class^="icon-"], -.mce-ico.mce-i-custom[class*=" icon-"] { +.umb-rte .mce-ico.mce-i-custom[class^="icon-"], +.umb-rte .mce-ico.mce-i-custom[class*=" icon-"] { font-family: icomoon; font-size: 16px !important; } @@ -81,6 +86,75 @@ } } -.mce-fullscreen { +.umb-rte .mce-fullscreen { position:absolute; } + +.umb-rte .mce-toolbar .mce-btn-group { + padding: 0; +} + +.umb-rte .mce-btn { + color: @ui-action-type; + border-radius: 3px; +} + +.umb-rte .mce-btn { + button:hover { + .mce-caret { + border-top-color: @ui-action-type-hover; + } + } +} + +.umb-rte .mce-btn:hover, .umb-rte .mce-btn:active { + background: @ui-action-hover; + border-color: transparent; + button { + color: @ui-action-type-hover; + .mce-ico { + color: @ui-action-type-hover; + } + } +} + +.umb-rte .mce-btn.mce-active, .umb-rte .mce-btn.mce-active:active, +.umb-rte .mce-btn.mce-active:hover, .umb-rte .mce-btn.mce-active:focus { + background: @gray-9; + border-color: transparent; + button { + color: @ui-action-type-hover; + .mce-ico { + color: @ui-action-type-hover; + } + .mce-caret { + border-top-color: @ui-action-type-hover; + } + } +} + + +.mce-menu { + border-radius: 3px; +} + +.mce-menu-item.mce-menu-item-normal.mce-stack-layout-item { + .mce-text, .mce-ico { + color: @ui-action-type; + } + &:hover { + background: @ui-action-hover; + .mce-text, .mce-ico { + color: @ui-action-type-hover; + } + } +} + +.mce-menu-item.mce-menu-item-normal.mce-stack-layout-item.mce-active { + &, &:hover { + background: @gray-9; + } + .mce-text, .mce-ico { + color: @ui-action-type-hover; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html index 7bfc6d125e..fb6f3b2a4b 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html @@ -1,4 +1,4 @@ -
+
Date: Thu, 26 Sep 2019 15:27:59 +0200 Subject: [PATCH 2/9] Automatically assign LuceneIndexDiagnostics instead of GenericIndexDiagnostics for LuceneIndexes --- src/Umbraco.Web/Editors/ExamineManagementController.cs | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web/Editors/ExamineManagementController.cs b/src/Umbraco.Web/Editors/ExamineManagementController.cs index 7c040ae508..0953b41cac 100644 --- a/src/Umbraco.Web/Editors/ExamineManagementController.cs +++ b/src/Umbraco.Web/Editors/ExamineManagementController.cs @@ -177,8 +177,12 @@ namespace Umbraco.Web.Editors var indexName = index.Name; if (!(index is IIndexDiagnostics indexDiag)) - indexDiag = new GenericIndexDiagnostics(index); - + { + if (index is LuceneIndex luceneIndex) + indexDiag = new LuceneIndexDiagnostics(luceneIndex, Logger); + else + indexDiag = new GenericIndexDiagnostics(index); + } var isHealth = indexDiag.IsHealthy(); var properties = new Dictionary From 87df6c74c98498daf6994b3080fc5e3ddac42382 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 26 Sep 2019 14:31:20 +0100 Subject: [PATCH 3/9] * Ensure you can only drag and drop or paste images in when the insert image/media button is enabled in thr RTE toolbar/config * If disallowed then we add a new native browser event for dragover etc to prevent dropping & showing the no/stop sign icon --- .../src/common/services/tinymce.service.js | 48 ++++++++++++++++--- 1 file changed, 42 insertions(+), 6 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index a91e3d6ecc..27b02e7976 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -338,15 +338,28 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s body_class: "umb-rte", //see http://archive.tinymce.com/wiki.php/Configuration:cache_suffix - cache_suffix: "?umb__rnd=" + Umbraco.Sys.ServerVariables.application.cacheBuster, + cache_suffix: "?umb__rnd=" + Umbraco.Sys.ServerVariables.application.cacheBuster + }; + + // Need to check if we are allowed to UPLOAD images + // This is done by checking if the insert image toolbar button is available + var insertMediaButtonFound = false; + args.toolbar.forEach(toolbarItem => { + if(toolbarItem.indexOf("umbmediapicker") > -1){ + insertMediaButtonFound = true; + } + }); + + if(insertMediaButtonFound){ + // Update the TinyMCE Config object to allow pasting + config.images_upload_handler = uploadImageHandler; + config.automatic_uploads = false; + config.images_replace_blob_uris = false; // This allows images to be pasted in & stored as Base64 until they get uploaded to server - paste_data_images: true, + config.paste_data_images = true; + } - images_upload_handler: uploadImageHandler, - automatic_uploads: false, - images_replace_blob_uris: false - }; if (args.htmlId) { config.selector = "#" + args.htmlId; @@ -1247,6 +1260,29 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s startWatch(); } + // If we can not find the insert image/media toolbar button + // Then we need to add an event listener to the editor + // That will update native browser drag & drop events + // To update the icon to show you can NOT drop something into the editor + var insertMediaButtonFound = false; + var toolbarItems = args.editor.settings.toolbar; + toolbarItems = toolbarItems.split(" "); + toolbarItems.forEach(toolbarItem => { + if(toolbarItem.indexOf("umbmediapicker") > -1){ + insertMediaButtonFound = true; + } + }); + + if(insertMediaButtonFound === false){ + // Wire up the event listener + args.editor.on('dragend dragover draggesture dragdrop drop drag', function (e) { + e.preventDefault(); + e.dataTransfer.effectAllowed = "none"; + e.dataTransfer.dropEffect = "none"; + e.stopPropagation(); + }); + } + args.editor.on('SetContent', function (e) { var content = e.content; From df858d47c2ae76ecd0215df1238dfadfd954bc8c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 26 Sep 2019 15:40:51 +0200 Subject: [PATCH 4/9] fixing the looks for Grid --- src/Umbraco.Web.UI.Client/src/less/rte.less | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/rte.less b/src/Umbraco.Web.UI.Client/src/less/rte.less index a02b341a06..f33617d03f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/rte.less +++ b/src/Umbraco.Web.UI.Client/src/less/rte.less @@ -40,10 +40,6 @@ white-space: normal; } -.umb-rte .mce-top-part.mce-container { - padding: 1px 0; -} - .umb-rte .mce-tinymce .mce-edit-area { border-radius: 0px !important; } @@ -99,6 +95,11 @@ border-radius: 3px; } +.umb-rte .mce-btn-group .mce-btn { + margin-top:2px; + margin-bottom:2px; +} + .umb-rte .mce-btn { button:hover { .mce-caret { @@ -158,3 +159,7 @@ color: @ui-action-type-hover; } } + +.umb-grid .umb-rte { + border: 1px solid #d8d7d9; +} From a59fffd891aaadd2510486bc9f76a15368d69172 Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Thu, 26 Sep 2019 15:10:23 +0100 Subject: [PATCH 5/9] Keep it DRY --- .../src/common/services/tinymce.service.js | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js index 27b02e7976..16b1c6ec9d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js +++ b/src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js @@ -251,6 +251,16 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s } } + function isMediaPickerEnabled(toolbarItemArray){ + var insertMediaButtonFound = false; + toolbarItemArray.forEach(toolbarItem => { + if(toolbarItem.indexOf("umbmediapicker") > -1){ + insertMediaButtonFound = true; + } + }); + return insertMediaButtonFound; + } + return { /** @@ -343,14 +353,7 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // Need to check if we are allowed to UPLOAD images // This is done by checking if the insert image toolbar button is available - var insertMediaButtonFound = false; - args.toolbar.forEach(toolbarItem => { - if(toolbarItem.indexOf("umbmediapicker") > -1){ - insertMediaButtonFound = true; - } - }); - - if(insertMediaButtonFound){ + if(isMediaPickerEnabled(args.toolbar)){ // Update the TinyMCE Config object to allow pasting config.images_upload_handler = uploadImageHandler; config.automatic_uploads = false; @@ -1264,16 +1267,8 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s // Then we need to add an event listener to the editor // That will update native browser drag & drop events // To update the icon to show you can NOT drop something into the editor - var insertMediaButtonFound = false; - var toolbarItems = args.editor.settings.toolbar; - toolbarItems = toolbarItems.split(" "); - toolbarItems.forEach(toolbarItem => { - if(toolbarItem.indexOf("umbmediapicker") > -1){ - insertMediaButtonFound = true; - } - }); - - if(insertMediaButtonFound === false){ + var toolbarItems = args.editor.settings.toolbar.split(" "); + if(isMediaPickerEnabled(toolbarItems) === false){ // Wire up the event listener args.editor.on('dragend dragover draggesture dragdrop drop drag', function (e) { e.preventDefault(); From 93df9c4dfd68017a1b49793a3e2d1ecfc0d30757 Mon Sep 17 00:00:00 2001 From: elitsa Date: Fri, 13 Sep 2019 12:03:33 +0200 Subject: [PATCH 6/9] Renamed angular filter so it doesn't collide with the "truncate" one in Forms. --- .../{truncate.filter.js => advancedtruncate.filter.js} | 6 +++--- .../src/views/common/overlays/itempicker/itempicker.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/Umbraco.Web.UI.Client/src/common/filters/{truncate.filter.js => advancedtruncate.filter.js} (86%) diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js similarity index 86% rename from src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js rename to src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js index 5efe0f5fff..266c444fe5 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js @@ -1,7 +1,7 @@ /** * @ngdoc filter - * @name umbraco.filters.filter:truncate - * @namespace truncateFilter + * @name umbraco.filters.filter:advancedTruncate + * @namespace advancedTruncateFilter * * param {any} wordwise if true, the string will be cut after last fully displayed word. * param {any} max max length of the outputtet string @@ -10,7 +10,7 @@ * @description * Limits the length of a string, if a cut happens only the string will be appended with three dots to indicate that more is available. */ -angular.module("umbraco.filters").filter('truncate', +angular.module("umbraco.filters").filter('advancedTruncate', function () { return function (value, wordwise, max, tail) { if (!value) return ''; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html index a9f57fe304..1594d6139e 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html @@ -24,7 +24,7 @@ - {{ pasteItem.name | truncate:true:36 }} + {{ pasteItem.name | advancedTruncate:true:36 }} From 2c18a125c6e8178a221700dbf05ea8755fdccacc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 13 Sep 2019 13:46:15 +0200 Subject: [PATCH 7/9] Revert "Renamed angular filter so it doesn't collide with the "truncate" one in Forms." This reverts commit f1cb89b249bdea3faf4b6d6ccf248f64b2056040. --- .../{advancedtruncate.filter.js => truncate.filter.js} | 6 +++--- .../src/views/common/overlays/itempicker/itempicker.html | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) rename src/Umbraco.Web.UI.Client/src/common/filters/{advancedtruncate.filter.js => truncate.filter.js} (86%) diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js similarity index 86% rename from src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js rename to src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js index 266c444fe5..5efe0f5fff 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/advancedtruncate.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js @@ -1,7 +1,7 @@ /** * @ngdoc filter - * @name umbraco.filters.filter:advancedTruncate - * @namespace advancedTruncateFilter + * @name umbraco.filters.filter:truncate + * @namespace truncateFilter * * param {any} wordwise if true, the string will be cut after last fully displayed word. * param {any} max max length of the outputtet string @@ -10,7 +10,7 @@ * @description * Limits the length of a string, if a cut happens only the string will be appended with three dots to indicate that more is available. */ -angular.module("umbraco.filters").filter('advancedTruncate', +angular.module("umbraco.filters").filter('truncate', function () { return function (value, wordwise, max, tail) { if (!value) return ''; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html index 1594d6139e..a9f57fe304 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html @@ -24,7 +24,7 @@ - {{ pasteItem.name | advancedTruncate:true:36 }} + {{ pasteItem.name | truncate:true:36 }} From 3d9c2fee7c99399e32c35c7590c509dce85fdead Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 13 Sep 2019 14:55:52 +0200 Subject: [PATCH 8/9] new Angular Truncate Filter, that supports Legacy version from Umbraco Forms, plus updated code for even prettier truncated content. --- .../src/common/filters/truncate.filter.js | 38 +++++++++++++++---- 1 file changed, 31 insertions(+), 7 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js index 5efe0f5fff..395300014d 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js @@ -4,28 +4,52 @@ * @namespace truncateFilter * * param {any} wordwise if true, the string will be cut after last fully displayed word. - * param {any} max max length of the outputtet string - * param {any} tail option tail, defaults to: ' ...' - * + * param {any} max where to cut the string. + * param {any} tail option tail, defaults to: '…' + * + * Legacy version: + * parameter noOfChars(wordwise) Where to cut the string. + * parameter appendDots(max) If true dots will be appended in the end. + * * @description * Limits the length of a string, if a cut happens only the string will be appended with three dots to indicate that more is available. */ angular.module("umbraco.filters").filter('truncate', function () { return function (value, wordwise, max, tail) { + if (!value) return ''; + + // Overload-fix to support Forms Legacy Version: + if (typeof(wordwise) !== 'boolean') { + // switch arguments around to fit Forms version. + if (max !== true) { + tail = ''; + } + max = wordwise; + wordwise = false; + } + // !end of overload fix. + max = parseInt(max, 10); if (!max) return value; if (value.length <= max) return value; - + + tail = (!tail && tail !== '') ? '…' : tail; + + if (wordwise && value.substr(max, 1) === ' ') { + max++; + } value = value.substr(0, max); + if (wordwise) { var lastspace = value.lastIndexOf(' '); - if (lastspace != -1) { - value = value.substr(0, lastspace); + if (lastspace !== -1) { + value = value.substr(0, lastspace+1); } } - return value + (tail || (wordwise ? ' …' : '…')); + + return value + tail; }; } ); From 759c8b8b98f5ebeb7064f8fb6671dad4a8aa8bf1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Thu, 26 Sep 2019 15:55:35 +0200 Subject: [PATCH 9/9] updated comment --- .../src/common/filters/truncate.filter.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js index 395300014d..37c560b519 100644 --- a/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js +++ b/src/Umbraco.Web.UI.Client/src/common/filters/truncate.filter.js @@ -20,7 +20,13 @@ angular.module("umbraco.filters").filter('truncate', if (!value) return ''; - // Overload-fix to support Forms Legacy Version: + /* + Overload-fix to support Forms Legacy Version: + + We are making this hack to support the old Forms version of the truncate filter. + The old version took different attributes, this code block checks if the first argument isnt a boolean, meaning its not the new version, meaning that the filter is begin used in the old way. + Therefor we use the second argument(max) to indicate wether we want a tail (…) and using the first argument(wordwise) as the second argument(max amount of characters) + */ if (typeof(wordwise) !== 'boolean') { // switch arguments around to fit Forms version. if (max !== true) {