diff --git a/src/components/node/NodeDeletedBadge/index.tsx b/src/components/node/NodeDeletedBadge/index.tsx new file mode 100644 index 00000000..1bb06283 --- /dev/null +++ b/src/components/node/NodeDeletedBadge/index.tsx @@ -0,0 +1,10 @@ +import React, { FC } from 'react'; +import styles from './styles.scss'; + +interface IProps {} + +const NodeDeletedBadge: FC = ({}) => { + return
Эта ячейка заблокирована. Её не никто не увидит.
; +}; + +export { NodeDeletedBadge }; diff --git a/src/components/node/NodeDeletedBadge/styles.scss b/src/components/node/NodeDeletedBadge/styles.scss new file mode 100644 index 00000000..96c5ad3a --- /dev/null +++ b/src/components/node/NodeDeletedBadge/styles.scss @@ -0,0 +1,9 @@ +.badge { + padding: $gap; + text-align: center; + border-radius: $radius; + color: $red; + padding: $gap * 4 $gap; + text-transform: uppercase; + font: $font_18_semibold; +} diff --git a/src/containers/node/NodeLayout/index.tsx b/src/containers/node/NodeLayout/index.tsx index 2d000fcc..e0e95ebe 100644 --- a/src/containers/node/NodeLayout/index.tsx +++ b/src/containers/node/NodeLayout/index.tsx @@ -19,6 +19,7 @@ import { CommentForm } from '~/components/node/CommentForm'; import { selectUser } from '~/redux/auth/selectors'; import pick from 'ramda/es/pick'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; +import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge'; const mapStateToProps = state => ({ node: selectNode(state), @@ -108,55 +109,59 @@ const NodeLayoutUnconnected: FC = memo( is_loading={is_loading} /> - - - - - {inline_block && ( -
- {createElement(inline_block, { - node, - is_loading, - updateLayout, - layout, - })} -
- )} - - {is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( - - ) : ( - - )} - - {is_user && !is_loading && } -
- -
- - {!is_loading && ( - + {node.deleted_at ? ( + + ) : ( + + + + + {inline_block && ( +
+ {createElement(inline_block, { + node, + is_loading, + updateLayout, + layout, + })} +
)} - {is_loading && } - - {!is_loading && - related && - related.albums && - Object.keys(related.albums) - .filter(album => related.albums[album].length > 0) - .map(album => ( - - ))} - - {!is_loading && related && related.similar && related.similar.length > 0 && ( - + {is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( + + ) : ( + )} + + {is_user && !is_loading && }
-
-
-
-
+ +
+ + {!is_loading && ( + + )} + + {is_loading && } + + {!is_loading && + related && + related.albums && + Object.keys(related.albums) + .filter(album => related.albums[album].length > 0) + .map(album => ( + + ))} + + {!is_loading && related && related.similar && related.similar.length > 0 && ( + + )} + +
+ + + + )} ); }