differentiat cell colors

RocketCommunicationsInc · May 3, 2024 · 7365977 · 7365977
1 parent a325c91
commit 7365977
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.scss b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.scss
@@ -21,6 +21,10 @@
     padding: 5px;
 }
 
+.odd-day:not(.ruler-new-day-cell) {
+    background: var(--odd-day-color);
+}
+
 .ruler-new-day-display {
     display: block;
     font-size: var(--font-size-sm);

diff --git a/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx b/packages/web-components/src/components/rux-timeline/rux-ruler/rux-ruler.tsx
@@ -73,6 +73,7 @@ export class RuxRuler {
     }
 
     render() {
+        let firstNewDay: number
         return (
             <Host>
                 <div class="rux-ruler rux-track">
@@ -81,11 +82,21 @@ export class RuxRuler {
                             const newDay = this.timePattern.test(time)
                                 ? newDayDate
                                 : ''
+                            if (newDay !== '' && !firstNewDay)
+                                firstNewDay = index
+
+                            const isOddDay = (index: number) => {
+                                if (firstNewDay) {
+                                    return (index - firstNewDay) % 48 <= 23
+                                }
+                                return false
+                            }
                             return (
                                 <span
                                     key={index}
                                     class={{
                                         'ruler-time': true,
+                                        'odd-day': isOddDay(index),
                                         'ruler-new-day-cell': this.shouldShowDate(
                                             time
                                         ),
@@ -95,7 +106,7 @@ export class RuxRuler {
                                         gridColumn: this.getColumn(index),
                                     }}
                                 >
-                                    {time}
+                                    {time} {firstNewDay ? firstNewDay : null}
                                     {this.shouldShowDate(time) ? (
                                         <span class="ruler-new-day-display">
                                             {newDay}

diff --git a/packages/web-components/src/components/rux-timeline/rux-timeline.scss b/packages/web-components/src/components/rux-timeline/rux-timeline.scss
@@ -47,6 +47,7 @@
     }
 
     --grid-line-color: transparent;
+    --odd-day-color: var(--color-background-surface-selected);
 }
 
 :host([show-grid]) {