added flow display controls overlay

.env.development

@@ -1,3 +1,3 @@
 #REACT_APP_API_HOST=http://localhost:3334/
-REACT_APP_API_HOST=https://pig.vault48.org/
+REACT_APP_API_HOST=https://pig.staging.vault48.org/
-REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/
+REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/

src/components/common/MenuDots/index.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import styles from '~/components/flow/FlowCell/styles.module.scss';
+import { Icon } from '~/components/input/Icon';
+import { ButtonProps } from '~/utils/types';
+import classNames from 'classnames';
+
+interface Props extends ButtonProps {}
+
+const MenuDots: FC<Props> = ({ ...rest }) => (
+  <button {...rest} className={classNames(styles.button, rest.className)}>
+    <div className={styles.dots}>
+      <Icon icon="menu" size={24} />
+    </div>
+  </button>
+);
+
+export { MenuDots };

src/components/flow/FlowCell/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useState } from 'react';
 import styles from './styles.module.scss';
 import { NavLink } from 'react-router-dom';
 import { CellShade } from '~/components/flow/CellShade';
@@ -8,6 +8,10 @@ import { FlowCellText } from '~/components/flow/FlowCellText';
 import classNames from 'classnames';
 import { FlowCellMenu } from '~/components/flow/FlowCellMenu';
 import { useFlowCellControls } from '~/utils/hooks/flow/useFlowCellControls';
+import { Icon } from '~/components/input/Icon';
+import { useFocusEvent } from '~/utils/hooks/useFocusEvent';
+import { useClickOutsideFocus } from '~/utils/hooks/useClickOutsideFocus';
+import { MenuDots } from '~/components/common/MenuDots';
 
 interface Props {
   id: INode['id'];
@@ -29,10 +33,11 @@ const FlowCell: FC<Props> = ({
   flow,
   text,
   title,
-  canEdit,
+  canEdit = false,
   onChangeCellView,
 }) => {
-  const withText = ((!!flow.display && flow.display !== 'single') || !image) && !!text;
+  const withText =
+    ((!!flow.display && flow.display !== 'single') || !image) && flow.show_description && !!text;
   const {
     hasDescription,
     setViewHorizontal,
@@ -41,12 +46,22 @@ const FlowCell: FC<Props> = ({
     setViewSingle,
     toggleViewDescription,
   } = useFlowCellControls(id, text, flow, onChangeCellView);
+  const { isActive: isMenuActive, activate, ref, deactivate } = useClickOutsideFocus();
 
   return (
-    <div className={classNames(styles.cell, styles[flow.display || 'single'])}>
+    <div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>
-      {canEdit && (
+      {canEdit && !isMenuActive && (
         <div className={styles.menu}>
+          <MenuDots onClick={activate} />
+        </div>
+      )}
+
+      {canEdit && isMenuActive && (
+        <div className={styles.display_modal}>
           <FlowCellMenu
+            onClose={deactivate}
+            currentView={flow.display}
+            descriptionEnabled={flow.show_description}
             hasDescription={hasDescription}
             setViewHorizontal={setViewHorizontal}
             setViewQuadro={setViewQuadro}
@@ -56,6 +71,7 @@ const FlowCell: FC<Props> = ({
           />
         </div>
       )}
+
       <NavLink className={styles.link} to={to}>
         {withText && (
           <FlowCellText className={styles.text} heading={<h4 className={styles.title}>{title}</h4>}>

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

@@ -107,3 +107,51 @@
     flex-direction: column-reverse;
   }
 }
+
+.display_modal {
+  @include appear;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 11;
+}
+
+.button {
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-end;
+  fill: white;
+  padding: 7px;
+  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: 18px;
+  height: 30px;
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    opacity: 0.5;
+    transition: opacity 0.25s;
+
+    :hover > & {
+      opacity: 1;
+    }
+  }
+}

src/components/flow/FlowCellMenu/index.tsx

@@ -1,12 +1,15 @@
 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';
+import { Toggle } from '~/components/input/Toggle';
+import { Group } from '~/components/containers/Group';
+import { FlowDisplayVariant } from '~/redux/types';
 
 interface Props {
+  onClose: () => void;
+  currentView: FlowDisplayVariant;
+  descriptionEnabled: boolean;
   hasDescription: boolean;
   toggleViewDescription: () => void;
   setViewSingle: () => void;
@@ -16,51 +19,51 @@ interface Props {
 }
 
 const FlowCellMenu: FC<Props> = ({
+  onClose,
   hasDescription,
   toggleViewDescription,
+  descriptionEnabled,
   setViewSingle,
   setViewHorizontal,
   setViewVertical,
   setViewQuadro,
 }) => {
-  const { onFocus, onBlur, focused } = useFocusEvent();
-  const modifiers = usePopperModifiers(0, 10);
-
   return (
-    <Manager>
+    <div className={classNames(styles.dropdown)}>
-      <button className={styles.button} onFocus={onFocus} onBlur={onBlur}>
+      {onClose && (
-        <Reference>
+        <button className={styles.close} onClick={onClose} type="button">
-          {({ ref }) => (
+          <Icon icon="close" size={24} />
-            <div className={styles.dots} ref={ref}>
+        </button>
-              <Icon icon="menu" size={24} />
+      )}
-            </div>
-          )}
-        </Reference>
-      </button>
 
-      <Popper placement="bottom" strategy="fixed" modifiers={modifiers}>
+      <div className={styles.menu}>
-        {({ ref, style }) => (
+        <div className={styles.display}>
-          <div
+          <Icon icon="cell-single" onMouseDown={setViewSingle} size={48} />
-            ref={ref}
+          <Icon
-            style={style}
+            icon={descriptionEnabled ? 'cell-double-h-text' : 'cell-double-h'}
-            className={classNames(styles.dropdown, { [styles.active]: focused })}
+            onMouseDown={setViewHorizontal}
-          >
+            size={48}
-            <div className={styles.menu}>
+          />
-              {hasDescription && (
+          <Icon
-                <>
+            icon={descriptionEnabled ? 'cell-double-v-text' : 'cell-double-v'}
-                  <Icon icon="text" onMouseDown={toggleViewDescription} size={32} />
+            onMouseDown={setViewVertical}
-                  <div className={styles.sep} />
+            size={48}
-                </>
+          />
-              )}
+          <Icon
-              <Icon icon="cell-single" onMouseDown={setViewSingle} size={32} />
+            icon={descriptionEnabled ? 'cell-quadro-text' : 'cell-quadro'}
-              <Icon icon="cell-double-h" onMouseDown={setViewHorizontal} size={32} />
+            onMouseDown={setViewQuadro}
-              <Icon icon="cell-double-v" onMouseDown={setViewVertical} size={32} />
+            size={48}
-              <Icon icon="cell-quadro" onMouseDown={setViewQuadro} size={32} />
+          />
-            </div>
+        </div>
-          </div>
+
+        {hasDescription && (
+          <Group className={styles.description} horizontal onClick={toggleViewDescription}>
+            <Toggle color="white" value={descriptionEnabled} />
+            <span>Текст</span>
+          </Group>
         )}
-      </Popper>
+      </div>
-    </Manager>
+    </div>
   );
 };
 

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

@@ -1,53 +1,16 @@
 @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 outer_shadow;
   @include blur($red, 15px, 0.3);
 
+  width: 100%;
+  height: 100%;
   border-radius: $radius;
   padding: $gap;
-  visibility: hidden;
+  display: flex;
-
+  align-items: center;
-  &.active {
+  justify-content: center;
-    visibility: visible;
-  }
 }
 
 .menu {
@@ -67,3 +30,35 @@
   @include outer_shadow;
   height: 1px;
 }
+
+.display {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: $gap;
+  grid-column-gap: $gap;
+}
+
+.description {
+  margin-top: $gap;
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  padding: 0 4px;
+
+  span {
+    flex: 1;
+    text-align: right;
+  }
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/components/flow/FlowGrid/index.tsx

@@ -30,7 +30,7 @@ export const FlowGrid: FC<IProps> = ({ user, nodes, onChangeCellView }) => {
             to={URLS.NODE_URL(node.id)}
             image={getURLFromString(node.thumbnail, PRESETS.cover)}
             flow={node.flow}
-            text={node.flow.show_description ? node.description : ''}
+            text={node.description}
             title={node.title}
             canEdit={canEditNode(node, user)}
             onChangeCellView={onChangeCellView}

src/components/input/Toggle/index.tsx

@@ -1,16 +1,17 @@
 import React, { FC, useCallback } from 'react';
 import styles from './styles.module.scss';
 import classNames from 'classnames';
+import { ButtonProps, DivProps } from '~/utils/types';
 
-type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger';
+type ToggleColor = 'primary' | 'secondary' | 'lab' | 'danger' | 'white';
 
-interface IProps {
+type IProps = Omit<ButtonProps, 'value' | 'color'> & {
   value?: boolean;
   handler?: (val: boolean) => void;
   color?: ToggleColor;
-}
+};
 
-const Toggle: FC<IProps> = ({ value, handler, color = 'primary' }) => {
+const Toggle: FC<IProps> = ({ value, handler, color = 'primary', ...rest }) => {
   const onClick = useCallback(() => {
     if (!handler) {
       return;
@@ -21,8 +22,14 @@ const Toggle: FC<IProps> = ({ value, handler, color = 'primary' }) => {
 
   return (
     <button
+      {...rest}
       type="button"
-      className={classNames(styles.toggle, { [styles.active]: value }, styles[color])}
+      className={classNames(
+        styles.toggle,
+        { [styles.active]: value },
+        styles[color],
+        rest.className
+      )}
       onClick={onClick}
     />
   );

src/components/input/Toggle/styles.module.scss

@@ -12,6 +12,19 @@
   cursor: pointer;
   position: relative;
 
+  &.white {
+    box-shadow: inset white 0 0 0 2px;
+
+    &::after {
+      width: 14px;
+      height: 14px;
+      top: 5px;
+      left: 5px;
+      background: none;
+      box-shadow: inset white 0 0 0 2px;
+    }
+  }
+
   &::after {
     content: ' ';
     position: absolute;
@@ -26,7 +39,6 @@
   }
 
   &.active {
-
     &::after {
       transform: translate(24px, 0);
       background-color: white;
@@ -47,5 +59,9 @@
     &.danger {
       background-color: $red;
     }
+
+    &.monochrome {
+      background-color: white;
+    }
   }
 }

src/sprites/Sprites.tsx

@@ -14,27 +14,92 @@ const Sprites: FC = () => (
       </pattern>
     </defs>
 
-    <g id="cell-single" stroke="none" transform="translate(2 2)">
+    <g id="cell-single" stroke="none">
-      <path d="M0,0 L9,0 L9,9 L0,9 L0,0 Z" fill="url(#pattern_stripes)" />
+      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z" />
+      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z" />
+      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H9C10.1046 11 11 10.1046 11 9V4C11 2.89543 10.1046 2 9 2H4ZM4 8H7C7.55228 8 8 8.44772 8 9C8 9.55228 7.55228 10 7 10H4C3.44772 10 3 9.55228 3 9C3 8.44772 3.44772 8 4 8Z"
+        fill="currentColor"
+        stroke="none"
+      />
     </g>
 
-    <g id="cell-double-h" stroke="none" transform="translate(2 2)">
+    <g id="cell-double-h" stroke="none">
-      <path d="M0,0 L19,0 L19,9 L0,9 L0,0 Z" fill="url(#pattern_stripes)" />
+      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M11,11 L20,11 L20,20 L11,20 L11,11 Z M12,12 L12,19 L19,19 L19,12 L12,12 Z" />
+      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M0,11 L9,11 L9,20 L0,20 L0,11 Z M1,12 L1,19 L8,19 L8,12 L1,12 Z" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H20C21.1046 11 22 10.1046 22 9V4C22 2.89543 21.1046 2 20 2H4ZM4 8C3.44772 8 3 8.44772 3 9C3 9.55228 3.44772 10 4 10H7C7.55228 10 8 9.55228 8 9C8 8.44772 7.55228 8 7 8H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
     </g>
 
-    <g id="cell-double-v" stroke="none" transform="translate(2 2)">
+    <g id="cell-double-h-text" stroke="none">
-      <path d="M0,0 L9,0 L9,19 L0,19 L0,0 Z" fill="url(#pattern_stripes)" />
+      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <path d="M11,0 L20,0 L20,9 L11,9 L11,0 Z M12,1 L12,8 L19,8 L19,1 L12,1 Z" />
+      <rect x="2.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
-      <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
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V9C2 10.1046 2.89543 11 4 11H20C21.1046 11 22 10.1046 22 9V4C22 2.89543 21.1046 2 20 2H4ZM4 3C3.44772 3 3 3.44772 3 4V9C3 9.55228 3.44772 10 4 10H10C10.5523 10 11 9.55228 11 9V4C11 3.44772 10.5523 3 10 3H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect x="4" y="4" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="6" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="8" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
     </g>
 
-    <g id="cell-quadro" stroke="none" transform="translate(2 2)">
+    <g id="cell-double-v" stroke="none">
-      <path d="M0,0 L19,0 L19,19 L0,19 L0,0 Z" fill="url(#pattern_stripes)" />
+      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20V4C11 2.89543 10.1046 2 9 2H4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H7C7.55228 21 8 20.5523 8 20C8 19.4477 7.55228 19 7 19H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
+    </g>
+    <g id="cell-double-v-text" stroke="none">
+      <rect x="13.5" y="13.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <rect x="13.5" y="2.5" width="8" height="8" rx="1.5" stroke="currentColor" fill="none" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H9C10.1046 22 11 21.1046 11 20V4C11 2.89543 10.1046 2 9 2H4ZM4 14C3.44772 14 3 14.4477 3 15V20C3 20.5523 3.44772 21 4 21H9C9.55228 21 10 20.5523 10 20V15C10 14.4477 9.55228 14 9 14H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect x="4" y="15" width="3" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="17" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="19" width="5" height="1" rx="0.5" fill="currentColor" stroke="none" />
+    </g>
+
+    <g id="cell-quadro" stroke="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V4C22 2.89543 21.1046 2 20 2H4ZM4 19C3.44772 19 3 19.4477 3 20C3 20.5523 3.44772 21 4 21H12C12.5523 21 13 20.5523 13 20C13 19.4477 12.5523 19 12 19H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
+    </g>
+    <g id="cell-quadro-text" stroke="none">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4 2C2.89543 2 2 2.89543 2 4V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V4C22 2.89543 21.1046 2 20 2H4ZM4 14C3.44772 14 3 14.4477 3 15V20C3 20.5523 3.44772 21 4 21H10C10.5523 21 11 20.5523 11 20V15C11 14.4477 10.5523 14 10 14H4Z"
+        fill="currentColor"
+        stroke="none"
+      />
+      <rect x="4" y="15" width="4" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="17" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
+      <rect x="4" y="19" width="6" height="1" rx="0.5" fill="currentColor" stroke="none" />
     </g>
 
     <g id="play">

src/styles/variables.scss

@@ -312,3 +312,12 @@ $sidebar_border: transparentize(white, 0.95);
     grid-auto-rows: 50vw;
   }
 }
+
+@mixin appear {
+  @keyframes __appear {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  animation: __appear 0.25s forwards;
+}

src/utils/hooks/flow/useFlowCellControls.ts

@@ -9,7 +9,7 @@ export const useFlowCellControls = (
 ) => {
   const onChange = useCallback(
     (value: Partial<FlowDisplay>) => onChangeCellView(id, { ...flow, ...value }),
-    []
+    [flow, onChangeCellView]
   );
 
   const hasDescription = !!description && description.length > 32;
@@ -17,23 +17,23 @@ export const useFlowCellControls = (
   const toggleViewDescription = useCallback(() => {
     const show_description = !(flow && flow.show_description);
     onChange({ show_description });
-  }, [id, flow, onChange]);
+  }, [flow, onChange]);
 
   const setViewSingle = useCallback(() => {
     onChange({ display: 'single' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   const setViewHorizontal = useCallback(() => {
     onChange({ display: 'horizontal' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   const setViewVertical = useCallback(() => {
     onChange({ display: 'vertical' });
-  }, [id, flow]);
+  }, [onChange]);
 
   const setViewQuadro = useCallback(() => {
     onChange({ display: 'quadro' });
-  }, [id, flow, onChange]);
+  }, [onChange]);
 
   return {
     hasDescription,

src/utils/hooks/useClickOutsideFocus.ts

@@ -0,0 +1,30 @@
+/**
+ * Handles blur by detecting clicks outside refs.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export const useClickOutsideFocus = () => {
+  const ref = useRef<HTMLElement>();
+  const [isActive, setIsActive] = useState(false);
+
+  const activate = useCallback(() => setIsActive(true), [setIsActive]);
+  const deactivate = useCallback(() => setIsActive(false), [setIsActive]);
+
+  useEffect(() => {
+    if (!isActive || !ref.current) {
+      return;
+    }
+
+    const deactivator = (event: MouseEvent) => {
+      if (!ref.current?.contains(event.target as Node)) {
+        deactivate();
+      }
+    };
+
+    document.addEventListener('mouseup', deactivator);
+
+    return () => document.removeEventListener('mouseup', deactivator);
+  }, [isActive]);
+
+  return { ref, isActive, activate, deactivate };
+};

src/utils/types.ts

@@ -11,3 +11,8 @@ export type IMGProps = React.DetailedHTMLProps<
   React.ImgHTMLAttributes<HTMLImageElement>,
   HTMLImageElement
 >;
+
+export type ButtonProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+>;