bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restore mobile account switcher, make it available to everyone

Browse source
This commit is contained in:
Alex Gleason 2022-04-25 18:37:20 -05:00
parent 92cdd238b1
commit 2758980021
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/soapbox/components/sidebar_menu.tsx
View file

@ -37,6 +37,7 @@ const messages = defineMessages({
lists: { id: 'column.lists', defaultMessage: 'Lists' }, lists: { id: 'column.lists', defaultMessage: 'Lists' },
invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' }, invites: { id: 'navigation_bar.invites', defaultMessage: 'Invites' },
developers: { id: 'navigation.developers', defaultMessage: 'Developers' }, developers: { id: 'navigation.developers', defaultMessage: 'Developers' },
addAccount: { id: 'profile_dropdown.add_account', defaultMessage: 'Add an existing account' },
}); });
interface ISidebarLink { interface ISidebarLink {
@ -181,6 +182,11 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
{switcher && ( {switcher && (
<div className='border-t border-solid border-gray-200'> <div className='border-t border-solid border-gray-200'>
{otherAccounts.map(account => renderAccount(account))} {otherAccounts.map(account => renderAccount(account))}
<NavLink className='flex py-2 space-x-1' to='/login' onClick={handleClose}>
<Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
<Text>{intl.formatMessage(messages.addAccount)}</Text>
</NavLink>
</div> </div>
)} )}
</Stack> </Stack>

18
app/soapbox/features/ui/components/profile-dropdown.tsx
View file

@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
import { logOut, switchAccount } from 'soapbox/actions/auth'; import { logOut, switchAccount } from 'soapbox/actions/auth';
import { fetchOwnAccounts } from 'soapbox/actions/auth'; import { fetchOwnAccounts } from 'soapbox/actions/auth';
import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui'; 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 { makeGetAccount } from 'soapbox/selectors';
import Account from '../../../components/account'; import Account from '../../../components/account';
@ -36,9 +36,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const intl = useIntl(); const intl = useIntl();
const currentAccount = useOwnAccount();
const authUsers = useAppSelector((state) => state.auth.get('users')); 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 otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
const handleLogOut = () => { const handleLogOut = () => {
@ -77,13 +75,11 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
menu.push({ text: null }); menu.push({ text: null });
if (isCurrentAccountStaff) { menu.push({
menu.push({ text: intl.formatMessage(messages.add),
text: intl.formatMessage(messages.add), to: '/login',
to: '/login', icon: require('@tabler/icons/icons/plus.svg'),
icon: require('@tabler/icons/icons/plus.svg'), });
});
}
menu.push({ menu.push({
text: intl.formatMessage(messages.logout, { acct: account.acct }), text: intl.formatMessage(messages.logout, { acct: account.acct }),
@ -93,7 +89,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
}); });
return menu; return menu;
}, [account, isCurrentAccountStaff, authUsers]); }, [account, authUsers]);
React.useEffect(() => { React.useEffect(() => {
fetchOwnAccountThrottled(); fetchOwnAccountThrottled();

2
app/styles/components/sidebar-menu.scss
View file

@ -134,7 +134,7 @@
.sidebar-menu-item { .sidebar-menu-item {
display: flex; display: flex;
padding: 16px 18px; padding: 16px 0;
cursor: pointer; cursor: pointer;
text-decoration: none; text-decoration: none;
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);