From bdb61c14e3031e5e967df067ffb440c09018fbe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 4 Nov 2021 19:16:04 +0100 Subject: [PATCH 1/3] Add icons for status action bars MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/soapbox/components/dropdown_menu.js | 4 +- app/soapbox/components/status_action_bar.js | 138 +++++++++++++++--- .../features/status/components/action_bar.js | 120 ++++++++++++--- app/styles/components/dropdown-menu.scss | 20 ++- app/styles/components/modal.scss | 10 +- 5 files changed, 243 insertions(+), 49 deletions(-) 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; + } + } } } } From e66993879395c084b1b490dd053da58675bbb550 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 4 Nov 2021 19:28:23 +0100 Subject: [PATCH 2/3] Fix icons opacity MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- app/styles/components/modal.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss index 2c3061c60..cf77960c5 100644 --- a/app/styles/components/modal.scss +++ b/app/styles/components/modal.scss @@ -572,8 +572,9 @@ display: flex; align-items: center; padding: 13px 10px 12px; - color: var(--primary-text-color--faint); + color: var(--primary-text-color); text-decoration: none; + opacity: 0.6; &, button { @@ -582,8 +583,9 @@ &.active, &:hover, - &:active, &:focus { + opacity: 1; + &, button { background: var(--background-color); From 43fe27eecc99899ddb71b4c8d53d972c09aad51b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Thu, 4 Nov 2021 20:19:04 +0100 Subject: [PATCH 3/3] Add icons to all? dropdown menus MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../features/account/components/header.js | 197 +++++++++++++++--- .../features/admin/components/report.js | 2 + .../admin/components/report_status.js | 2 + app/soapbox/features/admin/reports.js | 1 + app/soapbox/features/backups/index.js | 1 + .../chats/components/chat_message_list.js | 12 +- .../groups/timeline/components/header.js | 12 +- .../ui/components/instance_info_panel.js | 1 + .../components/instance_moderation_panel.js | 1 + .../ui/components/profile_dropdown.js | 13 +- 10 files changed, 203 insertions(+), 39 deletions(-) diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index 93b75108d..c443e3716 100644 --- a/app/soapbox/features/account/components/header.js +++ b/app/soapbox/features/account/components/header.js @@ -182,61 +182,141 @@ class Header extends ImmutablePureComponent { } if (account.get('id') === me) { - menu.push({ text: intl.formatMessage(messages.edit_profile), to: '/settings/profile' }); - menu.push({ text: intl.formatMessage(messages.preferences), to: '/settings/preferences' }); + menu.push({ + 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({ 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({ 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' }); + menu.push({ + text: intl.formatMessage(messages.mutes), + 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 { - 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) { - 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 { - 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', '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 { - 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 (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 { - 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) { - 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(null); } 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'])) { - 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 { - 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'])) { - 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 { - 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)) { @@ -245,9 +325,17 @@ class Header extends ImmutablePureComponent { menu.push(null); 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 { - 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); 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 (isAdmin(account)) { - menu.push({ text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }), action: this.props.onPromoteToModerator }); - menu.push({ text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }), action: this.props.onDemoteToUser }); + menu.push({ + 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)) { - menu.push({ text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }), action: this.props.onPromoteToAdmin }); - menu.push({ text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }), action: this.props.onDemoteToUser }); + menu.push({ + 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 { - menu.push({ text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }), action: this.props.onPromoteToAdmin }); - menu.push({ text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }), action: this.props.onPromoteToModerator }); + menu.push({ + 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)) { - 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 { - 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) { - menu.push({ text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }), action: this.props.onDeactivateUser }); - menu.push({ text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }), action: this.props.onDeleteUser }); + menu.push({ + 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'), + }); } } diff --git a/app/soapbox/features/admin/components/report.js b/app/soapbox/features/admin/components/report.js index 297b0d55d..8ef9a3172 100644 --- a/app/soapbox/features/admin/components/report.js +++ b/app/soapbox/features/admin/components/report.js @@ -37,9 +37,11 @@ class Report extends ImmutablePureComponent { return [{ text: intl.formatMessage(messages.deactivateUser, { name: report.getIn(['account', 'username']) }), action: this.handleDeactivateUser, + icon: require('@tabler/icons/icons/user-off.svg'), }, { text: intl.formatMessage(messages.deleteUser, { name: report.getIn(['account', 'username']) }), action: this.handleDeleteUser, + icon: require('@tabler/icons/icons/user-minus.svg'), }]; } diff --git a/app/soapbox/features/admin/components/report_status.js b/app/soapbox/features/admin/components/report_status.js index 11110adb8..83bb4ef46 100644 --- a/app/soapbox/features/admin/components/report_status.js +++ b/app/soapbox/features/admin/components/report_status.js @@ -32,9 +32,11 @@ class ReportStatus extends ImmutablePureComponent { return [{ text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }), to: `/@${acct}/posts/${status.get('id')}`, + icon: require('@tabler/icons/icons/pencil.svg'), }, { text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }), action: this.handleDeleteStatus, + icon: require('@tabler/icons/icons/trash.svg'), }]; } diff --git a/app/soapbox/features/admin/reports.js b/app/soapbox/features/admin/reports.js index 141db1d45..ac34352c6 100644 --- a/app/soapbox/features/admin/reports.js +++ b/app/soapbox/features/admin/reports.js @@ -44,6 +44,7 @@ class Reports extends ImmutablePureComponent { return [{ text: intl.formatMessage(messages.modlog), to: '/admin/log', + icon: require('@tabler/icons/icons/list.svg'), }]; } diff --git a/app/soapbox/features/backups/index.js b/app/soapbox/features/backups/index.js index 7b161cc35..a247db302 100644 --- a/app/soapbox/features/backups/index.js +++ b/app/soapbox/features/backups/index.js @@ -52,6 +52,7 @@ class Backups extends ImmutablePureComponent { return [{ text: intl.formatMessage(messages.create), action: this.handleCreateBackup, + icon: require('@tabler/icons/icons/plus.svg'), }]; } diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index 6e570e06c..7689bb4f9 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/app/soapbox/features/chats/components/chat_message_list.js @@ -261,8 +261,16 @@ class ChatMessageList extends ImmutablePureComponent { renderMessage = (chatMessage) => { const { me, intl } = this.props; 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 ( diff --git a/app/soapbox/features/groups/timeline/components/header.js b/app/soapbox/features/groups/timeline/components/header.js index 34d0bb2c5..0355a1c4a 100644 --- a/app/soapbox/features/groups/timeline/components/header.js +++ b/app/soapbox/features/groups/timeline/components/header.js @@ -50,8 +50,16 @@ class Header extends ImmutablePureComponent { const { group, intl } = this.props; 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 ; diff --git a/app/soapbox/features/ui/components/instance_info_panel.js b/app/soapbox/features/ui/components/instance_info_panel.js index 57c1bdabd..6d6356871 100644 --- a/app/soapbox/features/ui/components/instance_info_panel.js +++ b/app/soapbox/features/ui/components/instance_info_panel.js @@ -56,6 +56,7 @@ class InstanceInfoPanel extends ImmutablePureComponent { return [{ text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }), action: this.handlePinHost, + icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'), }]; } diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.js b/app/soapbox/features/ui/components/instance_moderation_panel.js index 693940540..c52950457 100644 --- a/app/soapbox/features/ui/components/instance_moderation_panel.js +++ b/app/soapbox/features/ui/components/instance_moderation_panel.js @@ -52,6 +52,7 @@ class InstanceModerationPanel extends ImmutablePureComponent { return [{ text: intl.formatMessage(messages.editFederation), action: this.handleEditFederation, + icon: require('@tabler/icons/icons/edit.svg'), }]; } diff --git a/app/soapbox/features/ui/components/profile_dropdown.js b/app/soapbox/features/ui/components/profile_dropdown.js index 565be4e10..7ec2c4ea3 100644 --- a/app/soapbox/features/ui/components/profile_dropdown.js +++ b/app/soapbox/features/ui/components/profile_dropdown.js @@ -113,8 +113,17 @@ class ProfileDropdown extends React.PureComponent { menu.push(null); - menu.push({ text: intl.formatMessage(messages.add), to: '/auth/sign_in' }); - menu.push({ text: intl.formatMessage(messages.logout, { acct: account.get('acct') }), to: '/auth/sign_out', action: this.handleLogOut }); + menu.push({ + 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 (