[SSE] Hint manager: added ability to add hints to dataview items, added hints in advanced settings

This commit is contained in:
JuliaSvinareva 2021-06-14 20:28:51 +03:00
parent 529d6c2ad0
commit 9b5f0107e3
2 changed files with 178 additions and 47 deletions

View file

@ -125,6 +125,9 @@ define([
var me = this;
me.template = me.options.template || me.template;
me.dataHint = me.options.dataHint || '';
me.dataHintDirection = me.options.dataHintDirection || '';
me.dataHintOffset = me.options.dataHintOffset || '';
me.listenTo(me.model, 'change', me.render);
me.listenTo(me.model, 'change:selected', me.onSelectChange);
@ -140,6 +143,14 @@ define([
el.html(this.template(this.model.toJSON()));
el.addClass('item');
el.toggleClass('selected', this.model.get('selected') && this.model.get('allowSelected'));
if (this.dataHint !== '') {
console.log('tr');
el.attr('data-hint', this.dataHint);
el.attr('data-hint-direction', this.dataHintDirection);
el.attr('data-hint-offset', this.dataHintOffset);
}
el.off('click dblclick contextmenu');
el.on({ 'click': _.bind(this.onClick, this),
'dblclick': _.bind(this.onDblClick, this),
@ -232,6 +243,9 @@ define([
me.store = me.options.store || new Common.UI.DataViewStore();
me.groups = me.options.groups || null;
me.itemTemplate = me.options.itemTemplate || null;
me.itemDataHint = me.options.itemDataHint || '';
me.itemDataHintDirection = me.options.itemDataHintDirection || '';
me.itemDataHintOffset = me.options.itemDataHintOffset || '';
me.multiSelect = me.options.multiSelect;
me.handleSelect = me.options.handleSelect;
me.parentMenu = me.options.parentMenu;
@ -400,7 +414,10 @@ define([
onAddItem: function(record, store, opts) {
var view = new Common.UI.DataViewItem({
template: this.itemTemplate,
model: record
model: record,
dataHint: this.itemDataHint,
dataHintDirection: this.itemDataHintDirection,
dataHintOffset: this.itemDataHintOffset
});
if (view) {
@ -790,7 +807,7 @@ define([
'<div class="dataview inner" style="<%= style %>">',
'<% _.each(items, function(item) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<% }) %>',
'</div>'
].join('')),
@ -952,7 +969,7 @@ define([
var template = _.template([
'<% _.each(items, function(item) { %>',
'<% if (!item.id) item.id = Common.UI.getId(); %>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %></div>',
'<div class="item" <% if(!!item.tip) { %> data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %></div>',
'<% }) %>'
].join(''));
this.cmpEl && this.cmpEl.find('.inner').html(template({

View file

@ -221,7 +221,10 @@ define([
'<div class="settings-icon <%= iconCls %>" style="display: inline-block;" >',
'</div><%= name %>',
'</div>'
].join(''))
].join('')),
itemDataHint: '2',
itemDataHintDirection: 'left',
itemDataHintOffset: [-2, 20]
});
this.viewSettingsPicker.on('item:select', _.bind(function(dataview, itemview, record) {
var panel = record.get('panel');
@ -360,7 +363,7 @@ define([
'<table class="main" style="margin: 10px 0;"><tbody>',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'<td class="right"><button id="advsettings-print-button-save" class="btn normal dlg-btn primary" data-hint="3" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>',
@ -384,7 +387,10 @@ define([
menuStyle : 'min-width: 242px;max-height: 280px;',
editable : false,
cls : 'input-group-nr',
data : []
data : [],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPaperSize = new Common.UI.ComboBox({
@ -407,7 +413,10 @@ define([
{value:'196.8|273', displayValue:'ROC 16K (19,68cm x 27,3cm)', caption: 'ROC 16K'},
{value:'119.9|234.9', displayValue:'Envelope Choukei 3 (11,99cm x 23,49cm)', caption: 'Envelope Choukei 3'},
{value:'330.2|482.5', displayValue:'Super B/A3 (33,02cm x 48,25cm)', caption: 'Super B/A3'}
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbPaperOrientation = new Common.UI.ComboBox({
@ -419,7 +428,10 @@ define([
data : [
{ value: Asc.c_oAscPageOrientation.PagePortrait, displayValue: this.strPortrait },
{ value: Asc.c_oAscPageOrientation.PageLandscape, displayValue: this.strLandscape }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
var itemsTemplate =
@ -443,17 +455,26 @@ define([
{ value: 3, displayValue: this.textFitRows },
{ value: 'customoptions', displayValue: this.textCustomOptions }
],
itemsTemplate: itemsTemplate
itemsTemplate: itemsTemplate,
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.chPrintGrid = new Common.UI.CheckBox({
el: $markup.findById('#advsettings-print-chb-grid'),
labelText: this.textPrintGrid
labelText: this.textPrintGrid,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chPrintRows = new Common.UI.CheckBox({
el: $markup.findById('#advsettings-print-chb-rows'),
labelText: this.textPrintHeadings
labelText: this.textPrintHeadings,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.spnMarginTop = new Common.UI.MetricSpinner({
@ -463,7 +484,10 @@ define([
defaultUnit : "cm",
value: '0 cm',
maxValue: 48.25,
minValue: 0
minValue: 0,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.spinners.push(this.spnMarginTop);
@ -474,7 +498,10 @@ define([
defaultUnit : "cm",
value: '0 cm',
maxValue: 48.25,
minValue: 0
minValue: 0,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.spinners.push(this.spnMarginBottom);
@ -485,7 +512,10 @@ define([
defaultUnit : "cm",
value: '0.19 cm',
maxValue: 48.25,
minValue: 0
minValue: 0,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.spinners.push(this.spnMarginLeft);
@ -496,7 +526,10 @@ define([
defaultUnit : "cm",
value: '0.19 cm',
maxValue: 48.25,
minValue: 0
minValue: 0,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.spinners.push(this.spnMarginRight);
@ -504,7 +537,10 @@ define([
el : $markup.findById('#advsettings-txt-top'),
style : 'width: 147px',
allowBlank : true,
validateOnChange: true
validateOnChange: true,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.btnPresetsTop = new Common.UI.Button({
@ -512,14 +548,20 @@ define([
cls: 'btn-text-menu-default',
caption: this.textRepeat,
style: 'width: 85px;',
menu: true
menu: true,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.txtRangeLeft = new Common.UI.InputField({
el : $markup.findById('#advsettings-txt-left'),
style : 'width: 147px',
allowBlank : true,
validateOnChange: true
validateOnChange: true,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.btnPresetsLeft = new Common.UI.Button({
@ -527,7 +569,10 @@ define([
cls: 'btn-text-menu-default',
caption: this.textRepeat,
style: 'width: 85px;',
menu: true
menu: true,
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.btnOk = new Common.UI.Button({
@ -743,7 +788,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="3" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>',
'</div>',
@ -771,19 +816,28 @@ define([
/** coauthoring begin **/
this.chLiveComment = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-live-comment'),
labelText: this.strLiveComment
labelText: this.strLiveComment,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', function(field, newValue, oldValue, eOpts){
me.chResolvedComment.setDisabled(field.getValue()!=='checked');
});
this.chResolvedComment = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-resolved-comment'),
labelText: this.strResolvedComment
labelText: this.strResolvedComment,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chR1C1Style = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-r1c1-style'),
labelText: this.strR1C1
labelText: this.strR1C1,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbCoAuthMode = new Common.UI.ComboBox({
@ -794,7 +848,10 @@ define([
data : [
{ value: 1, displayValue: this.strFast, descValue: this.strCoAuthModeDescFast},
{ value: 0, displayValue: this.strStrict, descValue: this.strCoAuthModeDescStrict }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
if (record.value == 1 && (me.chAutosave.getValue()!=='checked'))
me.chAutosave.setValue(1);
@ -822,7 +879,10 @@ define([
{ value: 150, displayValue: "150%" },
{ value: 175, displayValue: "175%" },
{ value: 200, displayValue: "200%" }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
var itemsTemplate =
@ -842,13 +902,19 @@ define([
{ value: Asc.c_oAscFontRenderingModeType.noHinting, displayValue: this.txtMac },
{ value: Asc.c_oAscFontRenderingModeType.hinting, displayValue: this.txtNative },
{ value: 'custom', displayValue: this.txtCacheMode }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbFontRender.on('selected', _.bind(this.onFontRenderSelected, this));
this.chAutosave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-autosave'),
labelText: this.strAutosave
labelText: this.strAutosave,
dataHint : '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', function(field, newValue, oldValue, eOpts){
if (field.getValue()!=='checked' && me.cmbCoAuthMode.getValue()) {
me.cmbCoAuthMode.setValue(0);
@ -859,7 +925,10 @@ define([
this.chForcesave = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-forcesave'),
labelText: this.strForcesave
labelText: this.strForcesave,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbUnit = new Common.UI.ComboBox({
@ -871,7 +940,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 : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.cmbFuncLocale = new Common.UI.ComboBox({
@ -887,7 +959,10 @@ define([
{ value: 'it', displayValue: this.txtIt, exampleValue: this.txtExampleIt },
{ value: 'ru', displayValue: this.txtRu, exampleValue: this.txtExampleRu },
{ value: 'pl', displayValue: this.txtPl, exampleValue: this.txtExamplePl }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
me.updateFuncExample(record.exampleValue);
});
@ -910,7 +985,7 @@ define([
data : regdata,
template: _.template([
'<span class="input-group combobox <%= cls %> combo-langs" id="<%= id %>" style="<%= style %>">',
'<input type="text" class="form-control" style="padding-left: 25px !important;">',
'<input type="text" class="form-control" style="padding-left: 25px !important;" data-hint="3" data-hint-direction="bottom" data-hint-offset="big">',
'<span class="icon input-icon lang-flag"></span>',
'<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">',
'<span class="caret" />',
@ -938,7 +1013,10 @@ define([
this.chSeparator = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-separator-settings'),
labelText: this.strUseSeparatorsBasedOnRegionalSettings
labelText: this.strUseSeparatorsBasedOnRegionalSettings,
dataHint : '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
}).on('change', _.bind(function(field, newValue, oldValue, eOpts){
var checked = field.getValue() === 'checked';
if (checked) {
@ -970,7 +1048,10 @@ define([
this.inputDecimalSeparator = new Common.UI.InputField({
el: $markup.findById('#fms-decimal-separator'),
style: 'width: 35px;',
validateOnBlur: false
validateOnBlur: false,
dataHint : '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
var $decimalSeparatorInput = this.inputDecimalSeparator.$el.find('input');
$decimalSeparatorInput.on('keydown', keyDown);
@ -978,7 +1059,10 @@ define([
this.inputThousandsSeparator = new Common.UI.InputField({
el: $markup.findById('#fms-thousands-separator'),
style: 'width: 35px;',
validateOnBlur: false
validateOnBlur: false,
dataHint : '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
var $thousandsSeparatorInput = this.inputThousandsSeparator.$el.find('input');
$thousandsSeparatorInput.on('keydown', keyDown);
@ -993,7 +1077,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 : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
}).on('selected', function(combo, record) {
me.lblMacrosDesc.text(record.descValue);
});
@ -1001,7 +1088,10 @@ define([
this.chPaste = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-paste-settings'),
labelText: this.strPasteButton
labelText: this.strPasteButton,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbTheme = new Common.UI.ComboBox({
@ -1012,7 +1102,10 @@ define([
data : [
{ value: Common.UI.Themes.THEME_LIGHT_ID, displayValue: this.txtThemeLight },
{ value: Common.UI.Themes.THEME_DARK_ID, displayValue: this.txtThemeDark }
]
],
dataHint : '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
$markup.find('.btn.primary').each(function(index, el){
@ -1356,11 +1449,11 @@ define([
'</tr>','<tr class="divider"></tr>',
'<tr>',
'<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="3" data-hint-direction="bottom" data-hint-offset="big"><%= scope.txtAutoCorrect %></button></div></td>',
'</tr>','<tr class="divider"></tr>',
'<tr>',
'<td class="left"></td>',
'<td class="right"><button id="fms-spellcheck-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>',
'<td class="right"><button id="fms-spellcheck-btn-apply" class="btn normal dlg-btn primary" data-hint="3" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
'</tr>',
'</tbody></table>'
].join('')),
@ -1377,12 +1470,18 @@ define([
this.chIgnoreUppercase = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-ignore-uppercase-words'),
labelText: this.strIgnoreWordsInUPPERCASE
labelText: this.strIgnoreWordsInUPPERCASE,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.chIgnoreNumbers = new Common.UI.CheckBox({
el: $markup.findById('#fms-chb-ignore-numbers-words'),
labelText: this.strIgnoreWordsWithNumbers
labelText: this.strIgnoreWordsWithNumbers,
dataHint: '3',
dataHintDirection: 'left',
dataHintOffset: 'small'
});
this.cmbDictionaryLanguage = new Common.UI.ComboBox({
@ -1390,7 +1489,10 @@ define([
cls: 'input-group-nr',
style: 'width: 267px;',
editable: false,
menuStyle: 'min-width: 267px; max-height: 209px;'
menuStyle: 'min-width: 267px; max-height: 209px;',
dataHint: '3',
dataHintDirection: 'bottom',
dataHintOffset: 'big'
});
this.btnAutoCorrect = new Common.UI.Button({
@ -1721,7 +1823,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>'
@ -1758,19 +1860,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
@ -1799,7 +1910,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;