Add sync warning to top

This commit is contained in:
Jaco Greeff 2017-10-04 14:49:41 +02:00
parent 55b0b09d6a
commit 290060e6c4
4 changed files with 81 additions and 148 deletions

View File

@ -17,16 +17,24 @@
$textColor: #ccc;
.status {
align-items: center;
.container {
color: $textColor;
display: flex;
left: 0;
padding: 0.5rem 0.75rem;
position: fixed;
right: 0;
top: 0;
z-index: 1000;
.status {
align-items: center;
display: flex;
}
.warning {
background: red;
display: block;
}
}
.plugins {

View File

@ -31,6 +31,7 @@ import StatusIndicator from '@parity/ui/StatusIndicator';
import Consensus from './Consensus';
import AccountStore from '../ParityBar/accountStore';
import ParityBarStore from '../ParityBar/store';
import SyncWarning from '../SyncWarning';
import PluginStore from './pluginStore';
import Upgrade from './Upgrade';
@ -43,7 +44,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
const accountStore = AccountStore.get(api);
return (
<GradientBg className={ `${styles.status} ${className}` }>
<GradientBg className={ className }>
<div className={ styles.status }>
<ClientVersion className={ styles.version } />
<div className={ styles.upgrade }>
<Consensus upgradeStore={ upgradeStore } />
@ -92,6 +94,8 @@ function Status ({ className = '', upgradeStore }, { api }) {
/>
<NetChain className={ styles.chain } />
</div>
<SyncWarning className={ styles.warning } />
</div>
</GradientBg>
);
}

View File

@ -15,27 +15,6 @@
/* along with Parity. If not; see <http://www.gnu.org/licenses/>.
*/
.overlay {
background: rgba(255, 255, 255, 0.75);
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10000;
}
.modal {
align-items: flex-start;
bottom: 0;
display: flex;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 10001;
}
.body {
box-shadow: rgba(0, 0, 0, 0.25) 0 14px 45px, rgba(0, 0, 0, 0.22) 0 10px 18px;
color: rgb(208, 208, 208);

View File

@ -16,53 +16,29 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import store from 'store';
import Button from '@parity/ui/Button';
import Checkbox from '@parity/ui/Form/Checkbox';
import GradientBg from '@parity/ui/GradientBg';
import StatusIndicator from '@parity/ui/StatusIndicator';
import styles from './syncWarning.css';
const LS_DONT_SHOW_AGAIN = '_parity::syncWarning::dontShowAgain';
export const showSyncWarning = () => {
const dontShowAgain = store.get(LS_DONT_SHOW_AGAIN);
if (dontShowAgain === undefined || dontShowAgain === null) {
return true;
}
return !dontShowAgain;
};
class SyncWarning extends Component {
static propTypes = {
className: PropTypes.string,
isOk: PropTypes.bool.isRequired,
health: PropTypes.object.isRequired
};
state = {
dontShowAgain: false,
show: true
};
render () {
const { isOk, health } = this.props;
const { dontShowAgain, show } = this.state;
const { className, isOk, health } = this.props;
if (isOk || !show) {
if (isOk) {
return null;
}
return (
<div>
<div className={ styles.overlay } />
<div className={ styles.modal }>
<GradientBg className={ styles.body }>
<div className={ className }>
<div className={ styles.body }>
<div className={ styles.status }>
<StatusIndicator
type='signal'
@ -70,51 +46,17 @@ class SyncWarning extends Component {
status={ health.overall.status }
/>
</div>
{
health.overall.message.map(message => (
<p key={ message }>{ message }</p>
health.overall.message.map((message) => (
<p key={ message }>
{ message }
</p>
))
}
<div className={ styles.button }>
<Checkbox
label={
<FormattedMessage
id='syncWarning.dontShowAgain.label'
defaultMessage='Do not show this warning again'
/>
}
checked={ dontShowAgain }
onClick={ this.handleCheck }
/>
<Button
label={
<FormattedMessage
id='syncWarning.understandBtn.label'
defaultMessage='I understand'
/>
}
onClick={ this.handleAgreeClick }
/>
</div>
</GradientBg>
</div>
</div>
);
}
handleCheck = () => {
this.setState({ dontShowAgain: !this.state.dontShowAgain });
}
handleAgreeClick = () => {
if (this.state.dontShowAgain) {
store.set(LS_DONT_SHOW_AGAIN, true);
}
this.setState({ show: false });
}
}
function mapStateToProps (state) {