[Common] Add help button to window component

This commit is contained in:
Julia Radzhabova 2020-07-21 15:32:58 +03:00
parent a5f0371a9e
commit d53ae5fab9
2 changed files with 37 additions and 1 deletions

View file

@ -152,6 +152,7 @@ define([
alias: 'Window',
cls: '',
toolclose: 'close',
help: false,
maxwidth: undefined,
maxheight: undefined,
minwidth: 0,
@ -162,9 +163,14 @@ define([
var template = '<div class="asc-window<%= modal?" modal":"" %><%= cls?" "+cls:"" %>" id="<%= id %>" style="width:<%= width %>px;">' +
'<% if (header==true) { %>' +
'<div class="header">' +
'<div class="tools">' +
'<% if (closable!==false) %>' +
'<div class="tool close img-commonctrl"></div>' +
'<% %>' +
'<% if (help===true) %>' +
'<div class="tool help">?</div>' +
'<% %>' +
'</div>' +
'<div class="title"><%= title %></div> ' +
'</div>' +
'<% } %>' +
@ -284,7 +290,7 @@ define([
/* window drag's functions */
function _dragstart(event) {
if ( $(event.target).hasClass('close') ) return;
if ( $(event.target).hasClass('close') || $(event.target).hasClass('help') ) return;
Common.UI.Menu.Manager.hideAll();
var zoom = (event instanceof jQuery.Event) ? Common.Utils.zoom() : 1;
this.dragging.enabled = true;
@ -635,8 +641,13 @@ define([
else
(this.initConfig.toolclose=='hide') ? this.hide() : this.close();
};
var dohelp = function() {
if ( this.$window.find('.tool.help').hasClass('disabled') ) return;
this.fireEvent('help',this);
};
this.$window.find('.header').on('mousedown', this.binding.dragStart);
this.$window.find('.tool.close').on('click', _.bind(doclose, this));
this.$window.find('.tool.help').on('click', _.bind(dohelp, this));
if (!this.initConfig.modal)
Common.Gateway.on('processmouse', _.bind(_onProcessMouse, this));

View file

@ -59,6 +59,12 @@
cursor: move;
.tools {
position: absolute;
right: 0;
padding-right: 6px;
}
.tool {
float: right;
width: 16px;
@ -80,6 +86,25 @@
cursor: default;
}
}
&.help {
width: 20px;
margin-right:0;
line-height: 14px;
font-size: 14px;
font-weight: bold;
color: #444;
opacity: 0.7;
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.3;
cursor: default;
}
}
}
&.resizing {