From 0f1288e1980cbd1a8a4f98dd330f8b7f7ef2202e Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Wed, 3 Mar 2021 14:05:31 +0300 Subject: [PATCH] [SSE] Fix icons sets presets --- .../main/lib/component/ComboBorderSize.js | 116 +++++++++ .../main/app/controller/Toolbar.js | 20 +- .../main/app/view/FormatRulesEditDlg.js | 225 +++++++++++++++++- .../main/resources/less/rightmenu.less | 6 + 4 files changed, 356 insertions(+), 11 deletions(-) diff --git a/apps/common/main/lib/component/ComboBorderSize.js b/apps/common/main/lib/component/ComboBorderSize.js index 4190834db..bd33d9143 100644 --- a/apps/common/main/lib/component/ComboBorderSize.js +++ b/apps/common/main/lib/component/ComboBorderSize.js @@ -383,4 +383,120 @@ define([ }, Common.UI.ComboBoxColor || {})); + Common.UI.ComboBoxIcons= Common.UI.ComboBox.extend(_.extend({ + template: _.template([ + '
', + '
', + '
', + '
', + '', + '', + '
' + ].join('')), + + itemClicked: function (e) { + var el = $(e.currentTarget).parent(); + + this._selectedItem = this.store.findWhere({ + id: el.attr('id') + }); + if (this._selectedItem) { + $('.selected', $(this.el)).removeClass('selected'); + el.addClass('selected'); + this.updateFormControl(this._selectedItem); + + this.trigger('selected', this, _.extend({}, this._selectedItem.toJSON()), e); + e.preventDefault(); + } + }, + + updateFormControl: function(record) { + var formcontrol = $(this.el).find('.form-control > div'); + + if (record.get('value')!=-1) { + var str = ''; + _.each(record.get('data').iconSet, function(icon) { + str += ''; + }); + formcontrol[0].innerHTML = str; + formcontrol.css({'margin-top': '0'}); + } else { + formcontrol[0].innerHTML = record.get('displayValue'); + formcontrol.css({'margin-top': '1px'}); + } + }, + + setValue: function(value) { + var obj; + this._selectedItem = this.store.findWhere((obj={}, obj[this.valueField]=value, obj)); + + $('.selected', $(this.el)).removeClass('selected'); + + if (this._selectedItem) { + this.updateFormControl(this._selectedItem); + $('#' + this._selectedItem.get('id'), $(this.el)).addClass('selected'); + } else { + var formcontrol = $(this.el).find('.form-control > div'); + formcontrol[0].innerHTML = value; + formcontrol.css({'margin-top': '1px'}); + } + }, + + onResetItems: function() { + if (this.itemsTemplate) { + $(this.el).find('ul').html( $(this.itemsTemplate({ + items: this.store.toJSON(), + scope: this + }))); + } else { + $(this.el).find('ul').html(_.template([ + '<% _.each(items, function(item) { %>', + '<% if (item.value==-1) { %>', + '
  • <%= scope.getDisplayValue(item) %>
    • ', + '<% } else { %>', + '
  • ', + '', + '<% _.each(item.data.iconSet, function(icon) { %>', + '', + '<% }) %>', + '', + '
    • ', + '<% } %>', + '<% }); %>' + ].join(''))({ + items: this.store.toJSON(), + scope: this + })); + } + + if (!_.isUndefined(this.scroller)) { + this.scroller.destroy(); + delete this.scroller; + } + this.scroller = new Common.UI.Scroller(_.extend({ + el: $('.dropdown-menu', this.cmpEl), + minScrollbarLength : 40, + includePadding : true, + wheelSpeed: 10, + alwaysVisibleY: this.scrollAlwaysVisible + }, this.options.scroller)); + } + + }, Common.UI.ComboBoxIcons || {})); }); \ No newline at end of file diff --git a/apps/spreadsheeteditor/main/app/controller/Toolbar.js b/apps/spreadsheeteditor/main/app/controller/Toolbar.js index 655eeb873..72560d892 100644 --- a/apps/spreadsheeteditor/main/app/controller/Toolbar.js +++ b/apps/spreadsheeteditor/main/app/controller/Toolbar.js @@ -1589,9 +1589,12 @@ define([ }, onShowBeforeCondFormat: function() { - if (SSE.getCollection('ConditionalFormatIconsPresets').length>0) return; - var presets = this.api.asc_getCFIconsByType(); - SSE.getController('Main').fillCondFormatIconsPresets(presets); + if (this.toolbar.mnuDataBars.menu.items.length>0) // menu is inited + return; + + var collectionPresets = SSE.getCollection('ConditionalFormatIconsPresets'); + if (collectionPresets.length<1) + SSE.getController('Main').fillCondFormatIconsPresets(this.api.asc_getCFIconsByType()); var collectionIcons = SSE.getCollection('ConditionalFormatIcons'); if (collectionIcons.length<1) @@ -1676,22 +1679,19 @@ define([ arr = []; var indexes = [Asc.EIconSetType.Arrows3, Asc.EIconSetType.Arrows3Gray, Asc.EIconSetType.Triangles3, Asc.EIconSetType.Arrows4Gray, Asc.EIconSetType.Arrows4, Asc.EIconSetType.Arrows5Gray, Asc.EIconSetType.Arrows5]; for (var i=0; i', '', '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '', + '', + '', + '', + '
    ', + '
    ', + '
    ', + '
    ', + '
    ', + '', + '', '', '', '', @@ -1008,6 +1063,148 @@ define([ color : '000000' }); + // Icons + var collectionPresets = SSE.getCollection('ConditionalFormatIconsPresets'); + if (collectionPresets.length<1) + SSE.getController('Main').fillCondFormatIconsPresets(this.api.asc_getCFIconsByType()); + + var collectionIcons = SSE.getCollection('ConditionalFormatIcons'); + if (collectionIcons.length<1) + SSE.getController('Main').fillCondFormatIcons(this.api.asc_getFullCFIcons()); + + arr = []; + var len = collectionPresets.length; + var iconsPresets = this.api.asc_getCFPresets()[Asc.c_oAscCFRuleTypeSettings.icons]; + _.each(iconsPresets, function(preset, index){ + if (index>=len) return; + var values = []; + for (var i = 0; i < preset.length; i++) { + var formatValueObject = new AscCommonExcel.CConditionalFormatValueObject(); + formatValueObject.asc_setType(preset[i][0]); + formatValueObject.asc_setVal(preset[i][1]); + if (preset[i][2]) { + // formatValueObject.asc_setFormula(new AscCommonExcel.CFormulaCF()); + // formatValueObject.asc_getFormula().asc_setText(preset[1][i][2]); + } + values.push(formatValueObject); + } + arr.push({ + value: index, + data : { + iconSet: collectionPresets.at(index).get('icons'), + values: values, + icons: collectionIcons + } + }); + }); + + this.cmbIconsPresets = new Common.UI.ComboBoxIcons({ + el : $('#format-rules-icon-style'), + editable : false, + style : 'width: 120px;', + menuStyle : 'max-height: 220px;min-width: 100%;', + data : arr + }).on('selected', function(combo, record) { + me.fillIconsControls(record.value, record.data.values); + }); + + this.chFill = new Common.UI.CheckBox({ + el: $('#format-rules-edit-chk-icon-show'), + labelText: this.textShowIcon + }); + this.chFill.on('change', function(field, newValue, oldValue, eOpts){ + + }); + + this.btnReverse = new Common.UI.Button({ + el: $('#format-rules-edit-btn-icon-reverse') + }); + // this.btnReverse.on('click', _.bind(this.reverseIcons, this)); + + var icons = []; + collectionIcons.each(function(icon, index){ + icons.push({ + value: icon.get('index'), + imgUrl: icon.get('icon') + }); + }); + + this.iconsControls = []; + for (var i=0; i<5; i++) { + this.iconsControls.push({}); + + var combo = new Common.UI.ComboBox({ + el: $('#format-rules-combo-icon-' + (i+1)), + type : i, + template: _.template([ + '
    ', + '
    ', + '
    ', + '', + '
    ' + ].join('')) + }); + var menu = (new Common.UI.Menu({ + style: 'min-width: 105px;', + additionalAlign: this.menuAddAlign, + items: [ + { template: _.template('
    ') } + ] + })).render($('#format-rules-combo-icon-' + (i+1))); + + var picker = new Common.UI.DataView({ + el: $('#format-rules-combo-menu-icon-' + (i+1)), + parentMenu: menu, + store: new Common.UI.DataViewStore(icons), + itemTemplate: _.template(''), + type : i + }); + picker.on('item:click', _.bind(this.onSelectIcon, this, combo)); + // this.selectIconItem(); + this.iconsControls[i].cmbIcons = combo; + + combo = new Common.UI.ComboBox({ + el : $('#format-rules-edit-combo-type-' + (i+1)), + style : 'width: 80px;', + menuStyle : 'min-width: 100%;max-height: 211px;', + editable : false, + cls : 'input-group-nr', + data : data, + type : i + }).on('selected', function(combo, record) { + }); + combo.setValue(Asc.c_oAscCfvoType.Percent); + this.iconsControls[i].cmbType = combo; + + combo = new Common.UI.ComboBox({ + el : $('#format-rules-edit-combo-op-' + (i+1)), + style : 'width: 55px;', + menuStyle : 'min-width: 100%;', + editable : false, + cls : 'input-group-nr', + data : [{value: 0, displayValue: '>='}, {value: 1, displayValue: '>'}], + type : i + }).on('selected', function(combo, record) { + }); + combo.setValue(0); + this.iconsControls[i].cmbOperator = combo; + + var range = new Common.UI.InputFieldBtn({ + el : $('#format-rules-edit-txt-value-' + (i+1)), + name : 'range', + style : 'width: 100px;', + allowBlank : true, + btnHint : this.textSelectData, + validateOnChange: false, + type : i + }); + range.setValue(''); + this.iconsControls[i].value = range; + // range.on('button:click', _.bind(this.onSelectIconData, this)); + + this.iconsControls[i].label = $('#format-rules-txt-icon-' + (i+1)); + } + this.afterRender(); }, @@ -1149,6 +1346,7 @@ define([ break; case Asc.c_oAscCFType.iconSet: value = props.asc_getColorScaleOrDataBarOrIconSetRule(); + this.fillIconsControls(value.asc_getIconSet(), value.asc_getCFVOs(), value.asc_getIconSets()); break; } @@ -1407,6 +1605,7 @@ define([ } this.$window.find('.databar').toggleClass('hidden', category!==9); + this.$window.find('.iconset').toggleClass('hidden', category!==10); }, onSelectData: function(cmp) { @@ -1658,6 +1857,27 @@ define([ range.setValue(value); }, + fillIconsControls: function(iconSet, values, icons) { + // this.$window.find('.iconset').toggleClass('hidden', category!==10); + var arr = this.iconsControls; + for (var i=0; i .item:not(:hover):not(.selected) { + .box-shadow(none); + } +}