Unverified Commit e641594e authored by Thibaut Sardan's avatar Thibaut Sardan Committed by GitHub
Browse files

Merge pull request #436 from paritytech/tbaut-fix-window-size

Fixed window size
parents 0281d013 d8c31def
Pipeline #31608 passed with stages
in 9 minutes and 10 seconds
......@@ -18,17 +18,6 @@ export default async (fetherAppWindow, event, action, ...args) => {
return;
}
switch (action) {
case 'app-resize': {
if (!fetherAppWindow || !args[0]) {
return;
}
const [width] = fetherAppWindow.getContentSize();
// Conversion to integer is required to pass as argument to setContentSize.
// Reference: https://electronjs.org/docs/all#winsetcontentsizewidth-height-animate
const newHeight = parseInt(args[0]);
fetherAppWindow.setContentSize(width, Math.round(newHeight) + 2);
break;
}
case 'check-clock-sync': {
checkClockSync().then(t => {
event.sender.send('check-clock-sync-reply', t);
......
......@@ -67,10 +67,8 @@ const DEFAULT_OPTIONS = {
};
const TASKBAR_OPTIONS = {
// Do not use frame but context menu required on non-macOS.
// Without frame it causes window height to shrink upon show/hide
height: 515,
frame: false,
height: 464,
// On Linux the user must click the tray icon and then click the tooltip
// to toggle the Fether window open/close
tooltip: 'Click to toggle Fether window',
......
......@@ -90,7 +90,6 @@ class AccountsList extends Component {
)}
</div>
</div>
<nav className='footer-nav'>
<div className='footer-nav_status'>
<Health />
......
......@@ -11,7 +11,6 @@ export const Feedback = ({ accountsListLength }) => (
href='https://github.com/paritytech/fether/issues/new'
rel='noopener noreferrer'
target='_blank'
style={{ marginBottom: accountsListLength > 1 ? '-2px' : '-10px' }}
>
Feedback
</a>
......
......@@ -168,7 +168,7 @@ class AccountImportOptions extends Component {
{importingFromSigner ? (
<Scanner
onScan={this.handleSignerImported}
label='Please show the QR code of the account on the webcam.'
label='Scan Parity Signer account QR code'
/>
) : (
<button
......@@ -203,15 +203,16 @@ class AccountImportOptions extends Component {
</Card>
);
const spacer = <div style={{ height: '0.5rem' }} />;
return (
<RequireHealthOverlay require='node'>
<div className='center-md'>
{!importingFromSigner && jsonCard}
<br />
{spacer}
{signerCard}
<br />
{spacer}
{!importingFromSigner && phraseCard}
<br />
<p>{error}</p>
<nav className='form-nav -space-around'>
{currentStep > 1 && (
......
......@@ -63,7 +63,7 @@ class CreateAccount extends Component {
const Steps = this.getSteps(isImport);
return (
<div>
<React.Fragment>
<Header
left={
// Show back button if we already have some accounts, so we can go back to AccountsList
......@@ -98,17 +98,7 @@ class CreateAccount extends Component {
</div>
) : (
<div className='footer-nav_option'>
{isImport ? (
<p>
Need to create an account?
<button
className='button -footer'
onClick={this.handleToggleCreateImport}
>
New account
</button>
</p>
) : (
{isImport ? null : (
<p>
Already have an account?
<button
......@@ -122,7 +112,7 @@ class CreateAccount extends Component {
</div>
)}
</nav>
</div>
</React.Fragment>
);
}
}
......
......@@ -12,9 +12,7 @@ import {
Switch
} from 'react-router-dom';
import { inject, observer } from 'mobx-react';
import isElectron from 'is-electron';
import { Modal } from 'fether-ui';
import ReactResizeDetector from 'react-resize-detector';
import semver from 'semver';
import { version } from '../../package.json';
......@@ -32,19 +30,10 @@ const currentVersion = version;
// https://github.com/facebook/create-react-app/issues/3591
const Router =
process.env.NODE_ENV === 'production' ? MemoryRouter : BrowserRouter;
const electron = isElectron() ? window.require('electron') : null;
@inject('onboardingStore', 'parityStore')
@observer
class App extends Component {
handleResize = (_, height) => {
if (!electron) {
return;
}
// Send height to main process
electron.ipcRenderer.send('asynchronous-message', 'app-resize', height);
};
state = {
newRelease: false // false | {name, url, ignore}
};
......@@ -120,53 +109,49 @@ class App extends Component {
// the children, just a <RequireHealthOverlay />.
if (!api) {
return (
<ReactResizeDetector handleHeight onResize={this.handleResize}>
<RequireHealthOverlay fullscreen require='node'>
{/* Adding these components to have minimum height on window */}
<div className='content'>
<div className='window' />
</div>
</RequireHealthOverlay>
</ReactResizeDetector>
<RequireHealthOverlay fullscreen require='node'>
{/* Adding these components to have minimum height on window */}
<div className='content'>
<div className='window' />
</div>
</RequireHealthOverlay>
);
}
return (
<ReactResizeDetector handleHeight onResize={this.handleResize}>
<div className='content'>
<div className='window'>
<Modal
title='New version available'
description={newRelease ? `${newRelease.name} was released!` : ''}
visible={newRelease && !newRelease.ignore}
buttons={this.renderModalLinks()}
>
<Router>
<Switch>
{/* The next line is the homepage */}
<Redirect exact from='/' to='/accounts' />
<Route path='/accounts' component={Accounts} />
<Route path='/onboarding' component={Onboarding} />
<Route path='/tokens/:accountAddress' component={Tokens} />
<Route
path='/whitelist/:accountAddress'
component={Whitelist}
/>
<Route
path='/backup/:accountAddress'
component={BackupAccount}
/>
<Route
path='/send/:tokenAddress/from/:accountAddress'
component={Send}
/>
<Redirect from='*' to='/' />
</Switch>
</Router>
</Modal>
</div>
<div className='content'>
<div className='window'>
<Modal
title='New version available'
description={newRelease ? `${newRelease.name} was released!` : ''}
visible={newRelease && !newRelease.ignore}
buttons={this.renderModalLinks()}
>
<Router>
<Switch>
{/* The next line is the homepage */}
<Redirect exact from='/' to='/accounts' />
<Route path='/accounts' component={Accounts} />
<Route path='/onboarding' component={Onboarding} />
<Route path='/tokens/:accountAddress' component={Tokens} />
<Route
path='/whitelist/:accountAddress'
component={Whitelist}
/>
<Route
path='/backup/:accountAddress'
component={BackupAccount}
/>
<Route
path='/send/:tokenAddress/from/:accountAddress'
component={Send}
/>
<Redirect from='*' to='/' />
</Switch>
</Router>
</Modal>
</div>
</ReactResizeDetector>
</div>
);
}
}
......
......@@ -49,11 +49,11 @@ class Onboarding extends Component {
render () {
return (
<div>
<React.Fragment>
<Header title={<h1>Terms of Use</h1>} />
<div className='window_content'>
<div className='box -padded-extra'>
<div className='box -padded -scroller'>
<div className='terms-and-conditions-wrapper'>
<FetherForm.Field
as={ReactMarkdown}
......@@ -76,7 +76,7 @@ class Onboarding extends Component {
</button>
</div>
</nav>
</div>
</React.Fragment>
);
}
}
......
......@@ -73,7 +73,7 @@ export default class Scanner extends React.PureComponent {
const size = 300;
return (
<div>
<React.Fragment>
{isLoading ? (
<img alt='loading' src={loading} />
) : webcamError ? (
......@@ -81,11 +81,10 @@ export default class Scanner extends React.PureComponent {
) : (
<div>
<p>{label}</p>
<br />
<QrSigner scan onScan={onScan} size={size} />
</div>
)}
</div>
</React.Fragment>
);
}
}
......@@ -76,7 +76,7 @@ class ScanSignedTx extends Component {
<Card className='-centered'>
<Scanner
onScan={this.onScanSignedTx}
label='Please show the QR code of the signed transaction on the webcam'
label='Show the signed transaction QR code'
/>
{error && <p className='text -standard'>{error}</p>}
......
......@@ -90,9 +90,7 @@ class Unlock extends Component {
render={({ handleSubmit, pristine, submitting }) => (
<form onSubmit={handleSubmit}>
<div className='text'>
<p>
Enter your password to confirm this transaction.
</p>
<p>Unlock account:</p>
</div>
<Field
......
......@@ -66,39 +66,40 @@ class Tokens extends PureComponent {
const { isMenuOpen } = this.state;
return (
<div className='tokens'>
<div className={isMenuOpen ? 'popup-underlay' : ''} />
<AccountHeader
address={address}
copyAddress
name={name}
type={type}
left={
<Link to='/accounts' className='icon -back'>
Back
</Link>
}
right={
<MenuPopup
className='popup-menu-account'
horizontalOffset={1}
menuItems={this.menuItems()}
onClose={this.handleMenuClose}
onOpen={this.handleMenuOpen}
size='small'
trigger={<Clickable className='icon -menu' />}
/>
}
/>
<TokensList />
<React.Fragment>
<div className='tokens'>
<div className={isMenuOpen ? 'popup-underlay' : ''} />
<AccountHeader
address={address}
copyAddress
name={name}
type={type}
left={
<Link to='/accounts' className='icon -back'>
Back
</Link>
}
right={
<MenuPopup
className='popup-menu-account'
horizontalOffset={1}
menuItems={this.menuItems()}
onClose={this.handleMenuClose}
onOpen={this.handleMenuOpen}
size='small'
trigger={<Clickable className='icon -menu' />}
/>
}
/>
<TokensList />
</div>
<nav className='footer-nav'>
<div className='footer-nav_status'>
<Health />
</div>
</nav>
</div>
</React.Fragment>
);
}
}
......
......@@ -100,40 +100,35 @@ class Whitelist extends Component {
const displayedTokens = search ? matches : this.props.tokensArrayWithoutEth;
return (
<RequireHealthOverlay require='sync'>
<div>
<Header
left={
<Link
to='/tokens'
className='icon -back'
onClick={history.goBack}
>
Close
</Link>
}
title={<h1>Search tokens</h1>}
/>
<React.Fragment>
<Header
left={
<Link to='/tokens' className='icon -back' onClick={history.goBack}>
Close
</Link>
}
title={<h1>Search tokens</h1>}
/>
<RequireHealthOverlay require='sync'>
<div className='window_content'>
<div className='box -padded'>
<div className='search-form'>
<input
onChange={this.handleSearch}
placeholder='Find token by name or symbol'
value={search}
type='text'
/>
<button
onClick={this.handleClear}
className='button -icon -clear'
disabled={!search.length}
>
Clear
</button>
</div>
</div>
<div className='box -scroller'>
<div className='box -padded'>
<div className='search-form'>
<input
onChange={this.handleSearch}
placeholder='Find token by name or symbol'
value={search}
type='text'
/>
<button
onClick={this.handleClear}
className='button -icon -clear'
disabled={!search.length}
>
Clear
</button>
</div>
</div>
<ul className='list -tokens'>
{displayedTokens.map(token => (
<NewTokenItem key={token.address} token={token} />
......@@ -141,14 +136,13 @@ class Whitelist extends Component {
</ul>
</div>
</div>
<nav className='footer-nav'>
<div className='footer-nav_status'>
<Health />
</div>
</nav>
</div>
</RequireHealthOverlay>
</RequireHealthOverlay>
<nav className='footer-nav'>
<div className='footer-nav_status'>
<Health />
</div>
</nav>
</React.Fragment>
);
}
}
......
.accounts-list {
display: flex;
flex-direction: column;
height: 100vh;
.create-hint {
color: $grey;
text-align: center;
......
......@@ -7,7 +7,7 @@
top: 3rem;
left: 0;
right: 0;
bottom: -2px;
bottom: 0;
height: auto;
overflow: hidden;
position: absolute;
......
......@@ -4,6 +4,8 @@
flex-direction: row;
justify-content: space-between;
align-items: center; // default alignent for flex items
width: 100%;
margin: auto auto 0 0; //sticky at the botton left
.footer-feedback {
align-self: flex-end; // override default alignment for individual flex item
......@@ -13,7 +15,7 @@
border-radius: 4px;
.feedback {
color: $faint;
color: $white;
background: $grey;
font-size: 0.8em;
font-weight: 500;
......@@ -22,7 +24,7 @@
box-shadow: 0.125rem 0.250rem 0.3rem 0 rgba($black, 0.3);
transition: box-shadow ease 0.250s;
&:hover {
color: $white;
color: $faint;
background: $grey;
box-shadow: 0.125rem 0.275rem 0.3rem 0 rgba($black, 0.4);
}
......@@ -36,7 +38,7 @@
}
.footer-nav_icons {
padding: 1rem;
padding: 0 1rem 0 1rem;
}
.footer-nav_option {
......@@ -57,7 +59,6 @@
a:link,
a:visited {
display: block;
margin: -0.175rem 0 -0.175rem;
padding: 0.25rem 0.5rem 0.175rem;
border-radius: 0.25rem;
&:hover {
......
......@@ -10,6 +10,10 @@
z-index: 1899; /* Under the menu popup */
}
.ui.popup {
z-index: 2000;
}
.popup-menu-account {
/* Override SUI popup styles so popup does not appear above menu icon */
background: $white !important;
......
......@@ -4,7 +4,7 @@
}
.terms-and-conditions {
height: 16rem; /* Different impact on taskbar app */
height: 20rem; /* Different impact on taskbar app */
overflow-x: hidden;
overflow-y: auto;
margin-top: 0.75rem;
......
......@@ -26,13 +26,16 @@
background: $chrome;
border-radius: 0.25rem;
min-height: 15rem;
overflow: hidden;
position: relative;
box-shadow: 0 0.125rem 0.75rem rgba($black, 0.175),
0 0.125rem 0.125rem rgba($black, 0.1);
.window_content {
min-height: 7.5rem;
}
}
}
.window {
height: 100vh;
display: flex;
flex-direction: column;
}
......@@ -14,7 +14,6 @@ body {
font-size: ms(0);
line-height: ms(0) * 1.3;
position: relative;
overflow-y: hidden;
/* https://electronjs.org/docs/api/frameless-window#draggable-region */
-webkit-app-region: drag;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.