style cleanup + tweaks

Title <> Subtitle relationships
Animat ein

client/src/features/editors/Editor.jsx

@@ -19,7 +19,7 @@ export default function Editor() {
 
       <div className={styles.mainContainer}>
         <Box className={styles.editor}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Event List
           </Heading>
           <NumberedText number={1} text={'Manage and select event to run'} />
@@ -29,7 +29,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.preview} borderRadius='0.5em' overflowX='auto'>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Preview Displays
           </Heading>
           <NumberedText number={4} text={'Realtime screen preview'} />
@@ -39,7 +39,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.messages}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Display Messages
           </Heading>
           <NumberedText
@@ -52,7 +52,7 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.playback}>
-          <Heading size='lg' style={{ paddingBottom: '0.25em' }}>
+          <Heading size='lg' paddingBottom={'0.25em'}>
             Time Control
           </Heading>
           <NumberedText number={3} text={'Control Timer'} />
@@ -62,64 +62,8 @@ export default function Editor() {
         </Box>
 
         <Box className={styles.settings}>
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              gap: '2em',
-              paddingTop: '3em',
-            }}
-          >
+          <div className={styles.content}>
             <SettingsIconBtn size='md' clickhandler={onOpen} />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#3b8cd8',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#3182ce',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#2778c4',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#1d6eba',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#1364b0',
-                borderRadius: '50%',
-              }}
-            />
-            <div
-              style={{
-                width: 35,
-                height: 35,
-                backgroundColor: '#095aa6',
-                borderRadius: '50%',
-              }}
-            />
           </div>
         </Box>
       </div>

client/src/features/editors/Editor.module.css

@@ -92,6 +92,10 @@
 
 .settings {
   grid-area: sett;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2.6em;
 }
 
 .content {

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

@@ -1,13 +1,13 @@
 import { Menu, MenuButton, MenuItem, MenuList } from '@chakra-ui/menu';
 import { IconButton } from '@chakra-ui/button';
-import { FiZap, FiPlus, FiMinus, FiMinusCircle, FiClock } from 'react-icons/fi';
+import { FiZap, FiPlus, FiMinusCircle, FiClock } from 'react-icons/fi';
 
 export default function ActionButtons(props) {
-  const { showDel, showAdd, showDelay, showBlock } = props;
+  const { showAdd, showDelay, showBlock } = props;
 
   const menuStyle = {
     color: '#000000',
-    backgroundColor: 'rgba(255,255,255,0.67)',
+    backgroundColor: 'rgba(255,255,255,1)',
   };
 
   return (
@@ -23,26 +23,28 @@ export default function ActionButtons(props) {
         color={'orange.500'}
       />
       <MenuList style={menuStyle}>
-        {showDel && (
-          <MenuItem icon={<FiMinus />} onClick={props.deleteHandler}>
-            Delete
-          </MenuItem>
-        )}
-        {showAdd && (
-          <MenuItem icon={<FiPlus />} onClick={props.addHandler}>
-            Event next
-          </MenuItem>
-        )}
-        {showDelay && (
-          <MenuItem icon={<FiClock />} onClick={props.delayHandler}>
-            Delay next
-          </MenuItem>
-        )}
-        {showBlock && (
-          <MenuItem icon={<FiMinusCircle />} onClick={props.blockHandler}>
-            Block next
-          </MenuItem>
-        )}
+        <MenuItem
+          icon={<FiPlus />}
+          onClick={props.addHandler}
+          isDisabled={!showAdd}
+        >
+          Event next
+        </MenuItem>
+
+        <MenuItem
+          icon={<FiClock />}
+          onClick={props.delayHandler}
+          isDisabled={!showDelay}
+        >
+          Delay next
+        </MenuItem>
+        <MenuItem
+          icon={<FiMinusCircle />}
+          onClick={props.blockHandler}
+          isDisabled={!showBlock}
+        >
+          Block next
+        </MenuItem>
       </MenuList>
     </Menu>
   );

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

@@ -11,7 +11,6 @@ import DeleteIconBtn from '../../../common/components/buttons/DeleteIconBtn';
 
 export default function EventBlock(props) {
   const { data, selected, next, delay, index, eventsHandler } = props;
-  const [visible, setVisible] = useState(false);
 
   const [more, setMore] = useState(false);
 
@@ -53,6 +52,11 @@ export default function EventBlock(props) {
     updateValues('presenter', v);
   };
 
+  const handleVisibleToggle = (v) => {
+    // setVisible(previousState => !previousState);
+    updateValues('isPublic', !data.isPublic);
+  };
+
   return (
     <div className={selected ? style.eventRowActive : style.eventRow}>
       <span className={style.drag}>
@@ -110,8 +114,8 @@ export default function EventBlock(props) {
       </div>
       <div className={style.actionOverlay}>
         <VisibleIconBtn
-          clickhandler={() => setVisible(!visible)}
-          active={visible || undefined}
+          clickhandler={handleVisibleToggle}
+          active={data.isPublic}
         />
         <DeleteIconBtn clickhandler={deleteHandler} />
         <ActionButtons

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

@@ -5,6 +5,7 @@ import { useSocket } from '../../../app/context/socketContext';
 import tinykeys from 'tinykeys';
 import Empty from '../../../common/state/Empty';
 import EventListItem from './EventListItem';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export default function EventList(props) {
   const { events, eventsHandler } = props;
@@ -78,14 +79,38 @@ export default function EventList(props) {
     return <Empty text='No Events' />;
   }
 
+  // motion
+  const cursorVariants = {
+    hidden: {
+      scale: 0,
+    },
+    visible: {
+      scale: 1,
+      transition: {
+        duration: 0.3,
+      },
+    },
+    exit: {
+      scale: 0,
+    },
+  };
+
   console.log('EventList: events in event list', events);
   let cumulativeDelay = 0;
 
-  console.log('debug next id', next)
-
   return (
     <div className={style.eventContainer}>
-      {cursor === -1 && <div className={style.cursor} />}
+      <AnimatePresence>
+        {cursor === -1 && (
+          <motion.div
+            className={style.cursor}
+            variants={cursorVariants}
+            initial='hidden'
+            animate='visible'
+            exit='exit'
+          />
+        )}
+      </AnimatePresence>
 
       {events.map((e, index) => {
         if (e.type === 'delay') cumulativeDelay += e.duration;
@@ -101,7 +126,17 @@ export default function EventList(props) {
               eventsHandler={eventsHandler}
               delay={cumulativeDelay}
             />
-            {cursor === index && <div className={style.cursor} />}
+            <AnimatePresence>
+              {cursor === index && (
+                <motion.div
+                  className={style.cursor}
+                  variants={cursorVariants}
+                  initial='hidden'
+                  animate='visible'
+                  exit='exit'
+                />
+              )}
+            </AnimatePresence>
           </div>
         );
       })}

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

@@ -21,6 +21,7 @@ export default function EventListWrapper() {
     eventsNamespace,
     fetchAllEvents
   );
+
   const addEvent = useMutation(requestPost, {
     // we optimistically update here
     onMutate: async (newEvent) => {
@@ -29,10 +30,13 @@ export default function EventListWrapper() {
 
       // Snapshot the previous value
       let previousEvents = queryClient.getQueryData(eventsNamespace);
+      console.log('debug', previousEvents)
       if (previousEvents == null) {
-        await queryClient.refetchQueries();
+        refetch();
         previousEvents = queryClient.getQueryData(eventsNamespace);
       }
+      console.log('debug 2', previousEvents)
+
       // optimistically update object, temp ID until refetch
       let optimistic = [...previousEvents];
       optimistic.splice(newEvent.order, 0, {

client/src/features/editors/list/List.module.css

@@ -22,4 +22,6 @@
   background-color: #ff7597;
   border-radius: 2px;
   margin: 0 auto;
+  /* transition: 1s;
+  transition-property: all; */
 }