mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-25 12:56:41 +07:00
#23 lost fixes
This commit is contained in:
Fedor Katurov
parent
dddb86c778
commit
c939dcbce8
12 changed files with 254 additions and 177 deletions
40
src/components/boris/BorisComments/index.tsx
Normal file
40
src/components/boris/BorisComments/index.tsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React, { FC } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { NodeCommentForm } from '~/components/node/NodeCommentForm';
|
||||
import { NodeNoComments } from '~/components/node/NodeNoComments';
|
||||
import { NodeComments } from '~/components/node/NodeComments';
|
||||
import { Footer } from '~/components/main/Footer';
|
||||
import { Card } from '~/components/containers/Card';
|
||||
import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
|
||||
import { selectAuthUser } from '~/redux/auth/selectors';
|
||||
import { IComment, INode } from '~/redux/types';
|
||||
|
||||
interface IProps {
|
||||
isLoadingComments: boolean;
|
||||
commentCount: number;
|
||||
node: INode;
|
||||
comments: IComment[];
|
||||
}
|
||||
|
||||
const BorisComments: FC<IProps> = ({ isLoadingComments, node, commentCount, comments }) => {
|
||||
const user = useShallowSelect(selectAuthUser);
|
||||
|
||||
return (
|
||||
<Card className={styles.content}>
|
||||
<Group className={styles.grid}>
|
||||
{user.is_user && <NodeCommentForm isBefore nodeId={node.id} />}
|
||||
|
||||
{isLoadingComments ? (
|
||||
<NodeNoComments is_loading count={7} />
|
||||
) : (
|
||||
<NodeComments comments={comments} count={commentCount} user={user} order="ASC" />
|
||||
)}
|
||||
</Group>
|
||||
|
||||
<Footer />
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export { BorisComments };
|
||||
18
src/components/boris/BorisComments/styles.module.scss
Normal file
18
src/components/boris/BorisComments/styles.module.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@import "~/styles/variables.scss";
|
||||
|
||||
.content {
|
||||
flex: 4;
|
||||
z-index: 2;
|
||||
border-radius: $radius;
|
||||
padding: 0;
|
||||
background: $node_bg;
|
||||
box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
|
||||
|
||||
@include desktop {
|
||||
flex: 2.5;
|
||||
}
|
||||
|
||||
@media(max-width: 1024px) {
|
||||
flex: 2;
|
||||
}
|
||||
}
|
||||
51
src/components/boris/BorisUIDemo/index.tsx
Normal file
51
src/components/boris/BorisUIDemo/index.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React, { FC } from 'react';
|
||||
import { Card } from '~/components/containers/Card';
|
||||
import styles from './styles.module.scss';
|
||||
import markdown from '~/styles/common/markdown.module.scss';
|
||||
import { Group } from '~/components/containers/Group';
|
||||
import { Button } from '~/components/input/Button';
|
||||
|
||||
interface IProps {}
|
||||
|
||||
const BorisUIDemo: FC<IProps> = () => (
|
||||
<Card className={styles.card}>
|
||||
<div className={markdown.wrapper}>
|
||||
<h1>UI</h1>
|
||||
<p>
|
||||
Простая демонстрация элементов интерфейса. Используется, в основном, как подсказка при
|
||||
разработке
|
||||
</p>
|
||||
|
||||
<h2>Кнопки</h2>
|
||||
|
||||
<h4>Цвета</h4>
|
||||
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button>Primary</Button>
|
||||
<Button color="secondary">Secondary</Button>
|
||||
<Button color="outline">Outline</Button>
|
||||
<Button color="gray">Gray</Button>
|
||||
<Button color="link">Link</Button>
|
||||
</Group>
|
||||
|
||||
<h4>Размеры</h4>
|
||||
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button size="micro">Micro</Button>
|
||||
<Button size="mini">Mini</Button>
|
||||
<Button size="normal">Normal</Button>
|
||||
<Button size="big">Big</Button>
|
||||
<Button size="giant">Giant</Button>
|
||||
</Group>
|
||||
|
||||
<h4>Варианты</h4>
|
||||
<Group horizontal className={styles.sample}>
|
||||
<Button iconRight="check">iconRight</Button>
|
||||
<Button iconLeft="send">iconLeft</Button>
|
||||
<Button round>Round</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
|
||||
export { BorisUIDemo };
|
||||
11
src/components/boris/BorisUIDemo/styles.module.scss
Normal file
11
src/components/boris/BorisUIDemo/styles.module.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
.card {
|
||||
flex: 3;
|
||||
align-self: stretch;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
.sample {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
|
@ -1,63 +1,63 @@
|
|||
@import "src/styles/variables";
|
||||
|
||||
.wrap {
|
||||
@include outer_shadow();
|
||||
@include editor_round_button();
|
||||
|
||||
transition: all 0.5s;
|
||||
fill: $content_bg;
|
||||
background-color: $olive;
|
||||
|
||||
&.promoted {
|
||||
background-color: lighten($content_bg, 4%);
|
||||
fill: $red;
|
||||
@keyframes move_1 {
|
||||
0% {
|
||||
transform: scale(0) translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
50% {
|
||||
transform: scale(1) translate(5px, -5px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
opacity: 1;
|
||||
100% {
|
||||
transform: scale(1.2) translate(-5px, -10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@keyframes move_2 {
|
||||
0% {
|
||||
transform: scale(0) translate(0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale(1) translate(-5px, -5px);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: scale(1.6) translate(5px, -10px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
|
||||
}
|
||||
|
||||
.lab_wrapper {
|
||||
position: relative;
|
||||
bottom: -2px;
|
||||
|
||||
.button:hover & {
|
||||
&:before,&:after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 10px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
box-shadow: white 0 0 0 2px;
|
||||
border-radius: 4px;
|
||||
animation: move_1 0.5s infinite linear;
|
||||
}
|
||||
|
||||
&:after {
|
||||
animation: move_2 0.5s -0.25s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
border-radius: 2px;
|
||||
background: darken($content_bg, 6%);
|
||||
padding: $gap;
|
||||
position: absolute;
|
||||
font: $font_12_semibold;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
transform: translate(0, -$gap);
|
||||
text-align: center;
|
||||
touch-action: none;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
width: 100px;
|
||||
user-select: none;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +1,20 @@
|
|||
import classnames from 'classnames';
|
||||
import React, {
|
||||
ButtonHTMLAttributes,
|
||||
DetailedHTMLProps,
|
||||
FC,
|
||||
createElement,
|
||||
memo,
|
||||
useRef,
|
||||
} from 'react';
|
||||
import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
|
||||
import styles from './styles.module.scss';
|
||||
import { Icon } from '~/components/input/Icon';
|
||||
import { IIcon } from '~/redux/types';
|
||||
import { usePopper } from 'react-popper';
|
||||
import Tippy from '@tippy.js/react';
|
||||
import 'tippy.js/dist/tippy.css';
|
||||
|
||||
type IButtonProps = DetailedHTMLProps<
|
||||
ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
HTMLButtonElement
|
||||
> & {
|
||||
size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
|
||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
|
||||
color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
|
||||
iconLeft?: IIcon;
|
||||
iconRight?: IIcon;
|
||||
seamless?: boolean;
|
||||
transparent?: boolean;
|
||||
title?: string;
|
||||
non_submitting?: boolean;
|
||||
is_loading?: boolean;
|
||||
stretchy?: boolean;
|
||||
iconOnly?: boolean;
|
||||
label?: string;
|
||||
|
|
@ -39,10 +29,6 @@ const Button: FC<IButtonProps> = memo(
|
|||
iconLeft,
|
||||
iconRight,
|
||||
children,
|
||||
seamless = false,
|
||||
transparent = false,
|
||||
non_submitting = false,
|
||||
is_loading,
|
||||
title,
|
||||
stretchy,
|
||||
disabled,
|
||||
|
|
@ -52,45 +38,27 @@ const Button: FC<IButtonProps> = memo(
|
|||
round,
|
||||
...props
|
||||
}) => {
|
||||
const tooltip = useRef<HTMLSpanElement | null>(null);
|
||||
const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
|
||||
placement: 'top',
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: [0, 5],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return createElement(
|
||||
seamless || non_submitting ? 'div' : 'button',
|
||||
{
|
||||
className: classnames(styles.button, className, styles[size], styles[color], {
|
||||
seamless,
|
||||
transparent,
|
||||
const computedClassName = useMemo(
|
||||
() =>
|
||||
classnames(styles.button, className, styles[size], styles[color], {
|
||||
disabled,
|
||||
is_loading,
|
||||
stretchy,
|
||||
icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
|
||||
has_icon_left: !!iconLeft,
|
||||
has_icon_right: !!iconRight,
|
||||
round,
|
||||
}),
|
||||
...props,
|
||||
},
|
||||
[
|
||||
iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
|
||||
title ? <span>{title}</span> : children || null,
|
||||
iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
|
||||
!!label && (
|
||||
<span ref={tooltip} className={styles.tooltip} style={pop.styles.popper} key="tooltip">
|
||||
{label}
|
||||
</span>
|
||||
),
|
||||
]
|
||||
[round, disabled, className, stretchy, iconLeft, iconRight, size, color]
|
||||
);
|
||||
|
||||
return (
|
||||
<Tippy content={label || ''} enabled={!!label}>
|
||||
<button className={computedClassName} {...props}>
|
||||
{iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
|
||||
{!!title ? <span>{title}</span> : children}
|
||||
{iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
|
||||
</button>
|
||||
</Tippy>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
|
|
|||
|
|
@ -34,11 +34,9 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
position: relative;
|
||||
|
||||
filter: grayscale(0);
|
||||
|
||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s;
|
||||
transition: opacity 0.25s, filter 0.25s, box-shadow 0.25s, background-color 0.5s;
|
||||
opacity: 0.8;
|
||||
|
||||
@include outer_shadow();
|
||||
|
|
@ -79,30 +77,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
&:global(.seamless) {
|
||||
background: transparent;
|
||||
color: black;
|
||||
box-shadow: none;
|
||||
fill: black;
|
||||
stroke: black;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:global(.transparent) {
|
||||
background: transparent;
|
||||
color: white;
|
||||
box-shadow: transparentize(black, 0.5) 0 0 4px;
|
||||
padding: 0;
|
||||
fill: black;
|
||||
stroke: black;
|
||||
}
|
||||
|
||||
&:global(.red) {
|
||||
fill: $red;
|
||||
stroke: $red;
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&:global(.stretchy) {
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -111,8 +85,6 @@
|
|||
&:global(.grey) {
|
||||
background: transparentize(white, 0.9);
|
||||
color: white;
|
||||
// background: lighten(white, 0.5);
|
||||
// filter: grayscale(100%);
|
||||
}
|
||||
|
||||
&:global(.disabled) {
|
||||
|
|
@ -145,14 +117,6 @@
|
|||
padding-right: $gap;
|
||||
}
|
||||
|
||||
&.primary {
|
||||
background: $red_gradient;
|
||||
}
|
||||
|
||||
&.secondary {
|
||||
background: $green_gradient;
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
box-shadow: inset transparentize(white, 0.8) 0 0 0 2px;
|
||||
|
|
@ -184,32 +148,58 @@
|
|||
font: $font_12_semibold;
|
||||
padding: 0 15px;
|
||||
border-radius: $radius / 2;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.mini {
|
||||
height: 28px;
|
||||
border-radius: $radius / 2;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
height: 32px;
|
||||
// border-radius: $radius / 2;
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.normal {
|
||||
height: 38px;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.big {
|
||||
height: 40px;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.giant {
|
||||
height: 50px;
|
||||
padding: 0 15px;
|
||||
min-width: 50px;
|
||||
|
||||
&:global(.round) {
|
||||
border-radius: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
|
|
@ -228,20 +218,14 @@
|
|||
height: 20px;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
padding: 5px 10px;
|
||||
background-color: darken($content_bg, 4%);
|
||||
z-index: 2;
|
||||
border-radius: $input_radius;
|
||||
text-transform: none;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
touch-action: none;
|
||||
transition: opacity 0.1s;
|
||||
border: 1px solid transparentize(white, 0.9);
|
||||
|
||||
.button:hover & {
|
||||
opacity: 1;
|
||||
font: $font_14_semibold;
|
||||
}
|
||||
.primary {
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.secondary {
|
||||
background: $wisegreen;
|
||||
}
|
||||
|
||||
.lab {
|
||||
background: $blue;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue