mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
added new global alert
This commit is contained in:
parent
514148ffa1
commit
76981c2ad9
@ -26,6 +26,11 @@ var actions = {
|
||||
SIDEBAR_CLOSE: 'UI_SIDEBAR_CLOSE',
|
||||
showSidebar: showSidebar,
|
||||
hideSidebar: hideSidebar,
|
||||
// sidebar state
|
||||
ALERT_OPEN: 'UI_ALERT_OPEN',
|
||||
ALERT_CLOSE: 'UI_ALERT_CLOSE',
|
||||
showAlert: showAlert,
|
||||
hideAlert: hideAlert,
|
||||
// network dropdown open
|
||||
NETWORK_DROPDOWN_OPEN: 'UI_NETWORK_DROPDOWN_OPEN',
|
||||
NETWORK_DROPDOWN_CLOSE: 'UI_NETWORK_DROPDOWN_CLOSE',
|
||||
@ -1724,6 +1729,19 @@ function hideSidebar () {
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert (msg) {
|
||||
return {
|
||||
type: actions.ALERT_OPEN,
|
||||
value: msg,
|
||||
}
|
||||
}
|
||||
|
||||
function hideAlert () {
|
||||
return {
|
||||
type: actions.ALERT_CLOSE,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function showLoadingIndication (message) {
|
||||
return {
|
||||
|
@ -36,6 +36,8 @@ const AccountMenu = require('./components/account-menu')
|
||||
|
||||
// Global Modals
|
||||
const Modal = require('./components/modals/index').Modal
|
||||
// Global Alert
|
||||
const Alert = require('./components/alert')
|
||||
|
||||
const AppHeader = require('./components/app-header')
|
||||
|
||||
@ -93,6 +95,7 @@ class App extends Component {
|
||||
render () {
|
||||
const {
|
||||
isLoading,
|
||||
alertMessage,
|
||||
loadingMessage,
|
||||
network,
|
||||
isMouseUser,
|
||||
@ -126,6 +129,9 @@ class App extends Component {
|
||||
// global modal
|
||||
h(Modal, {}, []),
|
||||
|
||||
// global alert
|
||||
h(Alert, {visible: this.props.alertOpen, msg: alertMessage}),
|
||||
|
||||
h(AppHeader),
|
||||
|
||||
// sidebar
|
||||
@ -149,14 +155,6 @@ class App extends Component {
|
||||
)
|
||||
}
|
||||
|
||||
renderGlobalModal () {
|
||||
return h(Modal, {
|
||||
ref: 'modalRef',
|
||||
}, [
|
||||
// h(BuyOptions, {}, []),
|
||||
])
|
||||
}
|
||||
|
||||
renderSidebar () {
|
||||
return h('div', [
|
||||
h('style', `
|
||||
@ -265,11 +263,13 @@ App.propTypes = {
|
||||
setCurrentCurrencyToUSD: PropTypes.func,
|
||||
isLoading: PropTypes.bool,
|
||||
loadingMessage: PropTypes.string,
|
||||
alertMessage: PropTypes.string,
|
||||
network: PropTypes.string,
|
||||
provider: PropTypes.object,
|
||||
frequentRpcList: PropTypes.array,
|
||||
currentView: PropTypes.object,
|
||||
sidebarOpen: PropTypes.bool,
|
||||
alertOpen: PropTypes.bool,
|
||||
hideSidebar: PropTypes.func,
|
||||
isMascara: PropTypes.bool,
|
||||
isOnboarding: PropTypes.bool,
|
||||
@ -305,6 +305,8 @@ function mapStateToProps (state) {
|
||||
const {
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
alertOpen,
|
||||
alertMessage,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
} = appState
|
||||
@ -330,6 +332,8 @@ function mapStateToProps (state) {
|
||||
// state from plugin
|
||||
networkDropdownOpen,
|
||||
sidebarOpen,
|
||||
alertOpen,
|
||||
alertMessage,
|
||||
isLoading,
|
||||
loadingMessage,
|
||||
noActiveNotices,
|
||||
|
22
ui/app/components/alert/index.js
Normal file
22
ui/app/components/alert/index.js
Normal file
@ -0,0 +1,22 @@
|
||||
const { Component } = require('react')
|
||||
const PropTypes = require('prop-types')
|
||||
const h = require('react-hyperscript')
|
||||
|
||||
class Alert extends Component {
|
||||
|
||||
render () {
|
||||
const className = `.global-alert${this.props.visible ? '.visible' : '.hidden'}`
|
||||
return (
|
||||
h(`div${className}`, {},
|
||||
h('a.msg', {}, this.props.msg)
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Alert.propTypes = {
|
||||
visible: PropTypes.bool.isRequired,
|
||||
msg: PropTypes.string,
|
||||
}
|
||||
module.exports = Alert
|
||||
|
57
ui/app/css/itcss/components/alert.scss
Normal file
57
ui/app/css/itcss/components/alert.scss
Normal file
@ -0,0 +1,57 @@
|
||||
.global-alert {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background-color: #33A4E7;
|
||||
|
||||
.msg {
|
||||
width: 100%;
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.global-alert.hidden {
|
||||
animation: alertHidden .5s ease forwards;
|
||||
}
|
||||
|
||||
.global-alert.visible {
|
||||
animation: alert .5s ease forwards;
|
||||
}
|
||||
|
||||
/* Animation */
|
||||
@keyframes alert {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: -50px;
|
||||
padding: 0px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0;
|
||||
padding: 8px;
|
||||
line-height: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes alertHidden {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
padding: 8px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
top: -50px;
|
||||
padding: 0px;
|
||||
line-height: 0px;
|
||||
}
|
||||
}
|
@ -8,6 +8,8 @@
|
||||
|
||||
@import './modal.scss';
|
||||
|
||||
@import './alert.scss';
|
||||
|
||||
@import './newui-sections.scss';
|
||||
|
||||
@import './account-dropdown.scss';
|
||||
|
@ -49,6 +49,8 @@ function reduceApp (state, action) {
|
||||
},
|
||||
},
|
||||
sidebarOpen: false,
|
||||
alertOpen: false,
|
||||
alertMessage: null,
|
||||
networkDropdownOpen: false,
|
||||
currentView: seedWords ? seedConfView : defaultView,
|
||||
accountDetail: {
|
||||
@ -88,6 +90,19 @@ function reduceApp (state, action) {
|
||||
sidebarOpen: false,
|
||||
})
|
||||
|
||||
// sidebar methods
|
||||
case actions.ALERT_OPEN:
|
||||
return extend(appState, {
|
||||
alertOpen: true,
|
||||
alertMessage: action.value,
|
||||
})
|
||||
|
||||
case actions.ALERT_CLOSE:
|
||||
return extend(appState, {
|
||||
alertOpen: false,
|
||||
alertMessage: null,
|
||||
})
|
||||
|
||||
// modal methods:
|
||||
case actions.MODAL_OPEN:
|
||||
const { name, ...modalProps } = action.payload
|
||||
|
Loading…
Reference in New Issue
Block a user