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

add desktop version for notifications

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-08 17:06:53 +02:00
parent 5e14ea6f87
commit 59f131f788
4 changed files with 99 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
js/components/global_notification.js
View File

@ -38,17 +38,27 @@ let GlobalNotification = React.createClass({
},
extractFirstElem(l) {
return l.length > 0 ? l[0] : {message: ''};
if(l.length > 0) {
return {
show: true,
message: l[0]
};
} else {
return {
show: false,
message: ''
};
}
},
onChange(state) {
let notification = this.extractFirstElem(state.notificationQue);
if(notification) {
if(notification.show) {
this.setState(notification);
} else {
this.replaceState({
message: ''
this.setState({
show: false
});
}
},
@ -62,31 +72,36 @@ let GlobalNotification = React.createClass({
render() {
let notificationClass = 'ascribe-global-notification';
let textClass;
let message = this.state && this.state.message ? this.state.message : null;
if(message) {
notificationClass += ' ascribe-global-notification-on';
if(this.state.containerWidth > 768) {
notificationClass = 'ascribe-global-notification-bubble';
if(this.state.show) {
notificationClass += ' ascribe-global-notification-bubble-on';
} else {
notificationClass += ' ascribe-global-notification-bubble-off';
}
} else {
notificationClass += ' ascribe-global-notification-off';
notificationClass = 'ascribe-global-notification';
if(this.state.show) {
notificationClass += ' ascribe-global-notification-on';
} else {
notificationClass += ' ascribe-global-notification-off';
}
}
if(this.state) {
switch(this.state.type) {
case 'warning':
textClass = 'ascribe-global-notification-warning';
break;
case 'success':
textClass = 'ascribe-global-notification-success';
break;
case 'info':
textClass = 'ascribe-global-notification-info';
break;
case 'danger':
textClass = 'ascribe-global-notification-danger';
break;
default:
console.warn('Could not find a matching type in global_notification.js');
}
switch(this.state.message.type) {
case 'success':
textClass = 'ascribe-global-notification-success';
break;
case 'danger':
textClass = 'ascribe-global-notification-danger';
break;
default:
console.warn('Could not find a matching type in global_notification.js');
}
return (
@ -94,7 +109,7 @@ let GlobalNotification = React.createClass({
<Row>
<Col>
<div className={notificationClass}>
<div className={textClass}>{message ? message : null}</div>
<div className={textClass}>{this.state.message.message}</div>
</div>
</Col>
</Row>

2
js/components/header.js
View File

@ -113,7 +113,7 @@ let Header = React.createClass({
<Nav navbar left>
</Nav>
<Nav navbar right>
<HeaderNotificationDebug />
<HeaderNotificationDebug show={false}/>
{addNewWork}
{collection}
{account}

30
js/components/header_notification_debug.js
View File

@ -14,15 +14,37 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
*/
let HeaderNotificationDebug = React.createClass({
propTypes: {
show: React.PropTypes.bool
},
getInitialState() {
return {
index: 0
};
},
triggerNotification() {
let notification = new GlobalNotificationModel('this is a test, please ignore', 'success');
if(this.state.index === 1) {
this.setState({index: 0});
} else {
this.setState({index: this.state.index + 1});
}
let actions = ['success', 'danger'];
let notification = new GlobalNotificationModel('this is a test, please ignore', actions[this.state.index]);
GlobalNotificationActions.appendGlobalNotification(notification);
},
render() {
return (
<MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
);
if(this.props.show) {
return (
<MenuItem onClick={this.triggerNotification}>Notification</MenuItem>
);
} else {
return null;
}
}
});

40
sass/ascribe-global-notification.scss
View File

@ -2,6 +2,7 @@
position: fixed;
background-color: #212121;
color: white;
width: 100%;
height:3.5em;
left:0;
@ -18,7 +19,7 @@
bottom: 0;
}
.ascribe-global-notification > div {
.ascribe-global-notification > div, .ascribe-global-notification-bubble > div {
display:table-cell;
vertical-align: middle;
font-size: 1.25em;
@ -27,18 +28,39 @@
padding-right: 3em;
}
.ascribe-global-notification-warning {
color: #f0ad4e;
.ascribe-global-notification-bubble > div {
padding: .75em 1.5em .75em 1.5em;
}
.ascribe-global-notification-bubble {
position: fixed;
bottom: 3em;
right: -50em;
display:table;
height: 3.5em;
background-color: #212121;
border-radius: 2px;
color: white;
transition: 1s right ease;
}
.ascribe-global-notification-bubble-off {
right: -50em;
}
.ascribe-global-notification-bubble-on {
right: 3.5em;
}
.ascribe-global-notification-danger {
color: #d9534f;
background-color: #d9534f;
}
.ascribe-global-notification-success {
color: #5cb85c;
}
.ascribe-global-notification-info {
color: rgba(2, 182, 163, 1);
background-color: rgba(2, 182, 163, 1);
}