mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-28 14:16:41 +07:00
renamed NodePanelInner
This commit is contained in:
Fedor Katurov
parent
7d7afeeaf5
commit
292268dbc3
3 changed files with 4 additions and 4 deletions
126
src/components/node/NodeTitle/index.tsx
Normal file
126
src/components/node/NodeTitle/index.tsx
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
import React, { VFC, memo } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import classNames from 'classnames';
|
||||
import { Placeholder } from '~/components/placeholders/Placeholder';
|
||||
import { getPrettyDate } from '~/utils/dom';
|
||||
import { URLS } from '~/constants/urls';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
interface IProps {
|
||||
id?: number;
|
||||
title: string;
|
||||
username?: string;
|
||||
createdAt: string;
|
||||
likeCount: number;
|
||||
|
||||
isHeroic: boolean;
|
||||
isLocked: boolean;
|
||||
isLiked: boolean;
|
||||
|
||||
canEdit: boolean;
|
||||
canLike: boolean;
|
||||
canStar: boolean;
|
||||
|
||||
isLoading: boolean;
|
||||
|
||||
onEdit: () => void;
|
||||
onLike: () => void;
|
||||
onStar: () => void;
|
||||
onLock: () => void;
|
||||
}
|
||||
|
||||
const NodeTitle: VFC<IProps> = memo(
|
||||
({
|
||||
id,
|
||||
title,
|
||||
username,
|
||||
createdAt,
|
||||
likeCount,
|
||||
|
||||
isHeroic,
|
||||
isLocked,
|
||||
isLiked,
|
||||
|
||||
canStar,
|
||||
canEdit,
|
||||
canLike,
|
||||
|
||||
isLoading,
|
||||
|
||||
onStar,
|
||||
onEdit,
|
||||
onLike,
|
||||
onLock,
|
||||
}) => {
|
||||
return (
|
||||
<div className={classNames(styles.wrap)}>
|
||||
<div className={styles.content}>
|
||||
<div className={styles.panel}>
|
||||
<div className={styles.title}>
|
||||
{isLoading ? <Placeholder width="40%" /> : title || '...'}
|
||||
</div>
|
||||
|
||||
{!!username && (
|
||||
<div className={styles.name}>
|
||||
{isLoading ? (
|
||||
<Placeholder width="100px" />
|
||||
) : (
|
||||
`~${username.toLocaleLowerCase()}, ${getPrettyDate(createdAt)}`
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{canEdit && (
|
||||
<div className={styles.editor_menu}>
|
||||
<div className={styles.editor_menu_button}>
|
||||
<Icon icon="dots-vertical" size={24} />
|
||||
</div>
|
||||
|
||||
<div className={styles.editor_buttons}>
|
||||
{canStar && (
|
||||
<div className={classNames(styles.star, { [styles.is_heroic]: isHeroic })}>
|
||||
{isHeroic ? (
|
||||
<Icon icon="star_full" size={24} onClick={onStar} />
|
||||
) : (
|
||||
<Icon icon="star" size={24} onClick={onStar} />
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Icon icon={isLocked ? 'locked' : 'unlocked'} size={24} onClick={onLock} />
|
||||
</div>
|
||||
|
||||
{!!id && (
|
||||
<Link to={URLS.NODE_EDIT_URL(id)}>
|
||||
<Icon icon="edit" size={24} onClick={onEdit} />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.buttons}>
|
||||
{canLike && (
|
||||
<div className={classNames(styles.like, { [styles.is_liked]: isLiked })}>
|
||||
{isLiked ? (
|
||||
<Icon icon="heart_full" size={24} onClick={onLike} />
|
||||
) : (
|
||||
<Icon icon="heart" size={24} onClick={onLike} />
|
||||
)}
|
||||
|
||||
{!!likeCount && likeCount > 0 && (
|
||||
<div className={styles.like_count}>{likeCount}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
export { NodeTitle };
|
||||
278
src/components/node/NodeTitle/styles.module.scss
Normal file
278
src/components/node/NodeTitle/styles.module.scss
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
@mixin button {
|
||||
margin: 0 $gap;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: darken(white, 50%);
|
||||
transition: fill 0.25s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
svg {
|
||||
fill: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
flex: 0 0 6px;
|
||||
height: $gap;
|
||||
width: 6px;
|
||||
border-radius: 4px;
|
||||
background: transparentize(black, 0.7);
|
||||
margin-left: $gap * 2;
|
||||
}
|
||||
}
|
||||
|
||||
.wrap {
|
||||
display: flex;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 0 1 $content_width;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: stretch;
|
||||
border-radius: $radius $radius 0 0;
|
||||
box-sizing: border-box;
|
||||
padding: $gap;
|
||||
height: 64px;
|
||||
min-width: 0;
|
||||
|
||||
@include tablet {
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-transform: uppercase;
|
||||
font: $font_24_semibold;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
@include tablet {
|
||||
white-space: nowrap;
|
||||
padding-bottom: 0;
|
||||
font: $font_16_semibold;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font: $font_14_regular;
|
||||
color: transparentize(white, 0.5);
|
||||
text-transform: lowercase;
|
||||
|
||||
@include tablet {
|
||||
font: $font_12_regular;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
fill: transparentize(white, 0.5);
|
||||
}
|
||||
|
||||
.panel {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.buttons,
|
||||
.editor_buttons {
|
||||
flex: 0;
|
||||
padding-right: $gap;
|
||||
fill: transparentize(white, 0.7);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& > * {
|
||||
@include button;
|
||||
}
|
||||
|
||||
@include tablet {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
& > * {
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editor_buttons {
|
||||
@include tablet {
|
||||
display: none;
|
||||
|
||||
& > * {
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mark {
|
||||
flex: 0 0 32px;
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: -38px;
|
||||
right: 4px;
|
||||
width: 24px;
|
||||
height: 52px;
|
||||
background: $main_gradient;
|
||||
box-shadow: transparentize(black, 0.8) 4px 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.sep {
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
45% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
75% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: scale(1.4);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.like {
|
||||
transition: fill, stroke 0.25s;
|
||||
will-change: transform;
|
||||
position: relative;
|
||||
flex: 0 0 32px;
|
||||
|
||||
.is_liked {
|
||||
svg {
|
||||
fill: $red;
|
||||
}
|
||||
|
||||
.like_count {
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $red;
|
||||
animation: pulse 0.75s infinite;
|
||||
|
||||
.like_count {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.like_count {
|
||||
position: absolute;
|
||||
font: $font_12_bold;
|
||||
left: 16px;
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.25s, color 0.25s;
|
||||
background: $node_bg;
|
||||
padding: 0 3px;
|
||||
border-radius: 10px;
|
||||
z-index: 3;
|
||||
color: transparentize($color: white, $amount: 0.5);
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.star {
|
||||
transition: fill, stroke 0.25s;
|
||||
will-change: transform;
|
||||
|
||||
.is_heroic {
|
||||
svg {
|
||||
fill: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
fill: $orange;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_menu_button {
|
||||
display: none !important;
|
||||
|
||||
@include button();
|
||||
|
||||
@include tablet {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
.editor_menu {
|
||||
&:hover {
|
||||
.editor_buttons {
|
||||
@include tablet {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
background: darken($content_bg, 4%);
|
||||
padding: $gap * 2;
|
||||
border-radius: $radius;
|
||||
box-shadow: transparentize(black, 0.8) 5px 5px 5px;
|
||||
transform: translate(0, -10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue