ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

add different kinds of notifications

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-09 13:36:09 +02:00
parent d3fc902411
commit 296176572e
3 changed files with 39 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
js/components/global_notification.js
View File

@ -3,7 +3,6 @@
import React from 'react';
import GlobalNotificationStore from '../stores/global_notification_store';
import GlobalNotificationActions from '../actions/global_notification_actions';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
@ -37,20 +36,37 @@ let GlobalNotification = React.createClass({
},
render() {
let className = 'ascribe-global-notification ';
let notificationClass = 'ascribe-global-notification ';
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'
};
let text = (<div style={{color: colors[this.state.type]}}>{message ? message : null}</div>);
return (
<Row>
<Col>
<div className={className}>
<div>{message ? message : null}</div>
<div className={notificationClass + 'ascribe-global-notification-on'}>
{text}
</div>
</Col>
</Row>
);
} else {
return (
<Row>
<Col>
<div className={notificationClass + 'ascribe-global-notification-off'} />
</Col>
</Row>
);
}
}
});

9
js/components/header.js
View File

@ -13,9 +13,6 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
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 Header = React.createClass({
@ -37,11 +34,6 @@ let Header = React.createClass({
this.setState(state);
},
showNotification() {
let notification = new GlobalNotificationModel('transaction successful', 3500);
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
return (
<Navbar>
@ -50,7 +42,6 @@ let Header = React.createClass({
<span>ascribe </span>
<span className="glyph-ascribe-spool-chunked ascribe-color"></span>
</a>
<MenuItem onClick={this.showNotification}>test notification</MenuItem>
</Nav>
<Nav right>
<DropdownButton eventKey="1" title={this.state.currentUser.username}>

16
js/models/global_notification_model.js
View File

@ -1,13 +1,19 @@
'use strict';
export default class GlobalNotificationModel {
constructor(message, dismissAfter) {
if(!message) {
throw new Error('A notifications message must be defined.');
} else {
constructor(message, type = 'info', dismissAfter = 3500) {
if(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;
}
}