mirror
/
soapbox
kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
1
0
Forkuj 1
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Merge branch 'actions-modal-icons' into 'develop' 

Add icons for status action bars

See merge request soapbox-pub/soapbox-fe!853
features-override
Alex Gleason 2021-11-04 19:33:28 +00:00
rodzic 4eb9b3c26e 43fe27eecc
commit 6bb946e9e7
15 zmienionych plików z 450 dodań i 90 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

4
app/soapbox/components/dropdown_menu.js
Wyświetl plik

@ -6,6 +6,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../features/ui/util/optional_motion'; import Motion from '../features/ui/util/optional_motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import { supportsPassiveEvents } from 'detect-passive-events'; import { supportsPassiveEvents } from 'detect-passive-events';
import Icon from 'soapbox/components/icon';
const listenerOptions = supportsPassiveEvents ? { passive: true } : false; const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
let id = 0; let id = 0;
@ -146,7 +147,7 @@ class DropdownMenu extends React.PureComponent {
return <li key={`sep-${i}`} className='dropdown-menu__separator' />; return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
} }
const { text, href, to, newTab, isLogout } = option; const { text, href, to, newTab, isLogout, icon } = option;
return ( return (
<li className='dropdown-menu__item' key={`${text}-${i}`}> <li className='dropdown-menu__item' key={`${text}-${i}`}>
@ -162,6 +163,7 @@ class DropdownMenu extends React.PureComponent {
target={newTab ? '_blank' : null} target={newTab ? '_blank' : null}
data-method={isLogout ? 'delete' : null} data-method={isLogout ? 'delete' : null}
> >
{icon && <Icon src={icon} />}
{text} {text}
</a> </a>
</li> </li>

138
app/soapbox/components/status_action_bar.js
Wyświetl plik

@ -301,15 +301,31 @@ class StatusActionBar extends ImmutablePureComponent {
const menu = []; const menu = [];
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); menu.push({
text: intl.formatMessage(messages.open),
action: this.handleOpen,
icon: require('@tabler/icons/icons/arrows-vertical.svg'),
});
if (publicStatus) { if (publicStatus) {
menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy }); menu.push({
// menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); text: intl.formatMessage(messages.copy),
action: this.handleCopy,
icon: require('@tabler/icons/icons/link.svg'),
});
// menu.push({
// text: intl.formatMessage(messages.embed),
// action: this.handleEmbed,
// icon: require('feather-icons/dist/icons/link-2.svg'),
// });
} }
if (features.bookmarks) { if (features.bookmarks) {
menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark), action: this.handleBookmarkClick }); menu.push({
text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
action: this.handleBookmarkClick,
icon: require(status.get('bookmarked') ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
});
} }
if (!me) { if (!me) {
@ -319,57 +335,133 @@ class StatusActionBar extends ImmutablePureComponent {
menu.push(null); menu.push(null);
if (ownAccount || withDismiss) { if (ownAccount || withDismiss) {
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: this.handleConversationMuteClick,
icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
});
menu.push(null); menu.push(null);
} }
if (ownAccount) { if (ownAccount) {
if (publicStatus) { if (publicStatus) {
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); menu.push({
text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
action: this.handlePinClick,
icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
});
} else { } else {
if (status.get('visibility') === 'private') { if (status.get('visibility') === 'private') {
menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private), action: this.handleReblogClick }); menu.push({
text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
});
} }
} }
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); menu.push({
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); text: intl.formatMessage(messages.delete),
action: this.handleDeleteClick,
icon: require('@tabler/icons/icons/trash.svg'),
});
menu.push({
text: intl.formatMessage(messages.redraft),
action: this.handleRedraftClick,
icon: require('@tabler/icons/icons/edit.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({
text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
action: this.handleMentionClick,
icon: require('feather-icons/dist/icons/at-sign.svg'),
});
if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) { if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
menu.push({ text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }), action: this.handleChatClick }); menu.push({
text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }),
action: this.handleChatClick,
icon: require('@tabler/icons/icons/messages.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); menu.push({
text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }),
action: this.handleDirectClick,
icon: require('@tabler/icons/icons/mail.svg'),
});
} }
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick }); menu.push({
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport }); action: this.handleMuteClick,
icon: require('@tabler/icons/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
action: this.handleBlockClick,
icon: require('@tabler/icons/icons/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
action: this.handleReport,
icon: require('@tabler/icons/icons/flag.svg'),
});
} }
if (isStaff) { if (isStaff) {
menu.push(null); menu.push(null);
if (isAdmin) { if (isAdmin) {
menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/` }); menu.push({
menu.push({ text: intl.formatMessage(messages.admin_status), href: `/pleroma/admin/#/statuses/${status.get('id')}/` }); text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
icon: require('icons/gavel.svg'),
});
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
icon: require('@tabler/icons/icons/pencil.svg'),
});
} }
menu.push({ text: intl.formatMessage(status.get('sensitive') === false ? messages.markStatusSensitive : messages.markStatusNotSensitive), action: this.handleToggleStatusSensitivity }); menu.push({
text: intl.formatMessage(status.get('sensitive') === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: this.handleToggleStatusSensitivity,
icon: require('@tabler/icons/icons/alert-triangle.svg'),
});
if (!ownAccount) { if (!ownAccount) {
menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeactivateUser }); menu.push({
menu.push({ text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeleteUser }); text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
menu.push({ text: intl.formatMessage(messages.deleteStatus), action: this.handleDeleteStatus }); action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: this.handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
});
} }
} }
if (!ownAccount && withGroupAdmin) { if (!ownAccount && withGroupAdmin) {
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.group_remove_account), action: this.handleGroupRemoveAccount }); menu.push({
menu.push({ text: intl.formatMessage(messages.group_remove_post), action: this.handleGroupRemovePost }); text: intl.formatMessage(messages.group_remove_account),
action: this.handleGroupRemoveAccount,
icon: require('@tabler/icons/icons/user-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.group_remove_post),
action: this.handleGroupRemovePost,
icon: require('@tabler/icons/icons/trash.svg'),
});
} }
return menu; return menu;

197
app/soapbox/features/account/components/header.js
Wyświetl plik

@ -182,61 +182,141 @@ class Header extends ImmutablePureComponent {
} }
if (account.get('id') === me) { if (account.get('id') === me) {
menu.push({ text: intl.formatMessage(messages.edit_profile), to: '/settings/profile' }); menu.push({
menu.push({ text: intl.formatMessage(messages.preferences), to: '/settings/preferences' }); text: intl.formatMessage(messages.edit_profile),
to: '/settings/profile',
icon: require('@tabler/icons/icons/user.svg'),
});
menu.push({
text: intl.formatMessage(messages.preferences),
to: '/settings/preferences',
icon: require('@tabler/icons/icons/settings.svg'),
});
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' }); menu.push({
text: intl.formatMessage(messages.follow_requests),
to: '/follow_requests',
icon: require('@tabler/icons/icons/user-plus.svg'),
});
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' }); menu.push({
menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' }); text: intl.formatMessage(messages.mutes),
menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' }); to: '/mutes',
icon: require('@tabler/icons/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.blocks),
to: '/blocks',
icon: require('@tabler/icons/icons/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.domain_blocks),
to: '/domain_blocks',
icon: require('@tabler/icons/icons/ban.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention }); menu.push({
text: intl.formatMessage(messages.mention, { name: account.get('username') }),
action: this.props.onMention,
icon: require('feather-icons/dist/icons/at-sign.svg'),
});
if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) { if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
menu.push({ text: intl.formatMessage(messages.chat, { name: account.get('username') }), action: this.props.onChat }); menu.push({
text: intl.formatMessage(messages.chat, { name: account.get('username') }),
action: this.props.onChat,
icon: require('@tabler/icons/icons/messages.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect }); menu.push({
text: intl.formatMessage(messages.direct, { name: account.get('username') }),
action: this.props.onDirect,
icon:require('@tabler/icons/icons/mail.svg'),
});
} }
if (account.getIn(['relationship', 'following'])) { if (account.getIn(['relationship', 'following'])) {
if (account.getIn(['relationship', 'showing_reblogs'])) { if (account.getIn(['relationship', 'showing_reblogs'])) {
menu.push({ text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }), action: this.props.onReblogToggle }); menu.push({
text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }), action: this.props.onReblogToggle }); menu.push({
text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }),
action: this.props.onReblogToggle,
icon: require('@tabler/icons/icons/repeat.svg'),
});
} }
if (features.accountSubscriptions) { if (features.accountSubscriptions) {
if (account.getIn(['relationship', 'subscribing'])) { if (account.getIn(['relationship', 'subscribing'])) {
menu.push({ text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }), action: this.props.onSubscriptionToggle }); menu.push({
text: intl.formatMessage(messages.unsubscribe, { name: account.get('username') }),
action: this.props.onSubscriptionToggle,
icon: require('@tabler/icons/icons/bell.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.subscribe, { name: account.get('username') }), action: this.props.onSubscriptionToggle }); menu.push({
text: intl.formatMessage(messages.subscribe, { name: account.get('username') }),
action: this.props.onSubscriptionToggle,
icon: require('@tabler/icons/icons/bell-off.svg'),
});
} }
} }
if (features.lists) { if (features.lists) {
menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList }); menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
});
} }
// menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle }); // menu.push({ text: intl.formatMessage(account.getIn(['relationship', 'endorsed']) ? messages.unendorse : messages.endorse), action: this.props.onEndorseToggle });
menu.push(null); menu.push(null);
} else if (features.lists && features.unrestrictedLists) { } else if (features.lists && features.unrestrictedLists) {
menu.push({ text: intl.formatMessage(messages.add_or_remove_from_list), action: this.props.onAddToList }); menu.push({
text: intl.formatMessage(messages.add_or_remove_from_list),
action: this.props.onAddToList,
icon: require('@tabler/icons/icons/list.svg'),
});
} }
if (account.getIn(['relationship', 'muting'])) { if (account.getIn(['relationship', 'muting'])) {
menu.push({ text: intl.formatMessage(messages.unmute, { name: account.get('username') }), action: this.props.onMute }); menu.push({
text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.mute, { name: account.get('username') }), action: this.props.onMute }); menu.push({
text: intl.formatMessage(messages.mute, { name: account.get('username') }),
action: this.props.onMute,
icon: require('@tabler/icons/icons/circle-x.svg'),
});
} }
if (account.getIn(['relationship', 'blocking'])) { if (account.getIn(['relationship', 'blocking'])) {
menu.push({ text: intl.formatMessage(messages.unblock, { name: account.get('username') }), action: this.props.onBlock }); menu.push({
text: intl.formatMessage(messages.unblock, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.props.onBlock }); menu.push({
text: intl.formatMessage(messages.block, { name: account.get('username') }),
action: this.props.onBlock,
icon: require('@tabler/icons/icons/ban.svg'),
});
} }
menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.props.onReport }); menu.push({
text: intl.formatMessage(messages.report, { name: account.get('username') }),
action: this.props.onReport,
icon: require('@tabler/icons/icons/flag.svg'),
});
} }
if (isRemote(account)) { if (isRemote(account)) {
@ -245,9 +325,17 @@ class Header extends ImmutablePureComponent {
menu.push(null); menu.push(null);
if (account.getIn(['relationship', 'domain_blocking'])) { if (account.getIn(['relationship', 'domain_blocking'])) {
menu.push({ text: intl.formatMessage(messages.unblockDomain, { domain }), action: this.props.onUnblockDomain }); menu.push({
text: intl.formatMessage(messages.unblockDomain, { domain }),
action: this.props.onUnblockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.blockDomain, { domain }), action: this.props.onBlockDomain }); menu.push({
text: intl.formatMessage(messages.blockDomain, { domain }),
action: this.props.onBlockDomain,
icon: require('@tabler/icons/icons/ban.svg'),
});
} }
} }
@ -255,31 +343,74 @@ class Header extends ImmutablePureComponent {
menu.push(null); menu.push(null);
if (isAdmin(meAccount)) { if (isAdmin(meAccount)) {
menu.push({ text: intl.formatMessage(messages.admin_account, { name: account.get('username') }), href: `/pleroma/admin/#/users/${account.get('id')}/`, newTab: true }); menu.push({
text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
href: `/pleroma/admin/#/users/${account.get('id')}/`, newTab: true,
icon: require('icons/gavel.svg'),
});
} }
if (account.get('id') !== me && isLocal(account)) { if (account.get('id') !== me && isLocal(account)) {
if (isAdmin(account)) { if (isAdmin(account)) {
menu.push({ text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }), action: this.props.onPromoteToModerator }); menu.push({
menu.push({ text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }), action: this.props.onDemoteToUser }); text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
});
} else if (isModerator(account)) { } else if (isModerator(account)) {
menu.push({ text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }), action: this.props.onPromoteToAdmin }); menu.push({
menu.push({ text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }), action: this.props.onDemoteToUser }); text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
action: this.props.onDemoteToUser,
icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }), action: this.props.onPromoteToAdmin }); menu.push({
menu.push({ text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }), action: this.props.onPromoteToModerator }); text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
action: this.props.onPromoteToAdmin,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
});
menu.push({
text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }),
action: this.props.onPromoteToModerator,
icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
});
} }
} }
if (isVerified(account)) { if (isVerified(account)) {
menu.push({ text: intl.formatMessage(messages.unverifyUser, { name: account.get('username') }), action: this.props.onUnverifyUser }); menu.push({
text: intl.formatMessage(messages.unverifyUser, { name: account.get('username') }),
action: this.props.onUnverifyUser,
icon: require('@tabler/icons/icons/check.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.verifyUser, { name: account.get('username') }), action: this.props.onVerifyUser }); menu.push({
text: intl.formatMessage(messages.verifyUser, { name: account.get('username') }),
action: this.props.onVerifyUser,
icon: require('@tabler/icons/icons/check.svg'),
});
} }
if (account.get('id') !== me) { if (account.get('id') !== me) {
menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }), action: this.props.onDeactivateUser }); menu.push({
menu.push({ text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }), action: this.props.onDeleteUser }); text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }),
action: this.props.onDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }),
icon: require('@tabler/icons/icons/user-minus.svg'),
});
} }
} }

2
app/soapbox/features/admin/components/report.js
Wyświetl plik

@ -37,9 +37,11 @@ class Report extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(messages.deactivateUser, { name: report.getIn(['account', 'username']) }), text: intl.formatMessage(messages.deactivateUser, { name: report.getIn(['account', 'username']) }),
action: this.handleDeactivateUser, action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
}, { }, {
text: intl.formatMessage(messages.deleteUser, { name: report.getIn(['account', 'username']) }), text: intl.formatMessage(messages.deleteUser, { name: report.getIn(['account', 'username']) }),
action: this.handleDeleteUser, action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
}]; }];
} }

2
app/soapbox/features/admin/components/report_status.js
Wyświetl plik

@ -32,9 +32,11 @@ class ReportStatus extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }), text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
to: `/@${acct}/posts/${status.get('id')}`, to: `/@${acct}/posts/${status.get('id')}`,
icon: require('@tabler/icons/icons/pencil.svg'),
}, { }, {
text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }), text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
action: this.handleDeleteStatus, action: this.handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
}]; }];
} }

1
app/soapbox/features/admin/reports.js
Wyświetl plik

@ -44,6 +44,7 @@ class Reports extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(messages.modlog), text: intl.formatMessage(messages.modlog),
to: '/admin/log', to: '/admin/log',
icon: require('@tabler/icons/icons/list.svg'),
}]; }];
} }

1
app/soapbox/features/backups/index.js
Wyświetl plik

@ -52,6 +52,7 @@ class Backups extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(messages.create), text: intl.formatMessage(messages.create),
action: this.handleCreateBackup, action: this.handleCreateBackup,
icon: require('@tabler/icons/icons/plus.svg'),
}]; }];
} }

12
app/soapbox/features/chats/components/chat_message_list.js
Wyświetl plik

@ -261,8 +261,16 @@ class ChatMessageList extends ImmutablePureComponent {
renderMessage = (chatMessage) => { renderMessage = (chatMessage) => {
const { me, intl } = this.props; const { me, intl } = this.props;
const menu = [ const menu = [
{ text: intl.formatMessage(messages.delete), action: this.handleDeleteMessage(chatMessage.get('chat_id'), chatMessage.get('id')) }, {
{ text: intl.formatMessage(messages.report), action: this.handleReportUser(chatMessage.get('account_id')) }, text: intl.formatMessage(messages.delete),
action: this.handleDeleteMessage(chatMessage.get('chat_id'), chatMessage.get('id')),
icon: require('@tabler/icons/icons/trash.svg'),
},
{
text: intl.formatMessage(messages.report),
action: this.handleReportUser(chatMessage.get('account_id')),
icon: require('@tabler/icons/icons/flag.svg'),
},
]; ];
return ( return (

12
app/soapbox/features/groups/timeline/components/header.js
Wyświetl plik

@ -50,8 +50,16 @@ class Header extends ImmutablePureComponent {
const { group, intl } = this.props; const { group, intl } = this.props;
const menu = [ const menu = [
{ text: intl.formatMessage(messages.edit), to: `/groups/${group.get('id')}/edit` }, {
{ text: intl.formatMessage(messages.removed_accounts), to: `/groups/${group.get('id')}/removed_accounts` }, text: intl.formatMessage(messages.edit),
to: `/groups/${group.get('id')}/edit`,
icon: require('@tabler/icons/icons/edit.svg'),
},
{
text: intl.formatMessage(messages.removed_accounts),
to: `/groups/${group.get('id')}/removed_accounts`,
icon: require('@tabler/icons/icons/trash.svg'),
},
]; ];
return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />; return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;

120
app/soapbox/features/status/components/action_bar.js
Wyświetl plik

@ -317,59 +317,139 @@ class ActionBar extends React.PureComponent {
const menu = []; const menu = [];
if (publicStatus) { if (publicStatus) {
menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy }); menu.push({
// menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed }); text: intl.formatMessage(messages.copy),
action: this.handleCopy,
icon: require('@tabler/icons/icons/link.svg'),
});
// menu.push({
// text: intl.formatMessage(messages.embed),
// action: this.handleEmbed,
// icon: require('feather-icons/dist/icons/link-2.svg'),
// });
} }
if (features.bookmarks) { if (features.bookmarks) {
menu.push({ text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark), action: this.handleBookmarkClick }); menu.push({
text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
action: this.handleBookmarkClick,
icon: require(status.get('bookmarked') ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
});
} }
menu.push(null); menu.push(null);
if (ownAccount) { if (ownAccount) {
if (publicStatus) { if (publicStatus) {
menu.push({ text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin), action: this.handlePinClick }); menu.push({
text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
action: this.handlePinClick,
icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
});
} else { } else {
if (status.get('visibility') === 'private') { if (status.get('visibility') === 'private') {
menu.push({ text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private), action: this.handleReblogClick }); menu.push({
text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private),
action: this.handleReblogClick,
icon: require('@tabler/icons/icons/repeat.svg'),
});
} }
} }
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick }); menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: this.handleConversationMuteClick,
icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
});
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick }); menu.push({
menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick }); text: intl.formatMessage(messages.delete),
action: this.handleDeleteClick,
icon: require('@tabler/icons/icons/trash.svg'),
});
menu.push({
text: intl.formatMessage(messages.redraft),
action: this.handleRedraftClick,
icon: require('@tabler/icons/icons/edit.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick }); menu.push({
text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
action: this.handleMentionClick,
icon: require('feather-icons/dist/icons/at-sign.svg'),
});
if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) { if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
menu.push({ text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }), action: this.handleChatClick }); menu.push({
text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }),
action: this.handleChatClick,
icon: require('@tabler/icons/icons/messages.svg'),
});
} else { } else {
menu.push({ text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }), action: this.handleDirectClick }); menu.push({
text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }),
action: this.handleDirectClick,
icon: require('@tabler/icons/icons/mail.svg'),
});
} }
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick }); menu.push({
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick }); text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport }); action: this.handleMuteClick,
icon: require('@tabler/icons/icons/circle-x.svg'),
});
menu.push({
text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
action: this.handleBlockClick,
icon: require('@tabler/icons/icons/ban.svg'),
});
menu.push({
text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
action: this.handleReport,
icon: require('@tabler/icons/icons/flag.svg'),
});
} }
if (isStaff) { if (isStaff) {
menu.push(null); menu.push(null);
if (isAdmin) { if (isAdmin) {
menu.push({ text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }), href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/` }); menu.push({
menu.push({ text: intl.formatMessage(messages.admin_status), href: `/pleroma/admin/#/statuses/${status.get('id')}/` }); text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
icon: require('icons/gavel.svg'),
});
menu.push({
text: intl.formatMessage(messages.admin_status),
href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
icon: require('@tabler/icons/icons/pencil.svg'),
});
} }
menu.push({ text: intl.formatMessage(status.get('sensitive') === false ? messages.markStatusSensitive : messages.markStatusNotSensitive), action: this.handleToggleStatusSensitivity }); menu.push({
text: intl.formatMessage(status.get('sensitive') === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
action: this.handleToggleStatusSensitivity,
icon: require('@tabler/icons/icons/alert-triangle.svg'),
});
if (!ownAccount) { if (!ownAccount) {
menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeactivateUser }); menu.push({
menu.push({ text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeleteUser }); text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
menu.push({ text: intl.formatMessage(messages.deleteStatus), action: this.handleDeleteStatus }); action: this.handleDeactivateUser,
icon: require('@tabler/icons/icons/user-off.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
action: this.handleDeleteUser,
icon: require('@tabler/icons/icons/user-minus.svg'),
});
menu.push({
text: intl.formatMessage(messages.deleteStatus),
action: this.handleDeleteStatus,
icon: require('@tabler/icons/icons/trash.svg'),
});
} }
} }

1
app/soapbox/features/ui/components/instance_info_panel.js
Wyświetl plik

@ -56,6 +56,7 @@ class InstanceInfoPanel extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }), text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }),
action: this.handlePinHost, action: this.handlePinHost,
icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
}]; }];
} }

1
app/soapbox/features/ui/components/instance_moderation_panel.js
Wyświetl plik

@ -52,6 +52,7 @@ class InstanceModerationPanel extends ImmutablePureComponent {
return [{ return [{
text: intl.formatMessage(messages.editFederation), text: intl.formatMessage(messages.editFederation),
action: this.handleEditFederation, action: this.handleEditFederation,
icon: require('@tabler/icons/icons/edit.svg'),
}]; }];
} }

13
app/soapbox/features/ui/components/profile_dropdown.js
Wyświetl plik

@ -113,8 +113,17 @@ class ProfileDropdown extends React.PureComponent {
menu.push(null); menu.push(null);
menu.push({ text: intl.formatMessage(messages.add), to: '/auth/sign_in' }); menu.push({
menu.push({ text: intl.formatMessage(messages.logout, { acct: account.get('acct') }), to: '/auth/sign_out', action: this.handleLogOut }); text: intl.formatMessage(messages.add),
to: '/auth/sign_in',
icon: require('@tabler/icons/icons/plus.svg'),
});
menu.push({
text: intl.formatMessage(messages.logout, { acct: account.get('acct') }),
to: '/auth/sign_out',
action: this.handleLogOut,
icon: require('@tabler/icons/icons/logout.svg'),
});
return ( return (
<div className='compose__action-bar' style={{ 'marginTop':'-6px' }}> <div className='compose__action-bar' style={{ 'marginTop':'-6px' }}>

20
app/styles/components/dropdown-menu.scss
Wyświetl plik

@ -9,7 +9,7 @@
padding: 4px 0; padding: 4px 0;
color: var(--primary-text-color); color: var(--primary-text-color);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
max-width: 300px; max-width: 350px;
&.left { transform-origin: 100% 50%; } &.left { transform-origin: 100% 50%; }
&.top { transform-origin: 50% 100%; } &.top { transform-origin: 50% 100%; }
&.bottom { transform-origin: 50% 0; } &.bottom { transform-origin: 50% 0; }
@ -56,10 +56,12 @@
} }
&__item a { &__item a {
display: block; display: flex;
align-items: center;
box-sizing: border-box; box-sizing: border-box;
overflow: hidden; overflow: hidden;
padding: 3px 10px 1px; padding: 4px 10px;
font-size: 15px;
text-decoration: none; text-decoration: none;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
@ -76,13 +78,23 @@
color: #fff; color: #fff;
} }
} }
.svg-icon:first-child {
height: 20px;
width: 20px;
margin-right: 10px;
svg {
stroke-width: 1.5;
}
}
} }
&__separator { &__separator {
display: block; display: block;
margin: 10px !important; margin: 10px !important;
height: 1px; height: 1px;
background: var(--foreground-color); background: hsla(var(--primary-text-color_hsl), 0.12);
} }
&__item .account { &__item .account {

16
app/styles/components/modal.scss
Wyświetl plik

@ -572,8 +572,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 13px 10px 12px; padding: 13px 10px 12px;
color: var(--primary-text-color--faint); color: var(--primary-text-color);
text-decoration: none; text-decoration: none;
opacity: 0.6;
&, &,
button { button {
@ -582,8 +583,9 @@
&.active, &.active,
&:hover, &:hover,
&:active,
&:focus { &:focus {
opacity: 1;
&, &,
button { button {
background: var(--background-color); background: var(--background-color);
@ -592,7 +594,15 @@
} }
} }
.svg-icon:first-child { margin-right: 10px; } .svg-icon:first-child {
height: 20px;
width: 20px;
margin-right: 10px;
svg {
stroke-width: 1.5;
}
}
} }
} }
} }