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] 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; + } + } } } }