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

#35 refactored node layout

Browse source
This commit is contained in:
Fedor Katurov 2021-03-06 13:17:39 +07:00
parent 428c7e7a06
commit d3473eab4c
20 changed files with 406 additions and 344 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/node/NodePanelInner/index.tsx
View file

@ -1,7 +1,5 @@
import React, { FC, memo } from 'react';
import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group';
import { Filler } from '~/components/containers/Filler';
import { Icon } from '~/components/input/Icon';
import { INode } from '~/redux/types';
import classNames from 'classnames';
@ -12,11 +10,11 @@ interface IProps {
node: Partial<INode>;
stack?: boolean;
can_edit: boolean;
can_like: boolean;
can_star: boolean;
canEdit: boolean;
canLike: boolean;
canStar: boolean;
is_loading: boolean;
isLoading: boolean;
onEdit: () => void;
onLike: () => void;
@ -29,11 +27,11 @@ const NodePanelInner: FC<IProps> = memo(
node: { title, user, is_liked, is_heroic, deleted_at, created_at, like_count },
stack,
can_star,
can_edit,
can_like,
canStar,
canEdit,
canLike,
is_loading,
isLoading,
onStar,
onEdit,
@ -45,12 +43,12 @@ const NodePanelInner: FC<IProps> = memo(
<div className={styles.content}>
<div className={styles.panel}>
<div className={styles.title}>
{is_loading ? <Placeholder width="40%" /> : title || '...'}
{isLoading ? <Placeholder width="40%" /> : title || '...'}
</div>
{user && user.username && (
<div className={styles.name}>
{is_loading ? (
{isLoading ? (
<Placeholder width="100px" />
) : (
`~${user.username.toLocaleLowerCase()}, ${getPrettyDate(created_at)}`
@ -59,14 +57,14 @@ const NodePanelInner: FC<IProps> = memo(
)}
</div>
{can_edit && (
{canEdit && (
<div className={styles.editor_menu}>
<div className={styles.editor_menu_button}>
<Icon icon="dots-vertical" size={24} />
</div>
<div className={styles.editor_buttons}>
{can_star && (
{canStar && (
<div className={classNames(styles.star, { is_heroic })}>
{is_heroic ? (
<Icon icon="star_full" size={24} onClick={onStar} />
@ -88,7 +86,7 @@ const NodePanelInner: FC<IProps> = memo(
)}
<div className={styles.buttons}>
{can_like && (
{canLike && (
<div className={classNames(styles.like, { is_liked })}>
{is_liked ? (
<Icon icon="heart_full" size={24} onClick={onLike} />