Fix settings button not being clickable

Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-08-24 15:40:25 +02:00
parent f383f0be6c
commit b7f8c8368c
2 changed files with 29 additions and 29 deletions

View File

@ -49,11 +49,6 @@ body {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
/* Allow window to be dragged from header */
#app-header {
-webkit-app-region: drag;
}
/* Prevent blue outline */ /* Prevent blue outline */
a:focus, a:focus,
input:focus, input:focus,

View File

@ -163,41 +163,42 @@ export class MainPage extends React.Component<
return ( return (
<> <>
<Flex <Flex
id="app-header" justifyContent="space-between"
justifyContent="center" alignItems="center"
paddingTop="14px"
style={{ style={{
width: '100%', // Allow window to be dragged from header
height: '50px', // @ts-ignore
padding: '13px 14px', '-webkit-app-region': 'drag',
textAlign: 'center',
position: 'relative', position: 'relative',
zIndex: 1, zIndex: 1,
}} }}
> >
<EtcherSvg <Flex width="100%" />
width="123px" <Flex width="100%" alignItems="center" justifyContent="center">
height="22px" <EtcherSvg
style={{ width="123px"
cursor: 'pointer', height="22px"
}} style={{
onClick={() => cursor: 'pointer',
openExternal('https://www.balena.io/etcher?ref=etcher_footer') }}
} onClick={() =>
tabIndex={100} openExternal('https://www.balena.io/etcher?ref=etcher_footer')
/> }
tabIndex={100}
/>
</Flex>
<Flex <Flex width="100%" alignItems="center" justifyContent="flex-end">
style={{
float: 'right',
position: 'absolute',
right: 0,
}}
>
<Icon <Icon
icon={<CogSvg height="1em" fill="currentColor" />} icon={<CogSvg height="1em" fill="currentColor" />}
plain plain
tabIndex={5} tabIndex={5}
onClick={() => this.setState({ hideSettings: false })} onClick={() => this.setState({ hideSettings: false })}
style={{
// Make touch events click instead of dragging
'-webkit-app-region': 'no-drag',
}}
/> />
{!settings.getSync('disableExternalLinks') && ( {!settings.getSync('disableExternalLinks') && (
<Icon <Icon
@ -209,6 +210,10 @@ export class MainPage extends React.Component<
) )
} }
tabIndex={6} tabIndex={6}
style={{
// Make touch events click instead of dragging
'-webkit-app-region': 'no-drag',
}}
/> />
)} )}
</Flex> </Flex>