Hint Manager: change letter getting, add offsets, add hints for toolbar

This commit is contained in:
JuliaSvinareva 2021-05-26 18:30:18 +03:00
parent 9f5a6f1f6e
commit 88f32b91f6
12 changed files with 255 additions and 104 deletions

View file

@ -194,7 +194,7 @@ define([
'<% } %>'; '<% } %>';
var templateHugeCaption = var templateHugeCaption =
'<button type="button" class="btn <%= cls %>" id="<%= id %>" > ' + '<button type="button" class="btn <%= cls %>" id="<%= id %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>"> ' +
'<div class="inner-box-icon">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
@ -205,7 +205,7 @@ define([
var templateHugeMenuCaption = var templateHugeMenuCaption =
'<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' + '<div class="btn-group icon-top" id="<%= id %>" style="<%= style %>">' +
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">' + '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
'<div class="inner-box-icon">' + '<div class="inner-box-icon">' +
templateBtnIcon + templateBtnIcon +
'</div>' + '</div>' +
@ -223,7 +223,7 @@ define([
templateBtnIcon + templateBtnIcon +
'</span>' + '</span>' +
'</button>' + '</button>' +
'<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown">' + '<button type="button" class="btn <%= cls %> inner-box-caption dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">' +
'<span class="btn-fixflex-vcenter">' + '<span class="btn-fixflex-vcenter">' +
'<span class="caption"><%= caption %></span>' + '<span class="caption"><%= caption %></span>' +
'<i class="caret"></i>' + '<i class="caret"></i>' +
@ -247,7 +247,8 @@ define([
split : false, split : false,
visible : true, visible : true,
dataHint : '', dataHint : '',
dataHintDirection: '' dataHintDirection: '',
dataHintOffset: '0, 0'
}, },
template: _.template([ template: _.template([
@ -263,13 +264,13 @@ define([
'}} %>', '}} %>',
'<% } %>', '<% } %>',
'<% if ( !menu ) { %>', '<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" >', '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<% } else if (split == false) {%>', '<% } else if (split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">', '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">', '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'<span class="inner-box-caret">' + '<span class="inner-box-caret">' +
@ -279,11 +280,11 @@ define([
'</div>', '</div>',
'<% } else { %>', '<% } else { %>',
'<div class="btn-group split" id="<%= id %>" style="<%= style %>">', '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn <%= cls %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">', '<button type="button" class="btn <%= cls %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">', '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="caret"></i>', '<i class="caret"></i>',
'<span class="sr-only"></span>', '<span class="sr-only"></span>',
'</button>', '</button>',
@ -354,7 +355,8 @@ define([
caption : me.caption, caption : me.caption,
style : me.style, style : me.style,
dataHint : me.options.dataHint, dataHint : me.options.dataHint,
dataHintDirection: me.options.dataHintDirection dataHintDirection: me.options.dataHintDirection,
dataHintOffset: me.options.dataHintOffset
})); }));
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render)) if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))

View file

@ -87,13 +87,15 @@ define([
valueField : 'value', valueField : 'value',
search : false, search : false,
scrollAlwaysVisible: false, scrollAlwaysVisible: false,
takeFocusOnClose: false takeFocusOnClose: false,
dataHint: '',
dataHintDirection: ''
}, },
template: _.template([ template: _.template([
'<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false">', '<input type="text" class="form-control" spellcheck="false">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<span class="caret"></span>', '<span class="caret"></span>',
'</button>', '</button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
@ -147,7 +149,9 @@ define([
menuCls : this.menuCls, menuCls : this.menuCls,
menuStyle : this.menuStyle, menuStyle : this.menuStyle,
items : items, items : items,
scope : me scope : me,
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection
})); }));
if (this.itemsTemplate) if (this.itemsTemplate)
this.cmpEl.find('ul').html( this.cmpEl.find('ul').html(

View file

@ -88,7 +88,7 @@ define([
'<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" spellcheck="false"> ', '<input type="text" class="form-control" spellcheck="false"> ',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>"><span class="caret"></span></button>',
'<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">',
'<li class="divider">', '<li class="divider">',
'<% _.each(items, function(item) { %>', '<% _.each(items, function(item) { %>',

View file

@ -60,7 +60,9 @@ define([
beforeOpenHandler : null, beforeOpenHandler : null,
additionalMenuItems : null, additionalMenuItems : null,
showLast: true, showLast: true,
minWidth: -1 minWidth: -1,
dataHint: '',
dataHintDirection: ''
}, },
template: _.template([ template: _.template([
@ -110,7 +112,9 @@ define([
items: [ items: [
{template: _.template('<div class="menu-picker-container"></div>')} {template: _.template('<div class="menu-picker-container"></div>')}
] ]
}) }),
dataHint: this.options.dataHint,
dataHintDirection: this.options.dataHintDirection
}); });
if (this.options.additionalMenuItems != null) { if (this.options.additionalMenuItems != null) {

View file

@ -48,7 +48,7 @@ if (Common.UI === undefined) {
Common.UI.HintManager = new(function() { Common.UI.HintManager = new(function() {
var _lang = 'en', var _lang = 'en',
_arrLetters = [], _arrAlphabet = [],
_isAlt = false, _isAlt = false,
_hintVisible = false, _hintVisible = false,
_currentLevel = 0, _currentLevel = 0,
@ -91,6 +91,15 @@ Common.UI.HintManager = new(function() {
_currentLevel--; _currentLevel--;
}; };
var _getLetters = function(countButtons) {
var arr = [..._arrAlphabet];
arr[0] = _arrAlphabet[0].repeat(2);
for (var i = 1; arr.length < countButtons; i++) {
arr.push(_arrAlphabet[0] + _arrAlphabet[i]);
}
return arr;
};
var _getControls = function() { var _getControls = function() {
/*if (!_controls[_currentLevel]) { /*if (!_controls[_currentLevel]) {
_controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray(); _controls[_currentLevel] = $('[data-hint=' + (_currentLevel) + ']').toArray();
@ -101,18 +110,11 @@ Common.UI.HintManager = new(function() {
var visibleItems = arr.filter(function (item) { var visibleItems = arr.filter(function (item) {
return $(item).is(':visible'); return $(item).is(':visible');
}); });
if (visibleItems.length > _arrLetters.length) { var _arrLetters = [];
var arrLength = _arrLetters.length; if (visibleItems.length > _arrAlphabet.length) {
var count = visibleItems.length - arrLength; _arrLetters = _getLetters(visibleItems.length);
var arrIndexes = []; } else {
for (var i = 0; arrIndexes.length < count; i++) { _arrLetters = [..._arrAlphabet];
var randInd = Math.floor(Math.random() * arrLength); //get random index
if (arrIndexes.indexOf(randInd) === -1 && randInd < arrLength - 1) {
arrIndexes.push(randInd);
_arrLetters[_arrLetters.length] = _arrLetters[randInd] + _arrLetters[randInd + 1];
_arrLetters[randInd] = _arrLetters[randInd] + _arrLetters[randInd];
}
}
} }
visibleItems.forEach(function (item, index) { visibleItems.forEach(function (item, index) {
var el = $(item); var el = $(item);
@ -129,22 +131,42 @@ 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 offset = item.offset(); var offset = item.offset();
if (direction === 'top') if (direction === 'middle')
hint.css({left: offset.left + (item.outerWidth() - 20) / 2, top: offset.top - 16}); hint.css({
top: offset.top + item.outerHeight() / 2 + 6 + offsets[0],
left: offset.left + (item.outerWidth() - 20) / 2 + 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 - 16 + offsets[0],
left: offset.left - 16 + offsets[1]
});
else if (direction === 'right') else if (direction === 'right')
hint.css({ hint.css({
left: offset.left + item.outerWidth() - 4, top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
top: offset.top + (item.outerHeight() - 20) / 2 left: offset.left + item.outerWidth() - 4 + offsets[1]
}); });
else if (direction === 'left') else if (direction === 'left')
hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight() - 20) / 2}); hint.css({
top: offset.top + (item.outerHeight() - 20) / 2 + offsets[0],
left: offset.left - 18 + offsets[1]
});
else if (direction === 'left-bottom') else if (direction === 'left-bottom')
hint.css({left: offset.left - 8, top: offset.top - item.outerHeight()}); hint.css({
top: offset.top + item.outerHeight() - 3 + offsets[0],
left: offset.left - 16 + offsets[1]
});
else else
hint.css({ hint.css({
left: offset.left + (item.outerWidth() - 20) / 2, top: offset.top + item.outerHeight() - 3 + offsets[0],
top: offset.top + item.outerHeight() - 3 left: offset.left + (item.outerWidth() - 20) / 2 + offsets[1]
}); });
$(document.body).append(hint); $(document.body).append(hint);
@ -214,7 +236,7 @@ Common.UI.HintManager = new(function() {
var _getAlphabetLetters = function () { var _getAlphabetLetters = function () {
Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) { Common.Utils.loadConfig('../../common/main/resources/alphabetletters/alphabetletters.json', function (langsJson) {
_arrLetters = langsJson[_lang]; _arrAlphabet = langsJson[_lang];
}); });
}; };

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) { Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split, menu, toggle, dataHint, dataHintDirection) {
var btnsArr = createButtonSet(); var btnsArr = createButtonSet();
btnsArr.setDisabled(true); btnsArr.setDisabled(true);
id = id || ("id-toolbar-" + iconCls); id = id || ("id-toolbar-" + iconCls);
@ -876,7 +876,9 @@ Common.Utils.injectButtons = function($slots, id, iconCls, caption, lock, split,
menu: menu || false, menu: menu || false,
enableToggle: toggle || false, enableToggle: toggle || false,
lock: lock, lock: lock,
disabled: true disabled: true,
dataHint: dataHint,
dataHintDirection: dataHintDirection
}); });
btnsArr.add(button); btnsArr.add(button);

View file

@ -463,7 +463,8 @@ define([
iconCls: iconid, iconCls: iconid,
disabled: disabled === true, disabled: disabled === true,
dataHint:'0', dataHint:'0',
dataHintDirection: 'left-bottom' dataHintDirection: 'left',
dataHintOffset: '10, 10'
})).render(slot); })).render(slot);
} }

View file

@ -159,7 +159,9 @@ define([
menu: modes && modes.length > 1, menu: modes && modes.length > 1,
split: modes && modes.length > 1, split: modes && modes.length > 1,
value: guid, value: guid,
hint: model.get('name') hint: model.get('name'),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group); var $slot = $('<span class="btn-slot text x-huge"></span>').appendTo(_group);
@ -386,7 +388,9 @@ define([
menu: _menu_items.length > 1, menu: _menu_items.length > 1,
split: _menu_items.length > 1, split: _menu_items.length > 1,
value: guid, value: guid,
hint: model.get('name') hint: model.get('name'),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
if ( btn.split ) { if ( btn.split ) {

View file

@ -237,14 +237,18 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtAccept, caption: this.txtAccept,
split: !this.appConfig.canUseReviewPermissions, split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-save' iconCls: 'toolbar__icon btn-review-save',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnReject = new Common.UI.Button({ this.btnReject = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtReject, caption: this.txtReject,
split: !this.appConfig.canUseReviewPermissions, split: !this.appConfig.canUseReviewPermissions,
iconCls: 'toolbar__icon btn-review-deny' iconCls: 'toolbar__icon btn-review-deny',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
if (this.appConfig.canFeatureComparison) if (this.appConfig.canFeatureComparison)
@ -260,7 +264,9 @@ define([
iconCls: 'toolbar__icon btn-ic-review', iconCls: 'toolbar__icon btn-ic-review',
caption: this.txtTurnon, caption: this.txtTurnon,
split: !this.appConfig.isReviewOnly, split: !this.appConfig.isReviewOnly,
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnsTurnReview = [this.btnTurnOn]; this.btnsTurnReview = [this.btnTurnOn];
} }
@ -268,13 +274,17 @@ define([
this.btnPrev = new Common.UI.Button({ this.btnPrev = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-review-prev', iconCls: 'toolbar__icon btn-review-prev',
caption: this.txtPrev caption: this.txtPrev,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnNext = new Common.UI.Button({ this.btnNext = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-review-next', iconCls: 'toolbar__icon btn-review-next',
caption: this.txtNext caption: this.txtNext,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
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
@ -317,7 +327,9 @@ define([
value: 'original' value: 'original'
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
} }
} }
@ -335,7 +347,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-ic-coedit', iconCls: 'toolbar__icon btn-ic-coedit',
caption: this.txtCoAuthMode, caption: this.txtCoAuthMode,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
} }
@ -346,7 +360,9 @@ define([
this.btnHistory = new Common.UI.Button({ this.btnHistory = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-ic-history', iconCls: 'toolbar__icon btn-ic-history',
caption: this.txtHistory caption: this.txtHistory,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
} }
@ -355,7 +371,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-ic-chat', iconCls: 'toolbar__icon btn-ic-chat',
caption: this.txtChat, caption: this.txtChat,
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
} }
@ -364,13 +382,17 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: this.txtCommentRemove, caption: this.txtCommentRemove,
split: true, split: true,
iconCls: 'toolbar__icon btn-rem-comment' iconCls: 'toolbar__icon btn-rem-comment',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
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',
caption: this.txtCommentResolve, caption: this.txtCommentResolve,
split: true, split: true,
iconCls: 'toolbar__icon btn-resolve-all' iconCls: 'toolbar__icon btn-resolve-all',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
} }

View file

@ -3168,7 +3168,7 @@ define([
me.appOptions = config; me.appOptions = config;
if ( config.canCoAuthoring && config.canComments ) { if ( config.canCoAuthoring && config.canComments ) {
this.btnsComment = Common.Utils.injectButtons(this.toolbar.$el.find('.slot-comment'), 'tlbtn-addcomment-', 'toolbar__icon btn-menu-comments', this.toolbar.capBtnComment); this.btnsComment = Common.Utils.injectButtons(this.toolbar.$el.find('.slot-comment'), 'tlbtn-addcomment-', 'toolbar__icon btn-menu-comments', this.toolbar.capBtnComment, undefined, undefined, undefined, undefined, '1', 'bottom');
if ( this.btnsComment.length ) { if ( this.btnsComment.length ) {
var _comments = DE.getController('Common.Controllers.Comments').getView(); var _comments = DE.getController('Common.Controllers.Comments').getView();
this.btnsComment.forEach(function (btn) { this.btnsComment.forEach(function (btn) {

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 ); 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); 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); this.btnsHyperlink = Common.Utils.injectButtons($host.find('.btn-slot.slot-inshyperlink'), '', 'toolbar__icon btn-inserthyperlink', me.capBtnInsLink, undefined, undefined, undefined, undefined, '1', 'bottom');
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({
@ -173,7 +173,9 @@ define([
caption: this.capBtnContentsUpdate, caption: this.capBtnContentsUpdate,
split: true, split: true,
menu: true, menu: true,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnContentsUpdate); this.paragraphControls.push(this.btnContentsUpdate);
@ -182,7 +184,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-bookmarks', iconCls: 'toolbar__icon btn-bookmarks',
caption: this.capBtnBookmarks, caption: this.capBtnBookmarks,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnBookmarks); this.paragraphControls.push(this.btnBookmarks);
@ -191,7 +195,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-caption', iconCls: 'toolbar__icon btn-caption',
caption: this.capBtnCaption, caption: this.capBtnCaption,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnCaption); this.paragraphControls.push(this.btnCaption);
@ -200,7 +206,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-cross-reference', iconCls: 'toolbar__icon btn-cross-reference',
caption: this.capBtnCrossRef, caption: this.capBtnCrossRef,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnCrossRef); this.paragraphControls.push(this.btnCrossRef);
@ -209,7 +217,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-contents', iconCls: 'toolbar__icon btn-contents',
caption: this.capBtnTOF, caption: this.capBtnTOF,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'right'
}); });
this.paragraphControls.push(this.btnTableFigures); this.paragraphControls.push(this.btnTableFigures);
@ -218,7 +228,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-update', iconCls: 'toolbar__icon btn-update',
caption: this.capBtnContentsUpdate, caption: this.capBtnContentsUpdate,
disabled: true disabled: true,
dataHint: '1',
dataHintDirection: 'right'
}); });
this.paragraphControls.push(this.btnTableFiguresUpdate); this.paragraphControls.push(this.btnTableFiguresUpdate);

View file

@ -157,28 +157,36 @@ define([
this.btnCopy = new Common.UI.Button({ this.btnCopy = new Common.UI.Button({
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',
dataHintDirection: 'right'
}); });
this.toolbarControls.push(this.btnCopy); this.toolbarControls.push(this.btnCopy);
this.btnPaste = new Common.UI.Button({ this.btnPaste = new Common.UI.Button({
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',
dataHintDirection: 'right'
}); });
this.paragraphControls.push(this.btnPaste); this.paragraphControls.push(this.btnPaste);
this.btnIncFontSize = new Common.UI.Button({ this.btnIncFontSize = new Common.UI.Button({
id: 'id-toolbar-btn-incfont', id: 'id-toolbar-btn-incfont',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-incfont' iconCls: 'toolbar__icon btn-incfont',
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnIncFontSize); this.paragraphControls.push(this.btnIncFontSize);
this.btnDecFontSize = new Common.UI.Button({ this.btnDecFontSize = new Common.UI.Button({
id: 'id-toolbar-btn-decfont', id: 'id-toolbar-btn-decfont',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-decfont' iconCls: 'toolbar__icon btn-decfont',
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnDecFontSize); this.paragraphControls.push(this.btnDecFontSize);
@ -261,7 +269,9 @@ define([
checkable: true checkable: true
}) })
] ]
}) }),
dataHint: '1',
dataHintDirection: 'left-bottom'
}); });
this.paragraphControls.push(this.btnHighlightColor); this.paragraphControls.push(this.btnHighlightColor);
this.textOnlyControls.push(this.btnHighlightColor); this.textOnlyControls.push(this.btnHighlightColor);
@ -283,7 +293,9 @@ define([
{template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-fontcolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
{template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')} {template: _.template('<a id="id-toolbar-menu-new-fontcolor" style="">' + this.textNewColor + '</a>')}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'left-bottom'
}); });
this.paragraphControls.push(this.btnFontColor); this.paragraphControls.push(this.btnFontColor);
@ -297,7 +309,9 @@ define([
{template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 216px; margin: 10px;"></div>')}, {template: _.template('<div id="id-toolbar-menu-paracolor" style="width: 169px; height: 216px; margin: 10px;"></div>')},
{template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')} {template: _.template('<a id="id-toolbar-menu-new-paracolor" style="padding-left:12px;">' + this.textNewColor + '</a>')}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'left-bottom'
}); });
this.paragraphControls.push(this.btnParagraphColor); this.paragraphControls.push(this.btnParagraphColor);
this.textOnlyControls.push(this.btnParagraphColor); this.textOnlyControls.push(this.btnParagraphColor);
@ -314,7 +328,9 @@ define([
{caption: this.mniCapitalizeWords, value: Asc.c_oAscChangeTextCaseType.CapitalizeWords}, {caption: this.mniCapitalizeWords, value: Asc.c_oAscChangeTextCaseType.CapitalizeWords},
{caption: this.mniToggleCase, value: Asc.c_oAscChangeTextCaseType.ToggleCase} {caption: this.mniToggleCase, value: Asc.c_oAscChangeTextCaseType.ToggleCase}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'top'
}); });
this.paragraphControls.push(this.btnChangeCase); this.paragraphControls.push(this.btnChangeCase);
@ -417,7 +433,9 @@ define([
{caption: this.mniHiddenChars, value: 'characters', checkable: true}, {caption: this.mniHiddenChars, value: 'characters', checkable: true},
{caption: this.mniHiddenBorders, value: 'table', checkable: true} {caption: this.mniHiddenBorders, value: 'table', checkable: true}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'left-bottom'
}); });
this.toolbarControls.push(this.btnShowHidenChars); this.toolbarControls.push(this.btnShowHidenChars);
@ -430,7 +448,7 @@ define([
split: true, split: true,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'top' dataHintDirection: 'left-top'
}); });
this.paragraphControls.push(this.btnMarkers); this.paragraphControls.push(this.btnMarkers);
this.textOnlyControls.push(this.btnMarkers); this.textOnlyControls.push(this.btnMarkers);
@ -444,7 +462,7 @@ define([
split: true, split: true,
menu: true, menu: true,
dataHint: '1', dataHint: '1',
dataHintDirection: 'top' dataHintDirection: 'left-top'
}); });
this.paragraphControls.push(this.btnNumbers); this.paragraphControls.push(this.btnNumbers);
this.textOnlyControls.push(this.btnNumbers); this.textOnlyControls.push(this.btnNumbers);
@ -491,7 +509,9 @@ define([
{caption: this.mniDrawTable, value: 'draw', checkable: true}, {caption: this.mniDrawTable, value: 'draw', checkable: true},
{caption: this.mniEraseTable, value: 'erase', checkable: true} {caption: this.mniEraseTable, value: 'erase', checkable: true}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertTable); this.paragraphControls.push(this.btnInsertTable);
@ -506,7 +526,9 @@ define([
{caption: this.mniImageFromUrl, value: 'url'}, {caption: this.mniImageFromUrl, value: 'url'},
{caption: this.mniImageFromStorage, value: 'storage'} {caption: this.mniImageFromStorage, value: 'storage'}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertImage); this.paragraphControls.push(this.btnInsertImage);
@ -515,7 +537,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
caption: me.capBtnInsChart, caption: me.capBtnInsChart,
iconCls: 'toolbar__icon btn-insertchart', iconCls: 'toolbar__icon btn-insertchart',
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertChart); this.paragraphControls.push(this.btnInsertChart);
@ -524,7 +548,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-text', iconCls: 'toolbar__icon btn-text',
caption: me.capBtnInsTextbox, caption: me.capBtnInsTextbox,
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertText); this.paragraphControls.push(this.btnInsertText);
this.btnInsertTextArt = new Common.UI.Button({ this.btnInsertTextArt = new Common.UI.Button({
@ -537,7 +563,9 @@ define([
items: [ items: [
{template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')} {template: _.template('<div id="id-toolbar-menu-insart" style="width: 239px; margin-left: 5px;"></div>')}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertTextArt); this.paragraphControls.push(this.btnInsertTextArt);
@ -546,7 +574,9 @@ define([
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-editheader', iconCls: 'toolbar__icon btn-editheader',
caption: me.capBtnInsHeader, caption: me.capBtnInsHeader,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.mnuPageNumberPosPicker = { this.mnuPageNumberPosPicker = {
conf: {disabled: false}, conf: {disabled: false},
@ -568,7 +598,9 @@ define([
id: 'id-toolbar-btn-datetime', id: 'id-toolbar-btn-datetime',
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-datetime', iconCls: 'toolbar__icon btn-datetime',
caption: me.capBtnDateTime caption: me.capBtnDateTime,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsDateTime); this.paragraphControls.push(this.btnInsDateTime);
@ -576,7 +608,9 @@ define([
id: 'id-toolbar-btn-blankpage', id: 'id-toolbar-btn-blankpage',
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-blankpage', iconCls: 'toolbar__icon btn-blankpage',
caption: me.capBtnBlankPage caption: me.capBtnBlankPage,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnBlankPage); this.paragraphControls.push(this.btnBlankPage);
@ -586,7 +620,9 @@ define([
iconCls: 'toolbar__icon btn-insertshape', iconCls: 'toolbar__icon btn-insertshape',
caption: me.capBtnInsShape, caption: me.capBtnInsShape,
enableToggle: true, enableToggle: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}) menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertShape); this.paragraphControls.push(this.btnInsertShape);
@ -596,7 +632,9 @@ define([
iconCls: 'toolbar__icon btn-insertequation', iconCls: 'toolbar__icon btn-insertequation',
caption: me.capBtnInsEquation, caption: me.capBtnInsEquation,
split: true, split: true,
menu: new Common.UI.Menu({cls: 'menu-shapes'}) menu: new Common.UI.Menu({cls: 'menu-shapes'}),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertEquation); this.paragraphControls.push(this.btnInsertEquation);
@ -604,7 +642,9 @@ define([
id: 'tlbtn-insertsymbol', id: 'tlbtn-insertsymbol',
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-symbol', iconCls: 'toolbar__icon btn-symbol',
caption: me.capBtnInsSymbol caption: me.capBtnInsSymbol,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnInsertSymbol); this.paragraphControls.push(this.btnInsertSymbol);
@ -644,7 +684,9 @@ define([
{caption: '--'}, {caption: '--'},
this.mnuDropCapAdvanced = new Common.UI.MenuItem({caption: this.mniEditDropCap}) this.mnuDropCapAdvanced = new Common.UI.MenuItem({caption: this.mniEditDropCap})
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnDropCap); this.paragraphControls.push(this.btnDropCap);
@ -775,7 +817,9 @@ define([
{caption: '--'}, {caption: '--'},
{caption: this.textColumnsCustom, value: 'advanced'} {caption: this.textColumnsCustom, value: 'advanced'}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.paragraphControls.push(this.btnColumns); this.paragraphControls.push(this.btnColumns);
@ -804,7 +848,9 @@ define([
value: false value: false
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.toolbarControls.push(this.btnPageOrient); this.toolbarControls.push(this.btnPageOrient);
@ -868,7 +914,9 @@ define([
{caption: '--'}, {caption: '--'},
{caption: this.textPageMarginsCustom, value: 'advanced'} {caption: this.textPageMarginsCustom, value: 'advanced'}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.toolbarControls.push(this.btnPageMargins); this.toolbarControls.push(this.btnPageMargins);
@ -992,7 +1040,9 @@ define([
{caption: '--'}, {caption: '--'},
{caption: this.textPageSizeCustom, value: 'advanced'} {caption: this.textPageSizeCustom, value: 'advanced'}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.toolbarControls.push(this.btnPageSize); this.toolbarControls.push(this.btnPageSize);
@ -1040,14 +1090,18 @@ define([
value: 5 value: 5
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnClearStyle = new Common.UI.Button({ this.btnClearStyle = new Common.UI.Button({
id: 'id-toolbar-btn-clearstyle', id: 'id-toolbar-btn-clearstyle',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-clearstyle' iconCls: 'toolbar__icon btn-clearstyle',
dataHint: '1',
dataHintDirection: 'top'
}); });
this.toolbarControls.push(this.btnClearStyle); this.toolbarControls.push(this.btnClearStyle);
@ -1055,7 +1109,9 @@ define([
id: 'id-toolbar-btn-copystyle', id: 'id-toolbar-btn-copystyle',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-copystyle', iconCls: 'toolbar__icon btn-copystyle',
enableToggle: true enableToggle: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.toolbarControls.push(this.btnCopyStyle); this.toolbarControls.push(this.btnCopyStyle);
@ -1067,48 +1123,62 @@ define([
cls: 'shifted-left', cls: 'shifted-left',
items: [], items: [],
restoreHeight: true restoreHeight: true
}) }),
dataHint: '1',
dataHintDirection: 'top'
}); });
this.toolbarControls.push(this.btnColorSchemas); this.toolbarControls.push(this.btnColorSchemas);
this.btnMailRecepients = new Common.UI.Button({ this.btnMailRecepients = new Common.UI.Button({
id: 'id-toolbar-btn-mailrecepients', id: 'id-toolbar-btn-mailrecepients',
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-mailmerge' iconCls: 'toolbar__icon btn-mailmerge',
dataHint: '1',
dataHintDirection: 'bottom'
}); });
me.btnImgAlign = new Common.UI.Button({ me.btnImgAlign = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-img-align', iconCls: 'toolbar__icon btn-img-align',
caption: me.capImgAlign, caption: me.capImgAlign,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
me.btnImgGroup = new Common.UI.Button({ me.btnImgGroup = new Common.UI.Button({
cls: 'btn-toolbar x-huge icon-top', cls: 'btn-toolbar x-huge icon-top',
iconCls: 'toolbar__icon btn-img-group', iconCls: 'toolbar__icon btn-img-group',
caption: me.capImgGroup, caption: me.capImgGroup,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
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',
iconCls: 'toolbar__icon btn-img-frwd', iconCls: 'toolbar__icon btn-img-frwd',
caption: me.capImgForward, caption: me.capImgForward,
split: true, split: true,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
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',
iconCls: 'toolbar__icon btn-img-bkwd', iconCls: 'toolbar__icon btn-img-bkwd',
caption: me.capImgBackward, caption: me.capImgBackward,
split: true, split: true,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
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',
iconCls: 'toolbar__icon btn-img-wrap', iconCls: 'toolbar__icon btn-img-wrap',
caption: me.capImgWrapping, caption: me.capImgWrapping,
menu: true menu: true,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
me.btnWatermark = new Common.UI.Button({ me.btnWatermark = new Common.UI.Button({
@ -1127,7 +1197,9 @@ define([
value: 'remove' value: 'remove'
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom'
}); });
me.toolbarControls.push(me.btnImgAlign, me.toolbarControls.push(me.btnImgAlign,
@ -1167,7 +1239,9 @@ define([
{value: 48, displayValue: "48"}, {value: 48, displayValue: "48"},
{value: 72, displayValue: "72"}, {value: 72, displayValue: "72"},
{value: 96, displayValue: "96"} {value: 96, displayValue: "96"}
] ],
dataHint: '1',
dataHintDirection: 'left-top'
}); });
this.paragraphControls.push(this.cmbFontSize); this.paragraphControls.push(this.cmbFontSize);
@ -1176,7 +1250,9 @@ define([
menuCls: 'scrollable-menu', menuCls: 'scrollable-menu',
menuStyle: 'min-width: 325px;', menuStyle: 'min-width: 325px;',
hint: this.tipFontName, hint: this.tipFontName,
store: new Common.Collections.Fonts() store: new Common.Collections.Fonts(),
dataHint: '1',
dataHintDirection: 'left-top'
}); });
this.paragraphControls.push(this.cmbFontName); this.paragraphControls.push(this.cmbFontName);
@ -1193,6 +1269,8 @@ define([
itemWidth: 104, itemWidth: 104,
itemHeight: 38, itemHeight: 38,
// hint : this.tipParagraphStyle, // hint : this.tipParagraphStyle,
dataHint: '1',
dataHintDirection: 'middle',
enableKeyEvents: true, enableKeyEvents: true,
additionalMenuItems: [this.listStylesAdditionalMenuItem], additionalMenuItems: [this.listStylesAdditionalMenuItem],
beforeOpenHandler: function (e) { beforeOpenHandler: function (e) {
@ -1440,7 +1518,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); this.btnsPageBreak = Common.Utils.injectButtons($host.find('.btn-slot.btn-pagebreak'), '', 'toolbar__icon btn-pagebreak', this.capBtnInsPagebreak, undefined, true, true, undefined, '1', 'bottom');
Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak); Array.prototype.push.apply(this.paragraphControls, this.btnsPageBreak);
return $host; return $host;