pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website,web_editor: review style / content

Browse Source 
* 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
This commit is contained in:
qsm-odoo
2016-07-04 17:23:59 +02:00
parent 906875fc78
commit 05d064f855
6 changed files with 58 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/less/web_editor.ui.less
+9 -1
View File
@@ -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;
}
}
}
addons/web_editor/static/src/xml/editor.xml
+1 -20
View File
@@ -331,18 +331,8 @@
<label class="radio-inline"><input type="radio" name="o_bg_img_opt" value="custom"/> Custom</label>
<div class="o_bg_img_opt" data-value="cover">
<a class="help-control collapsed" role="button" data-toggle="collapse" href="#cover_help" aria-expanded="false" aria-controls="cover_help"><span class="fa fa-question-circle"/></a>
<div class="help collapse" id="cover_help">
<div class="simulator cover_bg">
<div class="bg"/>
<div class="el"/>
</div>
<p class="help-text">Scale the image to be as large as it needs to fill the whole content area. Part of the image may not be visible.</p>
</div>
<p><strong>Assigning a focal point to ensure that the targeted area will be always visible</strong></p>
<div class="o_bg_img_opt_cover_edition">
<h6>Click on the picture</h6>
<h6>Assign a focal point that will always be visible</h6>
<div class="o_bg_img_opt_object">
<span class="grid grid-1"/>
<span class="grid grid-2"/>
@@ -354,15 +344,6 @@
</div>
</div>
<div class="o_bg_img_opt" data-value="contain">
<a class="help-control collapsed" role="button" data-toggle="collapse" href="#contain_help" aria-expanded="false" aria-controls="contain_help"><span class="fa fa-question-circle"/></a>
<div class="help collapse" id="contain_help">
<div class="simulator contain_bg">
<div class="bg"/>
<div class="el"/>
</div>
<p class="help-text">Scale the image to the largest size such that both its width and height can fit inside the content area</p>
</div>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label" for="repeatInput">Repeat</label>
addons/web_editor/static/src/xml/snippets.xml
+2 -2
View File
@@ -21,8 +21,8 @@
<div class="oe_handle w readonly"/>
<div class="oe_handle s readonly"/>
<div class="oe_handle size readonly">
<div class="oe_handle_button auto_size">Auto Resize</div>
<div class="oe_handle_button size">Resize</div>
<div class="oe_handle_button auto_size">Auto size</div>
<div class="oe_handle_button size" title="Resize to force the height of this block">Fixed size</div>
</div>
</div>
<div class="oe_overlay_options" contentEditable="false">
addons/website/static/src/js/website.editor.js
+9 -1
View File
@@ -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);
},
});
addons/website/static/src/js/website.snippets.editor.js
+20 -4
View File
@@ -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;
});
},
addons/website/static/src/less/website.ui.components.less
+17 -14
View File
@@ -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;