Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Refactoring tooltips

Browse source
This commit is contained in:
Julia Radzhabova 2018-04-03 17:39:49 +03:00
parent 805f538ec6
commit 2bdb4ea51c
2 changed files with 28 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
apps/common/main/lib/component/SynchronizeTip.js
View file

@ -103,13 +103,20 @@ define([
}, },
applyPlacement: function () { applyPlacement: function () {
var showxy = this.target.offset(); var showxy = this.target.offset(),
innerHeight = Common.Utils.innerHeight();
if (this.placement == 'top') if (this.placement == 'top')
this.cmpEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'}); this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
else if (this.placement == 'left') else {// left or right
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'}); var top = showxy.top + this.target.height()/2,
else // right height = this.cmpEl.height();
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'}); if (top+height>innerHeight)
top = innerHeight - height;
if (this.placement == 'left')
this.cmpEl.css({top : top + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
else
this.cmpEl.css({top : top + 'px', left: showxy.left + this.target.width() + 'px'});
}
}, },
isVisible: function() { isVisible: function() {

23
apps/common/main/resources/less/synchronize-tip.less
View file

@ -20,29 +20,32 @@
&:after { &:after {
top: -7px; top: -7px;
left: 6px; left: 7px;
width: 16px; width: 16px;
} }
} }
} }
&.left { &.left {
margin: -32px 15px 0 0; margin: 0 15px 0 0;
.tip-arrow { .tip-arrow {
right: -15px; right: -15px;
top: 20px; top: 0;
width: 15px; width: 16px;
height: 30px; height: 15px;
.box-shadow(0 -5px 8px -5px rgba(0, 0, 0, 0.2));
&:after { &:after {
top: 5px; top: -7px;
left: -8px; left: -7px;
width: 15px;
} }
} }
} }
&.top { &.top {
margin: 0 -32px 15px 0; margin: 0 0 15px 0;
.tip-arrow { .tip-arrow {
right: 0; right: 0;
@ -69,6 +72,10 @@
border-top-left-radius: 0; border-top-left-radius: 0;
} }
.left & {
border-top-right-radius: 0;
}
.top & { .top & {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }