From 190829fd091aac5c9be82dddf5d601ad4edbd169 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Apr 2022 17:02:37 -0500 Subject: [PATCH 01/10] StatusInteractionBar: fix emoji react styles --- .../components/status-interaction-bar.tsx | 46 +++++++------------ app/styles/components/emoji-reacts.scss | 11 +---- 2 files changed, 19 insertions(+), 38 deletions(-) diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx index 11bd0916a..2fdc4808d 100644 --- a/app/soapbox/features/status/components/status-interaction-bar.tsx +++ b/app/soapbox/features/status/components/status-interaction-bar.tsx @@ -5,11 +5,10 @@ import { FormattedNumber } from 'react-intl'; import { useDispatch } from 'react-redux'; import { openModal } from 'soapbox/actions/modals'; -import emojify from 'soapbox/features/emoji/emoji'; import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks'; import { reduceEmoji } from 'soapbox/utils/emoji_reacts'; -import { HStack, IconButton, Text } from '../../../components/ui'; +import { HStack, IconButton, Text, Emoji } from '../../../components/ui'; import type { Status } from 'soapbox/types/entities'; @@ -135,39 +134,28 @@ const StatusInteractionBar: React.FC = ({ status }): JSX. if (count > 0) { return ( -
+
{emojiReacts.map((e, i) => { - const emojiReact = ( - <> - + - {e.get('count')} - + + + + ); - - if (features.exposableReactions) { - return ( - - {emojiReact} - - ); - } - - return {emojiReact}; })}
-
- {count} -
-
+ + + + + ); } diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss index 082175985..ea825a895 100644 --- a/app/styles/components/emoji-reacts.scss +++ b/app/styles/components/emoji-reacts.scss @@ -1,5 +1,6 @@ .emoji-react { @apply inline-block text-gray-900 dark:text-gray-300 no-underline; + transition: 0.2s; &__emoji { img { @@ -13,7 +14,7 @@ } + .emoji-react { - margin-right: -8px; + @apply -mr-3; } &[type='button'] { @@ -64,7 +65,6 @@ .emoji-reacts-container { display: inline-flex; - margin-right: 0.4em; &:hover { .emoji-react { @@ -81,13 +81,6 @@ } } -.emoji-reacts__count, -.emoji-react__count { - font-size: 12px; - font-weight: bold; - transform: translateY(2px); -} - .emoji-react-selector-container { &:hover, &:focus { From 04c44750837075e62de6252dba8d5152574a7f01 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Apr 2022 17:28:53 -0500 Subject: [PATCH 02/10] StatusContent: fix markdown styles --- app/styles/components/status.scss | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index 6a914daa9..555cf7b79 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -15,7 +15,7 @@ ul, ol { - margin-left: 20px; + @apply pl-10; } ul { @@ -27,9 +27,7 @@ } blockquote { - padding: 5px 0 5px 15px; - border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4); - color: var(--primary-text-color--faint); + @apply py-1 pl-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400; } code { @@ -37,10 +35,14 @@ cursor: text; } + p > code, + pre { + @apply bg-gray-100 dark:bg-slate-900; + } + /* Inline code */ p > code { padding: 2px 4px; - background-color: var(--background-color); border-radius: 4px; } @@ -52,7 +54,6 @@ padding: 8px 12px; margin-bottom: 20px; word-break: break-all; - background-color: var(--background-color); } /* Markdown images */ From 7982c2c1f2ee35c80b42197419f66cb42aaf900e Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Apr 2022 17:33:29 -0500 Subject: [PATCH 03/10] Toggle visiblity --> Hide --- app/soapbox/__fixtures__/intlMessages.json | 4 ++-- app/soapbox/components/media_gallery.js | 2 +- app/soapbox/locales/ast.json | 2 +- app/soapbox/locales/bg.json | 2 +- app/soapbox/locales/br.json | 2 +- app/soapbox/locales/defaultMessages.json | 2 +- app/soapbox/locales/en.json | 2 +- app/soapbox/locales/ga.json | 2 +- app/soapbox/locales/hi.json | 2 +- app/soapbox/locales/lt.json | 2 +- app/soapbox/locales/lv.json | 2 +- app/soapbox/locales/mk.json | 2 +- app/soapbox/locales/ms.json | 2 +- app/soapbox/locales/nn.json | 2 +- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/app/soapbox/__fixtures__/intlMessages.json b/app/soapbox/__fixtures__/intlMessages.json index 4c32e4179..a16bb1692 100644 --- a/app/soapbox/__fixtures__/intlMessages.json +++ b/app/soapbox/__fixtures__/intlMessages.json @@ -254,7 +254,7 @@ "login.fields.username_placeholder": "Username", "login.log_in": "Log in", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "missing_indicator.label": "Not found", "missing_indicator.sublabel": "This resource could not be found", "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.", @@ -732,7 +732,7 @@ "login.fields.username_placeholder": "Username", "login.log_in": "Log in", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "missing_indicator.label": "Not found", "missing_indicator.sublabel": "This resource could not be found", "morefollows.followers_label": "…and {count} more {count, plural, one {follower} other {followers}} on remote sites.", diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index af2a35797..d4782d3b1 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -22,7 +22,7 @@ const ATTACHMENT_LIMIT = 4; const MAX_FILENAME_LENGTH = 45; const messages = defineMessages({ - toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' }, + toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Hide' }, }); const mapStateToItemProps = state => ({ diff --git a/app/soapbox/locales/ast.json b/app/soapbox/locales/ast.json index 1300bdf5b..f1839fc47 100644 --- a/app/soapbox/locales/ast.json +++ b/app/soapbox/locales/ast.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/bg.json b/app/soapbox/locales/bg.json index b9e7ce2f0..8e9a4eab8 100644 --- a/app/soapbox/locales/bg.json +++ b/app/soapbox/locales/bg.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/br.json b/app/soapbox/locales/br.json index 42c9262bf..803a94160 100644 --- a/app/soapbox/locales/br.json +++ b/app/soapbox/locales/br.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/defaultMessages.json b/app/soapbox/locales/defaultMessages.json index 5a0b58946..e9aeea8d6 100644 --- a/app/soapbox/locales/defaultMessages.json +++ b/app/soapbox/locales/defaultMessages.json @@ -378,7 +378,7 @@ { "descriptors": [ { - "defaultMessage": "Toggle visibility", + "defaultMessage": "Hide", "id": "media_gallery.toggle_visible" }, { diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json index 1134effb0..4050a869d 100644 --- a/app/soapbox/locales/en.json +++ b/app/soapbox/locales/en.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth.", diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json index da12d9295..924e4dfc2 100644 --- a/app/soapbox/locales/ga.json +++ b/app/soapbox/locales/ga.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json index b0324e7f1..c4029b501 100644 --- a/app/soapbox/locales/hi.json +++ b/app/soapbox/locales/hi.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json index 93e7fd5b7..0afc4539b 100644 --- a/app/soapbox/locales/lt.json +++ b/app/soapbox/locales/lt.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/lv.json b/app/soapbox/locales/lv.json index 7a9f39d78..2f02a872a 100644 --- a/app/soapbox/locales/lv.json +++ b/app/soapbox/locales/lv.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/mk.json b/app/soapbox/locales/mk.json index ebebc91fc..922379ad6 100644 --- a/app/soapbox/locales/mk.json +++ b/app/soapbox/locales/mk.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json index 489f6500f..6031dd7f7 100644 --- a/app/soapbox/locales/ms.json +++ b/app/soapbox/locales/ms.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", diff --git a/app/soapbox/locales/nn.json b/app/soapbox/locales/nn.json index 12b2e64ae..b34c46386 100644 --- a/app/soapbox/locales/nn.json +++ b/app/soapbox/locales/nn.json @@ -577,7 +577,7 @@ "login.otp_log_in": "OTP Login", "login.otp_log_in.fail": "Invalid code, please try again.", "login.reset_password_hint": "Trouble logging in?", - "media_gallery.toggle_visible": "Toggle visibility", + "media_gallery.toggle_visible": "Hide", "media_panel.empty_message": "No media found.", "media_panel.title": "Media", "mfa.mfa_disable_enter_password": "Enter your current password to disable two-factor auth:", From d92330cbfc8c40d91873185e217d1c6cb2a1fa2b Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Apr 2022 17:38:42 -0500 Subject: [PATCH 04/10] ComposeForm: move EmojiPickerDropdown beside UploadButton --- app/soapbox/features/compose/components/compose_form.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js index 4fe153bbe..89d58618c 100644 --- a/app/soapbox/features/compose/components/compose_form.js +++ b/app/soapbox/features/compose/components/compose_form.js @@ -370,12 +370,12 @@ class ComposeForm extends ImmutablePureComponent { >
{features.media && } + {features.polls && } {features.privacyScopes && } {features.scheduledStatuses && } {features.spoilers && } {features.richText && } -
From 754e669ea500a8de1976e1c4435ccaa935d5b5f8 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Mon, 25 Apr 2022 17:48:53 -0500 Subject: [PATCH 05/10] Add network error preview to Developers (/error/network) --- app/soapbox/features/developers/developers_menu.tsx | 8 ++++++++ app/soapbox/features/ui/index.js | 1 + 2 files changed, 9 insertions(+) diff --git a/app/soapbox/features/developers/developers_menu.tsx b/app/soapbox/features/developers/developers_menu.tsx index 545c0a998..139774d53 100644 --- a/app/soapbox/features/developers/developers_menu.tsx +++ b/app/soapbox/features/developers/developers_menu.tsx @@ -63,6 +63,14 @@ const Developers = () => { + + + + + + + + + + + - {switcher && ( -
- {otherAccounts.map(account => renderAccount(account))} -
- )} - - )} + {switcher && ( +
+ {otherAccounts.map(account => renderAccount(account))} +
+ )} + Date: Mon, 25 Apr 2022 18:37:20 -0500 Subject: [PATCH 10/10] Restore mobile account switcher, make it available to everyone --- app/soapbox/components/sidebar_menu.tsx | 6 ++++++ .../ui/components/profile-dropdown.tsx | 18 +++++++----------- app/styles/components/sidebar-menu.scss | 2 +- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx index 44b392f0e..3a184661a 100644 --- a/app/soapbox/components/sidebar_menu.tsx +++ b/app/soapbox/components/sidebar_menu.tsx @@ -37,6 +37,7 @@ const messages = defineMessages({ lists: { id: 'column.lists', defaultMessage: 'Lists' }, invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' }, developers: { id: 'navigation.developers', defaultMessage: 'Developers' }, + addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' }, }); interface ISidebarLink { @@ -181,6 +182,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => { {switcher && (
{otherAccounts.map(account => renderAccount(account))} + + + + {intl.formatMessage(messages.addAccount)} +
)} diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx index 71d5c1101..034a6d099 100644 --- a/app/soapbox/features/ui/components/profile-dropdown.tsx +++ b/app/soapbox/features/ui/components/profile-dropdown.tsx @@ -7,7 +7,7 @@ import { Link } from 'react-router-dom'; import { logOut, switchAccount } from 'soapbox/actions/auth'; import { fetchOwnAccounts } from 'soapbox/actions/auth'; import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui'; -import { useAppSelector, useOwnAccount } from 'soapbox/hooks'; +import { useAppSelector } from 'soapbox/hooks'; import { makeGetAccount } from 'soapbox/selectors'; import Account from '../../../components/account'; @@ -36,9 +36,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { const dispatch = useDispatch(); const intl = useIntl(); - const currentAccount = useOwnAccount(); const authUsers = useAppSelector((state) => state.auth.get('users')); - const isCurrentAccountStaff = Boolean(currentAccount?.staff); const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id')))); const handleLogOut = () => { @@ -77,13 +75,11 @@ const ProfileDropdown: React.FC = ({ account, children }) => { menu.push({ text: null }); - if (isCurrentAccountStaff) { - menu.push({ - text: intl.formatMessage(messages.add), - to: '/login', - icon: require('@tabler/icons/icons/plus.svg'), - }); - } + menu.push({ + text: intl.formatMessage(messages.add), + to: '/login', + icon: require('@tabler/icons/icons/plus.svg'), + }); menu.push({ text: intl.formatMessage(messages.logout, { acct: account.acct }), @@ -93,7 +89,7 @@ const ProfileDropdown: React.FC = ({ account, children }) => { }); return menu; - }, [account, isCurrentAccountStaff, authUsers]); + }, [account, authUsers]); React.useEffect(() => { fetchOwnAccountThrottled(); diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss index 88faf7add..523477b6f 100644 --- a/app/styles/components/sidebar-menu.scss +++ b/app/styles/components/sidebar-menu.scss @@ -134,7 +134,7 @@ .sidebar-menu-item { display: flex; - padding: 16px 18px; + padding: 16px 0; cursor: pointer; text-decoration: none; color: var(--primary-text-color--faint);