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,
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">' +
'<label for="<%= id %>" class="checkbox__shape"></label><span></span></label>'),
template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' +
'<label for="<%= id %>" class="checkbox__shape" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"></label><span></span></label>'),
initialize : function(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([
'<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 class="inner-box-caret" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<span class="inner-box-caret">',
'<i class="caret"></i>',
'</span>',
'</button>',

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

@ -77,7 +77,7 @@ define([
Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
template: _.template([
'<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>',
'<span class="text"></span>',
'</div>',

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

@ -62,7 +62,8 @@ define([
showLast: true,
minWidth: -1,
dataHint: '',
dataHintDirection: ''
dataHintDirection: '',
dataHintOffset: ''
},
template: _.template([
@ -114,7 +115,8 @@ define([
]
}),
dataHint: this.options.dataHint,
dataHintDirection: this.options.dataHintDirection
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset
});
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')) {
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>');
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();
if (direction === 'middle')
if (direction === 'left-top')
hint.css({
top: offset.top + item.outerHeight() / 2 + 6 + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
top: offset.top - 10 + offsets[0],
left: offset.left - 10 + offsets[1]
});
else if (direction === 'top')
hint.css({
top: offset.top - 16 + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 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]
top: offset.top - 18 + offsets[0],
left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
});
else if (direction === 'right')
hint.css({
top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
left: offset.left + item.outerWidth() - 4 + offsets[1]
top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
left: offset.left + item.outerWidth() + offsets[1]
});
else if (direction === 'left')
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]
});
else if (direction === 'left-bottom')
hint.css({
top: offset.top + item.outerHeight() - 3 + offsets[0],
left: offset.left - 16 + offsets[1]
});
else
hint.css({
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);

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

@ -104,13 +104,14 @@ define([
menu : null,
canFocused : true,
dataHint : '',
dataHintDirection: ''
dataHintDirection: '',
dataHintOffset: ''
},
tagName : 'li',
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)) { %>',
'<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' +
'<% if (items[i].haspanel===false) print(" x-lone") %>' +
'<% 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>' +
'<% } %>' +
'<% } %>' +
@ -316,7 +316,7 @@ define([
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;
var _after_action = _get_tab_action(after);

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

@ -71,12 +71,16 @@ define([
disabled : 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>'),
initialize : function(options) {
Common.UI.BaseView.prototype.initialize.call(this, options);
this.dataHint = options.dataHint;
this.dataHintDirection = options.dataHintDirection;
this.dataHintOffset = options.dataHintOffset;
var me = this;
this.name = this.options.name || Common.UI.getId();
@ -100,7 +104,10 @@ define([
el.html(this.template({
labelText: this.options.labelText,
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]');

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();
btnsArr.setDisabled(true);
id = id || ("id-toolbar-" + iconCls);
@ -878,7 +878,8 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
lock: lock,
disabled: true,
dataHint: dataHint,
dataHintDirection: dataHintDirection
dataHintDirection: dataHintDirection,
dataHintOffset: dataHintOffset
});
btnsArr.add(button);

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

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

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

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

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

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

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

@ -239,7 +239,8 @@ define([
split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-save',
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnReject = new Common.UI.Button({
@ -248,7 +249,8 @@ define([
split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-deny',
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
if (this.appConfig.canFeatureComparison)
@ -256,7 +258,10 @@ define([
cls : 'btn-toolbar x-huge icon-top',
caption : this.txtCompare,
split : true,
iconCls: 'toolbar__icon btn-compare'
iconCls: 'toolbar__icon btn-compare',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnTurnOn = new Common.UI.Button({
@ -266,7 +271,8 @@ define([
split: !this.appConfig.isReviewOnly,
enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnsTurnReview = [this.btnTurnOn];
}
@ -276,7 +282,8 @@ define([
iconCls: 'toolbar__icon btn-review-prev',
caption: this.txtPrev,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnNext = new Common.UI.Button({
@ -284,7 +291,8 @@ define([
iconCls: 'toolbar__icon btn-review-next',
caption: this.txtNext,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
if (!this.appConfig.isRestrictedEdit) {// hide Display mode option for fillForms and commenting mode
@ -329,7 +337,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
}
}
@ -338,7 +347,10 @@ define([
this.btnSharing = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
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,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
}
@ -362,7 +375,8 @@ define([
iconCls: 'toolbar__icon btn-ic-history',
caption: this.txtHistory,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
}
@ -373,7 +387,8 @@ define([
caption: this.txtChat,
enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
}
@ -384,7 +399,8 @@ define([
split: true,
iconCls: 'toolbar__icon btn-rem-comment',
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnCommentResolve = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
@ -392,7 +408,8 @@ define([
split: true,
iconCls: 'toolbar__icon btn-resolve-all',
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;
z-index: @zindex-navbar + 3;
width: auto;
min-width: 20px;
min-width: 18px;
height: 18px;
text-align: center;
background-color: @background-alt-key-hint-ie;
background-color: @background-alt-key-hint;

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

@ -71,7 +71,7 @@
</tr>
<tr>
<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>
</tr>
<tr>

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

@ -14,12 +14,12 @@
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
@ -90,7 +90,7 @@
</tr>
<tr>
<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>
</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 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 **/ -->
<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-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-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" data-hint-offset="big" content-target="left-panel-chat"><i class="icon toolbar__icon btn-menu-chat">&nbsp;</i></button>
<!-- /** 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-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-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-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-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" 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" 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" data-hint-offset="big" content-target=""><i class="icon toolbar__icon btn-menu-about">&nbsp;</i></button>
</div>
<div class="left-panel" style="">
<!-- /** coauthoring begin **/ -->

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

@ -83,7 +83,7 @@
</tr>
<tr>
<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>
</tr>
<tr class="finish-cell"></tr>

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

@ -23,15 +23,15 @@
</div>
<div class="tool-menu-btns">
<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-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-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-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-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-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-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-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-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-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-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" 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" 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" 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" 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" 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" 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" 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" 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" data-hint-offset="big" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
</div>
</div>

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

@ -124,12 +124,12 @@
</tr>
<tr>
<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>
</tr>
<tr>
<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>
</tr>
<tr>
@ -139,7 +139,7 @@
</tr>
<tr>
<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>
</tr>
<tr>
@ -159,7 +159,7 @@
</tr>
<tr>
<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>
</tr>
<tr class="finish-cell"></tr>

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

@ -90,7 +90,8 @@ define([
caption : this.btnSaveCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
if ( !!this.options.miSave ) {
@ -104,7 +105,8 @@ define([
caption : this.btnToEditCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miDownload = new Common.UI.MenuItem({
@ -113,7 +115,8 @@ define([
caption : this.btnDownloadCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miSaveCopyAs = new Common.UI.MenuItem({
@ -122,7 +125,8 @@ define([
caption : this.btnSaveCopyAsCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miSaveAs = new Common.UI.MenuItem({
@ -131,7 +135,8 @@ define([
caption : this.btnSaveAsCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miPrint = new Common.UI.MenuItem({
@ -140,7 +145,8 @@ define([
caption : this.btnPrintCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miRename = new Common.UI.MenuItem({
@ -149,7 +155,8 @@ define([
caption : this.btnRenameCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
if ( !!this.options.miRename ) {
@ -163,7 +170,8 @@ define([
caption : this.btnProtectCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
if ( !!this.options.miProtect ) {
@ -177,7 +185,8 @@ define([
caption : this.btnRecentFilesCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miNew = new Common.UI.MenuItem({
@ -186,7 +195,8 @@ define([
caption : this.btnCreateNewCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miAccess = new Common.UI.MenuItem({
@ -195,7 +205,8 @@ define([
caption : this.btnRightsCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miHistory = new Common.UI.MenuItem({
@ -204,7 +215,8 @@ define([
caption : this.btnHistoryCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miHelp = new Common.UI.MenuItem({
@ -213,7 +225,8 @@ define([
caption : this.btnHelpCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.items = [];
@ -224,7 +237,8 @@ define([
caption : this.btnCloseMenuCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miSave,
this.miEdit,
@ -242,7 +256,8 @@ define([
caption : this.btnInfoCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miAccess,
this.miHistory,
@ -252,7 +267,8 @@ define([
caption : this.btnSettingsCaption,
canFocused: false,
dataHint: 1,
dataHintDirection: 'right'
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miHelp,
new Common.UI.MenuItem({
@ -262,7 +278,8 @@ define([
caption : this.btnBackCaption,
canFocused: false,
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 class="edit">',
'<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 class="edit">',
'<td class="left"><label><%= scope.txtInput %></label></td>',
@ -272,7 +272,7 @@ define([
'</tr>','<tr class="divider macros"></tr>',
'<tr class="fms-btn-apply">',
'<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>',
'</tbody></table>',
'</div>',
@ -280,7 +280,7 @@ define([
'<table style="margin: 10px 0;"><tbody>',
'<tr>',
'<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>',
'</tbody></table>',
'</div>'
@ -385,7 +385,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
/** coauthoring begin **/
@ -401,7 +401,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.cmbCoAuthMode = new Common.UI.ComboBox({
@ -415,7 +415,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1);
@ -445,7 +445,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
@ -461,7 +461,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.cmbMacros = new Common.UI.ComboBox({
@ -477,7 +477,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue);
});
@ -506,7 +506,7 @@ define([
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
$markup.find('.btn.primary').each(function(index, el){
@ -1022,7 +1022,7 @@ define([
'<table class="main" style="margin: 10px 0;">',
'<tr>',
'<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>',
'</table>',
'</div>'
@ -1071,7 +1071,8 @@ define([
placeHolder : this.txtAddText,
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
this.inputSubject = new Common.UI.InputField({
el : $markup.findById('#id-info-subject'),
@ -1079,7 +1080,8 @@ define([
placeHolder : this.txtAddText,
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
this.inputComment = new Common.UI.InputField({
el : $markup.findById('#id-info-comment'),
@ -1087,7 +1089,8 @@ define([
placeHolder : this.txtAddText,
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
// modify info
@ -1118,7 +1121,8 @@ define([
validateOnBlur: false,
placeHolder: this.txtAddAuthor,
dataHint: '2',
dataHintDirection: 'left-top'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('changed:after', function(input, newValue, oldValue, e) {
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],
posWhere:item[0],
posAlign:item[1],
hint: item[4]
hint: item[4],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
_btn.on('click', _.bind(this.onBtnPositionClick, this));
this._btnsPosition.push( _btn );
@ -251,7 +254,10 @@ define([
value: '1.25 cm',
defaultUnit : "cm",
maxValue: 55.88,
minValue: 0
minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.spinners.push(this.numPosition);
this.lockedControls.push(this.numPosition);
@ -260,19 +266,28 @@ define([
this.chDiffFirst = new Common.UI.CheckBox({
el: $('#headerfooter-check-diff-first'),
labelText: this.textDiffFirst
labelText: this.textDiffFirst,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chDiffFirst);
this.chDiffOdd = new Common.UI.CheckBox({
el: $('#headerfooter-check-diff-odd'),
labelText: this.textDiffOdd
labelText: this.textDiffOdd,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chDiffOdd);
this.chSameAs = new Common.UI.CheckBox({
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));
@ -291,14 +306,20 @@ define([
el: $('#headerfooter-radio-prev'),
labelText: this.textPrev,
name: 'asc-radio-header-numbering',
checked: true
checked: true,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioPrev, this));
this.lockedControls.push(this.radioPrev);
this.radioFrom = new Common.UI.RadioBox({
el: $('#headerfooter-radio-from'),
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));
this.lockedControls.push(this.radioFrom);
@ -310,7 +331,10 @@ define([
defaultUnit : "",
maxValue: 2147483646,
minValue: 0,
allowDecimal: false
allowDecimal: false,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.numFrom);
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,
enableKeyEvents: true,
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([
'<div class="item-icon-box" id="<%= id %>" style="">',
@ -187,7 +190,10 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-270',
value: 0,
hint: this.textHint270
hint: this.textHint270,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate270);
@ -197,7 +203,10 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-90',
value: 1,
hint: this.textHint90
hint: this.textHint90,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate90);
@ -207,7 +216,10 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-vert',
value: 0,
hint: this.textHintFlipV
hint: this.textHintFlipV,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipV);
@ -217,7 +229,10 @@ define([
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-hor',
value: 1,
hint: this.textHintFlipH
hint: this.textHintFlipH,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipH);
@ -250,7 +265,10 @@ define([
caption: this.textCropFit,
value: 2
}]
})
}),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.btnCrop.on('click', _.bind(this.onCrop, this));
this.btnCrop.menu.on('item:click', _.bind(this.onCropMenu, this));
@ -269,7 +287,10 @@ define([
{caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2}
]
})
}),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnSelectImage);
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,
$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.btnsNotes = Common.Utils.injectButtons($host.find('.btn-slot.slot-notes'), '', 'toolbar__icon btn-notes', me.capBtnInsFootnote, undefined, true, true, 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');
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', 'small');
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));
this.btnContentsUpdate = new Common.UI.Button({
@ -175,7 +175,8 @@ define([
menu: true,
disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnContentsUpdate);
@ -186,7 +187,8 @@ define([
caption: this.capBtnBookmarks,
disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnBookmarks);
@ -197,7 +199,8 @@ define([
caption: this.capBtnCaption,
disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnCaption);
@ -208,7 +211,8 @@ define([
caption: this.capBtnCrossRef,
disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnCrossRef);
@ -219,7 +223,8 @@ define([
caption: this.capBtnTOF,
disabled: true,
dataHint: '1',
dataHintDirection: 'right'
dataHintDirection: 'left',
dataHintOffset: 'medium'
});
this.paragraphControls.push(this.btnTableFigures);
@ -230,7 +235,8 @@ define([
caption: this.capBtnContentsUpdate,
disabled: true,
dataHint: '1',
dataHintDirection: 'right'
dataHintDirection: 'left',
dataHintOffset: 'medium'
});
this.paragraphControls.push(this.btnTableFiguresUpdate);

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

@ -120,7 +120,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.cmbLineRule.setValue('');
this.lockedControls.push(this.cmbLineRule);
@ -136,7 +136,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.lockedControls.push(this.numLineHeight);
@ -153,7 +153,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.spinners.push(this.numSpacingBefore);
this.lockedControls.push(this.numSpacingBefore);
@ -171,7 +171,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.spinners.push(this.numSpacingAfter);
this.lockedControls.push(this.numSpacingAfter);
@ -182,7 +182,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: '-8, 0'
dataHintOffset: 'small'
});
this.lockedControls.push(this.chAddInterval);
@ -193,7 +193,7 @@ define([
menu: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-4, 0'
dataHintOffset: 'medium'
});
this.lockedControls.push(this.btnColor);
@ -209,7 +209,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.spinners.push(this.numIndentsLeft);
this.lockedControls.push(this.numIndentsLeft);
@ -226,7 +226,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.spinners.push(this.numIndentsRight);
this.lockedControls.push(this.numIndentsRight);
@ -241,7 +241,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.cmbSpecial.setValue('');
this.lockedControls.push(this.cmbSpecial);
@ -258,7 +258,7 @@ define([
disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: '-6, 0'
dataHintOffset: 'big'
});
this.spinners.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({
el: $('#table-checkbox-header'),
labelText: this.textHeader
labelText: this.textHeader,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chHeader);
this.chTotal = new Common.UI.CheckBox({
el: $('#table-checkbox-total'),
labelText: this.textTotal
labelText: this.textTotal,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chTotal);
this.chBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-banded'),
labelText: this.textBanded
labelText: this.textBanded,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chBanded);
this.chFirst = new Common.UI.CheckBox({
el: $('#table-checkbox-first'),
labelText: this.textFirst
labelText: this.textFirst,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chFirst);
this.chLast = new Common.UI.CheckBox({
el: $('#table-checkbox-last'),
labelText: this.textLast
labelText: this.textLast,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chLast);
this.chColBanded = new Common.UI.CheckBox({
el: $('#table-checkbox-col-banded'),
labelText: this.textBanded
labelText: this.textBanded,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.lockedControls.push(this.chColBanded);
@ -283,16 +301,16 @@ define([
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
var _arrBorderPosition = [
['l', 'toolbar__icon btn-border-left', 'table-button-border-left', this.tipLeft],
['c', 'toolbar__icon btn-border-insidevert', 'table-button-border-inner-vert', this.tipInnerVert],
['r', 'toolbar__icon btn-border-right', 'table-button-border-right', this.tipRight],
['t', 'toolbar__icon btn-border-top', 'table-button-border-top', this.tipTop],
['m', 'toolbar__icon btn-border-insidehor', 'table-button-border-inner-hor', this.tipInnerHor],
['b', 'toolbar__icon btn-border-bottom', 'table-button-border-bottom', this.tipBottom],
['cm', 'toolbar__icon btn-border-inside', 'table-button-border-inner', this.tipInner],
['lrtb', 'toolbar__icon btn-border-out', 'table-button-border-outer', this.tipOuter],
['lrtbcm', 'toolbar__icon btn-border-all', 'table-button-border-all', this.tipAll],
['', 'toolbar__icon btn-border-no', 'table-button-border-none', this.tipNone]
['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, 'bottom'],
['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, 'bottom'],
['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, 'bottom'],
['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, 'top'],
['lrtbcm', 'toolbar__icon btn-border-all', 'table-button-border-all', this.tipAll, 'top'],
['', 'toolbar__icon btn-border-no', 'table-button-border-none', this.tipNone, 'top']
];
this._btnsBorderPosition = [];
@ -302,7 +320,10 @@ define([
cls: 'btn-toolbar borders--small',
iconCls: item[1],
strId :item[0],
hint: item[3]
hint: item[3],
dataHint: '1',
dataHintDirection: item[4],
dataHintOffset: 'small'
});
_btn.on('click', _.bind(this.onBtnBordersClick, this));
this._btnsBorderPosition.push( _btn );
@ -311,7 +332,10 @@ define([
this.cmbBorderSize = new Common.UI.ComboBorderSize({
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.cmbBorderSize.setValue(this.BorderSize);
@ -342,7 +366,10 @@ define([
{ caption: this.mergeCellsText, value: 11 },
{ caption: this.splitCellsText, value: 12 }
]
})
}),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
@ -358,7 +385,10 @@ define([
this.chRepeatRow = new Common.UI.CheckBox({
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.lockedControls.push(this.chRepeatRow);
@ -370,7 +400,10 @@ define([
defaultUnit : "cm",
value: '1 cm',
maxValue: 55.88,
minValue: 0
minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.numHeight.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var _props = new Asc.CTableProp();
@ -388,7 +421,10 @@ define([
defaultUnit : "cm",
value: '1 cm',
maxValue: 55.88,
minValue: 0
minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.numWidth.on('change', _.bind(function(field, newValue, oldValue, eOpts){
var _props = new Asc.CTableProp();
@ -651,14 +687,20 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#table-border-color-btn'),
color: 'auto',
auto: true
auto: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnBorderColor);
this.borderColor = this.btnBorderColor.getPicker();
this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#table-back-color-btn'),
transparent: true
transparent: true,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker();
@ -682,7 +724,10 @@ define([
items: [
{ 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) {
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',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-copy',
dataHint: '0',
dataHintDirection: 'right'
dataHint: '1',
dataHintDirection: 'top'
});
this.toolbarControls.push(this.btnCopy);
@ -167,8 +167,8 @@ define([
id: 'id-toolbar-btn-paste',
cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-paste',
dataHint: '0',
dataHintDirection: 'right'
dataHint: '1',
dataHintDirection: 'bottom'
});
this.paragraphControls.push(this.btnPaste);
@ -519,7 +519,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertTable);
@ -536,7 +537,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertImage);
@ -547,7 +549,8 @@ define([
iconCls: 'toolbar__icon btn-insertchart',
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertChart);
@ -558,7 +561,8 @@ define([
caption: me.capBtnInsTextbox,
enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertText);
this.btnInsertTextArt = new Common.UI.Button({
@ -573,7 +577,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertTextArt);
@ -584,7 +589,8 @@ define([
caption: me.capBtnInsHeader,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.mnuPageNumberPosPicker = {
conf: {disabled: false},
@ -608,7 +614,8 @@ define([
iconCls: 'toolbar__icon btn-datetime',
caption: me.capBtnDateTime,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsDateTime);
@ -618,7 +625,8 @@ define([
iconCls: 'toolbar__icon btn-blankpage',
caption: me.capBtnBlankPage,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnBlankPage);
@ -630,7 +638,8 @@ define([
enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertShape);
@ -642,7 +651,8 @@ define([
split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertEquation);
@ -652,7 +662,8 @@ define([
iconCls: 'toolbar__icon btn-symbol',
caption: me.capBtnInsSymbol,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnInsertSymbol);
@ -694,7 +705,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnDropCap);
@ -770,7 +782,10 @@ define([
})
}
]
})
}),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
// this.paragraphControls.push(this.btnContentControls);
@ -827,7 +842,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.paragraphControls.push(this.btnColumns);
@ -858,7 +874,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.toolbarControls.push(this.btnPageOrient);
@ -924,7 +941,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.toolbarControls.push(this.btnPageMargins);
@ -1050,7 +1068,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
this.toolbarControls.push(this.btnPageSize);
@ -1100,7 +1119,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
@ -1152,7 +1172,8 @@ define([
caption: me.capImgAlign,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnImgGroup = new Common.UI.Button({
@ -1161,7 +1182,8 @@ define([
caption: me.capImgGroup,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnImgForward = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
@ -1170,7 +1192,8 @@ define([
split: true,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnImgBackward = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
@ -1179,7 +1202,8 @@ define([
split: true,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnImgWrapping = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top',
@ -1187,7 +1211,8 @@ define([
caption: me.capImgWrapping,
menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.btnWatermark = new Common.UI.Button({
@ -1208,7 +1233,8 @@ define([
]
}),
dataHint: '1',
dataHintDirection: 'bottom'
dataHintDirection: 'bottom',
dataHintOffset: 'small'
});
me.toolbarControls.push(me.btnImgAlign,
@ -1279,7 +1305,8 @@ define([
itemHeight: 38,
// hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'middle',
dataHintDirection: 'bottom',
dataHintOffset: '-16, 0',
enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem],
beforeOpenHandler: function (e) {
@ -1527,7 +1554,7 @@ define([
_injectComponent('#slot-img-wrapping', this.btnImgWrapping);
_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);
return $host;