Merge pull request #4208 from jeffslofish/issue-4207
Allow double-clicking in header to maximize the app.
This commit is contained in:
commit
1dba194b67
3 changed files with 63 additions and 3 deletions
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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')}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue