From c124383a0f64d665651f7cc4eaa46f30295436c7 Mon Sep 17 00:00:00 2001
From: Julia Radzhabova <julia.radzhabova@onlyoffice.com>
Date: Fri, 21 Jan 2022 12:37:24 +0300
Subject: [PATCH] [PE] Add icon to transitions tab

---
 apps/common/main/resources/less/label.less           |  2 +-
 .../main/app/template/Toolbar.template               |  6 +++---
 apps/presentationeditor/main/app/view/Transitions.js | 12 +++++++++---
 3 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/apps/common/main/resources/less/label.less b/apps/common/main/resources/less/label.less
index ffd4647ab..8f44c647b 100644
--- a/apps/common/main/resources/less/label.less
+++ b/apps/common/main/resources/less/label.less
@@ -8,7 +8,7 @@
         height: 20px;
         line-height: 20px;
         padding: 0;
-        margin: 0;
+        margin-top: -2px;
         display: inline-block;
         background-repeat: no-repeat;
         vertical-align: middle;
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index c0eeadd9c..65c6dc50c 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -151,8 +151,8 @@
                 <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" style="margin-left: 10px;"></span>
+                        <span class="btn-slot text" id="transit-duration"></span>
+                        <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>
@@ -165,7 +165,7 @@
                     </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" style="margin-left: 10px;"></div>
+                        <div id="transit-spin-delay" class="btn-slot text spinner" style="margin-left: 5px;"></div>
                    </div>
                 </div>
                 <div class="separator long"></div>
diff --git a/apps/presentationeditor/main/app/view/Transitions.js b/apps/presentationeditor/main/app/view/Transitions.js
index 338bdb1c6..bc013be60 100644
--- a/apps/presentationeditor/main/app/view/Transitions.js
+++ b/apps/presentationeditor/main/app/view/Transitions.js
@@ -233,6 +233,14 @@ define([
                 });
                 this.lockedControls.push(this.numDuration);
 
+                this.lblDuration = new Common.UI.Label({
+                    el: this.$el.find('#transit-duration'),
+                    iconCls: 'toolbar__icon animation-duration',
+                    caption: this.strDuration,
+                    lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock]
+                });
+                this.lockedControls.push(this.lblDuration);
+
                 this.numDelay = new Common.UI.MetricSpinner({
                     el: this.$el.find('#transit-spin-delay'),
                     step: 1,
@@ -270,7 +278,6 @@ define([
 
                 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));
             },
 
@@ -335,7 +342,6 @@ define([
                 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;
             },
@@ -417,6 +423,7 @@ define([
                     this.btnParameters.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
                     this.btnPreview.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
                     this.numDuration.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
+                    this.lblDuration.setDisabled(effect === Asc.c_oAscSlideTransitionTypes.None);
                 }
                 return (selectedElement)?selectedElement.value:-1;
             },
@@ -429,7 +436,6 @@ define([
             strDuration: 'Duration',
             strDelay: 'Delay',
             strStartOnClick: 'Start On Click',
-
             textNone: 'None',
             textFade: 'Fade',
             textPush: 'Push',