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

Hint Manager: changed the way of setting offsets, add hints

Browse source
This commit is contained in:
JuliaSvinareva 2021-06-01 20:07:24 +03:00
parent 7e14b4bcf5
commit 9b8d68594b
28 changed files with 392 additions and 209 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/common/main/lib/component/CheckBox.js
View file

@ -94,8 +94,8 @@ define([
checked : false, checked : false,
value : 'unchecked', value : 'unchecked',
template : _.template('<label class="checkbox-indeterminate" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input id="<%= id %>" type="checkbox" class="checkbox__native">' + template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
'<label for="<%= id %>" class="checkbox__shape"></label><span></span></label>'), '<label for="<%= id %>" class="checkbox__shape" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"></label><span></span></label>'),
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);

4
apps/common/main/lib/component/ColorButton.js
View file

@ -58,9 +58,9 @@ define([
template: _.template([ template: _.template([
'<div class="btn-group" id="<%= id %>">', '<div class="btn-group" id="<%= id %>">',
'<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">', '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<span>&nbsp;</span>', '<span>&nbsp;</span>',
'<span class="inner-box-caret" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">', '<span class="inner-box-caret">',
'<i class="caret"></i>', '<i class="caret"></i>',
'</span>', '</span>',
'</button>', '</button>',

2
apps/common/main/lib/component/ComboBorderSize.js
View file

@ -77,7 +77,7 @@ define([
Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({ Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
template: _.template([ template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">', '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="image"></i>', '<i class="image"></i>',
'<span class="text"></span>', '<span class="text"></span>',
'</div>', '</div>',

6
apps/common/main/lib/component/ComboDataView.js
View file

@ -62,7 +62,8 @@ define([
showLast: true, showLast: true,
minWidth: -1, minWidth: -1,
dataHint: '', dataHint: '',
dataHintDirection: '' dataHintDirection: '',
dataHintOffset: ''
}, },
template: _.template([ template: _.template([
@ -114,7 +115,8 @@ define([
] ]
}), }),
dataHint: this.options.dataHint, dataHint: this.options.dataHint,
dataHintDirection: this.options.dataHintDirection dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset
}); });
if (this.options.additionalMenuItems != null) { if (this.options.additionalMenuItems != null) {

54
apps/common/main/lib/component/HintManager.js
View file

@ -147,47 +147,51 @@ Common.UI.HintManager = new(function() {
if (!item.hasClass('disabled')) { if (!item.hasClass('disabled')) {
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>'); var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
var direction = item.attr('data-hint-direction'); var direction = item.attr('data-hint-direction');
var offsets = item.attr('data-hint-offset') ? item.attr('data-hint-offset').split(',').map((item) => (parseInt(item))) : [0, 0]; var offsets = item.attr('data-hint-offset');
var applyOffset = offsets === 'big' ? 6 : (offsets === 'medium' ? 4 : (offsets === 'small' ? 2 : 0));
if (applyOffset) {
switch (direction) {
case 'bottom':
offsets = [-applyOffset, 0];
break;
case 'top':
offsets = [applyOffset, 0];
break;
case 'right':
offsets = [0, -applyOffset];
break;
case 'left':
offsets = [0, applyOffset];
break;
}
} else {
offsets = offsets ? item.attr('data-hint-offset').split(',').map((item) => (parseInt(item))) : [0, 0];
}
var offset = item.offset(); var offset = item.offset();
if (direction === 'middle') if (direction === 'left-top')
hint.css({ hint.css({
top: offset.top + item.outerHeight() / 2 + 6 + offsets[0], top: offset.top - 10 + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1] left: offset.left - 10 + offsets[1]
}); });
else if (direction === 'top') else if (direction === 'top')
hint.css({ hint.css({
top: offset.top - 16 + offsets[0], top: offset.top - 18 + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1] left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
});
else if (direction === 'left-top')
hint.css({
top: offset.top - 10 + offsets[0],
left: offset.left - 14 + offsets[1]
});
else if (direction === 'right-top')
hint.css({
top: offset.top - 16 + offsets[0],
left: offset.left + item.outerWidth() - 4 + offsets[1]
}); });
else if (direction === 'right') else if (direction === 'right')
hint.css({ hint.css({
top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0], top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
left: offset.left + item.outerWidth() - 4 + offsets[1] left: offset.left + item.outerWidth() + offsets[1]
}); });
else if (direction === 'left') else if (direction === 'left')
hint.css({ hint.css({
top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0], top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
left: offset.left - 18 + offsets[1] left: offset.left - 18 + offsets[1]
}); });
else if (direction === 'left-bottom')
hint.css({
top: offset.top + item.outerHeight() - 3 + offsets[0],
left: offset.left - 16 + offsets[1]
});
else else
hint.css({ hint.css({
top: offset.top + item.outerHeight() + offsets[0], top: offset.top + item.outerHeight() + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1] left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
}); });
$(document.body).append(hint); $(document.body).append(hint);

5
apps/common/main/lib/component/MenuItem.js
View file

@ -104,13 +104,14 @@ define([
menu : null, menu : null,
canFocused : true, canFocused : true,
dataHint : '', dataHint : '',
dataHintDirection: '' dataHintDirection: '',
dataHintOffset: ''
}, },
tagName : 'li', tagName : 'li',
template: _.template([ template: _.template([
'<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; %> >', '<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >',
'<% if (!_.isEmpty(iconCls)) { %>', '<% if (!_.isEmpty(iconCls)) { %>',
'<span class="menu-item-icon <%= iconCls %>"></span>', '<span class="menu-item-icon <%= iconCls %>"></span>',
'<% } %>', '<% } %>',

4
apps/common/main/lib/component/Mixtbar.js
View file

@ -100,7 +100,7 @@ define([
'<li class="ribtab' + '<li class="ribtab' +
'<% if (items[i].haspanel===false) print(" x-lone") %>' + '<% if (items[i].haspanel===false) print(" x-lone") %>' +
'<% if (items[i].extcls) print(\' \' + items[i].extcls) %>">' + '<% if (items[i].extcls) print(\' \' + items[i].extcls) %>">' +
'<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0"><%= items[i].caption %></a>' + '<a data-tab="<%= items[i].action %>" data-title="<%= items[i].caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small"><%= items[i].caption %></a>' +
'</li>' + '</li>' +
'<% } %>' + '<% } %>' +
'<% } %>' + '<% } %>' +
@ -316,7 +316,7 @@ define([
return config.tabs[index].action; return config.tabs[index].action;
} }
var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><a data-tab="<%= action %>" data-title="<%= caption %>" data-hint="0"><%= caption %></a></li>'); var _tabTemplate = _.template('<li class="ribtab" style="display: none;"><a data-tab="<%= action %>" data-title="<%= caption %>" data-hint="0" data-hint-direction="bottom" data-hint-offset="small"><%= caption %></a></li>');
config.tabs[after + 1] = tab; config.tabs[after + 1] = tab;
var _after_action = _get_tab_action(after); var _after_action = _get_tab_action(after);

11
apps/common/main/lib/component/RadioBox.js
View file

@ -71,12 +71,16 @@ define([
disabled : false, disabled : false,
rendered : false, rendered : false,
template : _.template('<label class="radiobox"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' + template : _.template('<label class="radiobox" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"><input type="radio" name="<%= name %>" id="<%= id %>" class="button__radiobox">' +
'<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'), '<label for="<%= id %>" class="radiobox__shape"></label><span></span></label>'),
initialize : function(options) { initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options); Common.UI.BaseView.prototype.initialize.call(this, options);
this.dataHint = options.dataHint;
this.dataHintDirection = options.dataHintDirection;
this.dataHintOffset = options.dataHintOffset;
var me = this; var me = this;
this.name = this.options.name || Common.UI.getId(); this.name = this.options.name || Common.UI.getId();
@ -100,7 +104,10 @@ define([
el.html(this.template({ el.html(this.template({
labelText: this.options.labelText, labelText: this.options.labelText,
name: this.name, name: this.name,
id: Common.UI.getId('rdb-') id: Common.UI.getId('rdb-'),
dataHint: this.dataHint,
dataHintDirection: this.dataHintDirection,
dataHintOffset: this.dataHintOffset
})); }));
this.$radio = el.find('input[type=radio]'); this.$radio = el.find('input[type=radio]');

5
apps/common/main/lib/util/utils.js
View file

@ -858,7 +858,7 @@ Common.Utils.lockControls = function(causes, lock, opts, defControls) {
}); });
}; };
Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split, menu, toggle, dataHint, dataHintDirection) { Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split, menu, toggle, dataHint, dataHintDirection, dataHintOffset) {
var btnsArr = createButtonSet(); var btnsArr = createButtonSet();
btnsArr.setDisabled(true); btnsArr.setDisabled(true);
id = id || ("id-toolbar-" + iconCls); id = id || ("id-toolbar-" + iconCls);
@ -878,7 +878,8 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
lock: lock, lock: lock,
disabled: true, disabled: true,
dataHint: dataHint, dataHint: dataHint,
dataHintDirection: dataHintDirection dataHintDirection: dataHintDirection,
dataHintOffset: dataHintOffset
}); });
btnsArr.add(button); btnsArr.add(button);

8
apps/common/main/lib/view/Header.js
View file

@ -416,7 +416,9 @@ define([
cls: 'btn-header', cls: 'btn-header',
iconCls: 'toolbar__icon icon--inverse btn-goback', iconCls: 'toolbar__icon icon--inverse btn-goback',
split: true, split: true,
dataHint: '0' dataHint: '0',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
storeUsers = this.options.storeUsers; storeUsers = this.options.storeUsers;
@ -430,7 +432,9 @@ define([
cls: 'btn-header no-caret', cls: 'btn-header no-caret',
iconCls: 'toolbar__icon icon--inverse btn-ic-options', iconCls: 'toolbar__icon icon--inverse btn-ic-options',
menu: true, menu: true,
dataHint: '0' dataHint: '0',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
me.mnuZoom = {options: {value: 100}}; me.mnuZoom = {options: {value: 100}};

6
apps/common/main/lib/view/Plugins.js
View file

@ -161,7 +161,8 @@ define([
value: guid, value: guid,
hint: model.get('name'), hint: model.get('name'),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group); var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
@ -390,7 +391,8 @@ define([
value: guid, value: guid,
hint: model.get('name'), hint: model.get('name'),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
if ( btn.split ) { if ( btn.split ) {

8
apps/common/main/lib/view/Protection.js
View file

@ -231,7 +231,7 @@ define([
disabled: this._state.invisibleSignDisabled, disabled: this._state.invisibleSignDisabled,
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'medium'
}); });
this.btnsInvisibleSignature.push(button); this.btnsInvisibleSignature.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -249,7 +249,7 @@ define([
visible: !this._state.hasPassword, visible: !this._state.hasPassword,
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'medium'
}); });
this.btnsAddPwd.push(button); this.btnsAddPwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -267,7 +267,7 @@ define([
visible: this._state.hasPassword, visible: this._state.hasPassword,
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'medium'
}); });
this.btnsDelPwd.push(button); this.btnsDelPwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -285,7 +285,7 @@ define([
visible: this._state.hasPassword, visible: this._state.hasPassword,
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'medium'
}); });
this.btnsChangePwd.push(button); this.btnsChangePwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {

43
apps/common/main/lib/view/ReviewChanges.js
View file

@ -239,7 +239,8 @@ define([
split: !this.appConfig.canUseReviewPermissions, split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-save', iconCls: 'toolbar__icon btn-review-save',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnReject = new Common.UI.Button({ this.btnReject = new Common.UI.Button({
@ -248,7 +249,8 @@ define([
split: !this.appConfig.canUseReviewPermissions, split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-deny', iconCls: 'toolbar__icon btn-review-deny',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
if (this.appConfig.canFeatureComparison) if (this.appConfig.canFeatureComparison)
@ -256,7 +258,10 @@ define([
cls : 'btn-toolbar x-huge icon-top', cls : 'btn-toolbar x-huge icon-top',
caption : this.txtCompare, caption : this.txtCompare,
split : true, split : true,
iconCls: 'toolbar__icon btn-compare' iconCls: 'toolbar__icon btn-compare',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnTurnOn = new Common.UI.Button({ this.btnTurnOn = new Common.UI.Button({
@ -266,7 +271,8 @@ define([
split: !this.appConfig.isReviewOnly, split: !this.appConfig.isReviewOnly,
enableToggle: true, enableToggle: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnsTurnReview = [this.btnTurnOn]; this.btnsTurnReview = [this.btnTurnOn];
} }
@ -276,7 +282,8 @@ define([
iconCls: 'toolbar__icon btn-review-prev', iconCls: 'toolbar__icon btn-review-prev',
caption: this.txtPrev, caption: this.txtPrev,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnNext = new Common.UI.Button({ this.btnNext = new Common.UI.Button({
@ -284,7 +291,8 @@ define([
iconCls: 'toolbar__icon btn-review-next', iconCls: 'toolbar__icon btn-review-next',
caption: this.txtNext, caption: this.txtNext,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
if (!this.appConfig.isRestrictedEdit) {// hide Display mode option for fillForms and commenting mode if (!this.appConfig.isRestrictedEdit) {// hide Display mode option for fillForms and commenting mode
@ -329,7 +337,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }
} }
@ -338,7 +347,10 @@ define([
this.btnSharing = new Common.UI.Button({ this.btnSharing = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-ic-sharing', iconCls: 'toolbar__icon btn-ic-sharing',
caption: this.txtSharing caption: this.txtSharing,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }
@ -349,7 +361,8 @@ define([
caption: this.txtCoAuthMode, caption: this.txtCoAuthMode,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }
@ -362,7 +375,8 @@ define([
iconCls: 'toolbar__icon btn-ic-history', iconCls: 'toolbar__icon btn-ic-history',
caption: this.txtHistory, caption: this.txtHistory,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }
@ -373,7 +387,8 @@ define([
caption: this.txtChat, caption: this.txtChat,
enableToggle: true, enableToggle: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }
@ -384,7 +399,8 @@ define([
split: true, split: true,
iconCls: 'toolbar__icon btn-rem-comment', iconCls: 'toolbar__icon btn-rem-comment',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnCommentResolve = new Common.UI.Button({ this.btnCommentResolve = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
@ -392,7 +408,8 @@ define([
split: true, split: true,
iconCls: 'toolbar__icon btn-resolve-all', iconCls: 'toolbar__icon btn-resolve-all',
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
} }

3
apps/common/main/resources/less/hint-manager.less
View file

@ -2,7 +2,8 @@
position: absolute; position: absolute;
z-index: @zindex-navbar + 3; z-index: @zindex-navbar + 3;
width: auto; width: auto;
min-width: 20px; min-width: 18px;
height: 18px;
text-align: center; text-align: center;
background-color: @background-alt-key-hint-ie; background-color: @background-alt-key-hint-ie;
background-color: @background-alt-key-hint; background-color: @background-alt-key-hint;

2
apps/documenteditor/main/app/template/HeaderFooterSettings.template
View file

@ -71,7 +71,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<button type="button" class="btn btn-text-default" id="headerfooter-button-current" style="width:100%;"><%= scope.textInsertCurrent %></button> <button type="button" class="btn btn-text-default" id="headerfooter-button-current" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textInsertCurrent %></button>
</td> </td>
</tr> </tr>
<tr> <tr>

6
apps/documenteditor/main/app/template/ImageSettings.template
View file

@ -14,12 +14,12 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default" id="image-button-original-size" style="min-width:100px;width: auto;"><%= scope.textOriginalSize %></button> <button type="button" class="btn btn-text-default" id="image-button-original-size" style="min-width:100px;width: auto;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textOriginalSize %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="min-width:100px;width: auto;"><%= scope.textFitMargins %></button> <button type="button" class="btn btn-text-default" id="image-button-fit-margins" style="min-width:100px;width: auto;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textFitMargins %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -90,7 +90,7 @@
</tr> </tr>
<tr> <tr>
<td align="center" colspan=2> <td align="center" colspan=2>
<label class="link" id="image-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="image-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

14
apps/documenteditor/main/app/template/LeftMenu.template
View file

@ -1,14 +1,14 @@
<div id="view-left-menu" class="tool-menu left"> <div id="view-left-menu" class="tool-menu left">
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<button id="left-btn-search" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button> <button id="left-btn-search" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-search">&nbsp;</i></button>
<!-- /** coauthoring begin **/ --> <!-- /** coauthoring begin **/ -->
<button id="left-btn-comments" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button> <button id="left-btn-comments" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target="left-panel-comments"><i class="icon toolbar__icon btn-menu-comments">&nbsp;</i></button>
<button id="left-btn-chat" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button> <button id="left-btn-chat" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button>
<!-- /** coauthoring end **/ --> <!-- /** coauthoring end **/ -->
<button id="left-btn-plugins" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-plugin">&nbsp;</i></button> <button id="left-btn-plugins" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-plugin">&nbsp;</i></button>
<button id="left-btn-navigation" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button> <button id="left-btn-navigation" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-navigation">&nbsp;</i></button>
<button id="left-btn-support" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button> <button id="left-btn-support" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-support">&nbsp;</i></button>
<button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button> <button id="left-btn-about" class="btn btn-category" data-hint="0" data-hint-direction="right" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
</div> </div>
<div class="left-panel" style=""> <div class="left-panel" style="">
<!-- /** coauthoring begin **/ --> <!-- /** coauthoring begin **/ -->

2
apps/documenteditor/main/app/template/ParagraphSettings.template
View file

@ -83,7 +83,7 @@
</tr> </tr>
<tr> <tr>
<td align="center" colspan=2> <td align="center" colspan=2>
<label class="link" id="paragraph-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="-4, 0"><%= scope.textAdvanced %></label> <label class="link" id="paragraph-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

20
apps/documenteditor/main/app/template/RightMenu.template
View file

@ -23,15 +23,15 @@
</div> </div>
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<div class="ct-btn-category arrow-left"></div> <div class="ct-btn-category arrow-left"></div>
<button id="id-right-menu-text" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button> <button id="id-right-menu-text" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button>
<button id="id-right-menu-table" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button> <button id="id-right-menu-table" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button>
<button id="id-right-menu-image" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button> <button id="id-right-menu-image" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button>
<button id="id-right-menu-header" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button> <button id="id-right-menu-header" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button>
<button id="id-right-menu-shape" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button> <button id="id-right-menu-shape" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button>
<button id="id-right-menu-chart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button> <button id="id-right-menu-chart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button>
<button id="id-right-menu-textart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button> <button id="id-right-menu-textart" class="btn btn-category arrow-left" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
<button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button> <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
<button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button> <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
<button id="id-right-menu-form" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button> <button id="id-right-menu-form" class="btn btn-category arrow-left hidden" data-hint="0" data-hint-direction="left" data-hint-offset="big" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
</div> </div>
</div> </div>

8
apps/documenteditor/main/app/template/TableSettings.template
View file

@ -124,12 +124,12 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default" id="table-btn-distrub-rows" style="width:100%;"><%= scope.textDistributeRows %></button> <button type="button" class="btn btn-text-default" id="table-btn-distrub-rows" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textDistributeRows %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default" id="table-btn-distrub-cols" style="width:100%;"><%= scope.textDistributeCols %></button> <button type="button" class="btn btn-text-default" id="table-btn-distrub-cols" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textDistributeCols %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -139,7 +139,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default" id="table-btn-add-formula" style="width:100%;"><%= scope.textAddFormula %></button> <button type="button" class="btn btn-text-default" id="table-btn-add-formula" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textAddFormula %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -159,7 +159,7 @@
</tr> </tr>
<tr> <tr>
<td align="center" colspan=2> <td align="center" colspan=2>
<label class="link" id="table-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="table-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

51
apps/documenteditor/main/app/view/FileMenu.js
View file

@ -90,7 +90,8 @@ define([
caption : this.btnSaveCaption, caption : this.btnSaveCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
if ( !!this.options.miSave ) { if ( !!this.options.miSave ) {
@ -104,7 +105,8 @@ define([
caption : this.btnToEditCaption, caption : this.btnToEditCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miDownload = new Common.UI.MenuItem({ this.miDownload = new Common.UI.MenuItem({
@ -113,7 +115,8 @@ define([
caption : this.btnDownloadCaption, caption : this.btnDownloadCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miSaveCopyAs = new Common.UI.MenuItem({ this.miSaveCopyAs = new Common.UI.MenuItem({
@ -122,7 +125,8 @@ define([
caption : this.btnSaveCopyAsCaption, caption : this.btnSaveCopyAsCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miSaveAs = new Common.UI.MenuItem({ this.miSaveAs = new Common.UI.MenuItem({
@ -131,7 +135,8 @@ define([
caption : this.btnSaveAsCaption, caption : this.btnSaveAsCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miPrint = new Common.UI.MenuItem({ this.miPrint = new Common.UI.MenuItem({
@ -140,7 +145,8 @@ define([
caption : this.btnPrintCaption, caption : this.btnPrintCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miRename = new Common.UI.MenuItem({ this.miRename = new Common.UI.MenuItem({
@ -149,7 +155,8 @@ define([
caption : this.btnRenameCaption, caption : this.btnRenameCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
if ( !!this.options.miRename ) { if ( !!this.options.miRename ) {
@ -163,7 +170,8 @@ define([
caption : this.btnProtectCaption, caption : this.btnProtectCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
if ( !!this.options.miProtect ) { if ( !!this.options.miProtect ) {
@ -177,7 +185,8 @@ define([
caption : this.btnRecentFilesCaption, caption : this.btnRecentFilesCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miNew = new Common.UI.MenuItem({ this.miNew = new Common.UI.MenuItem({
@ -186,7 +195,8 @@ define([
caption : this.btnCreateNewCaption, caption : this.btnCreateNewCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miAccess = new Common.UI.MenuItem({ this.miAccess = new Common.UI.MenuItem({
@ -195,7 +205,8 @@ define([
caption : this.btnRightsCaption, caption : this.btnRightsCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miHistory = new Common.UI.MenuItem({ this.miHistory = new Common.UI.MenuItem({
@ -204,7 +215,8 @@ define([
caption : this.btnHistoryCaption, caption : this.btnHistoryCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.miHelp = new Common.UI.MenuItem({ this.miHelp = new Common.UI.MenuItem({
@ -213,7 +225,8 @@ define([
caption : this.btnHelpCaption, caption : this.btnHelpCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}); });
this.items = []; this.items = [];
@ -224,7 +237,8 @@ define([
caption : this.btnCloseMenuCaption, caption : this.btnCloseMenuCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}), }),
this.miSave, this.miSave,
this.miEdit, this.miEdit,
@ -242,7 +256,8 @@ define([
caption : this.btnInfoCaption, caption : this.btnInfoCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}), }),
this.miAccess, this.miAccess,
this.miHistory, this.miHistory,
@ -252,7 +267,8 @@ define([
caption : this.btnSettingsCaption, caption : this.btnSettingsCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}), }),
this.miHelp, this.miHelp,
new Common.UI.MenuItem({ new Common.UI.MenuItem({
@ -262,7 +278,8 @@ define([
caption : this.btnBackCaption, caption : this.btnBackCaption,
canFocused: false, canFocused: false,
dataHint: 1, dataHint: 1,
dataHintDirection: 'right' dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}) })
); );

34
apps/documenteditor/main/app/view/FileMenuPanels.js
View file

@ -210,7 +210,7 @@ define([
'</tr>','<tr class="divider edit"></tr>', '</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">', '<tr class="edit">',
'<td class="left"><label><%= scope.txtProofing %></label></td>', '<td class="left"><label><%= scope.txtProofing %></label></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.txtAutoCorrect %></button></div></td>', '<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
'</tr>','<tr class="divider edit"></tr>', '</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">', '<tr class="edit">',
'<td class="left"><label><%= scope.txtInput %></label></td>', '<td class="left"><label><%= scope.txtInput %></label></td>',
@ -272,7 +272,7 @@ define([
'</tr>','<tr class="divider macros"></tr>', '</tr>','<tr class="divider macros"></tr>',
'<tr class="fms-btn-apply">', '<tr class="fms-btn-apply">',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>', '<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>', '</tbody></table>',
'</div>', '</div>',
@ -280,7 +280,7 @@ define([
'<table style="margin: 10px 0;"><tbody>', '<table style="margin: 10px 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>', '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>', '</tbody></table>',
'</div>' '</div>'
@ -385,7 +385,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
/** coauthoring begin **/ /** coauthoring begin **/
@ -401,7 +401,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.cmbCoAuthMode = new Common.UI.ComboBox({ this.cmbCoAuthMode = new Common.UI.ComboBox({
@ -415,7 +415,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked')) if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1); me.chAutosave.setValue(1);
@ -445,7 +445,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this)); this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
@ -461,7 +461,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.cmbMacros = new Common.UI.ComboBox({ this.cmbMacros = new Common.UI.ComboBox({
@ -477,7 +477,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue); me.lblMacrosDesc.text(record.descValue);
}); });
@ -506,7 +506,7 @@ define([
], ],
dataHint: '2', dataHint: '2',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
$markup.find('.btn.primary').each(function(index, el){ $markup.find('.btn.primary').each(function(index, el){
@ -1022,7 +1022,7 @@ define([
'<table class="main" style="margin: 10px 0;">', '<table class="main" style="margin: 10px 0;">',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="-6, 0"><%= scope.okButtonText %></button></td>', '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</table>', '</table>',
'</div>' '</div>'
@ -1071,7 +1071,8 @@ define([
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false, validateOnBlur: false,
dataHint: '2', dataHint: '2',
dataHintDirection: 'left-top' dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
this.inputSubject = new Common.UI.InputField({ this.inputSubject = new Common.UI.InputField({
el : $markup.findById('#id-info-subject'), el : $markup.findById('#id-info-subject'),
@ -1079,7 +1080,8 @@ define([
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false, validateOnBlur: false,
dataHint: '2', dataHint: '2',
dataHintDirection: 'left-top' dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
this.inputComment = new Common.UI.InputField({ this.inputComment = new Common.UI.InputField({
el : $markup.findById('#id-info-comment'), el : $markup.findById('#id-info-comment'),
@ -1087,7 +1089,8 @@ define([
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false, validateOnBlur: false,
dataHint: '2', dataHint: '2',
dataHintDirection: 'left-top' dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
// modify info // modify info
@ -1118,7 +1121,8 @@ define([
validateOnBlur: false, validateOnBlur: false,
placeHolder: this.txtAddAuthor, placeHolder: this.txtAddAuthor,
dataHint: '2', dataHint: '2',
dataHintDirection: 'left-top' dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('changed:after', function(input, newValue, oldValue, e) { }).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return; if (newValue == oldValue) return;

40
apps/documenteditor/main/app/view/HeaderFooterSettings.js
View file

@ -237,7 +237,10 @@ define([
iconCls: 'options__icon options__icon-huge ' + item[2], iconCls: 'options__icon options__icon-huge ' + item[2],
posWhere:item[0], posWhere:item[0],
posAlign:item[1], posAlign:item[1],
hint: item[4] hint: item[4],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
_btn.on('click', _.bind(this.onBtnPositionClick, this)); _btn.on('click', _.bind(this.onBtnPositionClick, this));
this._btnsPosition.push( _btn ); this._btnsPosition.push( _btn );
@ -251,7 +254,10 @@ define([
value: '1.25 cm', value: '1.25 cm',
defaultUnit : "cm", defaultUnit : "cm",
maxValue: 55.88, maxValue: 55.88,
minValue: 0 minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.spinners.push(this.numPosition); this.spinners.push(this.numPosition);
this.lockedControls.push(this.numPosition); this.lockedControls.push(this.numPosition);
@ -260,19 +266,28 @@ define([
this.chDiffFirst = new Common.UI.CheckBox({ this.chDiffFirst = new Common.UI.CheckBox({
el: $('#headerfooter-check-diff-first'), el: $('#headerfooter-check-diff-first'),
labelText: this.textDiffFirst labelText: this.textDiffFirst,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chDiffFirst); this.lockedControls.push(this.chDiffFirst);
this.chDiffOdd = new Common.UI.CheckBox({ this.chDiffOdd = new Common.UI.CheckBox({
el: $('#headerfooter-check-diff-odd'), el: $('#headerfooter-check-diff-odd'),
labelText: this.textDiffOdd labelText: this.textDiffOdd,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chDiffOdd); this.lockedControls.push(this.chDiffOdd);
this.chSameAs = new Common.UI.CheckBox({ this.chSameAs = new Common.UI.CheckBox({
el: $('#headerfooter-check-same-as'), el: $('#headerfooter-check-same-as'),
labelText: this.textSameAs labelText: this.textSameAs,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.numPosition.on('change', _.bind(this.onNumPositionChange, this)); this.numPosition.on('change', _.bind(this.onNumPositionChange, this));
@ -291,14 +306,20 @@ define([
el: $('#headerfooter-radio-prev'), el: $('#headerfooter-radio-prev'),
labelText: this.textPrev, labelText: this.textPrev,
name: 'asc-radio-header-numbering', name: 'asc-radio-header-numbering',
checked: true checked: true,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioPrev, this)); }).on('change', _.bind(this.onRadioPrev, this));
this.lockedControls.push(this.radioPrev); this.lockedControls.push(this.radioPrev);
this.radioFrom = new Common.UI.RadioBox({ this.radioFrom = new Common.UI.RadioBox({
el: $('#headerfooter-radio-from'), el: $('#headerfooter-radio-from'),
labelText: this.textFrom, labelText: this.textFrom,
name: 'asc-radio-header-numbering' name: 'asc-radio-header-numbering',
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioFrom, this)); }).on('change', _.bind(this.onRadioFrom, this));
this.lockedControls.push(this.radioFrom); this.lockedControls.push(this.radioFrom);
@ -310,7 +331,10 @@ define([
defaultUnit : "", defaultUnit : "",
maxValue: 2147483646, maxValue: 2147483646,
minValue: 0, minValue: 0,
allowDecimal: false allowDecimal: false,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.numFrom); this.lockedControls.push(this.numFrom);
this.numFrom.on('change', _.bind(this.onNumFromChange, this)); this.numFrom.on('change', _.bind(this.onNumFromChange, this));

35
apps/documenteditor/main/app/view/ImageSettings.js
View file

@ -136,7 +136,10 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-10, 0'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>" style="">', '<div class="item-icon-box" id="<%= id %>" style="">',
@ -187,7 +190,10 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-270', iconCls: 'toolbar__icon btn-rotate-270',
value: 0, value: 0,
hint: this.textHint270 hint: this.textHint270,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this)); this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate270); this.lockedControls.push(this.btnRotate270);
@ -197,7 +203,10 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-90', iconCls: 'toolbar__icon btn-rotate-90',
value: 1, value: 1,
hint: this.textHint90 hint: this.textHint90,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this)); this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate90); this.lockedControls.push(this.btnRotate90);
@ -207,7 +216,10 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-vert', iconCls: 'toolbar__icon btn-flip-vert',
value: 0, value: 0,
hint: this.textHintFlipV hint: this.textHintFlipV,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this)); this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipV); this.lockedControls.push(this.btnFlipV);
@ -217,7 +229,10 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-hor', iconCls: 'toolbar__icon btn-flip-hor',
value: 1, value: 1,
hint: this.textHintFlipH hint: this.textHintFlipH,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this)); this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipH); this.lockedControls.push(this.btnFlipH);
@ -250,7 +265,10 @@ define([
caption: this.textCropFit, caption: this.textCropFit,
value: 2 value: 2
}] }]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.btnCrop.on('click', _.bind(this.onCrop, this)); this.btnCrop.on('click', _.bind(this.onCrop, this));
this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this)); this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
@ -269,7 +287,10 @@ define([
{caption: this.textFromUrl, value: 1}, {caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2} {caption: this.textFromStorage, value: 2}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnSelectImage); this.lockedControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this)); this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));

24
apps/documenteditor/main/app/view/Links.js
View file

@ -161,9 +161,9 @@ define([
var me = this, var me = this,
$host = me.toolbar.$el; $host = me.toolbar.$el;
this.btnsContents = Common.Utils.injectButtons($host.find('.btn-slot.btn-contents'), '', 'toolbar__icon btn-contents', me.capBtnInsContents, undefined, true, true, undefined, '1', 'bottom' ); this.btnsContents = Common.Utils.injectButtons($host.find('.btn-slot.btn-contents'), '', 'toolbar__icon btn-contents', me.capBtnInsContents, undefined, true, true, undefined, '1', 'bottom', 'small');
this.btnsNotes = Common.Utils.injectButtons($host.find('.btn-slot.slot-notes'), '', 'toolbar__icon btn-notes', me.capBtnInsFootnote, undefined, true, true, undefined, '1', 'bottom'); this.btnsNotes = Common.Utils.injectButtons($host.find('.btn-slot.slot-notes'), '', 'toolbar__icon btn-notes', me.capBtnInsFootnote, undefined, true, true, undefined, '1', 'bottom', 'small');
this.btnsHyperlink = Common.Utils.injectButtons($host.find('.btn-slot.slot-inshyperlink'), '', 'toolbar__icon btn-inserthyperlink', me.capBtnInsLink, undefined, undefined, undefined, undefined, '1', 'bottom'); this.btnsHyperlink = Common.Utils.injectButtons($host.find('.btn-slot.slot-inshyperlink'), '', 'toolbar__icon btn-inserthyperlink', me.capBtnInsLink, undefined, undefined, undefined, undefined, '1', 'bottom', 'small');
Array.prototype.push.apply(this.paragraphControls, this.btnsContents.concat(this.btnsNotes, this.btnsHyperlink)); Array.prototype.push.apply(this.paragraphControls, this.btnsContents.concat(this.btnsNotes, this.btnsHyperlink));
this.btnContentsUpdate = new Common.UI.Button({ this.btnContentsUpdate = new Common.UI.Button({
@ -175,7 +175,8 @@ define([
menu: true, menu: true,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnContentsUpdate); this.paragraphControls.push(this.btnContentsUpdate);
@ -186,7 +187,8 @@ define([
caption: this.capBtnBookmarks, caption: this.capBtnBookmarks,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnBookmarks); this.paragraphControls.push(this.btnBookmarks);
@ -197,7 +199,8 @@ define([
caption: this.capBtnCaption, caption: this.capBtnCaption,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnCaption); this.paragraphControls.push(this.btnCaption);
@ -208,7 +211,8 @@ define([
caption: this.capBtnCrossRef, caption: this.capBtnCrossRef,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnCrossRef); this.paragraphControls.push(this.btnCrossRef);
@ -219,7 +223,8 @@ define([
caption: this.capBtnTOF, caption: this.capBtnTOF,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'right' dataHintDirection: 'left',
dataHintOffset: 'medium'
}); });
this.paragraphControls.push(this.btnTableFigures); this.paragraphControls.push(this.btnTableFigures);
@ -230,7 +235,8 @@ define([
caption: this.capBtnContentsUpdate, caption: this.capBtnContentsUpdate,
disabled: true, disabled: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'right' dataHintDirection: 'left',
dataHintOffset: 'medium'
}); });
this.paragraphControls.push(this.btnTableFiguresUpdate); this.paragraphControls.push(this.btnTableFiguresUpdate);

20
apps/documenteditor/main/app/view/ParagraphSettings.js
View file

@ -120,7 +120,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.cmbLineRule.setValue(''); this.cmbLineRule.setValue('');
this.lockedControls.push(this.cmbLineRule); this.lockedControls.push(this.cmbLineRule);
@ -136,7 +136,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.lockedControls.push(this.numLineHeight); this.lockedControls.push(this.numLineHeight);
@ -153,7 +153,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.spinners.push(this.numSpacingBefore); this.spinners.push(this.numSpacingBefore);
this.lockedControls.push(this.numSpacingBefore); this.lockedControls.push(this.numSpacingBefore);
@ -171,7 +171,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.spinners.push(this.numSpacingAfter); this.spinners.push(this.numSpacingAfter);
this.lockedControls.push(this.numSpacingAfter); this.lockedControls.push(this.numSpacingAfter);
@ -182,7 +182,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'left', dataHintDirection: 'left',
dataHintOffset: '-8, 0' dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chAddInterval); this.lockedControls.push(this.chAddInterval);
@ -193,7 +193,7 @@ define([
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-4, 0' dataHintOffset: 'medium'
}); });
this.lockedControls.push(this.btnColor); this.lockedControls.push(this.btnColor);
@ -209,7 +209,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.spinners.push(this.numIndentsLeft); this.spinners.push(this.numIndentsLeft);
this.lockedControls.push(this.numIndentsLeft); this.lockedControls.push(this.numIndentsLeft);
@ -226,7 +226,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.spinners.push(this.numIndentsRight); this.spinners.push(this.numIndentsRight);
this.lockedControls.push(this.numIndentsRight); this.lockedControls.push(this.numIndentsRight);
@ -241,7 +241,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.cmbSpecial.setValue(''); this.cmbSpecial.setValue('');
this.lockedControls.push(this.cmbSpecial); this.lockedControls.push(this.cmbSpecial);
@ -258,7 +258,7 @@ define([
disabled: this._locked, disabled: this._locked,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom', dataHintDirection: 'bottom',
dataHintOffset: '-6, 0' dataHintOffset: 'big'
}); });
this.spinners.push(this.numSpecialBy); this.spinners.push(this.numSpecialBy);
this.lockedControls.push(this.numSpecialBy); this.lockedControls.push(this.numSpecialBy);

95
apps/documenteditor/main/app/view/TableSettings.js
View file

@ -241,37 +241,55 @@ define([
this.chHeader = new Common.UI.CheckBox({ this.chHeader = new Common.UI.CheckBox({
el: $('#table-checkbox-header'), el: $('#table-checkbox-header'),
labelText: this.textHeader labelText: this.textHeader,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chHeader); this.lockedControls.push(this.chHeader);
this.chTotal = new Common.UI.CheckBox({ this.chTotal = new Common.UI.CheckBox({
el: $('#table-checkbox-total'), el: $('#table-checkbox-total'),
labelText: this.textTotal labelText: this.textTotal,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chTotal); this.lockedControls.push(this.chTotal);
this.chBanded = new Common.UI.CheckBox({ this.chBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-banded'), el: $('#table-checkbox-banded'),
labelText: this.textBanded labelText: this.textBanded,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chBanded); this.lockedControls.push(this.chBanded);
this.chFirst = new Common.UI.CheckBox({ this.chFirst = new Common.UI.CheckBox({
el: $('#table-checkbox-first'), el: $('#table-checkbox-first'),
labelText: this.textFirst labelText: this.textFirst,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chFirst); this.lockedControls.push(this.chFirst);
this.chLast = new Common.UI.CheckBox({ this.chLast = new Common.UI.CheckBox({
el: $('#table-checkbox-last'), el: $('#table-checkbox-last'),
labelText: this.textLast labelText: this.textLast,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chLast); this.lockedControls.push(this.chLast);
this.chColBanded = new Common.UI.CheckBox({ this.chColBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-col-banded'), el: $('#table-checkbox-col-banded'),
labelText: this.textBanded labelText: this.textBanded,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.lockedControls.push(this.chColBanded); this.lockedControls.push(this.chColBanded);
@ -283,16 +301,16 @@ define([
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5)); this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
var _arrBorderPosition = [ var _arrBorderPosition = [
['l', 'toolbar__icon btn-border-left', 'table-button-border-left', this.tipLeft], ['l', 'toolbar__icon btn-border-left', 'table-button-border-left', this.tipLeft, 'bottom'],
['c', 'toolbar__icon btn-border-insidevert', 'table-button-border-inner-vert', this.tipInnerVert], ['c', 'toolbar__icon btn-border-insidevert', 'table-button-border-inner-vert', this.tipInnerVert, 'bottom'],
['r', 'toolbar__icon btn-border-right', 'table-button-border-right', this.tipRight], ['r', 'toolbar__icon btn-border-right', 'table-button-border-right', this.tipRight, 'bottom'],
['t', 'toolbar__icon btn-border-top', 'table-button-border-top', this.tipTop], ['t', 'toolbar__icon btn-border-top', 'table-button-border-top', this.tipTop, 'bottom'],
['m', 'toolbar__icon btn-border-insidehor', 'table-button-border-inner-hor', this.tipInnerHor], ['m', 'toolbar__icon btn-border-insidehor', 'table-button-border-inner-hor', this.tipInnerHor, 'bottom'],
['b', 'toolbar__icon btn-border-bottom', 'table-button-border-bottom', this.tipBottom], ['b', 'toolbar__icon btn-border-bottom', 'table-button-border-bottom', this.tipBottom, 'bottom'],
['cm', 'toolbar__icon btn-border-inside', 'table-button-border-inner', this.tipInner], ['cm', 'toolbar__icon btn-border-inside', 'table-button-border-inner', this.tipInner, 'top'],
['lrtb', 'toolbar__icon btn-border-out', 'table-button-border-outer', this.tipOuter], ['lrtb', 'toolbar__icon btn-border-out', 'table-button-border-outer', this.tipOuter, 'top'],
['lrtbcm', 'toolbar__icon btn-border-all', 'table-button-border-all', this.tipAll], ['lrtbcm', 'toolbar__icon btn-border-all', 'table-button-border-all', this.tipAll, 'top'],
['', 'toolbar__icon btn-border-no', 'table-button-border-none', this.tipNone] ['', 'toolbar__icon btn-border-no', 'table-button-border-none', this.tipNone, 'top']
]; ];
this._btnsBorderPosition = []; this._btnsBorderPosition = [];
@ -302,7 +320,10 @@ define([
cls: 'btn-toolbar borders--small', cls: 'btn-toolbar borders--small',
iconCls: item[1], iconCls: item[1],
strId :item[0], strId :item[0],
hint: item[3] hint: item[3],
dataHint: '1',
dataHintDirection: item[4],
dataHintOffset: 'small'
}); });
_btn.on('click', _.bind(this.onBtnBordersClick, this)); _btn.on('click', _.bind(this.onBtnBordersClick, this));
this._btnsBorderPosition.push( _btn ); this._btnsBorderPosition.push( _btn );
@ -311,7 +332,10 @@ define([
this.cmbBorderSize = new Common.UI.ComboBorderSize({ this.cmbBorderSize = new Common.UI.ComboBorderSize({
el: $('#table-combo-border-size'), el: $('#table-combo-border-size'),
style: "width: 93px;" style: "width: 93px;",
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.BorderSize = this.cmbBorderSize.store.at(1).get('value'); this.BorderSize = this.cmbBorderSize.store.at(1).get('value');
this.cmbBorderSize.setValue(this.BorderSize); this.cmbBorderSize.setValue(this.BorderSize);
@ -342,7 +366,10 @@ define([
{ caption: this.mergeCellsText, value: 11 }, { caption: this.mergeCellsText, value: 11 },
{ caption: this.splitCellsText, value: 12 } { caption: this.splitCellsText, value: 12 }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2]; this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1]; this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
@ -358,7 +385,10 @@ define([
this.chRepeatRow = new Common.UI.CheckBox({ this.chRepeatRow = new Common.UI.CheckBox({
el: $('#table-checkbox-repeat-row'), el: $('#table-checkbox-repeat-row'),
labelText: this.strRepeatRow labelText: this.strRepeatRow,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this)); this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this));
this.lockedControls.push(this.chRepeatRow); this.lockedControls.push(this.chRepeatRow);
@ -370,7 +400,10 @@ define([
defaultUnit : "cm", defaultUnit : "cm",
value: '1 cm', value: '1 cm',
maxValue: 55.88, maxValue: 55.88,
minValue: 0 minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){ this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var _props = new Asc.CTableProp(); var _props = new Asc.CTableProp();
@ -388,7 +421,10 @@ define([
defaultUnit : "cm", defaultUnit : "cm",
value: '1 cm', value: '1 cm',
maxValue: 55.88, maxValue: 55.88,
minValue: 0 minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){ this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var _props = new Asc.CTableProp(); var _props = new Asc.CTableProp();
@ -651,14 +687,20 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn'), parentEl: $('#table-border-color-btn'),
color: 'auto', color: 'auto',
auto: true auto: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker(); this.borderColor = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#table-back-color-btn'), parentEl: $('#table-back-color-btn'),
transparent: true transparent: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnBackColor); this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker(); this.colorsBack = this.btnBackColor.getPicker();
@ -682,7 +724,10 @@ define([
items: [ items: [
{ template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') } { template: _.template('<div id="id-table-menu-template" class="menu-table-template" style="margin: 5px 5px 5px 10px;"></div>') }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.btnTableTemplate.on('render:after', function(btn) { this.btnTableTemplate.on('render:after', function(btn) {
self.mnuTableTemplatePicker = new Common.UI.DataView({ self.mnuTableTemplatePicker = new Common.UI.DataView({

87
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -158,8 +158,8 @@ define([
id: 'id-toolbar-btn-copy', id: 'id-toolbar-btn-copy',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-copy', iconCls: 'toolbar__icon btn-copy',
dataHint: '0', dataHint: '1',
dataHintDirection: 'right' dataHintDirection: 'top'
}); });
this.toolbarControls.push(this.btnCopy); this.toolbarControls.push(this.btnCopy);
@ -167,8 +167,8 @@ define([
id: 'id-toolbar-btn-paste', id: 'id-toolbar-btn-paste',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-paste', iconCls: 'toolbar__icon btn-paste',
dataHint: '0', dataHint: '1',
dataHintDirection: 'right' dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnPaste); this.paragraphControls.push(this.btnPaste);
@ -519,7 +519,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertTable); this.paragraphControls.push(this.btnInsertTable);
@ -536,7 +537,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertImage); this.paragraphControls.push(this.btnInsertImage);
@ -547,7 +549,8 @@ define([
iconCls: 'toolbar__icon btn-insertchart', iconCls: 'toolbar__icon btn-insertchart',
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertChart); this.paragraphControls.push(this.btnInsertChart);
@ -558,7 +561,8 @@ define([
caption: me.capBtnInsTextbox, caption: me.capBtnInsTextbox,
enableToggle: true, enableToggle: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertText); this.paragraphControls.push(this.btnInsertText);
this.btnInsertTextArt = new Common.UI.Button({ this.btnInsertTextArt = new Common.UI.Button({
@ -573,7 +577,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertTextArt); this.paragraphControls.push(this.btnInsertTextArt);
@ -584,7 +589,8 @@ define([
caption: me.capBtnInsHeader, caption: me.capBtnInsHeader,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.mnuPageNumberPosPicker = { this.mnuPageNumberPosPicker = {
conf: {disabled: false}, conf: {disabled: false},
@ -608,7 +614,8 @@ define([
iconCls: 'toolbar__icon btn-datetime', iconCls: 'toolbar__icon btn-datetime',
caption: me.capBtnDateTime, caption: me.capBtnDateTime,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsDateTime); this.paragraphControls.push(this.btnInsDateTime);
@ -618,7 +625,8 @@ define([
iconCls: 'toolbar__icon btn-blankpage', iconCls: 'toolbar__icon btn-blankpage',
caption: me.capBtnBlankPage, caption: me.capBtnBlankPage,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnBlankPage); this.paragraphControls.push(this.btnBlankPage);
@ -630,7 +638,8 @@ define([
enableToggle: true, enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}), menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertShape); this.paragraphControls.push(this.btnInsertShape);
@ -642,7 +651,8 @@ define([
split: true, split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}), menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertEquation); this.paragraphControls.push(this.btnInsertEquation);
@ -652,7 +662,8 @@ define([
iconCls: 'toolbar__icon btn-symbol', iconCls: 'toolbar__icon btn-symbol',
caption: me.capBtnInsSymbol, caption: me.capBtnInsSymbol,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnInsertSymbol); this.paragraphControls.push(this.btnInsertSymbol);
@ -694,7 +705,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnDropCap); this.paragraphControls.push(this.btnDropCap);
@ -770,7 +782,10 @@ define([
}) })
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
// this.paragraphControls.push(this.btnContentControls); // this.paragraphControls.push(this.btnContentControls);
@ -827,7 +842,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.paragraphControls.push(this.btnColumns); this.paragraphControls.push(this.btnColumns);
@ -858,7 +874,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.toolbarControls.push(this.btnPageOrient); this.toolbarControls.push(this.btnPageOrient);
@ -924,7 +941,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.toolbarControls.push(this.btnPageMargins); this.toolbarControls.push(this.btnPageMargins);
@ -1050,7 +1068,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
this.toolbarControls.push(this.btnPageSize); this.toolbarControls.push(this.btnPageSize);
@ -1100,7 +1119,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
@ -1152,7 +1172,8 @@ define([
caption: me.capImgAlign, caption: me.capImgAlign,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.btnImgGroup = new Common.UI.Button({ me.btnImgGroup = new Common.UI.Button({
@ -1161,7 +1182,8 @@ define([
caption: me.capImgGroup, caption: me.capImgGroup,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.btnImgForward = new Common.UI.Button({ me.btnImgForward = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
@ -1170,7 +1192,8 @@ define([
split: true, split: true,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.btnImgBackward = new Common.UI.Button({ me.btnImgBackward = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
@ -1179,7 +1202,8 @@ define([
split: true, split: true,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.btnImgWrapping = new Common.UI.Button({ me.btnImgWrapping = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
@ -1187,7 +1211,8 @@ define([
caption: me.capImgWrapping, caption: me.capImgWrapping,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.btnWatermark = new Common.UI.Button({ me.btnWatermark = new Common.UI.Button({
@ -1208,7 +1233,8 @@ define([
] ]
}), }),
dataHint: '1', dataHint: '1',
dataHintDirection: 'bottom' dataHintDirection: 'bottom',
dataHintOffset: 'small'
}); });
me.toolbarControls.push(me.btnImgAlign, me.toolbarControls.push(me.btnImgAlign,
@ -1279,7 +1305,8 @@ define([
itemHeight: 38, itemHeight: 38,
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,
dataHint: '1', dataHint: '1',
dataHintDirection: 'middle', dataHintDirection: 'bottom',
dataHintOffset: '-16, 0',
enableKeyEvents: true, enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem], additionalMenuItems: [this.listStylesAdditionalMenuItem],
beforeOpenHandler: function (e) { beforeOpenHandler: function (e) {
@ -1527,7 +1554,7 @@ define([
_injectComponent('#slot-img-wrapping', this.btnImgWrapping); _injectComponent('#slot-img-wrapping', this.btnImgWrapping);
_injectComponent('#slot-btn-watermark', this.btnWatermark); _injectComponent('#slot-btn-watermark', this.btnWatermark);
this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom'); this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom', 'small');
Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak); Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);
return $host; return $host;