[DE PE SSE mobile] Correct text settings

Readme.md

@@ -2,23 +2,21 @@
 
 ## web-apps
 
-The frontend for [ONLYOFFICE Document Server][2]. Builds the program interface and allows the user create, edit, save and export text, spreadsheet and presentation documents using the common interface of a document editor.
+The frontend for [ONLYOFFICE Document Server][2] and [ONLYOFFICE Desktop Editors](https://github.com/ONLYOFFICE/DesktopEditors). Builds the program interface and allows the user create, edit, save and export text documents, spreadsheets, and presentations.
 
 ## Previous versions
 
-Until 2019-10-23 the repository was called web-apps-pro
+Until 2019-10-23 the repository was called web-apps-pro.
 
-## Project Information
+## Project information
 
-Official website: [http://www.onlyoffice.org](http://onlyoffice.org "http://www.onlyoffice.org")
+Official website: [https://www.onlyoffice.com/](https://www.onlyoffice.com "https://www.onlyoffice.com")
 
 Code repository: [https://github.com/ONLYOFFICE/web-apps](https://github.com/ONLYOFFICE/web-apps "https://github.com/ONLYOFFICE/web-apps")
 
-SaaS version: [http://www.onlyoffice.com](http://www.onlyoffice.com "http://www.onlyoffice.com")
+## User feedback and support
 
-## User Feedback and Support
+If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum: [dev.onlyoffice.org][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
-
-If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum to find answers to your questions: [dev.onlyoffice.org][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
 
   [1]: http://dev.onlyoffice.org
   [2]: https://github.com/ONLYOFFICE/DocumentServer

apps/common/Gateway.js

@@ -203,12 +203,13 @@ if (window.Common === undefined) {
                 });
             },
 
-            requestRestore: function(version, url) {
+            requestRestore: function(version, url, fileType) {
                 _postMessage({
                     event: 'onRequestRestore',
                     data: {
                         version: version,
-                        url: url
+                        url: url,
+                        fileType: fileType
                     }
                 });
             },
@@ -273,19 +274,23 @@ if (window.Common === undefined) {
                 _postMessage({ event: 'onOutdatedVersion' });
             },
 
-            downloadAs: function(url) {
+            downloadAs: function(url, fileType) {
                 _postMessage({
                     event: 'onDownloadAs',
-                    data: url
+                    data: {
+                        url: url,
+                        fileType: fileType
+                    }
                 });
             },
 
-            requestSaveAs: function(url, title) {
+            requestSaveAs: function(url, title, fileType) {
                 _postMessage({
                     event: 'onRequestSaveAs',
                     data: {
                         url: url,
-                        title: title
+                        title: title,
+                        fileType: fileType
                     }
                 });
             },

apps/common/embed/lib/util/utils.js

@@ -92,6 +92,14 @@
                     str = num.toString();
                 for (var i=str.length; i<digits; i++) strfill += fill;
                 return strfill + str;
+            },
+            getKeyByValue: function(obj, value) {
+                for(var prop in obj) {
+                    if(obj.hasOwnProperty(prop)) {
+                        if(obj[prop] === value)
+                            return prop;
+                    }
+                }
             }
         };
     })();

apps/common/main/lib/component/ComboDataView.js

@@ -214,6 +214,9 @@ define([
 
                 me.trigger('render:after', me);
             }
+            if (this.disabled) {
+                this.setDisabled(!!this.disabled);
+            }
 
             return this;
         },

apps/common/main/lib/component/HintManager.js

@@ -251,6 +251,8 @@ Common.UI.HintManager = new(function() {
     };
 
     var _getHints = function() {
+        var docH = Common.Utils.innerHeight() - 20,
+            docW = Common.Utils.innerWidth() - 20;
         if (_currentControls.length === 0)
             _getControls();
         _currentControls.forEach(function(item, index) {
@@ -277,6 +279,12 @@ Common.UI.HintManager = new(function() {
                         item.attr('data-hint-direction', 'bottom');
                     }
                 }
+                var maxHeight = docH;
+                if ($('#file-menu-panel').is(':visible') && _currentLevel > 1 &&
+                    ($('.fms-flex-apply').is(':visible') || $('#fms-flex-apply').is(':visible')) &&
+                    item.closest('.fms-flex-apply').length < 1 && item.closest('#fms-flex-apply').length < 1) {
+                    maxHeight = docH - $('.fms-flex-apply').height();
+                }
                 var offsets = item.attr('data-hint-offset');
                 var applyOffset = offsets === 'big' ? 6 : (offsets === 'medium' ? 4 : (offsets === 'small' ? 2 : 0));
                 if (applyOffset) {
@@ -298,32 +306,31 @@ Common.UI.HintManager = new(function() {
                     offsets = offsets ? item.attr('data-hint-offset').split(',').map(function (item) { return parseInt(item); }) : [0, 0];
                 }
                 var offset = item.offset();
-                if (direction === 'left-top')
+                var top, left;
+                if (direction === 'left-top') {
+                    top = offset.top - 10 + offsets[0];
+                    left = offset.left - 10 + offsets[1];
+                } else if (direction === 'top') {
+                    top = offset.top - 18 + offsets[0];
+                    left = offset.left + (item.outerWidth() - 18) / 2 + offsets[1];
+                } else if (direction === 'right') {
+                    top = offset.top + (item.outerHeight() - 18) / 2 + offsets[0];
+                    left = offset.left + item.outerWidth() + offsets[1];
+                } else if (direction === 'left') {
+                    top = offset.top + (item.outerHeight() - 18) / 2 + offsets[0];
+                    left = offset.left - 18 + offsets[1];
+                } else {
+                    top = offset.top + item.outerHeight() + offsets[0];
+                    left = offset.left + (item.outerWidth() - 18) / 2 + offsets[1];
+                }
+
+                if (top < maxHeight && left < docW) {
                     hint.css({
-                        top: offset.top - 10 + offsets[0],
+                        top: top,
-                        left: offset.left - 10 + offsets[1]
+                        left: left
                     });
-                else if (direction === 'top')
+                    $(document.body).append(hint);
-                    hint.css({
+                }
-                        top: offset.top - 18 + offsets[0],
-                        left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
-                    });
-                else if (direction === 'right')
-                    hint.css({
-                        top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
-                        left: offset.left + item.outerWidth() + offsets[1]
-                    });
-                else if (direction === 'left')
-                    hint.css({
-                        top: offset.top + (item.outerHeight() - 18) / 2 + offsets[0],
-                        left: offset.left - 18 + offsets[1]
-                    });
-                else
-                    hint.css({
-                        top: offset.top + item.outerHeight() + offsets[0],
-                        left: offset.left + (item.outerWidth() - 18) / 2 + offsets[1]
-                    });
-                $(document.body).append(hint);
 
                 _currentHints.push(hint);
             }
@@ -350,7 +357,8 @@ Common.UI.HintManager = new(function() {
                 _lang = mode.lang;
                 _getAlphabetLetters();
             },
-            'hints:clear': _clearHints
+            'hints:clear': _clearHints,
+            'window:resize': _clearHints
         });
         $('#editor_sdk').on('click', function () {
             _clearHints();

apps/common/main/lib/component/TabBar.js

@@ -423,6 +423,7 @@ define([
                     this.setTabVisible('backward');
                 }
             }
+            Common.NotificationCenter.trigger('hints:clear');
         },
 
         onProcessMouse: function(data) {

apps/common/main/lib/controller/History.js

@@ -100,9 +100,10 @@ define([
             this.panelHistory.$el.find('#history-list').css('padding-bottom', hasChanges ? '45px' : 0);
         },
 
-        onDownloadUrl: function(url) {
+        onDownloadUrl: function(url, fileType) {
-            if (this.isFromSelectRevision !== undefined)
+            if (this.isFromSelectRevision !== undefined) {
-                Common.Gateway.requestRestore(this.isFromSelectRevision, url);
+                Common.Gateway.requestRestore(this.isFromSelectRevision, url, fileType);
+            }
             this.isFromSelectRevision = undefined;
         },
 
@@ -111,7 +112,7 @@ define([
                 var btn = $(e.target);
                 if (btn && btn.hasClass('revision-restore')) {
                     if (record.get('isRevision'))
-                        Common.Gateway.requestRestore(record.get('revision'));
+                        Common.Gateway.requestRestore(record.get('revision'), undefined, record.get('fileType'));
                     else {
                         this.isFromSelectRevision = record.get('revision');
                         var fileType = Asc.c_oAscFileType[(record.get('fileType') || '').toUpperCase()] || Asc.c_oAscFileType.DOCX;
@@ -216,6 +217,7 @@ define([
                                 rev.set('docIdPrev', docIdPrev, {silent: true});
                             }
                             rev.set('token', token, {silent: true});
+                            opts.data.fileType && rev.set('fileType', opts.data.fileType, {silent: true});
                         }
                     }
                     var hist = new Asc.asc_CVersionHistory();

apps/common/main/lib/controller/Protection.js

@@ -153,7 +153,6 @@ define([
             var me = this,
                 win = new Common.Views.PasswordDialog({
                     api: me.api,
-                    signType: 'invisible',
                     handler: function(result, props) {
                         if (result == 'ok') {
                             me.api.asc_setCurrentPassword(props);

apps/common/main/lib/mods/perfect-scrollbar.js

@@ -316,6 +316,7 @@
 
         var shouldPrevent = false;
         $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) {
+          Common.NotificationCenter.trigger('hints:clear');
           var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX,
               deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY;
 

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

@@ -1072,3 +1072,12 @@ Common.Utils.UserInfoParser = new(function() {
         }
     }
 })();
+
+Common.Utils.getKeyByValue = function(obj, value) {
+    for(var prop in obj) {
+        if(obj.hasOwnProperty(prop)) {
+            if(obj[prop] === value)
+                return prop;
+        }
+    }
+};

apps/common/main/lib/view/OpenDialog.js

@@ -91,6 +91,8 @@ define([
 
             }, options);
 
+            this.txtOpenFile = options.txtOpenFile || this.txtOpenFile;
+
             this.template = options.template || [
                 '<div class="box" style="height:' + (_options.height - 85) + 'px;">',
                     '<div class="content-panel" >',

apps/common/main/lib/view/PasswordDialog.js

@@ -64,13 +64,15 @@ define([
 
             }, options);
 
+            this.handler        =   options.handler;
+
             this.template = options.template || [
                 '<div class="box">',
                     '<div class="input-row" style="margin-bottom: 10px;">',
                         '<label>' + t.txtDescription + '</label>',
                     '</div>',
                     '<div class="input-row">',
-                        '<label>' + t.txtPassword + '</label>',
+                        '<label>' + t.txtPassword + (t.passwordOptional ? ' (' + t.txtOptional + ')': '') + '</label>',
                     '</div>',
                     '<div id="id-password-txt" class="input-row" style="margin-bottom: 5px;"></div>',
                     '<div class="input-row">',
@@ -81,9 +83,6 @@ define([
                 '</div>'
             ].join('');
 
-            this.handler        =   options.handler;
-            this.settings       =   options.settings;
-
             _options.tpl        =   _.template(this.template)(_options);
 
             Common.UI.Window.prototype.initialize.call(this, _options);

apps/common/main/lib/view/Protection.js

@@ -121,7 +121,10 @@ define([
                     this.btnAddPwd = new Common.UI.Button({
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-protect',
-                        caption: this.txtEncrypt
+                        caption: this.txtEncrypt,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                     this.btnsAddPwd.push(this.btnAddPwd);
 
@@ -130,7 +133,10 @@ define([
                         iconCls: 'toolbar__icon btn-ic-protect',
                         caption: this.txtEncrypt,
                         menu: true,
-                        visible: false
+                        visible: false,
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                 }
                 if (this.appConfig.isSignatureSupport) {
@@ -138,7 +144,10 @@ define([
                         cls: 'btn-toolbar x-huge icon-top',
                         iconCls: 'toolbar__icon btn-ic-signature',
                         caption: this.txtSignature,
-                        menu: (this.appPrefix !== 'pe-')
+                        menu: (this.appPrefix !== 'pe-'),
+                        dataHint    : '1',
+                        dataHintDirection: 'bottom',
+                        dataHintOffset: 'small'
                     });
                     if (!this.btnSignature.menu)
                         this.btnsInvisibleSignature.push(this.btnSignature);

apps/common/main/resources/less/colors-table-classic.less

@@ -45,6 +45,7 @@
         --text-inverse: #fff;
         --text-toolbar-header: #fff;
         --text-contrast-background: #fff;
+        --text-alt-key-hint: #444;
 
         --icon-normal: #444;
         --icon-normal-pressed: #fff;

apps/common/main/resources/less/colors-table-dark.less

@@ -46,6 +46,7 @@
         --text-inverse: #333;
         --text-toolbar-header: fade(#fff, 80%);
         --text-contrast-background: #fff;
+        --text-alt-key-hint: #2a2a2a;
 
         --icon-normal: fade(#fff, 80%);
         --icon-normal-pressed: fade(#fff, 80%);

apps/common/main/resources/less/colors-table.less

@@ -188,6 +188,7 @@
 @text-inverse: var(--text-inverse);
 @text-toolbar-header: var(--text-toolbar-header);
 @text-contrast-background: var(--text-contrast-background);
+@text-alt-key-hint: var(--text-alt-key-hint);
 
 // Icon
 // -------------------------

apps/common/main/resources/less/hint-manager.less

@@ -8,7 +8,7 @@
   text-align: center;
   background-color: @background-alt-key-hint-ie;
   background-color: @background-alt-key-hint;
-  color: @text-normal;
+  color: @text-alt-key-hint;
   font-size: 12px;
   line-height: 18px;
   padding: 0 4px;

apps/common/main/resources/less/toolbar.less

@@ -239,6 +239,10 @@
         &:not(:first-child) {
             margin-top: 6px;
         }
+
+        &.font-normal {
+            .font-size-normal();
+        }
     }
 
     .separator {

apps/documenteditor/embed/js/ApplicationController.js

@@ -266,8 +266,8 @@ DE.ApplicationController = new(function(){
         }
     }
 
-    function onDownloadUrl(url) {
+    function onDownloadUrl(url, fileType) {
-        Common.Gateway.downloadAs(url);
+        Common.Gateway.downloadAs(url, fileType);
     }
 
     function onPrint() {

apps/documenteditor/main/app/controller/LeftMenu.js

@@ -398,7 +398,7 @@ define([
             }
         },
 
-        onDownloadUrl: function(url) {
+        onDownloadUrl: function(url, fileType) {
             if (this.isFromFileDownloadAs) {
                 var me = this,
                     defFileName = this.getApplication().getController('Viewport').getView('Common.Views.Header').getDocumentCaption();
@@ -411,7 +411,7 @@ define([
                 }
 
                 if (me.mode.canRequestSaveAs) {
-                    Common.Gateway.requestSaveAs(url, defFileName);
+                    Common.Gateway.requestSaveAs(url, defFileName, fileType);
                 } else {
                     me._saveCopyDlg = new Common.Views.SaveAsDlg({
                         saveFolderUrl: me.mode.saveAsUrl,

apps/documenteditor/main/app/controller/Main.js

@@ -2053,9 +2053,10 @@ define([
                 });
             },
 
-            onDownloadUrl: function(url) {
+            onDownloadUrl: function(url, fileType) {
-                if (this._state.isFromGatewayDownloadAs)
+                if (this._state.isFromGatewayDownloadAs) {
-                    Common.Gateway.downloadAs(url);
+                    Common.Gateway.downloadAs(url, fileType);
+                }
                 this._state.isFromGatewayDownloadAs = false;
             },
 

apps/documenteditor/main/app/view/FileMenuPanels.js

@@ -288,7 +288,7 @@ define([
             '<table style="margin: 10px 0;"><tbody>',
                 '<tr>',
                 '<td class="left"></td>',
-                '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
+                '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
                 '</tr>',
             '</tbody></table>',
         '</div>'

apps/documenteditor/main/app/view/MailMergeSettings.js

@@ -570,7 +570,7 @@ define([
             }
         },
 
-        onSaveMailMerge: function(url) {
+        onSaveMailMerge: function(url, fileType) {
             var loadMask = DE.getController('Main').loadMask;
             loadMask && loadMask.hide();
 
@@ -579,7 +579,7 @@ define([
             if (this.cmbMergeTo.getValue() != Asc.c_oAscFileType.HTML) {
                 var defFileName = me.defFileName + ((this.cmbMergeTo.getValue() == Asc.c_oAscFileType.PDF) ? '.pdf' : '.docx');
                 if (me.mode.canRequestSaveAs) {
-                    Common.Gateway.requestSaveAs(url, defFileName);
+                    Common.Gateway.requestSaveAs(url, defFileName, fileType);
                 } else {
                     me._mailMergeDlg = new Common.Views.SaveAsDlg({
                         saveFolderUrl: me.mode.mergeFolderUrl,

apps/documenteditor/mobile/src/controller/Main.jsx

@@ -536,6 +536,8 @@ class MainController extends Component {
 
         //text settings
         const storeTextSettings = this.props.storeTextSettings;
+        storeTextSettings.resetFontsRecent(LocalStorage.getItem('dde-settings-recent-fonts'));
+
         EditorUIController.initFonts && EditorUIController.initFonts(storeTextSettings);
         EditorUIController.initFocusObjects && EditorUIController.initFocusObjects(this.props.storeFocusObjects);
 
@@ -687,9 +689,9 @@ class MainController extends Component {
         }
     }
 
-    onDownloadUrl () {
+    onDownloadUrl (url, fileType) {
         if (this._state.isFromGatewayDownloadAs) {
-            Common.Gateway.downloadAs(url);
+            Common.Gateway.downloadAs(url, fileType);
         }
 
         this._state.isFromGatewayDownloadAs = false;

apps/documenteditor/mobile/src/less/app-ios.less

@@ -1,6 +1,6 @@
 .ios {
     .view {
-        .page-content{
+        .bullets-numbers{
             background: #fff;
         }
     }

apps/documenteditor/mobile/src/store/textSettings.js

@@ -5,6 +5,7 @@ export class storeTextSettings {
         makeObservable(this, {
             fontsArray: observable,
             fontName: observable,
+            arrayRecentFonts:observable,
             fontSize: observable,
             isBold: observable,
             isItalic: observable,
@@ -22,6 +23,7 @@ export class storeTextSettings {
             backgroundColor: observable,
             initEditorFonts: action,
             resetFontName: action,
+            resetFontsRecent:action,
             resetFontSize: action,
             resetIsBold: action,
             resetIsItalic: action,
@@ -48,7 +50,8 @@ export class storeTextSettings {
             thumbIdx: observable,
             listItemHeight: observable,
             spriteCols: observable,
-            loadSprite: action
+            loadSprite: action,
+            addFontToRecent:action
         });
     }
 
@@ -61,6 +64,7 @@ export class storeTextSettings {
     listItemHeight = 28;
     spriteCols = 1;
     fontsArray = [];
+    arrayRecentFonts = [];
     fontName = '';
     fontSize = undefined;
     isBold = false;
@@ -147,6 +151,12 @@ export class storeTextSettings {
         let name = (typeof font.get_Name) === "function" ? font.get_Name() : font.asc_getName();
         this.fontName = name;
     }
+
+    resetFontsRecent(fonts) {
+        this.arrayRecentFonts = fonts;
+        this.arrayRecentFonts = this.arrayRecentFonts ? JSON.parse(this.arrayRecentFonts) : [];
+    }
+
     resetFontSize (size) {
         this.fontSize = size;
     }
@@ -235,6 +245,15 @@ export class storeTextSettings {
         this.fontName = name;
     }
 
+    addFontToRecent (font) {
+        this.arrayRecentFonts.forEach(item => {
+            if (item.name === font.name) this.arrayRecentFonts.splice(this.arrayRecentFonts.indexOf(item),1);
+        })
+        this.arrayRecentFonts.unshift(font);
+
+        if (this.arrayRecentFonts.length > 5) this.arrayRecentFonts.splice(4,1);
+    }
+
     resetLineSpacing (vc) {
         let line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
         this.lineSpacing = line;

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -3,8 +3,8 @@ import {observer, inject} from "mobx-react";
 import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} 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';
+import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage';
 
 const PageFonts = props => {
     const isAndroid = Device.android;
@@ -22,6 +22,13 @@ const PageFonts = props => {
     const thumbContext = storeTextSettings.thumbContext;
     const spriteCols = storeTextSettings.spriteCols;
     const spriteThumbs = storeTextSettings.spriteThumbs;
+    const arrayRecentFonts = storeTextSettings.arrayRecentFonts;
+
+    const addRecentStorage = () => {
+        let arr = [];
+        arrayRecentFonts.forEach(item => arr.push(item));
+        LocalStorage.setItem('dde-settings-recent-fonts', JSON.stringify(arr));
+    }
     
     const [vlFonts, setVlFonts] = useState({
         vlData: {
@@ -74,6 +81,18 @@ const PageFonts = props => {
                 </ListItem>
             </List>
             <BlockTitle>{t('Edit.textFonts')}</BlockTitle>
+            {!!arrayRecentFonts.length &&
+                <List>
+                    {arrayRecentFonts.map((item, index) => (
+                        <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
+                            storeTextSettings.changeFontFamily(item.name); 
+                            props.changeFontFamily(item.name);
+                        }}> 
+                            <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
+                        </ListItem>
+                    ))}
+                </List>
+            }
             <List virtualList virtualListParams={{
                 items: fonts,
                 renderExternal: renderExternal
@@ -82,7 +101,9 @@ const PageFonts = props => {
                     {vlFonts.vlData.items.map((item, index) => (
                         <ListItem className="font-item" key={index} radio checked={curFontName === item.name} onClick={() => {
                             storeTextSettings.changeFontFamily(item.name); 
-                            props.changeFontFamily(item.name)
+                            props.changeFontFamily(item.name);
+                            storeTextSettings.addFontToRecent(item); 
+                            addRecentStorage();
                         }}>
                             <img src={getImageUri(item)} style={{width: `${iconWidth}px`, height: `${iconHeight}px`}} />
                         </ListItem>
@@ -289,7 +310,7 @@ const PageBulletsAndNumbers = props => {
     const storeTextSettings = props.storeTextSettings;
     
     return (
-        <Page>
+        <Page className="bullets-numbers">
             <Navbar title={t('Edit.textBulletsAndNumbers')} backLink={t('Edit.textBack')}>
                 {Device.phone &&
                     <NavRight>

apps/presentationeditor/embed/js/ApplicationController.js

@@ -225,8 +225,8 @@ PE.ApplicationController = new(function(){
         }
     }
 
-    function onDownloadUrl(url) {
+    function onDownloadUrl(url, fileType) {
-        Common.Gateway.downloadAs(url);
+        Common.Gateway.downloadAs(url, fileType);
     }
 
     function onPrint() {

apps/presentationeditor/main/app.js

@@ -162,6 +162,7 @@ require([
             ,'Common.Controllers.ExternalDiagramEditor'
             ,'Common.Controllers.ReviewChanges'
             ,'Common.Controllers.Protection'
+            ,'Transitions'
         ]
     });
 
@@ -197,6 +198,7 @@ require([
             ,'common/main/lib/controller/Protection'
             ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
+            ,'presentationeditor/main/app/controller/Transitions'
         ], function() {
             app.start();
         });

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

@@ -296,7 +296,7 @@ define([
             menu.hide();
         },
 
-        onDownloadUrl: function(url) {
+        onDownloadUrl: function(url, fileType) {
             if (this.isFromFileDownloadAs) {
                 var me = this,
                     defFileName = this.getApplication().getController('Viewport').getView('Common.Views.Header').getDocumentCaption();
@@ -309,7 +309,7 @@ define([
                 }
 
                 if (me.mode.canRequestSaveAs) {
-                    Common.Gateway.requestSaveAs(url, defFileName);
+                    Common.Gateway.requestSaveAs(url, defFileName, fileType);
                 } else {
                     me._saveCopyDlg = new Common.Views.SaveAsDlg({
                         saveFolderUrl: me.mode.saveAsUrl,

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

@@ -1703,9 +1703,10 @@ define([
                 });
             },
 
-            onDownloadUrl: function(url) {
+            onDownloadUrl: function(url, fileType) {
-                if (this._state.isFromGatewayDownloadAs)
+                if (this._state.isFromGatewayDownloadAs) {
-                    Common.Gateway.downloadAs(url);
+                    Common.Gateway.downloadAs(url, fileType);
+                }
                 this._state.isFromGatewayDownloadAs = false;
             },
 

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

@@ -137,8 +137,8 @@ define([
                 if (settingsType==Common.Utils.documentSettingsType.Slide) {
                     this._settings[settingsType].locked = value.get_LockDelete();
                     this._settings[settingsType].lockedBackground = value.get_LockBackground();
-                    this._settings[settingsType].lockedEffects = value.get_LockTransition();
+                    /*this._settings[settingsType].lockedEffects = value.get_LockTransition();
-                    this._settings[settingsType].lockedTransition = value.get_LockTransition();
+                    this._settings[settingsType].lockedTransition = value.get_LockTransition();*/
                     this._settings[settingsType].lockedHeader = !!value.get_LockHeader && value.get_LockHeader();
                 } else {
                     this._settings[settingsType].locked = value.get_Locked();
@@ -182,8 +182,6 @@ define([
                     if (i == Common.Utils.documentSettingsType.Slide) {
                         if (pnl.locked!==undefined)
                             this.rightmenu.slideSettings.setLocked(this._state.no_slides || pnl.lockedBackground || pnl.locked,
-                                                                          this._state.no_slides || pnl.lockedEffects || pnl.locked,
-                                                                          this._state.no_slides || pnl.lockedTransition || pnl.locked,
                                                                           this._state.no_slides || pnl.lockedHeader || pnl.locked);
                     } else
                         pnl.panel.setLocked(pnl.locked);
@@ -220,7 +218,7 @@ define([
         SetDisabled: function(disabled, allowSignature) {
             this.setMode({isEdit: !disabled});
             if (this.rightmenu && this.rightmenu.paragraphSettings) {
-                this.rightmenu.slideSettings.SetSlideDisabled(disabled, disabled, disabled, disabled);
+                this.rightmenu.slideSettings.SetSlideDisabled(disabled, disabled);
                 this.rightmenu.paragraphSettings.disableControls(disabled);
                 this.rightmenu.shapeSettings.disableControls(disabled);
                 this.rightmenu.textartSettings.disableControls(disabled);

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

@@ -106,6 +106,7 @@ define([
                     me.btnSpelling.render( me.statusbar.$el.find('#btn-doc-spell') );
                     me.btnDocLang = review.getButton('doclang', 'statusbar');
                     me.btnDocLang.render( me.statusbar.$el.find('#btn-doc-lang') );
+
                 } else {
                     me.statusbar.$el.find('.el-edit, .el-review').hide();
                 }

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

@@ -52,6 +52,7 @@ define([
     'common/main/lib/view/SymbolTableDialog',
     'common/main/lib/util/define',
     'presentationeditor/main/app/collection/SlideThemes',
+    'presentationeditor/main/app/controller/Transitions',
     'presentationeditor/main/app/view/Toolbar',
     'presentationeditor/main/app/view/DateTimeDialog',
     'presentationeditor/main/app/view/HeaderFooterDialog',
@@ -2399,20 +2400,25 @@ define([
                 } else
                 if ( config.customization && config.customization.compactToolbar )
                     compactview = true;
-            }
 
+            }
             me.toolbar.render(_.extend({compactview: compactview}, config));
 
             var tab = {action: 'review', caption: me.toolbar.textTabCollaboration};
             var $panel = me.getApplication().getController('Common.Controllers.ReviewChanges').createToolbarPanel();
             if ( $panel ) {
-                me.toolbar.addTab(tab, $panel, 3);
+                me.toolbar.addTab(tab, $panel, 4);
                 me.toolbar.setVisible('review', config.isEdit || config.canViewReview || config.canCoAuthoring && config.canComments);
             }
 
             if ( config.isEdit ) {
                 me.toolbar.setMode(config);
 
+                var transitController = me.getApplication().getController('Transitions');
+                transitController.setApi(me.api).setConfig({toolbar: me,mode:config}).createToolbarPanel();
+                Array.prototype.push.apply(me.toolbar.lockControls,transitController.getView().getButtons());
+                Array.prototype.push.apply(me.toolbar.slideOnlyControls,transitController.getView().getButtons());
+
                 me.toolbar.btnSave.on('disabled', _.bind(me.onBtnChangeState, me, 'save:disabled'));
 
                 if (!(config.customization && config.customization.compactHeader)) {
@@ -2458,6 +2464,7 @@ define([
                         if (btn.cmpEl.closest('#review-changes-panel').length>0)
                             btn.setCaption(me.toolbar.capBtnAddComment);
                     }, this);
+
                     this.toolbar.lockToolbar(PE.enumLock.noSlides, this._state.no_slides, { array: this.btnsComment });
                 }
             }

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

@@ -0,0 +1,294 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  Transitions.js
+ *
+ *  Created by Olga.Transitions on 15.07.21
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'jquery',
+    'underscore',
+    'backbone',
+    'presentationeditor/main/app/view/Transitions'
+], function () {
+    'use strict';
+
+    PE.Controllers.Transitions = Backbone.Controller.extend(_.extend({
+        models : [],
+        collections : [],
+        views : [
+            'PE.Views.Transitions'
+        ],
+        options: {
+            alias: 'Transitions'
+        },
+        sdkViewName : '#id_main',
+
+        initialize: function () {
+
+            this.addListeners({
+                'PE.Views.Transitions': {
+                    'transit:preview':      _.bind(this.onPreviewClick, this),
+                    'transit:parameters':    _.bind(this.onParameterClick, this),
+                    'transit:duration':     _.bind(this.onDurationChange, this),
+                    'transit:applytoall':   _.bind(this.onApplyToAllClick, this),
+                    'transit:selecteffect': _.bind(this.onEffectSelect, this),
+                    'transit:startonclick': _.bind(this.onStartOnClickChange, this),
+                    'transit:delay':        _.bind(this.onDelayChange, this),
+                    'transit:checkdelay':   _.bind(this.onCheckDelayChange, this)
+                },
+                'Toolbar': {
+                    'tab:active':           _.bind(this.onActiveTab, this)
+                }
+            });
+
+        },
+
+        onLaunch: function () {
+            this._state = {};
+         },
+
+        setConfig: function (config) {
+            this.appConfig = config.mode;
+
+            this.view = this.createView('PE.Views.Transitions', {
+                toolbar: config.toolbar,
+                mode: config.mode
+            });
+            return this;
+        }, 
+
+        setApi: function (api) {
+            this.api = api;
+            this.api.asc_registerCallback('asc_onFocusObject',          _.bind(this.onFocusObject, this));
+            this.api.asc_registerCallback('asc_onCountPages',           _.bind(this.onApiCountPages, this));
+            return this;
+        },
+
+        onApiCountPages: function (count) {
+            if (this._state.no_slides !== (count<=0)) {
+                this._state.no_slides = (count<=0);
+                this.lockToolbar(PE.enumLock.noSlides, this._state.no_slides);
+            }
+        },
+
+        createToolbarPanel: function() {
+            return this.view.getPanel();
+        }, 
+
+        getView: function(name) {
+            return !name && this.view ?
+                this.view : Backbone.Controller.prototype.getView.call(this, name);
+        },
+
+        onPreviewClick: function() {
+            if (this.api) {
+                this.api.SlideTransitionPlay();
+            }
+        },
+
+        onParameterClick: function (item) {
+            this.EffectType = item.value;
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_TransitionType(this.Effect);
+                transition.put_TransitionOption(this.EffectType);
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onDurationChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_TransitionDuration(field.getNumberValue()*1000);
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onStartOnClickChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_SlideAdvanceOnMouseClick(field.getValue() == 'checked');
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onDelayChange: function(field, newValue, oldValue, eOpts) {
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_SlideAdvanceDuration(field.getNumberValue()*1000);
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onCheckDelayChange: function(field, newValue, oldValue, eOpts) {
+            this.view.numDelay.setDisabled(field.getValue() !== 'checked');
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_SlideAdvanceAfter(field.getValue() == 'checked');
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onApplyToAllClick: function () {
+            if (this.api) this.api.SlideTransitionApplyToAll();
+        },
+
+        onEffectSelect: function (combo, record) {
+            var type = record.get('value');
+
+            if (this.Effect !== type &&
+                !((this.Effect === Asc.c_oAscSlideTransitionTypes.Wipe || this.Effect === Asc.c_oAscSlideTransitionTypes.UnCover || this.Effect === Asc.c_oAscSlideTransitionTypes.Cover)&&
+                    (type === Asc.c_oAscSlideTransitionTypes.Wipe || type === Asc.c_oAscSlideTransitionTypes.UnCover || type === Asc.c_oAscSlideTransitionTypes.Cover))) {
+                var  parameter = this.view.setMenuParameters(type);
+                if (parameter)
+                    this.onParameterClick(parameter);
+            }
+            this.Effect = type;
+
+            if (this.api && !this._noApply) {
+                var props = new Asc.CAscSlideProps();
+                var transition = new Asc.CAscSlideTransition();
+                transition.put_TransitionType(type);
+                transition.put_TransitionOption(this.EffectType);
+                props.put_transition(transition);
+                this.api.SetSlideProps(props);
+            }
+        },
+
+        onFocusObject: function(selectedObjects) {
+            var me = this;
+
+            for (var i = 0; i<selectedObjects.length; i++) {
+                var eltype = selectedObjects[i].get_ObjectType();
+
+                if (eltype === undefined)
+                    continue;
+
+                if (eltype == Asc.c_oAscTypeSelectElement.Slide) {
+                    var locked_transition = undefined,
+                    pr = selectedObjects[i].get_ObjectValue();
+                    locked_transition = pr.get_LockTransition();
+
+                    if (locked_transition !== undefined && me._state.lockedtransition !== locked_transition)
+                        if (me.view.toolbar._state.activated) me._state.lockedtransition = locked_transition;
+
+                    this.loadSettings(pr);
+
+                    if (this._state.onactivetab) {
+                        this.setLocked();
+                        this.setSettings();
+                    }
+                }
+            }
+        },
+
+        loadSettings: function (props) {
+            var transition = props.get_transition();
+
+            if (transition) {
+                this._state.Effect = transition.get_TransitionType();
+                this._state.EffectType = transition.get_TransitionOption();
+
+                var value = transition.get_TransitionDuration();
+                if (Math.abs(this._state.Duration - value) > 0.001 ||
+                    (this._state.Duration === null || value === null) && (this._state.Duration !== value) ||
+                    (this._state.Duration === undefined || value === undefined) && (this._state.Duration !== value)) {
+                    this._state.Duration = value;
+                }
+
+                value = transition.get_SlideAdvanceDuration();
+                if (Math.abs(this._state.Delay - value) > 0.001 ||
+                    (this._state.Delay === null || value === null) && (this._state.Delay !== value) ||
+                    (this._state.Delay === undefined || value === undefined) && (this._state.Delay !== value)) {
+                    this._state.Delay = value;
+                }
+
+                this._state.OnMouseClick = transition.get_SlideAdvanceOnMouseClick();
+                this._state.AdvanceAfter = transition.get_SlideAdvanceAfter();
+            }
+        },
+
+        onActiveTab: function(tab) {
+            if (tab == 'transit') {
+                this._state.onactivetab = true;
+                this.setLocked();
+                this.setSettings();
+            }
+            else this._state.onactivetab = false;
+        },
+
+        lockToolbar: function (causes, lock, opts) {
+            Common.Utils.lockControls(causes, lock, opts, this.view.lockedControls);
+        },
+
+        setLocked: function() {
+            if (this._state.lockedtransition != undefined)
+                this.lockToolbar(PE.enumLock.transitLock, this._state.lockedtransition);
+        },
+
+        setSettings: function () {
+            var me = this.view;
+
+            if (this._state.Effect !== undefined) {
+                var item = me.listEffects.store.findWhere({value: this._state.Effect});
+                me.listEffects.menuPicker.selectRecord(item ? item : me.listEffects.menuPicker.items[0]);
+                this.view.btnParameters.setIconCls('toolbar__icon icon ' + item.get('imageUrl'));
+            }
+
+            if (me.btnParameters.menu.items.length > 0 && this._state.EffectType !== undefined)
+                    me.setMenuParameters(this._state.Effect, this._state.EffectType);
+
+            me.numDuration.setValue((this._state.Duration !== null  && this._state.Duration !== undefined) ? this._state.Duration / 1000. : '', true);
+            me.numDelay.setValue((this._state.Delay !== null && this._state.Delay !== undefined) ? this._state.Delay / 1000. : '', true);
+            me.chStartOnClick.setValue((this._state.OnMouseClick !== null && this._state.OnMouseClick !== undefined) ? this._state.OnMouseClick : 'indeterminate', true);
+            me.chDelay.setValue((this._state.AdvanceAfter !== null && this._state.AdvanceAfter !== undefined) ? this._state.AdvanceAfter : 'indeterminate', true);
+            me.numDelay.setDisabled(me.chDelay.getValue() !== 'checked' || me.chDelay.disabled);
+        }
+
+    }, PE.Controllers.Transitions || {}));
+});

apps/presentationeditor/main/app/template/SlideSettings.template

@@ -117,57 +117,6 @@
             <div class="separator horizontal"></div>
         </td>
     </tr>
-    <tr>
-        <td>
-            <label class="header"><%= scope.strEffect %></label>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div id="slide-combo-effect-name" style="width: 100%;"></div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div id="slide-combo-effect-type" style="width: 100%;"></div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div>
-                <label class="input-label" style="margin-top:4px;"><%= scope.strDuration %></label>
-                <div id="slide-spin-duration" style="display: inline-block; float:right;"></div>
-            </div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-large">
-            <button type="button" class="btn btn-text-default" id="slide-button-preview" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textPreview %></button>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div id="slide-checkbox-start-click"></div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-large">
-            <div>
-                <div id="slide-checkbox-delay" style="display: inline-block; width: 100px; margin-top:4px;"></div>
-                <div id="slide-spin-delay" style="display: inline-block; float:right;"></div>
-            </div>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <button type="button" class="btn btn-text-default" id="slide-button-apply-all" style="width:100%;" data-hint="1" data-hint-direction="bottom" data-hint-offset="big"><%= scope.textApplyAll %></button>
-        </td>
-    </tr>
-    <tr>
-        <td class="padding-small">
-            <div class="separator horizontal"></div>
-        </td>
-    </tr>
     <tr>
         <td class="padding-small">
             <div id="slide-checkbox-slidenum"></div>

apps/presentationeditor/main/app/template/Toolbar.template

@@ -142,6 +142,42 @@
                     <span class="btn-slot text x-huge" id="slot-btn-insvideo"></span>
                 </div>
             </section>
+            <section id="transitions-panel" class="panel" data-tab="transit">
+                <div class="group flex small" id="transit-field-effects" style="width: 700px; max-width: 700px; min-width: 140px;" data-group-width="700px"></div>
+
+                <div class="group small">
+                    <span class="btn-slot text x-huge" id="transit-button-parameters"></span>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset font-normal">
+                        <label id="transit-duration"></label>
+                        <span id="transit-spin-duration" class="btn-slot text spinner"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text" id="transit-button-preview"></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset">
+                        <span class="btn-slot text" id="transit-checkbox-startonclick"></span>
+                    </div>
+                    <div class="elset font-normal">
+                        <span class="btn-slot text"  id="transit-checkbox-delay"></span>
+                        <div id="transit-spin-delay" class="btn-slot text spinner"></div>
+                   </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                     <div class="elset">
+                        <span class="btn-slot text " id="transit-button-apply"></span>
+                    </div>
+                    <div class="elset">
+                        <span class="btn-slot text x-huge"></span>
+                    </div>
+                </div>
+            </section>
         </section>
     </section>
 </div>

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

@@ -264,7 +264,7 @@ define([
             '<table style="margin: 10px 0;"><tbody>',
                 '<tr>',
                     '<td class="left"></td>',
-                    '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="medium"><%= scope.okButtonText %></button></td>',
+                    '<td class="right"><button class="btn normal dlg-btn primary" data-hint="2" data-hint-direction="bottom" data-hint-offset="big"><%= scope.okButtonText %></button></td>',
                 '</tr>',
             '</tbody></table>',
         '</div>'

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

@@ -79,8 +79,6 @@ define([
 
             this._locked = {
                 background: false,
-                effects: false,
-                transition: false,
                 header: false
             };
             this._stateDisabled = {};
@@ -188,141 +186,6 @@ define([
             this.FillGradientContainer = $('#slide-panel-gradient-fill');
             this.TransparencyContainer = $('#slide-panel-transparent-fill');
 
-            this._arrEffectName = [
-                {displayValue: this.textNone,    value: Asc.c_oAscSlideTransitionTypes.None},
-                {displayValue: this.textFade,    value: Asc.c_oAscSlideTransitionTypes.Fade},
-                {displayValue: this.textPush,    value: Asc.c_oAscSlideTransitionTypes.Push},
-                {displayValue: this.textWipe,    value: Asc.c_oAscSlideTransitionTypes.Wipe},
-                {displayValue: this.textSplit,   value: Asc.c_oAscSlideTransitionTypes.Split},
-                {displayValue: this.textUnCover, value: Asc.c_oAscSlideTransitionTypes.UnCover},
-                {displayValue: this.textCover,   value: Asc.c_oAscSlideTransitionTypes.Cover},
-                {displayValue: this.textClock,   value: Asc.c_oAscSlideTransitionTypes.Clock},
-                {displayValue: this.textZoom,    value: Asc.c_oAscSlideTransitionTypes.Zoom}
-            ];
-
-            this.cmbEffectName = new Common.UI.ComboBox({
-                el: $('#slide-combo-effect-name'),
-                cls: 'input-group-nr',
-                style: 'width: 100%;',
-                menuStyle: 'min-width: 100%;',
-                editable: false,
-                data: this._arrEffectName,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
-            });
-            this.cmbEffectName.setValue('');
-            this.cmbEffectName.on('selected', _.bind(this.onEffectNameSelect, this));
-
-            this._arrEffectType = [
-                {displayValue: this.textSmoothly,           value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
-                {displayValue: this.textBlack,              value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
-                {displayValue: this.textLeft,               value: Asc.c_oAscSlideTransitionParams.Param_Left},
-                {displayValue: this.textTop,                value: Asc.c_oAscSlideTransitionParams.Param_Top},
-                {displayValue: this.textRight,              value: Asc.c_oAscSlideTransitionParams.Param_Right},
-                {displayValue: this.textBottom,             value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
-                {displayValue: this.textTopLeft,            value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
-                {displayValue: this.textTopRight,           value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
-                {displayValue: this.textBottomLeft,         value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
-                {displayValue: this.textBottomRight,        value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
-                {displayValue: this.textVerticalIn,         value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
-                {displayValue: this.textVerticalOut,        value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
-                {displayValue: this.textHorizontalIn,       value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
-                {displayValue: this.textHorizontalOut,      value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
-                {displayValue: this.textClockwise,          value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
-                {displayValue: this.textCounterclockwise,   value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
-                {displayValue: this.textWedge,              value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
-                {displayValue: this.textZoomIn,             value: Asc.c_oAscSlideTransitionParams.Zoom_In},
-                {displayValue: this.textZoomOut,            value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
-                {displayValue: this.textZoomRotate,         value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
-            ];
-
-            this.cmbEffectType = new Common.UI.ComboBox({
-                el: $('#slide-combo-effect-type'),
-                cls: 'input-group-nr',
-                style: 'width: 100%;',
-                menuStyle: 'min-width: 100%;',
-                editable: false,
-                data: this._arrEffectType,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
-            });
-            this.cmbEffectType.setValue('');
-            this.cmbEffectType.on('selected', _.bind(this.onEffectTypeSelect, this));
-
-            this.numDuration = new Common.UI.MetricSpinner({
-                el: $('#slide-spin-duration'),
-                step: 1,
-                width: 70,
-                value: '',
-                defaultUnit : this.textSec,
-                maxValue: 300,
-                minValue: 0,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
-            });
-            this.numDuration.on('change', _.bind(this.onDurationChange, this));
-            this.numDuration.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
-
-            this.numDelay = new Common.UI.MetricSpinner({
-                el: $('#slide-spin-delay'),
-                step: 1,
-                width: 70,
-                value: '',
-                defaultUnit : this.textSec,
-                maxValue: 300,
-                minValue: 0,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'bottom',
-                dataHintOffset: 'big'
-            });
-            this.numDelay.on('change', _.bind(this.onDelayChange, this));
-            this.numDelay.on('inputleave', function(){ me.fireEvent('editcomplete', me);});
-
-            this.chStartOnClick = new Common.UI.CheckBox({
-                el: $('#slide-checkbox-start-click'),
-                labelText: this.strStartOnClick,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'left',
-                dataHintOffset: 'small'
-            });
-            this.chStartOnClick.on('change', _.bind(this.onStartOnClickChange, this));
-
-            this.chDelay = new Common.UI.CheckBox({
-                el: $('#slide-checkbox-delay'),
-                labelText: this.strDelay,
-                disabled: true,
-                dataHint: '1',
-                dataHintDirection: 'left',
-                dataHintOffset: 'small'
-            });
-            this.chDelay.on('change', _.bind(this.onCheckDelayChange, this));
-
-            this.btnPreview = new Common.UI.Button({
-                el: $('#slide-button-preview'),
-                disabled: true
-            });
-            this.btnPreview.on('click', _.bind(function(btn){
-                if (this.api) this.api.SlideTransitionPlay();
-                this.fireEvent('editcomplete', this);
-            }, this));
-
-            this.btnApplyToAll = new Common.UI.Button({
-                el: $('#slide-button-apply-all'),
-                disabled: true
-            });
-            this.btnApplyToAll.on('click', _.bind(function(btn){
-                if (this.api) this.api.SlideTransitionApplyToAll();
-                this.fireEvent('editcomplete', this);
-            }, this));
-
             this.chSlideNum = new Common.UI.CheckBox({
                 el: $('#slide-checkbox-slidenum'),
                 labelText: this.strSlideNum,
@@ -1158,122 +1021,6 @@ define([
             this.fireEvent('editcomplete', this);
         },
 
-        fillEffectTypeCombo: function (type) {
-            var arr = [];
-            switch (type) {
-                case Asc.c_oAscSlideTransitionTypes.Fade:
-                    arr.push(this._arrEffectType[0], this._arrEffectType[1]);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Push:
-                    arr = this._arrEffectType.slice(2, 6);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Wipe:
-                    arr = this._arrEffectType.slice(2, 10);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Split:
-                    arr = this._arrEffectType.slice(10, 14);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.UnCover:
-                    arr = this._arrEffectType.slice(2, 10);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Cover:
-                    arr = this._arrEffectType.slice(2, 10);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Clock:
-                    arr = this._arrEffectType.slice(14, 17);
-                    break;
-                case Asc.c_oAscSlideTransitionTypes.Zoom:
-                    arr = this._arrEffectType.slice(17);
-                    break;
-            }
-            if (arr.length>0) {
-                this.cmbEffectType.store.reset(arr);
-                this.cmbEffectType.setValue(arr[0].value);
-                this.EffectType = arr[0].value;
-            } else {
-                this.cmbEffectType.store.reset();
-                this.EffectType = undefined;
-            }
-
-            this.cmbEffectType.setDisabled(arr.length<1 || this._locked.effects);
-            this.numDuration.setDisabled(arr.length<1 || this._locked.effects);
-            this.btnPreview.setDisabled(arr.length<1 || this._locked.effects);
-        },
-
-        onEffectNameSelect: function(combo, record) {
-            var type = record.value;
-            if (this.Effect !== type &&
-                !((this.Effect===Asc.c_oAscSlideTransitionTypes.Wipe || this.Effect===Asc.c_oAscSlideTransitionTypes.UnCover || this.Effect===Asc.c_oAscSlideTransitionTypes.Cover)&&
-                    (type===Asc.c_oAscSlideTransitionTypes.Wipe || type===Asc.c_oAscSlideTransitionTypes.UnCover || type===Asc.c_oAscSlideTransitionTypes.Cover))  )
-                this.fillEffectTypeCombo(type);
-            this.Effect = type;
-            if (this.api && !this._noApply) {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_TransitionType(type);
-                transition.put_TransitionOption(this.EffectType);
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-            this.fireEvent('editcomplete', this);
-        },
-
-        onEffectTypeSelect: function(combo, record) {
-            this.EffectType = record.value;
-            if (this.api && !this._noApply) {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_TransitionType(this.Effect);
-                transition.put_TransitionOption(this.EffectType);
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-            this.fireEvent('editcomplete', this);
-        },
-
-        onDurationChange: function(field, newValue, oldValue, eOpts){
-            if (this.api && !this._noApply)   {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_TransitionDuration(field.getNumberValue()*1000);
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-        },
-
-        onDelayChange: function(field, newValue, oldValue, eOpts){
-            if (this.api && !this._noApply)   {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_SlideAdvanceDuration(field.getNumberValue()*1000);
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-        },
-
-        onStartOnClickChange: function(field, newValue, oldValue, eOpts){
-            if (this.api && !this._noApply)   {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_SlideAdvanceOnMouseClick(field.getValue()=='checked');
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-            this.fireEvent('editcomplete', this);
-        },
-
-        onCheckDelayChange: function(field, newValue, oldValue, eOpts){
-            this.numDelay.setDisabled(field.getValue()!=='checked');
-            if (this.api && !this._noApply)   {
-                var props = new Asc.CAscSlideProps();
-                var transition = new Asc.CAscSlideTransition();
-                transition.put_SlideAdvanceAfter(field.getValue()=='checked');
-                props.put_transition(transition);
-                this.api.SetSlideProps(props);
-            }
-            this.fireEvent('editcomplete', this);
-        },
-
         onHeaderChange: function(type, field, newValue, oldValue, eOpts){
             if (this.api && !this._noApply)   {
                 var props = this.api.asc_getHeaderFooterProperties();
@@ -1341,7 +1088,7 @@ define([
         ChangeSettings: function(props) {
             if (this._initSettings)
                 this.createDelayedElements();
-            this.SetSlideDisabled(this._locked.background, this._locked.effects, this._locked.transition, this._locked.header);
+            this.SetSlideDisabled(this._locked.background, this._locked.header);
 
             if (props)
             {
@@ -1538,65 +1285,6 @@ define([
                     this._state.SlideColor = this.SlideColor.Color;
                 }
 
-                var transition = props.get_transition();
-                if (transition) {
-                    var value = transition.get_TransitionType();
-                    var found = false;
-                    if (this._state.Effect !== value) {
-                        var item = this.cmbEffectName.store.findWhere({value: value});
-                        if (item) {
-                            found = true;
-                            this.cmbEffectName.setValue(item.get('value'));
-                        } else
-                            this.cmbEffectName.setValue('');
-
-                        this.fillEffectTypeCombo((found) ? value : undefined);
-                        this.Effect = value;
-                        this._state.Effect = value;
-                    }
-
-                    value = transition.get_TransitionOption();
-                    if (this._state.EffectType !== value || found) {
-                        found = false;
-                        item = this.cmbEffectType.store.findWhere({value: value});
-                        if (item) {
-                            found = true;
-                            this.cmbEffectType.setValue(item.get('value'));
-                        } else
-                            this.cmbEffectType.setValue('');
-
-                        this._state.EffectType = value;
-                    }
-
-                    value = transition.get_TransitionDuration();
-                    if ( Math.abs(this._state.Duration-value)>0.001 ||
-                        (this._state.Duration===null || value===null)&&(this._state.Duration!==value) ||
-                        (this._state.Duration===undefined || value===undefined)&&(this._state.Duration!==value) ) {
-                        this.numDuration.setValue((value !== null && value !== undefined) ? value/1000.  : '', true);
-                        this._state.Duration=value;
-                    }
-
-                    value = transition.get_SlideAdvanceDuration();
-                    if ( Math.abs(this._state.Delay-value)>0.001 ||
-                        (this._state.Delay===null || value===null)&&(this._state.Delay!==value) ||
-                        (this._state.Delay===undefined || value===undefined)&&(this._state.Delay!==value) ) {
-                        this.numDelay.setValue((value !== null && value !== undefined) ? value/1000.  : '', true);
-                        this._state.Delay=value;
-                    }
-
-                    value = transition.get_SlideAdvanceOnMouseClick();
-                    if ( this._state.OnMouseClick!==value ) {
-                        this.chStartOnClick.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
-                        this._state.OnMouseClick=value;
-                    }
-                    value = transition.get_SlideAdvanceAfter();
-                    if ( this._state.AdvanceAfter!==value ) {
-                        this.chDelay.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true);
-                        this.numDelay.setDisabled(this.chDelay.getValue()!=='checked');
-                        this._state.AdvanceAfter=value;
-                    }
-                }
-
                 // pattern colors
                 type1 = typeof(this.FGColor.Color);
                 type2 = typeof(this._state.FGColor);
@@ -1683,15 +1371,15 @@ define([
             }
         },
 
-        setLocked: function (background, effects, transition, header) {
+        setLocked: function (background, header) {
             this._locked = {
-                background: background, effects: effects, transition: transition, header: header
+                background: background, header: header
             };
         },
 
-        SetSlideDisabled: function(background, effects, transition, header) {
+        SetSlideDisabled: function(background, header) {
             this._locked = {
-                background: background, effects: effects, transition: transition, header: header
+                background: background, header: header
             };
             if (this._initSettings) return;
             
@@ -1705,21 +1393,6 @@ define([
                 this.numGradientAngle.setDisabled(background || this.GradFillType !== Asc.c_oAscFillGradType.GRAD_LINEAR);
                 this._stateDisabled.background = background;
             }
-            if (effects !== this._stateDisabled.effects) {
-                var length = this.cmbEffectType.store.length;
-                this.cmbEffectName.setDisabled(effects);
-                this.cmbEffectType.setDisabled(length<1 || effects);
-                this.numDuration.setDisabled(length<1 || effects);
-                this.btnPreview.setDisabled(length<1 || effects);
-                this._stateDisabled.effects = effects;
-            }
-            if (transition !== this._stateDisabled.transition) {
-                this.chStartOnClick.setDisabled(transition);
-                this.chDelay.setDisabled(transition);
-                this.numDelay.setDisabled(transition || this.chDelay.getValue()!=='checked');
-                this.btnApplyToAll.setDisabled(transition);
-                this._stateDisabled.transition = transition;
-            }
             if (header !== this._stateDisabled.header) {
                 this.chSlideNum.setDisabled(header);
                 this.chDateTime.setDisabled(header);
@@ -1821,41 +1494,6 @@ define([
         textAdvanced            : 'Show advanced settings',
         textNoFill              : 'No Fill',
         textSelectTexture       : 'Select',
-        textNone: 'None',
-        textFade: 'Fade',
-        textPush: 'Push',
-        textWipe: 'Wipe',
-        textSplit: 'Split',
-        textUnCover: 'UnCover',
-        textCover: 'Cover',
-        textClock: 'Clock',
-        textZoom: 'Zoom',
-        textSmoothly: 'Smoothly',
-        textBlack: 'Through Black',
-        textLeft: 'Left',
-        textTop: 'Top',
-        textRight: 'Right',
-        textBottom: 'Bottom',
-        textTopLeft: 'Top-Left',
-        textTopRight: 'Top-Right',
-        textBottomLeft: 'Bottom-Left',
-        textBottomRight: 'Bottom-Right',
-        textVerticalIn: 'Vertical In',
-        textVerticalOut: 'Vertical Out',
-        textHorizontalIn: 'Horizontal In',
-        textHorizontalOut: 'Horizontal Out',
-        textClockwise: 'Clockwise',
-        textCounterclockwise: 'Counterclockwise',
-        textWedge: 'Wedge',
-        textZoomIn: 'Zoom In',
-        textZoomOut: 'Zoom Out',
-        textZoomRotate: 'Zoom and Rotate',
-        strStartOnClick: 'Start On Click',
-        strDelay: 'Delay',
-        textApplyAll: 'Apply to All Slides',
-        textPreview: 'Preview',
-        strEffect: 'Effect',
-        strDuration: 'Duration',
         textGradientFill: 'Gradient Fill',
         textPatternFill: 'Pattern',
         strBackground: 'Background color',
@@ -1867,7 +1505,6 @@ define([
         textDirection: 'Direction',
         textStyle: 'Style',
         textGradient: 'Gradient Points',
-        textSec: 's',
         strSlideNum: 'Show Slide Number',
         strDateTime: 'Show Date and Time',
         textFromStorage: 'From Storage',

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

@@ -82,7 +82,8 @@ define([
         noTextSelected:  'no-text',
         inEquation: 'in-equation',
         commentLock: 'can-comment',
-        noColumns: 'no-columns'
+        noColumns: 'no-columns',
+        transitLock: 'transit-lock'
     };
 
     PE.Views.Toolbar =  Common.UI.Mixtbar.extend(_.extend((function(){
@@ -129,7 +130,8 @@ define([
                             tabs: [
                                 {caption: me.textTabFile, action: 'file', extcls: 'canedit', haspanel:false},
                                 {caption: me.textTabHome, action: 'home', extcls: 'canedit'},
-                                {caption: me.textTabInsert, action: 'ins', extcls: 'canedit'}
+                                {caption: me.textTabInsert, action: 'ins', extcls: 'canedit'},
+                                {caption: me.textTabTransitions, action: 'transit', extcls: 'canedit'}
                             ]
                         }
                     );
@@ -1096,6 +1098,7 @@ define([
                 me.isCompactView = mode.compactview;
                 if ( mode.isEdit ) {
                     me.$el.html(me.rendererComponents(me.$layout));
+
                 } else {
                     me.$layout.find('.canedit').hide();
                     me.$layout.addClass('folded');
@@ -1110,10 +1113,12 @@ define([
                         Common.UI.Mixtbar.prototype.onResize.apply(me, arguments);
                     }
                 });
-
+                //_.bind(function (element){
+                //},me);
                 if ( mode.isEdit ) {
                     me.setTab('home');
                     me.processPanelVisible();
+
                 }
 
                 if ( me.isCompactView )
@@ -1143,7 +1148,6 @@ define([
                 var _injectComponent = function (id, cmp) {
                     Common.Utils.injectComponent($host.find(id), cmp);
                 };
-
                 _injectComponent('#slot-field-fontname', this.cmbFontName);
                 _injectComponent('#slot-field-fontsize', this.cmbFontSize);
                 _injectComponent('#slot-btn-changeslide', this.btnChangeSlide);
@@ -1921,7 +1925,8 @@ define([
             mniToggleCase: 'tOGGLE cASE',
             strMenuNoFill: 'No Fill',
             tipHighlightColor: 'Highlight color',
-            txtScheme22: 'New Office'
+            txtScheme22: 'New Office',
+            textTabTransitions: 'Transitions'
         }
     }()), PE.Views.Toolbar || {}));
 });

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

@@ -0,0 +1,465 @@
+/*
+ *
+ * (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
+ *
+*/
+/**
+ *  Transitions.js
+ *
+ *  View
+ *
+ *  Created by Olga.Sharova on 15.07.21
+ *  Copyright (c) 2021 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+
+define([
+    'common/main/lib/util/utils',
+    'common/main/lib/component/Button',
+    'common/main/lib/component/DataView',
+    'common/main/lib/component/ComboDataView',
+    'common/main/lib/component/Layout',
+    'presentationeditor/main/app/view/SlideSettings',
+    'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/Window'
+], function () {
+    'use strict';
+
+    PE.Views.Transitions = Common.UI.BaseView.extend(_.extend((function() {
+        function setEvents() {
+            var me = this;
+            if (me.listEffects) {
+                me.listEffects.on('click', _.bind(function (combo, record) {
+                    me.fireEvent('transit:selecteffect', [combo, record]);
+                }, me));
+            }
+
+            if (me.btnPreview) {
+                me.btnPreview.on('click', _.bind(function(btn) {
+                    me.fireEvent('transit:preview', [me.btnPreview]);
+                }, me));
+            }
+
+            if (me.btnParameters) {
+                me.btnParameters.on('click', function (e) {
+                    me.fireEvent('transit:parameters', ['current']);
+                });
+
+                me.btnParameters.menu.on('item:click', function (menu, item, e) {
+                    me.fireEvent('transit:parameters', [item]);
+                });
+            }
+
+            if (me.btnApplyToAll) {
+                me.btnApplyToAll.on('click', _.bind(function(btn) {
+                    me.fireEvent('transit:applytoall', [me.btnApplyToAll]);
+                }, me));
+            }
+
+            if (me.numDuration) {
+                me.numDuration.on('change', function(bth) {
+                    me.fireEvent('transit:duration', [me.numDuration]);
+                }, me);
+            }
+
+            if (me.numDelay) {
+                me.numDelay.on('change', function(bth) {
+                    me.fireEvent('transit:delay', [me.numDelay]);
+                }, me);
+            }
+
+            if (me.chStartOnClick) {
+                me.chStartOnClick.on('change', _.bind(function (e) {
+                    me.fireEvent('transit:startonclick', [me.chStartOnClick, me.chStartOnClick.value, me.chStartOnClick.lastValue]);
+                }, me));
+            }
+
+            if (me.chDelay) {
+                me.chDelay.on('change', _.bind(function (e) {
+                    me.fireEvent('transit:checkdelay', [me.chDelay, me.chDelay.value, me.chDelay.lastValue]);
+                }, me));
+            }
+        }
+
+        return {
+            // el: '#transitions-panel',
+
+            options: {},
+
+            initialize: function (options) {
+
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                this.toolbar = options.toolbar;
+                this.appConfig = options.mode;
+                this.$el = this.toolbar.toolbar.$el.find('#transitions-panel');
+                var _set = PE.enumLock;
+                this.lockedControls = [];
+
+                this._arrEffectName = [
+                    {title: this.textNone, imageUrl: "transition-none", value: Asc.c_oAscSlideTransitionTypes.None, id: Common.UI.getId()},
+                    {title: this.textFade, imageUrl: "transition-fade", value: Asc.c_oAscSlideTransitionTypes.Fade, id: Common.UI.getId()},
+                    {title: this.textPush, imageUrl: "transition-push", value: Asc.c_oAscSlideTransitionTypes.Push, id: Common.UI.getId()},
+                    {title: this.textWipe, imageUrl: "transition-wipe", value: Asc.c_oAscSlideTransitionTypes.Wipe, id: Common.UI.getId()},
+                    {title: this.textSplit, imageUrl: "transition-split", value: Asc.c_oAscSlideTransitionTypes.Split, id: Common.UI.getId()},
+                    {title: this.textUnCover, imageUrl: "transition-uncover", value: Asc.c_oAscSlideTransitionTypes.UnCover, id: Common.UI.getId()},
+                    {title: this.textCover, imageUrl: "transition-cover", value: Asc.c_oAscSlideTransitionTypes.Cover, id: Common.UI.getId()},
+                    {title: this.textClock, imageUrl: "transition-clock", value: Asc.c_oAscSlideTransitionTypes.Clock, id: Common.UI.getId()},
+                    {title: this.textZoom,  imageUrl: "transition-zoom", value: Asc.c_oAscSlideTransitionTypes.Zoom, id: Common.UI.getId()}
+                ];
+
+                this.listEffects = new Common.UI.ComboDataView({
+                    cls: 'combo-styles',
+                    itemWidth: 87,
+                    itemHeight: 40,
+                    enableKeyEvents: true,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'A',
+                    beforeOpenHandler: function (e) {
+                        var cmp = this,
+                            menu = cmp.openButton.menu;
+
+                        if (menu.cmpEl) {
+
+                            menu.menuAlignEl = cmp.cmpEl;
+                            menu.menuAlign = 'tl-tl';
+                            menu.cmpEl.css({
+                                'width': cmp.cmpEl.width() - cmp.openButton.$el.width(),
+                                'min-height': cmp.cmpEl.height()
+                            });
+                        }
+
+                        if (cmp.menuPicker.scroller) {
+                            cmp.menuPicker.scroller.update({
+                                includePadding: true,
+                                suppressScrollX: true
+                            });
+                        }
+
+                        cmp.removeTips();
+                    }
+                });
+                this.lockedControls.push(this.listEffects);
+                this.listEffects.menuPicker.store.add(this._arrEffectName);
+
+                this.listEffects.fieldPicker.itemTemplate = _.template([
+                    '<div  class = "btn_item x-huge" id = "<%= id %>" style = "width: ' + (this.listEffects.itemWidth) + 'px;height: ' + (this.listEffects.itemHeight) + 'px;">',
+                        '<div class = "icon toolbar__icon <%= imageUrl %>"></div>',
+                        '<div class = "caption"><%= title %></div>',
+                    '</div>'
+                ].join(''));
+                this.listEffects.menuPicker.itemTemplate = this.listEffects.fieldPicker.itemTemplate;
+
+                this.btnPreview = new Common.UI.Button({
+                    cls: 'btn-toolbar', // x-huge icon-top',
+                    caption: this.txtPreview,
+                    split: false,
+                    iconCls: 'toolbar__icon preview-transitions',
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'E'
+                });
+                this.lockedControls.push(this.btnPreview);
+
+                this.btnParameters = new Common.UI.Button({
+                    cls: 'btn-toolbar  x-huge icon-top',
+                    caption: this.txtParameters,
+                    iconCls: 'toolbar__icon icon transition-none',
+                    menu: new Common.UI.Menu({
+                        items: this.createParametersMenuItems()}),
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'B'
+                });
+                this.lockedControls.push(this.btnParameters);
+
+                this.btnApplyToAll = new Common.UI.Button({
+                    cls: 'btn-toolbar',
+                    caption: this.txtApplyToAll,
+                    split: true,
+                    iconCls: 'toolbar__icon transition-apply-all',
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'I'
+                });
+                this.lockedControls.push(this.btnApplyToAll);
+
+                this.numDuration = new Common.UI.MetricSpinner({
+                    el: this.$el.find('#transit-spin-duration'),
+                    step: 1,
+                    width: 50,
+                    value: '',
+                    defaultUnit: this.txtSec,
+                    maxValue: 300,
+                    minValue: 0,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'top',
+                    dataHintTitle: 'D'
+                });
+                this.lockedControls.push(this.numDuration);
+
+                this.numDelay = new Common.UI.MetricSpinner({
+                    el: this.$el.find('#transit-spin-delay'),
+                    step: 1,
+                    width: 60,
+                    value: '',
+                    defaultUnit: this.txtSec,
+                    maxValue: 300,
+                    minValue: 0,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'H'
+                });
+                this.lockedControls.push(this.numDelay);
+
+                this.chStartOnClick = new Common.UI.CheckBox({
+                    el: this.$el.find('#transit-checkbox-startonclick'),
+                    labelText: this.strStartOnClick,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'top',
+                    dataHintTitle: 'F'
+                });
+                this.lockedControls.push(this.chStartOnClick);
+
+                this.chDelay = new Common.UI.CheckBox({
+                    el: this.$el.find('#transit-checkbox-delay'),
+                    labelText: this.strDelay,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
+                    dataHint: '1',
+                    dataHintDirection: 'bottom',
+                    dataHintTitle: 'G'
+                });
+                this.lockedControls.push(this.chDelay);
+
+                Common.Utils.lockControls(PE.enumLock.disableOnStart, true, {array: this.lockedControls});
+
+                this.$el.find('#transit-duration').text(this.strDuration);
+                Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
+            },
+
+            render: function (el) {
+                this.boxSdk = $('#editor_sdk');
+                if (el) el.html(this.getPanel());
+                return this;
+            },
+
+            createParametersMenuItems: function()
+            {
+                var arrEffectType = [
+                    {caption: this.textSmoothly,          value: Asc.c_oAscSlideTransitionParams.Fade_Smoothly},
+                    {caption: this.textBlack,             value: Asc.c_oAscSlideTransitionParams.Fade_Through_Black},
+                    {caption: this.textLeft,              value: Asc.c_oAscSlideTransitionParams.Param_Left},
+                    {caption: this.textTop,               value: Asc.c_oAscSlideTransitionParams.Param_Top},
+                    {caption: this.textRight,             value: Asc.c_oAscSlideTransitionParams.Param_Right},
+                    {caption: this.textBottom,            value: Asc.c_oAscSlideTransitionParams.Param_Bottom},
+                    {caption: this.textTopLeft,           value: Asc.c_oAscSlideTransitionParams.Param_TopLeft},
+                    {caption: this.textTopRight,          value: Asc.c_oAscSlideTransitionParams.Param_TopRight},
+                    {caption: this.textBottomLeft,         value: Asc.c_oAscSlideTransitionParams.Param_BottomLeft},
+                    {caption: this.textBottomRight,        value: Asc.c_oAscSlideTransitionParams.Param_BottomRight},
+                    {caption: this.textVerticalIn,         value: Asc.c_oAscSlideTransitionParams.Split_VerticalIn},
+                    {caption: this.textVerticalOut,        value: Asc.c_oAscSlideTransitionParams.Split_VerticalOut},
+                    {caption: this.textHorizontalIn,       value: Asc.c_oAscSlideTransitionParams.Split_HorizontalIn},
+                    {caption: this.textHorizontalOut,      value: Asc.c_oAscSlideTransitionParams.Split_HorizontalOut},
+                    {caption: this.textClockwise,          value: Asc.c_oAscSlideTransitionParams.Clock_Clockwise},
+                    {caption: this.textCounterclockwise,   value: Asc.c_oAscSlideTransitionParams.Clock_Counterclockwise},
+                    {caption: this.textWedge,             value: Asc.c_oAscSlideTransitionParams.Clock_Wedge},
+                    {caption: this.textZoomIn,            value: Asc.c_oAscSlideTransitionParams.Zoom_In},
+                    {caption: this.textZoomOut,           value: Asc.c_oAscSlideTransitionParams.Zoom_Out},
+                    {caption: this.textZoomRotate,         value: Asc.c_oAscSlideTransitionParams.Zoom_AndRotate}
+            ];
+
+                var itemsMenu = [];
+                _.each(arrEffectType, function (item) {
+                    itemsMenu.push({
+                            caption: item.caption,
+                            value: item.value,
+                            checkable: true,
+                            toggleGroup: 'effects'
+                        });
+                });
+                return itemsMenu;
+            },
+
+            onAppReady: function (config) {
+                var me = this;
+                (new Promise(function (accept, reject) {
+                    accept();
+                })).then(function() {
+
+                    setEvents.call(me);
+                });
+            },
+
+            getPanel: function () {
+                this.listEffects && this.listEffects.render(this.$el.find('#transit-field-effects'));
+                this.btnPreview && this.btnPreview.render(this.$el.find('#transit-button-preview'));
+                this.btnParameters && this.btnParameters.render(this.$el.find('#transit-button-parameters'));
+                this.btnApplyToAll && this.btnApplyToAll.render(this.$el.find('#transit-button-apply'));
+                this.renderComponent('#transit-spin-duration', this.numDuration);
+                this.renderComponent('#transit-spin-delay', this.numDelay);
+                this.renderComponent('#transit-checkbox-startonclick', this.chStartOnClick);
+                this.$el.find("#label-duration").innerText = this.strDuration;
+                this.$el.find("#label-delay").innerText = this.strDelay;
+                return this.$el;
+            },
+
+            renderComponent: function (compid, obj)
+            {
+                var element = this.$el.find(compid);
+                element.parent().append(obj.el);
+            },
+
+            show: function () {
+                Common.UI.BaseView.prototype.show.call(this);
+                this.fireEvent('show', this);
+            },
+
+            getButtons: function (type) {
+                if (type === undefined)
+                    return this.lockedControls;
+                return [];
+            },
+
+            setDisabled: function (state) {
+                this.lockedControls && this.lockedControls.forEach(function (button) {
+                        button.setDisabled(state);
+                }, this);
+            },
+
+            setMenuParameters: function (effect, value)
+            {
+                var minMax = [-1, -1];
+                switch (effect) {
+                    case Asc.c_oAscSlideTransitionTypes.Fade:
+                        minMax = [0, 1];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Push:
+                        minMax = [2, 5];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Wipe:
+                        minMax = [2, 9];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Split:
+                        minMax = [10, 13];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.UnCover:
+                        minMax = [2, 9];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Cover:
+                        minMax = [2, 9];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Clock:
+                        minMax = [14, 16];
+                        break;
+                    case Asc.c_oAscSlideTransitionTypes.Zoom:
+                        minMax = [17, 19];
+                        break;
+                }
+
+                var selectedElement;
+                _.each(this.btnParameters.menu.items, function (element, index) {
+                    if (((index < minMax[0])||(index > minMax[1])))
+                        element.$el.css('display', 'none');
+                    else {
+                        element.$el.css('display', '');
+
+                        if (value != undefined) {
+                            if (value == element.value) selectedElement = element;
+                        }
+                    }
+                });
+
+                if (selectedElement == undefined)
+                    selectedElement = this.btnParameters.menu.items[minMax[0]];
+                
+                if (effect != Asc.c_oAscSlideTransitionTypes.None)
+                    selectedElement.setChecked(true);
+
+                if (!this.listEffects.isDisabled()) {
+                    this.numDelay.setDisabled(this.chDelay.getValue() !== 'checked');
+                    this.btnParameters.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
+                    this.btnPreview.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
+                    this.numDuration.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
+                }
+                return selectedElement;
+            },
+
+
+            txtSec: 's',
+            txtPreview: 'Preview',
+            txtParameters: 'Parameters',
+            txtApplyToAll: 'Apply to All Slides',
+            strDuration: 'Duration',
+            strDelay: 'Delay',
+            strStartOnClick: 'Start On Click',
+
+            textNone: 'None',
+            textFade: 'Fade',
+            textPush: 'Push',
+            textWipe: 'Wipe',
+            textSplit: 'Split',
+            textUnCover: 'UnCover',
+            textCover: 'Cover',
+            textClock: 'Clock',
+            textZoom: 'Zoom',
+
+            textSmoothly: 'Smoothly',
+            textBlack: 'Through Black',
+            textLeft: 'Left',
+            textTop: 'Top',
+            textRight: 'Right',
+            textBottom: 'Bottom',
+            textTopLeft: 'Top-Left',
+            textTopRight: 'Top-Right',
+            textBottomLeft: 'Bottom-Left',
+            textBottomRight: 'Bottom-Right',
+            textVerticalIn: 'Vertical In',
+            textVerticalOut: 'Vertical Out',
+            textHorizontalIn: 'Horizontal In',
+            textHorizontalOut: 'Horizontal Out',
+            textClockwise: 'Clockwise',
+            textCounterclockwise: 'Counterclockwise',
+            textWedge: 'Wedge',
+            textZoomIn: 'Zoom In',
+            textZoomOut: 'Zoom Out',
+            textZoomRotate: 'Zoom and Rotate'
+        }
+    }()), PE.Views.Transitions || {}));
+
+    });

apps/presentationeditor/main/app_dev.js

@@ -153,6 +153,7 @@ require([
             ,'Common.Controllers.ExternalDiagramEditor'
             ,'Common.Controllers.ReviewChanges'
             ,'Common.Controllers.Protection'
+            ,'Transitions'
         ]
     });
 
@@ -188,6 +189,7 @@ require([
             ,'common/main/lib/controller/Protection'
             ,'common/main/lib/controller/Themes'
             ,'common/main/lib/controller/Desktop'
+            ,'presentationeditor/main/app/controller/Transitions'
         ], function() {
             window.compareVersions = true;
             app.start();

apps/presentationeditor/main/locale/en.json

@@ -1648,70 +1648,70 @@
   "PE.Views.SlideSettings.strBackground": "Background color",
   "PE.Views.SlideSettings.strColor": "Color",
   "PE.Views.SlideSettings.strDateTime": "Show Date and Time",
-  "PE.Views.SlideSettings.strDelay": "Delay",
+  "del_PE.Views.SlideSettings.strDelay": "Delay",
-  "PE.Views.SlideSettings.strDuration": "Duration",
+  "del_PE.Views.SlideSettings.strDuration": "Duration",
-  "PE.Views.SlideSettings.strEffect": "Effect",
+  "del_PE.Views.SlideSettings.strEffect": "Effect",
   "PE.Views.SlideSettings.strFill": "Background",
   "PE.Views.SlideSettings.strForeground": "Foreground color",
   "PE.Views.SlideSettings.strPattern": "Pattern",
   "PE.Views.SlideSettings.strSlideNum": "Show Slide Number",
-  "PE.Views.SlideSettings.strStartOnClick": "Start On Click",
+  "del_PE.Views.SlideSettings.strStartOnClick": "Start On Click",
   "PE.Views.SlideSettings.strTransparency": "Opacity",
   "PE.Views.SlideSettings.textAdvanced": "Show advanced settings",
   "PE.Views.SlideSettings.textAngle": "Angle",
-  "PE.Views.SlideSettings.textApplyAll": "Apply to All Slides",
+  "del_PE.Views.SlideSettings.textApplyAll": "Apply to All Slides",
-  "PE.Views.SlideSettings.textBlack": "Through Black",
+  "del_PE.Views.SlideSettings.textBlack": "Through Black",
-  "PE.Views.SlideSettings.textBottom": "Bottom",
+  "del_PE.Views.SlideSettings.textBottom": "Bottom",
-  "PE.Views.SlideSettings.textBottomLeft": "Bottom Left",
+  "del_PE.Views.SlideSettings.textBottomLeft": "Bottom Left",
-  "PE.Views.SlideSettings.textBottomRight": "Bottom Right",
+  "del_PE.Views.SlideSettings.textBottomRight": "Bottom Right",
-  "PE.Views.SlideSettings.textClock": "Clock",
+  "del_PE.Views.SlideSettings.textClock": "Clock",
-  "PE.Views.SlideSettings.textClockwise": "Clockwise",
+  "del_PE.Views.SlideSettings.textClockwise": "Clockwise",
   "PE.Views.SlideSettings.textColor": "Color Fill",
-  "PE.Views.SlideSettings.textCounterclockwise": "Counterclockwise",
+  "del_PE.Views.SlideSettings.textCounterclockwise": "Counterclockwise",
-  "PE.Views.SlideSettings.textCover": "Cover",
+  "del_PE.Views.SlideSettings.textCover": "Cover",
   "PE.Views.SlideSettings.textDirection": "Direction",
   "PE.Views.SlideSettings.textEmptyPattern": "No Pattern",
-  "PE.Views.SlideSettings.textFade": "Fade",
+  "del_PE.Views.SlideSettings.textFade": "Fade",
   "PE.Views.SlideSettings.textFromFile": "From File",
   "PE.Views.SlideSettings.textFromStorage": "From Storage",
   "PE.Views.SlideSettings.textFromUrl": "From URL",
   "PE.Views.SlideSettings.textGradient": "Gradient points",
   "PE.Views.SlideSettings.textGradientFill": "Gradient Fill",
-  "PE.Views.SlideSettings.textHorizontalIn": "Horizontal In",
+  "del_PE.Views.SlideSettings.textHorizontalIn": "Horizontal In",
-  "PE.Views.SlideSettings.textHorizontalOut": "Horizontal Out",
+  "del_PE.Views.SlideSettings.textHorizontalOut": "Horizontal Out",
   "PE.Views.SlideSettings.textImageTexture": "Picture or Texture",
-  "PE.Views.SlideSettings.textLeft": "Left",
+  "del_PE.Views.SlideSettings.textLeft": "Left",
   "PE.Views.SlideSettings.textLinear": "Linear",
   "PE.Views.SlideSettings.textNoFill": "No Fill",
-  "PE.Views.SlideSettings.textNone": "None",
+  "del_PE.Views.SlideSettings.textNone": "None",
   "PE.Views.SlideSettings.textPatternFill": "Pattern",
   "PE.Views.SlideSettings.textPosition": "Position",
-  "PE.Views.SlideSettings.textPreview": "Preview",
+  "del_PE.Views.SlideSettings.textPreview": "Preview",
-  "PE.Views.SlideSettings.textPush": "Push",
+  "del_PE.Views.SlideSettings.textPush": "Push",
   "PE.Views.SlideSettings.textRadial": "Radial",
   "PE.Views.SlideSettings.textReset": "Reset Changes",
-  "PE.Views.SlideSettings.textRight": "Right",
+  "del_PE.Views.SlideSettings.textRight": "Right",
-  "PE.Views.SlideSettings.textSec": "s",
+  "del_PE.Views.SlideSettings.textSec": "s",
   "PE.Views.SlideSettings.textSelectImage": "Select Picture",
   "PE.Views.SlideSettings.textSelectTexture": "Select",
-  "PE.Views.SlideSettings.textSmoothly": "Smoothly",
+  "del_PE.Views.SlideSettings.textSmoothly": "Smoothly",
-  "PE.Views.SlideSettings.textSplit": "Split",
+  "del_PE.Views.SlideSettings.textSplit": "Split",
   "PE.Views.SlideSettings.textStretch": "Stretch",
   "PE.Views.SlideSettings.textStyle": "Style",
   "PE.Views.SlideSettings.textTexture": "From Texture",
   "PE.Views.SlideSettings.textTile": "Tile",
-  "PE.Views.SlideSettings.textTop": "Top",
+  "del_PE.Views.SlideSettings.textTop": "Top",
-  "PE.Views.SlideSettings.textTopLeft": "Top Left",
+  "del_PE.Views.SlideSettings.textTopLeft": "Top Left",
-  "PE.Views.SlideSettings.textTopRight": "Top Right",
+  "del_PE.Views.SlideSettings.textTopRight": "Top Right",
-  "PE.Views.SlideSettings.textUnCover": "Uncover",
+  "del_PE.Views.SlideSettings.textUnCover": "Uncover",
-  "PE.Views.SlideSettings.textVerticalIn": "Vertical In",
+  "del_PE.Views.SlideSettings.textVerticalIn": "Vertical In",
-  "PE.Views.SlideSettings.textVerticalOut": "Vertical Out",
+  "del_PE.Views.SlideSettings.textVerticalOut": "Vertical Out",
-  "PE.Views.SlideSettings.textWedge": "Wedge",
+  "del_PE.Views.SlideSettings.textWedge": "Wedge",
-  "PE.Views.SlideSettings.textWipe": "Wipe",
+  "del_PE.Views.SlideSettings.textWipe": "Wipe",
-  "PE.Views.SlideSettings.textZoom": "Zoom",
+  "del_PE.Views.SlideSettings.textZoom": "Zoom",
-  "PE.Views.SlideSettings.textZoomIn": "Zoom In",
+  "del_PE.Views.SlideSettings.textZoomIn": "Zoom In",
-  "PE.Views.SlideSettings.textZoomOut": "Zoom Out",
+  "del_PE.Views.SlideSettings.textZoomOut": "Zoom Out",
-  "PE.Views.SlideSettings.textZoomRotate": "Zoom and Rotate",
+  "del_PE.Views.SlideSettings.textZoomRotate": "Zoom and Rotate",
   "PE.Views.SlideSettings.tipAddGradientPoint": "Add gradient point",
   "PE.Views.SlideSettings.tipRemoveGradientPoint": "Remove gradient point",
   "PE.Views.SlideSettings.txtBrownPaper": "Brown Paper",
@@ -2018,5 +2018,42 @@
   "PE.Views.Toolbar.txtScheme8": "Flow",
   "PE.Views.Toolbar.txtScheme9": "Foundry",
   "PE.Views.Toolbar.txtSlideAlign": "Align to Slide",
-  "PE.Views.Toolbar.txtUngroup": "Ungroup"
+  "PE.Views.Toolbar.txtUngroup": "Ungroup",
+  "PE.Views.Transitions.txtSec": "s",
+  "PE.Views.Transitions.txtPreview": "Preview",
+  "PE.Views.Transitions.txtParameters": "Parameters",
+  "PE.Views.Transitions.txtApplyToAll": "Apply to All Slides",
+  "PE.Views.Transitions.strDuration": "Duration",
+  "PE.Views.Transitions.strDelay": "Delay",
+  "PE.Views.Transitions.strStartOnClick": "Start On Click",
+  "PE.Views.Transitions.textNone": "None",
+  "PE.Views.Transitions.textFade": "Fade",
+  "PE.Views.Transitions.textPush": "Push",
+  "PE.Views.Transitions.textWipe": "Wipe",
+  "PE.Views.Transitions.textSplit": "Split",
+  "PE.Views.Transitions.textUnCover": "UnCover",
+  "PE.Views.Transitions.textCover": "Cover",
+  "PE.Views.Transitions.textClock": "Clock",
+  "PE.Views.Transitions.textZoom": "Zoom",
+  "PE.Views.Transitions.textSmoothly": "Smoothly",
+  "PE.Views.Transitions.textBlack": "Through Black",
+  "PE.Views.Transitions.textLeft": "Left",
+  "PE.Views.Transitions.textTop": "Top",
+  "PE.Views.Transitions.textRight": "Right",
+  "PE.Views.Transitions.textBottom": "Bottom",
+  "PE.Views.Transitions.textTopLeft": "Top-Left",
+  "PE.Views.Transitions.textTopRight": "Top-Right",
+  "PE.Views.Transitions.textBottomLeft": "Bottom-Left",
+  "PE.Views.Transitions.textBottomRight": "Bottom-Right",
+  "PE.Views.Transitions.textVerticalIn": "Vertical In",
+  "PE.Views.Transitions.textVerticalOut": "Vertical Out",
+  "PE.Views.Transitions.textHorizontalIn": "Horizontal In",
+  "PE.Views.Transitions.textHorizontalOut": "Horizontal Out",
+  "PE.Views.Transitions.textClockwise": "Clockwise",
+  "PE.Views.Transitions.textCounterclockwise": "Counterclockwise",
+  "PE.Views.Transitions.textWedge": "Wedge",
+  "PE.Views.Transitions.textZoomIn": "Zoom In",
+  "PE.Views.Transitions.textZoomOut": "Zoom Out",
+  "PE.Views.Transitions.textZoomRotate": "Zoom and Rotate",
+  "PE.Views.Toolbar.textTabTransitions": "Transitions"
 }

apps/presentationeditor/main/resources/less/app.less

@@ -132,6 +132,7 @@
 @import "rightmenu.less";
 @import "advanced-settings.less";
 @import "document-preview.less";
+@import "transitions";
 
 @import "sprites/iconssmall@1x";
 @import "sprites/iconsbig@1x";

apps/presentationeditor/main/resources/less/transitions.less

@@ -0,0 +1,63 @@
+#transitions-panel {
+  .item {
+    background: transparent;
+    border-color: transparent;
+
+    .box-shadow(none);
+    border-radius: @scaled-one-px-value-ie;
+    border-radius: @scaled-one-px-value;
+    border-width: calc(2*@scaled-one-px-value-ie) ;
+    border-width: calc(@scaled-two-px-value);
+
+    &:hover{
+      border-color: @border-preview-hover-ie;
+      border-color: @border-preview-hover;
+    }
+
+    &.selected
+    {
+      border-color: @border-preview-select-ie;
+      border-color: @border-preview-select;
+    }
+
+    .style{
+      background: transparent;
+    }
+  }
+
+  .combo-dataview
+  {
+    &.disabled {
+      .item {
+        &:hover:not(.selected) {
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  .spinner
+  {
+    margin-left: 10px;
+  }
+
+}
+.btn_item {
+  color: @text-normal-ie;
+  color: @text-normal;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+
+  .icon:not(svg) {
+    width: @x-huge-btn-icon-size;
+    height: @x-huge-btn-icon-size;
+    min-width: 0;
+    margin-top: -2px;
+  }
+
+  .caption{
+    line-height: 18px;
+    font-size: 11px;
+  }
+}