added flow display controls overlay

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'])}>
-      {canEdit && (
+    <div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>
+      {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>
-      <button className={styles.button} onFocus={onFocus} onBlur={onBlur}>
-        <Reference>
-          {({ ref }) => (
-            <div className={styles.dots} ref={ref}>
-              <Icon icon="menu" size={24} />
-            </div>
-          )}
-        </Reference>
-      </button>
+    <div className={classNames(styles.dropdown)}>
+      {onClose && (
+        <button className={styles.close} onClick={onClose} type="button">
+          <Icon icon="close" size={24} />
+        </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>
+      <div className={styles.menu}>
+        <div className={styles.display}>
+          <Icon icon="cell-single" onMouseDown={setViewSingle} size={48} />
+          <Icon
+            icon={descriptionEnabled ? 'cell-double-h-text' : 'cell-double-h'}
+            onMouseDown={setViewHorizontal}
+            size={48}
+          />
+          <Icon
+            icon={descriptionEnabled ? 'cell-double-v-text' : 'cell-double-v'}
+            onMouseDown={setViewVertical}
+            size={48}
+          />
+          <Icon
+            icon={descriptionEnabled ? 'cell-quadro-text' : 'cell-quadro'}
+            onMouseDown={setViewQuadro}
+            size={48}
+          />
+        </div>
+
+        {hasDescription && (
+          <Group className={styles.description} horizontal onClick={toggleViewDescription}>
+            <Toggle color="white" value={descriptionEnabled} />
+            <span>Текст</span>
+          </Group>
         )}
-      </Popper>
-    </Manager>
+      </div>
+    </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;
-
-  &.active {
-    visibility: visible;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .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}