* Add profile options on compose form * Remove unused imports to appease codeclimate * Play nicely with cancel button and use ellipsis-v instead of hamburger * Fix whitespace and quotes to appease codeclimatemaster
@@ -0,0 +1,53 @@ | |||
import React from 'react'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import PropTypes from 'prop-types'; | |||
import DropdownMenuContainer from '../../../containers/dropdown_menu_container'; | |||
import { defineMessages, injectIntl } from 'react-intl'; | |||
const messages = defineMessages({ | |||
edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, | |||
pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, | |||
preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, | |||
follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, | |||
favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, | |||
lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, | |||
blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, | |||
domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' }, | |||
mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, | |||
}); | |||
@injectIntl | |||
export default class ActionBar extends React.PureComponent { | |||
static propTypes = { | |||
account: ImmutablePropTypes.map.isRequired, | |||
intl: PropTypes.object.isRequired, | |||
}; | |||
render () { | |||
const { intl } = this.props; | |||
let menu = []; | |||
menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' }); | |||
menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' }); | |||
menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' }); | |||
menu.push(null); | |||
menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' }); | |||
menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' }); | |||
menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' }); | |||
menu.push(null); | |||
menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' }); | |||
menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' }); | |||
menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' }); | |||
return ( | |||
<div className='compose__action-bar'> | |||
<div className='compose__action-bar-dropdown'> | |||
<DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' /> | |||
</div> | |||
</div> | |||
); | |||
} | |||
} |
@@ -1,9 +1,10 @@ | |||
import React from 'react'; | |||
import PropTypes from 'prop-types'; | |||
import ImmutablePropTypes from 'react-immutable-proptypes'; | |||
import ActionBar from './action_bar'; | |||
import Avatar from '../../../components/avatar'; | |||
import IconButton from '../../../components/icon_button'; | |||
import Permalink from '../../../components/permalink'; | |||
import IconButton from '../../../components/icon_button'; | |||
import { FormattedMessage } from 'react-intl'; | |||
import ImmutablePureComponent from 'react-immutable-pure-component'; | |||
@@ -30,7 +31,10 @@ export default class NavigationBar extends ImmutablePureComponent { | |||
<a href='/settings/profile' className='navigation-bar__profile-edit'><FormattedMessage id='navigation_bar.edit_profile' defaultMessage='Edit profile' /></a> | |||
</div> | |||
<IconButton title='' icon='close' onClick={this.props.onClose} /> | |||
<div class='navigation-bar__actions'> | |||
<IconButton className='close' title='' icon='close' onClick={this.props.onClose} /> | |||
<ActionBar account={this.props.account} /> | |||
</div> | |||
</div> | |||
); | |||
} | |||
@@ -1510,9 +1510,21 @@ a.account__display-name { | |||
text-decoration: none; | |||
} | |||
.icon-button { | |||
pointer-events: none; | |||
opacity: 0; | |||
.navigation-bar__actions { | |||
position: relative; | |||
.icon-button.close { | |||
position: absolute; | |||
pointer-events: none; | |||
transform: scale(0.0, 1.0) translate(-100%, 0); | |||
opacity: 0; | |||
} | |||
.compose__action-bar .icon-button { | |||
pointer-events: auto; | |||
transform: scale(1.0, 1.0) translate(0, 0); | |||
opacity: 1; | |||
} | |||
} | |||
} | |||
@@ -4932,9 +4944,18 @@ noscript { | |||
transition: margin-top $duration $delay; | |||
} | |||
& > .icon-button { | |||
will-change: opacity; | |||
transition: opacity $duration $delay; | |||
.navigation-bar__actions { | |||
& > .icon-button.close { | |||
will-change: opacity transform; | |||
transition: opacity $duration * 0.5 $delay, | |||
transform $duration $delay; | |||
} | |||
& > .compose__action-bar .icon-button { | |||
will-change: opacity transform; | |||
transition: opacity $duration * 0.5 $delay + $duration * 0.5, | |||
transform $duration $delay; | |||
} | |||
} | |||
} | |||
@@ -4961,9 +4982,18 @@ noscript { | |||
margin-top: -50px; | |||
} | |||
.icon-button { | |||
pointer-events: auto; | |||
opacity: 1; | |||
.navigation-bar__actions { | |||
.icon-button.close { | |||
pointer-events: auto; | |||
opacity: 1; | |||
transform: scale(1.0, 1.0) translate(0, 0); | |||
} | |||
.compose__action-bar .icon-button { | |||
pointer-events: none; | |||
opacity: 0; | |||
transform: scale(0.0, 1.0) translate(100%, 0); | |||
} | |||
} | |||
} | |||
} | |||