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

added initial profile dialog

Browse source
This commit is contained in:
Fedor Katurov 2019-11-11 16:01:21 +07:00
parent f6baedc4cd
commit 618c2e3275
28 changed files with 315 additions and 58 deletions
src/components
main/UserButton
index.tsx
node/CommentContent
styles.scss
placeholders
ParagraphPlaceholder
index.tsx
Placeholder
index.tsx

4
src/components/main/UserButton/index.tsx
View file

@ -5,6 +5,7 @@ import { getURL } from '~/utils/dom';
import { Icon } from '~/components/input/Icon';
import { IUser } from '~/redux/auth/types';
import { PRESETS } from '~/constants/urls';
import { Link } from 'react-router-dom';
interface IProps {
user: Partial<IUser>;
@ -14,7 +15,8 @@ interface IProps {
const UserButton: FC<IProps> = ({ user: { username, photo }, onLogout }) => (
<div className={styles.wrap}>
<Group horizontal className={styles.user_button}>
<div>{username}</div>
<Link to={`/~${username}`}>{username}</Link>
<div
className={styles.user_avatar}
style={{ backgroundImage: `url('${getURL(photo, PRESETS.avatar)}')` }}

2
src/components/node/CommentContent/styles.scss
View file

@ -44,7 +44,7 @@
box-sizing: border-box;
position: relative;
color: #cccccc;
word-break: break-all;
word-break: break-word;
b {
font-weight: 600;

26
src/components/placeholders/ParagraphPlaceholder/index.tsx
View file

@ -3,24 +3,24 @@ import { Placeholder } from '~/components/placeholders/Placeholder';
import * as styles from './styles.scss';
import { Group } from '~/components/containers/Group';
const ParagraphPlaceholder = ({ }) => (
const ParagraphPlaceholder = ({}) => (
<Group>
<div className={styles.para}>
<Placeholder width={120} />
<Placeholder width={60} />
<Placeholder width={30} />
<Placeholder width={70} />
<Placeholder width={160} />
<Placeholder width={30} />
<Placeholder width="120px" />
<Placeholder width="60px" />
<Placeholder width="30px" />
<Placeholder width="70px" />
<Placeholder width="160px" />
<Placeholder width="30px" />
</div>
<div className={styles.para}>
<Placeholder width={40} />
<Placeholder width={30} />
<Placeholder width={120} />
<Placeholder width={70} />
<Placeholder width={160} />
<Placeholder width={30} />
<Placeholder width="40px" />
<Placeholder width="30px" />
<Placeholder width="120px" />
<Placeholder width="70px" />
<Placeholder width="160px" />
<Placeholder width="30px" />
</div>
</Group>
);

9
src/components/placeholders/Placeholder/index.tsx
View file

@ -2,16 +2,13 @@ import React, { FC } from 'react';
import * as styles from './styles.scss';
interface IProps {
width?: number;
width?: string;
height?: number;
color?: string;
}
const Placeholder: FC<IProps> = ({ width = 120, height, color }) => (
<div
className={styles.placeholder}
style={{ height, color, width }}
/>
const Placeholder: FC<IProps> = ({ width = '120px', height, color }) => (
<div className={styles.placeholder} style={{ height, color, width }} />
);
export { Placeholder };