diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js index 235918735f..4104a663d3 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/umbeditors.directive.js @@ -7,161 +7,85 @@ var evts = []; var allowedNumberOfVisibleEditors = 3; - var editorIndent = 60; - + scope.editors = []; - + function addEditor(editor) { + editor.inFront = true; + editor.moveRight = true; + editor.level = 0; + editor.styleIndex = 0; - if (!editor.style) - editor.style = {}; - - editor.animating = true; - - showOverlayOnPrevEditor(); - - var i = allowedNumberOfVisibleEditors; - var len = scope.editors.length; - while(i= allowedNumberOfVisibleEditors) { - animeConfig.left = i * editorIndent; - } else { - animeConfig.left = (i + 1) * editorIndent; - } - - anime(animeConfig); - - i++; - } - + editor.infinityMode = true; // push the new editor to the dom scope.editors.push(editor); - - - var indentValue = scope.editors.length * editorIndent; - - // don't allow indent larger than what - // fits the max number of visible editors - if(scope.editors.length >= allowedNumberOfVisibleEditors) { - indentValue = allowedNumberOfVisibleEditors * editorIndent; - } - - // indent all large editors - if(editor.size !== "small") { - editor.style.left = indentValue + "px"; - } - - editor.style._tx = 100; - editor.style.transform = "translateX("+editor.style._tx+"%)"; - - // animation config - anime({ - targets: editor.style, - _tx: [100, 0], - easing: 'easeOutExpo', - duration: 480, - update: () => { - editor.style.transform = "translateX("+editor.style._tx+"%)"; - scope.$digest(); - }, - complete: function() { - editor.animating = false; - scope.$digest(); - } - }); - - - } - - function removeEditor(editor) { + $timeout(() => { + editor.moveRight = false; + }) editor.animating = true; + setTimeout(revealEditorContent.bind(this, editor), 400); - editor.style._tx = 0; - editor.style.transform = "translateX("+editor.style._tx+"%)"; + updateEditors(); + + } + + function removeEditor(editor) { - // animation config - anime({ - targets: editor.style, - _tx: [0, 100], - easing: 'easeInExpo', - duration: 360, - update: () => { - editor.style.transform = "translateX("+editor.style._tx+"%)"; - scope.$digest(); - }, - complete: function() { - scope.editors.splice(-1,1); - removeOverlayFromPrevEditor(); - scope.$digest(); - } - }); + editor.moveRight = true; + editor.animating = true; + setTimeout(removeEditorFromDOM.bind(this, editor), 400); - expandEditors(); - + updateEditors(-1); } - - function expandEditors() { + + function revealEditorContent(editor) { - var i = allowedNumberOfVisibleEditors + 1; - var len = scope.editors.length-1; + editor.animating = false; + + scope.$digest(); + + } + + function removeEditorFromDOM(editor) { + + // push the new editor to the dom + var index = scope.editors.indexOf(editor); + if (index !== -1) { + scope.editors.splice(index, 1); + } + + updateEditors(); + + scope.$digest(); + + } + + /** update layer positions. With ability to offset positions, needed for when an item is moving out, then we dont want it to influence positions */ + function updateEditors(offset) { + + offset = offset || 0;// fallback value. + + var len = scope.editors.length; + var calcLen = len + offset; + var ceiling = Math.min(calcLen, allowedNumberOfVisibleEditors); + var origin = Math.max(calcLen-1, 0)-ceiling; + var i = 0; while(i= ceiling; i++; } - - - } - // show backdrop on previous editor - function showOverlayOnPrevEditor() { - var numberOfEditors = scope.editors.length; - if(numberOfEditors > 0) { - scope.editors[numberOfEditors - 1].showOverlay = true; - } } - - function removeOverlayFromPrevEditor() { - var numberOfEditors = scope.editors.length; - if(numberOfEditors > 0) { - scope.editors[numberOfEditors - 1].showOverlay = false; - } - } - + evts.push(eventsService.on("appState.editors.open", function (name, args) { addEditor(args.editor); })); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js index aac11bfd22..9401cacab1 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbcolorswatches.directive.js @@ -36,7 +36,7 @@ Use this directive to generate color swatches to pick from. scope.setColor = function (color, $index, $event) { scope.selectedColor = color; if (scope.onSelect) { - scope.onSelect(color.color, $index, $event); + scope.onSelect({color: color, $index: $index, $event: $event}); $event.stopPropagation(); } }; @@ -55,7 +55,7 @@ Use this directive to generate color swatches to pick from. colors: '=?', size: '@', selectedColor: '=', - onSelect: '=', + onSelect: '&', useLabel: '=', useColorClass: '=?' }, diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less index 6dd77c56b1..f1fa8245ea 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/umb-editor.less @@ -4,6 +4,7 @@ right: 0; bottom: 0; left: 0; + overflow: hidden; } .umb-editor { @@ -17,7 +18,49 @@ } .umb-editor--animating { - will-change: transform, width, left; + //will-change: transform, width, left; +} +.umb-editor--infinityMode { + transform: none; + will-change: transform; + transition: transform 400ms ease-in-out; + &.moveRight { + transform: translateX(110%); + } +} + +.umb-editor--outOfRange { + //left:0; + transform: none; + display: none; + will-change: auto; + transition: display 0s 320ms; +} +.umb-editor--level0 { + //left:0; + transform: none; +} +.umb-editor--level1 { + //left:60px; + transform: translateX(60px); +} +.umb-editor--level2 { + //left:120px; + transform: translateX(120px); +} +.umb-editor--level3 { + //left:180px; + transform: translateX(180px); +} + +.umb-editor--n1 { + right:60px; +} +.umb-editor--n2 { + right:120px; +} +.umb-editor--n3 { + right:180px; } // hide all infinite editors by default @@ -28,20 +71,14 @@ .umb-editor--small { width: 500px; + will-change: transform; left: auto; - + .umb-editor-container { max-width: 500px; } } -@keyframes umb-editor__overlay_fade_opacity { - from { - opacity:0; - } - to { - opacity:1; - } -} + .umb-editor__overlay { position: absolute; top: 0; @@ -50,6 +87,14 @@ left: 0; background: rgba(0,0,0,0.4); z-index: @zIndexEditor; - - animation:umb-editor__overlay_fade_opacity 600ms; + visibility: hidden; + opacity: 0; + transition: opacity 320ms 20ms, visibility 0s 400ms; +} + +#contentcolumn > .umb-editor__overlay, +.--notInFront .umb-editor__overlay { + visibility: visible; + opacity: 1; + transition: opacity 320ms 20ms, visibility 0s; } diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js index 16d6cf23fc..471d23ae84 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.controller.js @@ -49,7 +49,7 @@ function IconPickerController($scope, iconHelper, localizationService) { }); // set a default color if nothing is passed in - vm.color = $scope.model.color ? $scope.model.color : vm.colors[0].value; + vm.color = $scope.model.color ? findColor($scope.model.color) : vm.colors[0]; // if an icon is passed in - preselect it vm.icon = $scope.model.icon ? $scope.model.icon : undefined; @@ -70,8 +70,13 @@ function IconPickerController($scope, iconHelper, localizationService) { submit(); } + function findColor(value) { + return _.findWhere(vm.colors, {value: value}); + } + function selectColor(color, $index, $event) { - $scope.model.color = color; + $scope.model.color = color.value; + vm.color = color; } function close() { diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html index 55c4317279..3caa6ae03d 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/iconpicker/iconpicker.html @@ -37,16 +37,16 @@ colors="vm.colors" selected-color="vm.color" size="s" - on-select="vm.selectColor"> + on-select="vm.selectColor(color)">
-
    +
    • - +
      • diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html index 275c814761..829582329f 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html @@ -1,7 +1,8 @@
      -