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

[SSE] Add alt hints to diagram editor (bug 53810)

Browse source
This commit is contained in:
JuliaSvinareva 2021-11-18 20:07:13 +03:00
parent 36ae2eeb07
commit 7257bca7b6
4 changed files with 73 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -115,7 +115,8 @@ Common.UI.HintManager = new(function() {
_isComplete = false, _isComplete = false,
_isLockedKeyEvents = false, _isLockedKeyEvents = false,
_inputTimer, _inputTimer,
_isDocReady = false; _isDocReady = false,
_isEditDiagram = false;
var _api; var _api;
@ -126,7 +127,9 @@ Common.UI.HintManager = new(function() {
} }
return; return;
} }
if ($('#file-menu-panel').is(':visible')) { if (_isEditDiagram) {
_currentSection = [$(window.parent.document).find('.advanced-settings-dlg')[0], window.document];
} else if ($('#file-menu-panel').is(':visible')) {
_currentSection = $('#file-menu-panel'); _currentSection = $('#file-menu-panel');
} else { } else {
_currentSection = (btn && btn.closest('.hint-section')) || document; _currentSection = (btn && btn.closest('.hint-section')) || document;
@ -142,7 +145,7 @@ Common.UI.HintManager = new(function() {
var _showHints = function () { var _showHints = function () {
_inputLetters = ''; _inputLetters = '';
if (_currentHints.length === 0 || ($('#file-menu-panel').is(':visible') && _currentLevel === 1)) { if (_currentHints.length === 0 || ($('#file-menu-panel').is(':visible' || _isEditDiagram) && _currentLevel === 1)) {
_getHints(); _getHints();
} }
if (_currentHints.length > 0) { if (_currentHints.length > 0) {
@ -198,11 +201,21 @@ Common.UI.HintManager = new(function() {
var _getControls = function() { var _getControls = function() {
_currentControls = []; _currentControls = [];
var arr = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray(); var arr = [],
arrItemsWithTitle = [];
if (_.isArray(_currentSection)) {
_currentSection.forEach(function (section) {
arr = arr.concat($(section).find('[data-hint=' + (_currentLevel) + ']').toArray());
arrItemsWithTitle = arrItemsWithTitle.concat($(section).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray());
});
} else {
arr = $(_currentSection).find('[data-hint=' + (_currentLevel) + ']').toArray();
arrItemsWithTitle = $(_currentSection).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray();
}
var visibleItems = arr.filter(function (item) { var visibleItems = arr.filter(function (item) {
return $(item).is(':visible'); return $(item).is(':visible');
}); });
var visibleItemsWithTitle = $(_currentSection).find('[data-hint-title][data-hint=' + (_currentLevel) + ']').toArray().filter(function (item) { var visibleItemsWithTitle = arrItemsWithTitle.filter(function (item) {
return $(item).is(':visible'); return $(item).is(':visible');
}); });
if (visibleItems.length === visibleItemsWithTitle.length) { // all buttons have data-hint-title if (visibleItems.length === visibleItemsWithTitle.length) { // all buttons have data-hint-title
@ -219,7 +232,7 @@ Common.UI.HintManager = new(function() {
_arrLetters = _arrAlphabet.slice(); _arrLetters = _arrAlphabet.slice();
} }
var usedLetters = []; var usedLetters = [];
if ($(_currentSection).find('[data-hint-title]').length > 0) { if (arrItemsWithTitle.length > 0) {
visibleItems.forEach(function (item) { visibleItems.forEach(function (item) {
var el = $(item); var el = $(item);
var title = el.attr('data-hint-title'); var title = el.attr('data-hint-title');
@ -252,10 +265,11 @@ Common.UI.HintManager = new(function() {
}; };
var _getHints = function() { var _getHints = function() {
var docH = Common.Utils.innerHeight() - 20, var docH = _isEditDiagram ? (window.parent.innerHeight * Common.Utils.zoom()) : (Common.Utils.innerHeight() - 20),
docW = Common.Utils.innerWidth(), docW = _isEditDiagram ? (window.parent.innerWidth * Common.Utils.zoom()) : (Common.Utils.innerWidth()),
topSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? $(_currentSection).offset().top : 0, section = _isEditDiagram ? _currentSection[0] : _currentSection,
bottomSection = _currentLevel !== 0 && $(_currentSection).length > 0 ? topSection + $(_currentSection).height() : docH; topSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? $(section).offset().top : 0,
bottomSection = _currentLevel !== 0 && $(section).length > 0 && !_isEditDiagram ? topSection + $(section).height() : docH;
if (_currentControls.length === 0) if (_currentControls.length === 0)
_getControls(); _getControls();
@ -263,7 +277,7 @@ Common.UI.HintManager = new(function() {
if (!_isItemDisabled(item)) { if (!_isItemDisabled(item)) {
var leftBorder = 0, var leftBorder = 0,
rightBorder = docW; rightBorder = docW;
if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || item.closest('.group').find('.toolbar-group-mask').length > 0)) { if (!_isEditDiagram && $(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || item.closest('.group').find('.toolbar-group-mask').length > 0)) {
return; return;
} }
if (window.SSE && item.parent().prop('id') === 'statusbar_bottom') { if (window.SSE && item.parent().prop('id') === 'statusbar_bottom') {
@ -284,7 +298,7 @@ Common.UI.HintManager = new(function() {
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');
// exceptions // exceptions
if (window.SSE && _currentSection.nodeType !== 9 && if (window.SSE && !_isEditDiagram && _currentSection.nodeType !== 9 &&
_currentSection.prop('id') === 'toolbar' && item.closest('.panel').attr('data-tab') === 'data') { _currentSection.prop('id') === 'toolbar' && item.closest('.panel').attr('data-tab') === 'data') {
if (item.parent().hasClass('slot-sortdesc') || item.parent().hasClass('slot-btn-setfilter')) { if (item.parent().hasClass('slot-sortdesc') || item.parent().hasClass('slot-btn-setfilter')) {
direction = 'top'; direction = 'top';
@ -344,7 +358,12 @@ Common.UI.HintManager = new(function() {
top: top, top: top,
left: left left: left
}); });
$(document.body).append(hint); if (_isEditDiagram && index < 2) {
hint.css('z-index', '1060');
$(window.parent.document.body).append(hint);
} else {
$(document.body).append(hint);
}
} }
_currentHints.push(hint); _currentHints.push(hint);
@ -359,7 +378,7 @@ Common.UI.HintManager = new(function() {
}; };
var _resetToDefault = function() { var _resetToDefault = function() {
_currentLevel = $('#file-menu-panel').is(':visible') ? 1 : 0; _currentLevel = ($('#file-menu-panel').is(':visible') || _isEditDiagram) ? 1 : 0;
_setCurrentSection(); _setCurrentSection();
_currentHints.length = 0; _currentHints.length = 0;
_currentControls.length = 0; _currentControls.length = 0;
@ -387,7 +406,7 @@ Common.UI.HintManager = new(function() {
e.preventDefault(); e.preventDefault();
if (!_hintVisible) { if (!_hintVisible) {
$('input:focus').blur(); // to change value in inputField $('input:focus').blur(); // to change value in inputField
_currentLevel = $('#file-menu-panel').is(':visible') ? 1 : 0; _currentLevel = ($('#file-menu-panel').is(':visible') || _isEditDiagram) ? 1 : 0;
_setCurrentSection(); _setCurrentSection();
_showHints(); _showHints();
} else { } else {
@ -451,7 +470,7 @@ Common.UI.HintManager = new(function() {
} else { } else {
_isComplete = false; _isComplete = false;
_hideHints(); _hideHints();
if ($(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || curr.closest('.group').find('.toolbar-group-mask').length > 0)) { if (!_isEditDiagram && $(_currentSection).prop('id') === 'toolbar' && ($(_currentSection).find('.toolbar-mask').length > 0 || curr.closest('.group').find('.toolbar-group-mask').length > 0)) {
_resetToDefault(); _resetToDefault();
return; return;
} }
@ -495,7 +514,7 @@ Common.UI.HintManager = new(function() {
} }
} }
_needShow = (e.keyCode == Common.UI.Keys.ALT && !Common.Utils.ModalWindow.isVisible() && _isDocReady); _needShow = (e.keyCode == Common.UI.Keys.ALT && (!Common.Utils.ModalWindow.isVisible()) && _isDocReady);
}); });
}; };
@ -537,8 +556,13 @@ Common.UI.HintManager = new(function() {
return _hintVisible; return _hintVisible;
}; };
var _setMode = function (mode) {
_isEditDiagram = mode.isEditDiagram;
};
return { return {
init: _init, init: _init,
setMode: _setMode,
clearHints: _clearHints, clearHints: _clearHints,
needCloseFileMenu: _needCloseFileMenu, needCloseFileMenu: _needCloseFileMenu,
isHintVisible: _isHintVisible isHintVisible: _isHintVisible

4
apps/common/main/lib/view/ExternalDiagramEditor.js
View file

@ -62,8 +62,8 @@ define([
'</div>', '</div>',
'<div class="separator horizontal"></div>', '<div class="separator horizontal"></div>',
'<div class="footer" style="text-align: center;">', '<div class="footer" style="text-align: center;">',
'<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok">' + this.textSave + '</button>', '<button id="id-btn-diagram-editor-apply" class="btn normal dlg-btn primary custom" result="ok" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textSave + '</button>',
'<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel">' + this.textClose + '</button>', '<button id="id-btn-diagram-editor-cancel" class="btn normal dlg-btn" result="cancel" data-hint="1" data-hint-direction="bottom" data-hint-offset="big">' + this.textClose + '</button>',
'</div>' '</div>'
].join(''); ].join('');

4
apps/spreadsheeteditor/main/app/controller/Main.js
View file

@ -456,6 +456,10 @@ define([
this.isFrameClosed = (this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge); this.isFrameClosed = (this.appOptions.isEditDiagram || this.appOptions.isEditMailMerge);
Common.Controllers.Desktop.init(this.appOptions); Common.Controllers.Desktop.init(this.appOptions);
if (this.appOptions.isEditDiagram) {
Common.UI.HintManager.setMode(this.appOptions);
}
}, },
loadDocument: function(data) { loadDocument: function(data) {

35
apps/spreadsheeteditor/main/app/view/Toolbar.js
View file

@ -187,7 +187,7 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-copy', iconCls : 'toolbar__icon btn-copy',
dataHint: '1', dataHint: '1',
dataHintDirection: 'top', dataHintDirection: config.isEditDiagram ? 'bottom' : 'top',
dataHintTitle: 'C' dataHintTitle: 'C'
}); });
@ -197,7 +197,7 @@ define([
iconCls : 'toolbar__icon btn-paste', iconCls : 'toolbar__icon btn-paste',
lock : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect], lock : [/*_set.editCell,*/ _set.coAuth, _set.lostConnect],
dataHint : '1', dataHint : '1',
dataHintDirection: 'top', dataHintDirection: config.isEditDiagram ? 'bottom' : 'top',
dataHintTitle: 'V' dataHintTitle: 'V'
}); });
@ -249,21 +249,28 @@ define([
hint: me.txtFormula + Common.Utils.String.platformKey('Shift+F3') hint: me.txtFormula + Common.Utils.String.platformKey('Shift+F3')
} }
] ]
}) }),
dataHint: '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
me.btnDecDecimal = new Common.UI.Button({ me.btnDecDecimal = new Common.UI.Button({
id : 'id-toolbar-btn-decdecimal', id : 'id-toolbar-btn-decdecimal',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-decdecimal', iconCls : 'toolbar__icon btn-decdecimal',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth] lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth],
dataHint : '1',
dataHintDirection: 'bottom'
}); });
me.btnIncDecimal = new Common.UI.Button({ me.btnIncDecimal = new Common.UI.Button({
id : 'id-toolbar-btn-incdecimal', id : 'id-toolbar-btn-incdecimal',
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-incdecimal', iconCls : 'toolbar__icon btn-incdecimal',
lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth] lock : [_set.editCell, _set.selChart, _set.selChartText, _set.selShape, _set.selShapeText, _set.selImage, _set.lostConnect, _set.coAuth],
dataHint : '1',
dataHintDirection: 'bottom'
}); });
var formatTemplate = var formatTemplate =
@ -287,7 +294,8 @@ define([
editable : false, editable : false,
data : me.numFormatData, data : me.numFormatData,
dataHint : '1', dataHint : '1',
dataHintDirection: 'top' dataHintDirection: config.isEditDiagram ? 'bottom' : 'top',
dataHintOffset: config.isEditDiagram ? 'big' : undefined
}); });
me.btnEditChart = new Common.UI.Button({ me.btnEditChart = new Common.UI.Button({
@ -295,7 +303,10 @@ define([
cls : 'btn-toolbar btn-text-default auto', cls : 'btn-toolbar btn-text-default auto',
caption : me.tipEditChart, caption : me.tipEditChart,
lock : [_set.lostConnect], lock : [_set.lostConnect],
style : 'min-width: 120px;' style : 'min-width: 120px;',
dataHint : '1',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}); });
me.btnEditChartData = new Common.UI.Button({ me.btnEditChartData = new Common.UI.Button({
@ -303,7 +314,10 @@ define([
cls : 'btn-toolbar', cls : 'btn-toolbar',
iconCls : 'toolbar__icon btn-select-range', iconCls : 'toolbar__icon btn-select-range',
caption : me.tipEditChartData, caption : me.tipEditChartData,
lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect] lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect],
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'medium'
}); });
me.btnEditChartType = new Common.UI.Button({ me.btnEditChartType = new Common.UI.Button({
@ -312,7 +326,10 @@ define([
iconCls : 'toolbar__icon btn-menu-chart', iconCls : 'toolbar__icon btn-menu-chart',
caption : me.tipEditChartType, caption : me.tipEditChartType,
lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect], lock : [_set.editCell, _set.selRange, _set.selRangeEdit, _set.lostConnect],
style : 'min-width: 120px;' style : 'min-width: 120px;',
dataHint : '1',
dataHintDirection: 'left',
dataHintOffset: 'medium'
}); });
} else } else
if ( config.isEditMailMerge ) { if ( config.isEditMailMerge ) {