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

SynchronizeTip: added 'left' placement, added option for changing link text and visibility.

Browse source 
Bug with creating several synchronize tips.
This commit is contained in:
Julia Radzhabova 2017-11-08 17:35:23 +03:00
parent d1bdace072
commit 5623c7dd3e
2 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -43,7 +43,8 @@ define([
options : { options : {
target : $(document.body), target : $(document.body),
text : '', text : '',
placement: 'right' placement: 'right',
showLink: true
}, },
template: _.template([ template: _.template([
@ -54,7 +55,9 @@ define([
'<div class="tip-text" style="width: 260px;"><%= scope.text %></div>', '<div class="tip-text" style="width: 260px;"><%= scope.text %></div>',
'<div class="close img-commonctrl"></div>', '<div class="close img-commonctrl"></div>',
'</div>', '</div>',
'<div class="show-link"><label><%= scope.textDontShow %></label></div>', '<% if ( scope.showLink ) { %>',
'<div class="show-link"><label><%= scope.textLink %></label></div>',
'<% } %>',
'</div>', '</div>',
'</div>' '</div>'
].join('')), ].join('')),
@ -65,7 +68,9 @@ define([
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
this.target = this.options.target; this.target = this.options.target;
this.text = !_.isEmpty(this.options.text) ? this.options.text : this.textSynchronize; this.text = !_.isEmpty(this.options.text) ? this.options.text : this.textSynchronize;
this.textLink = !_.isEmpty(this.options.textLink) ? this.options.textLink : this.textDontShow;
this.placement = this.options.placement; this.placement = this.options.placement;
this.showLink = this.options.showLink;
}, },
render: function() { render: function() {
@ -95,8 +100,12 @@ define([
applyPlacement: function () { applyPlacement: function () {
var showxy = this.target.offset(); var showxy = this.target.offset();
(this.placement == 'top') ? this.cmpEl.css({bottom : Common.Utils.innerHeight() - showxy.top + 'px', right: Common.Utils.innerWidth() - showxy.left - this.target.width()/2 + 'px'}) if (this.placement == 'top')
: this.cmpEl.css({top : showxy.top + this.target.height()/2 + 'px', left: showxy.left + this.target.width() + 'px'}); 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'});
}, },
isVisible: function() { isVisible: function() {

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

@ -23,6 +23,21 @@
} }
} }
&.left {
margin: -32px 15px 0 0;
.tip-arrow {
right: -15px;
top: 20px;
width: 15px;
height: 30px;
&:after {
top: 5px;
left: -8px;
}
}
}
&.top { &.top {
margin: 0 -32px 15px 0; margin: 0 -32px 15px 0;