Merge pull request #1503 from ONLYOFFICE/fix/pe-animation

Fix/pe animation

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

@@ -0,0 +1,127 @@
+/*
+ *
+ * (c) Copyright Ascensio System SIA 2010-2022
+ *
+ * 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
+ *
+*/
+/**
+ *  Label.js
+ *
+ *  Created by Julia Radzhabova on 1/20/22
+ *  Copyright (c) 2022 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+if (Common === undefined)
+    var Common = {};
+
+define([
+    'common/main/lib/component/BaseView',
+    'underscore'
+], function (base, _) {
+    'use strict';
+
+    Common.UI.Label = Common.UI.BaseView.extend({
+
+        options : {
+            id          : null,
+            disabled    : false,
+            cls     : '',
+            iconCls     : '',
+            style       : '',
+            caption     : ''
+        },
+
+        template    : _.template('<label class="label-cmp <%= cls %>" style="<%= style %>">' +
+                                    '<% if ( iconCls ) { %>' +
+                                        '<i class="icon <%= iconCls %>"></i>' +
+                                    '<% } %>' +
+                                    '<span class="caption"><%= caption %></span>' +
+                                 '</label>'),
+
+        initialize : function(options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+
+            this.id           = this.options.id || Common.UI.getId();
+            this.cls          = this.options.cls;
+            this.iconCls      = this.options.iconCls;
+            this.style        = this.options.style;
+            this.disabled     = this.options.disabled;
+            this.caption      = this.options.caption;
+            this.template     = this.options.template || this.template;
+            this.rendered     = false;
+
+            if (this.options.el)
+                this.render();
+        },
+
+        render: function (parentEl) {
+            var me = this;
+            if (!me.rendered) {
+                var elem = this.template({
+                    id           : me.id,
+                    cls          : me.cls,
+                    iconCls      : me.iconCls,
+                    style        : me.style,
+                    caption      : me.caption
+                });
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(elem);
+                } else {
+                    me.$el.html(elem);
+                }
+
+                this.$label = me.$el.find('.label-cmp');
+                this.rendered = true;
+            }
+
+            if (this.disabled)
+                this.setDisabled(this.disabled);
+
+            return this;
+        },
+
+        setDisabled: function(disabled) {
+            if (!this.rendered)
+                return;
+
+            disabled = (disabled===true);
+            if (disabled !== this.disabled) {
+                this.$label.toggleClass('disabled', disabled);
+            }
+
+            this.disabled = disabled;
+        },
+
+        isDisabled: function() {
+            return this.disabled;
+        }
+    });
+});

apps/common/main/resources/less/label.less

@@ -0,0 +1,26 @@
+.label-cmp {
+    margin-bottom: 0;
+    .font-size-normal();
+    font-weight: normal;
+
+    .icon {
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        padding: 0;
+        margin: 0;
+        display: inline-block;
+        background-repeat: no-repeat;
+        vertical-align: middle;
+    }
+
+    &:not(:disabled) {
+        .icon {
+            opacity: @component-normal-icon-opacity;
+        }
+    }
+
+    .caption {
+        padding: 0 4px;
+    }
+}

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

@@ -141,12 +141,12 @@ define([
         onAnimPreviewStarted: function () {
 
             this._state.playPreview = true;
-            this.view.btnPreview.setIconCls('toolbar__icon transition-zoom');
+            this.view.btnPreview.setIconCls('toolbar__icon animation-preview-stop');
         },
         onAnimPreviewFinished: function ()
         {
             this._state.playPreview = false;
-            this.view.btnPreview.setIconCls('toolbar__icon transition-fade');
+            this.view.btnPreview.setIconCls('toolbar__icon animation-preview-start');
         },
 
         onParameterClick: function (value) {

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

@@ -238,20 +238,9 @@
                 <div class="separator long"></div>
                 <div class="group small">
                     <div class="elset font-normal">
-                        <label id="animation-label-start"></label>
+                        <span class="btn-slot text" id="animation-label-start"></span>
                         <div class="btn-slot" style="width: 96px; " id="animation-start"></div>
                     </div>
-                    <div class="elset font-normal">
-                         <label id="animation-delay"></label>
-                         <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
-                    </div>
-                </div>
-                <div class="separator long"></div>
-                <div class="group small">
-                    <div class="elset font-normal">
-                        <label id="animation-duration"></label>
-                        <span id="animation-spin-duration"  style="width: 96px; " class="btn-slot"></span>
-                    </div>
                     <div class="elset font-normal">
                         <div class="btn-slot text"  id="animation-trigger"></div>
                     </div>
@@ -259,7 +248,18 @@
                 <div class="separator long"></div>
                 <div class="group small">
                     <div class="elset font-normal">
-                        <label id="animation-repeat"></label>
+                        <span class="btn-slot text" id="animation-duration"></span>
+                        <span id="animation-spin-duration"  style="width: 96px; " class="btn-slot"></span>
+                    </div>
+                    <div class="elset font-normal">
+                        <span class="btn-slot text" id="animation-delay"></span>
+                        <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
+                    </div>
+                </div>
+                <div class="separator long"></div>
+                <div class="group small">
+                    <div class="elset font-normal">
+                        <span class="btn-slot text" id="animation-repeat"></span>
                         <div id="animation-spin-repeat" style="width: 96px; " class="btn-slot" ></div>
                     </div>
                     <div class="elset font-normal">

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

@@ -50,6 +50,7 @@ define([
     'common/main/lib/component/Layout',
     'presentationeditor/main/app/view/SlideSettings',
     'common/main/lib/component/MetricSpinner',
+    'common/main/lib/component/Label',
     'common/main/lib/component/Window'
 ], function () {
     'use strict';
@@ -237,7 +238,7 @@ define([
                     cls: 'btn-toolbar   x-huge  icon-top', // x-huge icon-top',
                     caption: this.txtPreview,
                     split: false,
-                    iconCls: 'toolbar__icon transition-fade',
+                    iconCls: 'toolbar__icon animation-preview-start',
                     lock: [_set.slideDeleted, _set.noSlides, _set.noAnimationPreview],
                     dataHint: '1',
                     dataHintDirection: 'bottom',
@@ -248,7 +249,7 @@ define([
                 this.btnParameters = new Common.UI.Button({
                     cls: 'btn-toolbar  x-huge icon-top',
                     caption: this.txtParameters,
-                    iconCls: 'toolbar__icon icon transition-none',
+                    iconCls: 'toolbar__icon icon animation-none',
                     menu: new Common.UI.Menu({items: []}),
                     lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noAnimationParam],
                     dataHint: '1',
@@ -272,7 +273,7 @@ define([
                 this.btnAddAnimation = new Common.UI.Button({
                     cls: 'btn-toolbar  x-huge  icon-top',
                     caption: this.txtAddEffect,
-                    iconCls: 'toolbar__icon icon btn-addslide',
+                    iconCls: 'toolbar__icon icon add-animation',
                     menu: true,
                     lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic],
                     dataHint: '1',
@@ -302,10 +303,18 @@ define([
                 });
                 this.lockedControls.push(this.cmbDuration);
 
+                this.lblDuration = new Common.UI.Label({
+                    el: this.$el.find('#animation-duration'),
+                    iconCls: 'toolbar__icon animation-duration',
+                    caption: this.strDuration,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noAnimationDuration]
+                });
+                this.lockedControls.push(this.lblDuration);
+
                 this.cmbTrigger = new Common.UI.Button({
                     parentEl: $('#animation-trigger'),
                     cls: 'btn-toolbar',
-                    iconCls: 'toolbar__icon btn-contents',
+                    iconCls: 'toolbar__icon btn-trigger',
                     caption: this.strTrigger,
                     lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noTriggerObjects],
                     menu        : new Common.UI.Menu({
@@ -347,6 +356,14 @@ define([
                 });
                 this.lockedControls.push(this.numDelay);
 
+                this.lblDelay = new Common.UI.Label({
+                    el: this.$el.find('#animation-delay'),
+                    iconCls: 'toolbar__icon animation-delay',
+                    caption: this.strDelay,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation]
+                });
+                this.lockedControls.push(this.lblDelay);
+
                 this.cmbStart = new Common.UI.ComboBox({
                     cls: 'input-group-nr',
                     menuStyle: 'min-width: 100%;',
@@ -363,6 +380,14 @@ define([
                 });
                 this.lockedControls.push(this.cmbStart);
 
+                this.lblStart = new Common.UI.Label({
+                    el: this.$el.find('#animation-label-start'),
+                    iconCls: 'toolbar__icon btn-preview-start',
+                    caption: this.strStart,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation]
+                });
+                this.lockedControls.push(this.lblStart);
+
                 this.chRewind = new Common.UI.CheckBox({
                     el: this.$el.find('#animation-checkbox-rewind'),
                     labelText: this.strRewind,
@@ -395,6 +420,14 @@ define([
                 });
                 this.lockedControls.push(this.cmbRepeat);
 
+                this.lblRepeat = new Common.UI.Label({
+                    el: this.$el.find('#animation-repeat'),
+                    iconCls: 'toolbar__icon animation-repeat',
+                    caption: this.strRepeat,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.noGraphic, _set.noAnimation, _set.noAnimationRepeat]
+                });
+                this.lockedControls.push(this.lblRepeat);
+
                 this.btnMoveEarlier = new Common.UI.Button({
                     parentEl: $('#animation-moveearlier'),
                     cls: 'btn-toolbar',
@@ -421,10 +454,6 @@ define([
                 });
                 this.lockedControls.push(this.btnMoveLater);
 
-                this.$el.find('#animation-duration').text(this.strDuration);
-                this.$el.find('#animation-delay').text(this.strDelay);
-                this.$el.find('#animation-label-start').text(this.strStart);
-                this.$el.find('#animation-repeat').text(this.strRepeat);
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
 
@@ -491,13 +520,6 @@ define([
                 this.btnAnimationPane && this.btnAnimationPane.render(this.$el.find('#animation-button-pane'));
                 this.btnAddAnimation && this.btnAddAnimation.render(this.$el.find('#animation-button-add-effect'));
                 this.cmbStart && this.cmbStart.render(this.$el.find('#animation-start'));
-                //this.renderComponent('#animation-spin-duration', this.cmbDuration);
-                this.renderComponent('#animation-spin-delay', this.numDelay);
-                //this.renderComponent('#animation-spin-repeat', this.cmbRepeat);
-                this.$el.find("#animation-duration").innerText = this.strDuration;
-                this.$el.find("#animation-delay").innerText = this.strDelay;
-                this.$el.find("#animation-label-start").innerText = this.strStart;
-                this.$el.find("#animation-repeat").innerText = this.strRepeat;
                 return this.$el;
             },
 

apps/presentationeditor/main/resources/less/animation.less

@@ -1,10 +1,3 @@
-#animation-panel  {
-  label {
-    margin-right: 10px;
-  }
-
-}
-
 .combo-animation {
   .menu-picker-container .dataview {
     padding: 10px 0 0 2px;

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

@@ -121,6 +121,7 @@
 @import "../../../../common/main/resources/less/symboltable.less";
 @import "../../../../common/main/resources/less/history.less";
 @import "../../../../common/main/resources/less/hint-manager.less";
+@import "../../../../common/main/resources/less/label.less";
 
 // App
 // --------------------------------------------------