Add left margin to timeline and fix colors in edit mode

Display placeholder only in the green timeline
indico · Dec 12, 2024 · a09c577 · a09c577
1 parent d3357d2
commit a09c577
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/newdle/client/src/components/creation/timeslots/CandidatePlaceholder.js b/newdle/client/src/components/creation/timeslots/CandidatePlaceholder.js
@@ -4,7 +4,7 @@ import {Popup} from 'semantic-ui-react';
 /**
  * Displays a placeholder for a candidate time slot when the Timeline is hovered.
  */
-export default function CandidatePlaceholder({visible, left, width, time}) {
+export default function CandidatePlaceholder({visible, left, width, time, height}) {
   if (!visible) {
     return null;
   }
@@ -21,8 +21,7 @@ export default function CandidatePlaceholder({visible, left, width, time}) {
             position: 'absolute',
             left: `${left}%`,
             width: `${width}%`,
-            top: 5,
-            height: 'calc(100% - 10px)',
+            height: `calc(${height}px - 10px)`,
             zIndex: 1000,
             background: 'rgba(0, 0, 0, 0.2)',
             borderRadius: '3px',
@@ -40,4 +39,5 @@ CandidatePlaceholder.propTypes = {
   width: PropTypes.number.isRequired,
   left: PropTypes.number.isRequired,
   time: PropTypes.string.isRequired,
+  height: PropTypes.number.isRequired,
 };
diff --git a/newdle/client/src/components/creation/timeslots/Timeline.js b/newdle/client/src/components/creation/timeslots/Timeline.js
@@ -222,6 +222,11 @@ function TimelineInput({minHour, maxHour}) {
     return moment().startOf('day').add(minutes, 'minutes');
   }
 
+  const getPlaceholderHeight = () => {
+    const timelineRectHeight = timelineRef.current.getBoundingClientRect().height;
+    return timelineRectHeight;
+  };
+
   const handleMouseDown = e => {
     const start = calculatePlaceholderStart(e, minHour, maxHour);
     const formattedTime = start.format(DEFAULT_TIME_FORMAT);
@@ -244,6 +249,7 @@ function TimelineInput({minHour, maxHour}) {
     const start = calculatePlaceholderStart(e, minHour, maxHour);
     const end = moment(start).add(duration, 'minutes');
     const time = start.format(DEFAULT_TIME_FORMAT);
+    const height = getPlaceholderHeight();
 
     // Check if the time slot is already taken
     if (isTimeSlotTaken(time)) {
@@ -257,6 +263,7 @@ function TimelineInput({minHour, maxHour}) {
       time,
       left: calculatePosition(start, minHour, maxHour),
       width: calculateWidth(start, end, minHour, maxHour),
+      height,
     }));
   };
 
@@ -556,7 +563,7 @@ export default function Timeline({date, availability, defaultMinHour, defaultMax
             </Grid>
           </Grid.Column>
         </Grid.Row>
-        <Grid.Row>
+        <Grid.Row className={styles['timeline-content']}>
           <Grid.Column>
             <div className={styles['timeline-slot-picker']}>
               <TimelineHeader hourSeries={hourSeries} hourSpan={hourSpan} hourStep={hourStep} />

diff --git a/newdle/client/src/components/creation/timeslots/Timeline.module.scss b/newdle/client/src/components/creation/timeslots/Timeline.module.scss
@@ -17,6 +17,15 @@ $rows-border-width: 5px;
     }
   }
 
+  .timeline-content {
+    display: flex;
+    justify-content: space-between;
+
+    @media screen and (min-width: 1200px) {
+      margin-left: $label-width;
+    }
+  }
+
   .timeline-date {
     color: $coral;
   }
@@ -46,8 +55,6 @@ $rows-border-width: 5px;
   }
   .timeline-rows {
     position: relative;
-    background-color: lighten($green, 27%);
-    border: $rows-border-width solid lighten($green, 22%);
 
     .timeline-row {
       height: $row-height;
@@ -219,6 +226,9 @@ $rows-border-width: 5px;
       padding-top: 10px;
       padding-bottom: 10px;
 
+      background-color: lighten($green, 27%);
+      border: $rows-border-width solid lighten($green, 22%);
+
       .add-btn-wrapper {
         display: flex;
         align-items: center;

diff --git a/newdle/client/src/locales/es/messages.po b/newdle/client/src/locales/es/messages.po
@@ -111,11 +111,11 @@ msgstr ""
 msgid "Choose your participants"
 msgstr "Elige a los participantes"
 
-#: src/components/creation/timeslots/Timeline.js:462
+#: src/components/creation/timeslots/Timeline.js:469
 msgid "Click the timeline to add your first time slot"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:408
+#: src/components/creation/timeslots/Timeline.js:415
 msgid "Click to add time slots"
 msgstr ""
 
@@ -145,7 +145,7 @@ msgstr ""
 msgid "Copied!"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:413
+#: src/components/creation/timeslots/Timeline.js:420
 msgid "Copy time slots from previous day"
 msgstr ""
 
@@ -406,7 +406,7 @@ msgstr ""
 msgid "Please log in again to confirm your identity"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:520
+#: src/components/creation/timeslots/Timeline.js:527
 msgid "Revert to the local timezone"
 msgstr ""
 
@@ -523,11 +523,11 @@ msgstr ""
 msgid "Timeslots"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:528
+#: src/components/creation/timeslots/Timeline.js:535
 msgid "Timezone"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:526
+#: src/components/creation/timeslots/Timeline.js:533
 msgid "Timezone {revertIcon}"
 msgstr ""
 
@@ -637,7 +637,7 @@ msgstr ""
 msgid "switch back to the <0>{defaultUserTz}</0> timezone"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:316
+#: src/components/creation/timeslots/Timeline.js:323
 msgid "{0, plural, =0 {No participants registered} one {# participant registered} other {# participants registered}}"
 msgstr ""