feat(style): adjust button styling, paddings, add css variable for hi…

…ding buttons (#1439)
EOX-A · Dec 17, 2024 · 1fe0bc7 · 1fe0bc7
1 parent e8c16d4
commit 1fe0bc7
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -21,6 +21,7 @@ export const Slider = {
       .controlProperty=${args.controlProperty}
       .controlValues=${args.controlValues}
       .slider=${args.slider}
+      style="margin-top: 8px"
     ></eox-timecontrol>
   `,
 };