major: event block redesign

client/src/common/input/DelayInput.jsx

@@ -13,7 +13,7 @@ const inputProps = {
   textAlign: 'center',
 };
 
-export default function TimeInput(props) {
+export default function DelayInput(props) {
   const [value, setValue] = useState(props.value);
 
   useEffect(() => {
@@ -29,9 +29,10 @@ export default function TimeInput(props) {
     if (val === props.value) return;
     if (val === '') setValue(0);
     if (val >= 0 && val <= 60) {
-      props.submitHandler(val);
+      // convert to ms and updates
+      props.actionHandler('update', { field: 'duration', value: val * 60000 });
     } else {
-      setValue(60);
+      props.actionHandler('update', { field: 'duration', value: 3600000 });
     }
   };
 

client/src/common/input/DelayValue.jsx

@@ -1,12 +0,0 @@
-import { millisToMinutes } from '../dateConfig';
-import style from '../../features/editors/list/Block.module.css';
-
-export default function DelayValue(props) {
-  const { delay } = props;
-  const delayed = delay > 0;
-  return (
-    <div className={style.delayValue}>
-      {delayed && <span>{`+ ${millisToMinutes(delay)}`}</span>}
-    </div>
-  );
-}

client/src/common/input/EditableText.jsx

@@ -4,7 +4,7 @@ import style from './EditableText.module.css';
 
 export default function EditableText(props) {
   const { label, defaultValue, placeholder, submitHandler } = props;
-  const [text, setText] = useState('');
+  const [text, setText] = useState(defaultValue || '');
 
   useEffect(() => {
     if (defaultValue == null) setText('');
@@ -19,14 +19,11 @@ export default function EditableText(props) {
 
   const handleChange = (val) => {
     if (val.length < 40) setText(val);
-    console.log(val.length);
   };
 
   return (
     <div className={style.block}>
-      <span className={props.underlined ? style.titleUnderlined : style.title}>
-        {label}
-      </span>
+      <span className={style.title}>{label}</span>
       <Editable
         onChange={(v) => handleChange(v)}
         onSubmit={(v) => handleSubmit(v)}
@@ -34,8 +31,11 @@ export default function EditableText(props) {
         placeholder={placeholder}
         className={style.inline}
       >
-        <EditablePreview />
-        <EditableInput />
+        <EditablePreview
+          color={text === '' ? '#666' : 'inherit'}
+          maxWidth='20em'
+        />
+        <EditableInput overflowX='hidden' maxWidth='20em' />
       </Editable>
     </div>
   );

client/src/common/input/EditableText.module.css

@@ -1,24 +1,16 @@
-.title,
-.titleUnderlined {
+.title {
   padding-left: 1em;
-  font-size: 0.8em;
+  font-size: 0.75em;
   color: #aaa;
   display: inline-block;
   width: 6em;
-  cursor: default;
-}
-
-.titleUnderlined {
-  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
 
 .block {
   display: 'block';
-  overflow: hidden;
-  max-width: 100%;
+  overflow-x: hidden;
 }
 
 .inline {
   display: inline;
-  width: max-content;
 }

client/src/common/input/EditableTimer.jsx

@@ -9,7 +9,7 @@ import { showErrorToast } from '../helpers/toastManager';
 import style from './EditableTimer.module.css';
 
 export default function EditableTimer(props) {
-  const { name, updateValues, time, delay, validate } = props;
+  const { name, actionHandler, time, delay, validate } = props;
   const [value, setValue] = useState('');
 
   // prepare time fields
@@ -46,7 +46,7 @@ export default function EditableTimer(props) {
     if (!validate(name, millis)) return false;
 
     // update entry
-    updateValues(name, millis);
+    actionHandler('update', { field: name, value: millis });
 
     return true;
   };
@@ -56,19 +56,17 @@ export default function EditableTimer(props) {
   };
 
   return (
-    <div className={style.time}>
-      <Editable
-        onFocus={() => showOriginal()}
-        onEdit={() => showOriginal}
-        onChange={(v) => setValue(v)}
-        onSubmit={(v) => validateValue(v)}
-        value={value}
-        placeholder='--:--'
-        className={delay > 0 ? style.delayedEditable : style.editable}
-      >
-        <EditablePreview />
-        <EditableInput type='time' min='00:00' max='23:59' />
-      </Editable>
-    </div>
+    <Editable
+      onFocus={() => showOriginal}
+      onEdit={() => showOriginal}
+      onChange={(v) => setValue(v)}
+      onSubmit={(v) => validateValue(v)}
+      value={value}
+      placeholder='--:--'
+      className={delay > 0 ? style.delayedEditable : style.editable}
+    >
+      <EditablePreview />
+      <EditableInput type='time' min='00:00' max='23:59' />
+    </Editable>
   );
 }

client/src/common/input/EditableTimer.module.css

@@ -1,15 +1,13 @@
-.time {
+.editable,
+.delayedEditable {
   background-color: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.05);
   border-radius: 4px;
   width: 5em;
   height: fit-content;
-}
 
-.editable,
-.delayedEditable {
   text-align: center;
   border-radius: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .delayedEditable {