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 { DIALOGS } from '~/redux/modal/constants';
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 => ({
user: pick(['username', 'is_user'])(selectUser(state)),
user: pick(['username', 'is_user', 'photo'])(selectUser(state)),
});
const mapDispatchToProps = {
@ -23,7 +27,7 @@ const 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 onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
@ -41,7 +45,9 @@ const HeaderUnconnected: FC<IProps> = ({ user: { username, is_user }, showDialog
{is_user && (
<Group horizontal className={style.user_button}>
<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>
)}

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

@ -3,7 +3,7 @@
align-items: center;
justify-content: flex-end;
font-weight: 500;
height: 80px;
height: 120px;
}
.spacer {
@ -65,17 +65,31 @@
.user_button {
align-items: center;
border-radius: $input_radius;
font: $font_16_medium;
font: $font_16_semibold;
text-transform: uppercase;
flex: 0 !important;
opacity: 0.3;
cursor: pointer;
margin-left: $gap;
}
.user_avatar {
@include outer_shadow();
width: 32px;
height: 32px;
background: white;
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;
}
}