tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improved dropdowns

Browse Source
This commit is contained in:
Eugen Rochko
2017-03-01 00:53:11 +01:00
parent 955e9088d7
commit 92569b1f0d
6 changed files with 90 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/assets/javascripts/components/components/dropdown_menu.jsx
View File

@@ -10,12 +10,44 @@ const DropdownMenu = React.createClass({
direction: React.PropTypes.string
},
getDefaultProps () {
return {
direction: 'left'
};
},
mixins: [PureRenderMixin],
setRef (c) {
this.dropdown = c;
},
handleClick (i, e) {
const { action } = this.props.items[i];
if (typeof action === 'function') {
e.preventDefault();
action();
this.dropdown.hide();
}
},
renderItem (item, i) {
if (item === null) {
return <li key={i} className='dropdown__sep' />;
}
const { text, action, href = '#' } = item;
return (
<li key={i}>
<a href={href} target='_blank' rel='noopener' onClick={this.handleClick.bind(this, i)}>
{text}
</a>
</li>
);
},
render () {
const { icon, items, size, direction } = this.props;
const directionClass = (direction === "left") ? "dropdown__left" : "dropdown__right";
@@ -28,13 +60,7 @@ const DropdownMenu = React.createClass({
<DropdownContent className={directionClass} style={{ lineHeight: '18px', textAlign: 'left' }}>
<ul>
{items.map(({ text, action, href = '#' }, i) => <li key={i}><a href={href} target='_blank' rel='noopener' onClick={e => {
if (typeof action === 'function') {
e.preventDefault();
action();
this.dropdown.hide();
}
}}>{text}</a></li>)}
{items.map(this.renderItem)}
</ul>
</DropdownContent>
</Dropdown>

16
app/assets/javascripts/components/components/status_action_bar.jsx
View File

@@ -6,13 +6,13 @@ import { defineMessages, injectIntl } from 'react-intl';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
mention: { id: 'status.mention', defaultMessage: 'Mention' },
block: { id: 'account.block', defaultMessage: 'Block' },
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
reply: { id: 'status.reply', defaultMessage: 'Reply' },
reblog: { id: 'status.reblog', defaultMessage: 'Reblog' },
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
open: { id: 'status.open', defaultMessage: 'Expand' },
report: { id: 'status.report', defaultMessage: 'Report' }
open: { id: 'status.open', defaultMessage: 'Expand this status' },
report: { id: 'status.report', defaultMessage: 'Report @{name}' }
});
const StatusActionBar = React.createClass({
@@ -74,13 +74,15 @@ const StatusActionBar = React.createClass({
let menu = [];
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
menu.push(null);
if (status.getIn(['account', 'id']) === me) {
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
} else {
menu.push({ text: intl.formatMessage(messages.mention), action: this.handleMentionClick });
menu.push({ text: intl.formatMessage(messages.block), action: this.handleBlockClick });
menu.push({ text: intl.formatMessage(messages.report), action: this.handleReport });
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
menu.push(null);
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
}
return (