refractor + style tweaks

- bugfix on lower
- delay between 0-60 minutes
- action buttons in dropdown
- added button for toggling element visibility
- several css and code cleanups
- renamed settingsAPI

client/src/features/editors/list/EventBlock.jsx

@@ -1,16 +1,16 @@
-import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
+import { FiChevronDown, FiChevronUp, FiMoreVertical } from 'react-icons/fi';
 import { useState } from 'react';
-import AddIconBtn from '../../../common/components/buttons/AddIconBtn';
-import BlockIconBtn from '../../../common/components/buttons/BlockIconBtn';
-import DelayIconBtn from '../../../common/components/buttons/DelayIconBtn';
-import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 import EventTimes from '../../../common/components/eventTimes/EventTimes';
 import { showErrorToast } from '../../../common/helpers/toastManager';
 import style from './Block.module.css';
 import EditableText from '../../../common/input/EditableText';
+import DelayValue from '../../../common/input/DelayValue';
+import ActionButtons from './ActionButtons';
+import VisibleIconBtn from '../../../common/components/buttons/VisibleIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, delay, index, eventsHandler } = props;
+  const [visible, setVisible] = useState(false);
 
   const [more, setMore] = useState(false);
 
@@ -52,8 +52,18 @@ export default function EventBlock(props) {
     updateValues('presenter', v);
   };
 
+  // TODO: implement functionality to select next
+  let isNext = false;
+
   return (
     <div className={selected ? style.eventRowActive : style.eventRow}>
+      <span className={style.drag}>
+        <FiMoreVertical />
+      </span>
+      <div className={style.indicators}>
+        <div className={isNext ? style.next : style.nextDisabled}>Next</div>
+        <DelayValue delay={delay} />
+      </div>
       <EventTimes
         updateValues={updateValues}
         timeStart={data.timeStart}
@@ -67,22 +77,22 @@ export default function EventBlock(props) {
               label='Title'
               defaultValue={data.title}
               placeholder='Add Title'
-              underlined
               submitHandler={handleTitleSubmit}
+              underlined
             />
             <EditableText
               label='Subtitle'
               defaultValue={data.subtitle}
               placeholder='Add Subtitle'
-              underlined
               submitHandler={handleSubtitleSubmit}
+              underlined
             />
             <EditableText
               label='Presenter'
-              defaultValue={data.subtitle}
+              defaultValue={data.presenter}
               placeholder='Add Presenter name'
-              underlined
               submitHandler={handlePresenterSubmit}
+              underlined
             />
           </div>
         ) : (
@@ -92,6 +102,7 @@ export default function EventBlock(props) {
               defaultValue={data.title}
               placeholder='Add Title'
               submitHandler={handleTitleSubmit}
+              isTight
             />
           </div>
         )}
@@ -100,10 +111,21 @@ export default function EventBlock(props) {
         </div>
       </div>
       <div className={style.actionOverlay}>
-        <DeleteIconBtn clickHandler={deleteHandler} />
-        <AddIconBtn clickHandler={addHandler} />
-        <DelayIconBtn clickHandler={delayHandler} />
-        <BlockIconBtn clickHandler={blockHandler} />
+        <VisibleIconBtn
+          clickHandler={() => setVisible(!visible)}
+          active={visible}
+        />
+        <ActionButtons
+          showDel
+          deleteHandler={deleteHandler}
+          showAdd
+          addHandler={addHandler}
+          showDelay
+          delayHandler={delayHandler}
+          showBlock
+          blockHandler={blockHandler}
+          showPublic
+        />
       </div>
     </div>
   );