diff --git a/.env.development b/.env.development index 589f28a1..cf60c666 100644 --- a/.env.development +++ b/.env.development @@ -1,3 +1,3 @@ #REACT_APP_API_HOST=http://localhost:3334/ -REACT_APP_API_HOST=https://pig.vault48.org/ -REACT_APP_REMOTE_CURRENT=https://pig.vault48.org/static/ +REACT_APP_API_HOST=https://pig.staging.vault48.org/ +REACT_APP_REMOTE_CURRENT=https://pig.staging.vault48.org/static/ diff --git a/src/components/common/MenuDots/index.tsx b/src/components/common/MenuDots/index.tsx new file mode 100644 index 00000000..09671742 --- /dev/null +++ b/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 = ({ ...rest }) => ( + +); + +export { MenuDots }; diff --git a/src/components/flow/FlowCell/index.tsx b/src/components/flow/FlowCell/index.tsx index 8e908ee1..107b21e8 100644 --- a/src/components/flow/FlowCell/index.tsx +++ b/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 = ({ 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 = ({ setViewSingle, toggleViewDescription, } = useFlowCellControls(id, text, flow, onChangeCellView); + const { isActive: isMenuActive, activate, ref, deactivate } = useClickOutsideFocus(); return ( -
- {canEdit && ( +
+ {canEdit && !isMenuActive && (
+ +
+ )} + + {canEdit && isMenuActive && ( +
= ({ />
)} + {withText && ( {title}}> diff --git a/src/components/flow/FlowCell/styles.module.scss b/src/components/flow/FlowCell/styles.module.scss index 370d061d..57b14f20 100644 --- a/src/components/flow/FlowCell/styles.module.scss +++ b/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; + } + } +} diff --git a/src/components/flow/FlowCellMenu/index.tsx b/src/components/flow/FlowCellMenu/index.tsx index dd6a7874..78cc8b32 100644 --- a/src/components/flow/FlowCellMenu/index.tsx +++ b/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 = ({ + onClose, hasDescription, toggleViewDescription, + descriptionEnabled, setViewSingle, setViewHorizontal, setViewVertical, setViewQuadro, }) => { - const { onFocus, onBlur, focused } = useFocusEvent(); - const modifiers = usePopperModifiers(0, 10); - return ( - - +
+ {onClose && ( + + )} - - {({ ref, style }) => ( -
-
- {hasDescription && ( - <> - -
- - )} - - - - -
-
+
+
+ + + + +
+ + {hasDescription && ( + + + Текст + )} - - +
+
); }; diff --git a/src/components/flow/FlowCellMenu/styles.module.scss b/src/components/flow/FlowCellMenu/styles.module.scss index ffd5da55..b59f7318 100644 --- a/src/components/flow/FlowCellMenu/styles.module.scss +++ b/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; +} diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx index 6af28ff2..4bcdf6ef 100644 --- a/src/components/flow/FlowGrid/index.tsx +++ b/src/components/flow/FlowGrid/index.tsx @@ -30,7 +30,7 @@ export const FlowGrid: FC = ({ 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} diff --git a/src/components/input/Toggle/index.tsx b/src/components/input/Toggle/index.tsx index f36ee358..bb591012 100644 --- a/src/components/input/Toggle/index.tsx +++ b/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 & { value?: boolean; handler?: (val: boolean) => void; color?: ToggleColor; -} +}; -const Toggle: FC = ({ value, handler, color = 'primary' }) => { +const Toggle: FC = ({ value, handler, color = 'primary', ...rest }) => { const onClick = useCallback(() => { if (!handler) { return; @@ -21,8 +22,14 @@ const Toggle: FC = ({ value, handler, color = 'primary' }) => { return (