Merge pull request #4208 from jeffslofish/issue-4207

Allow double-clicking in header to maximize the app.
This commit is contained in:
jessopb 2020-05-25 15:00:36 -04:00 committed by GitHub
commit 1dba194b67
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 3 deletions

View file

@ -13,6 +13,7 @@ import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
import Tooltip from 'component/common/tooltip'; import Tooltip from 'component/common/tooltip';
import NavigationButton from 'component/navigationButton'; import NavigationButton from 'component/navigationButton';
// @if TARGET='app' // @if TARGET='app'
import { remote } from 'electron';
import { IS_MAC } from 'component/app/view'; import { IS_MAC } from 'component/app/view';
// @endif // @endif
@ -126,6 +127,11 @@ const Header = (props: Props) => {
'header--mac': IS_MAC, 'header--mac': IS_MAC,
// @endif // @endif
})} })}
// @if TARGET='app'
onDoubleClick={e => {
remote.getCurrentWindow().maximize();
}}
// @endif
> >
<div className="header__contents"> <div className="header__contents">
<div className="header__navigation"> <div className="header__navigation">
@ -136,6 +142,11 @@ const Header = (props: Props) => {
onClick={() => { onClick={() => {
if (history.location.pathname === '/') window.location.reload(); if (history.location.pathname === '/') window.location.reload();
}} }}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
{...homeButtonNavigationProps} {...homeButtonNavigationProps}
/> />
@ -160,12 +171,22 @@ const Header = (props: Props) => {
navigate={`/$/${PAGES.WALLET}`} navigate={`/$/${PAGES.WALLET}`}
className="header__navigation-item menu__title header__navigation-item--balance" className="header__navigation-item menu__title header__navigation-item--balance"
label={getWalletTitle()} label={getWalletTitle()}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/> />
<Menu> <Menu>
<MenuButton <MenuButton
aria-label={__('Publish a file, or create a channel')} aria-label={__('Publish a file, or create a channel')}
title={__('Publish a file, or create a channel')} title={__('Publish a file, or create a channel')}
className="header__navigation-item menu__title header__navigation-item--icon" className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
> >
<Icon size={18} icon={ICONS.PUBLISH} aria-hidden /> <Icon size={18} icon={ICONS.PUBLISH} aria-hidden />
</MenuButton> </MenuButton>
@ -186,6 +207,11 @@ const Header = (props: Props) => {
aria-label={__('Your account')} aria-label={__('Your account')}
title={__('Your account')} title={__('Your account')}
className="header__navigation-item menu__title header__navigation-item--icon" className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
> >
<Icon size={18} icon={ICONS.ACCOUNT} aria-hidden /> <Icon size={18} icon={ICONS.ACCOUNT} aria-hidden />
</MenuButton> </MenuButton>
@ -240,6 +266,11 @@ const Header = (props: Props) => {
aria-label={__('Settings')} aria-label={__('Settings')}
title={__('Settings')} title={__('Settings')}
className="header__navigation-item menu__title header__navigation-item--icon" className="header__navigation-item menu__title header__navigation-item--icon"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
> >
<Icon size={18} icon={ICONS.SETTINGS} aria-hidden /> <Icon size={18} icon={ICONS.SETTINGS} aria-hidden />
</MenuButton> </MenuButton>
@ -277,12 +308,27 @@ const Header = (props: Props) => {
// className="button--header-close" // className="button--header-close"
icon={ICONS.REMOVE} icon={ICONS.REMOVE}
{...closeButtonNavigationProps} {...closeButtonNavigationProps}
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/> />
</Tooltip> </Tooltip>
</div> </div>
) )
)} )}
<Button onClick={openMobileNavigation} icon={ICONS.MENU} iconSize={24} className="header__menu--mobile" /> <Button
onClick={openMobileNavigation}
icon={ICONS.MENU}
iconSize={24}
className="header__menu--mobile"
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
/>
</div> </div>
</header> </header>
); );

View file

@ -67,7 +67,13 @@ const NavigationButton = (props: Props) => {
); );
const slicedEntries = sliceEntries(currentIndex, entries, historyLength, isBackward, MAX_HISTORY_SIZE); const slicedEntries = sliceEntries(currentIndex, entries, historyLength, isBackward, MAX_HISTORY_SIZE);
return ( return (
<div> <div
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
>
<Button <Button
className={`header__navigation-item header__navigation-item--${isBackward ? 'back' : 'forward'}`} className={`header__navigation-item header__navigation-item--${isBackward ? 'back' : 'forward'}`}
description={isBackward ? __('Navigate back') : __('Navigate forward')} description={isBackward ? __('Navigate back') : __('Navigate forward')}

View file

@ -169,7 +169,15 @@ class WunderBar extends React.PureComponent<Props, State> {
const { suggestions, doFocus, doBlur, searchQuery } = this.props; const { suggestions, doFocus, doBlur, searchQuery } = this.props;
return ( return (
<div className="wunderbar"> <div
// @if TARGET='app'
onDoubleClick={e => {
e.stopPropagation();
}}
// @endif
className="wunderbar"
>
<Icon icon={ICONS.SEARCH} /> <Icon icon={ICONS.SEARCH} />
<Autocomplete <Autocomplete
autoHighlight autoHighlight