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

[PE] Hint Manager: add hints in file menu, left menu, statusbar

Browse source
This commit is contained in:
JuliaSvinareva 2021-06-21 20:49:45 +03:00
parent eca0abff3b
commit a8c09d3200
7 changed files with 173 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -300,7 +300,8 @@ define([
el: $markup.findById('#fms-chb-input-mode'),
labelText: this.strInputMode,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
/** coauthoring begin **/
@ -308,7 +309,8 @@ define([
el: $markup.findById('#fms-chb-live-comment'),
labelText: this.strLiveComment,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', function(field, newValue, oldValue, eOpts){
me.chResolvedComment.setDisabled(field.getValue()!=='checked');
});
@ -317,7 +319,8 @@ define([
el: $markup.findById('#fms-chb-resolved-comment'),
labelText: this.strResolvedComment,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
/** coauthoring end **/
@ -325,21 +328,24 @@ define([
el: $markup.findById('#fms-chb-spell-check'),
labelText: this.strSpellCheckMode,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chCompatible = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-compatible'),
labelText: this.textOldVersions,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chAutosave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-autosave'),
labelText: this.strAutosave,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0);
@ -352,14 +358,16 @@ define([
el: $markup.findById('#fms-chb-forcesave'),
labelText: this.strForcesave,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chAlignGuides = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-align-guides'),
labelText: this.strAlignGuides,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbZoom = new Common.UI.ComboBox({
@ -487,7 +495,8 @@ define([
el: $markup.findById('#fms-chb-paste-settings'),
labelText: this.strPasteButton,
dataHint: '2',
dataHintDirection: 'left'
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.btnAutoCorrect = new Common.UI.Button({

3
apps/presentationeditor/main/app/controller/LeftMenu.js
View file

@ -672,7 +672,8 @@ define([
// if (!this.leftMenu.isOpened()) return true;
// TODO:
if ( this.leftMenu.menuFile.isVisible() ) {
this.leftMenu.menuFile.hide();
if (Common.UI.HintManager.needCloseMenu())
this.leftMenu.menuFile.hide();
return false;
}

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

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

10
apps/presentationeditor/main/app/template/StatusBar.template
View file

@ -4,7 +4,7 @@
<div id="slot-status-btn-preview" style="display: inline-block;margin-left: 9px;"></div>
</div>
<div class="status-group dropup">
<label id="status-label-pages" class="status-label dropdown-toggle" style="margin-left: 7px; display: none;" data-toggle="dropdown"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<label id="status-label-pages" class="status-label dropdown-toggle" style="margin-left: 7px; display: none;" data-toggle="dropdown" data-hint="0" data-hint-direction="top" data-hint-offset="-3, 0"><%= Common.Utils.String.format(scope.pageIndexText, 1, 1) %></label>
<div id="status-goto-box" class="dropdown-menu">
<label style="float:left;line-height:22px;"><%= scope.goToPageText %></label>
<div id="status-goto-page" style="display:inline-block;"></div>
@ -28,7 +28,7 @@
</div>
<div class="status-group" style="">
<div class="cnt-lang el-edit">
<div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;">
<div class="dropdown-toggle" data-toggle="dropdown" style="margin-right: 6px;" data-hint="0" data-hint-direction="top">
<label id="status-label-lang" class="status-label">English (United States)</label>
<div class="caret up img-commonctrl"></div>
</div>
@ -36,11 +36,11 @@
<span id="btn-doc-lang" class="el-edit"></span>
<span id="btn-doc-spell" class="el-edit"></span>
<div class="separator short el-edit"></div>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-ic-zoomtoslide"></i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-ic-zoomtowidth"></i></button>
<button id="btn-zoom-topage" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtoslide"></i></button>
<button id="btn-zoom-towidth" type="button" class="btn small btn-toolbar" data-hint="0" data-hint-direction="top" data-hint-offset="small"><i class="icon toolbar__icon btn-ic-zoomtowidth"></i></button>
<button id="btn-zoom-down" type="button" class="btn small btn-toolbar"><i class="icon toolbar__icon btn-zoomdown"></i></button>
<div class="cnt-zoom">
<div class="dropdown-toggle" data-toggle="dropdown">
<div class="dropdown-toggle" data-toggle="dropdown" data-hint="0" data-hint-direction="top">
<label id="status-label-zoom" class="status-label">Zoom 100%</label>
</div>
</div>

85
apps/presentationeditor/main/app/view/FileMenu.js
View file

@ -92,7 +92,10 @@ define([
action : 'save',
caption : this.btnSaveCaption,
canFocused: false,
disabled: true
disabled: true,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
if ( !!this.options.miSave ) {
this.miSave.setDisabled(this.options.miSave.isDisabled());
@ -103,49 +106,70 @@ define([
el : $markup.elementById('#fm-btn-edit'),
action : 'edit',
caption : this.btnToEditCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miDownload = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-download'),
action : 'saveas',
caption : this.btnDownloadCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miSaveCopyAs = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-save-copy'),
action : 'save-copy',
caption : this.btnSaveCopyAsCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miSaveAs = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-save-desktop'),
action : 'save-desktop',
caption : this.btnSaveAsCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miPrint = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-print'),
action : 'print',
caption : this.btnPrintCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miRename = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-rename'),
action : 'rename',
caption : this.btnRenameCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miProtect = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-protect'),
action : 'protect',
caption : this.btnProtectCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
if ( !!this.options.miProtect ) {
this.miProtect.setDisabled(this.options.miProtect.isDisabled());
@ -156,35 +180,50 @@ define([
el : $markup.elementById('#fm-btn-recent'),
action : 'recent',
caption : this.btnRecentFilesCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miNew = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-create'),
action : 'new',
caption : this.btnCreateNewCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miAccess = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-rights'),
action : 'rights',
caption : this.btnRightsCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miHelp = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-help'),
action : 'help',
caption : this.btnHelpCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.miHistory = new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-history'),
action : 'history',
caption : this.btnHistoryCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
});
this.items = [];
@ -193,7 +232,10 @@ define([
el : $markup.elementById('#fm-btn-return'),
action : 'back',
caption : this.btnCloseMenuCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miSave,
this.miEdit,
@ -209,7 +251,10 @@ define([
el : $markup.elementById('#fm-btn-info'),
action : 'info',
caption : this.btnInfoCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miAccess,
this.miHistory,
@ -217,14 +262,20 @@ define([
el : $markup.elementById('#fm-btn-settings'),
action : 'opts',
caption : this.btnSettingsCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
}),
this.miHelp,
new Common.UI.MenuItem({
el : $markup.elementById('#fm-btn-back'),
action : 'exit',
caption : this.btnBackCaption,
canFocused: false
canFocused: false,
dataHint: 1,
dataHintDirection: 'left-top',
dataHintOffset: [2, 14]
})
);

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

@ -69,7 +69,7 @@ define([
'<% _.each(rows, function(row) { %>',
'<tr>',
'<% _.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>',
'</svg></div></td>',
'<% }) %>',
@ -188,7 +188,7 @@ define([
'</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">',
'<td class="left"><label><%= scope.txtProofing %></label></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;"><%= scope.txtAutoCorrect %></button></div></td>',
'<td class="right"><button type="button" class="btn btn-text-default" id="fms-btn-auto-correct" style="width:auto; display: inline-block;padding-right: 10px;padding-left: 10px;" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.txtAutoCorrect %></button></div></td>',
'</tr>','<tr class="divider edit"></tr>',
'<tr class="edit">',
'<td class="left"><label><%= scope.txtInput %></label></td>',
@ -242,7 +242,7 @@ define([
'</tr>','<tr class="divider macros"></tr>',
'<tr class="fms-btn-apply">',
'<td class="left"></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'<td class="right" style="padding-top:15px; padding-bottom: 15px;"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>',
@ -250,7 +250,7 @@ define([
'<table style="margin: 10px 0;"><tbody>',
'<tr>',
'<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="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>'
@ -268,12 +268,18 @@ define([
this.chSpell = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-spell-check'),
labelText: this.strSpellCheckMode
labelText: this.strSpellCheckMode,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chInputMode = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-input-mode'),
labelText: this.strInputMode
labelText: this.strInputMode,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbZoom = new Common.UI.ComboBox({
@ -296,7 +302,10 @@ define([
{ value: 150, displayValue: "150%" },
{ value: 175, displayValue: "175%" },
{ value: 200, displayValue: "200%" }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
/** coauthoring begin **/
@ -308,7 +317,10 @@ define([
data : [
{ value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
{ value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1);
@ -320,7 +332,10 @@ define([
this.chAutosave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-autosave'),
labelText: this.strAutosave
labelText: this.strAutosave,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0);
@ -331,12 +346,18 @@ define([
this.chForcesave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-forcesave'),
labelText: this.strForcesave
labelText: this.strForcesave,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chAlignGuides = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-align-guides'),
labelText: this.strAlignGuides
labelText: this.strAlignGuides,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
var itemsTemplate =
@ -356,7 +377,10 @@ define([
{ value: Asc.c_oAscFontRenderingModeType.noHinting, displayValue: this.txtMac },
{ value: Asc.c_oAscFontRenderingModeType.hinting, displayValue: this.txtNative },
{ value: 'custom', displayValue: this.txtCacheMode }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
@ -369,7 +393,10 @@ define([
{ 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['inch'], displayValue: this.txtInch }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbMacros = new Common.UI.ComboBox({
@ -382,7 +409,10 @@ define([
{ value: 2, displayValue: this.txtStopMacros, descValue: this.txtStopMacrosDesc },
{ value: 0, displayValue: this.txtWarnMacros, descValue: this.txtWarnMacrosDesc },
{ value: 1, displayValue: this.txtRunMacros, descValue: this.txtRunMacrosDesc }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue);
});
@ -390,7 +420,10 @@ define([
this.chPaste = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-paste-settings'),
labelText: this.strPasteButton
labelText: this.strPasteButton,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.btnAutoCorrect = new Common.UI.Button({
@ -406,7 +439,10 @@ define([
data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
]
],
dataHint: '2',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
$markup.find('.btn.primary').each(function(index, el){
@ -863,7 +899,7 @@ define([
'<table class="main" style="margin: 10px 0;">',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'<td class="right"><button id="fminfo-btn-apply" class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
'</tr>',
'</table>',
'</div>'
@ -900,19 +936,28 @@ define([
el : $markup.findById('#id-info-title'),
style : 'width: 200px;',
placeHolder : this.txtAddText,
validateOnBlur: false
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
this.inputSubject = new Common.UI.InputField({
el : $markup.findById('#id-info-subject'),
style : 'width: 200px;',
placeHolder : this.txtAddText,
validateOnBlur: false
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
this.inputComment = new Common.UI.InputField({
el : $markup.findById('#id-info-comment'),
style : 'width: 200px;',
placeHolder : this.txtAddText,
validateOnBlur: false
validateOnBlur: false,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('keydown:before', keyDownBefore);
// modify info
@ -941,7 +986,10 @@ define([
el : $markup.findById('#id-info-add-author'),
style : 'width: 200px;',
validateOnBlur: false,
placeHolder: this.txtAddAuthor
placeHolder: this.txtAddAuthor,
dataHint: '2',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('changed:after', function(input, newValue, oldValue, e) {
if (newValue == oldValue) return;

5
apps/presentationeditor/main/app/view/Statusbar.js
View file

@ -244,7 +244,10 @@ define([
{caption: this.textShowCurrent, value: 1},
{caption: this.textShowPresenterView, value: 2}
]
})
}),
dataHint: '0',
dataHintDirection: 'top',
dataHintOffset: '0, -16'
});
var panelLang = $('.cnt-lang',this.el);