From cd1d4d9ec0a2cd4ccc2a766f615826f28c6a78a6 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 11 Oct 2021 01:44:40 +0300 Subject: [PATCH] [PE] Add recent shape in ComboDataViewShape component, add handler for hover and active states --- .../main/lib/component/ComboDataViewShape.js | 51 +++++++++++++++++-- .../main/resources/less/combo-dataview.less | 6 +-- apps/common/main/resources/less/toolbar.less | 13 +++++ .../main/app/controller/Toolbar.js | 10 ++++ .../main/app/view/ShapeSettings.js | 1 + .../main/app/view/Toolbar.js | 9 ++-- 6 files changed, 76 insertions(+), 14 deletions(-) diff --git a/apps/common/main/lib/component/ComboDataViewShape.js b/apps/common/main/lib/component/ComboDataViewShape.js index 824db66a6..8b6207a37 100644 --- a/apps/common/main/lib/component/ComboDataViewShape.js +++ b/apps/common/main/lib/component/ComboDataViewShape.js @@ -74,6 +74,9 @@ define([ initialize : function(options) { Common.UI.BaseView.prototype.initialize.call(this, options); + var filter = Common.localStorage.getKeysFilter(); + this.appPrefix = (filter && filter.length) ? filter.split(',')[0] : ''; + this.id = this.options.id || Common.UI.getId(); this.cls = this.options.cls; this.style = this.options.style; @@ -122,9 +125,20 @@ define([ fillComboView: function (collection) { var newStyles = [], - store = collection.at(0).get('groupStore'); - for(var i = 0; i < 12; i ++) { - newStyles.push(store.at(i)); + store = collection.at(0).get('groupStore').toJSON(), + recents = Common.localStorage.getItem(this.appPrefix + 'recent-shapes'); + recents = recents ? JSON.parse(recents) : []; + + if (recents.length > 0) { + for(var i = 0; i < recents.length && i < 12; i ++) { + newStyles.push(recents[i]); + } + } + + if (newStyles.length < 12) { + for(var j = newStyles.length; j < 12; j ++) { + newStyles.push(store[j]); + } } this.fieldPicker.store.reset(newStyles); @@ -219,6 +233,35 @@ define([ return this; }, + updateComboView: function (record) { + var store = this.fieldPicker.store, + type = record.get('data').shapeType, + model = null; + for (var i = 0; i < store.length; i++) { + if (store.at(i).get('data').shapeType === type) { + model = store.at(i); + break; + } + } + if (!model) { + store.pop(); + } else { + store.remove([model]); + } + store.unshift([record]); + }, + + setComboViewRecActive: function (isActive) { + if (this.isRecordActive) + $(this.cmpEl.find('.field-picker .item')).removeClass('active'); + $(this.cmpEl.find('.field-picker .item')[0])[isActive ? 'addClass' : 'removeClass']('active'); + this.isRecordActive = isActive; + }, + + isComboViewRecActive: function () { + return this.isRecordActive; + }, + checkSize: function() { if (this.cmpEl && this.cmpEl.is(':visible')) { var me = this, @@ -335,8 +378,6 @@ define([ tip.hide(); } } - - this.fieldPicker.deselectAll(); }, onMenuPickerClick: function(dataView, itemView, record) { diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index b5b25eab2..7afe0696b 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -98,7 +98,7 @@ } } - &:not('.shapes') .item { + &:not(.shapes) .item { padding: 2px; border: @scaled-one-px-value-ie solid @border-regular-control-ie; border: @scaled-one-px-value solid @border-regular-control; @@ -123,7 +123,7 @@ } } - &.disabled:not('.shapes') { + &.disabled:not(.shapes) { .item { &:hover:not(.selected) { .box-shadow(none); @@ -135,7 +135,7 @@ } } - &:not('.shapes') .dropdown-menu { + &:not(.shapes) .dropdown-menu { box-sizing: content-box; padding: 0; border-top-left-radius: 0; diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 5c40cf8b7..4a2f6bb4e 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -581,6 +581,19 @@ margin: 0; -webkit-box-shadow: none; box-shadow: none; + &:hover { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + &.active { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + + svg.icon { + fill: @icon-toolbar-header-ie; + fill: @icon-toolbar-header; + } + } } } .button { diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 347a24fea..afc395eaa 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -218,6 +218,9 @@ define([ if ( this.toolbar.btnsInsertText.pressed() ) this.toolbar.btnsInsertText.toggle(false, true); + if ( this.toolbar.cmbInsertShape.isComboViewRecActive() ) + this.toolbar.cmbInsertShape.setComboViewRecActive(false); + $(document.body).off('mouseup', checkInsertAutoshape); }; @@ -2049,6 +2052,13 @@ define([ } me.toolbar.cmbInsertShape.openButton.menu.on('show:before', onComboShowBefore); me.toolbar.cmbInsertShape.fillComboView(collection); + me.toolbar.cmbInsertShape.on('click', function (btn, record) { + if (record) { + me.toolbar.cmbInsertShape.updateComboView(record); + me.toolbar.cmbInsertShape.setComboViewRecActive(true); + me.onInsertShape(record.get('data').shapeType); + } + }); }, onResetSlides: function () { diff --git a/apps/presentationeditor/main/app/view/ShapeSettings.js b/apps/presentationeditor/main/app/view/ShapeSettings.js index 71194d5cc..43c5e882d 100644 --- a/apps/presentationeditor/main/app/view/ShapeSettings.js +++ b/apps/presentationeditor/main/app/view/ShapeSettings.js @@ -1663,6 +1663,7 @@ define([ }); shapePicker.on('item:click', function(picker, item, record, e) { if (me.api) { + PE.getController('Toolbar').toolbar.cmbInsertShape.updateComboView(record); me.api.ChangeShapeType(record.get('data').shapeType); me.fireEvent('editcomplete', me); } diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 850296a6a..dbbb31541 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -1739,8 +1739,10 @@ define([ }); shapePicker.on('item:click', function(picker, item, record, e) { if (e.type !== 'click') Common.UI.Menu.Manager.hideAll(); - if (record) + if (record) { me.fireEvent('insert:shape', [record.get('data').shapeType]); + me.cmbInsertShape.updateComboView(record); + } }); }, @@ -1750,11 +1752,6 @@ define([ recents = Common.localStorage.getItem('pe-recent-shapes'); recents = recents ? JSON.parse(recents) : null; me.cmbInsertShape.setMenuPicker(collection, recents, me.textRecentlyUsed); - me.cmbInsertShape.on('click', function (btn, record) { - if (record) { - me.fireEvent('insert:shape', [record.get('data').shapeType]); - } - }); }, updateAddSlideMenu: function(collection) {