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;
 }

src/components/flow/FlowGrid/index.tsx

@@ -4,31 +4,31 @@ import { Cell } from '~/components/flow/Cell';
 import * as styles from './styles.scss';
 import { IFlowState } from '~/redux/flow/reducer';
 import { INode } from '~/redux/types';
+import { canEditNode } from '~/utils/node';
+import { IUser } from '~/redux/auth/types';
+import { flowSetCellView } from '~/redux/flow/actions';
 
 type IProps = Partial<IFlowState> & {
+  user: Partial<IUser>;
   onSelect: (id: INode['id'], type: INode['type']) => void;
+  onChangeCellView: typeof flowSetCellView;
 };
 
-export const FlowGrid: FC<IProps> = ({ nodes, onSelect }) => (
+export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => (
   <div>
     <div className={styles.grid_test}>
       <div className={styles.hero}>HERO</div>
       <div className={styles.stamp}>STAMP</div>
 
       {nodes.map(node => (
-        <Cell key={node.id} node={node} onSelect={onSelect} />
+        <Cell
+          key={node.id}
+          node={node}
+          onSelect={onSelect}
+          can_edit={canEditNode(node, user)}
+          onChangeCellView={onChangeCellView}
+        />
       ))}
     </div>
   </div>
 );
-
-// {
-//   range(1, 20).map(el => (
-//     <Cell
-//       width={Math.floor(Math.random() * 2 + 1)}
-//       height={Math.floor(Math.random() * 2 + 1)}
-//       title={`Cell ${el}`}
-//       key={el}
-//     />
-//   ));
-// }

src/containers/flow/FlowLayout/index.tsx

@@ -3,15 +3,29 @@ import { connect } from 'react-redux';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
 import * as NODE_ACTIONS from '~/redux/node/actions';
+import * as FLOW_ACTIONS from '~/redux/flow/actions';
+import pick from 'ramda/es/pick';
+import { selectUser } from '~/redux/auth/selectors';
 
-const mapStateToProps = selectFlow;
+const mapStateToProps = state => ({
+  flow: pick(['nodes'], selectFlow(state)),
+  user: pick(['role', 'id'], selectUser(state)),
+});
 
-const mapDispatchToProps = { nodeLoadNode: NODE_ACTIONS.nodeLoadNode };
+const mapDispatchToProps = {
+  nodeLoadNode: NODE_ACTIONS.nodeLoadNode,
+  flowSetCellView: FLOW_ACTIONS.flowSetCellView,
+};
 
 type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
 
-const FlowLayoutUnconnected: FC<IProps> = ({ nodes, nodeLoadNode }) => (
-  <FlowGrid nodes={nodes} onSelect={nodeLoadNode} />
+const FlowLayoutUnconnected: FC<IProps> = ({
+  flow: { nodes },
+  user,
+  nodeLoadNode,
+  flowSetCellView,
+}) => (
+  <FlowGrid nodes={nodes} onSelect={nodeLoadNode} user={user} onChangeCellView={flowSetCellView} />
 );
 
 const FlowLayout = connect(

src/redux/flow/actions.ts

@@ -1,7 +1,14 @@
 import { FLOW_ACTIONS } from './constants';
 import { IFlowState } from './reducer';
+import { INode } from '../types';
 
 export const flowSetNodes = (nodes: IFlowState['nodes']) => ({
   nodes,
   type: FLOW_ACTIONS.SET_NODES,
 });
+
+export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({
+  type: FLOW_ACTIONS.SET_CELL_VIEW,
+  id,
+  flow,
+});

src/redux/flow/constants.ts

@@ -3,4 +3,5 @@ const prefix = 'FLOW.';
 export const FLOW_ACTIONS = {
   GET_FLOW: `${prefix}GET_FLOW`,
   SET_NODES: `${prefix}SET_NODES`,
+  SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`,
 };

src/sprites/Sprites.tsx

@@ -2,23 +2,39 @@ import React, { FC } from 'react';
 
 const Sprites: FC<{}> = () => (
   <svg width={0} height={0} viewBox="0 0 24 24">
+    <defs>
+      <pattern
+        id="pattern_stripes"
+        patternUnits="userSpaceOnUse"
+        width="4"
+        height="4"
+        patternTransform="rotate(45)"
+      >
+        <line x1="0" y="0" x2="0" y2="4" stroke="#222222" strokeWidth="3" />
+      </pattern>
+    </defs>
+
     <g id="cell-single" stroke="none" transform="translate(2 2)">
-      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z" />
+      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z" fill="url(#pattern_stripes)" />
       <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z" />
       <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z" />
       <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z" />
     </g>
 
-    <g id="cell-double-h" stroke="none">
-      <path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z" />
+    <g id="cell-double-h" stroke="none" transform="translate(2 2)">
+      <path d="M0,0 L19,0 L19,9 L0,9 L0,0 Z" fill="url(#pattern_stripes)" />
       <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z" />
       <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z" />
     </g>
 
-    <g id="cell-double-v" stroke="none">
-      <path d="M0,0 L20,0 L20,9 L0,9 L0,0 Z M1,1 L1,8 L19,8 L19,1 L1,1 Z" />
+    <g id="cell-double-v" stroke="none" transform="translate(2 2)">
+      <path d="M0,0 L9,0 L9,19 L0,19 L0,0 Z" fill="url(#pattern_stripes)" />
+      <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z" />
       <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z" />
-      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z" />
+    </g>
+
+    <g id="cell-quadro" stroke="none" transform="translate(2 2)">
+      <path d="M0,0 L19,0 L19,19 L0,19 L0,0 Z" fill="url(#pattern_stripes)" />
     </g>
 
     <g id="play">