ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

add first working prototype

This commit is contained in:
Tim Daubenschütz 2015-06-08 18:14:25 +02:00
parent b49f3fe9f2
commit e0e75151e0
11 changed files with 156 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -10,7 +10,6 @@
</head>
<body>
<div id="main" class="container"></div>
<div id="modal" class="container"></div>
<script src="build/app.js"></script>
</body>
</html>

15
js/actions/global_notification_actions.js Normal file
View File

@ -0,0 +1,15 @@
'use strict';
import alt from '../alt';
class GlobalNotificationActions {
constructor() {
this.generateActions(
'updateGlobalNotification',
'resetGlobalNotification'
);
}
}
export default alt.createActions(GlobalNotificationActions);

3
js/components/ascribe_app.js
View File

@ -3,6 +3,7 @@
import React from 'react';
import Router from 'react-router';
import Header from '../components/header';
import GlobalNotification from './global_notification';
let Link = Router.Link;
let RouteHandler = Router.RouteHandler;
@ -14,6 +15,8 @@ let AscribeApp = React.createClass({
<div>
<Header />
<RouteHandler />
<GlobalNotification />
<div id="modal" className="container"></div>
</div>
);
}

3
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
View File

@ -13,6 +13,7 @@ import UserActions from '../../actions/user_actions';
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
import AclButtonList from '../ascribe_buttons/acl_button_list';
import GlobalNotificationActions from '../../actions/global_notification_actions';
let PieceListBulkModal = React.createClass({
propTypes: {
@ -92,7 +93,7 @@ let PieceListBulkModal = React.createClass({
.forEach((pieceId) => {
EditionListActions.fetchEditionList(pieceId, this.state.orderBy, this.state.orderAsc);
});
GlobalNotificationActions.updateGlobalNotification({message: 'Transfer successful'});
EditionListActions.clearAllEditionSelections();
},

55
js/components/global_notification.js Normal file
View File

@ -0,0 +1,55 @@
'use strict';
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';
let GlobalNotification = React.createClass({
componentDidMount() {
GlobalNotificationStore.listen(this.onChange);
},
componentWillUnmount() {
GlobalNotificationStore.listen(this.onChange);
},
getInititalState() {
return GlobalNotificationStore.getState();
},
onChange(state) {
this.setState(state);
if(state.message && state.dismissAfter) {
setTimeout(GlobalNotificationActions.resetGlobalNotification, state.dismissAfter);
}
},
onClick() {
if(this.state.onClick) {
this.state.onClick();
}
GlobalNotificationActions.resetGlobalNotification();
},
render() {
let className = 'ascribe-global-notification ';
className += this.state && this.state.message ? 'ascribe-global-notification-on' : 'ascribe-global-notification-off';
return (
<Row onClick={this.onClick}>
<Col>
<div className={className}>
<div>{this.state ? this.state.message : null}</div>
</div>
</Col>
</Row>
);
}
});
export default GlobalNotification;

7
js/components/header.js
View File

@ -13,6 +13,8 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
import { getLangText } from '../utils/lang_utils';
import GlobalNotificationActions from '../actions/global_notification_actions';
let Link = Router.Link;
let Header = React.createClass({
@ -34,6 +36,10 @@ let Header = React.createClass({
this.setState(state);
},
showNotification() {
GlobalNotificationActions.updateGlobalNotification({message: 'transaction successful', dismissAfter: 2000});
},
render() {
return (
<Navbar>
@ -42,6 +48,7 @@ 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}>

40
js/stores/global_notification_store.js Normal file
View File

@ -0,0 +1,40 @@
'use strict';
import alt from '../alt';
import GlobalNotificationActions from '../actions/global_notification_actions';
class GlobalNotificationStore {
constructor() {
this.message = '';
this.action = '';
this.styles = {};
this.onClick = null;
this.dismissAfter = 0;
this.bindActions(GlobalNotificationActions);
}
onUpdateGlobalNotification({message, action, styles, onClick, dismissAfter}) {
if(!message) {
throw new Error('A notifications message must be defined.');
} else {
this.message = message;
}
this.action = action ? action : '';
this.styles = styles ? styles : {};
this.onClick = onClick ? onClick : null;
this.dismissAfter = dismissAfter ? dismissAfter : 0;
}
onResetGlobalNotification() {
this.message = '';
this.action = '';
this.styles = {};
this.onClick = null;
this.dismissAfter = 0;
}
}
export default alt.createStore(GlobalNotificationStore);

4
js/stores/piece_store.js
View File

@ -1,13 +1,13 @@
'use strict';
import alt from '../alt';
import PieceAction from '../actions/piece_actions';
import PieceActions from '../actions/piece_actions';
class PieceStore {
constructor() {
this.piece = {};
this.bindActions(PieceAction);
this.bindActions(PieceActions);
}
onUpdatePiece(piece) {

29
sass/ascribe-global-notification.scss Normal file
View File

@ -0,0 +1,29 @@
.ascribe-global-notification {
position: fixed;
background-color: #212121;
width: 100%;
height:3.5em;
left:0;
display:table;
transition: .2s bottom cubic-bezier(0.77, 0, 0.175, 1);
}
.ascribe-global-notification-off {
bottom: -3.5em;
}
.ascribe-global-notification-on {
bottom: 0;
}
.ascribe-global-notification > div {
display:table-cell;
vertical-align: middle;
color: $ascribe-color-full;
font-size: 1.25em;
font-family: 'Source Sans Pro';
text-align: right;
padding-right: 3em;
}

3
sass/ascribe_variables.scss
View File

@ -1,2 +1,3 @@
$ascribe-color: rgba(2, 182, 163, 0.5);
$ascribe-color-dark: rgba(2, 182, 163, 0.8);
$ascribe-color-dark: rgba(2, 182, 163, 0.8);
$ascribe-color-full: rgba(2, 182, 163, 1);

1
sass/main.scss
View File

@ -11,6 +11,7 @@
@import 'ascribe_piece_list_toolbar';
@import 'ascribe_edition';
@import 'ascribe_media_player';
@import 'ascribe-global-notification';
@import 'offset_right';
.hidden {