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

user profile avatar

Browse source
This commit is contained in:
Fedor Katurov 2019-10-13 20:35:48 +07:00
parent 8dceef225f
commit 9e25b4e2b0
3 changed files with 31 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/main/Header/index.tsx
View file

@ -11,9 +11,13 @@ import { Group } from '~/components/containers/Group';
import * as MODAL_ACTIONS from '~/redux/modal/actions'; import * as MODAL_ACTIONS from '~/redux/modal/actions';
import { DIALOGS } from '~/redux/modal/constants'; import { DIALOGS } from '~/redux/modal/constants';
import { pick } from 'ramda'; import { pick } from 'ramda';
import { Icon } from '~/components/input/Icon';
import { url } from 'inspector';
import { getURL } from '~/utils/dom';
import path from 'ramda/es/path';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
user: pick(['username', 'is_user'])(selectUser(state)), user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
}); });
const mapDispatchToProps = { const mapDispatchToProps = {
@ -23,7 +27,7 @@ const mapDispatchToProps = {
type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}; type IProps = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {};
const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog }) => { const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user, photo }, showDialog }) => {
const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]); const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]); const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
@ -41,7 +45,9 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog
{is_user && ( {is_user && (
<Group horizontal className={style.user_button}> <Group horizontal className={style.user_button}>
<div>{username}</div> <div>{username}</div>
<div className={style.user_avatar} /> <div className={style.user_avatar} style={{ backgroundImage: `url('${getURL(photo)}')` }}>
{(!photo || !photo.id) && <Icon icon="profile" />}
</div>
</Group> </Group>
)} )}

20
src/components/main/Header/style.scss
View file

@ -3,7 +3,7 @@
align-items: center; align-items: center;
justify-content: flex-end; justify-content: flex-end;
font-weight: 500; font-weight: 500;
height: 80px; height: 120px;
} }
.spacer { .spacer {
@ -65,17 +65,31 @@
.user_button { .user_button {
align-items: center; align-items: center;
border-radius: $input_radius; border-radius: $input_radius;
font: $font_16_medium; font: $font_16_semibold;
text-transform: uppercase; text-transform: uppercase;
flex: 0 !important; flex: 0 !important;
opacity: 0.3;
cursor: pointer; cursor: pointer;
margin-left: $gap; margin-left: $gap;
} }
.user_avatar { .user_avatar {
@include outer_shadow();
width: 32px; width: 32px;
height: 32px; height: 32px;
background: white; background: white;
border-radius: $radius; border-radius: $radius;
margin-left: ($gap + 2px) !important;
background: 50% 50% no-repeat $wisegreen;
display: flex;
align-items: center;
justify-content: center;
background-size: cover;
svg {
fill: #222222;
stroke: #222222;
width: 24px;
height: 24px;
}
} }

5
src/sprites/Sprites.tsx
View file

@ -93,6 +93,11 @@ const Sprites: FC<{}> = () => (
<path fill="none" d="M0 0h24v24H0V0z" /> <path fill="none" d="M0 0h24v24H0V0z" />
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" /> <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5.04-6.71l-2.75 3.54-1.96-2.36L6.5 17h11l-3.54-4.71z" />
</g> </g>
<g id="profile" stroke="none">
<path fill="none" d="M0 0h24v24H0V0z" />
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
</g>
</svg> </svg>
); );