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

[IMP] web_editor: improve margins system UX

Browse Source 
- Clearly show margins' size on editing

- Top margin icons/cursors: by an user point of view, adding a
  margin-top will move the content 'down', so change handler's icons
  and cursors accordingly

- Highlight handles during editing and if previously edited

- Vertically center handle's icon if enough room is available
This commit is contained in:
stefanorigano
2017-07-10 13:37:40 +02:00
committed by qsm-odoo
parent 99b205949b
commit d2251dcb0e
2 changed files with 120 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/snippets.options.js
+33
View File
@@ -329,6 +329,8 @@ odoo.define('web_editor.snippets.options', function (require) {
if (change) {
self.on_resize(compass, beginClass, current);
self.buildingBlock.cover_target(self.$overlay, self.$target);
self.adapt_margin_preview_size();
$handle.addClass('oe_handle_change');
}
};
@@ -343,10 +345,13 @@ odoo.define('web_editor.snippets.options', function (require) {
}
},0);
self.$target.removeClass("resize_editor_busy");
$handle.removeClass('oe_handle_change');
if (compass === "size") {
$fixed_size.addClass("active");
$auto_size.removeClass("active");
} else {
self._highlight_margins_preview(300);
}
};
$body.mousemove(body_mousemove);
@@ -372,10 +377,14 @@ odoo.define('web_editor.snippets.options', function (require) {
on_focus : function () {
this._super();
this.change_cursor();
this.adapt_margin_preview_size();
},
change_cursor : function () {
var _class = this.$target.attr("class") || "";
var $handle_s = this.$overlay.find('.oe_handle.s');
var $handle_n = this.$overlay.find('.oe_handle.n');
var $handle_w = this.$overlay.find('.oe_handle.w');
var col = _class.match(/col-md-([0-9-]+)/i);
col = col ? +col[1] : 0;
@@ -387,20 +396,44 @@ odoo.define('web_editor.snippets.options', function (require) {
if (col+offset >= 12) overlay_class+= " block-e-right";
if (col === 1) overlay_class+= " block-w-right block-e-left";
if (offset === 0) overlay_class+= " block-w-left";
$handle_w.toggleClass('oe_handle_centered', offset > 0).toggleClass('o_handle_edited', offset >= 1 );
var mb = _class.match(/mb([0-9-]+)/i);
mb = mb ? +mb[1] : parseInt(this.$target.css('margin-bottom'));
if (mb >= 128) overlay_class+= " block-s-bottom";
else if (!mb) overlay_class+= " block-s-top";
$handle_s.toggleClass('oe_handle_centered', mb >= 32).toggleClass('o_handle_edited', mb > 0 );
var mt = _class.match(/mt([0-9-]+)/i);
mt = mt ? +mt[1] : parseInt(this.$target.css('margin-top'));
if (mt >= 128) overlay_class+= " block-n-top";
else if (!mt) overlay_class+= " block-n-bottom";
$handle_n.toggleClass('oe_handle_centered', mt >= 32).toggleClass('o_handle_edited', mt > 0 );
this.$overlay.attr("class", overlay_class);
},
adapt_margin_preview_size : function () {
var self = this,
ml = this.$target.css('margin-left');
_.each(this.$overlay.find(".oe_handle.n, .oe_handle.s"), function (handle) {
var $handle = $(handle);
var direction = $handle.hasClass('n') ? 'top': 'bottom';
$handle.height(self.$target.css('margin-' + direction ));
});
this.$overlay.find(".oe_handle.w").css({
width: ml,
left: '-' + ml
});
},
_highlight_margins_preview: function (timing) {
var handlers = this.$overlay.find(".oe_handle.n, .oe_handle.s, .oe_handle.w");
handlers.addClass('oe_handle_active').delay(timing).queue(function(){
handlers.removeClass('oe_handle_active').dequeue();
});
},
/* on_resize
* called when the box is resizing and the class change, before the cover_target
* @compass: resize direction : 'n', 's', 'e', 'w'
addons/web_editor/static/src/less/web_editor.ui.less
+87 -35
View File
@@ -299,7 +299,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
// MANIPULATORS
#oe_manipulators {
@odoo-handle-edge-size: 8px;
@odoo-handle-edge-size: 1px;
@odoo-handle-border-width: 1px;
// SNIPPET MANIPULATORS
@@ -534,34 +534,78 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
// HANDLES
> .oe_handles {
@o-handles-offset-to-hide: 10000px;
@o-handless-accent-color: #00e2ff;
.o-position-absolute(-@o-handles-offset-to-hide, 0, auto, 0);
> .oe_handle {
@o-handle-size: 18px;
&:hover > .oe_handle {
background-color: fade(@o-handless-accent-color, 5%);
}
> .oe_handle {
@o-handle-btn-size: 18px;
opacity: 0.5;
.o-transition(opacity, 400ms);
&:hover {
opacity: 0.9;
border: 0 solid @o-handless-accent-color;
// MARGINS PREVIEW
&.n, &.s, &.w {
position: relative;
.o-transition(background, 0.3s);
&.oe_handle_change, &.oe_handle_active, &:hover {
background-color: fade(@o-handless-accent-color, 20%);
}
&.o_handle_edited {
opacity: 0.9;
&:after {
color: white;
border-color: darken(@o-handless-accent-color, 10%);
background-color: darken(@o-handless-accent-color, 20%);
}
}
&.oe_handle_change, &:hover {
opacity: 1;
&:before {
.o-position-absolute(0, @left:50%);
width: 1px;
height: 100%;
margin-left: -1px;
background-color: fade(@o-handless-accent-color, 50%);
content:'';
}
&.w:before {
.o-position-absolute(50%,@left: 0);
width: 100%;
height: 1px;
}
&:after {
border-color: darken(@o-handless-accent-color, 10%);
background-color: darken(@o-handless-accent-color, 20%);
}
}
}
border: 0 dashed black;
&:after {
display: block;
width: @o-handle-size;
height: @o-handle-size;
width: @o-handle-btn-size;
height: @o-handle-btn-size;
border: solid 1px rgba(0, 0, 0, 0.2);
line-height: @o-handle-size - 2;
line-height: @o-handle-btn-size - 2;
font-size: 14px;
font-family: FontAwesome;
background-color: @o-we-color-light;
color: @o-we-color-text-light;
}
&:hover:after {
background-color: @o-we-color-dark;
color: white;
box-shadow: 0 0 5px 3px rgba(255,255,255,0.7);
&:hover {
opacity: 0.9;
}
&.w:after, &.e:after {
content: "\f07e";
}
@@ -570,14 +614,18 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
}
&.w {
border-left-width: @odoo-handle-border-width;
border-width: @odoo-handle-border-width;
border-right-width: 0;
cursor: e-resize;
width: @odoo-handle-edge-size;
.o-position-absolute(@o-handles-offset-to-hide, auto, -@o-handles-offset-to-hide, 0);
&:after {
.o-position-absolute(@top: 50%, @left: -@odoo-handle-border-width);
margin-top: -@o-handle-size/2;
.o-position-absolute(@top: 50%, @left: 50%);
margin-top: -@o-handle-btn-size/2;
}
&.oe_handle_centered:after {
margin-left: -@o-handle-btn-size/2;
}
}
&.e {
@@ -588,29 +636,33 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
&:after {
.o-position-absolute(@top: 50%, @right: -@odoo-handle-border-width);
margin-top: -@o-handle-size/2;
margin-top: -@o-handle-btn-size/2;
}
}
&.n {
border-top-width: @odoo-handle-border-width;
cursor: s-resize;
height: @odoo-handle-edge-size;
.o-position-absolute(@o-handles-offset-to-hide, 0, auto, 0);
&:after {
.o-position-absolute(@left: 50%, @top: -@odoo-handle-border-width);
margin-left: -@o-handle-size/2;
.o-position-absolute(@left: 50%, @top: 50%);
margin-left: -@o-handle-btn-size/2;
}
}
&.s {
border-bottom-width: @odoo-handle-border-width;
cursor: n-resize;
height: @odoo-handle-edge-size;
.o-position-absolute(auto, 0, -@o-handles-offset-to-hide, 0);
&:after {
.o-position-absolute(@left: 50%, @bottom: -@odoo-handle-border-width);
margin-left: -@o-handle-size/2;
.o-position-absolute(@left: 50%, @bottom: 50%);
margin-left: -@o-handle-btn-size/2;
}
}
&.n, &.s {
cursor: ns-resize;
&.oe_handle_centered:after {
.o-position-absolute(@left: 50%, @top: 50%);
margin-top: -@o-handle-btn-size/2;
}
}
@@ -689,17 +741,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
&.block-e-left.block-e-right .e:after {
display: none !important;
}
&.block-s-top .s:after {
content: "" !important;
&.block-s-bottom .s, &.block-n-top .n {
cursor: n-resize!important;
&:after {
content: "\f062" !important;
}
}
&.block-s-bottom .s:after {
content: "" !important;
}
&.block-n-top .n:after {
content: "" !important;
}
&.block-n-bottom .n:after {
content: "" !important;
&.block-s-top .s, &.block-n-bottom .n {
cursor: s-resize!important;
&:after {
content: "\f063" !important;
}
}
}
}