From e0e75151e087fb71cda4e45bd9e7ea9faf8f9449 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 8 Jun 2015 18:14:25 +0200 Subject: [PATCH] add first working prototype --- index.html | 1 - js/actions/global_notification_actions.js | 15 +++++ js/components/ascribe_app.js | 3 + .../piece_list_bulk_modal.js | 3 +- js/components/global_notification.js | 55 +++++++++++++++++++ js/components/header.js | 7 +++ js/stores/global_notification_store.js | 40 ++++++++++++++ js/stores/piece_store.js | 4 +- sass/ascribe-global-notification.scss | 29 ++++++++++ sass/ascribe_variables.scss | 3 +- sass/main.scss | 1 + 11 files changed, 156 insertions(+), 5 deletions(-) create mode 100644 js/actions/global_notification_actions.js create mode 100644 js/components/global_notification.js create mode 100644 js/stores/global_notification_store.js create mode 100644 sass/ascribe-global-notification.scss diff --git a/index.html b/index.html index 320dfa89..e30f8d54 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,6 @@
- diff --git a/js/actions/global_notification_actions.js b/js/actions/global_notification_actions.js new file mode 100644 index 00000000..5304e5aa --- /dev/null +++ b/js/actions/global_notification_actions.js @@ -0,0 +1,15 @@ +'use strict'; + +import alt from '../alt'; + + +class GlobalNotificationActions { + constructor() { + this.generateActions( + 'updateGlobalNotification', + 'resetGlobalNotification' + ); + } +} + +export default alt.createActions(GlobalNotificationActions); diff --git a/js/components/ascribe_app.js b/js/components/ascribe_app.js index 6484976c..ab860893 100644 --- a/js/components/ascribe_app.js +++ b/js/components/ascribe_app.js @@ -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({
+ +
); } diff --git a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js index 2cf32139..48c02221 100644 --- a/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js +++ b/js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js @@ -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(); }, diff --git a/js/components/global_notification.js b/js/components/global_notification.js new file mode 100644 index 00000000..7baec6fa --- /dev/null +++ b/js/components/global_notification.js @@ -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 ( + + +
+
{this.state ? this.state.message : null}
+
+ + + ); + } +}); + +export default GlobalNotification; \ No newline at end of file diff --git a/js/components/header.js b/js/components/header.js index d46dd4b2..41831d80 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -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 ( @@ -42,6 +48,7 @@ let Header = React.createClass({ ascribe + test notification