diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.js
index 2b0b01bd8..43670621b 100644
--- a/app/soapbox/components/dropdown_menu.js
+++ b/app/soapbox/components/dropdown_menu.js
@@ -6,6 +6,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../features/ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import { supportsPassiveEvents } from 'detect-passive-events';
+import Icon from 'soapbox/components/icon';
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
let id = 0;
@@ -146,7 +147,7 @@ class DropdownMenu extends React.PureComponent {
return ;
}
- const { text, href, to, newTab, isLogout } = option;
+ const { text, href, to, newTab, isLogout, icon } = option;
return (
@@ -162,6 +163,7 @@ class DropdownMenu extends React.PureComponent {
target={newTab ? '_blank' : null}
data-method={isLogout ? 'delete' : null}
>
+ {icon && }
{text}
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 4baad56c4..8829f6a18 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -301,15 +301,31 @@ class StatusActionBar extends ImmutablePureComponent {
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) {
- menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
- // menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
+ menu.push({
+ 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) {
- 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) {
@@ -319,57 +335,133 @@ class StatusActionBar extends ImmutablePureComponent {
menu.push(null);
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);
}
if (ownAccount) {
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 {
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({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
+ menu.push({
+ 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 {
- 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) {
- 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 {
- 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({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
- 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 });
+ menu.push({
+ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
+ 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) {
menu.push(null);
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({ text: intl.formatMessage(messages.admin_status), href: `/pleroma/admin/#/statuses/${status.get('id')}/` });
+ menu.push({
+ 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) {
- menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeactivateUser });
- menu.push({ text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeleteUser });
- menu.push({ text: intl.formatMessage(messages.deleteStatus), action: this.handleDeleteStatus });
+ menu.push({
+ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
+ 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) {
menu.push(null);
- menu.push({ text: intl.formatMessage(messages.group_remove_account), action: this.handleGroupRemoveAccount });
- menu.push({ text: intl.formatMessage(messages.group_remove_post), action: this.handleGroupRemovePost });
+ menu.push({
+ 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;
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index 9dbc73923..272668a45 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -317,59 +317,139 @@ class ActionBar extends React.PureComponent {
const menu = [];
if (publicStatus) {
- menu.push({ text: intl.formatMessage(messages.copy), action: this.handleCopy });
- // menu.push({ text: intl.formatMessage(messages.embed), action: this.handleEmbed });
+ menu.push({
+ 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) {
- 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);
if (ownAccount) {
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 {
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({ 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({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
- menu.push({ text: intl.formatMessage(messages.redraft), action: this.handleRedraftClick });
+ menu.push({
+ 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 {
- 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) {
- 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 {
- 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({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
- 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 });
+ menu.push({
+ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
+ 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) {
menu.push(null);
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({ text: intl.formatMessage(messages.admin_status), href: `/pleroma/admin/#/statuses/${status.get('id')}/` });
+ menu.push({
+ 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) {
- menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeactivateUser });
- menu.push({ text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }), action: this.handleDeleteUser });
- menu.push({ text: intl.formatMessage(messages.deleteStatus), action: this.handleDeleteStatus });
+ menu.push({
+ text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
+ 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'),
+ });
}
}
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 93c0d3bdc..52ea326b5 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -9,7 +9,7 @@
padding: 4px 0;
color: var(--primary-text-color);
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
- max-width: 300px;
+ max-width: 350px;
&.left { transform-origin: 100% 50%; }
&.top { transform-origin: 50% 100%; }
&.bottom { transform-origin: 50% 0; }
@@ -56,10 +56,12 @@
}
&__item a {
- display: block;
+ display: flex;
+ align-items: center;
box-sizing: border-box;
overflow: hidden;
- padding: 3px 10px 1px;
+ padding: 4px 10px;
+ font-size: 15px;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
@@ -76,13 +78,23 @@
color: #fff;
}
}
+
+ .svg-icon:first-child {
+ height: 20px;
+ width: 20px;
+ margin-right: 10px;
+
+ svg {
+ stroke-width: 1.5;
+ }
+ }
}
&__separator {
display: block;
margin: 10px !important;
height: 1px;
- background: var(--foreground-color);
+ background: hsla(var(--primary-text-color_hsl), 0.12);
}
&__item .account {
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 1f371e775..2c3061c60 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -592,7 +592,15 @@
}
}
- .svg-icon:first-child { margin-right: 10px; }
+ .svg-icon:first-child {
+ height: 20px;
+ width: 20px;
+ margin-right: 10px;
+
+ svg {
+ stroke-width: 1.5;
+ }
+ }
}
}
}