Mui-be-gone-3 (#5546)

* mui-be-gone

* second

* mui-be-gone-3

* updates

* ups and ups

* oops

* Revert to changes in removed files from ui-2

* Revert to stateless component
This commit is contained in:
Craig O'Connor 2017-05-04 05:03:55 -04:00 committed by Jaco Greeff
parent f34a0346bc
commit c1f07c3329
7 changed files with 194 additions and 62 deletions

View File

@ -18,24 +18,16 @@ import React, { PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Snackbar as SnackbarMUI } from 'material-ui'; import { Snackbar as SnackbarUI } from '~/ui';
import { closeSnackbar } from '~/redux/providers/snackbarActions'; import { closeSnackbar } from '~/redux/providers/snackbarActions';
const BODY_STYLE = { function Snackbar ({ closeSnackbar, cooldown = 3500, message, open = false }) {
backgroundColor: 'rgba(0, 0, 0, 0.87)',
borderStyle: 'solid',
borderColor: '#424242',
borderWidth: '1px 1px 0 1px'
};
function Snackbar ({ closeSnackbar, cooldown, message, open }) {
return ( return (
<SnackbarMUI <SnackbarUI
autoHideDuration={ cooldown }
bodyStyle={ BODY_STYLE }
message={ message }
open={ open } open={ open }
message={ message }
autoHideDuration={ cooldown }
onRequestClose={ closeSnackbar } onRequestClose={ closeSnackbar }
/> />
); );

View File

@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { Snackbar } from 'material-ui'; import { Snackbar } from '~/ui/Snackbar';
import { closeErrors } from './actions'; import { closeErrors } from './actions';
@ -26,17 +26,9 @@ import styles from './errors.css';
const ERROR_REGEX = /-(\d+): (.+)$/; const ERROR_REGEX = /-(\d+): (.+)$/;
const DURATION_OPEN = 60000; const DURATION_OPEN = 60000;
const STYLE_BODY = {
height: 'auto',
whiteSpace: 'pre-line'
};
const STYLE_CONTENT = { const STYLE_CONTENT = {
alignItems: 'center', backgroundColor: 'rgba(255, 71, 71, 0.75)'
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
lineHeight: '1.5em',
padding: '0.75em 0'
}; };
class Errors extends Component { class Errors extends Component {
@ -48,7 +40,7 @@ class Errors extends Component {
}; };
render () { render () {
const { message, visible, onCloseErrors } = this.props; const { message, visible } = this.props;
if (!message || !visible) { if (!message || !visible) {
return null; return null;
@ -68,10 +60,8 @@ class Errors extends Component {
} }
autoHideDuration={ DURATION_OPEN } autoHideDuration={ DURATION_OPEN }
message={ text } message={ text }
onActionTouchTap={ onCloseErrors }
onRequestClose={ this.onRequestClose } onRequestClose={ this.onRequestClose }
bodyStyle={ STYLE_BODY } bodyStyle={ STYLE_CONTENT }
contentStyle={ STYLE_CONTENT }
/> />
); );
} }

View File

@ -0,0 +1,17 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
export default from './snackbar';

View File

@ -0,0 +1,36 @@
/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
/* This file is part of Parity.
/*
/* Parity is free software: you can redistribute it and/or modify
/* it under the terms of the GNU General Public License as published by
/* the Free Software Foundation, either version 3 of the License, or
/* (at your option) any later version.
/*
/* Parity is distributed in the hope that it will be useful,
/* but WITHOUT ANY WARRANTY; without even the implied warranty of
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
/* GNU General Public License for more details.
/*
/* You should have received a copy of the GNU General Public License
/* along with Parity. If not, see <http://www.gnu.org/licenses/>.
*/
.snacks {
color: white;
padding: 10px 20px;
position: fixed;
left: 50%;
bottom: 0;
height: 40px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: rgba(0, 0, 0, 0.75);
z-index: 3000;
transition: transform 0.75s;
}
#action {
padding-left: 20px;
font-weight: bold;
cursor: pointer;
}

View File

@ -0,0 +1,101 @@
// Copyright 2015-2017 Parity Technologies (UK) Ltd.
// This file is part of Parity.
// Parity is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// Parity is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with Parity. If not, see <http://www.gnu.org/licenses/>.
import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import styles from './snackbar.css';
export default class Snackbar extends Component {
state = {
snackStyle: {
transform: 'translateX(-50%) translateY(40px)'
}
};
static propTypes = {
action: PropTypes.any,
open: PropTypes.bool,
message: PropTypes.string,
autoHideDuration: PropTypes.number,
bodyStyle: PropTypes.object,
onRequestClose: PropTypes.Func
};
defaultProps = {
autoHideDuration: 3500
};
componentWillUpdate (nextProps) {
const self = this;
if (this.openStatus) {
return;
}
if (nextProps.open === true) {
this.openStatus = true;
self.autoShow();
setTimeout(() => {
self.autoHide();
}, nextProps.autoHideDuration);
}
}
autoShow () {
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(0px)'
}
});
}
autoHide () {
this.props.onRequestClose();
this.openStatus = false;
this.setState({
snackStyle: {
transform: 'translateX(-50%) translateY(40px)'
}
});
}
render () {
const { bodyStyle, message } = this.props;
const { snackStyle } = this.state;
let { action } = this.props;
if (action === null || action === 'undefined') {
action = (
<FormattedMessage
id='ui.snackbar.close'
defaultMessage='close'
/>
);
}
return (
<div className={ styles.snacks } style={ snackStyle }>
<div style={ bodyStyle }>
<span>{ message }</span>
<span id={ styles.action } onClick={ this.autoHide }>{ action }</span>
</div>
</div>
);
}
}

View File

@ -56,6 +56,7 @@ export SectionList from './SectionList';
export SelectionList from './SelectionList'; export SelectionList from './SelectionList';
export ShortenedHash from './ShortenedHash'; export ShortenedHash from './ShortenedHash';
export SignerIcon from './SignerIcon'; export SignerIcon from './SignerIcon';
export Snackbar from './Snackbar';
export Tags from './Tags'; export Tags from './Tags';
export Title from './Title'; export Title from './Title';
export TxHash from './TxHash'; export TxHash from './TxHash';

View File

@ -15,7 +15,7 @@
// along with Parity. If not, see <http://www.gnu.org/licenses/>. // along with Parity. If not, see <http://www.gnu.org/licenses/>.
import Paper from 'material-ui/Paper'; import Paper from 'material-ui/Paper';
import { Tabs, Tab } from 'material-ui/Tabs'; import { Menu, Segment } from 'semantic-ui-react';
import { observer } from 'mobx-react'; import { observer } from 'mobx-react';
import React, { Component, PropTypes } from 'react'; import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
@ -37,15 +37,13 @@ const MSG_SUCCESS_STYLE = {
const MSG_FAILURE_STYLE = { const MSG_FAILURE_STYLE = {
backgroundColor: 'rgba(229, 115, 115, 0.75)' backgroundColor: 'rgba(229, 115, 115, 0.75)'
}; };
const TABS_INKBAR_STYLE = {
backgroundColor: 'rgb(0, 151, 167)' // 'rgba(255, 255, 255, 0.55)' let MENU_CONTENT = 'TEST';
};
const TABS_ITEM_STYLE = {
backgroundColor: 'rgba(255, 255, 255, 0.05)'
};
@observer @observer
class PasswordManager extends Component { class PasswordManager extends Component {
state = { activeItem: 'bio' };
static contextTypes = { static contextTypes = {
api: PropTypes.object.isRequired api: PropTypes.object.isRequired
} }
@ -136,37 +134,34 @@ class PasswordManager extends Component {
} }
renderPage () { renderPage () {
const { activeItem } = this.state;
return ( return (
<Tabs <div>
inkBarStyle={ TABS_INKBAR_STYLE } <Menu attached='top' tabular>
tabItemContainerStyle={ TABS_ITEM_STYLE } <Menu.Item name='Test Password' active={ activeItem === 'Test Password' } onClick={ this.itemTestPassword } />
> <Menu.Item name='Change Password' active={ activeItem === 'Change Password' } onClick={ this.itemChangePassword } />
<Tab </Menu>
label={
<FormattedMessage <Segment attached='bottom'>
id='passwordChange.tabTest.label' { MENU_CONTENT === 'TEST' ? this.renderTabTest() : this.renderTabChange() }
defaultMessage='Test Password' </Segment>
/> </div>
}
onActive={ this.onActivateTestTab }
>
{ this.renderTabTest() }
</Tab>
<Tab
label={
<FormattedMessage
id='passwordChange.tabChange.label'
defaultMessage='Change Password'
/>
}
onActive={ this.onActivateChangeTab }
>
{ this.renderTabChange() }
</Tab>
</Tabs>
); );
} }
itemTestPassword = (e, name) => {
MENU_CONTENT = 'TEST';
this.onActivateTestTab();
this.setState({ activeItem: name });
}
itemChangePassword = (e, name) => {
MENU_CONTENT = 'CHANGE';
this.onActivateChangeTab();
this.setState({ activeItem: name });
}
renderTabTest () { renderTabTest () {
const { actionTab, busy } = this.store; const { actionTab, busy } = this.store;