set flow cell view actions

src/components/flow/Cell/index.tsx

@@ -5,14 +5,24 @@ import classNames from 'classnames';
 
 import * as styles from './styles.scss';
 import path from 'ramda/es/path';
+import { Icon } from '~/components/input/Icon';
+import { flowSetCellView } from '~/redux/flow/actions';
 
 interface IProps {
   node: INode;
-  onSelect: (id: INode['id'], type: INode['type']) => void;
   is_text?: boolean;
+  can_edit?: boolean;
+
+  onSelect: (id: INode['id'], type: INode['type']) => void;
+  onChangeCellView: typeof flowSetCellView;
 }
 
-const Cell: FC<IProps> = ({ node: { id, title, thumbnail, type, blocks }, onSelect }) => {
+const Cell: FC<IProps> = ({
+  node: { id, title, thumbnail, type, blocks, flow },
+  can_edit,
+  onSelect,
+  onChangeCellView,
+}) => {
   const [is_loaded, setIsLoaded] = useState(false);
 
   const onImageLoad = useCallback(() => {
@@ -23,14 +33,50 @@ const Cell: FC<IProps> = ({ node: { id, title, thumbnail, type, blocks }, onSele
 
   const text = path([0, 'text'], blocks);
 
+  const toggleViewDescription = useCallback(() => {
+    const show_description = flow && !flow.show_description;
+    const display = (flow && flow.display) || 'single';
+    onChangeCellView(id, { show_description, display });
+  }, [id, flow, onChangeCellView]);
+
+  const setViewSingle = useCallback(() => {
+    const show_description = flow && !!flow.show_description;
+    onChangeCellView(id, { show_description, display: 'single' });
+  }, [id, flow, onChangeCellView]);
+
+  const setViewHorizontal = useCallback(() => {
+    const show_description = flow && !!flow.show_description;
+    onChangeCellView(id, { show_description, display: 'horizontal' });
+  }, [id, flow, onChangeCellView]);
+
+  const setViewVertical = useCallback(() => {
+    const show_description = flow && !!flow.show_description;
+    onChangeCellView(id, { show_description, display: 'vertical' });
+  }, [id, flow, onChangeCellView]);
+
+  const setViewQuadro = useCallback(() => {
+    const show_description = flow && !!flow.show_description;
+    onChangeCellView(id, { show_description, display: 'quadro' });
+  }, [id, flow, onChangeCellView]);
+
   return (
     <div
-      className={classNames(styles.cell, 'vert-1', 'hor-1', { is_text: false })}
-      onClick={onClick}
+      className={classNames(styles.cell, (flow && flow.display) || 'single', { is_text: false })}
     >
-      <div className={styles.menu}>MENU</div>
+      {can_edit && (
+        <div className={styles.menu}>
+          <div className={styles.menu_content}>
+            <Icon icon="cell-single" onClick={toggleViewDescription} />
+            <div className={styles.menu_sep} />
+            <Icon icon="cell-single" onClick={setViewSingle} />
+            <Icon icon="cell-double-h" onClick={setViewHorizontal} />
+            <Icon icon="cell-double-v" onClick={setViewVertical} />
+            <Icon icon="cell-quadro" onClick={setViewQuadro} />
+          </div>
+        </div>
+      )}
 
-      <div className={styles.face}>
+      <div className={styles.face} onClick={onClick}>
         {title && <div className={styles.title}>{title}</div>}
         {text && <div className={styles.text}>{text}</div>}
       </div>

src/components/flow/Cell/styles.scss

@@ -137,15 +137,57 @@
 .menu {
   position: absolute;
   top: 0;
-  left: 0;
-  width: 100%;
-  height: 60px;
-  background: $content_bg;
+  right: 0;
+  height: 100%;
+  width: 80px;
   z-index: 4;
   border-radius: $radius;
   opacity: 0;
   pointer-events: none;
   touch-action: none;
   transition: opacity 0.5s;
-  display: none;
+  box-sizing: border-box;
+  // display: none;
+  padding: $gap;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.menu_content {
+  flex: 1;
+  // height: 100%;
+  background: $red_gradient;
+  padding: 60px $gap $gap $gap;
+  border-radius: $radius;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  flex-direction: column;
+
+  & > * {
+    margin-top: $gap;
+    opacity: 0.5;
+    transition: opacity 0.25s;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  svg {
+    fill: #222222;
+    width: 30px;
+    height: 30px;
+  }
+}
+
+.menu_sep {
+  width: 20px;
+  height: 2px;
+  flex: 0 0 4px;
+  background-color: #222222;
+  opacity: 0.2;
+  border-radius: 2px;
 }