diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index 327e4c9dd1b..3b66b9115e6 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -4456,6 +4456,7 @@ registry.sizing = SnippetOptionWidget.extend({ const cursor = $handle.css('cursor') + '-important'; const $body = $(this.ownerDocument.body); $body.addClass(cursor); + self.$overlay.removeClass('o_handlers_idle'); const bodyMouseMove = function (ev) { ev.preventDefault(); @@ -4503,6 +4504,7 @@ registry.sizing = SnippetOptionWidget.extend({ $body.off('mousemove', bodyMouseMove); $body.off('mouseup', bodyMouseUp); $body.removeClass(cursor); + self.$overlay.addClass('o_handlers_idle'); $handle.removeClass('o_active'); // If we are in grid mode, removes the background grid. @@ -4520,12 +4522,6 @@ registry.sizing = SnippetOptionWidget.extend({ self.$target[0].classList.add(gColClass.substring(2)); } - // Highlights the previews for a while - const $handlers = self.$overlay.find('.o_handle'); - $handlers.addClass('o_active').delay(300).queue(function () { - $handlers.removeClass('o_active').dequeue(); - }); - if (directions.every(dir => dir.begin === dir.current)) { return; } @@ -4671,16 +4667,8 @@ registry.sizing = SnippetOptionWidget.extend({ $handle.toggleClass('o_handle_end', current === classes.length - 1); } - // Adapt the handles to fit the left, top and bottom sizes - var ml = this.$target.css('margin-left'); - this.$overlay.find('.o_handle.w').css({ - width: ml, - left: '-' + ml, - }); - this.$overlay.find('.o_handle.e').css({ - width: 0, - }); - this.$overlay.find(".o_handle.n, .o_handle.s").toArray().forEach((handle) => { + // Adapt the handles to fit top and bottom sizes + this.$overlay.find('.o_handle:not(.o_grid_handle)').filter(".n, .s").toArray().forEach(handle => { var $handle = $(handle); var direction = $handle.hasClass('n') ? 'top' : 'bottom'; $handle.height(self.$target.css('padding-' + direction)); diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 60bc3653789..04a96b5fcc1 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -36,11 +36,12 @@ $o-we-ace-color: #2F3129 !default; // Needed to be changed to be high enough to not overflow when a user // has a page with a lot of content (10000px was proven to be too small) $o-we-handles-offset-to-hide: 100000px !default; -$o-we-handles-btn-size: 20px !default; +$o-we-handles-btn-size: 14px !default; $o-we-handles-accent-color: $o-we-accent !default; $o-we-handles-accent-color-preview: $o-enterprise-color !default; -$o-we-handle-edge-size: 8px !default; +$o-we-handle-edge-size: $o-we-handles-btn-size !default; $o-we-handle-border-width: 2px !default; +$o-we-handle-inside-line-width: 3px !default; $o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable) $o-we-dropzone-border-width: 2px !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index fdbb35eab19..a8ce082015f 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -2118,218 +2118,156 @@ we-select.o_we_border_preview_aligned_select { border-color: inherit; pointer-events: auto; - &:hover > .o_handle { - background-color: rgba($o-we-handles-accent-color, 0.05); - } > .o_handle { - position: relative; - border: 0 solid transparent; - border-color: inherit; - transition: background 300ms ease 0s; + position: absolute; - &.w { - @include o-position-absolute($o-we-handles-offset-to-hide, auto, -$o-we-handles-offset-to-hide, 0); + &.o_side_y { + height: $o-we-handle-edge-size; + } + &.o_side_x { width: $o-we-handle-edge-size; - border-width: $o-we-handle-border-width; - border-right-width: 0; - cursor: e-resize; - - &.o_grid_handle { - cursor: ew-resize; - } - - &:after { - @include o-position-absolute($top: 50%, $left: 40%); - margin-top: -$o-we-handles-btn-size/2; - } - - &.o_grid_handle:after { - display: none; - } + } + &.w { + inset: $o-we-handles-offset-to-hide auto $o-we-handles-offset-to-hide * -1 0; + transform: translateX(-50%); + cursor: ew-resize; } &.e { - @include o-position-absolute($o-we-handles-offset-to-hide, 0, -$o-we-handles-offset-to-hide, auto); - width: $o-we-handle-edge-size; - border-right-width: $o-we-handle-border-width; - cursor: w-resize; - - &.o_grid_handle { - cursor: ew-resize; - } - - &:after { - @include o-position-absolute($top: 50%, $right: 40%); - margin-top: -$o-we-handles-btn-size/2; - } - - &.o_grid_handle:after{ - display: none; - } + inset: $o-we-handles-offset-to-hide 0 $o-we-handles-offset-to-hide * -1 auto; + transform: translateX(50%); + cursor: ew-resize; } &.n { - @include o-position-absolute($o-we-handles-offset-to-hide, 0, auto, 0); - height: $o-we-handle-edge-size; - border-top-width: $o-we-handle-border-width; + inset: $o-we-handles-offset-to-hide 0 auto 0; cursor: ns-resize; - &:after { - @include o-position-absolute($left: 50%, $top: 40%); - margin-left: -$o-we-handles-btn-size/2; - } - - &.o_grid_handle:after{ - display: none; + &.o_grid_handle { + transform: translateY(-50%); } } &.s { - @include o-position-absolute(auto, 0, -$o-we-handles-offset-to-hide, 0); - height: $o-we-handle-edge-size; - border-bottom-width: $o-we-handle-border-width; + inset: auto 0 $o-we-handles-offset-to-hide * -1 0; cursor: ns-resize; - &:after { - @include o-position-absolute($left: 50%, $bottom: 40%); - margin-left: -$o-we-handles-btn-size/2; - } - - &.o_grid_handle:after { - display: none; + &.o_grid_handle { + transform: translateY(50%); } } &.ne { - @include o-position-absolute($o-we-handles-offset-to-hide + $o-we-handle-border-width, $o-we-handle-border-width, auto, auto); - height: $o-we-handle-edge-size; + inset: $o-we-handles-offset-to-hide 0 auto auto; + transform: translate(50%, -50%); cursor: nesw-resize; } &.se { - @include o-position-absolute(auto, $o-we-handle-border-width, -$o-we-handles-offset-to-hide - $o-we-handle-border-width, auto); - height: $o-we-handle-edge-size; + inset: auto 0 $o-we-handles-offset-to-hide * -1 auto; + transform: translate(50%, 50%); cursor: nwse-resize; - - &:after { - @include o-position-absolute($top: 50%, $right: 40%); - } } &.sw { - @include o-position-absolute(auto, auto, -$o-we-handles-offset-to-hide - $o-we-handle-border-width/2, $o-we-handle-border-width); - height: $o-we-handle-edge-size; + inset: auto auto $o-we-handles-offset-to-hide * -1 0; + transform: translate(-50%, 50%); cursor: nesw-resize; - - &:after { - @include o-position-absolute($left: 40%, $bottom: 40%); - } } &.nw { - @include o-position-absolute($o-we-handles-offset-to-hide - $o-we-handle-border-width, auto, auto, $o-we-handle-border-width + 1); - height: $o-we-handle-edge-size; + inset: $o-we-handles-offset-to-hide auto auto 0; + transform: translate(-50%, -50%); cursor: nwse-resize; - - &:after { - @include o-position-absolute($left: 50%, $bottom: 40%); - } } - - &.ne, - &.sw { - content: "\f065"; - } - - &.nw, - &.se { - content: "\f065"; - transform: rotate(90deg); - } - - &::after { - z-index: 1; + .o_handle_indicator { + position: absolute; + inset: $o-we-handles-btn-size * -0.5; display: block; width: $o-we-handles-btn-size; height: $o-we-handles-btn-size; - border: solid 1px darken($o-we-handles-accent-color, 20%); - line-height: $o-we-handles-btn-size - 2; - font-size: 14px; - font-family: FontAwesome; - background-color: darken($o-we-handles-accent-color, 10%); - color: white; + margin: auto; + border: solid $o-we-handle-border-width $o-we-handles-accent-color; + border-radius: $o-we-handles-btn-size; + background: $o-we-fg-lighter; + outline: $o-we-handle-inside-line-width solid $o-we-fg-lighter; + outline-offset: -($o-we-handles-btn-size * 0.5); + transition: $transition-base; + + &::before { + content: ''; + position: absolute; + inset: -$o-we-handles-btn-size; + display: block; + border-radius: inherit; + } } - &.o_handle_start:after { - background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6); - } - - &:hover, - &.o_active { - background-color: rgba($o-we-handles-accent-color, 0.2); + &.o_column_handle.o_side_y { + background-color: rgba($o-we-handles-accent-color, .1); &::after { - border-color: darken($o-we-handles-accent-color, 10%); - background-color: darken($o-we-handles-accent-color, 20%); + content: ''; + position: absolute; + height: $o-we-handles-btn-size; + } + &.n { + border-bottom: dashed $o-we-handle-border-width * 0.5 rgba($o-we-handles-accent-color, 0.5); + + &::after { + inset: 0 0 auto 0; + transform: translateY(-50%); + } + } + &.s { + border-top: dashed $o-we-handle-border-width * 0.5 rgba($o-we-handles-accent-color, 0.5); + + &::after { + inset: auto 0 0 0; + transform: translateY(50%); + } } } - - &.w:after, - &.e:after { - content: "\f07e"; - } - - &.s:after, - &.n:after { - content: "\f07d"; - } - - &.ne:after, - &.sw:after { - content: "\f065"; - } - - &.nw:after, - &.se:after { - content: "\f065"; - transform: rotate(180deg); - } - - &.o_handle_start { - - &.w:after, - &.e:after { - content: '\f061'; + &.o_side { + &::before { + content: ''; + position: absolute; + inset: 0; + background: $o-we-handles-accent-color; } + &.o_side_x { - &.n:after, - &.s:after { - content: '\f063'; + &::before { + width: $o-we-handle-border-width; + margin: 0 auto; + } } - } + &.o_side_y { - &.o_handle_end { - - &.w:after, - &.e:after { - content: '\f060'; + &::before { + height: $o-we-handle-border-width; + margin: auto 0; + } } + &.o_column_handle { - &.n:after, - &.s:after { - content: '\f062'; + &::before { + inset: 0 $o-we-handle-border-width * -0.5; + } + + &.n::before { + margin: 0 auto auto; + transform: translateY(-50%); + } + + &.s::before { + margin: auto auto 0; + transform: translateY(50%); + } } } &.readonly { - cursor: auto !important; - - &:after { - display: none !important; - } - - &:hover { - opacity: 0.5; - } + display: none; } } > .o_overlay_options_wrap { @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%); - transform: translate(-50%, -110%); + transform: translate(-50%, -150%); &.o_we_hidden_overlay_options { display: none; @@ -2427,6 +2365,53 @@ we-select.o_we_border_preview_aligned_select { max-height: unset !important; } } + + // HANDLES - ACTIVE AND HOVER STATES + // By using `o_handlers_idle` class, we can avoid hovering another + // handle when we're already dragging another one. + &.o_handlers_idle .o_handle:hover, .o_handle:active { + + .o_handle_indicator { + outline-color: $o-we-handles-accent-color; + } + } + + &.o_handlers_idle .o_corner_handle:hover, .o_corner_handle:active { + + .o_handle_indicator { + transform: scale(1.25); + } + } + + &.o_handlers_idle .o_column_handle.o_side_y:hover, .o_column_handle.o_side_y:active { + background: repeating-linear-gradient( + 45deg, + rgba($o-we-handles-accent-color, .1), + rgba($o-we-handles-accent-color, .1) 5px, + darken(rgba($o-we-handles-accent-color, .25), 5%) 5px, + darken(rgba($o-we-handles-accent-color, .25), 5%) 10px + ); + } + + &.o_handlers_idle .o_side_x:hover, .o_side_x:active { + + &::before { + width: $o-we-handle-border-width * 2; + } + .o_handle_indicator { + height: $o-we-handles-btn-size * 2; + } + } + + &.o_handlers_idle .o_side_y:hover, .o_side_y:active { + + &::before { + height: $o-we-handle-border-width * 2; + } + .o_handle_indicator { + width: $o-we-handles-btn-size * 2; + } + } } .o_edit_menu_popover { @@ -2437,24 +2422,10 @@ we-select.o_we_border_preview_aligned_select { display: none; } -.s-resize-important * { - cursor: s-resize !important; -} - -.n-resize-important * { - cursor: n-resize !important; -} - -.e-resize-important * { - cursor: e-resize !important; -} - -.w-resize-important * { - cursor: w-resize !important; -} - -.move-important * { - cursor: move !important; +@each $cursor in (nesw-resize, nwse-resize, ns-resize, ew-resize, move) { + .#{$cursor}-important * { + cursor: $cursor !important; + } } .dropdown-menu label .o_switch { @@ -2624,7 +2595,6 @@ we-button-group.o_grid we-selection-items { stroke: $o-we-bg-darkest; stroke-opacity: .2; stroke-width: 1px; - filter: drop-shadow(-1px -1px 0px rgba(255, 255, 255, 0.6)); } } diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index 9419838b656..a48a0c23052 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -1,23 +1,23 @@ -
+
-
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+