mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
add different kinds of notifications
This commit is contained in:
parent
d3fc902411
commit
296176572e
@ -3,7 +3,6 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import GlobalNotificationStore from '../stores/global_notification_store';
|
import GlobalNotificationStore from '../stores/global_notification_store';
|
||||||
import GlobalNotificationActions from '../actions/global_notification_actions';
|
|
||||||
|
|
||||||
import Row from 'react-bootstrap/lib/Row';
|
import Row from 'react-bootstrap/lib/Row';
|
||||||
import Col from 'react-bootstrap/lib/Col';
|
import Col from 'react-bootstrap/lib/Col';
|
||||||
@ -37,20 +36,37 @@ let GlobalNotification = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let className = 'ascribe-global-notification ';
|
let notificationClass = 'ascribe-global-notification ';
|
||||||
let message = this.state && this.state.message ? this.state.message : null;
|
let message = this.state && this.state.message ? this.state.message : null;
|
||||||
|
|
||||||
className += message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off';
|
if(message) {
|
||||||
|
let colors = {
|
||||||
|
warning: '#f0ad4e',
|
||||||
|
success: '#5cb85c',
|
||||||
|
info: 'rgba(2, 182, 163, 1)',
|
||||||
|
danger: '#d9534f'
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
let text = (<div style={{color: colors[this.state.type]}}>{message ? message : null}</div>);
|
||||||
<Row>
|
|
||||||
<Col>
|
return (
|
||||||
<div className={className}>
|
<Row>
|
||||||
<div>{message ? message : null}</div>
|
<Col>
|
||||||
</div>
|
<div className={notificationClass + 'ascribe-global-notification-on'}>
|
||||||
</Col>
|
{text}
|
||||||
</Row>
|
</div>
|
||||||
);
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<div className={notificationClass + 'ascribe-global-notification-off'} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -13,9 +13,6 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
|
|||||||
|
|
||||||
import { getLangText } from '../utils/lang_utils';
|
import { getLangText } from '../utils/lang_utils';
|
||||||
|
|
||||||
import GlobalNotificationActions from '../actions/global_notification_actions';
|
|
||||||
import GlobalNotificationModel from '../models/global_notification_model';
|
|
||||||
|
|
||||||
let Link = Router.Link;
|
let Link = Router.Link;
|
||||||
|
|
||||||
let Header = React.createClass({
|
let Header = React.createClass({
|
||||||
@ -37,11 +34,6 @@ let Header = React.createClass({
|
|||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
showNotification() {
|
|
||||||
let notification = new GlobalNotificationModel('transaction successful', 3500);
|
|
||||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Navbar>
|
<Navbar>
|
||||||
@ -50,7 +42,6 @@ let Header = React.createClass({
|
|||||||
<span>ascribe </span>
|
<span>ascribe </span>
|
||||||
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
|
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
|
||||||
</a>
|
</a>
|
||||||
<MenuItem onClick={this.showNotification}>test notification</MenuItem>
|
|
||||||
</Nav>
|
</Nav>
|
||||||
<Nav right>
|
<Nav right>
|
||||||
<DropdownButton eventKey="1" title={this.state.currentUser.username}>
|
<DropdownButton eventKey="1" title={this.state.currentUser.username}>
|
||||||
|
@ -1,13 +1,19 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
export default class GlobalNotificationModel {
|
export default class GlobalNotificationModel {
|
||||||
constructor(message, dismissAfter) {
|
constructor(message, type = 'info', dismissAfter = 3500) {
|
||||||
if(!message) {
|
if(message) {
|
||||||
throw new Error('A notifications message must be defined.');
|
|
||||||
} else {
|
|
||||||
this.message = message;
|
this.message = message;
|
||||||
|
} else {
|
||||||
|
throw new Error('A notifications message must be defined.');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.dismissAfter = dismissAfter ? dismissAfter : 0;
|
if(type === 'info' || type === 'success' || type === 'warning' || type === 'danger') {
|
||||||
|
this.type = type;
|
||||||
|
} else {
|
||||||
|
throw new Error('A notification\'s type either has to be info, success, warning, danger. Not: ' + type);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.dismissAfter = dismissAfter;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user