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..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 @@ -4,28 +4,58 @@ * @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: + + 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) { + 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; }; } ); 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 6b3cb5281f..8fee11dbc9 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 { /** @@ -338,15 +348,21 @@ 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 + if(isMediaPickerEnabled(args.toolbar)){ + // 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; @@ -1249,6 +1265,21 @@ 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 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(); + e.dataTransfer.effectAllowed = "none"; + e.dataTransfer.dropEffect = "none"; + e.stopPropagation(); + }); + } + args.editor.on('SetContent', function (e) { var content = e.content; 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 d8df0332ec..b3e729dfdd 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..f33617d03f 100644 --- a/src/Umbraco.Web.UI.Client/src/less/rte.less +++ b/src/Umbraco.Web.UI.Client/src/less/rte.less @@ -56,14 +56,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 +82,84 @@ } } -.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-group .mce-btn { + margin-top:2px; + margin-bottom:2px; +} + +.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; + } +} + +.umb-grid .umb-rte { + border: 1px solid #d8d7d9; +} 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 @@ -
+