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

[IMP] web_tour: tips on the border of the screen

Browse Source 
* Adapt code to handle position/width/padding with pixel-precision
* Adapt overlay to not overflow the screen
* Do not let the content overflow the tip when closed
This commit is contained in:
qsm-odoo
2016-06-17 13:20:44 +02:00
parent d713a3ecc6
commit cc67068360
2 changed files with 32 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_tour/static/src/js/tip.js
+29 -15
View File
@@ -38,14 +38,20 @@ return Widget.extend({
});
},
start: function() {
this.init_width = this.$el.innerWidth();
this.init_height = this.$el.innerHeight();
this.$tooltip_overlay = this.$(".o_tooltip_overlay");
this.$tooltip_content = this.$(".o_tooltip_content");
this.init_width = this.$el.innerWidth();
this.init_height = this.$el.innerHeight();
this.border_width = this.$el.outerWidth() - this.init_width;
this.content_width = this.$tooltip_content.outerWidth(true);
this.content_height = this.$tooltip_content.outerHeight(true);
this.$window = $(window);
_.each(this.info.event_handlers, (function(data) {
this.$tooltip_content.on(data.event, data.selector, data.handler);
}).bind(this));
this._bind_anchor_events();
this._reposition();
core.bus.on('scroll resize', this, function() {
if (this.tip_opened) {
@@ -53,6 +59,11 @@ return Widget.extend({
}
this._reposition();
});
this.$tooltip_content.css({
width: "100%",
height: "100%",
});
return this._super.apply(this, arguments);
},
update: function($anchor) {
@@ -66,18 +77,24 @@ return Widget.extend({
_reposition: function() {
if (this.tip_opened) return;
this.$el.removeClass("o_animated");
this.$el.position({
my: this._get_spaced_inverted_position(this.info.position),
at: this.info.position,
of: this.$anchor,
collision: "none",
});
var offset = this.$el.offset();
offset.left += this.border_width;
offset.top += this.border_width;
this.$tooltip_overlay.css({
top: -(this.info.position === "bottom" ? this.info.space : this.info.overlay.y),
right: -(this.info.position === "left" ? this.info.space : this.info.overlay.x),
bottom: -(this.info.position === "top" ? this.info.space : this.info.overlay.y),
left: -(this.info.position === "right" ? this.info.space : this.info.overlay.x),
top: -Math.min((this.info.position === "bottom" ? this.info.space : this.info.overlay.y), offset.top),
right: -Math.min((this.info.position === "left" ? this.info.space : this.info.overlay.x), this.$window.width() - (offset.left + this.init_width)),
bottom: -Math.min((this.info.position === "top" ? this.info.space : this.info.overlay.y), this.$window.height() - (offset.top + this.init_height)),
left: -Math.min((this.info.position === "right" ? this.info.space : this.info.overlay.x), offset.left),
});
this.$el.addClass("o_animated");
},
_bind_anchor_events: function () {
@@ -109,9 +126,6 @@ return Widget.extend({
clearTimeout(this.timerIn);
this.timerIn = undefined;
var content_width = this.$tooltip_content.outerWidth();
var content_height = this.$tooltip_content.outerHeight();
this.tip_opened = true;
var offset = this.$el.offset();
@@ -120,22 +134,22 @@ return Widget.extend({
var overflow = false;
var posVertical = (this.info.position === "top" || this.info.position === "bottom");
if (posVertical) {
overflow = (offset.left + content_width + this.info.overlay.x > $(window).width());
overflow = (offset.left + this.content_width + 2 * this.border_width + this.info.overlay.x > this.$window.width());
} else {
overflow = (offset.top + content_height + this.info.overlay.y > $(window).height());
overflow = (offset.top + this.content_height + 2 * this.border_width + this.info.overlay.y > this.$window.height());
}
if (posVertical && overflow || this.info.position === "left") {
mbLeft -= (content_width - this.init_width);
mbLeft -= (this.content_width - this.init_width);
}
if (!posVertical && overflow || this.info.position === "top") {
mbTop -= (content_height - this.init_height);
mbTop -= (this.content_height - this.init_height);
}
this.$el.toggleClass("inverse", overflow);
this.$el.removeClass("o_animated").addClass("active");
this.$el.css({
width: content_width,
height: content_height,
width: this.content_width,
height: this.content_height,
"margin-left": mbLeft,
"margin-top": mbTop,
});
addons/web_tour/static/src/less/tip.less
+3 -1
View File
@@ -36,6 +36,7 @@
height: @o-tip-size;
border: @o-tip-border-width solid @odoo-brand-primary;
border-radius: 50%;
padding: 0; // ! Cannot be changed ! Javascript rely on this.
z-index: @zindex-modal+1;
background-color: @o-tip-background-color;
box-shadow: 0 0 2px 0 @odoo-brand-lightsecondary;
@@ -101,7 +102,8 @@
z-index: -1;
}
> .o_tooltip_content {
padding: 8px 15px;
overflow: hidden;
padding: floor(@o-tip-size/4) floor(@o-tip-size/2);
visibility: hidden;
transition: visibility 0s ease 0s;
color: black;