mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-06-25 19:18:29 +07:00
added flow display controls overlay
This commit is contained in:
Fedor Katurov
parent
c8204a41a2
commit
5fef4bc804
14 changed files with 327 additions and 116 deletions
17
src/components/common/MenuDots/index.tsx
Normal file
17
src/components/common/MenuDots/index.tsx
Normal file
|
|
@ -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 };
|
||||
|
|
@ -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>}>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue