From 8fc06a48193706719b1bb8731ef0b0827f5541bc Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Wed, 21 Sep 2022 12:26:35 +0700 Subject: [PATCH] added empty avatar placeholder --- README.md | 3 + public/images/john_doe.svg | 453 ++++++++++++++++++ src/components/common/Avatar/index.tsx | 10 +- src/components/common/Square/index.tsx | 4 +- src/components/main/UserButton/index.tsx | 11 +- .../profile/ProfileAvatar/index.tsx | 12 +- 6 files changed, 470 insertions(+), 23 deletions(-) create mode 100644 public/images/john_doe.svg diff --git a/README.md b/README.md index 6f0c941b..8519c5c6 100644 --- a/README.md +++ b/README.md @@ -3,14 +3,17 @@ This is [vault48.org](https://vault48.org) frontend. [![Build Status](https://jenkins.vault48.org/api/badges/muerwre/vault-frontend/status.svg)](https://vault48.org/) ### Installation + 1. Clone this repo `git clone git@github.com:muerwre/vault-frontend.git` 2. Run `yarn install` 3. Copy `.env_example` to `.env` 4. Set it up. You can use https://staging.vault48.org as playground ### Starting + `yarn start` ### Building + 1. Run `yarn build` 2. Copy `./dist/*` somewhere diff --git a/public/images/john_doe.svg b/public/images/john_doe.svg new file mode 100644 index 00000000..beb787cd --- /dev/null +++ b/public/images/john_doe.svg @@ -0,0 +1,453 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/common/Avatar/index.tsx b/src/components/common/Avatar/index.tsx index 4d0b626c..19d5a3f7 100644 --- a/src/components/common/Avatar/index.tsx +++ b/src/components/common/Avatar/index.tsx @@ -4,6 +4,7 @@ import classNames from 'classnames'; import { Square } from '~/components/common/Square'; import { ImagePresets } from '~/constants/urls'; +import { useColorGradientFromString } from '~/hooks/color/useColorGradientFromString'; import { getURLFromString } from '~/utils/dom'; import { DivProps } from '~/utils/types'; @@ -17,17 +18,20 @@ interface Props extends DivProps { } const Avatar = forwardRef( - ({ url, username, size, className, preset = ImagePresets.avatar, ...rest }, ref) => { + ( + { url, username, size, className, preset = ImagePresets.avatar, ...rest }, + ref, + ) => { return ( ); - } + }, ); export { Avatar }; diff --git a/src/components/common/Square/index.tsx b/src/components/common/Square/index.tsx index d1619005..ff471820 100644 --- a/src/components/common/Square/index.tsx +++ b/src/components/common/Square/index.tsx @@ -19,14 +19,14 @@ const Square = forwardRef(
{!!children &&
{children}
}
); - } + }, ); export { Square }; diff --git a/src/components/main/UserButton/index.tsx b/src/components/main/UserButton/index.tsx index 21b26353..dd06a27b 100644 --- a/src/components/main/UserButton/index.tsx +++ b/src/components/main/UserButton/index.tsx @@ -1,5 +1,6 @@ import { FC } from 'react'; +import { Avatar } from '~/components/common/Avatar'; import { Group } from '~/components/containers/Group'; import { Icon } from '~/components/input/Icon'; import { ImagePresets } from '~/constants/urls'; @@ -19,15 +20,7 @@ const UserButton: FC = ({ username, photo, onClick }) => { ); diff --git a/src/components/profile/ProfileAvatar/index.tsx b/src/components/profile/ProfileAvatar/index.tsx index a267fcf6..b4b63bbe 100644 --- a/src/components/profile/ProfileAvatar/index.tsx +++ b/src/components/profile/ProfileAvatar/index.tsx @@ -1,5 +1,6 @@ import React, { ChangeEvent, FC, useCallback } from 'react'; +import { Avatar } from '~/components/common/Avatar'; import { Button } from '~/components/input/Button'; import { ImagePresets } from '~/constants/urls'; import { IFile } from '~/types'; @@ -36,14 +37,7 @@ const ProfileAvatar: FC = ({ : undefined; return ( -
+ {canEdit && } {canEdit && (
+ ); };