diff options
Diffstat (limited to 'addons/web_editor')
5 files changed, 266 insertions, 418 deletions
diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js index d84a7088fd1..999131020bf 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -74,7 +74,7 @@ var SnippetEditor = Widget.extend({ }, helper: function () { var $clone = $(this).clone().css({width: '24px', height: '24px', border: 0}); - $clone.find('.oe_overlay_options >:not(:contains(.oe_snippet_move)), .oe_handle').remove(); + $clone.find('.oe_overlay_options >:not(:contains(.oe_snippet_move)), .o_handle').remove(); $clone.find(':not(.glyphicon)').css({position: 'absolute', top: 0, left: 0}); $clone.appendTo('body').removeClass('hidden'); return $clone; @@ -123,17 +123,16 @@ var SnippetEditor = Widget.extend({ * Makes the editor overlay cover the associated snippet. */ cover: function () { - var mt = parseInt(this.$target.css('margin-top') || 0); var offset = this.$target.offset(); var manipulatorOffset = this.$el.parent().offset(); - offset.top -= (manipulatorOffset.top + mt); + offset.top -= manipulatorOffset.top; offset.left -= manipulatorOffset.left; this.$el.css({ width: this.$target.outerWidth(), left: offset.left, top: offset.top, }); - this.$('.oe_handles').css('height', this.$target.outerHeight(true)); + this.$('.o_handles').css('height', this.$target.outerHeight()); this.$el.toggleClass('o_top_cover', offset.top < 15); }, /** 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 554806454e8..f6011be282d 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -355,7 +355,7 @@ var SnippetOption = Widget.extend({ */ var registry = {}; -registry.marginAndResize = SnippetOption.extend({ +registry.sizing = SnippetOption.extend({ preventChildPropagation: true, /** @@ -363,92 +363,64 @@ registry.marginAndResize = SnippetOption.extend({ */ start: function () { var self = this; - this._super(); + var def = this._super.apply(this, arguments); - var resize_values = this._getSize(); - if (resize_values.n) this.$overlay.find('.oe_handle.n').removeClass('readonly'); - if (resize_values.s) this.$overlay.find('.oe_handle.s').removeClass('readonly'); - if (resize_values.e) this.$overlay.find('.oe_handle.e').removeClass('readonly'); - if (resize_values.w) this.$overlay.find('.oe_handle.w').removeClass('readonly'); - if (resize_values.size) this.$overlay.find('.oe_handle.size').removeClass('readonly'); - - var $auto_size = this.$overlay.find('.oe_handle.size .auto_size'); - var $fixed_size = this.$overlay.find('.oe_handle.size .size'); - - var auto_sized = isNaN(parseInt(self.$target.prop('style').height)); - $fixed_size.toggleClass('active', !auto_sized); - $auto_size.toggleClass('active', auto_sized); + this.$handles = this.$overlay.find('.o_handle'); + var resizeValues = this._getSize(); + _.each(resizeValues, function (value, key) { + self.$handles.filter('.' + key).toggleClass('readonly', !value); + }); - $fixed_size.add(this.$overlay.find('.oe_handle:not(.size)')).on('mousedown', function (event) { - event.preventDefault(); + this.$handles.on('mousedown', function (ev) { + ev.preventDefault(); - var $handle = $(this); + var $handle = $(ev.currentTarget); - var resize_values = self._getSize(); var compass = false; var XY = false; if ($handle.hasClass('n')) { compass = 'n'; XY = 'Y'; - } - else if ($handle.hasClass('s')) { + } else if ($handle.hasClass('s')) { compass = 's'; XY = 'Y'; - } - else if ($handle.hasClass('e')) { + } else if ($handle.hasClass('e')) { compass = 'e'; XY = 'X'; - } - else if ($handle.hasClass('w')) { + } else if ($handle.hasClass('w')) { compass = 'w'; XY = 'X'; } - else if ($handle.hasClass('size')) { - compass = 'size'; - XY = 'Y'; - } - - var resize = resize_values[compass]; - if (!resize) return; - - if (compass === 'size') { - var offset = self.$target.offset().top; - } else { - var xy = event['page'+XY]; - var current = resize[2] || 0; - var margin_dir = {s:'bottom', n: 'top', w: 'left', e: 'right'}[compass]; - var real_margin = parseInt(self.$target.css('margin-'+margin_dir)); - _.each(resize[0], function (val, key) { - if (self.$target.hasClass(val)) { - current = key; - } else if (resize[1][key] === real_margin) { - current = key; - } - }); - var begin = current; - var beginClass = self.$target.attr('class'); - var regClass = new RegExp('\\s*' + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g'); + var resize = resizeValues[compass]; + if (!resize) { + return; } - var cursor = $handle.css('cursor')+'-important'; + var current = 0; + var cssProperty = resize[2]; + var cssPropertyValue = parseInt(self.$target.css(cssProperty)); + _.each(resize[0], function (val, key) { + if (self.$target.hasClass(val)) { + current = key; + } else if (resize[1][key] === cssPropertyValue) { + current = key; + } + }); + var begin = current; + var beginClass = self.$target.attr('class'); + var regClass = new RegExp('\\s*' + resize[0][begin].replace(/[-]*[0-9]+/, '[-]*[0-9]+'), 'g'); + + var cursor = $handle.css('cursor') + '-important'; var $body = $(document.body); $body.addClass(cursor); - var body_mousemove = function (event) { - event.preventDefault(); - if (compass === 'size') { - var dy = event.pageY-offset; - dy = dy - dy%resize; - if (dy <= 0) dy = resize; - self.$target.css('height', dy+'px'); - self.$target.css('overflow', 'hidden'); - self._onResize(compass, null, dy); - self.trigger_up('cover_update'); - return; - } - var dd = event['page'+XY] - xy + resize[1][begin]; - var next = current+1 === resize[1].length ? current : (current+1); + var xy = ev['page' + XY]; + var body_mousemove = function (ev) { + ev.preventDefault(); + + var dd = ev['page' + XY] - xy + resize[1][begin]; + var next = current + (current+1 === resize[1].length ? 0 : 1); var prev = current ? (current-1) : 0; var change = false; @@ -468,181 +440,127 @@ registry.marginAndResize = SnippetOption.extend({ if (change) { self._onResize(compass, beginClass, current); self.trigger_up('cover_update'); - self._adaptMarginsPreviews(); - $handle.addClass('oe_handle_change'); + $handle.addClass('o_active'); } }; - var body_mouseup = function () { - $body.unbind('mousemove', body_mousemove); - $body.unbind('mouseup', body_mouseup); + $body.off('mousemove', body_mousemove); + $body.off('mouseup', body_mouseup); $body.removeClass(cursor); - setTimeout(function () { - if (begin !== current) { - self.trigger_up('request_history_undo_record', { - $target: self.$target, - event: 'resize_' + XY, - }); - } - },0); - $handle.removeClass('oe_handle_change'); + $handle.removeClass('o_active'); - if (compass === 'size') { - $fixed_size.addClass('active'); - $auto_size.removeClass('active'); - } else { - self._highlightMarginsPreviews(); + // Highlights the previews for a while + var $handlers = self.$overlay.find('.o_handle'); + $handlers.addClass('o_active').delay(300).queue(function () { + $handlers.removeClass('o_active').dequeue(); + }); + + if (begin === current) { + return; } + setTimeout(function () { + self.trigger_up('request_history_undo_record', { + $target: self.$target, + event: 'resize_' + XY, + }); + }, 0); }; - $body.mousemove(body_mousemove); - $body.mouseup(body_mouseup); + $body.on('mousemove', body_mousemove); + $body.on('mouseup', body_mouseup); }); - $auto_size.on('click', function () { - self.$target.css('height', ''); - self.$target.css('overflow', ''); - self.trigger_up('request_history_undo_record', { - $target: self.$target, - event: 'resize_Y', - }); - self.trigger_up('cover_update'); - - $fixed_size.removeClass('active'); - $auto_size.addClass('active'); - return false; - }); + return def; }, /** * @override */ - onFocus : function () { - this._updateCursor(); - this._adaptMarginsPreviews(); + onFocus: function () { + this._onResize(); }, //-------------------------------------------------------------------------- - // Private + // Public //-------------------------------------------------------------------------- /** - * Adapts the margin handles to fit the left, top and bottom margins. - * - * @private + * @override */ - _adaptMarginsPreviews: function () { - var self = this; - var ml = this.$target.css('margin-left'); - _.each(this.$overlay.find(".oe_handle.n, .oe_handle.s"), function (handle) { - var $handle = $(handle); - var direction = $handle.hasClass('n') ? 'top': 'bottom'; - $handle.height(self.$target.css('margin-' + direction)); - }); - this.$overlay.find(".oe_handle.w").css({ - width: ml, - left: '-' + ml, - }); + setTarget: function () { + this._super.apply(this, arguments); + this._onResize(); }, + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + /** - * Returns an object whose keys indicate the different editable dimensions. + * Returns an object mapping one or several cardinal direction (n, e, s, w) + * to an Array containing: + * 1) A list of classes to toggle when using this cardinal direction + * 2) A list of values these classes are supposed to set on a given CSS prop + * 3) The mentioned CSS prop * + * Note: this object must also be saved in this.grid before being returned. + * + * @abstract * @private * @returns {Object} */ - _getSize: function () { - this.grid = {}; - return this.grid; - }, - /** - * Highlights the margins previews for a while. - * - * @private - */ - _highlightMarginsPreviews: function () { - var $handlers = this.$overlay.find(".oe_handle.n, .oe_handle.s, .oe_handle.w"); - $handlers.addClass('oe_handle_active').delay(300).queue(function () { - $handlers.removeClass('oe_handle_active').dequeue(); - }); - }, + _getSize: function () {}, /** * Called when the snippet is being resized and its classes changes. * * @private - * @param {string} compass - resize direction ('n', 's', 'e' or 'w') - * @param {?} beginClass - attributes class at the beginning - * @param {?} current - curent increment in this.grid + * @param {string} [compass] - resize direction ('n', 's', 'e' or 'w') + * @param {string} [beginClass] - attributes class at the beginning + * @param {integer} [current] - current increment in this.grid */ _onResize: function (compass, beginClass, current) { - this._updateCursor(); - }, - /** - * Adapts the resize handles according to the classes and dimensions. - * - * @private - */ - _updateCursor : function () { - var _class = this.$target.attr('class') || ''; - var $handle_s = this.$overlay.find('.oe_handle.s'); - var $handle_n = this.$overlay.find('.oe_handle.n'); - var $handle_w = this.$overlay.find('.oe_handle.w'); - - var col = _class.match(/col-md-([0-9-]+)/i); - col = col ? +col[1] : 0; - - var offset = _class.match(/col-md-offset-([0-9-]+)/i); - offset = offset ? +offset[1] : 0; - - var overlay_class = this.$overlay.attr('class').replace(/(^|\s+)block-[^\s]*/gi, ''); - if (col+offset >= 12) overlay_class+= ' block-e-right'; - if (col === 1) overlay_class+= ' block-w-right block-e-left'; - if (offset === 0) overlay_class+= ' block-w-left'; - $handle_w.toggleClass('oe_handle_centered', offset > 0).toggleClass('o_handle_edited', offset >= 1 ); - - var mb = _class.match(/mb([0-9-]+)/i); - mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom')); - if (mb >= 128) overlay_class+= ' block-s-bottom'; - else if (!mb) overlay_class+= ' block-s-top'; - $handle_s.toggleClass('oe_handle_centered', mb >= 32).toggleClass('o_handle_edited', mb > 0 ); - - var mt = _class.match(/mt([0-9-]+)/i); - mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top')); - if (mt >= 128) overlay_class+= ' block-n-top'; - else if (!mt) overlay_class+= ' block-n-bottom'; - $handle_n.toggleClass('oe_handle_centered', mt >= 32).toggleClass('o_handle_edited', mt > 0 ); - - this.$overlay.attr('class', overlay_class); - }, -}); + var self = this; -/** - * Handles the edition of margin-top and margin-bottom. - */ -registry['margin-y'] = registry.marginAndResize.extend({ + // Adapt the resize handles according to the classes and dimensions + var resizeValues = this._getSize(); + var $handles = this.$overlay.find('.o_handle'); + _.each(resizeValues, function (resizeValue, direction) { + var classes = resizeValue[0]; + var values = resizeValue[1]; + var cssProperty = resizeValue[2]; + + var $handle = $handles.filter('.' + direction); + + var current = 0; + var cssPropertyValue = parseInt(self.$target.css(cssProperty)); + _.each(classes, function (className, key) { + if (self.$target.hasClass(className)) { + current = key; + } else if (values[key] === cssPropertyValue) { + current = key; + } + }); - //-------------------------------------------------------------------------- - // Private - //-------------------------------------------------------------------------- + $handle.toggleClass('o_handle_start', current === 0); + $handle.toggleClass('o_handle_end', current === classes.length - 1); + }); - /** - * @override - */ - _getSize: function () { - this.grid = this._super(); - var grid = [0,4,8,16,32,48,64,92,128]; - this.grid = { - // list of class (Array), grid (Array), default value (INT) - n: [_.map(grid, function (v) {return 'mt'+v;}), grid], - s: [_.map(grid, function (v) {return 'mb'+v;}), grid], - // INT if the user can resize the snippet (resizing per INT px) - size: null - }; - return this.grid; + // 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, + }); + _.each(this.$overlay.find(".o_handle.n, .o_handle.s"), function (handle) { + var $handle = $(handle); + var direction = $handle.hasClass('n') ? 'top': 'bottom'; + $handle.height(self.$target.css('padding-' + direction)); + }); }, }); /** - * Handles the edition of snippet's height. + * Handles the edition of padding-top and padding-bottom. */ -registry.resize = registry.marginAndResize.extend({ +registry.sizing_y = registry.sizing.extend({ //-------------------------------------------------------------------------- // Private @@ -652,8 +570,26 @@ registry.resize = registry.marginAndResize.extend({ * @override */ _getSize: function () { - this.grid = this._super(); - this.grid.size = 8; + var nClass = 'pt'; + var nProp = 'padding-top'; + var sClass = 'pb'; + var sProp = 'padding-bottom'; + if (this.$target.is('hr')) { + nClass = 'mt'; + nProp = 'margin-top'; + sClass = 'mb'; + sProp = 'margin-bottom'; + } + + var grid = []; + for (var i = 0 ; i <= 256/8 ; i++) { + grid.push(i * 8); + } + grid.splice(1, 0, 4); + this.grid = { + n: [_.map(grid, function (v) { return nClass + v; }), grid, nProp], + s: [_.map(grid, function (v) { return sClass + v; }), grid, sProp], + }; return this.grid; }, }); diff --git a/addons/web_editor/static/src/less/web_editor.common.less b/addons/web_editor/static/src/less/web_editor.common.less index cfa9f683198..99f6a474397 100644 --- a/addons/web_editor/static/src/less/web_editor.common.less +++ b/addons/web_editor/static/src/less/web_editor.common.less @@ -158,57 +158,75 @@ ul.oe_menu_editor { } } -// Generate all margins for all sizes -.o-margins-all(@factor: 1) { - // Unfortunately, the margins sizes are not - // mathematically related by a single function - .o-margins(128, @factor); - .o-margins(96, @factor); - .o-margins(92, @factor); - .o-margins(64, @factor); - .o-margins(48, @factor); - .o-margins(32, @factor); - .o-margins(24, @factor); - .o-margins(16, @factor); - .o-margins(8, @factor); - .o-margins(4, @factor); - .o-margins(0, @factor); +// Generate all spacings for all sizes +.o-spacing-all(@factor: 1) { + // Generate vertical margin/padding classes used by the editor + .o-generate-spacings(256/8); + .o-generate-spacings(@n, @i: 0) when (@i =< @n) { + .o-vspacing(@i * 8); + .o-generate-spacings(@n, @i + 1); + } + .o-vspacing(4, @factor); + + // 92px vertical margin is kept for compatibility + .o-vmargins(92, @factor); + + // Some horizontal margin classes defined for convenience + // (and compatibility) + .o-hmargins(0, @factor); + .o-hmargins(4, @factor); + .o-hmargins(8, @factor); + .o-hmargins(16, @factor); + .o-hmargins(32, @factor); + .o-hmargins(64, @factor); } -// Generate all margins for one size, scalled by a -// given factor (0 <= factor <= 1) -.o-margins(@name, @factor: 1) { - .o-margins-define(@name, @factor * @name); +// Generate all spacings for one size, scalled by a given factor +// (0 <= factor <= 1) +.o-vspacing(@name, @factor: 1) { + .o-vmargins(@name, @factor); + .o-vpaddings(@name, @factor); +} +.o-vmargins(@name, @factor: 1) { + .o-vmargins-define(@name, @factor * @name); +} +.o-vpaddings(@name, @factor: 1) { + .o-vpaddings-define(@name, @factor * @name); +} +.o-hspacing(@name, @factor: 1) { + .o-hmargins(@name, @factor); + .o-hpaddings(@name, @factor); +} +.o-hmargins(@name, @factor: 1) { + .o-hmargins-define(@name, @factor * @name); +} +.o-hpaddings(@name, @factor: 1) { + .o-hpaddings-define(@name, @factor * @name); } -// Generate all margins for one size, given -// the name of the margin and intended size -.o-margins-define(@name, @size: @name) { - .mt@{name} {margin-top: ~"@{size}px"!important;} - .mb@{name} {margin-bottom: ~"@{size}px"!important;} - .ml@{name} {margin-left: ~"@{size}px"!important;} - .mr@{name} {margin-right: ~"@{size}px"!important;} +// Generate all spacings for one size, given the name of the spacing and +// intended size +.o-vmargins-define(@name, @size: @name) { + .mt@{name} { margin-top: unit(@size, px)!important; } + .mb@{name} { margin-bottom: unit(@size, px)!important; } +} +.o-vpaddings-define(@name, @size: @name) { + .pt@{name} { padding-top: unit(@size, px)!important; } + .pb@{name} { padding-bottom: unit(@size, px)!important; } +} +.o-hmargins-define(@name, @size: @name) { + .ml@{name} { margin-left: unit(@size, px)!important; } + .mr@{name} { margin-right: unit(@size, px)!important; } +} +.o-hpaddings-define(@name, @size: @name) { + .pl@{name} { padding-left: unit(@size, px)!important; } + .pr@{name} { padding-right: unit(@size, px)!important; } } // Generate all margins -.o-margins-all(); - -// Possibility to change the margins ratio for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins-all(0.75); -// } -// Possibility to only redefine single margins for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins(64, 0.50); -// .o-margins(48, 0.50); -// } -// Possibility to directly redefine the size of single margins instead of refering to a factor for small screen sizes, e.g.: -// @media (max-width: 768px) { -// .o-margins-define(128, 48); -// .o-margins-define(96, 48); -// .o-margins-define(64, 48); -// } +.o-spacing-all(); +// Underline a.o_underline { text-decoration: underline; &:hover { diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less index 1d59c4e2033..e7ba19f332d 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -539,62 +539,43 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } // HANDLES - > .oe_handles { + > .o_handles { @o-handles-offset-to-hide: 10000px; @o-handless-accent-color: #00e2ff; .o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0); - &:hover > .oe_handle { + &:hover > .o_handle { background-color: fade(@o-handless-accent-color, 5%); } - > .oe_handle { + > .o_handle { @o-handle-btn-size: 18px; - opacity: 0.5; - .o-transition(opacity, 400ms); - border: 0 solid @o-handless-accent-color; - - // MARGINS PREVIEW - &.n, &.s, &.w { - position: relative; - .o-transition(background, 0.3s); - &.oe_handle_change, &.oe_handle_active, &:hover { - background-color: fade(@o-handless-accent-color, 20%); + position: relative; + border: 0 solid @o-handless-accent-color; + .o-transition(background, 300ms); + + &:hover, &.o_active { + background-color: fade(@o-handless-accent-color, 20%); + + &:before { + content: ''; + .o-position-absolute(0, @left:50%); + width: 1px; + height: 100%; + margin-left: -1px; + background-color: fade(@o-handless-accent-color, 50%); } - &.o_handle_edited { - opacity: 0.9; - - &:after { - color: white; - border-color: darken(@o-handless-accent-color, 10%); - background-color: darken(@o-handless-accent-color, 20%); - } + &.w:before { + .o-position-absolute(50%, @left: 0); + width: 100%; + height: 1px; } - &.oe_handle_change, &:hover { - opacity: 1; - - &:before { - .o-position-absolute(0, @left:50%); - width: 1px; - height: 100%; - margin-left: -1px; - background-color: fade(@o-handless-accent-color, 50%); - content:''; - } - - &.w:before { - .o-position-absolute(50%,@left: 0); - width: 100%; - height: 1px; - } - - &:after { - border-color: darken(@o-handless-accent-color, 10%); - background-color: darken(@o-handless-accent-color, 20%); - } + &:after { + border-color: darken(@o-handless-accent-color, 10%); + background-color: darken(@o-handless-accent-color, 20%); } } @@ -602,17 +583,13 @@ html[lang] > body.editor_enable [data-oe-translation-state] { display: block; width: @o-handle-btn-size; height: @o-handle-btn-size; - border: solid 1px rgba(0, 0, 0, 0.2); + border: solid 1px darken(@o-handless-accent-color, 10%); line-height: @o-handle-btn-size - 2; font-size: 14px; font-family: FontAwesome; - background-color: @o-we-color-light; - color: @o-we-color-text-light; - } - &:hover { - opacity: 0.9; + background-color: darken(@o-handless-accent-color, 20%); + color: white; } - &.w:after, &.e:after { content: "\f07e"; } @@ -620,107 +597,72 @@ html[lang] > body.editor_enable [data-oe-translation-state] { content: "\f07d"; } + &.o_handle_start { + &.w:after, &.e:after { + content: '\f061'; + } + &.n:after, &.s:after { + content: '\f063'; + } + } + &.o_handle_end { + &.w:after, &.e:after { + content: '\f060'; + } + &.n:after, &.s:after { + content: '\f062'; + } + } + &.w { + .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0); + width: @odoo-handle-edge-size; border-width: @odoo-handle-border-width; border-right-width: 0; cursor: e-resize; - width: @odoo-handle-edge-size; - .o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0); &:after { - .o-position-absolute(@top: 50%, @left: 50%); + .o-position-absolute(@top: 50%, @left: 40%); margin-top: -@o-handle-btn-size/2; } - &.oe_handle_centered:after { - margin-left: -@o-handle-btn-size/2; - } } &.e { + .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto); + width: @odoo-handle-edge-size; border-right-width: @odoo-handle-border-width; cursor: w-resize; - width: @odoo-handle-edge-size; - .o-position-absolute(@o-handles-offset-to-hide, 0, -@o-handles-offset-to-hide, auto); &:after { - .o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width); + .o-position-absolute(@top: 50%, @right: 40%); margin-top: -@o-handle-btn-size/2; } } &.n { - border-top-width: @odoo-handle-border-width; .o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0); + border-top-width: @odoo-handle-border-width; + cursor: ns-resize; &:after { - .o-position-absolute(@left: 50%, @top: 50%); + .o-position-absolute(@left: 50%, @top: 40%); margin-left: -@o-handle-btn-size/2; } } &.s { - border-bottom-width: @odoo-handle-border-width; .o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0); + border-bottom-width: @odoo-handle-border-width; + cursor: ns-resize; &:after { - .o-position-absolute(@left: 50%, @bottom: 50%); + .o-position-absolute(@left: 50%, @bottom: 40%); margin-left: -@o-handle-btn-size/2; } } - &.n, &.s { - cursor: ns-resize; - - &.oe_handle_centered:after { - .o-position-absolute(@left: 50%, @top: 50%); - margin-top: -@o-handle-btn-size/2; - } - } - - // SIZE HANDLERS - &.size { - @o-handle-size-height: 15px; - - height: 0; - background: transparent; - .o-position-absolute(@bottom: -@o-handles-offset-to-hide + @o-handle-size-height, @left: 50%); - width: 250px; - margin-left: -125px; - - > .oe_handle_button { - position: relative; - display: block; - width: 100px; - height: @o-handle-size-height; - padding-top: 2px; - font-weight: 600; - font-size: 9px; - text-transform: uppercase; - background-color: @o-we-color-light; - color: @o-we-color-text-light; - &:hover { - background-color: @o-we-color-dark; - color: white; - } - &.auto_size { - cursor: pointer; - float: left; - } - &.size { - cursor: row-resize; - float: right; - } - &.active:before { - content: "\f00c"; - font-family: "FontAwesome"; - color: @odoo-brand-optional; - .o-position-absolute(@top: 0, @left: 3px); - font-size: 11px; - } - } - } &.readonly { - cursor: auto !important; + cursor: auto!important; - &:after, &.size { - display: none !important; + &:after { + display: none!important; } &:hover { opacity: 0.5; @@ -728,38 +670,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } } } - - // HANDLERS ICONS - &.block-w-left .w:after { - content: "" !important; - } - &.block-w-right .w:after { - content: "" !important; - } - &.block-w-left.block-w-right .w:after { - display: none !important; - } - &.block-e-left .e:after { - content: "" !important; - } - &.block-e-right .e:after { - content: "" !important; - } - &.block-e-left.block-e-right .e:after { - display: none !important; - } - &.block-s-bottom .s, &.block-n-top .n { - cursor: n-resize!important; - &:after { - content: "\f062" !important; - } - } - &.block-s-top .s, &.block-n-bottom .n { - cursor: s-resize!important; - &:after { - content: "\f063" !important; - } - } } } @@ -779,17 +689,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] { cursor: move !important; } -.block-s-top .s, -.block-s-bottom .s, -.block-n-top .n, -.block-n-bottom .n, -.block-w-left .w, -.block-e-right .e { - &:before { - font-size: 10px; - } -} - // NOTE EDITOR .note-popover .popover { height: @odoo-navbar-height; diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index ccf56129ad1..594a7615951 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -2,15 +2,11 @@ <templates id="template" xml:space="preserve"> <t t-name="web_editor.snippet_overlay"> <div class="oe_overlay"> - <div class="oe_handles"> - <div class="oe_handle n readonly"/> - <div class="oe_handle e readonly"/> - <div class="oe_handle w readonly"/> - <div class="oe_handle s readonly"/> - <div class="oe_handle size readonly"> - <div class="oe_handle_button auto_size">Auto size</div> - <div class="oe_handle_button size" title="Resize to force the height of this block">Fixed size</div> - </div> + <div class="o_handles"> + <div class="o_handle n readonly"/> + <div class="o_handle e readonly"/> + <div class="o_handle w readonly"/> + <div class="o_handle s readonly"/> </div> <div class="oe_overlay_options" contentEditable="false"> <div class="btn-group"> |