From ede5dfe17feecfd99ca479285190b372ce026973 Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 26 Mar 2021 12:35:31 +0700 Subject: [PATCH] #23 fixed submit button appearance for lab --- src/components/bars/SubmitBar/index.tsx | 44 ++++++++++--------- .../bars/SubmitBar/styles.module.scss | 14 ++++-- src/containers/main/BottomContainer/index.tsx | 3 -- src/containers/main/MainRouter/index.tsx | 8 ++-- src/containers/main/SidebarRouter/index.tsx | 25 ++++++++--- .../node => layouts}/BorisLayout/index.tsx | 5 ++- .../BorisLayout/styles.module.scss | 4 +- .../flow => layouts}/FlowLayout/index.tsx | 3 ++ .../FlowLayout/styles.module.scss | 2 +- .../lab => layouts}/LabLayout/index.tsx | 3 ++ .../LabLayout/styles.module.scss | 0 .../node => layouts}/NodeLayout/index.tsx | 0 .../NodeLayout/styles.module.scss | 0 src/redux/node/actions.ts | 3 +- src/redux/node/sagas.ts | 12 ++++- 15 files changed, 82 insertions(+), 44 deletions(-) rename src/{containers/node => layouts}/BorisLayout/index.tsx (97%) rename src/{containers/node => layouts}/BorisLayout/styles.module.scss (95%) rename src/{containers/flow => layouts}/FlowLayout/index.tsx (96%) rename src/{containers/flow => layouts}/FlowLayout/styles.module.scss (97%) rename src/{containers/lab => layouts}/LabLayout/index.tsx (93%) rename src/{containers/lab => layouts}/LabLayout/styles.module.scss (100%) rename src/{containers/node => layouts}/NodeLayout/index.tsx (100%) rename src/{containers/node => layouts}/NodeLayout/styles.module.scss (100%) diff --git a/src/components/bars/SubmitBar/index.tsx b/src/components/bars/SubmitBar/index.tsx index de0b2ecd..9a6df0e7 100644 --- a/src/components/bars/SubmitBar/index.tsx +++ b/src/components/bars/SubmitBar/index.tsx @@ -1,28 +1,37 @@ import React, { FC, useCallback } from 'react'; -import { connect } from 'react-redux'; +import { useDispatch } from 'react-redux'; import { Icon } from '~/components/input/Icon'; -import * as NODE_ACTIONS from '~/redux/node/actions'; -import { DIALOGS } from '~/redux/modal/constants'; +import { nodeCreate } from '~/redux/node/actions'; import styles from './styles.module.scss'; import { NODE_TYPES } from '~/redux/node/constants'; +import classNames from 'classnames'; -const mapStateToProps = null; -const mapDispatchToProps = { - nodeCreate: NODE_ACTIONS.nodeCreate, - // showDialog: MODAL_ACTIONS.modalShowDialog, -}; +interface Props { + isLab?: boolean; +} -type IProps = typeof mapDispatchToProps & {}; +const SubmitBar: FC = ({ isLab }) => { + const dispatch = useDispatch(); -const SubmitBarUnconnected: FC = ({ nodeCreate }) => { - const onOpenImageEditor = useCallback(() => nodeCreate(NODE_TYPES.IMAGE), [nodeCreate]); - const onOpenTextEditor = useCallback(() => nodeCreate(NODE_TYPES.TEXT), [nodeCreate]); - const onOpenVideoEditor = useCallback(() => nodeCreate(NODE_TYPES.VIDEO), [nodeCreate]); - const onOpenAudioEditor = useCallback(() => nodeCreate(NODE_TYPES.AUDIO), [nodeCreate]); + const onOpenImageEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.IMAGE, isLab)), [ + dispatch, + ]); + + const onOpenTextEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.TEXT, isLab)), [ + dispatch, + ]); + + const onOpenVideoEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.VIDEO, isLab)), [ + dispatch, + ]); + + const onOpenAudioEditor = useCallback(() => dispatch(nodeCreate(NODE_TYPES.AUDIO, isLab)), [ + dispatch, + ]); return ( -
+
@@ -48,9 +57,4 @@ const SubmitBarUnconnected: FC = ({ nodeCreate }) => { ); }; -const SubmitBar = connect( - mapStateToProps, - mapDispatchToProps -)(SubmitBarUnconnected); - export { SubmitBar }; diff --git a/src/components/bars/SubmitBar/styles.module.scss b/src/components/bars/SubmitBar/styles.module.scss index 7220b81d..a09a5a3b 100644 --- a/src/components/bars/SubmitBar/styles.module.scss +++ b/src/components/bars/SubmitBar/styles.module.scss @@ -1,8 +1,11 @@ @import "src/styles/variables"; .wrap { - position: absolute; - right: -($bar_height + $gap); + position: fixed; + bottom: 0; + right: 50%; + transform: translate($content_width / 2 + $bar_height + $gap, 0); + z-index: 4; &:hover { .panel { @@ -11,9 +14,8 @@ } @media (max-width: $content_width + ($bar_height + $gap) * 2) { - position: relative; right: 0; - margin-left: $gap; + transform: translate(0, 0); } } @@ -34,6 +36,10 @@ width: 32px; height: 32px; } + + .lab & { + background: $blue_gradient; + } } .panel { diff --git a/src/containers/main/BottomContainer/index.tsx b/src/containers/main/BottomContainer/index.tsx index 51ab510b..4c13eb3f 100644 --- a/src/containers/main/BottomContainer/index.tsx +++ b/src/containers/main/BottomContainer/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react'; import styles from './styles.module.scss'; import { PlayerBar } from '~/components/bars/PlayerBar'; -import { SubmitBar } from '~/components/bars/SubmitBar'; import { selectUser } from '~/redux/auth/selectors'; import { pick } from 'ramda'; import { connect } from 'react-redux'; @@ -14,8 +13,6 @@ const BottomContainerUnconnected: FC = ({ is_user }) => (
- - {is_user && }
); diff --git a/src/containers/main/MainRouter/index.tsx b/src/containers/main/MainRouter/index.tsx index ac8988dc..fa9e1fd4 100644 --- a/src/containers/main/MainRouter/index.tsx +++ b/src/containers/main/MainRouter/index.tsx @@ -1,12 +1,12 @@ import React, { FC } from 'react'; import { URLS } from '~/constants/urls'; -import { FlowLayout } from '~/containers/flow/FlowLayout'; -import { NodeLayout } from '~/containers/node/NodeLayout'; -import { BorisLayout } from '~/containers/node/BorisLayout'; +import { FlowLayout } from '~/layouts/FlowLayout'; +import { NodeLayout } from '~/layouts/NodeLayout'; +import { BorisLayout } from '~/layouts/BorisLayout'; import { ErrorNotFound } from '~/containers/pages/ErrorNotFound'; import { ProfilePage } from '~/containers/profile/ProfilePage'; import { Redirect, Route, Switch, useLocation } from 'react-router'; -import { LabLayout } from '~/containers/lab/LabLayout'; +import { LabLayout } from '~/layouts/LabLayout'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { selectAuthUser } from '~/redux/auth/selectors'; diff --git a/src/containers/main/SidebarRouter/index.tsx b/src/containers/main/SidebarRouter/index.tsx index 60285f8f..47cc641e 100644 --- a/src/containers/main/SidebarRouter/index.tsx +++ b/src/containers/main/SidebarRouter/index.tsx @@ -1,17 +1,30 @@ import React, { FC } from 'react'; +import { createPortal } from 'react-dom'; import { Route, Switch } from 'react-router'; import { TagSidebar } from '~/containers/sidebars/TagSidebar'; import { ProfileSidebar } from '~/containers/sidebars/ProfileSidebar'; +import { Authorized } from '~/components/containers/Authorized'; +import { SubmitBar } from '~/components/bars/SubmitBar'; interface IProps { prefix?: string; + isLab?: boolean; } -const SidebarRouter: FC = ({ prefix = '' }) => ( - - - - -); +const SidebarRouter: FC = ({ prefix = '', isLab }) => { + return createPortal( + <> + + + + + + + + + , + document.body + ); +}; export { SidebarRouter }; diff --git a/src/containers/node/BorisLayout/index.tsx b/src/layouts/BorisLayout/index.tsx similarity index 97% rename from src/containers/node/BorisLayout/index.tsx rename to src/layouts/BorisLayout/index.tsx index 42a93e70..f61c76c6 100644 --- a/src/containers/node/BorisLayout/index.tsx +++ b/src/layouts/BorisLayout/index.tsx @@ -17,7 +17,7 @@ import { Container } from '~/containers/main/Container'; import StickyBox from 'react-sticky-box/dist/esnext'; import { BorisComments } from '~/components/boris/BorisComments'; import { URLS } from '~/constants/urls'; -import { Route, Switch, Link } from 'react-router-dom'; +import { Route, Switch } from 'react-router-dom'; import { BorisUIDemo } from '~/components/boris/BorisUIDemo'; import { BorisSuperpowers } from '~/components/boris/BorisSuperpowers'; import { Superpower } from '~/components/boris/Superpower'; @@ -25,6 +25,7 @@ import { Tabs } from '~/components/dialogs/Tabs'; import { Tab } from '~/components/dialogs/Tab'; import { useHistory, useLocation } from 'react-router'; import { Card } from '~/components/containers/Card'; +import { SidebarRouter } from '~/containers/main/SidebarRouter'; type IProps = {}; @@ -144,6 +145,8 @@ const BorisLayout: FC = () => {
+ + ); }; diff --git a/src/containers/node/BorisLayout/styles.module.scss b/src/layouts/BorisLayout/styles.module.scss similarity index 95% rename from src/containers/node/BorisLayout/styles.module.scss rename to src/layouts/BorisLayout/styles.module.scss index c29e2f60..8e0c33e8 100644 --- a/src/containers/node/BorisLayout/styles.module.scss +++ b/src/layouts/BorisLayout/styles.module.scss @@ -1,4 +1,4 @@ -@import "src/styles/variables"; +@import "~/styles/variables"; .wrap { display: flex; @@ -20,7 +20,7 @@ width: 100%; height: 100vh; overflow: hidden; - background: 50% 0 no-repeat url('../../../sprites/boris_bg.svg'); + background: 50% 0 no-repeat url('../../sprites/boris_bg.svg'); background-size: cover; } diff --git a/src/containers/flow/FlowLayout/index.tsx b/src/layouts/FlowLayout/index.tsx similarity index 96% rename from src/containers/flow/FlowLayout/index.tsx rename to src/layouts/FlowLayout/index.tsx index cf263080..c62c8e49 100644 --- a/src/containers/flow/FlowLayout/index.tsx +++ b/src/layouts/FlowLayout/index.tsx @@ -11,6 +11,7 @@ import styles from './styles.module.scss'; import { IState } from '~/redux/store'; import { FlowStamp } from '~/components/flow/FlowStamp'; import { Container } from '~/containers/main/Container'; +import { SidebarRouter } from '~/containers/main/SidebarRouter'; const mapStateToProps = (state: IState) => ({ flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)), @@ -85,6 +86,8 @@ const FlowLayoutUnconnected: FC = ({ onChangeCellView={flowSetCellView} />
+ + ); }; diff --git a/src/containers/flow/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss similarity index 97% rename from src/containers/flow/FlowLayout/styles.module.scss rename to src/layouts/FlowLayout/styles.module.scss index 9dc8a2d8..71e24052 100644 --- a/src/containers/flow/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -12,7 +12,7 @@ $cols: $content_width / $cell; .grid { display: grid; - grid-template-columns: repeat(5, 1fr); + grid-template-columns: repeat(5, 1fr); grid-template-rows: 50vh $cell; grid-auto-rows: $cell; diff --git a/src/containers/lab/LabLayout/index.tsx b/src/layouts/LabLayout/index.tsx similarity index 93% rename from src/containers/lab/LabLayout/index.tsx rename to src/layouts/LabLayout/index.tsx index e7ab264b..a82cd6ba 100644 --- a/src/containers/lab/LabLayout/index.tsx +++ b/src/layouts/LabLayout/index.tsx @@ -16,6 +16,7 @@ import { Filler } from '~/components/containers/Filler'; import { LabStats } from '~/containers/lab/LabStats'; import { useShallowSelect } from '~/utils/hooks/useShallowSelect'; import { selectLabList, selectLabListNodes, selectLabStatsLoading } from '~/redux/lab/selectors'; +import { SidebarRouter } from '~/containers/main/SidebarRouter'; interface IProps {} @@ -44,6 +45,8 @@ const LabLayout: FC = () => {
+ + ); }; diff --git a/src/containers/lab/LabLayout/styles.module.scss b/src/layouts/LabLayout/styles.module.scss similarity index 100% rename from src/containers/lab/LabLayout/styles.module.scss rename to src/layouts/LabLayout/styles.module.scss diff --git a/src/containers/node/NodeLayout/index.tsx b/src/layouts/NodeLayout/index.tsx similarity index 100% rename from src/containers/node/NodeLayout/index.tsx rename to src/layouts/NodeLayout/index.tsx diff --git a/src/containers/node/NodeLayout/styles.module.scss b/src/layouts/NodeLayout/styles.module.scss similarity index 100% rename from src/containers/node/NodeLayout/styles.module.scss rename to src/layouts/NodeLayout/styles.module.scss diff --git a/src/redux/node/actions.ts b/src/redux/node/actions.ts index 1faa62df..96c70eec 100644 --- a/src/redux/node/actions.ts +++ b/src/redux/node/actions.ts @@ -87,9 +87,10 @@ export const nodeSetTags = (tags: ITag[]) => ({ tags, }); -export const nodeCreate = (node_type: INode['type']) => ({ +export const nodeCreate = (node_type: INode['type'], isLab?: boolean) => ({ type: NODE_ACTIONS.CREATE, node_type, + isLab, }); export const nodeEdit = (id: INode['id']) => ({ diff --git a/src/redux/node/sagas.ts b/src/redux/node/sagas.ts index fa077989..ce5e0a06 100644 --- a/src/redux/node/sagas.ts +++ b/src/redux/node/sagas.ts @@ -227,10 +227,18 @@ function* onUpdateTags({ id, tags }: ReturnType) { } catch {} } -function* onCreateSaga({ node_type: type }: ReturnType) { +function* onCreateSaga({ node_type: type, isLab }: ReturnType) { if (!type || !has(type, NODE_EDITOR_DIALOGS)) return; - yield put(nodeSetEditor({ ...EMPTY_NODE, ...(NODE_EDITOR_DATA[type] || {}), type })); + yield put( + nodeSetEditor({ + ...EMPTY_NODE, + ...(NODE_EDITOR_DATA[type] || {}), + type, + is_promoted: !isLab, + }) + ); + yield put(modalShowDialog(NODE_EDITOR_DIALOGS[type])); }