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

Hint manager: add attr in button component, add getting of unique name, add directions, add applying of the disable

Browse source
This commit is contained in:
JuliaSvinareva 2021-05-20 20:02:11 +03:00
parent 71a6297b38
commit 4d30ec11e6
5 changed files with 66 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
apps/common/main/lib/component/Button.js
View file

@ -245,7 +245,9 @@ define([
disabled : false, disabled : false,
pressed : false, pressed : false,
split : false, split : false,
visible : true visible : true,
dataHint : '',
dataHintDirection: ''
}, },
template: _.template([ template: _.template([
@ -261,13 +263,13 @@ define([
'}} %>', '}} %>',
'<% } %>', '<% } %>',
'<% if ( !menu ) { %>', '<% if ( !menu ) { %>',
'<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">', '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>" >',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<% } else if (split == false) {%>', '<% } else if (split == false) {%>',
'<div class="btn-group" id="<%= id %>" style="<%= style %>">', '<div class="btn-group" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">', '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'<span class="inner-box-caret">' + '<span class="inner-box-caret">' +
@ -277,11 +279,11 @@ define([
'</div>', '</div>',
'<% } else { %>', '<% } else { %>',
'<div class="btn-group split" id="<%= id %>" style="<%= style %>">', '<div class="btn-group split" id="<%= id %>" style="<%= style %>">',
'<button type="button" class="btn <%= cls %>">', '<button type="button" class="btn <%= cls %>" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<% applyicon() %>', '<% applyicon() %>',
'<span class="caption"><%= caption %></span>', '<span class="caption"><%= caption %></span>',
'</button>', '</button>',
'<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">', '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown" data-hint="<%= dataHint %>" data-hint-direction="<%= dataHintDirection %>">',
'<i class="caret"></i>', '<i class="caret"></i>',
'<span class="sr-only"></span>', '<span class="sr-only"></span>',
'</button>', '</button>',
@ -350,7 +352,9 @@ define([
disabled : me.disabled, disabled : me.disabled,
pressed : me.pressed, pressed : me.pressed,
caption : me.caption, caption : me.caption,
style : me.style style : me.style,
dataHint : me.options.dataHint,
dataHintDirection: me.options.dataHintDirection
})); }));
if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render)) if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render))

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

@ -81,12 +81,27 @@ Common.UI.HintManager = new(function() {
!$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1])); !$('.toolbar-fullview-panel').is(':visible') && (arr = arr.concat(_controls[_currentLevel+1]));
} else } else
arr = _controls[_currentLevel+1]; arr = _controls[_currentLevel+1];
arr.forEach(function(item, index) { var visibleItems = arr.filter(function (item) {
var el = $(item); return $(item).is(':visible');
if (el.is(':visible')) { });
el.attr('data-hint-title', String.fromCharCode(65 + index)); if (visibleItems.length > _arrLetters.length) {
_currentControls.push(el); var arrLength = _arrLetters.length;
var count = visibleItems.length - arrLength;
var arrIndexes = [];
for (var i = 0; arrIndexes.length < count; i++) {
var randInd = Math.floor(Math.random() * arrLength); //get random index
if (arrIndexes.indexOf(randInd) === -1 && randInd < arrLength - 1) {
arrIndexes.push(randInd);
_arrLetters[_arrLetters.length] = _arrLetters[randInd] + _arrLetters[randInd + 1];
_arrLetters[randInd] = _arrLetters[randInd] + _arrLetters[randInd];
}
} }
}
console.log(_arrLetters);
visibleItems.forEach(function (item, index) {
var el = $(item);
el.attr('data-hint-title', _arrLetters[index].toUpperCase());
_currentControls.push(el);
}); });
return _currentControls; return _currentControls;
}; };
@ -95,13 +110,21 @@ Common.UI.HintManager = new(function() {
_removeHints(); _removeHints();
_getControls(); _getControls();
_currentControls.forEach(function(item, index) { _currentControls.forEach(function(item, index) {
var offset = item.offset(); var disabled = item.hasClass('disabled');
var hint = $('<div style="" class="hint-div">' + item.attr('data-hint-title') + '</div>'); var classes = 'hint-div' + (disabled ? ' disabled' : '');
var hint = $('<div style="" class="' + classes + '">' + item.attr('data-hint-title') + '</div>');
var direction = item.attr('data-hint-direction'); var direction = item.attr('data-hint-direction');
if (direction=='right') var offset = item.offset();
hint.css({left: offset.left + item.outerWidth(), top: offset.top + (item.outerHeight()-20)/2}); if (direction === 'top')
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top - 3});
else if (direction === 'right')
hint.css({left: offset.left + item.outerWidth() - 4, top: offset.top + (item.outerHeight()-20)/2});
else if (direction === 'left')
hint.css({left: offset.left - 18, top: offset.top + (item.outerHeight()-20)/2});
else if (direction === 'left-bottom')
hint.css({left: offset.left - 8, top: offset.top + item.outerHeight() - 12});
else else
hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight()}); hint.css({left: offset.left + (item.outerWidth() - 20)/2, top: offset.top + item.outerHeight() - 3});
$(document.body).append(hint); $(document.body).append(hint);
_currentHints.push(hint); _currentHints.push(hint);

12
apps/common/main/lib/view/Header.js
View file

@ -85,7 +85,7 @@ define([
'<div class="hedset">' + '<div class="hedset">' +
// '<span class="btn-slot text" id="slot-btn-users"></span>' + // '<span class="btn-slot text" id="slot-btn-users"></span>' +
'<section id="tlb-box-users" class="box-cousers dropdown"">' + '<section id="tlb-box-users" class="box-cousers dropdown"">' +
'<div class="btn-users">' + '<div class="btn-users" data-hint="0">' +
'<i class="icon toolbar__icon icon--inverse btn-users"></i>' + '<i class="icon toolbar__icon icon--inverse btn-users"></i>' +
'<label class="caption">&plus;</label>' + '<label class="caption">&plus;</label>' +
'</div>' + '</div>' +
@ -415,7 +415,8 @@ define([
id: 'btn-goback', id: 'btn-goback',
cls: 'btn-header', cls: 'btn-header',
iconCls: 'toolbar__icon icon--inverse btn-goback', iconCls: 'toolbar__icon icon--inverse btn-goback',
split: true split: true,
dataHint: '0'
}); });
storeUsers = this.options.storeUsers; storeUsers = this.options.storeUsers;
@ -428,7 +429,8 @@ define([
me.btnOptions = new Common.UI.Button({ me.btnOptions = new Common.UI.Button({
cls: 'btn-header no-caret', cls: 'btn-header no-caret',
iconCls: 'toolbar__icon icon--inverse btn-ic-options', iconCls: 'toolbar__icon icon--inverse btn-ic-options',
menu: true menu: true,
dataHint: '0'
}); });
me.mnuZoom = {options: {value: 100}}; me.mnuZoom = {options: {value: 100}};
@ -459,7 +461,9 @@ define([
return (new Common.UI.Button({ return (new Common.UI.Button({
cls: 'btn-header', cls: 'btn-header',
iconCls: iconid, iconCls: iconid,
disabled: disabled === true disabled: disabled === true,
dataHint:'0',
dataHintDirection: 'left-bottom'
})).render(slot); })).render(slot);
} }

6
apps/common/main/resources/less/hint-manager.less
View file

@ -1,7 +1,8 @@
.hint-div { .hint-div {
position: absolute; position: absolute;
z-index: @zindex-navbar + 3; z-index: @zindex-navbar + 3;
width: 20px; width: auto;
min-width: 20px;
text-align: center; text-align: center;
background-color: @background-alt-key-hint-ie; background-color: @background-alt-key-hint-ie;
background-color: @background-alt-key-hint; background-color: @background-alt-key-hint;
@ -10,4 +11,7 @@
line-height: 18px; line-height: 18px;
padding: 0 4px; padding: 0 4px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
&.disabled {
opacity: 0.4;
}
} }

20
apps/documenteditor/main/app/template/RightMenu.template
View file

@ -23,15 +23,15 @@
</div> </div>
<div class="tool-menu-btns"> <div class="tool-menu-btns">
<div class="ct-btn-category arrow-left"></div> <div class="ct-btn-category arrow-left"></div>
<button id="id-right-menu-text" class="btn btn-category arrow-left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button> <button id="id-right-menu-text" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-paragraph-settings"><i class="icon toolbar__icon btn-paragraph">&nbsp;</i></button>
<button id="id-right-menu-table" class="btn btn-category arrow-left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button> <button id="id-right-menu-table" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-table-settings"><i class="icon toolbar__icon btn-menu-table">&nbsp;</i></button>
<button id="id-right-menu-image" class="btn btn-category arrow-left" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button> <button id="id-right-menu-image" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-image-settings"><i class="icon toolbar__icon btn-menu-image">&nbsp;</i></button>
<button id="id-right-menu-header" class="btn btn-category arrow-left" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button> <button id="id-right-menu-header" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-header-settings"><i class="icon toolbar__icon btn-menu-header">&nbsp;</i></button>
<button id="id-right-menu-shape" class="btn btn-category arrow-left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button> <button id="id-right-menu-shape" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-shape-settings"><i class="icon toolbar__icon btn-menu-shape">&nbsp;</i></button>
<button id="id-right-menu-chart" class="btn btn-category arrow-left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button> <button id="id-right-menu-chart" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-chart-settings"><i class="icon toolbar__icon btn-menu-chart">&nbsp;</i></button>
<button id="id-right-menu-textart" class="btn btn-category arrow-left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button> <button id="id-right-menu-textart" class="btn btn-category arrow-left" data-hint="1" data-hint-direction="left" content-target="id-textart-settings"><i class="icon toolbar__icon btn-menu-textart">&nbsp;</i></button>
<button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button> <button id="id-right-menu-mail-merge" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-mail-merge-settings"><i class="icon toolbar__icon btn-mailmerge">&nbsp;</i></button>
<button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button> <button id="id-right-menu-signature" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-signature-settings"><i class="icon toolbar__icon btn-menu-signature">&nbsp;</i></button>
<button id="id-right-menu-form" class="btn btn-category arrow-left hidden" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button> <button id="id-right-menu-form" class="btn btn-category arrow-left hidden" data-hint="1" data-hint-direction="left" content-target="id-form-settings"><i class="icon toolbar__icon btn-field">&nbsp;</i></button>
</div> </div>
</div> </div>