Merge branch 'develop' into feature/resize-toolbar

apps/common/main/lib/util/define.js

@@ -792,10 +792,10 @@ define(function(){ 'use strict';
 
             getEffectGroupData: function () {
                 return [
-                    {id: 'menu-effect-group-entrance',  value: AscFormat.PRESET_CLASS_ENTR,     caption: this.textEntrance},
+                    {id: 'menu-effect-group-entrance',  value: AscFormat.PRESET_CLASS_ENTR,     caption: this.textEntrance,     iconClsCustom: 'animation-entrance-custom'},
-                    {id: 'menu-effect-group-emphasis',  value: AscFormat.PRESET_CLASS_EMPH,     caption: this.textEmphasis},
+                    {id: 'menu-effect-group-emphasis',  value: AscFormat.PRESET_CLASS_EMPH,     caption: this.textEmphasis,     iconClsCustom: 'animation-emphasis-custom'},
-                    {id: 'menu-effect-group-exit',      value: AscFormat.PRESET_CLASS_EXIT,     caption: this.textExit},
+                    {id: 'menu-effect-group-exit',      value: AscFormat.PRESET_CLASS_EXIT,     caption: this.textExit,         iconClsCustom: 'animation-exit-custom'},
-                    {id: 'menu-effect-group-path',      value: AscFormat.PRESET_CLASS_PATH,     caption: this.textPath}
+                    {id: 'menu-effect-group-path',      value: AscFormat.PRESET_CLASS_PATH,     caption: this.textPath,         iconClsCustom: 'animation-motion_paths-custom'}
                 ];
             },
 
@@ -830,7 +830,7 @@ define(function(){ 'use strict';
                     {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_COMPLEMENTARY_COLOR,      iconCls: 'animation-emphasis-complementary_color',  displayValue: this.textComplementaryColor},
                     {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_LINE_COLOR,               iconCls: 'animation-emphasis-line_color',           displayValue: this.textLineColor},
                     {group: 'menu-effect-group-emphasis',   value: AscFormat.EMPHASIS_FILL_COLOR,               iconCls: 'animation-emphasis-fill_color',           displayValue: this.textFillColor},
-                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_DISAPPEAR,                    iconCls: 'animation-exit-Disappear',    displayValue: this.textDisappear},
+                    {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_DISAPPEAR,                    iconCls: 'animation-exit-disappear',                displayValue: this.textDisappear},
                     {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FADE,                         iconCls: 'animation-exit-fade',                     displayValue: this.textFade},
                     {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FLY_OUT_TO,                   iconCls: 'animation-exit-fly_out',                  displayValue: this.textFlyOut},
                     {group: 'menu-effect-group-exit',       value: AscFormat.EXIT_FLOAT,                        iconCls: 'animation-exit-float_out',                displayValue: this.textFloatOut},
@@ -870,8 +870,8 @@ define(function(){ 'use strict';
                     {group: 'menu-effect-group-path',     value: AscFormat.MOTION_TRAPEZOID,                  iconCls: 'animation-motion_paths-shapes',             displayValue: this.textTrapezoid},
                     {group: 'menu-effect-group-path',     value: AscFormat.MOTION_HORIZONTAL_FIGURE_8_FOUR,   iconCls: 'animation-motion_paths-loops',              displayValue: this.textHorizontalFigure},
                     {group: 'menu-effect-group-path',     value: AscFormat.MOTION_VERTICAL_FIGURE_8,          iconCls: 'animation-motion_paths-loops',              displayValue: this.textVerticalFigure},
-                    {group: 'menu-effect-group-path',     value: AscFormat.MOTION_LOOP_DE_LOOP,               iconCls: 'animation-motion_paths-loops',    displayValue: this.textLoopDeLoop},
+                    {group: 'menu-effect-group-path',     value: AscFormat.MOTION_LOOP_DE_LOOP,               iconCls: 'animation-motion_paths-loops',              displayValue: this.textLoopDeLoop}//,
-                    {group: 'menu-effect-group-path',     value: AscFormat.MOTION_CUSTOM_PATH,                iconCls: 'animation-motion_paths-custom_path',    displayValue: this.textCustomPath}
+                    //{group: 'menu-effect-group-path',     value: AscFormat.MOTION_CUSTOM_PATH,                iconCls: 'animation-motion_paths-custom_path',        displayValue: this.textCustomPath}
                 ];
             },
 

apps/presentationeditor/main/app/controller/Animation.js

@@ -105,6 +105,7 @@ define([
             this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPages, this));
             this.api.asc_registerCallback('asc_onAnimPreviewStarted',   _.bind(this.onAnimPreviewStarted, this));
             this.api.asc_registerCallback('asc_onAnimPreviewFinished',  _.bind(this.onAnimPreviewFinished, this));
+            this.api.asc_onShowAnimTab(!!this._state.onactivetab)
             return this;
         },
 
@@ -158,10 +159,11 @@ define([
             (new PE.Views.AnimationDialog({
                 api             : this.api,
                 activeEffect    : this._state.Effect,
+                groupValue       : this._state.EffectGroup,
                 handler         : function(result, value) {
                     if (result == 'ok') {
                         if (me.api) {
-                            me.addNewEffect(value.activeEffect, value.activeGroupValue, replace);
+                            me.addNewEffect(value.activeEffect, value.activeGroupValue, value.activeGroup, replace);
                         }
                     }
                 }
@@ -170,13 +172,13 @@ define([
 
         onAddAnimation: function(picker, record) {
             var type = record.get('value');
-            var group = _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value;
+            var group = _.findWhere(this.EffectGroups, {id: record.get('group')}).value;
-            this.addNewEffect(type, group, false);
+            this.addNewEffect(type, group, record.get('group'), false);
         },
 
-        addNewEffect: function (type, group, replace) {
+        addNewEffect: function (type, group, groupName, replace) {
             if (this._state.Effect == type) return;
-            var parameter = this.view.setMenuParameters(type, undefined, group == this._state.EffectGroups);
+            var parameter = this.view.setMenuParameters(type, groupName, undefined);
             this.api.asc_AddAnimation(group, type, (parameter != undefined)?parameter:0, replace);
             this._state.EffectGroups = group;
             this._state.Effect = type;
@@ -236,14 +238,13 @@ define([
         onEffectSelect: function (combo, record) {
             if (this.api) {
                 var type = record.get('value');
-                var group = (type != AscFormat.ANIM_PRESET_NONE) ? _.findWhere(Common.define.effectData.getEffectGroupData(), {id: record.get('group')}).value : undefined;
+                var group = (type != AscFormat.ANIM_PRESET_NONE) ? _.findWhere(this.EffectGroups, {id: record.get('group')}).value : undefined;
-                this.addNewEffect(type, group, this._state.Effect != AscFormat.ANIM_PRESET_NONE);
+                this.addNewEffect(type, group, record.get('group'),this._state.Effect != AscFormat.ANIM_PRESET_NONE);
             }
         },
 
         onStartSelect: function (combo, record) {
             if (this.api) {
-                // this._state.StartEffect = record.value;
                 this.AnimationProperties.asc_putStartType(record.value);
                 this.api.asc_SetAnimationProperties(this.AnimationProperties);
             }
@@ -325,7 +326,7 @@ define([
                                 item = store.add(new Common.UI.DataViewModel({
                                     group: group.get('id'),
                                     value: this._state.Effect,
-                                    iconCls: 'transition-push',
+                                    iconCls: group.get('iconClsCustom'),
                                     displayValue: rec ? rec.displayValue : '',
                                     isCustom: true
                                 }), {at:index+1});
@@ -341,8 +342,8 @@ define([
                 }
 
                 this._state.EffectOption = this.AnimationProperties.asc_getSubtype();
-                if (this._state.EffectOption !== undefined)
+                if (this._state.EffectOption !== undefined && this._state.EffectOption !== null)
-                    this._state.noAnimationParam = view.setMenuParameters(this._state.Effect, this._state.EffectOption)===undefined;
+                    this._state.noAnimationParam = view.setMenuParameters(this._state.Effect, _.findWhere(this.EffectGroups,{value: this._state.EffectGroup}).id, this._state.EffectOption)===undefined;
 
                 value = this.AnimationProperties.asc_getDuration();
                 if (Math.abs(this._state.Duration - value) > 0.001 ||
@@ -403,6 +404,7 @@ define([
                 this.setSettings();
             }
             else this._state.onactivetab = false;
+            this.api && this.api.asc_onShowAnimTab(!!this._state.onactivetab);
         },
 
         lockToolbar: function (causes, lock, opts) {

apps/presentationeditor/main/app/view/Animation.js

@@ -62,7 +62,7 @@ define([
                     me.fireEvent('animation:selecteffect', [combo, record]);
                 }, me));
                 me.listEffectsMore.on('click', _.bind(function () {
-                    me.fireEvent('animation:additional', [true]); // replace effect
+                    me.fireEvent('animation:additional', [me.listEffects.menuPicker.getSelectedRec().get('value') != AscFormat.ANIM_PRESET_NONE]); // replace effect
                 }, me));
             }
 
@@ -159,6 +159,7 @@ define([
                 this.lockedControls = [];
 
                 this._arrEffectName = [{group:'none', value: AscFormat.ANIM_PRESET_NONE, iconCls: 'animation-none', displayValue: this.textNone}].concat(Common.define.effectData.getEffectData());
+                _.forEach(this._arrEffectName,function (elm){elm.tip = elm.displayValue;});
                 this._arrEffectOptions = [];
                 var itemWidth = 87,
                     itemHeight = 40;
@@ -184,6 +185,7 @@ define([
                     dataHint: '1',
                     dataHintDirection: 'bottom',
                     dataHintOffset: '-16, 0',
+                    delayRenderTips: true,
                     beforeOpenHandler: function (e) {
                         var cmp = this,
                             menu = cmp.openButton.menu;
@@ -215,8 +217,8 @@ define([
                     iconCls: 'toolbar__icon transition-fade',
                     lock: [_set.slideDeleted, _set.noSlides, _set.noAnimationPreview],
                     dataHint: '1',
-                    dataHintDirection: 'left',
+                    dataHintDirection: 'bottom',
-                    dataHintOffset: 'medium'
+                    dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.btnPreview);
 
@@ -320,6 +322,7 @@ define([
                 this.cmbStart = new Common.UI.ComboBox({
                     cls: 'input-group-nr',
                     menuStyle: 'min-width: 100%;',
+                    editable: false,
                     lock: [_set.slideDeleted,  _set.noSlides, _set.noGraphic, _set.noAnimation],
                     data: [
                         {value: AscFormat.NODE_TYPE_CLICKEFFECT, displayValue: this.textStartOnClick},
@@ -327,7 +330,8 @@ define([
                         {value: AscFormat.NODE_TYPE_AFTEREFFECT, displayValue: this.textStartAfterPrevious}
                     ],
                     dataHint: '1',
-                    dataHintDirection: 'top'
+                    dataHintDirection: 'top',
+                    dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.cmbStart);
 
@@ -351,8 +355,8 @@ define([
                     defaultUnit: '',
                     lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation],
                     dataHint: '1',
-                    dataHintDirection: 'bottom',
+                    dataHintDirection: 'top',
-                    dataHintOffset: 'big'
+                    dataHintOffset: 'small'
                 });
                 this.lockedControls.push(this.numRepeat);
 
@@ -478,10 +482,12 @@ define([
                 return this.lockedControls;
             },
 
-            setMenuParameters: function (effectId, option)
+            setMenuParameters: function (effectId, effectGroup, option)
             {
-                var effect = _.findWhere(this.allEffects, {value: effectId});
+                var arrEffectOptions;
-                var arrEffectOptions = Common.define.effectData.getEffectOptionsData(effect.group, effect.value);
+                var effect = _.findWhere(this.allEffects, {group: effectGroup, value: effectId});
+                if(effect)
+                    arrEffectOptions = Common.define.effectData.getEffectOptionsData(effect.group, effect.value);
                 if(!arrEffectOptions) {
                     this.btnParameters.menu.removeAll();
                     this._effectId = effectId

apps/presentationeditor/main/app/view/AnimationDialog.js

@@ -70,12 +70,18 @@ define([
             this._state.activeGroup = this.EffectGroupData[0].id;
             this._state.activeGroupValue = this.EffectGroupData[0].value;
             this.EffectGroupData.forEach(function (item) {item.displayValue = item.caption;});
-            if ((this.options.activeEffect != undefined) && (this.options.activeEffect != AscFormat.ANIM_PRESET_NONE)){
+            if ((this.options.activeEffect != undefined) && (this.options.activeEffect != AscFormat.ANIM_PRESET_NONE) && (this.options.activeEffect !== AscFormat.ANIM_PRESET_MULTIPLE)){
                 this._state.activeEffect = this.options.activeEffect;
-                var itemEffect = _.findWhere(this.allEffects,{value: this._state.activeEffect});
+                this._state.activeGroupValue = this.options.groupValue;
-                this._state.activeGroup = itemEffect.group;
+                var group = _.findWhere(this.EffectGroupData, {value: this._state.activeGroupValue})
-                this._state.activeGroupValue = _.findWhere(this.EffectGroupData, {id: this._state.activeGroup}).value;
+                this._state.activeGroup = group.id;
+                var itemEffect = _.findWhere(this.allEffects, {
+                    group: this._state.activeGroup,
+                    value: this._state.activeEffect
+                });
+                if(itemEffect)
                     this.activeLevel = itemEffect.level;
+
             }
             Common.UI.Window.prototype.initialize.call(this, this.options);
         },
@@ -154,7 +160,9 @@ define([
         fillEffect: function () {
             var arr = _.where(this.allEffects, {group: this._state.activeGroup, level: this.activeLevel });
             this.lstEffectList.store.reset(arr);
-            var  item = (this._state.activeEffect != undefined)?this.lstEffectList.store.findWhere({value: this._state.activeEffect}):this.lstEffectList.store.at(0);
+            var  item = this.lstEffectList.store.findWhere({value: this._state.activeEffect});
+            if(!item)
+                item = this.lstEffectList.store.at(0);
             this.lstEffectList.selectRecord(item);
             this._state.activeEffect = item.get('value');
         },

apps/presentationeditor/main/locale/en.json

@@ -2102,6 +2102,7 @@
   "PE.Views.Toolbar.textAlignMiddle": "Align text to the middle",
   "PE.Views.Toolbar.textAlignRight": "Align text right",
   "PE.Views.Toolbar.textAlignTop": "Align text to the top",
+  "PE.Views.Toolbar.textTabAnimation": "Animation",
   "PE.Views.Toolbar.textArrangeBack": "Send to Background",
   "PE.Views.Toolbar.textArrangeBackward": "Send Backward",
   "PE.Views.Toolbar.textArrangeForward": "Bring Forward",

apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx

@@ -1,6 +1,6 @@
 import React, {Fragment, useState, useEffect} from 'react';
 import {observer, inject} from "mobx-react";
-import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle} from 'framework7-react';
+import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide} from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 import {Device} from '../../../../../common/mobile/utils/device';
 import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@@ -14,6 +14,8 @@ const EditCell = props => {
     const storeWorksheets = props.storeWorksheets;
     const wsProps = storeWorksheets.wsProps;
     const cellStyles = storeCellSettings.cellStyles;
+    const countSlides = Math.floor(cellStyles.length / 9);
+    const arraySlides = Array(countSlides).fill(countSlides);
     const styleName = storeCellSettings.styleName;
 
     const fontInfo = storeCellSettings.fontInfo;
@@ -108,16 +110,22 @@ const EditCell = props => {
                     </List>
                     <BlockTitle>{_t.textCellStyles}</BlockTitle>
                     {cellStyles.length ? (
-                        <List className="cell-styles-list">
+                        <Swiper pagination>
-                            {cellStyles.map((elem, index) => {
+                            {arraySlides.map((_, indexSlide) => {
+                                let stylesSlide = cellStyles.slice(indexSlide * 9, (indexSlide * 9) + 9);
+                                
                                 return (
-                                    <ListItem key={index}
+                                    <SwiperSlide key={indexSlide}>
-                                        className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
+                                        <List className="cell-styles-list">
+                                            {stylesSlide.map((elem, index) => (
+                                                <ListItem key={index} className={elem.name === styleName ? "item-theme active" : "item-theme"} onClick={() => props.onStyleClick(elem.name)}>
                                                     <div className='thumb' style={{backgroundImage: `url(${elem.image})`}}></div>
                                                 </ListItem> 
-                                )
+                                            ))}
-                            })}
                                         </List>
+                                    </SwiperSlide>
+                            )})}
+                        </Swiper>
                     ) : null}
                 </>}
             </List>