From 7f10b55a5035bd3cab48ba58a519510a25b94f60 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 24 Apr 2018 17:15:00 +0200 Subject: [REF] *: BS4, adapt display classes The system completely changed. I also had to adapt classes to new screen breakpoints. hidden/hide -> d-none show -> d-block hidden-xs -> d-none d-md-(block/inline/...) hidden-sm -> d-md-none d-lg-(block/inline/...) hidden-md -> d-lg-none d-xl-(block/inline/...) hidden-lg -> d-xl-none visible-xs-* -> d-* d-md-none visible-sm-* -> d-none d-md-* d-lg-none visible-md-* -> d-none d-lg-* d-xl-none visible-lg-* -> d-none d-xl-* hidden-print -> d-print-none visible-print-* -> d-none d-print-* ... and all possible combination of those had to be handled too. --- addons/web_editor/static/src/js/widgets/widgets.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) (limited to 'addons/web_editor/static/src/js/widgets/widgets.js') diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 5f00723865d..8148f61a4f8 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -988,7 +988,7 @@ var VideoWidget = MediaWidget.extend({ // 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_dialog_options li').addClass('d-none'); // Check video code var $textarea = this.$('textarea#o_video_text'); @@ -1017,20 +1017,20 @@ 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); // 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; @@ -1268,8 +1268,8 @@ 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.search').toggleClass('d-none', !cpConfig.searchEnabled); + this.$('li.previous, li.next').toggleClass('d-none', !cpConfig.pagerEnabled); this.$('li.previous > a').toggleClass("disabled", !cpConfig.pagerLeftEnabled); this.$('li.next > a').toggleClass("disabled", !cpConfig.pagerRightEnabled); }, @@ -1556,7 +1556,7 @@ var LinkDialog = Dialog.extend({ _onURLInput: function (ev) { $(ev.currentTarget).closest('.form-group').removeClass('has-error'); 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); }, }); -- cgit v1.2.3 From c59380bac5bbd47bc7dcd92b38049af29a62c3d1 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 16 Jul 2018 16:48:59 +0200 Subject: [REF] *: BS4, rename btn-default to btn-secondary BS4 "btn-default" class was replaced with "btn-secondary", which makes more sense. --- addons/web_editor/static/src/js/widgets/widgets.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'addons/web_editor/static/src/js/widgets/widgets.js') diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 8148f61a4f8..9e04c9dbe7d 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -613,7 +613,7 @@ var ImageWidget = MediaWidget.extend({ var $input = $(ev.currentTarget); var $button = $input.next('button'); 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); }, /** @@ -1477,7 +1477,7 @@ var LinkDialog = Dialog.extend({ 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; -- cgit v1.2.3 From de214e37429213fe9f329ff3f11885fee3e271c4 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 15 Mar 2018 14:06:31 +0100 Subject: [REF] *: BS4, 'img-responsive' -> 'img-fluid' --- addons/web_editor/static/src/js/widgets/widgets.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'addons/web_editor/static/src/js/widgets/widgets.js') diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 9e04c9dbe7d..e189726051d 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($('', {class: 'img-responsive o_we_custom_image'})); + self._replaceMedia($('', {class: 'img-fluid o_we_custom_image'})); } self.$media.attr('src', img.src); @@ -459,7 +459,7 @@ var ImageWidget = MediaWidget.extend({ var $div = $(el); if (/gif|jpe|jpg|png/.test($div.data('mimetype'))) { var $img = $('', { - class: 'img-responsive', + class: 'img-fluid', src: $div.data('url') || $div.data('src'), }); var def = $.Deferred(); -- cgit v1.2.3 From 93b0001df6766fe905ee69c25ec8d846e4551064 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 22 May 2018 15:30:36 +0200 Subject: [REF] *: BS4, adapt forms The 'form-horizontal' class have been removed; the '.form-group' elements must now use the 'row' class for an horizontal layout. The 'control-label' class was renamed to 'col-form-label'. The 'help-block' class was renamed to 'form-text'. The 'has-error' and 'has-success' classes have been removed and replaced by a new system using the :valid and :invalid pseudo-classes, when a parent has the 'was-validated' class. While this system is great, it is not straightforward to use it in Odoo. Fortunately, BS4 provides the 'is-valid' and 'is-invalid' classes as fallback. This commit replaces the 'has-error' and 'has-success' classes by 'o_has_error' and 'o_has_success' classes (for JS compatibility) and use the 'is-*' fallback classes. (The 'has-warning' class has no equivalent but was unused in Odoo anyway). --- addons/web_editor/static/src/js/widgets/widgets.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) (limited to 'addons/web_editor/static/src/js/widgets/widgets.js') diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index e189726051d..4f2d952c6d8 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -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})); @@ -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}); @@ -987,7 +989,7 @@ 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_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 @@ -1019,7 +1021,10 @@ var VideoWidget = MediaWidget.extend({ // Show / Hide preview elements 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('d-none'); @@ -1470,7 +1475,7 @@ 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(); } @@ -1554,7 +1559,7 @@ 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('d-none', !isLink); }, -- cgit v1.2.3 From cd3f5bbfda76da75a9c7528144020c7dfbdf81d3 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 8 Jun 2018 12:11:56 +0200 Subject: [REF] web_editor: BS4, review media dialog layout --- addons/web_editor/static/src/js/widgets/widgets.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'addons/web_editor/static/src/js/widgets/widgets.js') diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 4f2d952c6d8..b1a480ae56e 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -613,7 +613,7 @@ 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-secondary', emptyValue).toggleClass('btn-primary', !emptyValue) .prop('disabled', emptyValue); @@ -1104,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', @@ -1274,9 +1274,9 @@ var MediaDialog = Dialog.extend({ _updateControlPanel: function () { var cpConfig = this.active.getControlPanelConfig(); this.$('li.search').toggleClass('d-none', !cpConfig.searchEnabled); - this.$('li.previous, li.next').toggleClass('d-none', !cpConfig.pagerEnabled); - this.$('li.previous > a').toggleClass("disabled", !cpConfig.pagerLeftEnabled); - this.$('li.next > a').toggleClass("disabled", !cpConfig.pagerRightEnabled); + this.$('.previous, .next').toggleClass('d-none', !cpConfig.pagerEnabled); + this.$('.previous').toggleClass("disabled", !cpConfig.pagerLeftEnabled); + this.$('.next').toggleClass("disabled", !cpConfig.pagerRightEnabled); }, //-------------------------------------------------------------------------- @@ -1287,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(); }, /** -- cgit v1.2.3