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

Hint Manager: add hints

Browse source
This commit is contained in:
JuliaSvinareva 2021-06-02 21:16:07 +03:00
parent 9b8d68594b
commit 504905c38e
11 changed files with 235 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -178,7 +178,7 @@ define([
Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({ Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
template: _.template([ template: _.template([
'<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<span class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control text">', '<input type="text" class="form-control text" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret"></span>', '<span class="caret"></span>',
'</button>', '</button>',
@ -230,7 +230,7 @@ define([
Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({ Common.UI.ComboBorderType = Common.UI.ComboBorderSize.extend(_.extend({
template: _.template([ template: _.template([
'<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">',
'<div class="form-control" style="<%= style %>">', '<div class="form-control" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" data-hint-offset="<%= dataHintOffset %>">',
'<i class="image"></i>', '<i class="image"></i>',
'</div>', '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',

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

@ -248,7 +248,8 @@ Common.UI.HintManager = new(function() {
} }
} }
if (curr) { if (curr) {
if (curr.prop("tagName").toLowerCase() === 'input') { var tag = curr.prop("tagName").toLowerCase();
if (tag === 'input' || tag === 'textarea') {
curr.trigger(jQuery.Event('click', {which: 1})); curr.trigger(jQuery.Event('click', {which: 1}));
curr.focus(); curr.focus();
_hideHints(); _hideHints();

4
apps/common/main/lib/template/Chat.template
View file

@ -7,8 +7,8 @@
</div> </div>
<div id="chat-options" class="layout-item"> <div id="chat-options" class="layout-item">
<div id="chat-options-ct"> <div id="chat-options-ct">
<textarea id="chat-msg-text" class="user-select textarea-control" maxlength="<%=maxMsgLength%>"></textarea> <textarea id="chat-msg-text" class="user-select textarea-control" maxlength="<%=maxMsgLength%>" data-hint="1" data-hint-direction="left-top"></textarea>
<button id="chat-msg-btn-add" class="btn normal dlg-btn primary"><%=scope.textSend%></button> <button id="chat-msg-btn-add" class="btn normal dlg-btn primary" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%=scope.textSend%></button>
</div> </div>
</div> </div>
</div> </div>

8
apps/common/main/lib/template/CommentsPanel.template
View file

@ -1,13 +1,13 @@
<div id="comments-box" class="layout-ct vbox"> <div id="comments-box" class="layout-ct vbox">
<div class="layout-item messages-ct"></div> <div class="layout-item messages-ct"></div>
<div class="layout-item add-link-ct"> <div class="layout-item add-link-ct">
<label class="btn new"><%=textAddCommentToDoc%></label> <label class="btn new" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%=textAddCommentToDoc%></label>
</div> </div>
<div style="display: none;" class="layout-item new-comment-ct"> <div style="display: none;" class="layout-item new-comment-ct">
<div class="inner-ct"> <div class="inner-ct">
<textarea id="comment-msg-new" class="user-select textarea-control" placeholder="<%=textEnterCommentHint%>" maxlength="<%=maxCommLength%>"></textarea> <textarea id="comment-msg-new" class="user-select textarea-control" placeholder="<%=textEnterCommentHint%>" maxlength="<%=maxCommLength%>" data-hint="2" data-hint-direction="left-top"></textarea>
</div> </div>
<button class="btn add normal dlg-btn primary"><%=textAddComment%></button> <button class="btn add normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%=textAddComment%></button>
<button class="btn cancel normal dlg-btn"><%=textCancel%></button> <button class="btn cancel normal dlg-btn" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%=textCancel%></button>
</div> </div>
</div> </div>

4
apps/documenteditor/main/app/template/ChartSettings.template
View file

@ -54,7 +54,7 @@
</tr> </tr>
<tr> <tr>
<td class="padding-small" colspan=2> <td class="padding-small" colspan=2>
<button type="button" class="btn btn-text-default auto" id="chart-button-edit-data" style="min-width:115px;"><%= scope.textEditData %></button> <button type="button" class="btn btn-text-default auto" id="chart-button-edit-data" style="min-width:115px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textEditData %></button>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -64,7 +64,7 @@
</tr> </tr>
<tr> <tr>
<td align="center" colspan=2> <td align="center" colspan=2>
<label class="link" id="chart-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="chart-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

10
apps/documenteditor/main/app/template/MailMerge.template
View file

@ -1,7 +1,7 @@
<table cols="1"> <table cols="1">
<tr> <tr>
<td class="padding-small"> <td class="padding-small">
<button type="button" class="btn btn-text-default" id="mmerge-button-edit-data" style="width:100%;"><%= scope.textEditData %></button> <button type="button" class="btn btn-text-default" id="mmerge-button-edit-data" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textEditData %></button>
<label id="mmerge-lbl-add-recipients" style="margin-top: 4px;"><%= scope.textAddRecipients %></label> <label id="mmerge-lbl-add-recipients" style="margin-top: 4px;"><%= scope.textAddRecipients %></label>
</td> </td>
</tr> </tr>
@ -57,7 +57,7 @@
<tr> <tr>
<td class="padding-medium"> <td class="padding-medium">
<label style=""><%= scope.textMaxRecepients %></label> <label style=""><%= scope.textMaxRecepients %></label>
<label class="link-solid" id="mmerge-readmore-link"><%= scope.textReadMore %></label> <label class="link-solid" id="mmerge-readmore-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="small"><%= scope.textReadMore %></label>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -74,11 +74,11 @@
<table cols="2"> <table cols="2">
<tr> <tr>
<td width="50%"> <td width="50%">
<button type="button" class="btn btn-text-default" id="mmerge-button-download" style="width:90px;"><%= scope.textDownload %></button> <button type="button" class="btn btn-text-default" id="mmerge-button-download" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textDownload %></button>
<button type="button" class="btn btn-text-default hidden" id="mmerge-button-merge" style="width:90px;"><%= scope.textMerge %></button> <button type="button" class="btn btn-text-default hidden" id="mmerge-button-merge" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textMerge %></button>
</td> </td>
<td width="50%" style="text-align: right;"> <td width="50%" style="text-align: right;">
<button type="button" class="btn btn-text-default" id="mmerge-button-portal" style="width:90px;"><%= scope.textPortal %></button> <button type="button" class="btn btn-text-default" id="mmerge-button-portal" style="width:90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textPortal %></button>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

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

@ -220,7 +220,7 @@
</tr> </tr>
<tr class="shape-only"> <tr class="shape-only">
<td align="center"> <td align="center">
<label class="link" id="shape-advanced-link"><%= scope.textAdvanced %></label> <label class="link" id="shape-advanced-link" data-hint="1" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.textAdvanced %></label>
</td> </td>
</tr> </tr>
<tr class="finish-cell"></tr> <tr class="finish-cell"></tr>

15
apps/documenteditor/main/app/view/ChartSettings.js
View file

@ -232,7 +232,10 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">', '<div class="item-icon-box" id="<%= id %>">',
@ -259,7 +262,10 @@ define([
items: [ items: [
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" ></div>') } { template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" ></div>') }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.btnChartType.on('render:after', function(btn) { this.btnChartType.on('render:after', function(btn) {
me.mnuChartTypePicker = new Common.UI.DataView({ me.mnuChartTypePicker = new Common.UI.DataView({
@ -435,7 +441,10 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 270, menuMaxHeight: 270,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-chart-style' cls: 'combo-chart-style',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbChartStyle.render($('#chart-combo-style')); this.cmbChartStyle.render($('#chart-combo-style'));
this.cmbChartStyle.openButton.menu.cmpEl.css({ this.cmbChartStyle.openButton.menu.cmpEl.css({

66
apps/documenteditor/main/app/view/MailMergeSettings.js
View file

@ -127,7 +127,10 @@ define([
style: 'min-width: 190px;max-width: 400px;', style: 'min-width: 190px;max-width: 400px;',
maxHeight: 200, maxHeight: 200,
items: [] items: []
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.txtFieldNum = new Common.UI.InputField({ this.txtFieldNum = new Common.UI.InputField({
@ -149,7 +152,10 @@ define([
return true; return true;
}, },
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('changed:after', function(input, newValue, oldValue, e) { }).on('changed:after', function(input, newValue, oldValue, e) {
var val = parseInt(me.txtFieldNum.getValue()); var val = parseInt(me.txtFieldNum.getValue());
if (val !== parseInt(oldValue)) { if (val !== parseInt(oldValue)) {
@ -170,14 +176,20 @@ define([
this.chHighlight = new Common.UI.CheckBox({ this.chHighlight = new Common.UI.CheckBox({
el: me.$el.find('#mmerge-switcher-highlight'), el: me.$el.find('#mmerge-switcher-highlight'),
labelText: this.textHighlight, labelText: this.textHighlight,
lock: [_set.noFields, _set.lostConnect] lock: [_set.noFields, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this)); this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this));
this.chPreview = new Common.UI.CheckBox({ this.chPreview = new Common.UI.CheckBox({
el: me.$el.find('#mmerge-switcher-preview'), el: me.$el.find('#mmerge-switcher-preview'),
labelText: this.textPreview, labelText: this.textPreview,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this)); this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this));
this.emptyDBControls.push(this.chPreview); this.emptyDBControls.push(this.chPreview);
@ -189,7 +201,9 @@ define([
disabled: true, disabled: true,
value: 0, value: 0,
hint: this.txtFirst, hint: this.txtFirst,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnFirst.on('click', _.bind(this.onBtnPreviewFieldClick, this)); this.btnFirst.on('click', _.bind(this.onBtnPreviewFieldClick, this));
this.emptyDBControls.push(this.btnFirst); this.emptyDBControls.push(this.btnFirst);
@ -201,7 +215,9 @@ define([
disabled: true, disabled: true,
value: 1, value: 1,
hint: this.txtPrev, hint: this.txtPrev,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnPrev.on('click', _.bind(this.onBtnPreviewFieldClick, this)); this.btnPrev.on('click', _.bind(this.onBtnPreviewFieldClick, this));
this.emptyDBControls.push(this.btnPrev); this.emptyDBControls.push(this.btnPrev);
@ -212,7 +228,9 @@ define([
iconCls: 'toolbar__icon btn-nextitem', iconCls: 'toolbar__icon btn-nextitem',
value: 2, value: 2,
hint: this.txtNext, hint: this.txtNext,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnNext.on('click', _.bind(this.onBtnPreviewFieldClick, this)); this.btnNext.on('click', _.bind(this.onBtnPreviewFieldClick, this));
this.emptyDBControls.push(this.btnNext); this.emptyDBControls.push(this.btnNext);
@ -223,7 +241,9 @@ define([
iconCls: 'toolbar__icon btn-lastitem', iconCls: 'toolbar__icon btn-lastitem',
value: 3, value: 3,
hint: this.txtLast, hint: this.txtLast,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnLast.on('click', _.bind(this.onBtnPreviewFieldClick, this)); this.btnLast.on('click', _.bind(this.onBtnPreviewFieldClick, this));
this.emptyDBControls.push(this.btnLast); this.emptyDBControls.push(this.btnLast);
@ -240,7 +260,10 @@ define([
menuStyle: 'min-width: 190px;', menuStyle: 'min-width: 190px;',
editable: false, editable: false,
data: this._arrMergeSrc, data: this._arrMergeSrc,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbMergeTo.setValue(this._arrMergeSrc[0].value); this.cmbMergeTo.setValue(this._arrMergeSrc[0].value);
this.cmbMergeTo.on('selected', _.bind(this.onCmbMergeToSelect, this)); this.cmbMergeTo.on('selected', _.bind(this.onCmbMergeToSelect, this));
@ -251,7 +274,10 @@ define([
labelText: this.textAll, labelText: this.textAll,
name: 'asc-radio-merge', name: 'asc-radio-merge',
checked: true, checked: true,
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioAllCurrent, this)); }).on('change', _.bind(this.onRadioAllCurrent, this));
this.emptyDBControls.push(this.radioAll); this.emptyDBControls.push(this.radioAll);
@ -259,7 +285,10 @@ define([
el: $('#mmerge-radio-current', me.$el), el: $('#mmerge-radio-current', me.$el),
labelText: this.textCurrent, labelText: this.textCurrent,
name: 'asc-radio-merge', name: 'asc-radio-merge',
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioAllCurrent, this)); }).on('change', _.bind(this.onRadioAllCurrent, this));
this.emptyDBControls.push(this.radioCurrent); this.emptyDBControls.push(this.radioCurrent);
@ -267,7 +296,10 @@ define([
el: $('#mmerge-radio-from-to', me.$el), el: $('#mmerge-radio-from-to', me.$el),
labelText: this.textFrom, labelText: this.textFrom,
name: 'asc-radio-merge', name: 'asc-radio-merge',
lock: [_set.noRecipients, _set.lostConnect] lock: [_set.noRecipients, _set.lostConnect],
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(this.onRadioFromToChange, this)); }).on('change', _.bind(this.onRadioFromToChange, this));
this.emptyDBControls.push(this.radioFromTo); this.emptyDBControls.push(this.radioFromTo);
@ -303,7 +335,10 @@ define([
} }
} }
return true; return true;
} },
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.emptyDBControls.push(this.txtFieldFrom); this.emptyDBControls.push(this.txtFieldFrom);
@ -338,7 +373,10 @@ define([
} }
} }
return true; return true;
} },
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.txtFieldTo.on('changed:after', function() { this.txtFieldTo.on('changed:after', function() {
me._isToChanged = true; me._isToChanged = true;

121
apps/documenteditor/main/app/view/ShapeSettings.js
View file

@ -1206,7 +1206,10 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrFillSrc data: this._arrFillSrc,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbFillSrc.setValue(this._arrFillSrc[0].value); this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
@ -1217,7 +1220,10 @@ define([
itemHeight: 28, itemHeight: 28,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-pattern' cls: 'combo-pattern',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
'<div class="style" id="<%= id %>">', '<div class="style" id="<%= id %>">',
@ -1250,7 +1256,10 @@ define([
{caption: this.textFromUrl, value: 1}, {caption: this.textFromUrl, value: 1},
{caption: this.textFromStorage, value: 2} {caption: this.textFromStorage, value: 2}
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.btnSelectImage); this.fillControls.push(this.btnSelectImage);
this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this)); this.btnSelectImage.menu.on('item:click', _.bind(this.onImageSelect, this));
@ -1266,7 +1275,10 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 90px;', menuStyle: 'min-width: 90px;',
editable: false, editable: false,
data: this._arrFillType data: this._arrFillType,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbFillType.setValue(this._arrFillType[0].value); this.cmbFillType.setValue(this._arrFillType[0].value);
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
@ -1279,7 +1291,10 @@ define([
value: '100 %', value: '100 %',
defaultUnit : "%", defaultUnit : "%",
maxValue: 100, maxValue: 100,
minValue: 0 minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
this.numTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); this.numTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
@ -1309,7 +1324,10 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrGradType data: this._arrGradType,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbGradType.setValue(this._arrGradType[0].value); this.cmbGradType.setValue(this._arrGradType[0].value);
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
@ -1339,7 +1357,10 @@ define([
items: [ items: [
{ template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') } { template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.btnDirection.on('render:after', function(btn) { this.btnDirection.on('render:after', function(btn) {
me.mnuDirectionPicker = new Common.UI.DataView({ me.mnuDirectionPicker = new Common.UI.DataView({
@ -1415,7 +1436,10 @@ define([
allowDecimal: false, allowDecimal: false,
maxValue: 100, maxValue: 100,
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.spnGradPosition); this.fillControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
@ -1426,7 +1450,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint hint: this.tipAddGradientPoint,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.fillControls.push(this.btnAddGradientStep); this.fillControls.push(this.btnAddGradientStep);
@ -1436,7 +1462,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-remove-breakpoint', iconCls: 'toolbar__icon btn-remove-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.fillControls.push(this.btnRemoveGradientStep); this.fillControls.push(this.btnRemoveGradientStep);
@ -1450,7 +1478,10 @@ define([
allowDecimal: true, allowDecimal: true,
maxValue: 359.9, maxValue: 359.9,
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.numGradientAngle); this.fillControls.push(this.numGradientAngle);
this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this)); this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
@ -1459,7 +1490,10 @@ define([
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#shape-combo-border-size'), el: $('#shape-combo-border-size'),
style: "width: 93px;", style: "width: 93px;",
txtNoBorders: this.txtNoBorders txtNoBorders: this.txtNoBorders,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}) })
.on('selected', _.bind(this.onBorderSizeSelect, this)) .on('selected', _.bind(this.onBorderSizeSelect, this))
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) .on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
@ -1472,7 +1506,10 @@ define([
this.cmbBorderType = new Common.UI.ComboBorderType({ this.cmbBorderType = new Common.UI.ComboBorderType({
el: $('#shape-combo-border-type'), el: $('#shape-combo-border-type'),
style: "width: 93px;", style: "width: 93px;",
menuStyle: 'min-width: 93px;' menuStyle: 'min-width: 93px;',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', _.bind(this.onBorderTypeSelect, this)) }).on('selected', _.bind(this.onBorderTypeSelect, this))
.on('combo:blur', _.bind(this.onComboBlur, this, false)); .on('combo:blur', _.bind(this.onComboBlur, this, false));
this.BorderType = Asc.c_oDashType.solid; this.BorderType = Asc.c_oDashType.solid;
@ -1484,7 +1521,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-270', iconCls: 'toolbar__icon btn-rotate-270',
value: 0, value: 0,
hint: this.textHint270 hint: this.textHint270,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this)); this.btnRotate270.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate270); this.lockedControls.push(this.btnRotate270);
@ -1494,7 +1533,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-rotate-90', iconCls: 'toolbar__icon btn-rotate-90',
value: 1, value: 1,
hint: this.textHint90 hint: this.textHint90,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this)); this.btnRotate90.on('click', _.bind(this.onBtnRotateClick, this));
this.lockedControls.push(this.btnRotate90); this.lockedControls.push(this.btnRotate90);
@ -1504,7 +1545,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-vert', iconCls: 'toolbar__icon btn-flip-vert',
value: 0, value: 0,
hint: this.textHintFlipV hint: this.textHintFlipV,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this)); this.btnFlipV.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipV); this.lockedControls.push(this.btnFlipV);
@ -1514,7 +1557,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-flip-hor', iconCls: 'toolbar__icon btn-flip-hor',
value: 1, value: 1,
hint: this.textHintFlipH hint: this.textHintFlipH,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this)); this.btnFlipH.on('click', _.bind(this.onBtnFlipClick, this));
this.lockedControls.push(this.btnFlipH); this.lockedControls.push(this.btnFlipH);
@ -1536,7 +1581,10 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
store: new Common.UI.DataViewStore(viewData), store: new Common.UI.DataViewStore(viewData),
cls: 'combo-chart-style' cls: 'combo-chart-style',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([ this.cmbWrapType.menuPicker.itemTemplate = this.cmbWrapType.fieldPicker.itemTemplate = _.template([
'<div class="item-icon-box" id="<%= id %>">', '<div class="item-icon-box" id="<%= id %>">',
@ -1563,13 +1611,19 @@ define([
menuAlign: 'tr-br', menuAlign: 'tr-br',
cls: 'menu-shapes', cls: 'menu-shapes',
items: [] items: []
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnChangeShape); this.lockedControls.push(this.btnChangeShape);
this.chShadow = new Common.UI.CheckBox({ this.chShadow = new Common.UI.CheckBox({
el: $('#shape-checkbox-shadow'), el: $('#shape-checkbox-shadow'),
labelText: this.strShadow labelText: this.strShadow,
dataHint: '1',
dataHintDirection: 'left',
dataHintOffset: 'small'
}); });
this.chShadow.on('change', _.bind(this.onCheckShadow, this)); this.chShadow.on('change', _.bind(this.onCheckShadow, this));
this.lockedControls.push(this.chShadow); this.lockedControls.push(this.chShadow);
@ -1639,7 +1693,7 @@ define([
el: $('#shape-combo-fill-texture'), el: $('#shape-combo-fill-texture'),
template: _.template([ template: _.template([
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">', '<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>', '<div class="form-control text" style="width: 90px;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSelectTexture + '</div>',
'<div style="display: table-cell;"></div>', '<div style="display: table-cell;"></div>',
'<button type="button" class="btn btn-default">', '<button type="button" class="btn btn-default">',
'<span class="caret"></span>', '<span class="caret"></span>',
@ -1783,7 +1837,10 @@ define([
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#shape-back-color-btn'), parentEl: $('#shape-back-color-btn'),
transparent: true, transparent: true,
color: 'transparent' color: 'transparent',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.btnBackColor); this.fillControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker(); this.colorsBack = this.btnBackColor.getPicker();
@ -1791,7 +1848,10 @@ define([
this.btnFGColor = new Common.UI.ColorButton({ this.btnFGColor = new Common.UI.ColorButton({
parentEl: $('#shape-foreground-color-btn'), parentEl: $('#shape-foreground-color-btn'),
color: '000000' color: '000000',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.btnFGColor); this.fillControls.push(this.btnFGColor);
this.colorsFG = this.btnFGColor.getPicker(); this.colorsFG = this.btnFGColor.getPicker();
@ -1799,7 +1859,10 @@ define([
this.btnBGColor = new Common.UI.ColorButton({ this.btnBGColor = new Common.UI.ColorButton({
parentEl: $('#shape-background-color-btn'), parentEl: $('#shape-background-color-btn'),
color: 'ffffff' color: 'ffffff',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.btnBGColor); this.fillControls.push(this.btnBGColor);
this.colorsBG = this.btnBGColor.getPicker(); this.colorsBG = this.btnBGColor.getPicker();
@ -1807,7 +1870,10 @@ define([
this.btnGradColor = new Common.UI.ColorButton({ this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#shape-gradient-color-btn'), parentEl: $('#shape-gradient-color-btn'),
color: '000000' color: '000000',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.fillControls.push(this.btnGradColor); this.fillControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker(); this.colorsGrad = this.btnGradColor.getPicker();
@ -1815,7 +1881,10 @@ define([
this.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#shape-border-color-btn'), parentEl: $('#shape-border-color-btn'),
color: '000000' color: '000000',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker(); this.colorsBorder = this.btnBorderColor.getPicker();

73
apps/documenteditor/main/app/view/TextArtSettings.js
View file

@ -833,7 +833,10 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrFillSrc data: this._arrFillSrc,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbFillSrc.setValue(this._arrFillSrc[0].value); this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
@ -846,7 +849,10 @@ define([
value: '100 %', value: '100 %',
defaultUnit : "%", defaultUnit : "%",
maxValue: 100, maxValue: 100,
minValue: 0 minValue: 0,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
this.numTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);}); this.numTransparency.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
@ -876,7 +882,10 @@ define([
cls: 'input-group-nr', cls: 'input-group-nr',
menuStyle: 'min-width: 100%;', menuStyle: 'min-width: 100%;',
editable: false, editable: false,
data: this._arrGradType data: this._arrGradType,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbGradType.setValue(this._arrGradType[0].value); this.cmbGradType.setValue(this._arrGradType[0].value);
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
@ -906,7 +915,10 @@ define([
items: [ items: [
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') } { template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.btnDirection.on('render:after', function(btn) { this.btnDirection.on('render:after', function(btn) {
me.mnuDirectionPicker = new Common.UI.DataView({ me.mnuDirectionPicker = new Common.UI.DataView({
@ -981,7 +993,10 @@ define([
allowDecimal: false, allowDecimal: false,
maxValue: 100, maxValue: 100,
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.spnGradPosition); this.lockedControls.push(this.spnGradPosition);
this.spnGradPosition.on('change', _.bind(this.onPositionChange, this)); this.spnGradPosition.on('change', _.bind(this.onPositionChange, this));
@ -992,7 +1007,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-add-breakpoint', iconCls: 'toolbar__icon btn-add-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipAddGradientPoint hint: this.tipAddGradientPoint,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this)); this.btnAddGradientStep.on('click', _.bind(this.onAddGradientStep, this));
this.lockedControls.push(this.btnAddGradientStep); this.lockedControls.push(this.btnAddGradientStep);
@ -1002,7 +1019,9 @@ define([
cls: 'btn-toolbar', cls: 'btn-toolbar',
iconCls: 'toolbar__icon btn-remove-breakpoint', iconCls: 'toolbar__icon btn-remove-breakpoint',
disabled: this._locked, disabled: this._locked,
hint: this.tipRemoveGradientPoint hint: this.tipRemoveGradientPoint,
dataHint: '1',
dataHintDirection: 'bottom'
}); });
this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this)); this.btnRemoveGradientStep.on('click', _.bind(this.onRemoveGradientStep, this));
this.lockedControls.push(this.btnRemoveGradientStep); this.lockedControls.push(this.btnRemoveGradientStep);
@ -1016,7 +1035,10 @@ define([
allowDecimal: true, allowDecimal: true,
maxValue: 359.9, maxValue: 359.9,
minValue: 0, minValue: 0,
disabled: this._locked disabled: this._locked,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.numGradientAngle); this.lockedControls.push(this.numGradientAngle);
this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this)); this.numGradientAngle.on('change', _.bind(this.onGradientAngleChange, this));
@ -1025,7 +1047,10 @@ define([
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
el: $('#textart-combo-border-size'), el: $('#textart-combo-border-size'),
style: "width: 93px;", style: "width: 93px;",
txtNoBorders: this.txtNoBorders txtNoBorders: this.txtNoBorders,
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}) })
.on('selected', _.bind(this.onBorderSizeSelect, this)) .on('selected', _.bind(this.onBorderSizeSelect, this))
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) .on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
@ -1038,7 +1063,10 @@ define([
this.cmbBorderType = new Common.UI.ComboBorderType({ this.cmbBorderType = new Common.UI.ComboBorderType({
el: $('#textart-combo-border-type'), el: $('#textart-combo-border-type'),
style: "width: 93px;", style: "width: 93px;",
menuStyle: 'min-width: 93px;' menuStyle: 'min-width: 93px;',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', _.bind(this.onBorderTypeSelect, this)) }).on('selected', _.bind(this.onBorderTypeSelect, this))
.on('combo:blur', _.bind(this.onComboBlur, this, false)); .on('combo:blur', _.bind(this.onComboBlur, this, false));
this.BorderType = Asc.c_oDashType.solid; this.BorderType = Asc.c_oDashType.solid;
@ -1050,7 +1078,10 @@ define([
itemHeight: 50, itemHeight: 50,
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
cls: 'combo-textart' cls: 'combo-textart',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbTransform.render($('#textart-combo-transform')); this.cmbTransform.render($('#textart-combo-transform'));
this.cmbTransform.openButton.menu.cmpEl.css({ this.cmbTransform.openButton.menu.cmpEl.css({
@ -1083,7 +1114,10 @@ define([
menuMaxHeight: 300, menuMaxHeight: 300,
enableKeyEvents: true, enableKeyEvents: true,
showLast: false, showLast: false,
cls: 'combo-textart' cls: 'combo-textart',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.cmbTextArt.render($('#textart-combo-template')); this.cmbTextArt.render($('#textart-combo-template'));
this.cmbTextArt.openButton.menu.cmpEl.css({ this.cmbTextArt.openButton.menu.cmpEl.css({
@ -1163,7 +1197,10 @@ define([
if (!this.btnBackColor) { if (!this.btnBackColor) {
this.btnBorderColor = new Common.UI.ColorButton({ this.btnBorderColor = new Common.UI.ColorButton({
parentEl: $('#textart-border-color-btn'), parentEl: $('#textart-border-color-btn'),
color: '000000' color: '000000',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnBorderColor); this.lockedControls.push(this.btnBorderColor);
this.colorsBorder = this.btnBorderColor.getPicker(); this.colorsBorder = this.btnBorderColor.getPicker();
@ -1171,7 +1208,10 @@ define([
this.btnGradColor = new Common.UI.ColorButton({ this.btnGradColor = new Common.UI.ColorButton({
parentEl: $('#textart-gradient-color-btn'), parentEl: $('#textart-gradient-color-btn'),
color: '000000' color: '000000',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnGradColor); this.lockedControls.push(this.btnGradColor);
this.colorsGrad = this.btnGradColor.getPicker(); this.colorsGrad = this.btnGradColor.getPicker();
@ -1180,7 +1220,10 @@ define([
this.btnBackColor = new Common.UI.ColorButton({ this.btnBackColor = new Common.UI.ColorButton({
parentEl: $('#textart-back-color-btn'), parentEl: $('#textart-back-color-btn'),
transparent: true, transparent: true,
color: 'transparent' color: 'transparent',
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
this.lockedControls.push(this.btnBackColor); this.lockedControls.push(this.btnBackColor);
this.colorsBack = this.btnBackColor.getPicker(); this.colorsBack = this.btnBackColor.getPicker();