From 9b5f0107e336001ae6a494fd8bf80ebce8c547f2 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 14 Jun 2021 20:28:51 +0300 Subject: [PATCH] [SSE] Hint manager: added ability to add hints to dataview items, added hints in advanced settings --- apps/common/main/lib/component/DataView.js | 23 +- .../main/app/view/FileMenuPanels.js | 202 ++++++++++++++---- 2 files changed, 178 insertions(+), 47 deletions(-) diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index 9edb115e5..490aee025 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -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([ '
', '<% _.each(items, function(item) { %>', '<% if (!item.id) item.id = Common.UI.getId(); %>', - '
data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %>
', + '
data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %>
', '<% }) %>', '
' ].join('')), @@ -952,7 +969,7 @@ define([ var template = _.template([ '<% _.each(items, function(item) { %>', '<% if (!item.id) item.id = Common.UI.getId(); %>', - '
data-toggle="tooltip" <% } %> ><%= itemTemplate(item) %>
', + '
data-toggle="tooltip" <% } %> data-hint="<%= item.dataHint %>" data-hint-direction="<%= item.dataHintDirection %>" data-hint-offset="<%= item.dataHintOffset %>"><%= itemTemplate(item) %>
', '<% }) %>' ].join('')); this.cmpEl && this.cmpEl.find('.inner').html(template({ diff --git a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js index b22baf0a9..7889d6df4 100644 --- a/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js +++ b/apps/spreadsheeteditor/main/app/view/FileMenuPanels.js @@ -221,7 +221,10 @@ define([ '
', '
<%= name %>', '' - ].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([ '', '', '', - '', + '', '', '
', '', @@ -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([ '','', '', '', - '', + '', '', '', '', @@ -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([ '', - '', + '', '', '', + '', '','', '', '', - '', + '', '', '' ].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([ '', '', '', - '', + '', '', '
', '' @@ -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;