muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-05-01 15:46:40 +07:00
Code Packages Activity Actions

added deletion badge

Browse source
This commit is contained in:
Fedor Katurov 2019-11-29 11:31:29 +07:00
parent 3c844e9b27
commit 6eafc227da
3 changed files with 69 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/node/NodeDeletedBadge/index.tsx Normal file
View file

@ -0,0 +1,10 @@
import React, { FC } from 'react';
import styles from './styles.scss';
interface IProps {}
const NodeDeletedBadge: FC<IProps> = ({}) => {
return <div className={styles.badge}>Эта ячейка заблокирована. Её не никто не увидит.</div>;
};
export { NodeDeletedBadge };

9
src/components/node/NodeDeletedBadge/styles.scss Normal file
View file

@ -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;
}

95
src/containers/node/NodeLayout/index.tsx
View file

@ -19,6 +19,7 @@ import { CommentForm } from '~/components/node/CommentForm';
import { selectUser } from '~/redux/auth/selectors'; import { selectUser } from '~/redux/auth/selectors';
import pick from 'ramda/es/pick'; import pick from 'ramda/es/pick';
import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder'; import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
node: selectNode(state), node: selectNode(state),
@ -108,55 +109,59 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
is_loading={is_loading} is_loading={is_loading}
/> />
<Group> {node.deleted_at ? (
<Padder> <NodeDeletedBadge />
<Group horizontal className={styles.content}> ) : (
<Group className={styles.comments}> <Group>
{inline_block && ( <Padder>
<div className={styles.inline_block}> <Group horizontal className={styles.content}>
{createElement(inline_block, { <Group className={styles.comments}>
node, {inline_block && (
is_loading, <div className={styles.inline_block}>
updateLayout, {createElement(inline_block, {
layout, node,
})} is_loading,
</div> updateLayout,
)} layout,
})}
{is_loading || is_loading_comments || (!comments.length && !inline_block) ? ( </div>
<NodeNoComments is_loading={is_loading_comments || is_loading} />
) : (
<NodeComments comments={comments} />
)}
{is_user && !is_loading && <CommentForm id={0} />}
</Group>
<div className={styles.panel}>
<Group style={{ flex: 1, minWidth: 0 }}>
{!is_loading && (
<NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
)} )}
{is_loading && <NodeRelatedPlaceholder />} {is_loading || is_loading_comments || (!comments.length && !inline_block) ? (
<NodeNoComments is_loading={is_loading_comments || is_loading} />
{!is_loading && ) : (
related && <NodeComments comments={comments} />
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated title={album} items={related.albums[album]} key={album} />
))}
{!is_loading && related && related.similar && related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)} )}
{is_user && !is_loading && <CommentForm id={0} />}
</Group> </Group>
</div>
</Group> <div className={styles.panel}>
</Padder> <Group style={{ flex: 1, minWidth: 0 }}>
</Group> {!is_loading && (
<NodeTags is_editable={is_user} tags={node.tags} onChange={onTagsChange} />
)}
{is_loading && <NodeRelatedPlaceholder />}
{!is_loading &&
related &&
related.albums &&
Object.keys(related.albums)
.filter(album => related.albums[album].length > 0)
.map(album => (
<NodeRelated title={album} items={related.albums[album]} key={album} />
))}
{!is_loading && related && related.similar && related.similar.length > 0 && (
<NodeRelated title="ПОХОЖИЕ" items={related.similar} />
)}
</Group>
</div>
</Group>
</Padder>
</Group>
)}
</Card> </Card>
); );
} }