From c1f07c3329c72383f3697a2898247f0a8095deca Mon Sep 17 00:00:00 2001 From: Craig O'Connor Date: Thu, 4 May 2017 05:03:55 -0400 Subject: [PATCH] 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 --- js/src/shell/Snackbar/snackbar.js | 18 +--- js/src/ui/Errors/errors.js | 20 +--- js/src/ui/Snackbar/index.js | 17 +++ js/src/ui/Snackbar/snackbar.css | 36 +++++++ js/src/ui/Snackbar/snackbar.js | 101 ++++++++++++++++++ js/src/ui/index.js | 1 + .../PasswordManager/passwordManager.js | 63 +++++------ 7 files changed, 194 insertions(+), 62 deletions(-) create mode 100644 js/src/ui/Snackbar/index.js create mode 100644 js/src/ui/Snackbar/snackbar.css create mode 100644 js/src/ui/Snackbar/snackbar.js 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;