diff options
Diffstat (limited to 'addons/web_editor/static/src')
18 files changed, 545 insertions, 561 deletions
diff --git a/addons/web_editor/static/src/js/editor/rte.js b/addons/web_editor/static/src/js/editor/rte.js index f4f7f82506b..06caaf65990 100644 --- a/addons/web_editor/static/src/js/editor/rte.js +++ b/addons/web_editor/static/src/js/editor/rte.js @@ -316,7 +316,7 @@ var RTEWidget = Widget.extend({ $('body').addClass('editor_enable'); - $(document) + $(document.body) .tooltip({ selector: '[data-oe-readonly]', container: 'body', @@ -364,7 +364,7 @@ var RTEWidget = Widget.extend({ $(document).off('click.rte keyup.rte mousedown.rte activate.rte mouseup.rte'); $(document).off('content_changed').removeClass('o_is_inline_editable').removeData('rte'); - $(document).tooltip('destroy'); + $(document).tooltip('dispose'); $('body').removeClass('editor_enable'); this.trigger('rte:stop'); }, diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js index 3626d5d3ec0..b641839286c 100644 --- a/addons/web_editor/static/src/js/editor/rte.summernote.js +++ b/addons/web_editor/static/src/js/editor/rte.summernote.js @@ -85,10 +85,6 @@ renderer.tplPopovers = function (lang, options) { var $linkPopover = $popover.find('.note-link-popover'); var $airPopover = $popover.find('.note-air-popover'); - if (window === window.top) { - $popover.children().addClass("hidden-xs"); - } - //////////////// image popover // add center button for images @@ -104,11 +100,11 @@ renderer.tplPopovers = function (lang, options) { var $padding = $('<div class="btn-group"/>'); $padding.insertBefore($imagePopover.find('.btn-group:first')); var dropdown_content = [ - '<li><a data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>', - '<li><a data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>', - '<li><a data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>', - '<li><a data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>', - '<li><a data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>', + '<li><a class="dropdown-item" data-event="padding" href="#" data-value="">'+_t('None')+'</a></li>', + '<li><a class="dropdown-item" data-event="padding" href="#" data-value="small">'+_t('Small')+'</a></li>', + '<li><a class="dropdown-item" data-event="padding" href="#" data-value="medium">'+_t('Medium')+'</a></li>', + '<li><a class="dropdown-item" data-event="padding" href="#" data-value="large">'+_t('Large')+'</a></li>', + '<li><a class="dropdown-item" data-event="padding" href="#" data-value="xl">'+_t('Xl')+'</a></li>', ]; $(tplIconButton('fa fa-plus-square-o', { title: _t('Padding'), @@ -121,10 +117,10 @@ renderer.tplPopovers = function (lang, options) { title: _t('Shadow'), event: 'imageShape', value: 'shadow' - })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="img-circle"]')); + })).insertAfter($imagePopover.find('[data-event="imageShape"][data-value="rounded-circle"]')); // add spin for fa - var $spin = $('<div class="btn-group hidden only_fa"/>').insertAfter($button.parent()); + var $spin = $('<div class="btn-group d-none only_fa"/>').insertAfter($button.parent()); $(tplIconButton('fa fa-refresh', { title: _t('Spin'), event: 'imageShape', @@ -132,7 +128,7 @@ renderer.tplPopovers = function (lang, options) { })).appendTo($spin); // resize for fa - var $resizefa = $('<div class="btn-group hidden only_fa"/>') + var $resizefa = $('<div class="btn-group d-none only_fa"/>') .insertAfter($imagePopover.find('.btn-group:has([data-event="resize"])')); for (var size=1; size<=5; size++) { $(tplButton('<span class="note-fontsize-10">'+size+'x</span>', { @@ -142,7 +138,7 @@ renderer.tplPopovers = function (lang, options) { })).appendTo($resizefa); } var $colorfa = $airPopover.find('.note-color').clone(); - $colorfa.find("ul.dropdown-menu").css('min-width', '172px'); + $colorfa.find(".dropdown-menu").css('min-width', '172px'); $resizefa.after($colorfa); // show dialog box and delete @@ -168,7 +164,7 @@ renderer.tplPopovers = function (lang, options) { var $alt = $('<div class="btn-group"/>'); $alt.appendTo($imagePopover.find('.popover-content')); - $alt.append('<button class="btn btn-default btn-sm btn-small" data-event="alt"><strong>' + _t('Description') + ': </strong><span class="o_image_alt"/></button>'); + $alt.append('<button class="btn btn-secondary" data-event="alt"><strong>' + _t('Description') + ': </strong><span class="o_image_alt"/></button>'); //////////////// link popover @@ -187,16 +183,16 @@ renderer.tplPopovers = function (lang, options) { while (node && (!node.tagName || (!node.tagName || formats.indexOf(node.tagName.toLowerCase()) === -1))) { node = node.parentNode; } - $format.parent().removeClass('active'); + $format.removeClass('active'); $format.filter('[data-value="'+(node ? node.tagName.toLowerCase() : "p")+'"]') - .parent().addClass("active"); + .addClass("active"); }); //////////////// tooltip setTimeout(function () { $airPopover.add($linkPopover).add($imagePopover).find("button") - .tooltip('destroy') + .tooltip('dispose') .tooltip({ container: 'body', trigger: 'hover', @@ -220,22 +216,22 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) { fn_boutton_update.call(this, $container, oStyle); - $container.find('.note-color').removeClass("hidden"); + $container.find('.note-color').removeClass('d-none'); if (oStyle.image) { - $container.find('[data-event]').parent().removeClass("active"); + $container.find('[data-event]').removeClass("active"); - $container.find('a[data-event="padding"][data-value="small"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-small")); - $container.find('a[data-event="padding"][data-value="medium"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-medium")); - $container.find('a[data-event="padding"][data-value="large"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-large")); - $container.find('a[data-event="padding"][data-value="xl"]').parent().toggleClass("active", $(oStyle.image).hasClass("padding-xl")); - $container.find('a[data-event="padding"][data-value=""]').parent().toggleClass("active", !$container.find('.active a[data-event="padding"]').length); + $container.find('a[data-event="padding"][data-value="small"]').toggleClass("active", $(oStyle.image).hasClass("padding-small")); + $container.find('a[data-event="padding"][data-value="medium"]').toggleClass("active", $(oStyle.image).hasClass("padding-medium")); + $container.find('a[data-event="padding"][data-value="large"]').toggleClass("active", $(oStyle.image).hasClass("padding-large")); + $container.find('a[data-event="padding"][data-value="xl"]').toggleClass("active", $(oStyle.image).hasClass("padding-xl")); + $container.find('a[data-event="padding"][data-value=""]').toggleClass("active", !$container.find('.active a[data-event="padding"]').length); $(oStyle.image).addClass('o_we_selected_image'); if (dom.isImgFont(oStyle.image)) { - $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass("hidden"); - $container.find('.only_fa').removeClass("hidden"); + $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass('d-none'); + $container.find('.only_fa').removeClass('d-none'); $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x")); $container.find('button[data-event="resizefa"][data-value="3"]').toggleClass("active", $(oStyle.image).hasClass("fa-3x")); $container.find('button[data-event="resizefa"][data-value="4"]').toggleClass("active", $(oStyle.image).hasClass("fa-4x")); @@ -246,8 +242,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) { $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow")); } else { - $container.find('.hidden:not(.only_fa)').removeClass("hidden"); - $container.find('.only_fa').addClass("hidden"); + $container.find('.d-none:not(.only_fa)').removeClass('d-none'); + $container.find('.only_fa').addClass('d-none'); var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/); if (width) { width = width[2]; @@ -260,15 +256,15 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) { $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow")); if (!$(oStyle.image).is("img")) { - $container.find('.btn-group:has(button[data-event="imageShape"])').addClass("hidden"); + $container.find('.btn-group:has(button[data-event="imageShape"])').addClass('d-none'); } - $container.find('.note-color').addClass("hidden"); + $container.find('.note-color').addClass('d-none'); } - $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("pull-left")); - $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("center-block")); - $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("pull-right")); + $container.find('button[data-event="floatMe"][data-value="left"]').toggleClass("active", $(oStyle.image).hasClass("float-left")); + $container.find('button[data-event="floatMe"][data-value="center"]').toggleClass("active", $(oStyle.image).hasClass("d-block mx-auto")); + $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("float-right")); $(oStyle.image).trigger('attributes_change'); } @@ -360,9 +356,9 @@ eventHandler.modules.editor.floatMe = function ($editable, sValue) { var $target = $(getImgTarget($editable)); $editable.data('NoteHistory').recordUndo(); switch (sValue) { - case 'center': $target.toggleClass('center-block').removeClass('pull-right pull-left'); break; - case 'left': $target.toggleClass('pull-left').removeClass('pull-right center-block'); break; - case 'right': $target.toggleClass('pull-right').removeClass('pull-left center-block'); break; + case 'center': $target.toggleClass('d-block mx-auto').removeClass('float-right float-left'); break; + case 'left': $target.toggleClass('float-left').removeClass('float-right d-block mx-auto'); break; + case 'right': $target.toggleClass('float-right').removeClass('float-left d-block mx-auto'); break; } }; eventHandler.modules.editor.imageShape = function ($editable, sValue) { @@ -895,7 +891,7 @@ eventHandler.attach = function (oLayoutInfo, options) { if (!show_tooltip) return; $target.tooltip({title: _t('Double-click to edit'), trigger: 'manuel', container: 'body'}).tooltip('show'); setTimeout(function () { - $target.tooltip('destroy'); + $target.tooltip('dispose'); }, 800); }, 400); }); 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 cbaa7a2fbbc..e3a8803619a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.editor.js +++ b/addons/web_editor/static/src/js/editor/snippets.editor.js @@ -76,7 +76,7 @@ var SnippetEditor = Widget.extend({ var $clone = $(this).clone().css({width: '24px', height: '24px', border: 0}); $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'); + $clone.appendTo('body').removeClass('d-none'); return $clone; }, start: _.bind(self._onDragAndDropStart, self), @@ -153,7 +153,7 @@ var SnippetEditor = Widget.extend({ }); var $parent = this.$target.parent(); - this.$target.find('*').andSelf().tooltip('destroy'); + this.$target.find('*').andSelf().tooltip('dispose'); this.$target.remove(); this.$el.remove(); @@ -199,7 +199,7 @@ var SnippetEditor = Widget.extend({ // Attach own and parent options on the current overlay var $style_button = this.$el.find('.oe_options'); - var $ul = $style_button.find('ul:first'); + var $ul = $style_button.find('.dropdown-menu:first'); var $headers = $ul.find('.dropdown-header:data(editor)'); _.each($headers, (function (el) { var $el = $(el); @@ -214,11 +214,11 @@ var SnippetEditor = Widget.extend({ count++; } }); - $el.toggleClass('hidden', count === 0); + $el.toggleClass('d-none', count === 0); }).bind(this)); // Activate the overlay - $style_button.toggleClass('hidden', $ul.children(':not(.o_main_header):not(.divider):not(.hidden)').length === 0); + $style_button.toggleClass('d-none', $ul.children(':not(.o_main_header):not(.dropdown-divider):not(.d-none)').length === 0); this.cover(); this.$el.toggleClass('oe_active', !!focus); @@ -262,13 +262,13 @@ var SnippetEditor = Widget.extend({ _initializeOptions: function () { var self = this; var $styles = this.$el.find('.oe_options'); - var $ul = $styles.find('ul:first'); + var $ul = $styles.find('.dropdown-menu:first'); this.styles = {}; this.selectorSiblings = []; this.selectorChildren = []; var i = 0; - $ul.append($('<li/>', {class: 'dropdown-header o_main_header', text: this._getName()}).data('editor', this)); + $ul.append($('<div/>', {class: 'dropdown-header o_main_header', text: this._getName()}).data('editor', this)); var defs = _.map(this.templateOptions, function (val, option_id) { if (!val.selector.is(self.$target)) { return; @@ -277,7 +277,7 @@ var SnippetEditor = Widget.extend({ if (val['drop-in']) self.selectorChildren.push(val['drop-in']); var optionName = val.option; - var $el = val.$el.children('li').clone(true).addClass('snippet-option-' + optionName); + var $el = val.$el.children().clone(true).addClass('snippet-option-' + optionName); var option = new (options.registry[optionName] || options.Class)( self, val.base_target ? self.$target.find(val.base_target).eq(0) : self.$target, @@ -288,7 +288,7 @@ var SnippetEditor = Widget.extend({ option.__order = i++; return option.attachTo($el); }); - $ul.append($('<li/>', {class: 'divider'})); + $ul.append($('<div/>', {class: 'dropdown-divider'})); var $parents = this.$target.parents(); _.each($parents, function (parent) { @@ -296,7 +296,7 @@ var SnippetEditor = Widget.extend({ if (parentEditor) { for (var styleName in parentEditor.styles) { if (!parentEditor.styles[styleName].preventChildPropagation) { - $ul.append($('<li/>', {class: 'dropdown-header o_parent_editor_header', text: parentEditor._getName()}).data('editor', parentEditor)); + $ul.append($('<div/>', {class: 'dropdown-header o_parent_editor_header', text: parentEditor._getName()}).data('editor', parentEditor)); break; } } @@ -304,7 +304,7 @@ var SnippetEditor = Widget.extend({ }); if (!this.selectorSiblings.length && !this.selectorChildren.length) { - this.$el.find('.oe_snippet_move, .oe_snippet_clone').addClass('hidden'); + this.$el.find('.oe_snippet_move, .oe_snippet_clone').addClass('d-none'); } this.$el.find('[data-toggle="dropdown"]').dropdown(); @@ -362,7 +362,7 @@ var SnippetEditor = Widget.extend({ }; self.$target.after('<div class="oe_drop_clone" style="display: none;"/>'); self.$target.detach(); - self.$el.addClass('hidden'); + self.$el.addClass('d-none'); var $selectorSiblings; for (var i = 0 ; i < self.selectorSiblings.length ; i++) { @@ -419,7 +419,7 @@ var SnippetEditor = Widget.extend({ } $clone.after(this.$target); - this.$el.removeClass('hidden'); + this.$el.removeClass('d-none'); $('body').removeClass('move-important'); $clone.remove(); @@ -987,7 +987,7 @@ var SnippetsMenu = Widget.extend({ self.templateOptions.push(option); selectors.push(option.selector); }); - $styles.addClass('hidden'); + $styles.addClass('d-none'); globalSelector.closest = function ($from) { var $temp; @@ -1052,7 +1052,7 @@ var SnippetsMenu = Widget.extend({ if (moduleID) { $snippet.addClass('o_snippet_install'); var $installBtn = $('<a/>', { - class: 'btn btn-primary btn-sm o_install_btn', + class: 'btn btn-primary o_install_btn', target: '_blank', href: '/web#id=' + moduleID + '&view_type=form&model=ir.module.module&action=base.open_module_tree', text: _t("Install"), @@ -1218,14 +1218,14 @@ var SnippetsMenu = Widget.extend({ $('.oe_drop_zone').droppable({ over: function () { dropped = true; - $(this).first().after($toInsert).addClass('hidden'); + $(this).first().after($toInsert).addClass('d-none'); }, out: function () { var prev = $toInsert.prev(); if (this === prev[0]) { dropped = false; $toInsert.detach(); - $(this).removeClass('hidden'); + $(this).removeClass('d-none'); } }, }); 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 097f3d3b12f..199c3a0b8ad 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -17,10 +17,10 @@ var _t = core._t; */ var SnippetOption = Widget.extend({ events: { - 'mouseenter a': '_onLinkEnter', - 'click a': '_onLinkClick', + 'mouseenter': '_onLinkEnter', + 'click': '_onLinkClick', 'mouseleave': '_onMouseleave', - 'mouseleave ul': '_onMouseleave', + 'mouseleave .dropdown-menu': '_onMouseleave', }, /** * When editing a snippet, its options are shown alongside the ones of its @@ -30,7 +30,7 @@ var SnippetOption = Widget.extend({ preventChildPropagation: false, /** - * The option `$el` is supposed to be the associated <li/> element in the + * The option `$el` is supposed to be the associated DOM element in the * options dropdown. The option controls another DOM element: the snippet it * customizes, which can be found at `$target`. Access to the whole edition * overlay is possible with `$overlay` (this is not recommended though). @@ -115,18 +115,18 @@ var SnippetOption = Widget.extend({ /** * Default option method which allows to select one and only one class in * the option classes set and set it on the associated snippet. The common - * case is having a subdropdown with each <li/> having a `data-select-class` + * case is having a subdropdown with each item having a `data-select-class` * value allowing to choose the associated class. * * @param {boolean|string} previewMode * - truthy if the option is enabled for preview or if leaving it (in * that second case, the value is 'reset') * - false if the option should be activated for good - * @param {*} value - the class to activate ($li.data('selectClass')) - * @param {jQuery} $li - the related DOMElement option + * @param {*} value - the class to activate ($opt.data('selectClass')) + * @param {jQuery} $opt - the related DOMElement option */ - selectClass: function (previewMode, value, $li) { - var $group = $li && $li.closest('.dropdown-submenu'); + selectClass: function (previewMode, value, $opt) { + var $group = $opt && $opt.closest('.dropdown-submenu'); if (!$group || !$group.length) { $group = this.$el; } @@ -141,12 +141,12 @@ var SnippetOption = Widget.extend({ /** * Default option method which allows to select one or multiple classes in * the option classes set and set it on the associated snippet. The common - * case is having a subdropdown with each <li/> having a `data-toggle-class` + * case is having a subdropdown with each item having a `data-toggle-class` * value allowing to toggle the associated class. * * @see this.selectClass */ - toggleClass: function (previewMode, value, $li) { + toggleClass: function (previewMode, value, $opt) { var $lis = this.$el.find('[data-toggle-class]').addBack('[data-toggle-class]'); var classes = $lis.map(function () {return $(this).data('toggleClass');}).get().join(' '); var activeClasses = $lis.filter('.active, :has(.active)').map(function () {return $(this).data('toggleClass');}).get().join(' '); @@ -163,7 +163,7 @@ var SnippetOption = Widget.extend({ /** * Override the helper method to search inside the $target element instead - * of the dropdown <li/> element. + * of the dropdown item element. * * @override */ @@ -225,13 +225,13 @@ var SnippetOption = Widget.extend({ * - truthy if the option is enabled for preview or if leaving it (in * that second case, the value is 'reset') * - false if the option should be activated for good - * @param {jQuery} $li - the related DOMElement option + * @param {jQuery} $opt - the related DOMElement option */ - _select: function (previewMode, $li) { + _select: function (previewMode, $opt) { var self = this; // Options can say they respond to strong choice - if (previewMode && ($li.data('noPreview') || $li.parent().data('noPreview'))) { + if (previewMode && ($opt.data('noPreview') || $opt.parent().data('noPreview'))) { return; } // If it is not preview mode, the user selected the option for good @@ -243,7 +243,7 @@ var SnippetOption = Widget.extend({ // Search for methods (data-...) (i.e. data-toggle-class) on the // selected (sub)option and its parents - var el = $li[0]; + var el = $opt[0]; var methods = []; do { methods.push([el, el.dataset]); @@ -302,20 +302,25 @@ var SnippetOption = Widget.extend({ * @param {Event} ev */ _onLinkEnter: function (ev) { - var $li = $(ev.currentTarget).parent(); - if ($li.is('.dropdown-submenu')) { - var $menu = $li.children('.dropdown-menu'); + var $opt = $(ev.target); + if (!$opt.hasClass('dropdown-item')) { + return; + } + + var $dsmenu = $opt.parent('.dropdown-submenu'); + if ($dsmenu.length) { + var $menu = $dsmenu.children('.dropdown-menu'); // FIXME if ($menu.length) { - var menuRightPosition = $li.offset().left + $li.outerWidth() + $menu.outerWidth(); + var menuRightPosition = $dsmenu.offset().left + $dsmenu.outerWidth() + $menu.outerWidth(); $menu.toggleClass('o_open_to_left', menuRightPosition > $(window).outerWidth()); } } - if (!$li.is(':hasData')) { + if (!$opt.is(':hasData')) { return; } this.__click = false; - this._select(true, $li); + this._select(true, $opt); this.$target.trigger('snippet-option-preview', [this]); }, /** @@ -325,13 +330,14 @@ var SnippetOption = Widget.extend({ * @param {Event} ev */ _onLinkClick: function (ev) { - var $li = $(ev.currentTarget).parent(':hasData'); - if (!$li.length) { + var $opt = $(ev.target); + if (!$opt.hasClass('dropdown-item') || !$opt.is(':hasData')) { return; } + ev.preventDefault(); this.__click = true; - this._select(false, $li); + this._select(false, $opt); this.$target.trigger('snippet-option-change', [this]); }, /** @@ -660,10 +666,10 @@ registry.colorpicker = SnippetOption.extend({ var $palette_def = $tabs.find('div[data-name="' + self.data.paletteDefault + '"]'); var pos = $tabs.find('> div').index($palette_def); - $toggles.children('li').eq(pos).addClass('active'); + $toggles.children('li').eq(pos).find('a').addClass('active'); $palette_def.addClass('active'); } else { - $toggles.find('li').first().addClass('active'); + $toggles.find('li').first().find('a').addClass('active'); $tabs.find('div').first().addClass('active'); } @@ -678,7 +684,7 @@ registry.colorpicker = SnippetOption.extend({ $toggles.parent().empty().append($clpicker); } - this.$el.find('li').append($pt); + this.$el.find('.dropdown-menu').append($pt); } var classes = []; @@ -781,7 +787,7 @@ registry.background = SnippetOption.extend({ * * @see this.selectClass for parameters */ - background: function (previewMode, value, $li) { + background: function (previewMode, value, $opt) { if (previewMode === 'reset' && value === undefined) { // No background has been selected and we want to reset back to the // original custom image @@ -800,25 +806,25 @@ registry.background = SnippetOption.extend({ /** * @override */ - selectClass: function (previewMode, value, $li) { - this.background(previewMode, '', $li); - this._super(previewMode, value ? (value + ' oe_img_bg') : value, $li); + selectClass: function (previewMode, value, $opt) { + this.background(previewMode, '', $opt); + this._super(previewMode, value ? (value + ' oe_img_bg') : value, $opt); }, /** * Opens a media dialog to add a custom background image. * * @see this.selectClass for parameters */ - chooseImage: function (previewMode, value, $li) { + chooseImage: function (previewMode, value, $opt) { // Put fake image in the DOM, edit it and use it as background-image - var $image = $('<img/>', {class: 'hidden', src: value}).appendTo(this.$target); + var $image = $('<img/>', {class: 'd-none', src: value}).appendTo(this.$target); var $editable = this.$target.closest('.o_editable'); var _editor = new weWidgets.MediaDialog(this, { onlyImages: true, firstFilters: ['background'], res_model: $editable.data('oe-model'), - res_id: $editable.data('oe-id'), + res_id: $editable.data('oe-id'), }, null, $image[0]).open(); _editor.on('save', this, function () { @@ -881,7 +887,7 @@ registry.background = SnippetOption.extend({ this._super.apply(this, arguments); var src = this._getSrcFromCssValue(); - this.$el.find('li[data-background]') + this.$el.find('[data-background]') .removeClass('active') .filter(function () { var bgOption = $(this).data('background'); @@ -889,7 +895,7 @@ registry.background = SnippetOption.extend({ }) .addClass('active'); - this.$el.find('li[data-choose-image]').toggleClass('active', this.$target.hasClass('oe_custom_bg')); + this.$el.find('[data-choose-image]').toggleClass('active', this.$target.hasClass('oe_custom_bg')); }, /** * Sets the given value as custom background image. @@ -926,7 +932,7 @@ registry.background_position = SnippetOption.extend({ * @override */ onFocus: function () { - this.$el.toggleClass('hidden', this.$target.css('background-image') === 'none'); + this.$el.toggleClass('d-none', this.$target.css('background-image') === 'none'); }, //-------------------------------------------------------------------------- @@ -938,7 +944,7 @@ registry.background_position = SnippetOption.extend({ * * @see this.selectClass for parameters */ - backgroundPosition: function (previewMode, value, $li) { + backgroundPosition: function (previewMode, value, $opt) { var self = this; this.previous_state = [this.$target.attr('class'), this.$target.css('background-size'), this.$target.css('background-position')]; @@ -988,7 +994,7 @@ registry.background_position = SnippetOption.extend({ var img_url = /\(['"]?([^'"]+)['"]?\)/g.exec(self.$target.css('background-image')); img_url = (img_url && img_url[1]) || ''; - var $img = $('<img/>', {class: 'img img-responsive', src: img_url}); + var $img = $('<img/>', {class: 'img img-fluid', src: img_url}); $img.on('load', function () { self._bindImageEvents($img); }); @@ -1153,8 +1159,8 @@ registry.many2one = SnippetOption.extend({ // move menu item setTimeout(function () { - if (self.$overlay.find('.oe_options').hasClass('hidden')) { - self.$btn.css('height', '0').find('> a').addClass('hidden'); + if (self.$overlay.find('.oe_options').hasClass('d-none')) { + self.$btn.css('height', '0').find('> a').addClass('d-none'); self.$ul.show().css({ 'top': '-24px', 'margin': '0', 'padding': '2px 0', 'position': 'relative' }); diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js index 657a8bbac8c..784aab3493e 100644 --- a/addons/web_editor/static/src/js/editor/summernote.js +++ b/addons/web_editor/static/src/js/editor/summernote.js @@ -958,15 +958,15 @@ range.WrappedRange.prototype.isContentEditable = function () { renderer.tplButtonInfo.fontsize = function (lang, options) { var items = options.fontSizes.reduce(function (memo, v) { - return memo + '<li><a data-event="fontSize" href="#" data-value="' + v + '">' + + return memo + '<a data-event="fontSize" href="#" class="dropdown-item" data-value="' + v + '">' + '<i class="fa fa-check"></i> ' + v + - '</a></li>'; + '</a>'; }, ''); var sLabel = '<span class="note-current-fontsize">11</span>'; return renderer.getTemplate().button(sLabel, { title: lang.font.size, - dropdown: '<ul class="dropdown-menu">' + items + '</ul>' + dropdown: '<div class="dropdown-menu">' + items + '</div>' }); }; diff --git a/addons/web_editor/static/src/js/editor/translator.js b/addons/web_editor/static/src/js/editor/translator.js index e3ba65a54d7..a24e438affc 100644 --- a/addons/web_editor/static/src/js/editor/translator.js +++ b/addons/web_editor/static/src/js/editor/translator.js @@ -63,7 +63,7 @@ var AttributeTranslateDialog = weWidgets.Dialog.extend({ var $group = $('<div/>', {class: 'form-group'}).appendTo(this.$el); _.each(this.translation, function (node, attr) { var $node = $(node); - var $label = $('<label class="control-label"></label>').text(attr); + var $label = $('<label class="col-form-label"></label>').text(attr); var $input = $('<input class="form-control"/>').val($node.html()); $input.on('change keyup', function () { var value = $input.val(); @@ -138,7 +138,7 @@ var TranslatorMenuBar = Widget.extend({ var translation = $node.data('translation') || {}; var trans = $node.attr(attr); var match = trans.match(/<span [^>]*data-oe-translation-id="([0-9]+)"[^>]*>(.*)<\/span>/); - var $trans = $(trans).addClass('hidden o_editable o_editable_translatable_attribute').appendTo('body'); + var $trans = $(trans).addClass('d-none o_editable o_editable_translatable_attribute').appendTo('body'); $trans.data('$node', $node).data('attribute', attr); translation[attr] = $trans[0]; $node.attr(attr, match[2]); diff --git a/addons/web_editor/static/src/js/inline.js b/addons/web_editor/static/src/js/inline.js index 7409f9190f3..fb2247313bd 100644 --- a/addons/web_editor/static/src/js/inline.js +++ b/addons/web_editor/static/src/js/inline.js @@ -10,7 +10,7 @@ var snippet_editor = require('web_editor.snippet.editor'); weWidgets.MediaDialog.include({ start: function () { - this.$('[href="#editor-media-video"]').addClass('hidden'); + this.$('[href="#editor-media-video"]').addClass('d-none'); return this._super.apply(this, arguments); }, }); diff --git a/addons/web_editor/static/src/js/tours/rte.js b/addons/web_editor/static/src/js/tours/rte.js index 82c31da5259..54736b4a290 100644 --- a/addons/web_editor/static/src/js/tours/rte.js +++ b/addons/web_editor/static/src/js/tours/rte.js @@ -29,15 +29,15 @@ tour.register('rte', { '<section>\n'+ ' <div class="container" style="width: 600px;">\n'+ ' <div class="row">\n'+ - ' <div class="col-md-6 mt16">\n'+ + ' <div class="col-lg-6 mt16">\n'+ '<h1 id="text_content_id">Batnae municipium in Anthemusia</h1> \n'+ ' <p>Batnae municipium in Anthemusia conditum Macedonum manu priscorum ab Euphrate flumine brevi spatio disparatur, refertum mercatoribus opulentis, ubi annua sollemnitate prope Septembris initium mensis ad.</p>\n'+ ' <p> Quam <img style="width: 25%" src="/web/static/src/img/logo.png"/> quidem <span class="fa fa-flag fa-2x"></span> partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas.</p>\n'+ ' <p>Et hanc quidem praeter oppida multa duae civitates exornant Seleucia opus Seleuci regis, et Claudiopolis quam deduxit coloniam Claudius Caesar. Isaura enim antehac nimium potens, olim subversa ut rebellatrix.</p>'+ '<p>Harum trium sententiarum nulli prorsus assentior.</p>\n'+ ' </div>\n'+ - ' <div class="col-md-6 mt16">\n'+ - ' <img class="img img-responsive shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+ + ' <div class="col-lg-6 mt16">\n'+ + ' <img class="img img-fluid shadow mb16" src="/web/static/src/img/logo.png" alt="Odoo text and image block">\n'+ ' </div>\n'+ ' </div>\n'+ '</section>\n'; @@ -67,7 +67,7 @@ tour.register('rte', { trigger: ".note-color button.dropdown-toggle", }, { content: "change text color", - trigger: ".btn-group.open button[data-event=foreColor]:first", + trigger: ".btn-group.show button[data-event=foreColor]:first", }, { content: "change selection to change text bg-color again", trigger: '#editable_area > section .row > div:first h1 font:eq(2)', @@ -169,7 +169,7 @@ tour.register('rte', { }, { content: "click on create link", trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]', - extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right', + extra_trigger: '#editable_area > section .row > div:first span.fa.float-right', }, { content: "insert a link url", trigger: 'input[name="url"]', @@ -177,19 +177,19 @@ tour.register('rte', { }, { content: "click on color style", trigger: '.o_link_dialog_color > .o_link_dialog_color_item.btn-success', - extra_trigger: 'a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.pull-right', + extra_trigger: 'a#link-preview:containsRegex(/^<span [^>]+><\\/span>$/) > span.fa.fa-3x.float-right', }, { content: "save link", trigger: '.modal-footer > .btn-primary', - extra_trigger: 'a#link-preview.btn.btn-success span.fa.fa-3x.pull-right', + extra_trigger: 'a#link-preview.btn.btn-success span.fa.fa-3x.float-right', }, { content: "click on other picture", trigger: '#editable_area > section .row > div:last img', - extra_trigger: 'body:not(:has(#link-preview)) a.btn[href^="http://"]:has(span.fa.fa-3x.pull-right)', + extra_trigger: 'body:not(:has(#link-preview)) a.btn[href^="http://"]:has(span.fa.fa-3x.float-right)', }, { content: "click on create link again", trigger: '.note-image-popover:visible button[data-event="showLinkDialog"]', - extra_trigger: '#editable_area > section .row > div:first span.fa.pull-right', + extra_trigger: '#editable_area > section .row > div:first span.fa.float-right', }, { content: "insert an email", trigger: 'input[name="url"]', @@ -288,11 +288,11 @@ tour.register('rte_inline', { ' <tbody>\n'+ ' <tr>\n'+ ' <td valign="center" width="270">\n'+ - ' <img src="/logo.png" alt="Your Logo" class="img-circle img-thumbnail">\n'+ + ' <img src="/logo.png" alt="Your Logo" class="rounded-circle img-thumbnail">\n'+ ' </td>\n'+ ' <td valign="center" width="270">\n'+ ' <a href="https://www.facebook.com/Odoo"><span class="fa fa-facebook-square fa-2x text-primary"></span></a>\n'+ - ' <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square pull-right"></span>\n'+ + ' <span style="color: rgb(255, 0, 0);" class="fa fa-4x fa-google-plus-square float-right"></span>\n'+ ' </td>\n'+ ' </tr>\n'+ ' </tbody>\n'+ @@ -311,7 +311,7 @@ tour.register('rte_inline', { trigger: '#wrapwrap img:first[width][height][style*="-radius"][style*="1px"][style*="padding"]', }, { content: "check the font image src", - trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(51,122,183)/28"]', + trigger: '#wrapwrap img:eq(1)[src^="/web_editor/font_to_img/"][src$="/rgb(0,123,255)/32"]', }, { content: "check the font class to css", trigger: '#wrapwrap img:eq(1)[height]:not([class*="fa"])', diff --git a/addons/web_editor/static/src/js/widgets/ace.js b/addons/web_editor/static/src/js/widgets/ace.js index a92c56cae05..c6cbb43295f 100644 --- a/addons/web_editor/static/src/js/widgets/ace.js +++ b/addons/web_editor/static/src/js/widgets/ace.js @@ -252,7 +252,7 @@ var ViewEditor = Widget.extend({ if (!this.sortedViews.length || !this.sortedSCSS.length) { _.defer((function () { this._switchType(this.sortedViews.length ? 'xml' : 'scss'); - this.$typeSwitcherBtn.parent('.btn-group').addClass('hidden'); + this.$typeSwitcherBtn.parent('.btn-group').addClass('d-none'); }).bind(this)); } @@ -365,7 +365,7 @@ var ViewEditor = Widget.extend({ } this.$lists[this.currentType].select2('val', resID); - this.$resetButton.toggleClass('hidden', this.currentType === 'xml' || !this.scss[resID].customized); + this.$resetButton.toggleClass('d-none', this.currentType === 'xml' || !this.scss[resID].customized); }, /** * Formats the current resource being vizualized. @@ -662,12 +662,12 @@ var ViewEditor = Widget.extend({ _switchType: function (type) { this.currentType = type; this.$typeSwitcherBtn.html(this.$typeSwitcherChoices.filter('[data-type=' + type + ']').html()); - _.each(this.$lists, function ($list, _type) { $list.toggleClass('hidden', type !== _type); }); + _.each(this.$lists, function ($list, _type) { $list.toggleClass('d-none', type !== _type); }); this.$lists[type].change(); - this.$includeBundlesArea.toggleClass('hidden', this.currentType === 'scss' || !session.debug); - this.$includeAllSCSSArea.toggleClass('hidden', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0); - this.$formatButton.toggleClass('hidden', this.currentType === 'scss'); + this.$includeBundlesArea.toggleClass('d-none', this.currentType === 'scss' || !session.debug); + this.$includeAllSCSSArea.toggleClass('d-none', this.currentType === 'xml' || !session.debug || this.options.defaultBundlesRestriction.length === 0); + this.$formatButton.toggleClass('d-none', this.currentType === 'scss'); }, /** * Updates the select option DOM element associated with a particular resID diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 5f00723865d..b1a480ae56e 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -313,9 +313,9 @@ var ImageWidget = MediaWidget.extend({ } if (!self.$media.is('img')) { // Note: by default the images receive the bootstrap opt-in - // img-responsive class. We cannot make them all responsive + // img-fluid class. We cannot make them all responsive // by design because of libraries and client databases img. - self._replaceMedia($('<img/>', {class: 'img-responsive o_we_custom_image'})); + self._replaceMedia($('<img/>', {class: 'img-fluid o_we_custom_image'})); } self.$media.attr('src', img.src); @@ -450,7 +450,7 @@ var ImageWidget = MediaWidget.extend({ .values() .value(); - this.$('.help-block').empty(); + this.$('.form-text').empty(); this.$('.existing-attachments').replaceWith(QWeb.render('web_editor.dialog.image.existing.content', {rows: rows})); @@ -459,7 +459,7 @@ var ImageWidget = MediaWidget.extend({ var $div = $(el); if (/gif|jpe|jpg|png/.test($div.data('mimetype'))) { var $img = $('<img/>', { - class: 'img-responsive', + class: 'img-fluid', src: $div.data('url') || $div.data('src'), }); var def = $.Deferred(); @@ -538,7 +538,8 @@ var ImageWidget = MediaWidget.extend({ self._toggleImage(attachment, true); } else { $button.addClass('btn-danger'); - self.$el.addClass('has-error').find('.help-block').text(error); + self.$el.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); + self.$el.find('.form-text').text(error); } if (!self.multiImages) { @@ -576,7 +577,8 @@ var ImageWidget = MediaWidget.extend({ _onImageSelection: function () { var $form = this.$('form'); this.$el.addClass('nosave'); - $form.removeClass('has-error').find('.help-block').empty(); + $form.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); + $form.find('.form-text').empty(); this.$('.o_upload_image_button').removeClass('btn-danger btn-success'); this._uploadImage(); }, @@ -585,7 +587,7 @@ var ImageWidget = MediaWidget.extend({ */ _onRemoveClick: function (ev) { var self = this; - var $helpBlock = this.$('.help-block').empty(); + var $helpBlock = this.$('.form-text').empty(); var $a = $(ev.currentTarget); var id = parseInt($a.data('id'), 10); var attachment = _.findWhere(this.records, {id: id}); @@ -611,9 +613,9 @@ var ImageWidget = MediaWidget.extend({ */ _onSearchInput: function (ev) { var $input = $(ev.currentTarget); - var $button = $input.next('button'); + var $button = $input.next('.input-group-append').children(); var emptyValue = ($input.val() === ''); - $button.toggleClass('btn-default', emptyValue).toggleClass('btn-primary', !emptyValue) + $button.toggleClass('btn-secondary', emptyValue).toggleClass('btn-primary', !emptyValue) .prop('disabled', emptyValue); }, /** @@ -987,8 +989,8 @@ var VideoWidget = MediaWidget.extend({ _updateVideo: function () { // Reset the feedback this.$content.empty(); - this.$('#o_video_form_group').removeClass('has-error has-success'); - this.$('.o_video_dialog_options li').addClass('hidden'); + this.$('#o_video_form_group').removeClass('o_has_error o_has_success').find('.form-control, .custom-select').removeClass('is-invalid is-valid'); + this.$('.o_video_dialog_options li').addClass('d-none'); // Check video code var $textarea = this.$('textarea#o_video_text'); @@ -1017,20 +1019,23 @@ var VideoWidget = MediaWidget.extend({ var $opt_box = this.$('.o_video_dialog_options'); // Show / Hide preview elements - this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('hidden', !query.$video); + this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('d-none', !query.$video); // Toggle validation classes - this.$el.find('#o_video_form_group').toggleClass('has-error', !query.$video).toggleClass('has-success', !!query.$video); + this.$el.find('#o_video_form_group') + .toggleClass('o_has_error', !query.$video).find('.form-control, .custom-select').toggleClass('is-invalid', !query.$video) + .end() + .toggleClass('o_has_success', !!query.$video).find('.form-control, .custom-select').toggleClass('is-valid', !!query.$video); // Individually show / hide options base on the video provider - $opt_box.find('li.o_' + query.type + '_option').removeClass('hidden'); + $opt_box.find('li.o_' + query.type + '_option').removeClass('d-none'); // Hide the entire options box if no options are available - $opt_box.toggleClass('hidden', $opt_box.find('li:not(.hidden)').length === 0); + $opt_box.toggleClass('d-none', $opt_box.find('li:not(.d-none)').length === 0); if (query.type === 'yt') { // Youtube only: If 'hide controls' is checked, hide 'fullscreen' // and 'youtube logo' options too - this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('li').toggleClass('hidden', this.$('input#o_video_hide_controls').is(':checked')); + this.$('input#o_video_hide_fullscreen, input#o_video_hide_yt_logo').closest('li').toggleClass('d-none', this.$('input#o_video_hide_controls').is(':checked')); } var $content = query.$video; @@ -1099,7 +1104,7 @@ var MediaDialog = Dialog.extend({ events : _.extend({}, Dialog.prototype.events, { 'input input#icon-search': '_onSearchInput', 'shown.bs.tab a[data-toggle="tab"]': '_onTabChange', - 'click .pager > li > a:not(.disabled)': '_onPagerClick', + 'click .previous:not(.disabled), .next:not(.disabled)': '_onPagerClick', }), custom_events: _.extend({}, Dialog.prototype.custom_events || {}, { save_request: '_onSaveRequest', @@ -1268,10 +1273,10 @@ var MediaDialog = Dialog.extend({ */ _updateControlPanel: function () { var cpConfig = this.active.getControlPanelConfig(); - this.$('li.search').toggleClass("hidden", !cpConfig.searchEnabled); - this.$('li.previous, li.next').toggleClass("hidden", !cpConfig.pagerEnabled); - this.$('li.previous > a').toggleClass("disabled", !cpConfig.pagerLeftEnabled); - this.$('li.next > a').toggleClass("disabled", !cpConfig.pagerRightEnabled); + this.$('li.search').toggleClass('d-none', !cpConfig.searchEnabled); + this.$('.previous, .next').toggleClass('d-none', !cpConfig.pagerEnabled); + this.$('.previous').toggleClass("disabled", !cpConfig.pagerLeftEnabled); + this.$('.next').toggleClass("disabled", !cpConfig.pagerRightEnabled); }, //-------------------------------------------------------------------------- @@ -1282,7 +1287,7 @@ var MediaDialog = Dialog.extend({ * @private */ _onPagerClick: function (ev) { - this.active.goToPage(this.active.page + ($(ev.currentTarget).parent().hasClass('previous') ? -1 : 1)); + this.active.goToPage(this.active.page + ($(ev.currentTarget).hasClass('previous') ? -1 : 1)); this._updateControlPanel(); }, /** @@ -1470,14 +1475,14 @@ var LinkDialog = Dialog.extend({ var data = this._getData(); if (data === null) { var $url = this.$('input[name="url"]'); - $url.closest('.form-group').addClass('has-error'); + $url.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); $url.focus(); return $.Deferred().reject(); } this.data.text = data.label; this.data.url = data.url; this.data.className = data.classes.replace(/\s+/gi, ' ').replace(/^\s+|\s+$/gi, ''); - if (data.classes.replace(/(^|[ ])(btn-default|btn-success|btn-primary|btn-info|btn-warning|btn-danger)([ ]|$)/gi, ' ')) { + if (data.classes.replace(/(^|[ ])(btn-secondary|btn-success|btn-primary|btn-info|btn-warning|btn-danger)([ ]|$)/gi, ' ')) { this.data.style = {'background-color': '', 'color': ''}; } this.data.isNewWindow = data.isNewWindow; @@ -1554,9 +1559,9 @@ var LinkDialog = Dialog.extend({ * @private */ _onURLInput: function (ev) { - $(ev.currentTarget).closest('.form-group').removeClass('has-error'); + $(ev.currentTarget).closest('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); var isLink = $(ev.currentTarget).val().indexOf('@') < 0; - this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('hidden', !isLink); + this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('d-none', !isLink); }, }); diff --git a/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss new file mode 100644 index 00000000000..b7ad30b1bc4 --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss @@ -0,0 +1,28 @@ + +// Automatically extend bootstrap to create theme background/text/button classes +$theme-colors: () !default; +$theme-colors: map-merge(( + 'alpha': $color-alpha, + 'beta': $color-beta, + 'gamma': $color-gamma, + 'delta': $color-delta, + 'epsilon': $color-epsilon, +), $theme-colors); + +// Extend grays with transparent ones (for some reason, BS4 create black-50 and +// white-50 but does not allow overridding that with variables). Also add black +// and white ones too as they were also not added by BS4... +$grays: () !default; +$grays: map-merge(( + 'black-25': $color-black-25, + 'black-50': $color-black-50, + 'black-75': $color-black-75, + 'white-25': $color-white-25, + 'white-50': $color-white-50, + 'white-75': $color-white-75, + + // Note: those two needs to be redefined before bootstrap, otherwise they + // do not exist yet + 'black': $black, + 'white': $white, +), $grays); diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index ed125d62c1c..11fa94cd010 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -32,7 +32,7 @@ html, body { min-width: 20px; } } - @media (max-width: $screen-xs-max) { + @include media-breakpoint-down(sm) { .table-responsive > table.table { table-layout: auto; } @@ -71,7 +71,7 @@ img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl { .fa-10x { font-size: 10em; } -.fa.center-block { +.fa.d-block.mx-auto { text-align: center; } @@ -121,12 +121,8 @@ html[data-browser^="msie"] div.media_iframe_video iframe { margin-left: 0; } -@media (max-width: $screen-xs-max) { +@include media-breakpoint-down(sm) { img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa { - -webkit-transform: none !important; - -moz-transform: none !important; - -ms-transform: none !important; - -o-transform: none !important; transform: none !important; } } @@ -233,40 +229,8 @@ a.o_underline { } } -// Create classes for theme colors... -@include o-create-color-classes(alpha, $color-alpha); -@include o-create-color-classes(beta, $color-beta); -@include o-create-color-classes(gamma, $color-gamma); -@include o-create-color-classes(delta, $color-delta); -@include o-create-color-classes(epsilon, $color-epsilon); - -// ... and button classes -@include o-create-color-btn-classes(alpha, $color-alpha); -@include o-create-color-btn-classes(beta, $color-beta); -@include o-create-color-btn-classes(gamma, $color-gamma); -@include o-create-color-btn-classes(delta, $color-delta); -@include o-create-color-btn-classes(epsilon, $color-epsilon); - -// Create classes for UI colors -@include o-create-color-classes(primary, $brand-primary); -@include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); -@include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); -@include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); -@include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); - -// Create classes for greyscale colors -@include o-create-color-classes('black', $gray-base); -@include o-create-color-classes('gray-darker', $gray-darker); -@include o-create-color-classes('gray-dark', $gray-dark); -@include o-create-color-classes('gray', $gray); -@include o-create-color-classes('gray-light', $gray-light); -@include o-create-color-classes('gray-lighter', $gray-lighter); -@include o-create-color-classes('white', $gray-white); - -// Create classes for greyscale transparent colours -@include o-create-color-classes('black-25', $color-black-25); -@include o-create-color-classes('black-50', $color-black-50); -@include o-create-color-classes('black-75', $color-black-75); -@include o-create-color-classes('white-25', $color-white-25); -@include o-create-color-classes('white-50', $color-white-50); -@include o-create-color-classes('white-75', $color-white-75); +// Extend bootstrap to create background and text utilities for gray colors too +@each $color, $value in $grays { + @include bg-variant(".bg-#{$color}", $value); + @include text-emphasis-variant(".text-#{$color}", $value); +} diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss index 179f814c4b3..eee93913dc2 100644 --- a/addons/web_editor/static/src/scss/web_editor.ui.scss +++ b/addons/web_editor/static/src/scss/web_editor.ui.scss @@ -22,7 +22,7 @@ z-index: $zindex-modal - 9; background-color: rgba(0,0,0,0); - @include o-transition(background-color, 400ms, $o-we-md-ease); + transition: background-color 400ms $o-we-md-ease 0s; font-family: $o-we-font-family; form.navbar-form { @@ -31,7 +31,7 @@ margin: 0; padding: 0; @include o-position-absolute($right: -$o-we-sidebar-width); - @include o-transition(right, 0.4s, $o-we-md-ease); + transition: right 0.4s $o-we-md-ease 0s; border-left: 1px solid $o-we-color-divider; background-color: inherit; @@ -47,7 +47,7 @@ font-size: 13px; font-family: $o-we-font-family; - @include o-transition(all, 0.3s); + transition: all 0.3s ease 0s; border: none; border-radius: 0; @@ -59,10 +59,10 @@ } &.btn-primary { - @include button-variant(white, $o-brand-primary, $o-brand-primary); + @include button-variant($o-brand-odoo, $o-brand-odoo); } - &.btn-default { - @include button-variant(white, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + &.btn-secondary { + @include button-variant(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); &:hover { background: rgba(black, 0.5); @@ -100,8 +100,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] { #oe_snippets { @include o-w-preserve-btn; - @include o-flex-display; - @include o-flex-flow(column, nowrap); + display: flex; + flex-flow: column nowrap; @include o-position-absolute(0, auto, 0, -$o-we-sidebar-width); position: fixed; width: $o-we-sidebar-width; @@ -109,12 +109,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] { font-family: Roboto, $font-family-sans-serif; border-right: 1px solid $o-we-color-divider; - @include o-transition(left, 400ms, $o-we-md-ease); - @include o-linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%)); + transition: left 400ms $o-we-md-ease 0s; + background-image: linear-gradient(45deg, $o-we-color-normal, darken($o-we-color-normal, 10%)); box-shadow: 0px 10px 10px -10px black inset; #snippets_menu { - @include o-flex(0, 0, auto); + flex: 0 0 auto; height: $o-navbar-height; line-height: $o-navbar-height; margin: 0; @@ -133,9 +133,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .o_panel_header { color: #999999; - @include o-flex-display; - @include o-align-items(center); - @include o-justify-content(center); + display: flex; + align-items: center; + justify-content: center; padding: 3%; color: white; margin-bottom: 3%; @@ -157,7 +157,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { margin: 0 0 6% 3%; box-shadow: none; background-color: transparent; - @include user-select(none); + user-select: none; cursor: pointer; cursor: copy; @@ -173,8 +173,8 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &:hover .oe_snippet_thumbnail_img { - @include o-transition(transform, 200ms, ease); - @include scale(1.05); + transition: transform 200ms ease 0s; + transform: scale(1.05); } } @@ -251,12 +251,12 @@ html[lang] > body.editor_enable [data-oe-translation-state] { // DROPZONES @keyframes dropZoneInsert { to { - background-color: rgba($o-brand-primary, 0.2); + background-color: rgba($o-brand-odoo, 0.2); } } #wrapwrap .oe_drop_zone { - background-color: rgba($o-brand-primary, 0.05); - @include o-animation(dropZoneInsert, 1s, linear, 0s, infinite, alternate); + background-color: rgba($o-brand-odoo, 0.05); + animation: dropZoneInsert 1s linear 0s infinite alternate; &.oe_insert { z-index: 999; @@ -270,7 +270,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { height: $o-we-dropzone-size; margin: (-$o-we-dropzone-size/2) 0; - @include o-transition(margin, 400ms, linear); + transition: margin 400ms linear 0s; &:after { content: ""; @@ -282,7 +282,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } &.oe_vertical { - border: 2px dashed $o-brand-primary; + border: 2px dashed $o-brand-odoo; border-left: none; border-right: none; @@ -312,7 +312,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { height: 0; background: transparent; text-align: center; - @include o-transition(opacity, 400ms, linear); + transition: opacity 400ms linear 0s; &.o_keypress { opacity: 0; } @@ -341,7 +341,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { border-radius: 0; font-weight: normal; - @include o-transition(all, 400ms); + transition: all 400ms ease 0s; color: $o-we-color-text-light; background-color: $o-we-color-light; &:hover { @@ -367,7 +367,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { } } &.oe_snippet_parent > i { - @include scaleX(-1); + transform: scaleX(-1); font-size: 12px; } @@ -397,19 +397,19 @@ html[lang] > body.editor_enable [data-oe-translation-state] { height: 2px; background-color: $o-we-color-text-light; @include o-position-absolute(46%); - @include o-transition(all, 0.3s); + transition: all 0.3s ease 0s; } &:before { right: 9px; - @include rotate(45deg); + transform: rotate(45deg); } &:after { right: 5px; - @include rotate(-45deg); + transform: rotate(-45deg); } } // Open menu - &.open .btn { + &.show .btn { background-color: $o-we-color-light; &:before, &:after { width: 9px; @@ -419,7 +419,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { transform: translateX(5px) rotate(-45deg); } &:after { - @include rotate(45deg); + transform: rotate(45deg); } } @@ -430,99 +430,97 @@ html[lang] > body.editor_enable [data-oe-translation-state] { border: 1px solid $o-we-color-dark; border-radius: 0; background-color: $o-we-color-light; - a { + + .dropdown-item { + position: relative; color: $o-we-color-text-light; font-weight: normal; font-size: 12px; padding: 5px 35px 5px 20px; - } - > li { - position: relative; &:hover { background-color: fade-out($o-we-color-dark, 0.5); - > a { - color: white; - background: transparent; - cursor: pointer; - } - > .dropdown-menu { - display: block; - left: 100%; - top: 0; - - &.o_open_to_left { - left: auto; - right: 100%; - } - } - } - &.dropdown-submenu:before { - @include o-position-absolute($top: 10px, $right: 10px); - @include o-caret-right(3px); - border-left-color: $o-we-color-text-light; - } - &.divider { - background-color: $o-we-color-divider; - margin: 0 8px; + color: white; + background: transparent; + cursor: pointer; } - &.active > a { + &.active { color: white; background-color: fade-out($o-we-color-dark, 0.5); &:before { @include o-position-absolute($top: 5px, $left: 5px); content: "\f00c"; font-family: "FontAwesome"; - color: $o-brand-optional; + color: $o-brand-primary; } } - &.dropdown-header { - color: white; - font-weight: bold; - font-size: 12px; - margin-top: 2px; - &:hover { - background-color: initial; - } + > i { + width: 16px; + margin-right: 8px; + } + } - &.o_main_header { - padding-left: 8px; - } - &.o_parent_editor_header { - color: wheat; - font-weight: 400; - font-size: 10px; - margin: 7px 0 4px 4px; - &::before { - content: "\f148"; - @include o-position-absolute($top: 2px, $left: 8px); - font-family: FontAwesome; - @include scaleX(-1); - } - ~ li:not(.dropdown-header) { - a { - font-size: 11px; - padding: 4px 35px 4px 20px; - opacity: 0.8; - &:hover { - opacity: 1; - } - } - } - } + .dropdown-submenu { + position: relative; + + &::before { + @include o-position-absolute($top: 10px, $right: 10px); + @include o-caret-right(3px); + border-left-color: $o-we-color-text-light; } - &.separator { + &:hover > .dropdown-menu { display: block; - margin: 4px 35px 4px 20px; - height: 1px; - background: rgba($o-we-color-text-light, 0.1); + left: 100%; + top: 0; + + &.o_open_to_left { + left: auto; + right: 100%; + } } + } - > a > i { - width: 16px; - margin-right: 8px; + .dropdown-divider { + display: block; + height: 1px; + background: rgba($o-we-color-text-light, 0.1); + margin: 0 8px; + } + + .dropdown-header { + color: white; + font-weight: bold; + font-size: 12px; + margin-top: 2px; + + &:hover { + background-color: initial; + } + + &.o_main_header { + padding-left: 8px; + } + &.o_parent_editor_header { + color: wheat; + font-weight: 400; + font-size: 10px; + margin: 7px 0 4px 4px; + &::before { + content: "\f148"; + @include o-position-absolute($top: 2px, $left: 8px); + font-family: FontAwesome; + transform: scaleX(-1); + } + ~ .dropdown-item { + font-size: 11px; + padding: 4px 35px 4px 20px; + opacity: 0.8; + &:hover { + opacity: 1; + } + } } } } @@ -548,7 +546,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { position: relative; border: 0 solid $o-we-handles-accent-color; - @include o-transition(background, 300ms); + transition: background 300ms ease 0s; &:hover, &.o_active { background-color: rgba($o-we-handles-accent-color, 0.2); @@ -711,11 +709,11 @@ html[lang] > body.editor_enable [data-oe-translation-state] { height: $o-navbar-height; border: none; border-radius: 0; - padding: $padding-base-vertical $padding-base-horizontal; // force this because of themes + padding: $btn-padding-y $btn-padding-y; // force this because of themes background-color: $o-we-color-dark; color: $o-we-color-text-normal; border-top: 2px solid transparent; - @include o-transition(all, 0.3s); + transition: all 0.3s ease 0s; > .fa { color: $o-we-color-text-normal; @@ -749,7 +747,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { > .btn-group { margin-top: -2px; - &.open, .btn-group.open { + &.show, .btn-group.show { .dropdown-toggle { border-top: 2px solid white; background-color: $o-we-color-darker; @@ -767,7 +765,9 @@ html[lang] > body.editor_enable [data-oe-translation-state] { border-radius: 0; background-color: $o-we-color-darker; color: $o-we-color-text-normal; - > li > a { + white-space: normal; + + .dropdown-item { width: 100%; color: $o-we-color-text-light; @@ -831,7 +831,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] { .note-popover .popover, .note-editor { .dropdown-menu { - > li > a { + .dropdown-item { > i { visibility: hidden; } @@ -910,14 +910,13 @@ table.colorpicker { &:focus, &:active, &:focus:active { outline: none; } - } - &:hover, &.active { - > a { + &.active { + background-color: $o-we-tab-active-bg!important; color: white; } } - &.active > a { - background-color: $o-we-tab-active-bg!important; + &:hover > a { + color: white; } } } @@ -972,7 +971,7 @@ table.colorpicker { &.selected:after { content: "\f00c"; font-family: "FontAwesome"; - color: $brand-success; + color: theme-color('success'); } &[data-event="foreColor"] { @@ -1030,7 +1029,7 @@ body.editor_enable { } &.editor_has_snippets { - @include o-transition(padding-left, 400ms, $o-we-md-ease); + transition: padding-left 400ms $o-we-md-ease 0s; padding-left: $o-we-sidebar-width!important; #oe_snippets { @@ -1069,11 +1068,11 @@ body.editor_enable { @keyframes fadeInDownSmall { 0% { opacity: 0; - @include translate(0, -5px); + transform: translate(0, -5px); } 100% { opacity: 1; - @include translate(0, 0); + transform: translate(0, 0); } } @keyframes fadeInOut { @@ -1091,14 +1090,14 @@ body.editor_enable { } } @keyframes inputHighlighter { - from { background: $o-brand-optional; } + from { background: $o-brand-primary; } to { width: 0; background: transparent; } } // INPUTS .o_switch { - @include o-flex-display; - @include o-align-items(center); + display: flex; + align-items: center; font-weight: normal; cursor: pointer; @@ -1113,7 +1112,7 @@ body.editor_enable { width: $o-we-switch-size * 1.8; margin-right: 0.5em; display: inline-block; - @include transition(all 0.3s $o-we-md-ease); + transition: all 0.3s $o-we-md-ease; &:after { content: ""; @@ -1124,14 +1123,14 @@ body.editor_enable { margin-top: 0.1ex; margin-left: 0.1ex; border-radius: 100rem; - @include transition(all 0.3s $o-we-md-ease); + transition: all 0.3s $o-we-md-ease; box-shadow: 0 1px 1px darken($o-we-switch-inactive-color,35%), inset 0 0 0 1px lighten($o-we-switch-inactive-color,10%); } } &:checked + span { box-shadow: none; - @include o-linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%)); + background-image: linear-gradient(0deg, $o-we-color-success, darken($o-we-color-success, 10%)); &:after { margin-left: ($o-we-switch-size*1.8 - $o-we-switch-size) + 0.1; @@ -1142,7 +1141,7 @@ body.editor_enable { > input { &:not(:checked) + span { box-shadow: none; - @include o-linear-gradient(0deg, lighten($brand-danger, 5%), darken($brand-danger, 5%)); + background-image: linear-gradient(0deg, lighten(theme-color('danger'), 5%), darken(theme-color('danger'), 5%)); } } } @@ -1174,7 +1173,7 @@ body.editor_enable { font-weight: normal; @include o-position-absolute($top: 10px, $left: 5px); pointer-events: none; - @include transition(0.2s ease all); + transition: 0.2s ease all; } /* active state */ @@ -1193,7 +1192,7 @@ body.editor_enable { bottom: 1px; @include o-position-absolute; background: #5264AE; - @include transition(0.2s ease all); + transition: 0.2s ease all; } .bar:before { left: 50%; @@ -1218,28 +1217,28 @@ body.editor_enable { /* active state */ input:focus ~ .highlight { - @include animation(inputHighlighter 0.3s ease); + animation: inputHighlighter 0.3s ease; } } // DRAG&DROP ANIMATIONS .oe_snippet_body { opacity: 0; - @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards); + animation: fadeInDownSmall 700ms forwards; } // ACE EDITOR .o_ace_view_editor { background: $o-we-ace-color; color: white; - @include o-flex-display; - @include o-flex-flow(column, nowrap); + display: flex; + flex-flow: column nowrap; opacity: 0.97; .o_ace_view_editor_title { - @include o-flex(0, 0, auto); - @include o-flex-display; - @include o-align-items(center); + flex: 0 0 auto; + display: flex; + align-items: center; padding: $grid-gutter-width/4; > .o_ace_type_switcher > button::after { @@ -1248,27 +1247,27 @@ body.editor_enable { } > * { - @include o-flex(0, 0, auto); + flex: 0 0 auto; margin: 0 $grid-gutter-width/4; &.o_include_option { - @include o-flex-display; - @include o-align-items(center); + display: flex; + align-items: center; font-size: 11px; - > .o_checkbox { + > .custom-control { margin-right: $grid-gutter-width/4; } } &.o_res_list { - @include o-flex(1, 1, auto); + flex: 1 1 auto; min-width: 60px; } } } #ace-view-id { - @include o-flex(0, 0, auto); + flex: 0 0 auto; padding: $grid-gutter-width/4 $grid-gutter-width/2; background-color: lighten($o-we-ace-color, 10%); } @@ -1277,13 +1276,13 @@ body.editor_enable { content: ""; z-index: 1000; display: block; - background-color: $brand-danger; + background-color: theme-color('danger'); opacity: 0.5; pointer-events: none; } height: 70%; // in case flex is not supported - @include o-flex(1, 1, auto); + flex: 1 1 auto; .ace_gutter { cursor: ew-resize; @@ -1334,7 +1333,7 @@ body.editor_enable { body .modal { // SELECT MEDIA .o_select_media_dialog { - width: 80%; + max-width: 80%; .modal-body { .nav-tabs .active > a[href="#editor-media-icon"] { @@ -1342,9 +1341,6 @@ body .modal { } li.search { - ul.pager li:last-child{ - margin-left: 2px; - } .form-group { position: relative; margin: 0 10px 0 0; @@ -1358,9 +1354,11 @@ body .modal { } } - .well { - border-color: $gray-lighter; + .card { + border-color: gray('200'); border-top-width: 0; + border-top-left-radius: 0; + border-top-right-radius: 0; } .o_existing_attachment_cell { @@ -1383,7 +1381,7 @@ body .modal { .o_image { border: $o-border-image solid transparent; cursor: pointer; - @include o-transition(opacity, 400ms); + transition: opacity 400ms ease 0s; &.o_webimage { width: 100%; @@ -1396,7 +1394,7 @@ body .modal { } } &.o_selected .o_image { - border-color: $o-brand-primary; + border-color: $o-brand-odoo; box-shadow: 0px 0px 2px 2px $o-brand-secondary; } &:hover .o_existing_attachment_remove { @@ -1424,7 +1422,7 @@ body .modal { } #editor-media-image, #editor-media-document { - .well { + .card { label { margin: auto 10px; } @@ -1436,13 +1434,13 @@ body .modal { } // VIDEO TAB - #editor-media-video .well { + #editor-media-video .card { padding: 0; - @include o-flex-display; - @include o-flex-flow(row, wrap); + display: flex; + flex-flow: row wrap; .o_video_dialog_form { - @include o-flex(1, 1, auto); + flex: 1 1 auto; min-width: 0; padding: 20px; @@ -1464,10 +1462,10 @@ body .modal { display: none; } } - &.has-error > .o_validate_feedback > .fa-exclamation-triangle { + &.o_has_error > .o_validate_feedback > .fa-exclamation-triangle { display: block; } - &.has-success > .o_validate_feedback > .fa-check { + &.o_has_success > .o_validate_feedback > .fa-check { display: block; } } @@ -1475,10 +1473,10 @@ body .modal { #video-preview { position: relative; - @include o-flex(1, 0, 50%); - @include o-flex-display; - @include o-flex-flow(column, nowrap); - @include o-justify-content(center); + flex: 1 0 50%; + display: flex; + flex-flow: column nowrap; + justify-content: center; @include o-we-preview-box(0 19px); border: none; @@ -1493,7 +1491,7 @@ body .modal { max-height: 100%; &.alert { - @include o-animation(fadeInDownSmall, 700ms, $fill-mode: forwards); + animation: fadeInDownSmall 700ms forwards; margin: 0 auto; } } @@ -1523,7 +1521,7 @@ body .modal { border: 1px dotted #888787; background-image: url(/web/image); background-position: center center; - @include o-background-size(cover); + background-size: cover; } .el { @include o-position-absolute(10px, 0, 10px, 0); @@ -1566,7 +1564,7 @@ body .modal { } } .o_bg_img_opt_ui_info { - @include animation(fadeInOut 2s ease forwards); + animation: fadeInOut 2s ease forwards; @include o-position-absolute($bottom: 1px, $right: 0); display: block; padding: 3px 13px; @@ -1587,7 +1585,7 @@ body .modal { display: block; width: 100%; height: 1px; - background: fade-out(lighten($o-brand-optional, 30%), 0.5); + background: fade-out(lighten($o-brand-primary, 30%), 0.5); pointer-events: none; &.grid-2 { top: 66.66% @@ -1616,7 +1614,7 @@ body .modal { box-shadow: 0 0 1px #333; pointer-events: none; &.o_with_transition { - @include o-transition(all, 0.2s); + transition: all 0.2s ease 0s; } &:before { pointer-events: none; @@ -1631,7 +1629,7 @@ body .modal { border-radius: 100em; opacity: 1; box-shadow: 0 0 0 100em rgba(0, 0, 0, 0.33); - @include o-transition(opacity, 0.2s); + transition: opacity 0.2s ease 0s; } } } @@ -1661,7 +1659,7 @@ body .modal { } } .o_link_dialog_preview { - border-left: 1px solid $gray-lighter; + border-left: 1px solid gray('200'); } } // Crop Dialog @@ -1669,13 +1667,13 @@ body .modal { height: 350px; .cropper-point { background-color: white; - @include o-transition(all, 400ms, $o-we-md-ease); - @include o-transform(scale(1.5, 1.5)); + transition: all 400ms $o-we-md-ease 0s; + transform: scale(1.5, 1.5); border-radius: 10px; box-shadow: 0 0 1px 1px rgba(23, 23, 23, 0.5); opacity: 1; &:hover { - @include o-transform(scale(2.5, 2.5)); + transform: scale(2.5, 2.5); } } .cropper-line { 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 2d36b3e9756..203b27fc886 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -27,7 +27,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default; // Editor $o-we-dropzone-size: 40px !default; $o-we-dropzone-border-width: 2px !default; -$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default; +$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; $o-we-handle-edge-size: 1px !default; $o-we-handle-border-width: 1px !default; @@ -49,7 +49,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; padding: $padding; border-top: 1px solid black; border-bottom: 1px solid white; - @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); + background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); color: $color-text; } @@ -62,12 +62,12 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; } -// ============ Preservetion mixins =============== +// ============ Preservation mixins =============== // Used to preserve web_editor and website UI from themes customizations @mixin o-w-preserve-base { font-family: $o-we-font-family; - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-divider; .text-muted { @@ -78,7 +78,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-headings { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: $o-we-font-family; - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-dark; font-weight: bold; } @@ -86,14 +86,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: $o-brand-optional; + color: $o-brand-primary; &:focus, &:active, &:focus:active { outline: none!important; } } - .label { + .badge { &:hover a, a { color: #fff; } @@ -105,21 +105,21 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857143; + line-height: 1.5; border: 1px solid $o-we-color-text-light; color: #555; background-color: #fff; border-radius: 0; } - .has-error { - .form-control { - border-color: $state-danger-text; + .was-validated { + .form-control:invalid { + border-color: $danger; } } select.form-control { - @include o-appearance(none); + appearance: none; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4='); background-position: 100% 65%; background-repeat: no-repeat; @@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-tabs { .nav-tabs { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); > li { > a { - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-light; &:hover { - border-color: $gray-lighter; + border-color: gray('200'); } } @@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &, &:hover, &:focus { color: $o-we-color-normal; background-color: $o-we-color-paper; - border-color: $gray-lighter; + border-color: gray('200'); border-bottom-color: transparent; } } @@ -169,61 +169,57 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-btn { .btn:not(.o_btn_preview) { - border-width: 1px; border-radius: 0; font-weight: normal; - @include button-size(6px, 12px, 14px, 1.42857143, 0); + @include button-size(.375rem, .75rem, 1rem, 1.5, 0); &.btn-primary { - @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); + @include button-variant($o-brand-primary, $o-brand-primary); } - &.btn-default { - @include button-variant($o-we-color-normal, white, $o-we-color-text-light); + &.btn-secondary { + @include button-variant($o-we-color-paper, $o-we-color-paper); + color: $o-brand-primary; } &.btn-link { - @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-we-color-paper, $o-we-color-paper); + color: $o-brand-primary; } &.btn-success { - @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); + @include button-variant($o-we-color-success, $o-we-color-success); } &.btn-info { - @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%)); + @include button-variant($o-we-color-info, $o-we-color-info); } &.btn-warning { - @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%)); + @include button-variant($o-we-color-warning, $o-we-color-warning); } &.btn-danger { - @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%)); + @include button-variant($o-we-color-danger, $o-we-color-danger); } &.btn-lg { - @include button-size(10px, 16px, 18px, 1.3333333, 0); + @include button-size(.5rem, 1rem, 1.25rem, 1.5, 0); } &.btn-sm { - @include button-size(5px, 10px, 12px, 1.5, 0); - } - &.btn-xs { - @include button-size(1px, 5px, 12px, 1.5, 0); + @include button-size(.25rem, .5rem, .875rem, 1.5, 0); } } } -@mixin o-w-preserve-wells { - .well { +@mixin o-w-preserve-cards { + .card { padding: 19px; margin-bottom: 20px; background-color: $o-we-color-paper; - border: 1px solid darken($o-we-color-paper,5%); + border: 1px solid darken($o-we-color-paper, 5%); border-radius: 0; - @include box-shadow(none); + box-shadow: none; } } // Edition colors // Colors -$gray-white: #fff !default; - $color-alpha: #1cc1a9 !default; $color-beta: #875A7B !default; $color-gamma: #BA3C3D !default; @@ -238,24 +234,6 @@ $color-white-25: rgba(white, 0.25) !default; $color-white-50: rgba(white, 0.5) !default; $color-white-75: rgba(white, 0.75) !default; -@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $content-color: $color) { - .bg-#{$name} { - background-color: $color; - color: $complementary; - .text-muted { - color: rgba($complementary, 0.4); - } - } - body .text-#{$name} { // body to make the rules more important that bg-* ones - color: $content-color; - } -} -@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { - .btn-#{$name} { - @include button-variant($complementary, $color, $border-color); - } -} - // Translations $o-we-content-to-translate-color: rgb(255, 255, 90) !default; $o-we-translated-content-color: rgb(120, 215, 110) !default; diff --git a/addons/web_editor/static/src/xml/ace.xml b/addons/web_editor/static/src/xml/ace.xml index de713540a67..1d59a94c827 100644 --- a/addons/web_editor/static/src/xml/ace.xml +++ b/addons/web_editor/static/src/xml/ace.xml @@ -5,36 +5,42 @@ <div class="o_ace_view_editor"> <div class="form-inline o_ace_view_editor_title"> <div class="btn-group o_ace_type_switcher"> - <button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown">XML (HTML)</button> - <ul class="dropdown-menu" role="menu"> - <li><a role="menuitem" href="#" class="o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a></li> - <li><a role="menuitem" href="#" class="o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a></li> - </ul> + <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">XML (HTML)</button> + <div class="dropdown-menu" role="menu"> + <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="xml">XML (HTML)</a> + <a role="menuitem" href="#" class="dropdown-item o_ace_type_switcher_choice" data-type="scss">SCSS (CSS)</a> + </div> </div> <select id="ace-view-list" class="o_res_list"/> - <select id="ace-scss-list" class="o_res_list hidden"/> + <select id="ace-scss-list" class="o_res_list d-none"/> <label class="o_include_option oe_include_bundles"> - <div class="o_checkbox"> - <input type="checkbox" class="js_include_bundles" t-att-checked="widget.options.includeBundles ? 'checked' : undefined"/><span/> + <div class="custom-control custom-checkbox"> + <input type="checkbox" id="o_ace_view_editor_include_bundle" + class="custom-control-input js_include_bundles" + t-att-checked="widget.options.includeBundles ? 'checked' : undefined"/> + <label for="o_ace_view_editor_include_bundle" + class="custom-control-label">Include Asset Bundles</label> </div> - Include Asset Bundles </label> - <label class="o_include_option o_include_all_scss hidden"> - <div class="o_checkbox"> - <input type="checkbox" class="js_include_all_scss" t-att-checked="widget.options.includeAllSCSS ? 'checked' : undefined"/><span/> + <label class="o_include_option o_include_all_scss d-none"> + <div class="custom-control custom-checkbox"> + <input type="checkbox" id="o_ace_view_editor_include_all_scss" + class="custom-control-input js_include_all_scss" + t-att-checked="widget.options.includeAllSCSS ? 'checked' : undefined"/> + <label for="o_ace_view_editor_include_all_scss" + class="custom-control-label">Include All SCSS Files</label> </div> - Include All SCSS Files </label> <div class="o_button_section"> - <button data-action="save" type="submit" class="btn btn-sm btn-primary">Save</button> - <button data-action="close" type="button" class="btn btn-sm btn-default">Close</button> + <button data-action="save" type="submit" class="btn btn-primary">Save</button> + <button data-action="close" type="button" class="btn btn-secondary">Close</button> </div> </div> <div id="ace-view-id"> <span/> - <div class="pull-right"> - <button data-action="reset" type="button" class="btn btn-xs btn-danger"><i class="fa fa-undo"/> Reset</button> - <button data-action="format" type="button" class="btn btn-xs btn-link">Format</button> + <div class="float-right"> + <button data-action="reset" type="button" class="btn btn-sm btn-danger"><i class="fa fa-undo"/> Reset</button> + <button data-action="format" type="button" class="btn btn-sm btn-link">Format</button> </div> </div> <div id="ace-view-editor"/> diff --git a/addons/web_editor/static/src/xml/backend.xml b/addons/web_editor/static/src/xml/backend.xml index 40be4f05d07..146d96fe1e5 100644 --- a/addons/web_editor/static/src/xml/backend.xml +++ b/addons/web_editor/static/src/xml/backend.xml @@ -8,8 +8,8 @@ </t> <t t-name="web_editor.FieldTextHtml.button.translate"> - <div class="btn-group pull-right"> - <button t-if="widget.field.translate" class="o_field_translate btn btn-default btn-sm btn-small" style="height: 24px; padding: 1px 17px 0px 5px" aria-label="Translate" title="Translate"> + <div class="btn-group float-right"> + <button t-if="widget.field.translate" class="o_field_translate btn btn-secondary" style="height: 24px; padding: 1px 17px 0px 5px" aria-label="Translate" title="Translate"> <span class="fa fa-language fa-lg oe_input_icon"/> </button> </div> diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index 3c3085bfe79..7bac85692e2 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -9,8 +9,8 @@ <div id="web_editor-top-edit"> <div id="web_editor-toolbars"/> <form class="navbar-form text-muted"> - <button type="button" class="btn btn-sm btn-default" data-action="cancel"><i class="fa fa-times"/> Discard</button> - <button type="button" class="btn btn-sm btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button> + <button type="button" class="btn btn-secondary" data-action="cancel"><i class="fa fa-times"/> Discard</button> + <button type="button" class="btn btn-primary" data-action="save"><i class="fa fa-floppy-o"/> Save</button> </form> </div> </t> @@ -29,16 +29,16 @@ <!--=================--> <!-- Alt Dialog (allows to change alt and title of page images) --> - <form t-name="web_editor.dialog.alt" action="#" class="form-horizontal"> - <div class="form-group"> - <label class="col-sm-3 control-label" for="alt">Description (alt tag)</label> - <div class="col-sm-8"> + <form t-name="web_editor.dialog.alt" action="#"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="alt">Description (alt tag)</label> + <div class="col-md-8"> <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/> </div> </div> - <div class="form-group"> - <label class="col-sm-3 control-label" for="title">Tooltip</label> - <div class="col-sm-8"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="title">Tooltip</label> + <div class="col-md-8"> <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/> </div> </div> @@ -47,30 +47,26 @@ <!-- Media Dialog (allows to choose an img/pictogram/video) --> <div t-name="web_editor.dialog.media"> <ul class="nav nav-tabs" role="tablist"> - <li class="active"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-att-class="widget.noImages ? 'hidden' : ''">Image</a></li> - <li><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-att-class="widget.noDocuments ? 'hidden' : ''">Document</a></li> - <li><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-att-class="widget.noIcons ? 'hidden' : ''">Pictogram</a></li> - <li><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-att-class="widget.noVideos ? 'hidden' : ''">Video</a></li> - <li class="search pull-right"> - <ul class="pager mb0 mt0"> - <li class="previous"> - <a role="button" class="btn btn-default disabled" href="#"><i class="fa fa-angle-left"/> Previous</a> - </li> - <li class="next"> - <a role="button" class="btn btn-default disabled" href="#">Next <i class="fa fa-angle-right"/></a> - </li> - </ul> - </li> - <li class="search pull-right"> + <li class="nav-item"><a role="tab" href="#editor-media-image" aria-controls="editor-media-image" data-toggle="tab" t-attf-class="nav-link#{widget.noImages ? ' d-none' : ''}">Image</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-document" aria-controls="editor-media-document" data-toggle="tab" t-attf-class="nav-link#{widget.noDocuments ? ' d-none' : ''}">Document</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-icon" aria-controls="editor-media-icon" data-toggle="tab" t-attf-class="nav-link#{widget.noIcons ? ' d-none' : ''}">Pictogram</a></li> + <li class="nav-item"><a role="tab" href="#editor-media-video" aria-controls="editor-media-video" data-toggle="tab" t-attf-class="nav-link#{widget.noVideos ? ' d-none' : ''}">Video</a></li> + <li class="nav-item ml-auto search"> <div class="form-group"> <input class="form-control" id="icon-search" type="search"/> <span class="fa fa-search" title="Search" role="img" aria-label="Search"/> </div> </li> + <li class="nav-item search"> + <div class="btn-group"> + <a role="button" class="btn btn-secondary disabled previous" href="#"><i class="fa fa-angle-left"/> Previous</a> + <a role="button" class="btn btn-secondary disabled next" href="#">Next <i class="fa fa-angle-right"/></a> + </div> + </li> </ul> <!-- Tab panes --> <div class="tab-content"> - <div role="tabpanel" class="tab-pane fade in active" id="editor-media-image"/> + <div role="tabpanel" class="tab-pane fade" id="editor-media-image"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-document"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-icon"/> <div role="tabpanel" class="tab-pane fade" id="editor-media-video"/> @@ -88,37 +84,36 @@ <input type="hidden" name="filters" t-att-value="widget.firstFilters.join('_')"/> <input t-if="widget.options.res_id" type="hidden" name="res_id" t-att-value="widget.options.res_id"/> <input t-if="widget.options.res_model" type="hidden" name="res_model" t-att-value="widget.options.res_model"/> - <div class="well"> - <div class="form-group pull-left"> - <input type="file" class="hidden" name="upload" t-att-accept="widget.accept" multiple="multiple"/> - <input type="hidden" name="disable_optimization" value=""/> - <div class="btn-group"> - <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button> - <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" type="button"> - <span class="caret"/> - <span class="sr-only">Alternate Upload</span> - </button> - <ul class="dropdown-menu" role="menu"> - <li> - <a role="menuitem" class="o_upload_image_button_no_optimization">Upload image without optimization</a> - </li> - </ul> - </div> - </div> - <div> - <span class="text-muted">— or —</span> - <label for="imageurl">Add an image URL</label> - <div class="form-group btn-group"> - <input type="text" class="form-control url pull-left" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/> - <button type="button" class="btn btn-default o_upload_image_url_button" disabled="disabled">Add</button> + <div class="card"> + <div class="card-body"> + <div class="form-inline"> + <input type="file" class="d-none" name="upload" t-att-accept="widget.accept" multiple="multiple"/> + <input type="hidden" name="disable_optimization" value=""/> + <div class="btn-group"> + <button class="btn btn-primary o_upload_image_button" type="button">Upload an image</button> + <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" type="button"> + <span class="sr-only">Alternate Upload</span> + </button> + <div class="dropdown-menu" role="menu"> + <a role="menuitem" class="dropdown-item o_upload_image_button_no_optimization">Upload image without optimization</a> + </div> + </div> + <span class="text-muted">— or —</span> + <label for="imageurl">Add an image URL</label> + <div class="input-group"> + <input type="text" class="form-control url" id="imageurl" name="url" placeholder="https://www.odoo.com/logo.png" style="width: 250px;"/> + <div class="input-group-append"> + <button type="button" class="btn btn-secondary o_upload_image_url_button" disabled="disabled">Add</button> + </div> + </div> </div> </div> </div> - <div class="help-block"/> + <div class="form-text"/> <div class="existing-attachments"> <t t-call="web_editor.dialog.image.existing"/> </div> - <iframe class="hidden" name="fileframe"/> + <iframe class="d-none" name="fileframe"/> </form> </t> <t t-name="web_editor.dialog.image.existing"> @@ -129,9 +124,9 @@ <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title">Select a Picture</h3> </header> - <main class="modal-body has-error"> + <main class="modal-body o_has_error"> <div class="existing-attachments"/> - <div class="help-block"/> + <div class="form-text"/> </main> <footer class="modal-footer"> <a data-dismiss="modal" href="#" aria-label="Discard">Discard</a> @@ -143,7 +138,7 @@ <t t-name="web_editor.dialog.image.existing.content"> <div class="existing-attachments"> <div class="row mt16" t-as="row" t-foreach="rows"> - <div class="col-sm-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row"> + <div class="col-2 o_existing_attachment_cell" t-as="attachment" t-foreach="row"> <i t-if="attachment.res_model === 'ir.ui.view'" class="fa fa-times o_existing_attachment_remove" title="This file is a public view attachment" role="img" aria-label="This file is a public view attachment" t-att-data-id="attachment.id"/> <i t-else="" class="fa fa-times o_existing_attachment_remove" title="This file is attached to the current record" role="img" aria-label="This file is attached to the current record" t-att-data-id="attachment.id"/> <div class="o_attachment_border" t-att-style="attachment.res_model === 'ir.ui.view' ? null : 'border: 1px solid #5cb85c;'"><div t-att-data-src="attachment.src" t-att-data-url="attachment.url" role="img" t-att-aria-label="attachment.name" t-att-title="attachment.name" t-att-data-id="attachment.id" t-att-data-mimetype="attachment.mimetype" class="o_image o_image_loading"/></div> @@ -152,7 +147,7 @@ </div> </t> <t t-name="web_editor.dialog.image.existing.error"> - <div class="help-block"> + <div class="form-text"> <p>The image could not be deleted because it is used in the following pages or views:</p> <ul t-as="view" t-foreach="views"> @@ -187,18 +182,18 @@ </t> <!-- Video choosing part of the Media Dialog --> - <t t-name="web_editor.dialog.video"> - <form action="#" class="form-inline well"> + <div t-name="web_editor.dialog.video" class="card"> + <form action="#" class="form-inline card-body"> <div class="o_video_dialog_form"> <div class="form-group" id="o_video_form_group"> <label class="mt8" for="o_video_text">Video code <small class="text-muted">(URL or Embed)</small></label> <textarea class="form-control url" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/> - <label class="control-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label> + <label class="col-form-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label> </div> <div class="text-right"> <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Instagram</i></b>, <b><i>Vine.co</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small> </div> - <div class="o_video_dialog_options hidden mt48"> + <div class="o_video_dialog_options d-none mt48"> <small class="text-muted">Options</small> <ul class="list-group"> <li class="list-group-item o_yt_option o_vim_option o_dm_option"> @@ -226,35 +221,35 @@ </div> </div> <div id="video-preview"> - <div class="o_video_dialog_preview_text small mt16 mb8 hidden">Preview</div> + <div class="o_video_dialog_preview_text small mt16 mb8 d-none">Preview</div> <div class="media_iframe_video"> <div class="media_iframe_video_size"/> <iframe class="o_video_dialog_iframe" allowfullscreen="allowfullscreen" frameborder="0" src=""/> </div> </div> </form> - </t> + </div> <!-- Link Dialog (allows to choose a style and content for a link on the page) --> <div t-name="web_editor.dialog.link" class="o_link_dialog"> <div class="row"> - <form class="col-md-8 form-horizontal"> - <div t-attf-class="form-group#{widget.needLabel ? '' : ' hidden'}"> - <label class="control-label col-sm-3" for="o_link_dialog_label_input">Link Label</label> - <div class="col-sm-9"> + <form class="col-lg-8"> + <div t-attf-class="form-group row#{widget.needLabel ? '' : ' d-none'}"> + <label class="col-form-label col-md-3" for="o_link_dialog_label_input">Link Label</label> + <div class="col-md-9"> <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="o_link_dialog_url_input">URL or Email</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="o_link_dialog_url_input">URL or Email</label> + <div class="col-md-9"> <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3">Size</label> - <div class="col-sm-9"> - <select name="link_style_size" class="form-control col-sm-3 link-style"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Size</label> + <div class="col-md-9"> + <select name="link_style_size" class="form-control col-md-3 link-style"> <option value="xs">Extra Small</option> <option value="sm">Small</option> <option value="" selected="selected">Medium</option> @@ -262,26 +257,26 @@ </select> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3">Color</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Color</label> + <div class="col-md-9"> <div class="o_link_dialog_color"> <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color=""> <span>L</span> - <input class="hidden link-style" name="link_style_color" type="radio" value=""/> + <input class="d-none link-style" name="link_style_color" type="radio" value=""/> <i class="fa"/> </label> - <t t-foreach="['primary', 'default', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color"> + <t t-foreach="['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'alpha', 'beta', 'gamma', 'delta', 'epsilon']" t-as="color"> <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}"> - <input type="radio" name="link_style_color" class="hidden link-style" t-att-value="color"/> + <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/> <i class="fa"/> </label> </t> </div> </div> </div> - <div class="form-group"> - <div class="col-sm-offset-3 col-sm-9"> + <div class="form-group row"> + <div class="offset-md-3 col-md-9"> <label class="o_switch"> <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/> <span/> @@ -290,7 +285,7 @@ </div> </div> </form> - <div class="col-md-4 o_link_dialog_preview"> + <div class="col-lg-4 o_link_dialog_preview"> <div class="form-group text-center"> <label>Preview</label> <div style="overflow: auto; max-width: 100%; max-height: 200px;"> @@ -313,31 +308,31 @@ </div> <t t-else=""> <div class="o_crop_area"> - <img class="img img-responsive o_cropper_image" t-att-src="widget.imageData.originalSrc"/> + <img class="img img-fluid o_cropper_image" t-att-src="widget.imageData.originalSrc"/> </div> <div class="o_crop_options text-center mt16"> <div class="btn-group" title="Aspect Ratio" data-toggle="buttons"> <t t-foreach="widget.aspectRatioList" t-as="ratio"> <t t-set="is_active" t-value="ratio[1] === widget.imageData.aspectRatio"/> - <a href="#" t-attf-class="btn btn-default#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]"> + <a href="#" t-attf-class="btn btn-secondary#{is_active and ' active' or ''}" data-event="ratio" t-att-data-label="ratio[1]" t-att-data-value="ratio[2]"> <t t-esc="ratio[0]"/> </a> </t> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></a> - <a href="#" class="btn btn-default" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></a> + <a href="#" class="btn btn-secondary" title="Zoom In" data-event="zoom" data-value="0.1"><i class="fa fa-search-plus"/></a> + <a href="#" class="btn btn-secondary" title="Zoom Out" data-event="zoom" data-value="-0.1"><i class="fa fa-search-minus"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></a> - <a href="#" class="btn btn-default" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></a> + <a href="#" class="btn btn-secondary" title="Rotate Left" data-event="rotate" data-value="-45"><i class="fa fa-rotate-left"/></a> + <a href="#" class="btn btn-secondary" title="Rotate Right" data-event="rotate" data-value="45"><i class="fa fa-rotate-right"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></a> - <a href="#" class="btn btn-default" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></a> + <a href="#" class="btn btn-secondary" title="Flip Horizontal" data-event="flip" data-value="horizontal" data-x="1"><i class="fa fa-arrows-h"/></a> + <a href="#" class="btn btn-secondary" title="Flip Vertical" data-event="flip" data-value="vertical" data-y="1"><i class="fa fa-arrows-v"/></a> </div> <div class="btn-group" role="group"> - <a href="#" class="btn btn-default" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</a> + <a href="#" class="btn btn-secondary" title="Reset Image" data-event="reset"><i class="fa fa-refresh"/> Reset Image</a> </div> </div> </t> @@ -367,10 +362,10 @@ </div> </div> <div class="o_bg_img_opt" data-value="contain"> - <form class="form-horizontal"> - <div class="form-group"> - <label class="col-sm-2 control-label" for="repeatInput">Repeat</label> - <div class="col-sm-5"> + <form> + <div class="form-group row"> + <label class="col-md-2 col-form-label" for="repeatInput">Repeat</label> + <div class="col-md-5"> <div class="checkbox"> <label> <input type="checkbox" id="o_bg_img_opt_contain_repeat"/> @@ -380,25 +375,29 @@ </div> </form> </div> - <form class="o_bg_img_opt form-horizontal" data-value="custom"> + <form class="o_bg_img_opt" data-value="custom"> <fieldset> <legend>Background size</legend> <p>Sets the width and height of the background image in percent of the parent element.</p> - <div class="form-group"> - <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label> - <div class="col-sm-5"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_x">Background width</label> + <div class="col-md-5"> <div class="input-group"> - <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/> - <div class="input-group-addon">%</div> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> - <div class="form-group"> - <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label> - <div class="col-sm-5"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_y">Background height</label> + <div class="col-md-5"> <div class="input-group"> - <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/> - <div class="input-group-addon">%</div> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> @@ -406,21 +405,25 @@ <fieldset> <legend>Background position</legend> <p>Set the starting position of the background image.</p> - <div class="form-group"> - <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label> - <div class="col-sm-5"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label> + <div class="col-md-5"> <div class="input-group"> - <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/> - <div class="input-group-addon">%</div> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> - <div class="form-group"> - <label class="col-sm-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label> - <div class="col-sm-5"> + <div class="form-group row"> + <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_y">Vertical</label> + <div class="col-md-5"> <div class="input-group"> - <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/> - <div class="input-group-addon">%</div> + <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/> + <div class="input-group-append"> + <div class="input-group-text">%</div> + </div> </div> </div> </div> diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index dcd245f9a3e..93fc31c7de9 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -10,14 +10,14 @@ </div> <div class="oe_overlay_options" contentEditable="false"> <div class="btn-group"> - <a role="button" href="#" class="btn btn-default btn-sm oe_snippet_parent" title="Select Parent Container" aria-label="Select Parent Container"><i class="fa fa-lg fa-level-up"/></a> - <div class="dropdown oe_options hidden btn-group"> - <a role="button" href="#" data-toggle="dropdown" class="btn btn-primary btn-sm" title="Customize">Customize</a> - <ul class="dropdown-menu" role="menu"/> + <a role="button" href="#" class="btn btn-secondary oe_snippet_parent" title="Select Parent Container" aria-label="Select Parent Container"><i class="fa fa-lg fa-level-up"/></a> + <div class="dropdown oe_options d-none btn-group"> + <a role="button" href="#" data-toggle="dropdown" class="btn btn-primary" title="Customize">Customize</a> + <div class="dropdown-menu" role="menu"/> </div> - <a role="button" href="#" class="btn btn-default btn-sm oe_snippet_move" title="Drag to Move" aria-label="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a> - <a role="button" href="#" class="btn btn-default btn-sm oe_snippet_clone" title="Duplicate Container" aria-label="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a> - <a role="button" href="#" class="btn btn-default btn-sm oe_snippet_remove" title="Remove Block" aria-label="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a> + <a role="button" href="#" class="btn btn-secondary oe_snippet_move" title="Drag to Move" aria-label="Drag to Move"><i class="fa fa-arrows ml4 mr4"></i></a> + <a role="button" href="#" class="btn btn-secondary oe_snippet_clone" title="Duplicate Container" aria-label="Duplicate Container"><i class="fa fa-files-o ml4 mr4"></i></a> + <a role="button" href="#" class="btn btn-secondary oe_snippet_remove" title="Remove Block" aria-label="Remove Block"><i class="fa fa-trash-o ml4 mr4"></i></a> </div> </div> </div> @@ -32,7 +32,7 @@ </div> </div> <div class="o_colorpicker_sections"> - <ul class="nav nav-pills o_colorpicker_section_menu"/> + <ul class="nav nav-pills flex-column o_colorpicker_section_menu"/> <div class="tab-content o_colorpicker_section_tabs"/> </div> </div> @@ -40,10 +40,10 @@ <!-- t-field options --> <t t-name="web_editor.many2one.button"> <div class="btn-group"> - <a role="button" href="#" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a> - <ul class="dropdown-menu contact_menu" role="menu"> - <li><a role="menuitem"><input href="#" type="email" placeholder="Search"/></a></li> - </ul> + <a role="button" href="#" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" title="Search Contact" aria-label="Search Contact"><i class="fa fa-search"></i></a> + <div class="dropdown-menu contact_menu" role="menu"> + <a role="menuitem" class="dropdown-item"><input href="#" type="email" placeholder="Search"/></a> + </div> </div> </t> |