diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-07-27 12:42:10 +0200 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-07-27 12:42:10 +0200 |
| commit | 2b3017974bc7cd4b3a74f83c956224cfe4e5a918 (patch) | |
| tree | ff6aab8dc6bfa7afbe9ef714ca157ebc0185d2fd /addons/website/static/src | |
| parent | 8ed8b46f6434a2a3adea69e0134317e30bf9b936 (diff) | |
| parent | 519594e9cab9a6362ef7c3e911605e4507a0a008 (diff) | |
[MERGE] *: migrate Bootstrap 3.3.7 to 4.1.3
See sub-commits for details.
task-49280
Closes https://github.com/odoo/odoo/pull/25045
Diffstat (limited to 'addons/website/static/src')
24 files changed, 285 insertions, 345 deletions
diff --git a/addons/website/static/src/js/backend/dashboard.js b/addons/website/static/src/js/backend/dashboard.js index 09881b4ec1b..9ece194ab1e 100644 --- a/addons/website/static/src/js/backend/dashboard.js +++ b/addons/website/static/src/js/backend/dashboard.js @@ -200,7 +200,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, { $analytics_components.empty(); // 1. Authorize component - var $analytics_auth = $('<div>').addClass('col-md-12'); + var $analytics_auth = $('<div>').addClass('col-lg-12'); window.onOriginError = function () { $analytics_components.find('.js_unauthorized_message').remove(); self.display_unauthorized_message($analytics_components, 'not_initialized'); @@ -350,7 +350,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, { $analytics_users.appendTo($analytics_components); // 3. View Selector - var $analytics_view_selector = $('<div>').addClass('col-md-12 o_properties_selection'); + var $analytics_view_selector = $('<div>').addClass('col-lg-12 o_properties_selection'); var viewSelector = new gapi.analytics.ViewSelector({ container: $analytics_view_selector[0], }); @@ -364,7 +364,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, { } else if (this.date_range === 'year') { start_date = '365daysAgo'; } - var $analytics_chart_2 = $('<div>').addClass('col-md-6 col-xs-12'); + var $analytics_chart_2 = $('<div>').addClass('col-lg-6 col-12'); var breakdownChart = new gapi.analytics.googleCharts.DataChart({ query: { 'dimensions': 'ga:date', @@ -384,7 +384,7 @@ var Dashboard = AbstractAction.extend(ControlPanelMixin, { $analytics_chart_2.appendTo($analytics_components); // 5. Chart table - var $analytics_chart_1 = $('<div>').addClass('col-md-6 col-xs-12'); + var $analytics_chart_1 = $('<div>').addClass('col-lg-6 col-12'); var mainChart = new gapi.analytics.googleCharts.DataChart({ query: { 'dimensions': 'ga:medium', diff --git a/addons/website/static/src/js/content/menu.js b/addons/website/static/src/js/content/menu.js index 5f8c337802f..ba6cc107000 100644 --- a/addons/website/static/src/js/content/menu.js +++ b/addons/website/static/src/js/content/menu.js @@ -2,6 +2,7 @@ odoo.define('website.content.menu', function (require) { 'use strict'; var config = require('web.config'); +var dom = require('web.dom'); var sAnimation = require('website.content.snippets.animation'); sAnimation.registry.affixMenu = sAnimation.Class.extend({ @@ -66,7 +67,7 @@ sAnimation.registry.affixMenu = sAnimation.Class.extend({ this.$headerClone.toggleClass('affixed', wOffset > (hOffset + 300)); // Reset opened menus - this.$dropdowns.removeClass('open'); + this.$dropdowns.removeClass('show'); this.$navbarCollapses.removeClass('in').attr('aria-expanded', false); }, }); @@ -81,19 +82,13 @@ sAnimation.registry.affixMenu = sAnimation.Class.extend({ * the backend in enterprise... */ sAnimation.registry.autohideMenu = sAnimation.Class.extend({ - selector: 'header:not(.o_no_autohide_menu) > .navbar > *', + selector: 'header:not(.o_no_autohide_menu) #top_menu', /** * @override */ start: function () { - var $allItems = this.$('#top_menu').children(); - this.$unfoldableItems = $allItems.filter('.divider, .divider ~ li'); - this.$items = $allItems.not(this.$unfoldableItems); - - $(window).on('resize', _.debounce(this._adapt.bind(this), 500)); - this._adapt(); - + dom.initAutoMoreMenu(this.$el, {unfoldable: '.divider, .divider ~ li'}); return this._super.apply(this, arguments); }, /** @@ -101,65 +96,7 @@ sAnimation.registry.autohideMenu = sAnimation.Class.extend({ */ destroy: function () { this._super.apply(this, arguments); - this._restore(); - }, - - //-------------------------------------------------------------------------- - // Private - //-------------------------------------------------------------------------- - - /** - * @private - */ - _adapt: function () { - this._restore(); - if (config.device.isMobile) { - return; - } - - this.maxWidth = this.$el.width(); - var $unfoldable = this.$unfoldableItems.add(this.$el.children().not('.navbar-collapse')); - this.maxWidth -= _.reduce($unfoldable, function (sum, el) { - return sum + computeFloatOuterWidthWithMargins(el); - }, 0); - - var nbItems = this.$items.length; - var menuItemsWidth = _.reduce(this.$items, function (sum, el) { - return sum + computeFloatOuterWidthWithMargins(el); - }, 0); - - if (menuItemsWidth > this.maxWidth) { - this.$extraItemsToggle = $('<li/>', {class: 'o_extra_menu_items'}); - this.$extraItemsToggle.append($('<a/>', {href: '#', class: 'dropdown-toggle', 'data-toggle': 'dropdown'}) - .append($('<i/>', {class: 'fa fa-plus'}))); - this.$extraItemsToggle.append($('<ul/>', {class: 'dropdown-menu'})); - this.$extraItemsToggle.insertAfter(this.$items.last()); - - menuItemsWidth += computeFloatOuterWidthWithMargins(this.$extraItemsToggle[0]); - do { - menuItemsWidth -= computeFloatOuterWidthWithMargins(this.$items.eq(--nbItems)[0]); - } while (menuItemsWidth > this.maxWidth); - - var $extraItems = this.$items.slice(nbItems).detach(); - this.$extraItemsToggle.children('ul').append($extraItems); - this.$extraItemsToggle.toggleClass('active', $extraItems.hasClass('active')); - } - - function computeFloatOuterWidthWithMargins(el) { - var rect = el.getBoundingClientRect(); - var style = window.getComputedStyle(el); - return rect.right - rect.left + parseFloat(style.marginLeft) + parseFloat(style.marginRight); - } - }, - /** - * @private - */ - _restore: function () { - if (this.$extraItemsToggle) { - this.$extraItemsToggle.find("> ul > *").insertBefore(this.$extraItemsToggle); - this.$extraItemsToggle.remove(); - delete this.$extraItemsToggle; - } + dom.destroyAutoMoreMenu(this.$el); }, }); @@ -179,7 +116,7 @@ sAnimation.registry.menuDirection = sAnimation.Class.extend({ * @override */ start: function () { - this.defaultAlignment = this.$el.is('.navbar-right') ? 'right' : 'left'; + this.defaultAlignment = this.$el.is('.ml-auto, .ml-auto ~ *') ? 'right' : 'left'; return this._super.apply(this, arguments); }, diff --git a/addons/website/static/src/js/content/snippets.animation.js b/addons/website/static/src/js/content/snippets.animation.js index 602556c03cc..5a31ff943db 100644 --- a/addons/website/static/src/js/content/snippets.animation.js +++ b/addons/website/static/src/js/content/snippets.animation.js @@ -771,7 +771,7 @@ registry.gallerySlider = Animation.extend({ function hide() { $lis.each(function (i) { - $(this).toggleClass('hidden', !(i >= page*nbPerPage && i < (page+1)*nbPerPage)); + $(this).toggleClass('d-none', !(i >= page*nbPerPage && i < (page+1)*nbPerPage)); }); if (self.editableMode) { // do not remove DOM in edit mode return; @@ -863,7 +863,7 @@ registry.socialShare = Animation.extend({ var self = this; setTimeout(function () { if (!$(".popover:hover").length) { - $(self).popover("destroy"); + $(self).popover('dispose'); } }, 200); }); diff --git a/addons/website/static/src/js/editor/rte.summernote.js b/addons/website/static/src/js/editor/rte.summernote.js index 95dc0cfc321..36cadca7a8d 100644 --- a/addons/website/static/src/js/editor/rte.summernote.js +++ b/addons/website/static/src/js/editor/rte.summernote.js @@ -54,6 +54,6 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) { fn_boutton_update.call(this, $container, oStyle); $container.find('button[data-event="transform"]') .toggleClass('active', $(oStyle.image).is('[style*="transform"]')) - .toggleClass('hidden', !$(oStyle.image).is('img')); + .toggleClass('d-none', !$(oStyle.image).is('img')); }; }); diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 0e8080299b5..14f1b6f0a4f 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -188,7 +188,7 @@ options.registry.carousel = options.Class.extend({ var cycle = this.$inner.find('.item').length; var $active = this.$inner.find('.item.active, .item.prev, .item.next').first(); var index = $active.index(); - this.$('.carousel-control, .carousel-indicators').removeClass('hidden'); + this.$('.carousel-control, .carousel-indicators').removeClass('d-none'); this.$indicators.append('<li data-target="#' + this.id + '" data-slide-to="' + cycle + '"></li>'); var $clone = this.$('.item:first').clone(true); $clone.removeClass('active').insertAfter($active); @@ -223,7 +223,7 @@ options.registry.carousel = options.Class.extend({ self._rebindEvents(); self.remove_process = false; if (cycle === 1) { - self.$target.find('.carousel-control, .carousel-indicators').addClass('hidden'); + self.$target.find('.carousel-control, .carousel-indicators').addClass('d-none'); } }); _.defer(function () { @@ -248,8 +248,8 @@ options.registry.carousel = options.Class.extend({ * @override */ _setActive: function () { - this.$el.find('li[data-interval]').removeClass('active') - .filter('li[data-interval=' + this.$target.attr('data-interval') + ']').addClass('active'); + this.$el.find('[data-interval]').removeClass('active') + .filter('[data-interval=' + this.$target.attr('data-interval') + ']').addClass('active'); }, /** * Rebinds carousel events on indicators. @@ -279,7 +279,7 @@ options.registry.sizing_x = options.registry.sizing.extend({ // Below condition is added to remove offset of target element only // and not its children to avoid design alteration of a container/block. if (options.isCurrent) { - var _class = this.$target.attr('class').replace(/\s*(col-lg-offset-|col-md-offset-)([0-9-]+)/g, ''); + var _class = this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-)([0-9-]+)/g, ''); this.$target.attr('class', _class); } }, @@ -296,8 +296,8 @@ options.registry.sizing_x = options.registry.sizing.extend({ var gridE = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; var gridW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]; this.grid = { - e: [_.map(gridE, function (v) { return 'col-md-' + v; }), _.map(gridE, function (v) { return width/12*v; }), 'width'], - w: [_.map(gridW, function (v) { return 'col-md-offset-' + v; }), _.map(gridW, function (v) { return width/12*v; }), 'margin-left'], + e: [_.map(gridE, function (v) { return 'col-lg-' + v; }), _.map(gridE, function (v) { return width/12*v; }), 'width'], + w: [_.map(gridW, function (v) { return 'offset-lg-' + v; }), _.map(gridW, function (v) { return width/12*v; }), 'margin-left'], }; return this.grid; }, @@ -307,9 +307,9 @@ options.registry.sizing_x = options.registry.sizing.extend({ _onResize: function (compass, beginClass, current) { if (compass === 'w') { // don't change the right border position when we change the offset (replace col size) - var beginCol = Number(beginClass.match(/col-md-([0-9]+)|$/)[1] || 0); - var beginOffset = Number(beginClass.match(/col-md-offset-([0-9-]+)|$/)[1] || beginClass.match(/col-lg-offset-([0-9-]+)|$/)[1] || 0); - var offset = Number(this.grid.w[0][current].match(/col-md-offset-([0-9-]+)|$/)[1] || 0); + var beginCol = Number(beginClass.match(/col-lg-([0-9]+)|$/)[1] || 0); + var beginOffset = Number(beginClass.match(/offset-lg-([0-9-]+)|$/)[1] || beginClass.match(/offset-xl-([0-9-]+)|$/)[1] || 0); + var offset = Number(this.grid.w[0][current].match(/offset-lg-([0-9-]+)|$/)[1] || 0); if (offset < 0) { offset = 0; } @@ -318,11 +318,11 @@ options.registry.sizing_x = options.registry.sizing.extend({ colSize = 1; offset = beginOffset + beginCol - 1; } - this.$target.attr('class',this.$target.attr('class').replace(/\s*(col-lg-offset-|col-md-offset-|col-md-)([0-9-]+)/g, '')); + this.$target.attr('class',this.$target.attr('class').replace(/\s*(offset-xl-|offset-lg-|col-lg-)([0-9-]+)/g, '')); - this.$target.addClass('col-md-' + (colSize > 12 ? 12 : colSize)); + this.$target.addClass('col-lg-' + (colSize > 12 ? 12 : colSize)); if (offset > 0) { - this.$target.addClass('col-md-offset-' + offset); + this.$target.addClass('offset-lg-' + offset); } } this._super.apply(this, arguments); @@ -340,7 +340,7 @@ options.registry.layout_column = options.Class.extend({ * * @see this.selectClass for parameters */ - selectCount: function (previewMode, value, $li) { + selectCount: function (previewMode, value, $opt) { this._updateColumnCount(value - this.$target.children().length); }, @@ -387,14 +387,14 @@ options.registry.layout_column = options.Class.extend({ var colsLength = $columns.length; var colSize = Math.floor(12 / colsLength) || 1; var colOffset = Math.floor((12 - colSize * colsLength) / 2); - var colClass = 'col-md-' + colSize; + var colClass = 'col-lg-' + colSize; _.each($columns, function (column) { var $column = $(column); - $column.attr('class', $column.attr('class').replace(/\bcol-md-(offset-)?\d+\b/g, '')); + $column.attr('class', $column.attr('class').replace(/\bcol-lg-(offset-)?\d+\b/g, '')); $column.addClass(colClass); }); if (colOffset) { - $columns.first().addClass('col-md-offset-' + colOffset); + $columns.first().addClass('offset-lg-' + colOffset); } }, /** @@ -402,8 +402,8 @@ options.registry.layout_column = options.Class.extend({ */ _setActive: function () { this._super.apply(this, arguments); - this.$el.find('li[data-select-count]').removeClass('active') - .filter('li[data-select-count=' + this.$target.children().length + ']').addClass('active'); + this.$el.find('[data-select-count]').removeClass('active') + .filter('[data-select-count=' + this.$target.children().length + ']').addClass('active'); }, }); @@ -555,7 +555,7 @@ var FacebookPageDialog = weWidgets.Dialog.extend({ this.trigger_up('animation_stop_demand', { $target: this.$previewPage, }); - this.$('.facebook_page_warning').toggleClass('hidden', toggle); + this.$('.facebook_page_warning').toggleClass('d-none', toggle); this.$footer.find('.btn-primary').prop('disabled', !toggle); }, @@ -758,7 +758,7 @@ options.registry.collapse = options.Class.extend({ */ onClone: function () { this.$target.find('[data-toggle="collapse"]').removeAttr('data-target').removeData('target'); - this.$target.find('.panel-collapse').removeAttr('id'); + this.$target.find('.collapse').removeAttr('id'); this._createIDs(); }, /** @@ -766,9 +766,9 @@ options.registry.collapse = options.Class.extend({ */ onMove: function () { this._createIDs(); - var $panel = this.$target.find('.panel-collapse').removeData('bs.collapse'); + var $panel = this.$target.find('.collapse').removeData('bs.collapse'); if ($panel.attr('aria-expanded') === 'true') { - $panel.closest('.panel-group').find('.panel-collapse[aria-expanded="true"]') + $panel.closest('.accordion').find('.collapse[aria-expanded="true"]') .filter(function () {return this !== $panel[0];}) .collapse('hide') .one('hidden.bs.collapse', function () { @@ -791,7 +791,7 @@ options.registry.collapse = options.Class.extend({ var $tab = this.$target.find('[data-toggle="collapse"]'); // link to the parent group - var $tablist = this.$target.closest('.panel-group'); + var $tablist = this.$target.closest('.accordion'); var tablist_id = $tablist.attr('id'); if (!tablist_id) { tablist_id = 'myCollapse' + time; @@ -878,7 +878,7 @@ options.registry.gallery = options.Class.extend({ dialog.on('save', this, function (attachments) { for (var i = 0 ; i < attachments.length; i++) { $('<img/>', { - class: 'img img-responsive', + class: 'img img-fluid', src: attachments[i].src, 'data-index': ++index, }).appendTo($container); @@ -907,7 +907,7 @@ options.registry.gallery = options.Class.extend({ var imgs = this._getImages(); var $row = $('<div/>', {class: 'row'}); var columns = this._getColumns(); - var colClass = 'col-md-' + (12 / columns); + var colClass = 'col-lg-' + (12 / columns); var $container = this._replaceContent($row); _.each(imgs, function (img, index) { @@ -934,7 +934,7 @@ options.registry.gallery = options.Class.extend({ masonry: function () { var imgs = this._getImages(); var columns = this._getColumns(); - var colClass = 'col-md-' + (12 / columns); + var colClass = 'col-lg-' + (12 / columns); var cols = []; var $row = $('<div/>', {class: 'row'}); @@ -968,7 +968,7 @@ options.registry.gallery = options.Class.extend({ * * @see this.selectClass for parameters */ - mode: function (previewMode, value, $li) { + mode: function (previewMode, value, $opt) { this.$target.css('height', ''); this[value](); this.$target @@ -985,9 +985,9 @@ options.registry.gallery = options.Class.extend({ this._replaceContent($row); _.each(imgs, function (img) { - var wrapClass = 'col-md-3'; + var wrapClass = 'col-lg-3'; if (img.width >= img.height * 2 || img.width > 600) { - wrapClass = 'col-md-6'; + wrapClass = 'col-lg-6'; } var $wrap = $('<div/>', {class: wrapClass}).append(img); $row.append($wrap); @@ -1017,7 +1017,7 @@ options.registry.gallery = options.Class.extend({ * Displays the images with a "slideshow" layout. */ slideshow: function () { - var imgStyle = this.$el.find('li.active[data-styling]').data('styling') || ''; + var imgStyle = this.$el.find('.active[data-styling]').data('styling') || ''; var urls = _.map(this._getImages(), function (img) { return $(img).attr('src'); }); @@ -1050,8 +1050,8 @@ options.registry.gallery = options.Class.extend({ * @see this.selectClass for parameters */ styling: function (previewMode, value) { - var classes = _.map(this.$el.find('li[data-styling]'), function (li) { - return $(li).data('styling'); + var classes = _.map(this.$el.find('[data-styling]'), function (el) { + return $(el).data('styling'); }).join(' '); this.$('img').removeClass(classes).addClass(value); }, @@ -1163,8 +1163,8 @@ options.registry.gallery = options.Class.extend({ .removeClass('active') .filter('[data-styling="' + classes.join('"], [data-styling="') + '"]').addClass('active'); - this.$el.find('li[data-interval]').removeClass('active') - .filter('li[data-interval='+this.$target.find('.carousel:first').attr('data-interval')+']') + this.$el.find('[data-interval]').removeClass('active') + .filter('[data-interval='+this.$target.find('.carousel:first').attr('data-interval')+']') .addClass('active'); var interval = this.$target.find('.carousel:first').attr('data-interval'); diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js index 1ff050b1b97..d051a62c46a 100644 --- a/addons/website/static/src/js/menu/content.js +++ b/addons/website/static/src/js/menu/content.js @@ -49,7 +49,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ buttons.push({ text: _t("Go To Page"), icon: 'fa-globe', - classes: 'btn-link pull-right', + classes: 'btn-link float-right', click: function (e) { window.location.href = '/' + self.page.url; }, @@ -58,7 +58,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ buttons.push({ text: _t("Delete Page"), icon: 'fa-trash', - classes: 'btn-link pull-right', + classes: 'btn-link float-right', click: function (e) { _deletePage.call(this, self.page_id, options.fromPageManagement); }, @@ -105,9 +105,9 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ var defs = [this._super.apply(this, arguments)]; - this.$('.ask_for_redirect').addClass('hidden'); - this.$('.redirect_type').addClass('hidden'); - this.$('.warn_about_call').addClass('hidden'); + this.$('.ask_for_redirect').addClass('d-none'); + this.$('.redirect_type').addClass('d-none'); + this.$('.warn_about_call').addClass('d-none'); defs.push(this._getPageDependencies(this.page_id, context) .then(function (dependencies) { @@ -192,12 +192,12 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ var url = this.$('#page_url').val(); var $date_publish = this.$("#date_publish"); - $date_publish.closest(".form-group").removeClass('has-error'); + $date_publish.closest(".form-group").removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); var date_publish = $date_publish.val(); if (date_publish !== "") { date_publish = this._parse_date(date_publish); if (!date_publish) { - $date_publish.closest(".form-group").addClass('has-error'); + $date_publish.closest(".form-group").addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return; } } @@ -326,7 +326,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ */ _onUrlChanged: function () { var url = this.$('input#page_url').val(); - this.$('.ask_for_redirect').toggleClass('hidden', url === this.page.url); + this.$('.ask_for_redirect').toggleClass('d-none', url === this.page.url); }, /** * @private @@ -338,7 +338,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ // check only for url and not key var ext = '.' + this.page.name.split('.').pop(); if (ext in this.supportedMimetype && ext !== '.html') { - this.$('.warn_about_call').toggleClass('hidden', name === this.page.name); + this.$('.warn_about_call').toggleClass('d-none', name === this.page.name); } }, /** @@ -346,7 +346,7 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ */ _onCreateRedirectChanged: function () { var createRedirect = this.$('input#create_redirect').prop('checked'); - this.$('.redirect_type').toggleClass('hidden', !createRedirect); + this.$('.redirect_type').toggleClass('d-none', !createRedirect); }, }); @@ -374,7 +374,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({ this.$('.o_link_dialog_preview').remove(); this.$('input[name="is_new_window"], .link-style').closest('.form-group').remove(); this.$modal.find('.modal-lg').removeClass('modal-lg') - .find('.col-md-8').removeClass('col-md-8').addClass('col-xs-12'); + .find('.col-lg-8').removeClass('col-lg-8').addClass('col-12'); // Adapt URL label this.$('label[for="o_link_dialog_label_input"]').text(_t("Menu Label")); @@ -394,7 +394,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({ save: function () { var $e = this.$('#o_link_dialog_label_input'); if (!$e.val() || !$e[0].checkValidity()) { - $e.closest('.form-group').addClass('has-error'); + $e.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid') $e.focus(); return; } diff --git a/addons/website/static/src/js/menu/customize.js b/addons/website/static/src/js/menu/customize.js index 2d525ac903e..0eac78cc90f 100644 --- a/addons/website/static/src/js/menu/customize.js +++ b/addons/website/static/src/js/menu/customize.js @@ -12,22 +12,21 @@ var qweb = core.qweb; var CustomizeMenu = Widget.extend({ xmlDependencies: ['/web_editor/static/src/xml/editor.xml'], events: { - 'click > ul a[data-view-id]': '_onCustomizeOptionClick', + 'show.bs.dropdown': '_onDropdownShow', + 'click .dropdown-item[data-view-id]': '_onCustomizeOptionClick', }, /** * @override */ start: function () { - var viewName = $(document.documentElement).data('view-xmlid'); - if (!viewName) { + this.viewName = $(document.documentElement).data('view-xmlid'); + if (!this.viewName) { _.defer(this.destroy.bind(this)); } - if (this.$el.is('.open')) { - this._loadCustomizeOptions(viewName); - } else { - this.$el.one('mousedown', '> a.dropdown-toggle', this._loadCustomizeOptions.bind(this, viewName)); + if (this.$el.is('.show')) { + this._loadCustomizeOptions(); } }, @@ -61,15 +60,19 @@ var CustomizeMenu = Widget.extend({ * the current page and shows them as switchable elements in the menu. * * @private - * @param {string} viewName - xml id * @return {Deferred} */ - _loadCustomizeOptions: function (viewName) { - var $menu = this.$el.children('ul'); + _loadCustomizeOptions: function () { + if (this.__customizeOptionsLoaded) { + return $.when(); + } + this.__customizeOptionsLoaded = true; + + var $menu = this.$el.children('.dropdown-menu'); return this._rpc({ route: '/website/get_switchable_related_views', params: { - key: viewName, + key: this.viewName, }, }).then(function (result) { var currentGroup = ''; @@ -78,11 +81,10 @@ var CustomizeMenu = Widget.extend({ currentGroup = item.inherit_id[1]; $menu.append('<li class="dropdown-header">' + currentGroup + '</li>'); } - var $li = $('<li/>', {role: 'presentation'}) - .append($('<a/>', {href: '#', 'data-view-id': item.id, role: 'menuitem'}) - .append(qweb.render('web_editor.components.switch', {id: 'switch-' + item.id, label: item.name}))); - $li.find('input').prop('checked', !!item.active); - $menu.append($li); + var $a = $('<a/>', {href: '#', class: 'dropdown-item', 'data-view-id': item.id, role: 'menuitem'}) + .append(qweb.render('web_editor.components.switch', {id: 'switch-' + item.id, label: item.name})); + $a.find('input').prop('checked', !!item.active); + $menu.append($a); }); }); }, @@ -103,6 +105,12 @@ var CustomizeMenu = Widget.extend({ var viewID = parseInt($(ev.currentTarget).data('view-id'), 10); this._doCustomize(viewID); }, + /** + * @private + */ + _onDropdownShow: function () { + this._loadCustomizeOptions(); + }, }); var AceEditorMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ diff --git a/addons/website/static/src/js/menu/navbar.js b/addons/website/static/src/js/menu/navbar.js index 9a25d50c3ed..ed8cf1ffa31 100644 --- a/addons/website/static/src/js/menu/navbar.js +++ b/addons/website/static/src/js/menu/navbar.js @@ -11,7 +11,7 @@ var websiteNavbarRegistry = new rootWidget.RootWidgetRegistry(); var WebsiteNavbar = rootWidget.RootWidget.extend({ events: _.extend({}, rootWidget.RootWidget.prototype.events || {}, { 'click [data-action]': '_onActionMenuClick', - 'mouseover > ul > li.dropdown:not(.open)': '_onMenuHovered', + 'mouseover > ul > li.dropdown:not(.show)': '_onMenuHovered', 'click .o_mobile_menu_toggle': '_onMobileMenuToggleClick', }), custom_events: _.extend({}, rootWidget.RootWidget.prototype.custom_events || {}, { @@ -121,10 +121,10 @@ var WebsiteNavbar = rootWidget.RootWidget.extend({ * @param {Event} ev */ _onMenuHovered: function (ev) { - var $opened = this.$('> ul > li.dropdown.open'); + var $opened = this.$('> ul > li.dropdown.show'); if ($opened.length) { - $opened.removeClass('open'); - $(ev.currentTarget).find('.dropdown-toggle').mousedown().focus().mouseup().click(); + $opened.find('.dropdown-toggle').dropdown('toggle'); + $(ev.currentTarget).find('.dropdown-toggle').dropdown('toggle'); } }, /** diff --git a/addons/website/static/src/js/menu/new_content.js b/addons/website/static/src/js/menu/new_content.js index c577858f3eb..314ecec51b4 100644 --- a/addons/website/static/src/js/menu/new_content.js +++ b/addons/website/static/src/js/menu/new_content.js @@ -46,7 +46,7 @@ var NewContentMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ $group.removeClass('mb0'); var $add = $('<div/>', {'class': 'form-group mb0'}) - .append($('<span/>', {'class': 'col-sm-offset-3 col-sm-9 text-left'}) + .append($('<span/>', {'class': 'offset-md-3 col-md-9 text-left'}) .append(qweb.render('web_editor.components.switch', {id: 'switch_addTo_menu', label: _t("Add page in menu")}))); $add.find('input').prop('checked', true); $group.after($add); diff --git a/addons/website/static/src/js/menu/seo.js b/addons/website/static/src/js/menu/seo.js index 71d4297cd89..180bd561df1 100644 --- a/addons/website/static/src/js/menu/seo.js +++ b/addons/website/static/src/js/menu/seo.js @@ -18,16 +18,16 @@ var WORD_SEPARATORS_REGEX = '([\\u2000-\\u206F\\u2E00-\\u2E7F\'!"#\\$%&\\(\\)\\* function analyzeKeyword(htmlPage, keyword) { return htmlPage.isInTitle(keyword) ? { - title: 'label label-success', + title: 'badge badge-success', description: "This keyword is used in the page title", } : htmlPage.isInDescription(keyword) ? { - title: 'label label-primary', + title: 'badge badge-primary', description: "This keyword is used in the page description", } : htmlPage.isInBody(keyword) ? { - title: 'label label-info', + title: 'badge badge-info', description: "This keyword is used in the page content." } : { - title: 'label label-default', + title: 'badge badge-secondary', description: "This keyword is not used anywhere on the page." }; } diff --git a/addons/website/static/src/js/tours/rte.js b/addons/website/static/src/js/tours/rte.js index 7ce549a0346..46fbbff3fce 100644 --- a/addons/website/static/src/js/tours/rte.js +++ b/addons/website/static/src/js/tours/rte.js @@ -72,7 +72,7 @@ tour.register('rte_translator', { trigger: 'html:not(:has(#wrap p span)) .o_menu_systray a[data-action="translate"]', }, { content: "close modal", - trigger: '.modal-footer .btn-default', + trigger: '.modal-footer .btn-secondary', }, { content: "check if translation is activate", trigger: '[data-oe-translation-id]', diff --git a/addons/website/static/src/scss/website.backend.scss b/addons/website/static/src/scss/website.backend.scss index 373af1ec647..16dbe353ed2 100644 --- a/addons/website/static/src/scss/website.backend.scss +++ b/addons/website/static/src/scss/website.backend.scss @@ -15,12 +15,12 @@ h2, h4 { text-transform: uppercase; margin-top: 0; - color: $o-brand-primary; + color: $o-brand-odoo; } h4 { margin: 0 0 0 8px; } - .col-md-7, .col-xs-12 { + .col-lg-7, .col-12 { padding: 15px; .js_field_selection { @@ -75,7 +75,7 @@ float: left; g.nvd3.nv-wrap.nv-lineChart { - @include translate(45, 30); // FIXME was marked important before scss convertion + transform: translate(45, 30); // FIXME was marked important before scss convertion } g.nv-x.nv-axis .tick > line { @@ -86,10 +86,10 @@ .nv-series-0 { stroke-width: 3 !important; .nv-point { - stroke: $o-brand-optional; + stroke: $o-brand-primary; stroke-opacity: 1 !important; &.hover { - stroke: darken($o-brand-optional, 10%); + stroke: darken($o-brand-primary, 10%); } } } @@ -107,14 +107,14 @@ .nvtooltip { border-radius: 0; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3); .legend-color-guide > div { border: none; } tr:first-child .legend-color-guide > div { - background-color: $o-brand-optional !important; + background-color: $o-brand-primary !important; } tr:last-child .legend-color-guide > div { background-color: darken($o-brand-lightsecondary, 10%) !important; @@ -129,11 +129,11 @@ flex-flow: row wrap; justify-content: flex-start; > .o_inner_box { - @media (max-width: $screen-sm-min) { + @include media-breakpoint-down(sm) { flex: 1 1 200px; display: block !important; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(md) { flex: 0 0 16.6%; } } @@ -148,15 +148,15 @@ white-space: nowrap; cursor: pointer; color: white; - background-color: $o-brand-optional; + background-color: $o-brand-primary; &:hover { - background-color: darken($o-brand-optional, 10%); + background-color: darken($o-brand-primary, 10%); } &.o_primary { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; &:hover { - background-color: darken($o-brand-primary, 10%); + background-color: darken($o-brand-odoo, 10%); } } .o_highlight { @@ -167,7 +167,7 @@ .o_graph_sales { .o_legend0 { - background-color: $o-brand-optional; + background-color: $o-brand-primary; } .o_legend1 { background-color: $o-main-color-muted; @@ -209,8 +209,8 @@ .o_properties_selection { - @media (min-width: $screen-md-min) { - @include o-flex-display; + @include media-breakpoint-up(lg) { + display: flex; } margin-top: 10px; @@ -226,7 +226,7 @@ float: right; top: -60px; right: 10px; - border: 1px solid $gray-lighter; + border: 1px solid gray('200'); font-weight: 300; white-space: nowrap; padding: .5em 1.5em; @@ -249,17 +249,17 @@ @keyframes increase { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } @keyframes decrease { 10% { - background-color: lighten($o-brand-optional, 30%); - border-color: $o-brand-optional; - color: $o-brand-optional; + background-color: lighten($o-brand-primary, 30%); + border-color: $o-brand-primary; + color: $o-brand-primary; } } } diff --git a/addons/website/static/src/scss/website.edit_mode.scss b/addons/website/static/src/scss/website.edit_mode.scss index c315e493e08..2480ed74b26 100644 --- a/addons/website/static/src/scss/website.edit_mode.scss +++ b/addons/website/static/src/scss/website.edit_mode.scss @@ -5,8 +5,8 @@ font-family: Roboto, $font-family-sans-serif; .o_tooltip_container { - @include o-inline-flex-display; - @include o-align-items(center); + display: inline-flex; + align-items: center; > .o_tooltip { @include o-position-absolute; @@ -22,7 +22,7 @@ .o_editable { &:not(:empty), &[data-oe-type] { &:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover { - box-shadow: $o-brand-primary 0 0 5px 2px inset; + box-shadow: $o-brand-odoo 0 0 5px 2px inset; } } &:focus, &[data-oe-type] { @@ -33,7 +33,7 @@ display: inline-block; } .btn, &.btn { - @include user-select(auto); + user-select: auto; cursor: text!important; } /* Summernote not Support for placeholder text https://github.com/summernote/summernote/issues/581 */ @@ -44,14 +44,14 @@ &.oe_structure.oe_empty, &[data-oe-type=html] { &:empty { - border: 2px dashed $gray-lighter-darker; + border: 2px dashed gray('400'); margin: 20px; padding: 112px 0px; text-align: center; &:before { content: attr(data-editor-message); font-size: 20px; - color: $gray-lighter-darker; + color: gray('400'); } } > p:empty:only-child { @@ -65,7 +65,7 @@ /* Prevent the text contents of draggable elements from being selectable. */ [draggable] { - @include user-select(none); + user-select: none; } .oe_editable:focus, @@ -105,7 +105,7 @@ table.editorbar-panel { margin: 0 5px; } } - .col-sm-2 > * { + .col-md-2 > * { line-height: 2em; } } diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 37f979f7e34..fa35b6dbc58 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -112,11 +112,11 @@ table.table_desc tr td { overflow: auto; } -.s_comparisons .panel .list-group-item:not(.active) { +.s_comparisons .card .list-group-item:not(.active) { color: #666; } .s_comparisons { - .panel small { + .card small { color: inherit; } .text-muted { @@ -124,13 +124,13 @@ table.table_desc tr td { } } -.s_faq_collapse .container .panel { +.s_faq_collapse .container .card { background-color: inherit; border : 1px solid rgba(0, 0, 0, 0.15); - .panel-body { + .card-body { border-top: none; - border-bottom-left-radius: ($panel-border-radius - 1); - border-bottom-right-radius: ($panel-border-radius - 1); + border-bottom-left-radius: ($card-border-radius - 1); + border-bottom-right-radius: ($card-border-radius - 1); } } @@ -149,37 +149,37 @@ table.table_desc tr td { &.o_margin_s { margin-bottom: 4px; } - &.o_margin_s.pull-right { + &.o_margin_s.float-right { margin-left: 8px; } - &.o_margin_s.pull-left { + &.o_margin_s.float-left { margin-right: 8px; } &.o_margin_m { margin-bottom: 8px; } - &.o_margin_m.pull-right { + &.o_margin_m.float-right { margin-left: 12px; } - &.o_margin_m.pull-left { + &.o_margin_m.float-left { margin-right: 12px; } &.o_margin_l { margin-bottom: 12px; } - &.o_margin_l.pull-right { + &.o_margin_l.float-right { margin-left: 16px; } - &.o_margin_l.pull-left { + &.o_margin_l.float-left { margin-right: 16px; } &.o_margin_xl { margin-bottom: 24px; } - &.o_margin_xl.pull-right { + &.o_margin_xl.float-right { margin-left: 32px; } - &.o_margin_xl.pull-left { + &.o_margin_xl.float-left { margin-right: 32px; } } @@ -493,7 +493,7 @@ div.carousel { // Company Team .s_company_team { - @media (max-width: $screen-sm-max) { + @include media-breakpoint-down(md) { img { max-width: 50%; } @@ -504,11 +504,10 @@ div.carousel { @include o-position-absolute(0, 0, auto, 0); position: fixed; z-index: $zindex-modal - 20; - background: $navbar-default-bg; - border-bottom: $navbar-default-border; + background: $light; margin-top: -200px; - @include o-transition(margin-top, 500ms); + transition: margin-top 500ms ease 0s; &.affixed { margin-top: 0px; @@ -518,13 +517,13 @@ div.carousel { top: $o-navbar-height; } -.navbar .o_extra_menu_items.open > ul { +.navbar .o_extra_menu_items.show > ul { > li { + li { - border-top: 1px solid $gray-lighter; + border-top: 1px solid gray('200'); } > a.dropdown-toggle { - background-color: $gray-lighter; + background-color: gray('200'); color: inherit; // Useful when the toggle is active pointer-events: none; // hack to prevent clicking on it because dropdown always opened } @@ -547,9 +546,9 @@ div.carousel { .js_language_selector { display: inline-block; } - @media (min-width: $screen-sm-min) { + @include media-breakpoint-up(md) { .row { - @include o-flex-display; + display: flex; > div { margin: auto 0; } diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss index 3f2e65f7fb3..91e6675c82f 100644 --- a/addons/website/static/src/scss/website.ui.scss +++ b/addons/website/static/src/scss/website.ui.scss @@ -45,7 +45,7 @@ body.o_connected_user { } &[data-action="edit"], &[data-action="translate"], &.css_edit_dynamic { - @include button-variant(white, $o-brand-optional, $o-brand-optional); + @include button-variant($o-brand-primary, $o-brand-primary); } > .fa-plus, > .fa-pencil { @@ -58,7 +58,7 @@ body.o_connected_user { font-size: 20px; } } - @media only screen and (max-width: $screen-xs-max) { + @include media-breakpoint-down(sm) { #oe_applications { position: inherit; z-index: 1002; @@ -71,7 +71,8 @@ body.o_connected_user { position: relative; display: inline-block; opacity: $opacity; - @include square($size); + width: $size; + height: $size; &:hover, &:focus { outline: none; @@ -88,11 +89,11 @@ body.o_connected_user { background: $color; @include size(100%, $thickness); @include o-position-absolute(50%, $left:0); - @include o-transform(rotate(45deg)); + transform: rotate(45deg); } &:after { - @include o-transform(rotate(-45deg)); + transform: rotate(-45deg); } } @@ -104,14 +105,9 @@ body .modal { @include o-w-preserve-forms; @include o-w-preserve-links; @include o-w-preserve-btn; - @include o-w-preserve-wells; + @include o-w-preserve-cards; @include o-w-preserve-modals; @include o-w-preserve-tabs; - - &:not(.oe_mobile_preview) button.close { - @include o-w-close-icon(12px); - margin-right: -2px; - } } // MOBILE PREVIEW @@ -122,13 +118,6 @@ body .modal { display: inline-block; width: auto; - .close { - color: lightgray; - opacity: 1; - font-size: 25px; - font-weight: normal; - } - .modal-content { background-color: black!important; border: 3px outset gray; @@ -158,10 +147,10 @@ body .modal { $mobile-preview-width: 320px; $mobile-preview-height: 530px; - @include o-flex-display; + display: flex; width: $mobile-preview-width + 15; height: $mobile-preview-height; - @include o-transition(all, 400ms); + transition: all 400ms ease 0s; &.o_invert_orientation { width: $mobile-preview-height + 15; @@ -233,7 +222,7 @@ body .modal { text-align: right; background-color: $o-we-color-paper; - @media screen and (min-width: $screen-md-min) { + @include media-breakpoint-up(lg) { width: 38%; } } @@ -243,7 +232,7 @@ body .modal { visibility: visible; padding-left: 15px; - @media screen and (min-width: $screen-md-min) { + @include media-breakpoint-up(lg) { padding-left: 50px; } } @@ -252,7 +241,7 @@ body .modal { tbody { td { padding: 5px; - @include o-transition(padding, .3s); + transition: padding .3s ease 0s; &:first-child { border-width: 0 1px; @@ -265,7 +254,7 @@ body .modal { font-weight: normal; .oe_remove { - @include o-w-close-icon(10px, white, $o-we-color-danger, 2px); + @include o-w-close-icon(10px, white, $o-we-color-danger, 2px); // FIXME @include o-position-absolute(5px, 5px); } } @@ -287,7 +276,7 @@ body .modal { } tr { - @include o-animation(fadeInDownSmall, .3s); + animation: fadeInDownSmall .3s ease 0s 1 normal none running; &:first-child { td:first-child { @@ -354,9 +343,9 @@ body .modal { #o_new_content_menu_choices { @include o-position-absolute($o-navbar-height, 0, 0, 0); position: fixed; - @include o-flex-display; - @include o-justify-content(center); - @include o-align-items(center); + display: flex; + justify-content: center; + align-items: center; font-family: $o-we-font-family; &::before { @@ -369,9 +358,9 @@ body .modal { } > ul { - @include o-flex-display; - @include o-flex-flow(row, wrap); - @include o-justify-content(space-around); + display: flex; + flex-flow: row wrap; + justify-content: space-around; width: auto; max-width: 60%; max-height: 100%; @@ -382,7 +371,7 @@ body .modal { li { display: block; opacity: 0; - @include animation(fadeInDownSmall 1s forwards); + animation: fadeInDownSmall 1s forwards; margin: 2em 32px; padding: 0 15px; @@ -401,7 +390,7 @@ body .modal { background-color: #2C2C36; color: white; - @include o-transition(all, 0.5s, cubic-bezier(0.19, 1, 0.22, 1)); + transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) 0s; } p { color: white; @@ -523,15 +512,14 @@ body .modal { } #edit_website_pages { th { - background-color: $o-brand-primary; + background-color: $o-brand-odoo; color: white; } td > a.fa { margin-left: 5px; - color: $o-brand-primary; + color: $o-brand-odoo; } .fa-check, .fa-eye-slash { - color: $o-brand-optional; + color: $o-brand-primary; } } - diff --git a/addons/website/static/src/xml/website.backend.xml b/addons/website/static/src/xml/website.backend.xml index a5e14c2c0bc..b61d4503e95 100644 --- a/addons/website/static/src/xml/website.backend.xml +++ b/addons/website/static/src/xml/website.backend.xml @@ -21,19 +21,19 @@ <t t-name="website.dashboard_content"> <div class="o_website_dashboard_content"> <div class="row o_dashboard_visits" t-if="widget.groups.website_designer"> - <div class="col-xs-12 o_box"> + <div class="col-12 o_box"> <h2>Visits</h2> <div t-if="widget.dashboards_data.visits && widget.dashboards_data.visits.ga_client_id"> <div class="row js_analytics_components"/> <a href="#" class="js_link_analytics_settings">Edit my Analytics Client ID</a> </div> - <div t-if="!(widget.dashboards_data.visits && widget.dashboards_data.visits.ga_client_id)" class="col-md-12"> + <div t-if="!(widget.dashboards_data.visits && widget.dashboards_data.visits.ga_client_id)" class="col-lg-12"> <div class="o_demo_background"> <div class="o_layer"> </div> <div class="o_buttons text-center"> <h3>There is no data currently available.</h3> - <button class="btn btn-sm btn-primary js_link_analytics_settings center-block mb8">Link my Analytics Account</button> + <button class="btn btn-primary js_link_analytics_settings d-block mx-auto mb8">Link my Analytics Account</button> </div> </div> </div> @@ -42,7 +42,7 @@ </div> </t> - <div t-name="website.unauthorized_analytics" class="col-xs-12 js_unauthorized_message mb16"> + <div t-name="website.unauthorized_analytics" class="col-12 js_unauthorized_message mb16"> <span t-if="reason === 'not_connected'">You need to log in to your Google Account before: </span> <span t-if="reason === 'no_right'">You do not seem to have access to this Analytics Account.</span> <span t-if="reason === 'not_initialized'">Google Analytics initialization failed. Maybe this domain is not whitelisted in your Google Analytics project for this client ID.</span> @@ -61,11 +61,11 @@ </div> <t t-name="website.DateRangeButtons"> - <!-- TODO: Applied hidden-xs class as it is going to push in control panel and it breaks UI, maybe we will improve it in future --> - <div class="btn-group btn-group-sm o_date_range_buttons hidden-xs pull-right"> - <button class="btn btn-sm btn-default js_date_range active" data-date="week">Last Week</button> - <button class="btn btn-sm btn-default js_date_range" data-date="month">Last Month</button> - <button class="btn btn-sm btn-default js_date_range" data-date="year">Last Year</button> + <!-- TODO: Hide in mobile as it is going to push in control panel and it breaks UI, maybe we will improve it in future --> + <div class="btn-group o_date_range_buttons d-none d-md-inline-flex float-right"> + <button class="btn btn-secondary js_date_range active" data-date="week">Last Week</button> + <button class="btn btn-secondary js_date_range" data-date="month">Last Month</button> + <button class="btn btn-secondary js_date_range" data-date="year">Last Year</button> </div> </t> diff --git a/addons/website/static/src/xml/website.contentMenu.xml b/addons/website/static/src/xml/website.contentMenu.xml index 9cabe61a861..abcd94d5764 100644 --- a/addons/website/static/src/xml/website.contentMenu.xml +++ b/addons/website/static/src/xml/website.contentMenu.xml @@ -3,14 +3,16 @@ <t t-name="website.contentMenu.dialog.submenu"> <li t-att-data-menu-id="submenu.id"> <div class="input-group"> - <span class="input-group-addon fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/> + <div class="input-group-prepend"> + <span class="input-group-text fa fa-bars" role="img" aria-label="Dropdown menu" title="Dropdown menu"/> + </div> <span class="form-control"> <span class="js_menu_label"> <t t-esc="submenu.name"/> </span> - <i t-if="submenu.is_homepage" class="pull-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/> + <i t-if="submenu.is_homepage" class="float-right fa fa-home" style="margin-top: 3px" role="img" aria-label="Home" title="Home"/> </span> - <span class="input-group-btn"> + <span class="input-group-append"> <button type="button" class="btn btn-primary js_edit_menu fa fa-pencil-square-o" aria-label="Edit menu" title="Edit menu"/> <button type="button" class="btn btn-danger js_delete_menu fa fa-trash-o" aria-label="Delete menu" title="Delete menu"/> </span> @@ -42,7 +44,7 @@ </t> </ul> <div class="mt32"> - <small class="pull-right text-muted"> + <small class="float-right text-muted"> Drag a menu to the right to create a sub-menu </small> <a href="#" class="js_add_menu"> diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index ad7d326a43b..20045478c8c 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -2,8 +2,8 @@ <templates id="template" xml:space="preserve"> <div t-name="website.homepage_editor_welcome_message" class="container text-center o_homepage_editor_welcome_message"> <h2 class="mt0">Welcome to your <b>Homepage</b>!</h2> - <p class="lead hidden-xs">Let's start designing.</p> - <div class="o_tooltip_container hidden-xs">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div> + <p class="lead d-none d-md-block">Let's start designing.</p> + <div class="o_tooltip_container d-none d-md-block">Follow all the <div class="o_tooltip bottom"/> signs to get your website ready in no time.</div> </div> <div t-name="website.leaving_current_page_edition"> diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml index 4d362582a7b..7f16b568aec 100644 --- a/addons/website/static/src/xml/website.facebook_page.xml +++ b/addons/website/static/src/xml/website.facebook_page.xml @@ -2,43 +2,43 @@ <templates> <div t-name="website.facebook_page_dialog"> <div class="row"> - <form class="col-md-6 form-horizontal"> - <div class="form-group"> - <label class="control-label col-sm-3">Page URL</label> - <div class="col-sm-9"> + <form class="col-lg-6"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Page URL</label> + <div class="col-md-9"> <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/> </div> </div> - <div class="form-group o_facebook_tabs"> + <div class="form-group row o_facebook_tabs"> <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/> - <label class="control-label col-sm-3">Tabs</label> - <div class="col-sm-3 checkbox"> + <label class="col-form-label col-md-3">Tabs</label> + <div class="col-md-3 checkbox"> <label><input type="checkbox" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>Timeline</label> </div> - <div class="col-sm-3 checkbox"> + <div class="col-md-3 checkbox"> <label><input type="checkbox" name="events" t-att-checked="_.contains(fb_tabs, 'events') or None"/>Events</label> </div> - <div class="col-sm-3 checkbox"> + <div class="col-md-3 checkbox"> <label><input type="checkbox" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>Messages</label> </div> </div> - <div class="form-group o_facebook_options"> - <label class="control-label col-sm-3">Options</label> - <div class="col-sm-9 mt8"> + <div class="form-group row o_facebook_options"> + <label class="col-form-label col-md-3">Options</label> + <div class="col-md-9 mt8"> <label class="o_switch"> <input name="small_header" type="checkbox" t-att-checked="widget.fbData.small_header or None"/> <span/> Use Small Header </label> </div> - <div class="col-sm-offset-3 mt16 col-sm-9"> + <div class="offset-md-3 mt16 col-md-9"> <label class="o_switch"> <input name="hide_cover" type="checkbox" t-att-checked="widget.fbData.hide_cover or None"/> <span/> Hide Cover Photo </label> </div> - <div class="col-sm-offset-3 mt16 col-sm-9"> + <div class="offset-md-3 mt16 col-md-9"> <label class="o_switch"> <input name="show_facepile" type="checkbox" t-att-checked="widget.fbData.show_facepile or None"/> <span/> @@ -47,10 +47,10 @@ </div> </div> </form> - <div class="col-md-6" style="border-left: 1px solid #eeeeee;"> + <div class="col-lg-6" style="border-left: 1px solid #eeeeee;"> <div class="form-group text-center"> <label>Preview</label> - <div class="alert alert-warning hidden facebook_page_warning text-center" role="alert"> + <div class="alert alert-warning d-none facebook_page_warning text-center" role="alert"> <div> <i class="fa fa-exclamation-triangle fa-3x" role="img" aria-label="Warning" title="Warning"></i> </div> diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml index 08226cb911b..0ac854554d7 100644 --- a/addons/website/static/src/xml/website.gallery.xml +++ b/addons/website/static/src/xml/website.gallery.xml @@ -13,8 +13,8 @@ <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;"> <div class="carousel-inner container" style="padding: 0;"> <t t-foreach="srcs" t-as="src"> - <div t-attf-class="item #{src_index == index and 'active' or ''}"> - <img t-attf-class="img img-responsive #{userStyle}" t-att-src="src" alt="Slide image"/> + <div t-attf-class="carousel-item #{src_index == index and 'active' or ''}"> + <img t-attf-class="img img-fluid #{userStyle}" t-att-src="src" alt="Slide image"/> </div> </t> </div> diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml index 61c0c507cf4..7f3b4cbfc64 100644 --- a/addons/website/static/src/xml/website.pageProperties.xml +++ b/addons/website/static/src/xml/website.pageProperties.xml @@ -18,7 +18,7 @@ </t> </t> <t t-name="website.show_page_key_dependencies"> - <div class="col-sm-9 col-sm-offset-3"> + <div class="col-md-9 offset-md-3"> <span class="text-muted" id="warn_about_call_message"> <t t-set="depTooltip"> <t t-call="website.get_tooltip_dependencies"/> @@ -39,32 +39,34 @@ <!-- Page Properties --> <div t-name="website.pagesMenu.page_info" class="o_page_management_info"> - <form class="form-horizontal"> + <form> <ul class="nav nav-tabs" role="tablist"> - <li class="active"><a aria-controls="basic_page_info" data-toggle="tab" href="#basic_page_info" role="tab">Name</a></li> - <li><a aria-controls="advances_page_info" data-toggle="tab" href="#advances_page_info" role="tab">Publish</a></li> + <li class="nav-item"><a aria-controls="basic_page_info" role="tab" data-toggle="tab" class="nav-link active" href="#basic_page_info">Name</a></li> + <li class="nav-item"><a aria-controls="advances_page_info" role="tab" data-toggle="tab" class="nav-link" href="#advances_page_info">Publish</a></li> </ul> <div class="tab-content mt16"> <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active"> - <div class="form-group"> - <label class="control-label col-sm-3" for="page_name">Page Name</label> - <div class="col-sm-9"> - <input type="text" class="form-control input-sm" id="page_name" t-att-value="widget.page.name" /> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="page_name">Page Name</label> + <div class="col-md-9"> + <input type="text" class="form-control form-control-sm" id="page_name" t-att-value="widget.page.name" /> </div> </div> <div class="form-group warn_about_call"></div> - <div class="form-group"> - <label class="control-label col-sm-3" for="page_url">Page URL</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="page_url">Page URL</label> + <div class="col-md-9"> <div class="input-group"> - <span class="input-group-addon" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span> - <input type="text" class="form-control input-sm" id="page_url" t-att-value="widget.page.url" /> + <div class="input-group-prepend"> + <span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span> + </div> + <input type="text" class="form-control form-control-sm" id="page_url" t-att-value="widget.page.url" /> </div> </div> </div> - <div class="form-group ask_for_redirect"> - <label class="control-label col-sm-3" for="create_redirect">Redirect Old URL</label> - <div class="col-sm-2"> + <div class="form-group row ask_for_redirect"> + <label class="col-form-label col-md-3" for="create_redirect">Redirect Old URL</label> + <div class="col-md-2"> <a> <label class="o_switch" for="create_redirect" > <input type="checkbox" id="create_redirect"/> @@ -72,13 +74,13 @@ </label> </a> </div> - <div class="col-sm-7 mt4"> + <div class="col-md-7 mt4"> <span class="text-muted" id="dependencies_redirect"></span> </div> </div> - <div class="form-group ask_for_redirect"> - <label class="control-label col-sm-3 redirect_type" for="redirect_type">Type</label> - <div class="col-sm-6 redirect_type"> + <div class="form-group row ask_for_redirect"> + <label class="col-form-label col-md-3 redirect_type" for="redirect_type">Type</label> + <div class="col-md-6 redirect_type"> <select class="form-control" id="redirect_type"> <option t-foreach="widget.fields.type.selection" t-as="field" t-att-value="field[0]"><t t-esc="field[0] + ': ' + field[1]" /></option> </select> @@ -86,53 +88,55 @@ </div> </div> <div role="tabpanel" id="advances_page_info" class="tab-pane fade"> - <div class="form-group"> - <label class="control-label col-sm-3" for="is_menu">Show in Top Menu</label> - <div class="col-sm-2"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_menu">Show in Top Menu</label> + <div class="col-md-2"> <label class="o_switch" for="is_menu" > <input type="checkbox" t-att-checked="widget.page.menu_ids.length > 0 ? true : undefined" id="is_menu"/> <span/> </label> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="is_homepage">Use as Homepage</label> - <div class="col-sm-2"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_homepage">Use as Homepage</label> + <div class="col-md-2"> <label class="o_switch" for="is_homepage" > <input type="checkbox" t-att-checked="widget.page.is_homepage ? true : undefined" id="is_homepage"/> <span/> </label> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="is_indexed"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_indexed"> Indexed <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i> </label> - <div class="col-sm-2"> + <div class="col-md-2"> <label class="o_switch" for="is_indexed" > <input type="checkbox" t-att-checked="widget.page.website_indexed ? true : undefined" id="is_indexed"/> <span/> </label> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="is_published">Publish</label> - <div class="col-sm-2"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_published">Publish</label> + <div class="col-md-2"> <label class="o_switch js_publish_btn" for="is_published"> <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/> <span/> </label> </div> </div> - <div class="form-group"> - <label class="control-label col-sm-3" for="date_publish">Publishing Date</label> - <div class="col-sm-9"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="date_publish">Publishing Date</label> + <div class="col-md-9"> <div class='input-group date' id='date_publish_container'> <input type='text' class="form-control" name="date_publish" id="date_publish" /> - <span class="input-group-addon"> - <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span> - </span> + <div class="input-group-append"> + <span class="input-group-text"> + <span class="fa fa-calendar" role="img" aria-label="Publish date" title="Publish date"></span> + </span> + </div> </div> </div> </div> diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml index 08137872596..d9cb1f38f80 100644 --- a/addons/website/static/src/xml/website.seo.xml +++ b/addons/website/static/src/xml/website.seo.xml @@ -8,27 +8,27 @@ <div t-name="website.seo_configuration"> <section class="row"> - <div class="col-md-6"> - <div class="form-horizontal mt16" role="form"> - <div class="form-group"> - <label for="seo_page_title" class="col-xs-3 control-label">Page Title</label> - <div class="col-xs-9"> + <div class="col-lg-6"> + <div class="mt16" role="form"> + <div class="form-group row"> + <label for="seo_page_title" class="col-3 col-form-label">Page Title</label> + <div class="col-9"> <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/> </div> </div> - <div class="form-group"> - <label for="seo_page_description" class="col-xs-3 control-label">Description</label> - <div class="col-xs-9"> + <div class="form-group row"> + <label for="seo_page_description" class="col-3 col-form-label">Description</label> + <div class="col-9"> <textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/> </div> </div> </div> </div> - <div class="col-md-6"> + <div class="col-lg-6"> <h5 class="mt16">Preview <small>how your page will be listed on Google</small></h5> - <div class="well"> - <div class="panel mb0"> - <div class="panel-body"> + <div> + <div class="card mb0"> + <div class="card-body"> <div class="js_seo_preview"/> </div> </div> @@ -46,10 +46,10 @@ <div class="form-inline" role="form"> <div class="input-group"> <input type="text" style="min-width:170px" name="seo_page_keywords" class="form-control" placeholder="Keyword" maxlength="30"/> - <span class="input-group-btn"> + <span class="input-group-append"> <select name="seo_page_language" id="language-box" class="btn form-control"/> </span> - <span class="input-group-btn"> + <span class="input-group-append"> <button data-action="add" class="btn btn-success" type="button">Add</button> </span> </div> @@ -63,10 +63,10 @@ <td/> <td><hr/> <small class="text-muted">Legend:</small> - <span class="label label-default">Not used</span> - <span class="label label-success">In title</span> - <span class="label label-primary">In description</span> - <span class="label label-info">In page's content</span> + <span class="badge badge-secondary">Not used</span> + <span class="badge badge-success">In title</span> + <span class="badge badge-primary">In description</span> + <span class="badge badge-info">In page's content</span> </td> </tr> </tfoot> @@ -106,7 +106,7 @@ </t> <t t-name="website.seo_suggestion"> - <li class="oe_seo_suggestion"> + <li class="list-inline-item oe_seo_suggestion"> <span t-attf-title="#{ widget.tooltip() }" t-attf-class="oe_seo_keyword #{ widget.highlight() } js_seo_suggestion" t-att-data-keyword="widget.keyword"> <t t-raw="widget.keyword"/> </span> diff --git a/addons/website/static/src/xml/website.share.xml b/addons/website/static/src/xml/website.share.xml index b534f6e9cc7..d78c1babc46 100644 --- a/addons/website/static/src/xml/website.share.xml +++ b/addons/website/static/src/xml/website.share.xml @@ -2,7 +2,7 @@ <templates id="template" xml:space="preserve"> <t t-name="website.social_hover"> <div class="row clearfix" style='font-size:16px'> - <div class="col-xs-12 css_editable_mode_hidden"> + <div class="col-12 css_editable_mode_hidden"> <t t-foreach="medias" t-as="media"> <a style="cursor: pointer" t-attf-class="fa-stack fa-lg share #{media}" t-att-aria-label="media" t-att-title="media"> <span class="fa fa-square fa-stack-2x"></span> diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index bdd5aa42941..e391fcfd5f8 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -9,12 +9,12 @@ <h3 class="modal-title"><t t-esc="window_title"/></h3> </header> <main class="modal-body"> - <form class="form-horizontal" role="form" t-att-id="id"> - <div class="form-group mb0"> - <label for="page-name" class="col-sm-3 control-label"> + <form role="form" t-att-id="id"> + <div class="form-group row mb0"> + <label for="page-name" class="col-md-3 col-form-label"> <t t-esc="field_name"/>: </label> - <div class="col-sm-8"> + <div class="col-md-8"> <input t-if="field_type == 'input'" type="text" class="form-control" required="required"/> <textarea t-if="field_type == 'textarea'" class="form-control" required="required" rows="5"></textarea> <select t-if="field_type == 'select'" class="form-control"></select> @@ -23,8 +23,8 @@ </form> </main> <footer class="modal-footer"> - <button type="button" class="btn btn-sm btn-primary btn-continue">Continue</button> - <button type="button" class="btn btn-sm btn-default" data-dismiss="modal" aria-label="Cancel">Cancel</button> + <button type="button" class="btn btn-primary btn-continue">Continue</button> + <button type="button" class="btn btn-secondary" data-dismiss="modal" aria-label="Cancel">Cancel</button> </footer> </div> </div> @@ -62,15 +62,17 @@ </div> <div t-name="website.rename_page"> - <div class="well"> - <form class="form-horizontal"> - <div class="form-group mb0"> - <label for="new_name" class="control-label col-sm-4">Rename Page To:</label> - <div class="col-sm-8"> - <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/> + <div class="card"> + <div class="card-body"> + <form> + <div class="form-group row mb0"> + <label for="new_name" class="col-form-label col-md-4">Rename Page To:</label> + <div class="col-md-8"> + <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/> + </div> </div> - </div> - </form> + </form> + </div> </div> <t t-call="website.dependencies"/> </div> |