change grid render to css background

RocketCommunicationsInc · May 7, 2024 · de345f3 · de345f3
1 parent 84b791c
commit de345f3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/packages/web-components/src/components/rux-timeline/rux-track/rux-track.scss b/packages/web-components/src/components/rux-timeline/rux-track/rux-track.scss
@@ -1,4 +1,5 @@
 :host {
+    --grid-gap: 100px;
 }
 
 :host([slot='ruler']) .rux-timeline.rux-track {
@@ -42,6 +43,14 @@
     display: grid;
     grid-template-rows: auto;
     background: var(--color-background-surface-default);
+    //gridlines
+    background-image: repeating-linear-gradient(
+        to left,
+        var(--grid-line-color),
+        var(--grid-line-color) 1px,
+        transparent 1px,
+        transparent var(--grid-gap) /* determines gap between lines */
+    );
 }
 
 .rux-track__played {

diff --git a/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx b/packages/web-components/src/components/rux-timeline/rux-track/rux-track.tsx
@@ -7,7 +7,6 @@ import {
     h,
     Watch,
     State,
-    Fragment,
 } from '@stencil/core'
 import {
     differenceInMinutes,
@@ -314,31 +313,21 @@ export class RuxTrack {
         const hasRuler = [...this.el.children].find(
             (el) => el.tagName.toLowerCase() === 'rux-ruler'
         )
-
         this.hasRuler = !!hasRuler
     }
 
-    renderGrid() {
+    renderCssGrid() {
+        //we need the width of an hour so we need the interval * whatever the width of a grid col is
         const getCols = () => {
             if (['minute', 'hour'].includes(this.interval)) return 60
             if (['day', 'week', 'month'].includes(this.interval)) return 24
             return 60
         }
-        const intervalCols = getCols()
-        return (
-            <Fragment>
-                {[...Array(this.columns)].map((_: any, i: any) =>
-                    i % intervalCols === 0 ? (
-                        <div
-                            style={{
-                                gridColumn: `${i + 2} / ${++i + 2}`,
-                            }}
-                            class="grid-line"
-                        ></div>
-                    ) : null
-                )}
-            </Fragment>
-        )
+        const span = getCols()
+        const width = span * this.width
+        // we set this as --grid-gap and then use that variable
+        // in rux-track.scss to set the gap between lines
+        return `${width}px`
     }
 
     render() {
@@ -348,6 +337,7 @@ export class RuxTrack {
                     class="rux-timeline rux-track"
                     style={{
                         gridTemplateColumns: `[header] 200px repeat(${this.columns}, ${this.width}px)`,
+                        '--grid-gap': this.renderCssGrid(),
                     }}
                     part="container"
                 >
@@ -370,7 +360,6 @@ export class RuxTrack {
                             (this.playedIndicator = el as HTMLInputElement)
                         }
                     ></div>
-                    {this.renderGrid()}
                 </div>
             </Host>
         )