diff --git a/js/src/shell/Snackbar/snackbar.js b/js/src/shell/Snackbar/snackbar.js
index b72810699..585cbc6ac 100644
--- a/js/src/shell/Snackbar/snackbar.js
+++ b/js/src/shell/Snackbar/snackbar.js
@@ -18,24 +18,16 @@ import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Snackbar as SnackbarMUI } from 'material-ui';
+import { Snackbar as SnackbarUI } from '~/ui';
import { closeSnackbar } from '~/redux/providers/snackbarActions';
-const BODY_STYLE = {
- backgroundColor: 'rgba(0, 0, 0, 0.87)',
- borderStyle: 'solid',
- borderColor: '#424242',
- borderWidth: '1px 1px 0 1px'
-};
-
-function Snackbar ({ closeSnackbar, cooldown, message, open }) {
+function Snackbar ({ closeSnackbar, cooldown = 3500, message, open = false }) {
return (
-
);
diff --git a/js/src/ui/Errors/errors.js b/js/src/ui/Errors/errors.js
index 764b072f7..59ce74722 100644
--- a/js/src/ui/Errors/errors.js
+++ b/js/src/ui/Errors/errors.js
@@ -18,7 +18,7 @@ import React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
-import { Snackbar } from 'material-ui';
+import { Snackbar } from '~/ui/Snackbar';
import { closeErrors } from './actions';
@@ -26,17 +26,9 @@ import styles from './errors.css';
const ERROR_REGEX = /-(\d+): (.+)$/;
const DURATION_OPEN = 60000;
-const STYLE_BODY = {
- height: 'auto',
- whiteSpace: 'pre-line'
-};
+
const STYLE_CONTENT = {
- alignItems: 'center',
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'space-between',
- lineHeight: '1.5em',
- padding: '0.75em 0'
+ backgroundColor: 'rgba(255, 71, 71, 0.75)'
};
class Errors extends Component {
@@ -48,7 +40,7 @@ class Errors extends Component {
};
render () {
- const { message, visible, onCloseErrors } = this.props;
+ const { message, visible } = this.props;
if (!message || !visible) {
return null;
@@ -68,10 +60,8 @@ class Errors extends Component {
}
autoHideDuration={ DURATION_OPEN }
message={ text }
- onActionTouchTap={ onCloseErrors }
onRequestClose={ this.onRequestClose }
- bodyStyle={ STYLE_BODY }
- contentStyle={ STYLE_CONTENT }
+ bodyStyle={ STYLE_CONTENT }
/>
);
}
diff --git a/js/src/ui/Snackbar/index.js b/js/src/ui/Snackbar/index.js
new file mode 100644
index 000000000..2a7e79b5d
--- /dev/null
+++ b/js/src/ui/Snackbar/index.js
@@ -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 .
+
+export default from './snackbar';
diff --git a/js/src/ui/Snackbar/snackbar.css b/js/src/ui/Snackbar/snackbar.css
new file mode 100644
index 000000000..894581faf
--- /dev/null
+++ b/js/src/ui/Snackbar/snackbar.css
@@ -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 .
+*/
+
+.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;
+}
diff --git a/js/src/ui/Snackbar/snackbar.js b/js/src/ui/Snackbar/snackbar.js
new file mode 100644
index 000000000..6d5dcef44
--- /dev/null
+++ b/js/src/ui/Snackbar/snackbar.js
@@ -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 .
+
+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 = (
+
+ );
+ }
+
+ return (
+
+
+ { message }
+ { action }
+
+
+ );
+ }
+}
diff --git a/js/src/ui/index.js b/js/src/ui/index.js
index cb547cf64..6479e04a6 100644
--- a/js/src/ui/index.js
+++ b/js/src/ui/index.js
@@ -56,6 +56,7 @@ export SectionList from './SectionList';
export SelectionList from './SelectionList';
export ShortenedHash from './ShortenedHash';
export SignerIcon from './SignerIcon';
+export Snackbar from './Snackbar';
export Tags from './Tags';
export Title from './Title';
export TxHash from './TxHash';
diff --git a/js/src/views/Account/PasswordManager/passwordManager.js b/js/src/views/Account/PasswordManager/passwordManager.js
index d40ac7cde..ce770afbf 100644
--- a/js/src/views/Account/PasswordManager/passwordManager.js
+++ b/js/src/views/Account/PasswordManager/passwordManager.js
@@ -15,7 +15,7 @@
// along with Parity. If not, see .
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 React, { Component, PropTypes } from 'react';
import { FormattedMessage } from 'react-intl';
@@ -37,15 +37,13 @@ const MSG_SUCCESS_STYLE = {
const MSG_FAILURE_STYLE = {
backgroundColor: 'rgba(229, 115, 115, 0.75)'
};
-const TABS_INKBAR_STYLE = {
- backgroundColor: 'rgb(0, 151, 167)' // 'rgba(255, 255, 255, 0.55)'
-};
-const TABS_ITEM_STYLE = {
- backgroundColor: 'rgba(255, 255, 255, 0.05)'
-};
+
+let MENU_CONTENT = 'TEST';
@observer
class PasswordManager extends Component {
+ state = { activeItem: 'bio' };
+
static contextTypes = {
api: PropTypes.object.isRequired
}
@@ -136,37 +134,34 @@ class PasswordManager extends Component {
}
renderPage () {
+ const { activeItem } = this.state;
+
return (
-
-
- }
- onActive={ this.onActivateTestTab }
- >
- { this.renderTabTest() }
-
-
- }
- onActive={ this.onActivateChangeTab }
- >
- { this.renderTabChange() }
-
-
+
+
+
+
+ { MENU_CONTENT === 'TEST' ? this.renderTabTest() : this.renderTabChange() }
+
+
);
}
+ 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 () {
const { actionTab, busy } = this.store;