bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Improve SidebarMenu design

Browse source
This commit is contained in:
Alex Gleason 2021-09-12 18:36:52 -05:00
parent e0f97f4e99
commit 9a33215528
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 30 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
app/soapbox/components/sidebar_menu.js
View file

@ -5,7 +5,7 @@ import { throttle } from 'lodash';
import { Link, NavLink } from 'react-router-dom'; import { Link, NavLink } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { injectIntl, defineMessages, FormattedMessage } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
import Avatar from './avatar'; import Avatar from './avatar';
import IconButton from './icon_button'; import IconButton from './icon_button';
@ -168,17 +168,10 @@ class SidebarMenu extends ImmutablePureComponent {
<div className={classes}> <div className={classes}>
<div className='sidebar-menu__wrapper' role='button' onClick={this.handleClose} /> <div className='sidebar-menu__wrapper' role='button' onClick={this.handleClose} />
<div className='sidebar-menu'> <div className='sidebar-menu'>
<div className='sidebar-menu-header'>
<span className='sidebar-menu-header__title'>
<FormattedMessage id='tabs_bar.header' defaultMessage='Account Info' />
</span>
<IconButton title='close' onClick={this.handleClose} icon='close' className='sidebar-menu-header__btn' />
</div>
<div className='sidebar-menu__content'> <div className='sidebar-menu__content'>
<div className='sidebar-menu-profile'> <div className='sidebar-menu-profile'>
<IconButton title='close' onClick={this.handleClose} icon='times' className='sidebar-menu__close' />
<div className='sidebar-menu-profile__avatar'> <div className='sidebar-menu-profile__avatar'>
<Link to={`/@${acct}`} title={acct} onClick={this.handleClose}> <Link to={`/@${acct}`} title={acct} onClick={this.handleClose}>
<Avatar account={account} /> <Avatar account={account} />
@ -284,6 +277,7 @@ class SidebarMenu extends ImmutablePureComponent {
<div className='sidebar-menu__section'> <div className='sidebar-menu__section'>
<Link className='sidebar-menu-item' to='/auth/sign_out' onClick={onClickLogOut}> <Link className='sidebar-menu-item' to='/auth/sign_out' onClick={onClickLogOut}>
<Icon id='sign-out' />
<span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span> <span className='sidebar-menu-item__title'>{intl.formatMessage(messages.logout)}</span>
</Link> </Link>
</div> </div>

30
app/styles/components/sidebar-menu.scss
View file

@ -29,6 +29,7 @@
} }
&__content { &__content {
position: relative;
overflow-y: scroll; overflow-y: scroll;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
@ -84,6 +85,21 @@
} }
} }
.sidebar-menu__close {
position: absolute;
top: 22px;
right: 18px;
i.fa {
font-size: 20px;
}
.svg-icon {
width: 20px;
height: 20px;
}
}
.sidebar-menu-profile { .sidebar-menu-profile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -161,18 +177,26 @@
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
font-size: 15px; font-size: 15px;
font-weight: 400; font-weight: 400;
align-items: center;
&:hover { &:hover {
background-color: hsla(var(--brand-color_hsl), 0.1); background-color: hsla(var(--brand-color_hsl), 0.1);
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.fa { > .fa {
width: 18px; width: 24px;
margin-right: 10px; font-size: 20px;
margin-right: 15px;
text-align: center; text-align: center;
} }
> .svg-icon {
width: 24px;
height: 24px;
margin-right: 15px;
}
&:hover { &:hover {
&__title { &__title {
color: var(--primary-text-color); color: var(--primary-text-color);