From 35431e5e26107a3b626b0ab5092779d01d13ddad Mon Sep 17 00:00:00 2001
From: OVSharova <olga.sharova@onlyoffice.com>
Date: Mon, 1 Nov 2021 04:39:41 +0300
Subject: [PATCH] style as table

---
 .../main/app/controller/Animation.js          |  2 +-
 .../main/app/template/Toolbar.template        | 37 ++++++++-----------
 .../main/app/view/Animation.js                | 17 ---------
 .../main/resources/less/animation.less        | 29 +++++++++++----
 4 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/apps/presentationeditor/main/app/controller/Animation.js b/apps/presentationeditor/main/app/controller/Animation.js
index d8181a073..8cb6169e5 100644
--- a/apps/presentationeditor/main/app/controller/Animation.js
+++ b/apps/presentationeditor/main/app/controller/Animation.js
@@ -232,7 +232,7 @@ define([
             me.cmbStart.selectRecord(item ? item : me.cmbStart.items[0]);
 
 
-            this.view.setWidthRow();
+            //this.view.setWidthRow();
 
 
         }
diff --git a/apps/presentationeditor/main/app/template/Toolbar.template b/apps/presentationeditor/main/app/template/Toolbar.template
index 0cb75c790..0d4fb3e76 100644
--- a/apps/presentationeditor/main/app/template/Toolbar.template
+++ b/apps/presentationeditor/main/app/template/Toolbar.template
@@ -198,25 +198,25 @@
                     </div>
                 </div>
                 <div class="separator long"></div>
-                <div class="group small"  >
-                    <div class="elset font-normal">
-                        <label id="animation-label-start"></label>
-                        <div class="btn-slot" style="width: 96px; " id="animation-start"></div>
+                <div class="group small a-table">
+                    <div class="elset font-normal a-tr">
+                        <div class="a-td"><label id="animation-label-start"></label></div>
+                        <div class="a-td"><div class="btn-slot" style="width: 96px; " id="animation-start"></div></div>
                     </div>
-                    <div class="elset font-normal">
-                         <label id="animation-delay"></label>
-                         <span id="animation-spin-delay" class="btn-slot text spinner" ></span>
+                    <div class="elset font-normal a-tr bottom">
+                         <div class="a-td"><label id="animation-delay"></label></div>
+                         <div class="a-td"><span id="animation-spin-delay" class="btn-slot text spinner" ></span></div>
                     </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" class="btn-slot text spinner" ></span>
+                <div class="group small a-table">
+                    <div class="elset font-normal a-tr">
+                        <div class="a-td"><label id="animation-duration"></label></div>
+                        <div class="a-td"><span id="animation-spin-duration" class="btn-slot text spinner" ></span></div>
                     </div>
-                    <div class="elset font-normal">
-                        <label id="animation-label-trigger"></label>
-                        <div class="btn-slot" style="width: 82px; " id="animation-trigger"></div>
+                    <div class="elset font-normal a-tr bottom">
+                        <div class="a-td"><label id="animation-label-trigger"></label></div>
+                        <div class="a-td"><div class="btn-slot" style="width: 82px; " id="animation-trigger"></div></div>
                     </div>
                 </div>
                 <div class="separator long"></div>
@@ -229,14 +229,7 @@
                          <span class="btn-slot text" id="animation-checkbox-rewind"></span>
                     </div>
                 </div>
-                <div class="separator long"></div>
-                <div class="group small" style = "min-width: 122px;">
-                    <div class="elset font-normal">
-                        <label id="animation-repeat2"></label>
-                        <span id="animation-spin-repeat2" class="btn-slot text spinner" ></span>
-                    </div>
-                    <div class="elset font-normal"></div>
-                </div>
+
 
             </section>
         </section>
diff --git a/apps/presentationeditor/main/app/view/Animation.js b/apps/presentationeditor/main/app/view/Animation.js
index 40396958b..ebd8f5cfe 100644
--- a/apps/presentationeditor/main/app/view/Animation.js
+++ b/apps/presentationeditor/main/app/view/Animation.js
@@ -315,27 +315,12 @@ define([
                 });
                 this.lockedControls.push(this.numRepeat);
 
-                this.numRepeat2 = new Common.UI.MetricSpinner({
-                    el: this.$el.find('#animation-spin-repeat2'),
-                    step: 1,
-                    width: 88,
-                    value: '',
-                    maxValue: 1000,
-                    minValue: 0,
-                    //lock: [_set.slideDeleted, _set.noSlides, _set.disableOnStart, _set.transitLock],
-                    dataHint: '1',
-                    dataHintDirection: 'bottom',
-                    dataHintOffset: 'big'
-                });
-                this.lockedControls.push(this.numRepeat2);
-
                 Common.Utils.lockControls(PE.enumLock.disableOnStart, true, {array: this.lockedControls});
 
                 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);
-                this.$el.find('#animation-repeat2').text(this.strRepeat);
                 this.$el.find('#animation-label-trigger').text(this.strTrigger);
                 Common.NotificationCenter.on('app:ready', this.onAppReady.bind(this));
             },
@@ -404,13 +389,11 @@ define([
                 this.renderComponent('#animation-spin-duration', this.numDuration);
                 this.renderComponent('#animation-spin-delay', this.numDelay);
                 this.renderComponent('#animation-spin-repeat', this.numRepeat);
-                this.renderComponent('#animation-spin-repeat2', this.numRepeat2);
                 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-label-trigger").innerText = this.strTrigger;
                 this.$el.find("#animation-repeat").innerText = this.strRepeat;
-                this.$el.find("#animation-repeat2").innerText = this.strRepeat;
                 this.widthRow(this.$el.find("#animation-label-start"), this.$el.find("#animation-delay"));
                 return this.$el;
             },
diff --git a/apps/presentationeditor/main/resources/less/animation.less b/apps/presentationeditor/main/resources/less/animation.less
index 62fbc7e1b..7167833f6 100644
--- a/apps/presentationeditor/main/resources/less/animation.less
+++ b/apps/presentationeditor/main/resources/less/animation.less
@@ -36,15 +36,32 @@
     }
   }
 
-  /*.spinner
-  {
-    margin-left: 10px;
-  }*/
   label {
     margin-right: 10px;
   }
 
 }
+.a-table{
+  display: table;
+  width: 100%;
+}
+.a-tr{
+  display: table-row;
+  height: 20px;
+  border-top: 2px solid transparent;
+  &.bottom {
+    border-top: 4px solid transparent;
+  }
+  .a-td
+  {
+    display: table-cell;
+  }
+}
+
+.caption{
+  line-height: 18px;
+  font-size: 11px;
+}
 .btn_item {
   color: @text-normal-ie;
   color: @text-normal;
@@ -59,8 +76,4 @@
     margin-top: -2px;
   }
 
-  .caption{
-    line-height: 18px;
-    font-size: 11px;
-  }
 }
\ No newline at end of file