From 1fe0bc715942e99ab2f92a54ae8b8452e472bee0 Mon Sep 17 00:00:00 2001
From: Silvester <silvester.pari@eox.at>
Date: Tue, 17 Dec 2024 14:12:56 +0100
Subject: [PATCH] feat(style): adjust button styling, paddings, add css
 variable for hiding buttons (#1439)

---
 elements/timecontrol/src/main.js              |  6 ++---
 elements/timecontrol/src/style.eox.js         | 23 ++++++++++++++-----
 .../stories/disabled-play-button.js           |  1 +
 elements/timecontrol/stories/primary.js       |  1 +
 .../stories/programmatic-time-selection.js    |  1 +
 elements/timecontrol/stories/slider.js        |  1 +
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/elements/timecontrol/src/main.js b/elements/timecontrol/src/main.js
index d70d92d2b..6c8db722a 100644
--- a/elements/timecontrol/src/main.js
+++ b/elements/timecontrol/src/main.js
@@ -318,13 +318,11 @@ export class EOxTimeControl extends LitElement {
           <button part="next" class="icon next" @click="${() => this.next()}">
             >
           </button>
-        </div>
-        <div>
           ${!this.disablePlay
             ? html`
                 <button
                   part="play"
-                  class="icon-text ${this._isAnimationPlaying
+                  class="small icon-text ${this._isAnimationPlaying
                     ? "pause"
                     : "play"}"
                   @click="${() =>
@@ -336,6 +334,8 @@ export class EOxTimeControl extends LitElement {
                 </button>
               `
             : nothing}
+        </div>
+        <div>
           ${this.slider
             ? html`
                 <div class="slider-col">
diff --git a/elements/timecontrol/src/style.eox.js b/elements/timecontrol/src/style.eox.js
index 98cf1a47d..5908654e4 100644
--- a/elements/timecontrol/src/style.eox.js
+++ b/elements/timecontrol/src/style.eox.js
@@ -1,16 +1,22 @@
 import { button } from "@eox/elements-utils/styles/button";
 
 export const styleEOX = `
-* {
-  font-family: Roboto, sans-serif;
+:host, :root {
+  --navigation-button-display: inline-flex;
 }
 
-main {
-  text-align: center;
+* {
+  font-family: Roboto, sans-serif;
 }
 
 ${button}
 
+[part=controls] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
 button.icon-text.play:before {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Eplay%3C/title%3E%3Cpath d='M8,5.14V19.14L19,12.14L8,5.14Z' fill='%23fff' /%3E%3C/svg%3E");
 }
@@ -19,11 +25,16 @@ button.icon-text.pause:before {
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Epause%3C/title%3E%3Cpath d='M14,19H18V5H14M6,19H10V5H6V19Z' fill='%23fff' /%3E%3C/svg%3E");
 }
 
+button.icon.previous,
+button.icon.next {
+  display: var(--navigation-button-display);
+}
+
 button.icon.previous:before {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Earrow-left-drop-circle%3C/title%3E%3Cpath d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M14,7L9,12L14,17V7Z' fill='%23004170' /%3E%3C/svg%3E");
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-left-circle%3C/title%3E%3Cpath fill='%23004170' d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M15.4,16.6L10.8,12L15.4,7.4L14,6L8,12L14,18L15.4,16.6Z' /%3E%3C/svg%3E");
 }
 
 button.icon.next:before {
-  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Earrow-right-drop-circle%3C/title%3E%3Cpath d='M2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12M10,17L15,12L10,7V17Z' fill='%23004170' /%3E%3C/svg%3E");
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ctitle%3Echevron-right-circle%3C/title%3E%3Cpath fill='%23004170' d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,18L16,12L10,6L8.6,7.4L13.2,12L8.6,16.6L10,18Z' /%3E%3C/svg%3E");
 }
 `;
diff --git a/elements/timecontrol/stories/disabled-play-button.js b/elements/timecontrol/stories/disabled-play-button.js
index a68406d19..b4ff15d29 100644
--- a/elements/timecontrol/stories/disabled-play-button.js
+++ b/elements/timecontrol/stories/disabled-play-button.js
@@ -22,6 +22,7 @@ export const DisabledPlayButton = {
       .controlValues=${args.controlValues}
       .slider=${args.slider}
       .disablePlay=${args.disablePlay}
+      style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };
diff --git a/elements/timecontrol/stories/primary.js b/elements/timecontrol/stories/primary.js
index 170291d85..1559c3451 100644
--- a/elements/timecontrol/stories/primary.js
+++ b/elements/timecontrol/stories/primary.js
@@ -20,6 +20,7 @@ export const Primary = {
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
       .slider=${args.slider}
+      style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };
diff --git a/elements/timecontrol/stories/programmatic-time-selection.js b/elements/timecontrol/stories/programmatic-time-selection.js
index a87b6c531..52774012c 100644
--- a/elements/timecontrol/stories/programmatic-time-selection.js
+++ b/elements/timecontrol/stories/programmatic-time-selection.js
@@ -34,6 +34,7 @@ export const ProgrammaticTimeSelection = {
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
       .slider=${args.slider}
+      style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };
diff --git a/elements/timecontrol/stories/slider.js b/elements/timecontrol/stories/slider.js
index dc396c81d..60764e3a3 100644
--- a/elements/timecontrol/stories/slider.js
+++ b/elements/timecontrol/stories/slider.js
@@ -21,6 +21,7 @@ export const Slider = {
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
       .slider=${args.slider}
+      style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };