From 05d064f85531d04056ad02bd2d26ef2341839f3b Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 28 Jun 2016 17:35:05 +0200 Subject: [PATCH] [IMP] website,web_editor: review style / content * Mobile preview dialog * Add page dialog (allow to click anywhere to close the modal) * Change label for "auto resize" and "resize" options to "auto size" and "fixed size" and add a checkmark to the currently active one * Overlay border / Options dialog content * Hide the odoo navbar after a delay when the editor starts --- .../static/src/less/web_editor.ui.less | 10 +++++- addons/web_editor/static/src/xml/editor.xml | 21 +------------ addons/web_editor/static/src/xml/snippets.xml | 4 +-- .../website/static/src/js/website.editor.js | 10 +++++- .../static/src/js/website.snippets.editor.js | 24 +++++++++++--- .../src/less/website.ui.components.less | 31 ++++++++++--------- 6 files changed, 58 insertions(+), 42 deletions(-) diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less index 6cbff90b572..9167cbc2e2a 100644 --- a/addons/web_editor/static/src/less/web_editor.ui.less +++ b/addons/web_editor/static/src/less/web_editor.ui.less @@ -293,7 +293,7 @@ html[lang] > body.editor_enable{ // MANIPULATORS #oe_manipulators { @odoo-handle-edge-size: 8px; - @odoo-handle-border-width: 3px; + @odoo-handle-border-width: 1px; // SNIPPET MANIPULATORS .oe_overlay { @@ -550,6 +550,7 @@ html[lang] > body.editor_enable{ margin-left: -125px; > .oe_handle_button { + position: relative; display: block; width: 100px; height: @o-handle-size-height; @@ -571,6 +572,13 @@ html[lang] > body.editor_enable{ cursor: row-resize; float: right; } + &.active:before { + content: "\f00c"; + font-family: "FontAwesome"; + color: @odoo-brand-optional; + .o-position-absolute(@top: 0, @left: 3px); + font-size: 11px; + } } } diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index f4fb773c8c3..ff22af71f3d 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -331,18 +331,8 @@
- -
-
-
-
-
-

Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.

-
- -

Assigning a focal point to ensure that the targeted area will be always visible

-
Click on the picture
+
Assign a focal point that will always be visible
@@ -354,15 +344,6 @@
- -
-
-
-
-
-

Scale the image to the largest size such that both its width and height can fit inside the content area

-
-
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index cbf1e6bef70..9bb064f5e2b 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -21,8 +21,8 @@
-
Auto Resize
-
Resize
+
Auto size
+
Fixed size
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js index b79e04e2d69..0ed17be589b 100644 --- a/addons/website/static/src/js/website.editor.js +++ b/addons/website/static/src/js/website.editor.js @@ -27,8 +27,9 @@ website.TopBar.include({ .filter(".oe_no_empty") .addClass("oe_empty"); - if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang') === "en_US") { + if (location.search.indexOf("enable_editor") >= 0 && $('html').attr('lang').match(/en[-_]US/)) { this.$el.addClass('editing_mode'); + this.delayed_hide(); } return this._super.apply(this, arguments); @@ -39,6 +40,13 @@ website.TopBar.include({ editor.editor_bar = new editor.Class(this); editor.editor_bar.prependTo(document.body); $('.o_homepage_editor_welcome_message').remove(); + + this.delayed_hide(); + }, + delayed_hide: function () { + _.delay((function () { + this.do_hide(); + }).bind(this), 800); }, }); diff --git a/addons/website/static/src/js/website.snippets.editor.js b/addons/website/static/src/js/website.snippets.editor.js index 212647d5584..1ab57c3c9af 100644 --- a/addons/website/static/src/js/website.snippets.editor.js +++ b/addons/website/static/src/js/website.snippets.editor.js @@ -123,7 +123,7 @@ options.registry.slider = options.Class.extend({ self.$target.off('slid.bs.carousel'); self.rebind_event(); self.remove_process = false; - if (cycle == 1) { + if (cycle === 1) { self.on_remove_slide(event); } }); @@ -196,7 +196,14 @@ options.registry.marginAndResize = options.Class.extend({ if (resize_values.w) this.$overlay.find(".oe_handle.w").removeClass("readonly"); if (resize_values.size) this.$overlay.find(".oe_handle.size").removeClass("readonly"); - this.$overlay.find(".oe_handle:not(.size), .oe_handle.size .size").on('mousedown', function (event) { + var $auto_size = this.$overlay.find(".oe_handle.size .auto_size"); + var $fixed_size = this.$overlay.find(".oe_handle.size .size"); + + var auto_sized = isNaN(parseInt(self.$target.prop("style").height)); + $fixed_size.toggleClass("active", !auto_sized); + $auto_size.toggleClass("active", auto_sized); + + $fixed_size.add(this.$overlay.find(".oe_handle:not(.size)")).on('mousedown', function (event) { event.preventDefault(); var $handle = $(this); @@ -280,7 +287,7 @@ options.registry.marginAndResize = options.Class.extend({ current = next; change = true; } - if (prev != current && dd < (2*resize[1][prev] + resize[1][current])/3) { + if (prev !== current && dd < (2*resize[1][prev] + resize[1][current])/3) { self.$target.attr("class", (self.$target.attr("class")||'').replace(regClass, '')); self.$target.addClass(resize[0][prev]); current = prev; @@ -304,15 +311,24 @@ options.registry.marginAndResize = options.Class.extend({ } },0); self.$target.removeClass("resize_editor_busy"); + + if (compass === "size") { + $fixed_size.addClass("active"); + $auto_size.removeClass("active"); + } }; $body.mousemove(body_mousemove); $body.mouseup(body_mouseup); }); - this.$overlay.find(".oe_handle.size .auto_size").on('click', function () { + $auto_size.on('click', function () { self.$target.css("height", ""); self.$target.css("overflow", ""); self.buildingBlock.getParent().rte.historyRecordUndo(self.$target, 'resize_Y'); self.buildingBlock.cover_target(self.$overlay, self.$target); + + $fixed_size.removeClass("active"); + $auto_size.addClass("active"); + return false; }); }, diff --git a/addons/website/static/src/less/website.ui.components.less b/addons/website/static/src/less/website.ui.components.less index 4042c3607f7..d4af8332257 100644 --- a/addons/website/static/src/less/website.ui.components.less +++ b/addons/website/static/src/less/website.ui.components.less @@ -78,6 +78,8 @@ body .modal { .close { color: lightgray; + opacity: 1; + font-size: 25px; } .modal-content { @@ -85,7 +87,6 @@ body .modal { color: lightgray!important; border: 3px outset gray; border-radius: 20px; - box-shadow: 0 0 100em 0 white; .modal-header { border: none; @@ -123,34 +124,36 @@ body .modal { // ADD NEW PAGE MODAL &#o_website_add_page_modal { - text-align: center; - line-height: 100%; - + &.in { + .o-flex-display()!important; + .o-justify-content(center); + .o-align-items(center); + } .modal-dialog { - line-height: 100vh; - margin: 0 auto; + width: auto; + max-width: 60%; + max-height: 100%; + ul { - display: inline-block; - width: 100%; + .o-flex-display(); + .o-flex-flow(row, wrap); + .o-justify-content(space-around); margin: 0; padding: 0; - vertical-align: middle; - line-height: 1; list-style: none; - text-align: center; li { + display: block; opacity: 0; .animation(fadeInDownSmall 1s forwards); - display: inline-block; - width: 33%; - margin: 2em 0; + margin: 2em 32px; padding: 0 15px; a { display: block; font-size: 34px; margin: auto; + text-align: center; i { width: 110px;