added flow menus

src/components/flow/Cell/index.tsx

@@ -38,7 +38,6 @@ const Cell: FC<IProps> = ({
   }, [setIsLoaded]);
 
   const has_description = description && description.length > 32;
-
   const text =
     (type === NODE_TYPES.TEXT && description) ||
     (flow && flow.show_description && has_description && description) ||

src/components/flow/FlowCell/index.tsx

@@ -3,47 +3,84 @@ import styles from './styles.module.scss';
 import { NavLink } from 'react-router-dom';
 import { CellShade } from '~/components/flow/CellShade';
 import { FlowCellImage } from '~/components/flow/FlowCellImage';
-import { FlowDisplayVariant } from '~/redux/types';
+import { FlowDisplay, FlowDisplayVariant, INode } from '~/redux/types';
 import { FlowCellText } from '~/components/flow/FlowCellText';
 import classNames from 'classnames';
+import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
+import { useFlowCellControls } from '~/utils/hooks/flow/useFlowCellControls';
 
 interface Props {
+  id: INode['id'];
   to: string;
   title: string;
   image?: string;
   color?: string;
   text?: string;
-  display?: FlowDisplayVariant;
+  flow: FlowDisplay;
+  canEdit?: boolean;
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
 }
 
-const FlowCell: FC<Props> = ({ color, to, image, display = 'single', text, title }) => {
-  const withText = ((!!display && display !== 'single') || !image) && !!text;
+const FlowCell: FC<Props> = ({
+  id,
+  color,
+  to,
+  image,
+  flow,
+  text,
+  title,
+  canEdit,
+  onChangeCellView,
+}) => {
+  const withText = ((!!flow.display && flow.display !== 'single') || !image) && !!text;
+  const {
+    hasDescription,
+    setViewHorizontal,
+    setViewVertical,
+    setViewQuadro,
+    setViewSingle,
+    toggleViewDescription,
+  } = useFlowCellControls(id, text, flow, onChangeCellView);
 
   return (
-    <NavLink className={classNames(styles.cell, styles[display || 'single'])} to={to}>
-      {withText && (
-        <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
-          {text!}
-        </FlowCellText>
-      )}
-
-      {image && (
-        <FlowCellImage
-          src={image}
-          height={400}
-          className={styles.thumb}
-          style={{ backgroundColor: color }}
-        />
-      )}
-
-      <CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
-
-      {!withText && (
-        <div className={styles.title_wrapper}>
-          <h4 className={styles.title}>{title}</h4>
+    <div className={classNames(styles.cell, styles[flow.display || 'single'])}>
+      {canEdit && (
+        <div className={styles.menu}>
+          <FlowCellMenu
+            hasDescription={hasDescription}
+            setViewHorizontal={setViewHorizontal}
+            setViewQuadro={setViewQuadro}
+            setViewSingle={setViewSingle}
+            setViewVertical={setViewVertical}
+            toggleViewDescription={toggleViewDescription}
+          />
         </div>
       )}
-    </NavLink>
+      <NavLink className={styles.link} to={to}>
+        {withText && (
+          <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>
+            {text!}
+          </FlowCellText>
+        )}
+
+        {image && (
+          <FlowCellImage
+            src={image}
+            height={400}
+            className={styles.thumb}
+            style={{ backgroundColor: color }}
+          />
+        )}
+
+        <CellShade color={color} className={styles.shade} size={withText ? 15 : 50} />
+
+        {!withText && (
+          <div className={styles.title_wrapper}>
+            <h4 className={styles.title}>{title}</h4>
+          </div>
+        )}
+      </NavLink>
+    </div>
   );
 };
 

src/components/flow/FlowCell/styles.module.scss

@@ -6,19 +6,9 @@
   position: relative;
   overflow: hidden;
   border-radius: $radius;
-  display: flex;
   width: 100%;
   height: 100%;
   background: $content_bg;
-  flex-direction: row;
-  color: inherit;
-  text-decoration: inherit;
-  font: inherit;
-  line-height: inherit;
-
-  &.vertical {
-    flex-direction: column-reverse;
-  }
 }
 
 .thumb {
@@ -95,3 +85,25 @@
     font: $font_18_semibold;
   }
 }
+
+.menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 6;
+}
+
+.link {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  color: inherit;
+  text-decoration: inherit;
+  font: inherit;
+  line-height: inherit;
+
+  &.vertical {
+    flex-direction: column-reverse;
+  }
+}

src/components/flow/FlowCellMenu/index.tsx

@@ -0,0 +1,67 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { Manager, Popper, Reference } from 'react-popper';
+import { useFocusEvent } from '~/utils/hooks/useFocusEvent';
+import classNames from 'classnames';
+import { usePopperModifiers } from '~/utils/hooks/usePopperModifiers';
+
+interface Props {
+  hasDescription: boolean;
+  toggleViewDescription: () => void;
+  setViewSingle: () => void;
+  setViewHorizontal: () => void;
+  setViewVertical: () => void;
+  setViewQuadro: () => void;
+}
+
+const FlowCellMenu: FC<Props> = ({
+  hasDescription,
+  toggleViewDescription,
+  setViewSingle,
+  setViewHorizontal,
+  setViewVertical,
+  setViewQuadro,
+}) => {
+  const { onFocus, onBlur, focused } = useFocusEvent();
+  const modifiers = usePopperModifiers(0, 10);
+
+  return (
+    <Manager>
+      <button className={styles.button} onFocus={onFocus} onBlur={onBlur}>
+        <Reference>
+          {({ ref }) => (
+            <div className={styles.dots} ref={ref}>
+              <Icon icon="menu" size={24} />
+            </div>
+          )}
+        </Reference>
+      </button>
+
+      <Popper placement="bottom" strategy="fixed" modifiers={modifiers}>
+        {({ ref, style }) => (
+          <div
+            ref={ref}
+            style={style}
+            className={classNames(styles.dropdown, { [styles.active]: focused })}
+          >
+            <div className={styles.menu}>
+              {hasDescription && (
+                <>
+                  <Icon icon="text" onMouseDown={toggleViewDescription} size={32} />
+                  <div className={styles.sep} />
+                </>
+              )}
+              <Icon icon="cell-single" onMouseDown={setViewSingle} size={32} />
+              <Icon icon="cell-double-h" onMouseDown={setViewHorizontal} size={32} />
+              <Icon icon="cell-double-v" onMouseDown={setViewVertical} size={32} />
+              <Icon icon="cell-quadro" onMouseDown={setViewQuadro} size={32} />
+            </div>
+          </div>
+        )}
+      </Popper>
+    </Manager>
+  );
+};
+
+export { FlowCellMenu };

src/components/flow/FlowCellMenu/styles.module.scss

@@ -0,0 +1,69 @@
+@import "~/styles/variables";
+
+.button {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  fill: white;
+  padding: 5px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.dots {
+  @include blur($content_bg, 5px, 0.7);
+
+  padding: 5px 0 0 0;
+  background: $content_bg;
+  border-radius: $radius;
+  width: 20px;
+  height: 32px;
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    opacity: 0.5;
+    transition: opacity 0.25s;
+
+    :hover > & {
+      opacity: 1;
+    }
+  }
+}
+
+.dropdown {
+  @include dropdown_shadow;
+  @include blur($red, 15px, 0.3);
+
+  border-radius: $radius;
+  padding: $gap;
+  visibility: hidden;
+
+  &.active {
+    visibility: visible;
+  }
+}
+
+.menu {
+  display: grid;
+  grid-auto-flow: row;
+  fill: white;
+  grid-row-gap: $gap;
+
+  svg {
+    fill: white;
+    stroke: white;
+    cursor: pointer;
+  }
+}
+
+.sep {
+  @include outer_shadow;
+  height: 1px;
+}

src/components/flow/FlowGrid/index.tsx

@@ -1,17 +1,18 @@
 import React, { FC, Fragment } from 'react';
 
 import { IFlowState } from '~/redux/flow/reducer';
-import { INode } from '~/redux/types';
+import { FlowDisplay, INode } from '~/redux/types';
 import { IUser } from '~/redux/auth/types';
 import { PRESETS, URLS } from '~/constants/urls';
 import { FlowCell } from '~/components/flow/FlowCell';
 import classNames from 'classnames';
 import styles from './styles.module.scss';
 import { getURLFromString } from '~/utils/dom';
+import { canEditNode } from '~/utils/node';
 
 type IProps = Partial<IFlowState> & {
   user: Partial<IUser>;
-  onChangeCellView: (id: INode['id'], flow: INode['flow']) => void;
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
 };
 
 export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
@@ -24,12 +25,15 @@ export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
       {nodes.map(node => (
         <div className={classNames(styles.cell, styles[node.flow.display])} key={node.id}>
           <FlowCell
+            id={node.id}
             color={node.flow.dominant_color}
             to={URLS.NODE_URL(node.id)}
             image={getURLFromString(node.thumbnail, PRESETS.cover)}
-            display={node.flow.display}
+            flow={node.flow}
             text={node.flow.show_description ? node.description : ''}
             title={node.title}
+            canEdit={canEditNode(node, user)}
+            onChangeCellView={onChangeCellView}
           />
         </div>
       ))}