Add left margin to timeline and fix colors in edit mode (#500)

Display placeholder only in the green timeline

Display participants if not in edit mode

Author: renefs

newdle/client/src/components/creation/timeslots/Timeline.js

@@ -270,6 +270,7 @@ function TimelineInput({minHour, maxHour}) {
     <div>
       <div
         ref={timelineRef}
+        style={{position: 'relative'}}
         className={`${styles['timeline-input']} ${styles['edit']}`}
         onClick={event => {
           handleMouseDown(event);
@@ -424,10 +425,12 @@ ClickToAddTimeSlots.propTypes = {
 
 function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
   const dispatch = useDispatch();
-  const [editing, setEditing] = useState(false);
+  const candidates = useSelector(getTimeslotsForActiveDate);
+
+  const [_editing, setEditing] = useState(false);
+  const editing = _editing || !!candidates.length;
   const date = useSelector(getCreationCalendarActiveDate);
   const pastCandidates = useSelector(getPreviousDayTimeslots);
-  const candidates = useSelector(getTimeslotsForActiveDate);
 
   const copyTimeSlots = () => {
     pastCandidates.forEach(time => {
@@ -436,12 +439,6 @@ function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
     setEditing(true);
   };
 
-  if (!editing && candidates.length === 0) {
-    return (
-      <ClickToAddTimeSlots startEditing={() => setEditing(true)} copyTimeSlots={copyTimeSlots} />
-    );
-  }
-
   return (
     <>
       <div className={styles['timeline-rows']}>
@@ -454,7 +451,13 @@ function TimelineContent({busySlots: allBusySlots, minHour, maxHour}) {
             return <BusyColumn {...slot} key={key} />;
           })
         )}
-        <TimelineInput minHour={minHour} maxHour={maxHour} />
+        {editing && <TimelineInput minHour={minHour} maxHour={maxHour} />}
+        {!editing && (
+          <ClickToAddTimeSlots
+            startEditing={() => setEditing(true)}
+            copyTimeSlots={copyTimeSlots}
+          />
+        )}
       </div>
       {editing && candidates.length === 0 && (
         <div className={styles['add-first-text']}>
@@ -556,7 +559,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} />

newdle/client/src/components/creation/timeslots/Timeline.module.scss

@@ -17,6 +17,12 @@ $rows-border-width: 5px;
     }
   }
 
+  .timeline-content {
+    @media screen and (min-width: 1200px) {
+      margin-left: $label-width;
+    }
+  }
+
   .timeline-date {
     color: $coral;
   }
@@ -46,8 +52,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 +223,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;

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:465
 msgid "Click the timeline to add your first time slot"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:408
+#: src/components/creation/timeslots/Timeline.js:409
 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:414
 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:523
 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:531
 msgid "Timezone"
 msgstr ""
 
-#: src/components/creation/timeslots/Timeline.js:526
+#: src/components/creation/timeslots/Timeline.js:529
 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:317
 msgid "{0, plural, =0 {No participants registered} one {# participant registered} other {# participants registered}}"
 msgstr ""