diff --git a/src/components/flow/Cell/index.tsx b/src/components/flow/Cell/index.tsx index 28bc34b9..a3954be3 100644 --- a/src/components/flow/Cell/index.tsx +++ b/src/components/flow/Cell/index.tsx @@ -5,14 +5,24 @@ import classNames from 'classnames'; import * as styles from './styles.scss'; import path from 'ramda/es/path'; +import { Icon } from '~/components/input/Icon'; +import { flowSetCellView } from '~/redux/flow/actions'; interface IProps { node: INode; - onSelect: (id: INode['id'], type: INode['type']) => void; is_text?: boolean; + can_edit?: boolean; + + onSelect: (id: INode['id'], type: INode['type']) => void; + onChangeCellView: typeof flowSetCellView; } -const Cell: FC = ({ node: { id, title, thumbnail, type, blocks }, onSelect }) => { +const Cell: FC = ({ + node: { id, title, thumbnail, type, blocks, flow }, + can_edit, + onSelect, + onChangeCellView, +}) => { const [is_loaded, setIsLoaded] = useState(false); const onImageLoad = useCallback(() => { @@ -23,14 +33,50 @@ const Cell: FC = ({ node: { id, title, thumbnail, type, blocks }, onSele const text = path([0, 'text'], blocks); + const toggleViewDescription = useCallback(() => { + const show_description = flow && !flow.show_description; + const display = (flow && flow.display) || 'single'; + onChangeCellView(id, { show_description, display }); + }, [id, flow, onChangeCellView]); + + const setViewSingle = useCallback(() => { + const show_description = flow && !!flow.show_description; + onChangeCellView(id, { show_description, display: 'single' }); + }, [id, flow, onChangeCellView]); + + const setViewHorizontal = useCallback(() => { + const show_description = flow && !!flow.show_description; + onChangeCellView(id, { show_description, display: 'horizontal' }); + }, [id, flow, onChangeCellView]); + + const setViewVertical = useCallback(() => { + const show_description = flow && !!flow.show_description; + onChangeCellView(id, { show_description, display: 'vertical' }); + }, [id, flow, onChangeCellView]); + + const setViewQuadro = useCallback(() => { + const show_description = flow && !!flow.show_description; + onChangeCellView(id, { show_description, display: 'quadro' }); + }, [id, flow, onChangeCellView]); + return (
-
MENU
+ {can_edit && ( +
+
+ +
+ + + + +
+
+ )} -
+
{title &&
{title}
} {text &&
{text}
}
diff --git a/src/components/flow/Cell/styles.scss b/src/components/flow/Cell/styles.scss index 6ea16ac5..4361e35a 100644 --- a/src/components/flow/Cell/styles.scss +++ b/src/components/flow/Cell/styles.scss @@ -137,15 +137,57 @@ .menu { position: absolute; top: 0; - left: 0; - width: 100%; - height: 60px; - background: $content_bg; + right: 0; + height: 100%; + width: 80px; z-index: 4; border-radius: $radius; opacity: 0; pointer-events: none; touch-action: none; transition: opacity 0.5s; - display: none; + box-sizing: border-box; + // display: none; + padding: $gap; + display: flex; + align-items: stretch; + justify-content: center; +} + +.menu_content { + flex: 1; + // height: 100%; + background: $red_gradient; + padding: 60px $gap $gap $gap; + border-radius: $radius; + display: flex; + align-items: center; + justify-content: center; + display: flex; + flex-direction: column; + + & > * { + margin-top: $gap; + opacity: 0.5; + transition: opacity 0.25s; + + &:hover { + opacity: 1; + } + } + + svg { + fill: #222222; + width: 30px; + height: 30px; + } +} + +.menu_sep { + width: 20px; + height: 2px; + flex: 0 0 4px; + background-color: #222222; + opacity: 0.2; + border-radius: 2px; } diff --git a/src/components/flow/FlowGrid/index.tsx b/src/components/flow/FlowGrid/index.tsx index b8d8849e..23bbe28b 100644 --- a/src/components/flow/FlowGrid/index.tsx +++ b/src/components/flow/FlowGrid/index.tsx @@ -4,31 +4,31 @@ import { Cell } from '~/components/flow/Cell'; import * as styles from './styles.scss'; import { IFlowState } from '~/redux/flow/reducer'; import { INode } from '~/redux/types'; +import { canEditNode } from '~/utils/node'; +import { IUser } from '~/redux/auth/types'; +import { flowSetCellView } from '~/redux/flow/actions'; type IProps = Partial & { + user: Partial; onSelect: (id: INode['id'], type: INode['type']) => void; + onChangeCellView: typeof flowSetCellView; }; -export const FlowGrid: FC = ({ nodes, onSelect }) => ( +export const FlowGrid: FC = ({ user, nodes, onSelect, onChangeCellView }) => (
HERO
STAMP
{nodes.map(node => ( - + ))}
); - -// { -// range(1, 20).map(el => ( -// -// )); -// } diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/containers/flow/FlowLayout/index.tsx index 317b6289..a87ccb44 100644 --- a/src/containers/flow/FlowLayout/index.tsx +++ b/src/containers/flow/FlowLayout/index.tsx @@ -3,15 +3,29 @@ import { connect } from 'react-redux'; import { FlowGrid } from '~/components/flow/FlowGrid'; import { selectFlow } from '~/redux/flow/selectors'; import * as NODE_ACTIONS from '~/redux/node/actions'; +import * as FLOW_ACTIONS from '~/redux/flow/actions'; +import pick from 'ramda/es/pick'; +import { selectUser } from '~/redux/auth/selectors'; -const mapStateToProps = selectFlow; +const mapStateToProps = state => ({ + flow: pick(['nodes'], selectFlow(state)), + user: pick(['role', 'id'], selectUser(state)), +}); -const mapDispatchToProps = { nodeLoadNode: NODE_ACTIONS.nodeLoadNode }; +const mapDispatchToProps = { + nodeLoadNode: NODE_ACTIONS.nodeLoadNode, + flowSetCellView: FLOW_ACTIONS.flowSetCellView, +}; type IProps = ReturnType & typeof mapDispatchToProps & {}; -const FlowLayoutUnconnected: FC = ({ nodes, nodeLoadNode }) => ( - +const FlowLayoutUnconnected: FC = ({ + flow: { nodes }, + user, + nodeLoadNode, + flowSetCellView, +}) => ( + ); const FlowLayout = connect( diff --git a/src/redux/flow/actions.ts b/src/redux/flow/actions.ts index 88998656..d4b4b1e1 100644 --- a/src/redux/flow/actions.ts +++ b/src/redux/flow/actions.ts @@ -1,7 +1,14 @@ import { FLOW_ACTIONS } from './constants'; import { IFlowState } from './reducer'; +import { INode } from '../types'; export const flowSetNodes = (nodes: IFlowState['nodes']) => ({ nodes, type: FLOW_ACTIONS.SET_NODES, }); + +export const flowSetCellView = (id: INode['id'], flow: INode['flow']) => ({ + type: FLOW_ACTIONS.SET_CELL_VIEW, + id, + flow, +}); diff --git a/src/redux/flow/constants.ts b/src/redux/flow/constants.ts index 5b38ea68..a7389f18 100644 --- a/src/redux/flow/constants.ts +++ b/src/redux/flow/constants.ts @@ -3,4 +3,5 @@ const prefix = 'FLOW.'; export const FLOW_ACTIONS = { GET_FLOW: `${prefix}GET_FLOW`, SET_NODES: `${prefix}SET_NODES`, + SET_CELL_VIEW: `${prefix}SET_CELL_VIEW`, }; diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index 8a407350..7ea32118 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -2,23 +2,39 @@ import React, { FC } from 'react'; const Sprites: FC<{}> = () => ( + + + + + + - + - - + + - - + + + - + + + +