From 23df51e17ece7470ace2c016d00d558a0c546556 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Fri, 8 Oct 2021 18:21:56 +0300 Subject: [PATCH 1/4] [PE] Add ComboDataViewShape component (bug 43485) --- .../main/lib/component/ComboDataViewShape.js | 383 ++++++++++++++++++ .../main/resources/less/combo-dataview.less | 6 +- apps/common/main/resources/less/dataview.less | 2 +- apps/common/main/resources/less/toolbar.less | 24 ++ .../main/app/controller/Toolbar.js | 11 +- .../main/app/template/Toolbar.template | 2 +- .../main/app/view/Toolbar.js | 33 +- 7 files changed, 452 insertions(+), 9 deletions(-) create mode 100644 apps/common/main/lib/component/ComboDataViewShape.js diff --git a/apps/common/main/lib/component/ComboDataViewShape.js b/apps/common/main/lib/component/ComboDataViewShape.js new file mode 100644 index 000000000..824db66a6 --- /dev/null +++ b/apps/common/main/lib/component/ComboDataViewShape.js @@ -0,0 +1,383 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * +*/ +/** + * ComboDataView.js + * + * Created by Julia Svinareva on 6/10/21 + * Copyright (c) 2021 Ascensio System SIA. All rights reserved. + * + */ + +if (Common === undefined) + var Common = {}; + +define([ + 'common/main/lib/component/BaseView', + 'common/main/lib/component/DataView' +], function () { + 'use strict'; + + Common.UI.ComboDataViewShape = Common.UI.BaseView.extend({ + options : { + id : null, + cls : '', + style : '', + hint : false, + itemWidth : 80, + itemHeight : 40, + menuMaxHeight : 300, + enableKeyEvents : false, + additionalMenuItems : null, + minWidth: -1, + dataHint: '', + dataHintDirection: '', + dataHintOffset: '' + }, + + template: _.template([ + '
', + '
', + '
', + '
' + ].join('')), + + initialize : function(options) { + Common.UI.BaseView.prototype.initialize.call(this, options); + + this.id = this.options.id || Common.UI.getId(); + this.cls = this.options.cls; + this.style = this.options.style; + this.hint = this.options.hint; + this.store = this.options.store || new Common.UI.DataViewStore(); + this.itemWidth = this.options.itemWidth; + this.itemHeight = this.options.itemHeight; + this.menuMaxHeight = this.options.menuMaxHeight; + this.menuWidth = this.options.menuWidth; + this.rootWidth = 0; + this.rootHeight = 0; + this.rendered = false; + this.needFillComboView = false; + this.minWidth = this.options.minWidth; + this.delayRenderTips = this.options.delayRenderTips || false; + + this.fieldPicker = new Common.UI.DataView({ + cls: 'field-picker', + allowScrollbar: false, + itemTemplate: _.template('
\">
'), + delayRenderTips: this.delayRenderTips + }); + + this.openButton = new Common.UI.Button({ + cls: 'open-menu', + menu: new Common.UI.Menu({ + cls: 'menu-insert-shape', + menuAlign: 'tl-tl', + offset: [0, 3], + items: [ + {template: _.template('
')} + ] + }), + dataHint: this.options.dataHint, + dataHintDirection: this.options.dataHintDirection, + dataHintOffset: this.options.dataHintOffset + }); + + // Handle resize + setInterval(_.bind(this.checkSize, this), 500); + + if (this.options.el) { + this.render(); + } + }, + + fillComboView: function (collection) { + var newStyles = [], + store = collection.at(0).get('groupStore'); + for(var i = 0; i < 12; i ++) { + newStyles.push(store.at(i)); + } + + this.fieldPicker.store.reset(newStyles); + + this.fieldPicker.on('item:select', _.bind(this.onFieldPickerSelect, this)); + this.fieldPicker.on('item:click', _.bind(this.onFieldPickerClick, this)); + this.fieldPicker.on('item:contextmenu', _.bind(this.onPickerItemContextMenu, this)); + this.fieldPicker.el.addEventListener('contextmenu', _.bind(this.onPickerComboContextMenu, this), false); + }, + + setMenuPicker: function (collection, recent, text) { + this.menuPicker = new Common.UI.DataViewShape({ + el: this.cmpEl.find('.menu-picker-container'), + cls: 'menu-picker', + parentMenu: this.openButton.menu, + restoreHeight: this.menuMaxHeight, + style: 'max-height: '+this.menuMaxHeight+'px;', + itemTemplate : _.template('
\">
'), + groups: collection, + textRecentlyUsed: text, + recentShapes: recent + }); + + this.menuPicker.on('item:select', _.bind(this.onMenuPickerSelect, this)); + this.menuPicker.on('item:click', _.bind(this.onMenuPickerClick, this)); + this.menuPicker.on('item:contextmenu', _.bind(this.onPickerItemContextMenu, this)); + this.menuPicker.el.addEventListener('contextmenu', _.bind(this.onPickerComboContextMenu, this), false); + + this.onResize(); + }, + + render: function(parentEl) { + if (!this.rendered) { + var me = this; + + me.trigger('render:before', me); + + me.cmpEl = me.$el || $(me.el); + + var templateEl = me.template({ + id : me.id, + cls : me.cls, + style : me.style + }); + + if (parentEl) { + me.setElement(parentEl, false); + + me.cmpEl = $(templateEl); + + parentEl.html(me.cmpEl); + } else { + me.cmpEl.html(templateEl); + } + + me.rootWidth = me.cmpEl.width(); + me.rootHeight = me.cmpEl.height(); + + me.fieldPicker.render($('.view', me.cmpEl)); + me.openButton.render($('.button', me.cmpEl)); + //me.menuPicker.render($('.menu-picker-container', me.cmpEl)); + + if (me.openButton.menu.cmpEl) { + if (me.openButton.menu.cmpEl) { + me.openButton.menu.menuAlignEl = me.cmpEl; + me.openButton.menu.cmpEl.css('min-width', me.itemWidth); + me.openButton.menu.on('show:before', _.bind(me.onBeforeShowMenu, me)); + me.openButton.menu.on('show:after', _.bind(me.onAfterShowMenu, me)); + me.openButton.cmpEl.on('hide.bs.dropdown', _.bind(me.onBeforeHideMenu, me)); + me.openButton.cmpEl.on('hidden.bs.dropdown', _.bind(me.onAfterHideMenu, me)); + } + } + + if (me.options.hint) { + me.cmpEl.attr('data-toggle', 'tooltip'); + me.cmpEl.tooltip({ + title : me.options.hint, + placement : me.options.hintAnchor || 'cursor' + }); + } + + //me.onResize(); + + me.rendered = true; + + me.trigger('render:after', me); + } + if (this.disabled) { + this.setDisabled(!!this.disabled); + } + + return this; + }, + + checkSize: function() { + if (this.cmpEl && this.cmpEl.is(':visible')) { + var me = this, + width = this.cmpEl.width(), + height = this.cmpEl.height(); + + if (width < this.minWidth) return; + + if (this.rootWidth != width || this.rootHeight != height) { + this.rootWidth = width; + this.rootHeight = height; + setTimeout(function() { + me.openButton.menu.cmpEl.outerWidth(); + me.rootWidth = me.cmpEl.width(); + }, 10); + this.onResize(); + } + } + }, + + onResize: function() { + if (this.openButton) { + var button = $('button', this.openButton.cmpEl); + var cntButton = $('.button', this.cmpEl); + button && cntButton.width() > 0 && button.css({ + width : cntButton.width(), + height: cntButton.height() + }); + + this.openButton.menu.hide(); + + /*var picker = this.menuPicker; + if (picker) { + var record = picker.getSelectedRec(); + this.fillComboView(record || picker.store.at(0), !!record, true); + + picker.onResize(); + }*/ + } + + if (!this.isSuspendEvents) + this.trigger('resize', this); + }, + + onBeforeShowMenu: function(e) { + var menu = this.openButton.menu; + if (menu.cmpEl) { + menu.menuAlignEl = this.cmpEl; + var offset = this.cmpEl.width() - this.openButton.$el.width() - this.menuWidth + 1; + menu.setOffset(Math.min(offset, 0)); + } + + if (this.options.hint) { + var tip = this.cmpEl.data('bs.tooltip'); + if (tip) { + if (tip.dontShow===undefined) + tip.dontShow = true; + tip.hide(); + } + } + }, + + onBeforeHideMenu: function(e) { + this.trigger('hide:before', this, e); + + if (Common.UI.Scroller.isMouseCapture()) + e.preventDefault(); + + if (this.isStylesNotClosable) + return false; + }, + + onAfterShowMenu: function(e) { + var me = this; + if (me.menuPicker.scroller) { + me.menuPicker.scroller.update({ + includePadding: true, + suppressScrollX: true, + alwaysVisibleY: true + }); + } + }, + + onAfterHideMenu: function(e, isFromInputControl) { + this.menuPicker.selectedBeforeHideRec = this.menuPicker.getSelectedRec(); // for DataView - onKeyDown - Return key + this.menuPicker.deselectAll(); + this.trigger('hide:after', this, e, isFromInputControl); + }, + + onFieldPickerSelect: function(picker, item, record) { + // + }, + + onMenuPickerSelect: function(picker, item, record, fromKeyDown) { + this.needFillComboView = this.disabled; + if (this.disabled || fromKeyDown===true) return; + + /*this.fillComboView(record, false); + if (record && !this.isSuspendEvents) + this.trigger('select', this, record);*/ + }, + + onFieldPickerClick: function(dataView, itemView, record) { + if (this.disabled) return; + + if (!this.isSuspendEvents) + this.trigger('click', this, record); + + if (this.options.hint) { + var tip = this.cmpEl.data('bs.tooltip'); + if (tip) { + if (tip.dontShow===undefined) + tip.dontShow = true; + tip.hide(); + } + } + + this.fieldPicker.deselectAll(); + }, + + onMenuPickerClick: function(dataView, itemView, record) { + if (this.disabled) return; + + if (!this.isSuspendEvents) + this.trigger('click', this, record); + }, + + onPickerItemContextMenu: function(dataView, itemView, record, e) { + if (this.disabled) return; + + if (!this.isSuspendEvents) { + this.trigger('contextmenu', this, record, e); + } + e.preventDefault(); + e.stopPropagation(); + return false; + }, + + onPickerComboContextMenu: function(mouseEvent) { + if (this.disabled) return; + + if (!this.isSuspendEvents) { + this.trigger('contextmenu', this, undefined, mouseEvent); + } + }, + + setDisabled: function(disabled) { + this.disabled = disabled; + + if (!this.rendered) + return; + + this.cmpEl.toggleClass('disabled', disabled); + $('button', this.openButton.cmpEl).toggleClass('disabled', disabled); + this.fieldPicker.setDisabled(disabled); + }, + + isDisabled: function() { + return this.disabled; + } + }) +}); \ No newline at end of file diff --git a/apps/common/main/resources/less/combo-dataview.less b/apps/common/main/resources/less/combo-dataview.less index e7f4ccf9a..b5b25eab2 100644 --- a/apps/common/main/resources/less/combo-dataview.less +++ b/apps/common/main/resources/less/combo-dataview.less @@ -98,7 +98,7 @@ } } - .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 { + &.disabled:not('.shapes') { .item { &:hover:not(.selected) { .box-shadow(none); @@ -135,7 +135,7 @@ } } - .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/dataview.less b/apps/common/main/resources/less/dataview.less index 7acb0bcdb..19189ea31 100644 --- a/apps/common/main/resources/less/dataview.less +++ b/apps/common/main/resources/less/dataview.less @@ -92,7 +92,7 @@ .menu-insert-shape, .menu-change-shape { width: 362px; - padding: 10px 5px 10px 10px; + padding: 10px 5px 10px 10px !important; .group-description { padding: 3px 0 3px 4px; } diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 838c7b622..5c40cf8b7 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -567,6 +567,30 @@ } } +#slot-combo-insertshape { + width: 150px; + height: 46px; + .view { + padding-right: 14px; + } + .dataview.field-picker { + height: 100%; + margin: 0; + padding: 2px; + .item { + margin: 0; + -webkit-box-shadow: none; + box-shadow: none; + } + } + .button { + width: 14px; + .caret { + width: 4px; + height: 4px; + } + } +} .item-shape { .icon { diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index 11219b260..347a24fea 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -2034,14 +2034,21 @@ define([ }, onResetAutoshapes: function () { - var me = this; + var me = this, + collection = PE.getCollection('ShapeGroups'); var onShowBefore = function(menu) { - me.toolbar.updateAutoshapeMenu(menu, PE.getCollection('ShapeGroups')); + me.toolbar.updateAutoshapeMenu(menu, collection); menu.off('show:before', onShowBefore); }; me.toolbar.btnsInsertShape.forEach(function (btn, index) { btn.menu.on('show:before', onShowBefore); }); + var onComboShowBefore = function (menu) { + me.toolbar.updateComboAutoshapeMenu(collection); + menu.off('show:before', onComboShowBefore); + } + me.toolbar.cmbInsertShape.openButton.menu.on('show:before', onComboShowBefore); + me.toolbar.cmbInsertShape.fillComboView(collection); }, onResetSlides: function () { diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template index 14e7722d5..924f83a62 100644 --- a/apps/presentationeditor/main/app/template/Toolbar.template +++ b/apps/presentationeditor/main/app/template/Toolbar.template @@ -117,9 +117,9 @@ - +
diff --git a/apps/presentationeditor/main/app/view/Toolbar.js b/apps/presentationeditor/main/app/view/Toolbar.js index 3252c4cc0..850296a6a 100644 --- a/apps/presentationeditor/main/app/view/Toolbar.js +++ b/apps/presentationeditor/main/app/view/Toolbar.js @@ -56,7 +56,8 @@ define([ 'common/main/lib/component/ComboBoxFonts', 'common/main/lib/component/ComboDataView' ,'common/main/lib/component/SynchronizeTip' - ,'common/main/lib/component/Mixtbar' + ,'common/main/lib/component/Mixtbar', + 'common/main/lib/component/ComboDataViewShape' ], function (Backbone, template, template_view) { 'use strict'; @@ -1051,6 +1052,19 @@ define([ '
' ].join('')); + this.cmbInsertShape = new Common.UI.ComboDataViewShape({ + cls: 'combo-styles shapes', + itemWidth: 20, + itemHeight: 20, + menuMaxHeight: 640, + menuWidth: 362, + enableKeyEvents: true, + lock: [PE.enumLock.slideDeleted, PE.enumLock.lostConnect, PE.enumLock.noSlides, PE.enumLock.disableOnStart], + dataHint: '1', + dataHintDirection: 'bottom', + dataHintOffset: '-16, 0' + }); + this.lockControls = [this.btnChangeSlide, this.btnSave, this.btnCopy, this.btnPaste, this.btnUndo, this.btnRedo, this.cmbFontName, this.cmbFontSize, this.btnIncFontSize, this.btnDecFontSize, this.btnBold, this.btnItalic, this.btnUnderline, this.btnStrikeout, this.btnSuperscript, this.btnChangeCase, this.btnHighlightColor, @@ -1193,6 +1207,7 @@ define([ _injectComponent('#slot-btn-editheader', this.btnEditHeader); _injectComponent('#slot-btn-datetime', this.btnInsDateTime); _injectComponent('#slot-btn-slidenum', this.btnInsSlideNum); + _injectComponent('#slot-combo-insertshape', this.cmbInsertShape); this.btnInsAudio && _injectComponent('#slot-btn-insaudio', this.btnInsAudio); this.btnInsVideo && _injectComponent('#slot-btn-insvideo', this.btnInsVideo); @@ -1711,6 +1726,7 @@ define([ menuShape.addItem(menuitem); var recents = Common.localStorage.getItem('pe-recent-shapes'); + recents = recents ? JSON.parse(recents) : null; var shapePicker = new Common.UI.DataViewShape({ el: $('#id-toolbar-menu-insertshape-'+index), @@ -1719,13 +1735,26 @@ define([ parentMenu: menuShape, restoreHeight: 640, textRecentlyUsed: me.textRecentlyUsed, - recentShapes: recents ? JSON.parse(recents) : null + recentShapes: recents }); shapePicker.on('item:click', function(picker, item, record, e) { if (e.type !== 'click') Common.UI.Menu.Manager.hideAll(); if (record) me.fireEvent('insert:shape', [record.get('data').shapeType]); }); + + }, + + updateComboAutoshapeMenu: function (collection) { + var me = this, + 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) { From cd1d4d9ec0a2cd4ccc2a766f615826f28c6a78a6 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Mon, 11 Oct 2021 01:44:40 +0300 Subject: [PATCH 2/4] [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) { From ae611ada765a0b7b9d45064a5c2887a78c7eda49 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Tue, 12 Oct 2021 13:58:11 +0300 Subject: [PATCH 3/4] [PE] Fix ComboDataViewShape component --- .../main/lib/component/ComboDataViewShape.js | 76 +++++++++++++------ apps/common/main/lib/component/DataView.js | 49 ++++++++++-- .../main/app/controller/Toolbar.js | 15 +++- 3 files changed, 107 insertions(+), 33 deletions(-) diff --git a/apps/common/main/lib/component/ComboDataViewShape.js b/apps/common/main/lib/component/ComboDataViewShape.js index 8b6207a37..3b0d4f758 100644 --- a/apps/common/main/lib/component/ComboDataViewShape.js +++ b/apps/common/main/lib/component/ComboDataViewShape.js @@ -96,7 +96,7 @@ define([ this.fieldPicker = new Common.UI.DataView({ cls: 'field-picker', allowScrollbar: false, - itemTemplate: _.template('
\">
'), + itemTemplate: _.template('
\">
'), delayRenderTips: this.delayRenderTips }); @@ -124,24 +124,45 @@ define([ }, fillComboView: function (collection) { - var newStyles = [], - store = collection.at(0).get('groupStore').toJSON(), + var groups = collection.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 (recents.length < 12) { + var count = 12 - recents.length; + + var addItem = function (rec) { + var item = rec.toJSON(), + model = { + data: item.data, + tip: item.tip, + allowSelected: item.allowSelected, + selected: false + }; + recents.push(model); + }; + + for (var j = 0; j < groups.length && count > 0; j++) { + var groupStore = groups[j].groupStore; + if (j === 0) { + addItem(groupStore.at(1)); + count--; + if (count > 0) { + addItem(groupStore.at(2)); + count--; + } + } else if (j !== 3 && j !== 6 && j !== 7) { + addItem(groupStore.at(0)); + count--; + if (count > 0) { + addItem(groupStore.at(1)); + count--; + } + } } } - if (newStyles.length < 12) { - for(var j = newStyles.length; j < 12; j ++) { - newStyles.push(store[j]); - } - } - - this.fieldPicker.store.reset(newStyles); + this.fieldPicker.store.reset(recents); this.fieldPicker.on('item:select', _.bind(this.onFieldPickerSelect, this)); this.fieldPicker.on('item:click', _.bind(this.onFieldPickerClick, this)); @@ -245,17 +266,20 @@ define([ } if (!model) { store.pop(); - } else { - store.remove([model]); + store.unshift([record]); } - store.unshift([record]); }, - setComboViewRecActive: function (isActive) { + activateRecord: function (record) { + var type = record.get('data').shapeType; 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; + this.deactivateRecords(); + $(this.cmpEl.find("[data-shape='" + type + "']")).parent().addClass('active'); + this.isRecordActive = true; + }, + + deactivateRecords: function () { + $(this.cmpEl.find('.field-picker .item')).removeClass('active'); }, isComboViewRecActive: function () { @@ -364,11 +388,13 @@ define([ this.trigger('select', this, record);*/ }, - onFieldPickerClick: function(dataView, itemView, record) { + onFieldPickerClick: function(dataView, item, record) { if (this.disabled) return; + var isActive = item.$el.hasClass('active'); + if (!this.isSuspendEvents) - this.trigger('click', this, record); + this.trigger('click', this, record, isActive); if (this.options.hint) { var tip = this.cmpEl.data('bs.tooltip'); @@ -378,6 +404,10 @@ define([ tip.hide(); } } + + if (!isActive) { + this.activateRecord(record); + } }, onMenuPickerClick: function(dataView, itemView, record) { @@ -385,6 +415,8 @@ define([ if (!this.isSuspendEvents) this.trigger('click', this, record); + + this.activateRecord(record); }, onPickerItemContextMenu: function(dataView, itemView, record, e) { diff --git a/apps/common/main/lib/component/DataView.js b/apps/common/main/lib/component/DataView.js index d8be28189..a7d8fa820 100644 --- a/apps/common/main/lib/component/DataView.js +++ b/apps/common/main/lib/component/DataView.js @@ -1317,7 +1317,7 @@ define([ template: _.template([ '
', '<% _.each(options.groupsWithRecent, function(group, index) { %>', - '
style="display: none;" <% } %>>', + '
', '<% if (!_.isEmpty(group.groupName)) { %>', '
', '<%= group.groupName %>', @@ -1356,7 +1356,45 @@ define([ me.recentShapes = recentArr; - recentStore.add(recentArr); + // Add default recent + + if (me.recentShapes.length < 12) { + var count = 12 - me.recentShapes.length, + defaultArr = []; + + var addItem = function (rec) { + var item = rec.toJSON(), + model = { + data: item.data, + tip: item.tip, + allowSelected: item.allowSelected, + selected: false + }; + defaultArr.push(model); + }; + + for (var i = 0; i < me.groups.length && count > 0; i++) { + var groupStore = me.groups[i].groupStore; + if (i === 0) { + addItem(groupStore.at(1)); + count--; + if (count > 0) { + addItem(groupStore.at(2)); + count--; + } + } else if (i !== 3 && i !== 6 && i !== 7) { + addItem(groupStore.at(0)); + count--; + if (count > 0) { + addItem(groupStore.at(1)); + count--; + } + } + } + me.recentShapes = me.recentShapes.concat(defaultArr); + } + + recentStore.add(me.recentShapes); me.groups.unshift({ groupName : options.textRecentlyUsed, groupStore : recentStore, @@ -1377,9 +1415,6 @@ define([ Common.UI.DataViewSimple.prototype.initialize.call(this, options); me.parentMenu.on('show:before', function() { me.updateRecents(); }); - if (me.recentShapes.length > 0 && !me.cmpEl.find('.recent-group').is(':visible')) { - me.cmpEl.find('.recent-group').show(); - } }, onAfterShowMenu: function(e) { var me = this; @@ -1490,8 +1525,8 @@ define([ selected: false }; me.recentShapes.unshift(model); - if (me.recentShapes.length > 14) { - me.recentShapes.splice(14, 1); + if (me.recentShapes.length > 12) { + me.recentShapes.splice(12, 1); } Common.localStorage.setItem(this.appPrefix + 'recent-shapes', JSON.stringify(me.recentShapes)); me.recentShapes = undefined; diff --git a/apps/presentationeditor/main/app/controller/Toolbar.js b/apps/presentationeditor/main/app/controller/Toolbar.js index afc395eaa..67c12d6ea 100644 --- a/apps/presentationeditor/main/app/controller/Toolbar.js +++ b/apps/presentationeditor/main/app/controller/Toolbar.js @@ -188,16 +188,20 @@ define([ btn_id = cmp.closest('button').attr('id'); if (btn_id===undefined) btn_id = cmp.closest('.btn-group').attr('id'); + if (btn_id===undefined) + btn_id = cmp.closest('.combo-dataview').attr('id'); if (cmp.attr('id') != 'editor_sdk' && cmp_sdk.length<=0) { if ( me.toolbar.btnsInsertText.pressed() && !me.toolbar.btnsInsertText.contains(btn_id) || - me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) ) + me.toolbar.btnsInsertShape.pressed() && !me.toolbar.btnsInsertShape.contains(btn_id) || + me.toolbar.cmbInsertShape.isComboViewRecActive() && me.toolbar.cmbInsertShape.id !== btn_id) { me._isAddingShape = false; me._addAutoshape(false); me.toolbar.btnsInsertShape.toggle(false, true); me.toolbar.btnsInsertText.toggle(false, true); + me.toolbar.cmbInsertShape.deactivateRecords(); Common.NotificationCenter.trigger('edit:complete', me.toolbar); } else if ( me.toolbar.btnsInsertShape.pressed() && me.toolbar.btnsInsertShape.contains(btn_id) ) { @@ -219,7 +223,7 @@ define([ this.toolbar.btnsInsertText.toggle(false, true); if ( this.toolbar.cmbInsertShape.isComboViewRecActive() ) - this.toolbar.cmbInsertShape.setComboViewRecActive(false); + this.toolbar.cmbInsertShape.deactivateRecords(); $(document.body).off('mouseup', checkInsertAutoshape); }; @@ -2052,10 +2056,13 @@ define([ } me.toolbar.cmbInsertShape.openButton.menu.on('show:before', onComboShowBefore); me.toolbar.cmbInsertShape.fillComboView(collection); - me.toolbar.cmbInsertShape.on('click', function (btn, record) { + me.toolbar.cmbInsertShape.on('click', function (btn, record, cancel) { + if (cancel) { + me._addAutoshape(false); + return; + } if (record) { me.toolbar.cmbInsertShape.updateComboView(record); - me.toolbar.cmbInsertShape.setComboViewRecActive(true); me.onInsertShape(record.get('data').shapeType); } }); From 71baf5cc3ac32126fa47c2cc8eeb2512034f0d61 Mon Sep 17 00:00:00 2001 From: JuliaSvinareva Date: Wed, 13 Oct 2021 11:02:30 +0300 Subject: [PATCH 4/4] [PE] Fix color of active record in insert shape button --- apps/common/main/resources/less/toolbar.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less index 4a2f6bb4e..06d6dd6e8 100644 --- a/apps/common/main/resources/less/toolbar.less +++ b/apps/common/main/resources/less/toolbar.less @@ -590,8 +590,8 @@ background-color: @highlight-button-pressed; svg.icon { - fill: @icon-toolbar-header-ie; - fill: @icon-toolbar-header; + fill: @icon-normal-pressed-ie; + fill: @icon-normal-pressed; } } }