Create slots on Timeline click

Refactor candidate placeholder

Co-authored-by: Tomas Roun <tomas.roun@cern.ch>

Fix tooltips and hide placeholder when x button is hovered

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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}) {
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <Popup
+      content={time}
+      open={true}
+      position="top center"
+      trigger={
+        <div
+          style={{
+            boxSizing: 'border-box',
+            position: 'absolute',
+            left: `${left}%`,
+            width: `${width}%`,
+            top: 5,
+            height: 'calc(100% - 10px)',
+            zIndex: 1000,
+            background: 'rgba(0, 0, 0, 0.2)',
+            borderRadius: '3px',
+            display: 'block',
+            pointerEvents: 'none',
+          }}
+        />
+      }
+    />
+  );
+}
+
+CandidatePlaceholder.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  width: PropTypes.number.isRequired,
+  left: PropTypes.number.isRequired,
+  time: PropTypes.string.isRequired,
+};

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

@@ -16,6 +16,7 @@ function SlotEditWidget({startTime, onChange, isValidTime, slot}) {
     <Popup
       className={styles['timepicker-popup']}
       on="click"
+      onClick={e => e.stopPropagation()}
       content={
         <>
           <TimePicker
@@ -63,11 +64,14 @@ export default function CandidateSlot({
   endTime,
   onDelete,
   onChangeSlotTime,
+  onMouseEnter,
+  onMouseLeave,
   isValidTime,
   text,
 }) {
   const slot = (
     <Slot
+      onClick={e => e.stopPropagation()}
       width={width}
       pos={pos}
       moreStyles={styles['candidate']}
@@ -82,6 +86,8 @@ export default function CandidateSlot({
         name="times circle outline"
         onClick={onDelete}
         className={`${styles['clickable']} ${styles['delete-btn']}`}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
       />
     </Slot>
   );
@@ -102,6 +108,8 @@ CandidateSlot.propTypes = {
   endTime: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
   onChangeSlotTime: PropTypes.func.isRequired,
+  onMouseEnter: PropTypes.func.isRequired,
+  onMouseLeave: PropTypes.func.isRequired,
   isValidTime: PropTypes.func.isRequired,
   text: PropTypes.string,
 };