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

Hint Manager: add hint for file menu, add hint parameters into checkbox, inputfield

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-27 19:30:48 +03:00
parent 88f32b91f6
commit 98268676f8
6 changed files with 106 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,7 +94,7 @@ define([
checked : false, checked : false,
value : 'unchecked', value : 'unchecked',
template : _.template('<label class="checkbox-indeterminate"><input id="<%= id %>" type="checkbox" class="checkbox__native">' + 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>'), '<label for="<%= id %>" class="checkbox__shape"></label><span></span></label>'),
initialize : function(options) { initialize : function(options) {
@ -108,7 +108,10 @@ define([
var me = this; var me = this;
if (!me.rendered) { if (!me.rendered) {
var elem = this.template({ var elem = this.template({
id: Common.UI.getId('chb-') id: Common.UI.getId('chb-'),
dataHint: me.options.dataHint,
dataHintDirection: me.options.dataHintDirection,
dataHintOffset: me.options.dataHintOffset
}); });
if (parentEl) { if (parentEl) {
this.setElement(parentEl, false); this.setElement(parentEl, false);

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

@ -145,8 +145,8 @@ Common.UI.HintManager = new(function() {
}); });
else if (direction === 'left-top') else if (direction === 'left-top')
hint.css({ hint.css({
top: offset.top - 16 + offsets[0], top: offset.top - 14 + offsets[0],
left: offset.left - 16 + offsets[1] left: offset.left - 14 + offsets[1]
}); });
else if (direction === 'right') else if (direction === 'right')
hint.css({ hint.css({
@ -222,11 +222,16 @@ Common.UI.HintManager = new(function() {
} }
} }
if (curr) { if (curr) {
curr && curr.trigger(jQuery.Event('click', {which: 1})); if (curr.prop("tagName").toLowerCase() === 'input') {
curr.focus();
_hideHints();
} else {
curr.trigger(jQuery.Event('click', {which: 1}));
_nextLevel(); _nextLevel();
_showHints(); _showHints();
} }
} }
}
e.preventDefault(); e.preventDefault();
} }
@ -240,7 +245,12 @@ Common.UI.HintManager = new(function() {
}); });
}; };
var _needCloseMenu = function () {
return !(_hintVisible && _currentLevel > 1);
};
return { return {
init: _init init: _init,
needCloseMenu: _needCloseMenu
} }
})(); })();

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

@ -87,6 +87,9 @@ define([
'class="form-control <%= cls %>" ', 'class="form-control <%= cls %>" ',
'placeholder="<%= placeHolder %>" ', 'placeholder="<%= placeHolder %>" ',
'value="<%= value %>"', 'value="<%= value %>"',
'data-hint="<%= dataHint %>"',
'data-hint-direction="<%= dataHintDirection %>"',
'data-hint-offset="<%= dataHintOffset %>"',
'>', '>',
'<span class="input-error"></span>', '<span class="input-error"></span>',
'</div>' '</div>'
@ -135,6 +138,9 @@ define([
name : this.name, name : this.name,
placeHolder : this.placeHolder, placeHolder : this.placeHolder,
spellcheck : this.spellcheck, spellcheck : this.spellcheck,
dataHint : this.options.dataHint,
dataHintDirection: this.options.dataHintDirection,
dataHintOffset: this.options.dataHintOffset,
scope : me scope : me
})); }));

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

@ -228,7 +228,9 @@ define([
cls: 'btn-text-default', cls: 'btn-text-default',
style: 'width: 100%;', style: 'width: 100%;',
caption: this.txtInvisibleSignature, caption: this.txtInvisibleSignature,
disabled: this._state.invisibleSignDisabled disabled: this._state.invisibleSignDisabled,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.btnsInvisibleSignature.push(button); this.btnsInvisibleSignature.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -243,7 +245,9 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
caption: this.txtAddPwd, caption: this.txtAddPwd,
disabled: this._state.disabled || this._state.disabledPassword, disabled: this._state.disabled || this._state.disabledPassword,
visible: !this._state.hasPassword visible: !this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.btnsAddPwd.push(button); this.btnsAddPwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -258,7 +262,9 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
caption: this.txtDeletePwd, caption: this.txtDeletePwd,
disabled: this._state.disabled || this._state.disabledPassword, disabled: this._state.disabled || this._state.disabledPassword,
visible: this._state.hasPassword visible: this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.btnsDelPwd.push(button); this.btnsDelPwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {
@ -273,7 +279,9 @@ define([
style: 'width: 100%;', style: 'width: 100%;',
caption: this.txtChangePwd, caption: this.txtChangePwd,
disabled: this._state.disabled || this._state.disabledPassword, disabled: this._state.disabled || this._state.disabledPassword,
visible: this._state.hasPassword visible: this._state.hasPassword,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.btnsChangePwd.push(button); this.btnsChangePwd.push(button);
if (this._isSetEvents) { if (this._isSetEvents) {

1
apps/documenteditor/main/app/controller/LeftMenu.js
View file

@ -807,6 +807,7 @@ define([
case 'escape': case 'escape':
// if (!this.leftMenu.isOpened()) return true; // if (!this.leftMenu.isOpened()) return true;
if ( this.leftMenu.menuFile.isVisible() ) { if ( this.leftMenu.menuFile.isVisible() ) {
if (Common.UI.HintManager.needCloseMenu())
this.leftMenu.menuFile.hide(); this.leftMenu.menuFile.hide();
return false; return false;
} }

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

@ -74,7 +74,7 @@ define([
'<% _.each(rows, function(row) { %>', '<% _.each(rows, function(row) { %>',
'<tr>', '<tr>',
'<% _.each(row, function(item) { %>', '<% _.each(row, function(item) { %>',
'<td><div><svg class="btn-doc-format" format="<%= item.type %>">', '<td><div><svg class="btn-doc-format" format="<%= item.type %>" data-hint="2" data-hint-direction="left-top" data-hint-offset="4, 4">',
'<use xlink:href="#svg-format-<%= item.imgCls %>"></use>', '<use xlink:href="#svg-format-<%= item.imgCls %>"></use>',
'</svg></div></td>', '</svg></div></td>',
'<% }) %>', '<% }) %>',
@ -210,7 +210,7 @@ define([
'</tr>','<tr class="divider edit"></tr>', '</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">', '<tr class="edit">',
'<td class="left"><label><%= scope.txtProofing %></label></td>', '<td class="left"><label><%= scope.txtProofing %></label></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;"><%= 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="left-top"><%= scope.txtAutoCorrect %></button></div></td>',
'</tr>','<tr class="divider edit"></tr>', '</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">', '<tr class="edit">',
'<td class="left"><label><%= scope.txtInput %></label></td>', '<td class="left"><label><%= scope.txtInput %></label></td>',
@ -272,7 +272,7 @@ define([
'</tr>','<tr class="divider macros"></tr>', '</tr>','<tr class="divider macros"></tr>',
'<tr class="fms-btn-apply">', '<tr class="fms-btn-apply">',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary"><%= 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="left-top"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>', '</tbody></table>',
'</div>', '</div>',
@ -280,7 +280,7 @@ define([
'<table style="margin: 10px 0;"><tbody>', '<table style="margin: 10px 0;"><tbody>',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</tbody></table>', '</tbody></table>',
'</div>' '</div>'
@ -298,36 +298,48 @@ define([
this.chInputMode = new Common.UI.CheckBox({ this.chInputMode = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-input-mode'), el: $markup.findById('#fms-chb-input-mode'),
labelText: this.strInputMode labelText: this.strInputMode,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
/** coauthoring begin **/ /** coauthoring begin **/
this.chLiveComment = new Common.UI.CheckBox({ this.chLiveComment = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-live-comment'), el: $markup.findById('#fms-chb-live-comment'),
labelText: this.strLiveComment labelText: this.strLiveComment,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('change', function(field, newValue, oldValue, eOpts){ }).on('change', function(field, newValue, oldValue, eOpts){
me.chResolvedComment.setDisabled(field.getValue()!=='checked'); me.chResolvedComment.setDisabled(field.getValue()!=='checked');
}); });
this.chResolvedComment = new Common.UI.CheckBox({ this.chResolvedComment = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-resolved-comment'), el: $markup.findById('#fms-chb-resolved-comment'),
labelText: this.strResolvedComment labelText: this.strResolvedComment,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
/** coauthoring end **/ /** coauthoring end **/
this.chSpell = new Common.UI.CheckBox({ this.chSpell = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-spell-check'), el: $markup.findById('#fms-chb-spell-check'),
labelText: this.strSpellCheckMode labelText: this.strSpellCheckMode,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.chCompatible = new Common.UI.CheckBox({ this.chCompatible = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-compatible'), el: $markup.findById('#fms-chb-compatible'),
labelText: this.textOldVersions labelText: this.textOldVersions,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.chAutosave = new Common.UI.CheckBox({ this.chAutosave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-autosave'), el: $markup.findById('#fms-chb-autosave'),
labelText: this.strAutosave labelText: this.strAutosave,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('change', function(field, newValue, oldValue, eOpts){ }).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) { if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0); me.cmbCoAuthMode.setValue(0);
@ -338,12 +350,16 @@ define([
this.chForcesave = new Common.UI.CheckBox({ this.chForcesave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-forcesave'), el: $markup.findById('#fms-chb-forcesave'),
labelText: this.strForcesave labelText: this.strForcesave,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.chAlignGuides = new Common.UI.CheckBox({ this.chAlignGuides = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-align-guides'), el: $markup.findById('#fms-chb-align-guides'),
labelText: this.strAlignGuides labelText: this.strAlignGuides,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.cmbZoom = new Common.UI.ComboBox({ this.cmbZoom = new Common.UI.ComboBox({
@ -366,7 +382,9 @@ define([
{ value: 150, displayValue: "150%" }, { value: 150, displayValue: "150%" },
{ value: 175, displayValue: "175%" }, { value: 175, displayValue: "175%" },
{ value: 200, displayValue: "200%" } { value: 200, displayValue: "200%" }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}); });
/** coauthoring begin **/ /** coauthoring begin **/
@ -379,7 +397,9 @@ define([
{ value: 'none', displayValue: this.txtNone }, { value: 'none', displayValue: this.txtNone },
{ value: 'all', displayValue: this.txtAll }, { value: 'all', displayValue: this.txtAll },
{ value: 'last', displayValue: this.txtLast } { value: 'last', displayValue: this.txtLast }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.cmbCoAuthMode = new Common.UI.ComboBox({ this.cmbCoAuthMode = new Common.UI.ComboBox({
@ -390,7 +410,9 @@ define([
data : [ data : [
{ value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast}, { value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
{ value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict } { value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked')) if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1); me.chAutosave.setValue(1);
@ -417,7 +439,9 @@ define([
{ value: 1, displayValue: this.txtMac }, { value: 1, displayValue: this.txtMac },
{ value: 2, displayValue: this.txtNative }, { value: 2, displayValue: this.txtNative },
{ value: 'custom', displayValue: this.txtCacheMode } { value: 'custom', displayValue: this.txtCacheMode }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this)); this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
@ -430,7 +454,9 @@ define([
{ value: Common.Utils.Metric.c_MetricUnits['cm'], displayValue: this.txtCm }, { value: Common.Utils.Metric.c_MetricUnits['cm'], displayValue: this.txtCm },
{ value: Common.Utils.Metric.c_MetricUnits['pt'], displayValue: this.txtPt }, { value: Common.Utils.Metric.c_MetricUnits['pt'], displayValue: this.txtPt },
{ value: Common.Utils.Metric.c_MetricUnits['inch'], displayValue: this.txtInch } { value: Common.Utils.Metric.c_MetricUnits['inch'], displayValue: this.txtInch }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.cmbMacros = new Common.UI.ComboBox({ this.cmbMacros = new Common.UI.ComboBox({
@ -443,7 +469,9 @@ define([
{ value: 2, displayValue: this.txtStopMacros, descValue: this.txtStopMacrosDesc }, { value: 2, displayValue: this.txtStopMacros, descValue: this.txtStopMacrosDesc },
{ value: 0, displayValue: this.txtWarnMacros, descValue: this.txtWarnMacrosDesc }, { value: 0, displayValue: this.txtWarnMacros, descValue: this.txtWarnMacrosDesc },
{ value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc } { value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}).on('selected', function(combo, record) { }).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue); me.lblMacrosDesc.text(record.descValue);
}); });
@ -451,7 +479,9 @@ define([
this.chPaste = new Common.UI.CheckBox({ this.chPaste = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-paste-settings'), el: $markup.findById('#fms-chb-paste-settings'),
labelText: this.strPasteButton labelText: this.strPasteButton,
dataHint: '2',
dataHintDirection: 'left-top'
}); });
this.btnAutoCorrect = new Common.UI.Button({ this.btnAutoCorrect = new Common.UI.Button({
@ -467,7 +497,9 @@ define([
data : [ data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight }, { value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark } { value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
] ],
dataHint: '2',
dataHintDirection: 'left-top'
}); });
$markup.find('.btn.primary').each(function(index, el){ $markup.find('.btn.primary').each(function(index, el){
@ -983,7 +1015,7 @@ define([
'<table class="main" style="margin: 10px 0;">', '<table class="main" style="margin: 10px 0;">',
'<tr>', '<tr>',
'<td class="left"></td>', '<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', '<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="left-top"><%= scope.okButtonText %></button></td>',
'</tr>', '</tr>',
'</table>', '</table>',
'</div>' '</div>'
@ -1030,19 +1062,25 @@ define([
el : $markup.findById('#id-info-title'), el : $markup.findById('#id-info-title'),
style : 'width: 200px;', style : 'width: 200px;',
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
this.inputSubject = new Common.UI.InputField({ this.inputSubject = new Common.UI.InputField({
el : $markup.findById('#id-info-subject'), el : $markup.findById('#id-info-subject'),
style : 'width: 200px;', style : 'width: 200px;',
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
this.inputComment = new Common.UI.InputField({ this.inputComment = new Common.UI.InputField({
el : $markup.findById('#id-info-comment'), el : $markup.findById('#id-info-comment'),
style : 'width: 200px;', style : 'width: 200px;',
placeHolder : this.txtAddText, placeHolder : this.txtAddText,
validateOnBlur: false validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('keydown:before', keyDownBefore); }).on('keydown:before', keyDownBefore);
// modify info // modify info
@ -1071,7 +1109,9 @@ define([
el : $markup.findById('#id-info-add-author'), el : $markup.findById('#id-info-add-author'),
style : 'width: 200px;', style : 'width: 200px;',
validateOnBlur: false, validateOnBlur: false,
placeHolder: this.txtAddAuthor placeHolder: this.txtAddAuthor,
dataHint: '2',
dataHintDirection: 'left-top'
}).on('changed:after', function(input, newValue, oldValue, e) { }).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return; if (newValue == oldValue) return;