Ux/54 help (#88)

* ux/54-help tooltips * ux/54-help refetch after mutation * ux/54-help broadcast event index * ux/54-help prevent multiple keypresses when key held * ux/54-help fat clock * ux/54-help progress bar user defined * ux/54-help onAir is button * ux/54-help OSC: add missing presenter message * ux/54-help OSC: enable / disable OSC * ux/54-help handle timezone in excel date import * ux/54-help tray left click to show app * ux/54-help create queriable endpoint * ux/54-help fix memoisation in lower thirds * ux/54-help revise icons * ux/54-help clarify text * ux/54-help forgiving text parsing * ux/54-help add smart keywords * ux/54-help version bump
2026-08-21 06:59:09 +00:00 · 2022-01-12 22:41:12 +01:00
parent c3f18feaae
commit 48093b8651
90 changed files with 2787 additions and 763 deletions
@@ -0,0 +1,43 @@
+import { Draggable } from 'react-beautiful-dnd';
+import { FiMoreVertical } from 'react-icons/fi';
+import { millisToMinutes } from 'common/utils/dateConfig';
+import ActionButtons from '../list/ActionButtons';
+import DeleteIconBtn from 'common/components/buttons/DeleteIconBtn';
+import ApplyIconBtn from 'common/components/buttons/ApplyIconBtn';
+import DelayInput from 'common/input/DelayInput';
+import style from './DelayBlock.module.css';
+import PropTypes from 'prop-types';
+
+export default function DelayBlock(props) {
+  const { eventsHandler, data, index, actionHandler } = props;
+
+  const applyDelayHandler = () => {
+    eventsHandler('applyDelay', { id: data.id, duration: data.duration });
+  };
+
+  let delayValue = data.duration != null ? millisToMinutes(data.duration) : undefined;
+  return (
+    <Draggable key={data.id} draggableId={data.id} index={index}>
+      {(provided) => (
+        <div className={style.delay} {...provided.draggableProps} ref={provided.innerRef}>
+          <span className={style.drag} {...provided.dragHandleProps}>
+            <FiMoreVertical />
+          </span>
+          <DelayInput className={style.input} value={delayValue} actionHandler={actionHandler} />
+          <div className={style.actionOverlay}>
+            <ApplyIconBtn clickhandler={applyDelayHandler} />
+            <DeleteIconBtn actionHandler={actionHandler} />
+            <ActionButtons showAdd actionHandler={actionHandler} />
+          </div>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+DelayBlock.propTypes = {
+  eventsHandler: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  index: PropTypes.number.isRequired,
+  actionHandler: PropTypes.func.isRequired,
+};
@@ -0,0 +1,66 @@
+/* ============= COMMON ============= */
+
+.delay {
+  margin: 0.2em 0;
+  padding: 0.2em 0.5em;
+
+  width: 100%;
+  border-radius: 8px;
+  font-size: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+
+  display: grid;
+  grid-template-columns: 2em 1fr auto;
+  grid-template-areas: 'drag inpt btns';
+  justify-content: center;
+  align-content: center;
+  align-items: baseline;
+  gap: 0.5em;
+
+  background-color: #ecc94b;
+  background: linear-gradient(
+    180deg,
+    rgba(214, 158, 46, 0.4) 0%,
+    rgba(236, 201, 75, 0.4) 20%,
+    rgba(214, 158, 46, 0.07) 21%
+  );
+}
+
+/* ================ DRAG ================ */
+
+.drag {
+  grid-area: drag;
+  color: rgba(255, 255, 255, 0.67);
+  align-self: center;
+}
+
+/* =============== INPUT ================ */
+
+.input {
+  grid-area: inpt;
+}
+
+/* ============== ACTION ================ */
+
+.actionOverlay {
+  grid-area: btns;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-content: center;
+  align-self: flex-start;
+  padding-top: 0.2em;
+  gap: 0.5em;
+  opacity: 0.8;
+  transition: linear 0.1s;
+}
+
+.delay:hover > .actionOverlay {
+  opacity: 1;
+  transition: linear 0.1s;
+}
+
+/* NA */
+.actionOverlay:hover {
+  opacity: 1;
+}