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 () {
var showxy = this.target.offset();
var showxy = this.target.offset(),
innerHeight = Common.Utils.innerHeight();
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'});
else if (this.placement == 'left')
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', right: Common.Utils.innerWidth() - showxy.left - 5 + 'px'});
else // right
this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'});
this.cmpEl.css({bottom : innerHeight - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'});
else {// left or right
var top = showxy.top + this.target.height()/2,
height = this.cmpEl.height();
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() {

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

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