Merge branch 'middleclick' into 'develop'
Middle-click account to open it in a new tab, fixes #603 Closes #603 See merge request soapbox-pub/soapbox-fe!459
This commit is contained in:
commit
dcd08b2b3f
4 changed files with 46 additions and 10 deletions
|
@ -190,8 +190,8 @@ export function logOut() {
|
|||
};
|
||||
}
|
||||
|
||||
export function switchAccount(accountId) {
|
||||
return { type: SWITCH_ACCOUNT, accountId };
|
||||
export function switchAccount(accountId, reload = true) {
|
||||
return { type: SWITCH_ACCOUNT, accountId, reload };
|
||||
}
|
||||
|
||||
export function fetchOwnAccounts() {
|
||||
|
|
|
@ -117,21 +117,40 @@ class DropdownMenu extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
handleMiddleClick = e => {
|
||||
const i = Number(e.currentTarget.getAttribute('data-index'));
|
||||
const { middleClick } = this.props.items[i];
|
||||
|
||||
this.props.onClose();
|
||||
|
||||
if (e.button === 1 && typeof middleClick === 'function') {
|
||||
e.preventDefault();
|
||||
middleClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
handleAuxClick = e => {
|
||||
if (e.button === 1) {
|
||||
this.handleMiddleClick(e);
|
||||
}
|
||||
}
|
||||
|
||||
renderItem(option, i) {
|
||||
if (option === null) {
|
||||
return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
|
||||
}
|
||||
|
||||
const { text, href = '#', newTab, isLogout } = option;
|
||||
const { text, href, to, newTab, isLogout } = option;
|
||||
|
||||
return (
|
||||
<li className='dropdown-menu__item' key={`${text}-${i}`}>
|
||||
<a
|
||||
href={href}
|
||||
href={href || to || '#'}
|
||||
role='button'
|
||||
tabIndex='0'
|
||||
ref={i === 0 ? this.setFocusRef : null}
|
||||
onClick={this.handleClick}
|
||||
onAuxClick={this.handleAuxClick}
|
||||
onKeyDown={this.handleItemKeyDown}
|
||||
data-index={i}
|
||||
target={newTab ? '_blank' : null}
|
||||
|
|
|
@ -64,6 +64,14 @@ class ProfileDropdown extends React.PureComponent {
|
|||
};
|
||||
}
|
||||
|
||||
handleMiddleClick = account => {
|
||||
return e => {
|
||||
this.props.dispatch(switchAccount(account.get('id'), false));
|
||||
window.open('/', '_blank', 'noopener,noreferrer');
|
||||
e.preventDefault();
|
||||
};
|
||||
}
|
||||
|
||||
fetchOwnAccounts = throttle(() => {
|
||||
this.props.dispatch(fetchOwnAccounts());
|
||||
}, 2000);
|
||||
|
@ -80,7 +88,7 @@ class ProfileDropdown extends React.PureComponent {
|
|||
return (
|
||||
<div className='account'>
|
||||
<div className='account__wrapper'>
|
||||
<div className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
|
||||
<div className='account__display-name'>
|
||||
<div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
|
||||
<DisplayName account={account} />
|
||||
</div>
|
||||
|
@ -98,7 +106,7 @@ class ProfileDropdown extends React.PureComponent {
|
|||
menu.push({ text: this.renderAccount(account), to: `/@${account.get('acct')}` });
|
||||
|
||||
otherAccounts.forEach(account => {
|
||||
menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account) });
|
||||
menu.push({ text: this.renderAccount(account), action: this.handleSwitchAccount(account), href: '/', middleClick: this.handleMiddleClick(account) });
|
||||
});
|
||||
|
||||
menu.push(null);
|
||||
|
|
|
@ -54,9 +54,12 @@ const migrateLegacy = state => {
|
|||
});
|
||||
};
|
||||
|
||||
const persistAuth = state => localStorage.setItem('soapbox:auth', JSON.stringify(state.toJS()));
|
||||
const persistSession = state => sessionStorage.setItem('soapbox:auth:me', state.get('me'));
|
||||
|
||||
const persistState = state => {
|
||||
localStorage.setItem('soapbox:auth', JSON.stringify(state.toJS()));
|
||||
sessionStorage.setItem('soapbox:auth:me', state.get('me'));
|
||||
persistAuth(state);
|
||||
persistSession(state);
|
||||
};
|
||||
|
||||
const initialize = state => {
|
||||
|
@ -151,6 +154,7 @@ const userSwitched = (oldState, state) => {
|
|||
};
|
||||
|
||||
const maybeReload = (oldState, state, action) => {
|
||||
if (action.reload === false) return;
|
||||
if (userSwitched(oldState, state)) {
|
||||
reload(state);
|
||||
}
|
||||
|
@ -159,9 +163,14 @@ const maybeReload = (oldState, state, action) => {
|
|||
export default function auth(oldState = initialState, action) {
|
||||
const state = reducer(oldState, action);
|
||||
|
||||
// Persist the state in localStorage
|
||||
if (!state.equals(oldState)) {
|
||||
persistState(state);
|
||||
// Persist the state in localStorage
|
||||
persistAuth(state);
|
||||
|
||||
// Persist the session
|
||||
if (action.reload !== false) {
|
||||
persistSession(state);
|
||||
}
|
||||
|
||||
// Reload the page under some conditions
|
||||
maybeReload(oldState, state, action);
|
||||
|
|
Loading…
Reference in a new issue