diff --git a/js/components/ascribe_detail/edition_container.js b/js/components/ascribe_detail/edition_container.js
index 15086434..62efa709 100644
--- a/js/components/ascribe_detail/edition_container.js
+++ b/js/components/ascribe_detail/edition_container.js
@@ -34,6 +34,15 @@ let EditionContainer = React.createClass({
EditionActions.fetchOne(this.props.params.editionId);
},
+ // This is done to update the container when the user clicks on the prev or next
+ // button to update the URL parameter (and therefore to switch pieces)
+ componentWillReceiveProps(nextProps) {
+ if(this.props.params.editionId !== nextProps.params.editionId) {
+ EditionActions.updateEdition({});
+ EditionActions.fetchOne(nextProps.params.editionId);
+ }
+ },
+
componentWillUnmount() {
// Every time we're leaving the edition detail page,
// just reset the edition that is saved in the edition store
diff --git a/js/components/global_action.js b/js/components/global_action.js
new file mode 100644
index 00000000..80df0c75
--- /dev/null
+++ b/js/components/global_action.js
@@ -0,0 +1,43 @@
+'use strict';
+
+import React from 'react';
+
+let GlobalAction = React.createClass({
+ propTypes: {
+ requestActions: React.PropTypes.object
+ },
+
+ render() {
+ let pieceActions = null;
+ if (this.props.requestActions && this.props.requestActions.pieces){
+ pieceActions = this.props.requestActions.pieces.map((item) => {
+ return (
+
+ {item}
+
);
+ });
+ }
+ let editionActions = null;
+ if (this.props.requestActions && this.props.requestActions.editions){
+ editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => {
+ return this.props.requestActions.editions[pieceId].map((item) => {
+ return (
+
+ {item}
+
);
+ });
+ });
+ }
+
+ if (pieceActions || editionActions) {
+ return (
+
+ {pieceActions}
+ {editionActions}
+
);
+ }
+ return null;
+ }
+});
+
+export default GlobalAction;
\ No newline at end of file
diff --git a/js/components/header.js b/js/components/header.js
index 0863624f..7cd0e455 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -3,6 +3,8 @@
import React from 'react';
import Router from 'react-router';
+import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+
import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store';
@@ -10,6 +12,8 @@ import WhitelabelActions from '../actions/whitelabel_actions';
import WhitelabelStore from '../stores/whitelabel_store';
import EventActions from '../actions/event_actions';
+import PieceListStore from '../stores/piece_list_store';
+
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -25,6 +29,8 @@ import NavRoutesLinks from './nav_routes_links';
import { mergeOptions } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils';
+let Link = Router.Link;
+
let Header = React.createClass({
propTypes: {
@@ -41,7 +47,11 @@ let Header = React.createClass({
},
getInitialState() {
- return mergeOptions(WhitelabelStore.getState(), UserStore.getState());
+ return mergeOptions(
+ WhitelabelStore.getState(),
+ UserStore.getState(),
+ PieceListStore.getState()
+ );
},
componentDidMount() {
@@ -49,11 +59,13 @@ let Header = React.createClass({
UserStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel();
WhitelabelStore.listen(this.onChange);
+ PieceListStore.listen(this.onChange);
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
+ PieceListStore.unlisten(this.onChange);
},
getLogo(){
@@ -90,6 +102,34 @@ let Header = React.createClass({
}
},
+ getNotifications() {
+ if (this.state.requestActions && this.state.requestActions.length > 0) {
+ return (
+
+
+
+ ({this.state.requestActions.length})
+
+ }
+ className="notification-menu">
+ {this.state.requestActions.map((pieceOrEdition, i) => {
+ return (
+
+
+ );
+ })
+ }
+
+ );
+ }
+ return null;
+ },
+
render() {
let account;
let signup;
@@ -100,7 +140,7 @@ let Header = React.createClass({
{getLangText('Account Settings')}
{getLangText('Log out')}
-
+
);
navRoutesLinks = ;
}
@@ -122,6 +162,7 @@ let Header = React.createClass({
{this.getPoweredBy()}
+ {this.getNotifications()}
{account}
{signup}
@@ -134,4 +175,57 @@ let Header = React.createClass({
}
});
+let NotificationListItem = React.createClass({
+ propTypes: {
+ pieceOrEdition: React.PropTypes.object
+ },
+
+ getLinkData() {
+
+ if(this.props.pieceOrEdition && this.props.pieceOrEdition.bitcoin_id) {
+ return {
+ to: 'edition',
+ params: {
+ editionId: this.props.pieceOrEdition.bitcoin_id
+ }
+ };
+ } else {
+ return {
+ to: 'piece',
+ params: {
+ pieceId: this.props.pieceOrEdition.id
+ }
+ };
+ }
+
+ },
+
+ render() {
+ if (this.props.pieceOrEdition) {
+ return (
+
+
+
+
+
+
+
+
+
{this.props.pieceOrEdition.title}
+
by {this.props.pieceOrEdition.artist_name}
+
+ {
+ this.props.pieceOrEdition.request_action.map((requestAction) => {
+ return 'Pending ' + requestAction.action + ' request';
+ })
+ }
+
+
+
+ );
+ }
+ return null;
+ }
+});
+
export default Header;
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 185b0f05..2c7d034a 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -15,6 +15,7 @@ import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_l
import Pagination from './ascribe_pagination/pagination';
+import GlobalAction from './global_action';
import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
@@ -148,33 +149,11 @@ let PieceList = React.createClass({
let loadingElement = ( );
let AccordionListItemType = this.props.accordionListItemType;
- let pieceActions = null;
- if (this.state.requestActions && this.state.requestActions.pieces){
- pieceActions = this.state.requestActions.pieces.map((item) => {
- return (
-
- test
-
);
- });
- }
- let editionActions = null;
- if (this.state.requestActions && this.state.requestActions.editions){
- for (let pieceId in this.state.requestActions.editions) {
- editionActions = this.state.requestActions.editions[pieceId].map((item) => {
- return (
-
- test
-
);
- });
- }
- }
+ //
+
return (
-
- {pieceActions}
- {editionActions}
-
div, .ascribe-global-notification-bubble > div {
- display:table-cell;
- vertical-align: middle;
- font-size: 1.25em;
- font-family: 'Source Sans Pro';
- text-align: right;
- padding-right: 3em;
-}
-
-.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: -100em;
-}
-
-.ascribe-global-notification-bubble-on {
- right: 3.5em;
-}
-
-.ascribe-global-notification-danger {
- background-color: #d9534f;
-}
-
-.ascribe-global-notification-success {
- background-color: rgba(2, 182, 163, 1);
+ margin-top: 1px;
}
\ No newline at end of file
diff --git a/sass/ascribe_notification_list.scss b/sass/ascribe_notification_list.scss
new file mode 100644
index 00000000..bd3c0b20
--- /dev/null
+++ b/sass/ascribe_notification_list.scss
@@ -0,0 +1,65 @@
+$break-small: 764px;
+$break-medium: 991px;
+$break-medium: 1200px;
+
+.notification-wrapper {
+ width: 350px;
+ height:8em;
+ padding: 0.3em;
+ border-bottom: 1px solid #cccccc;
+ margin: -3px -20px;
+
+ // ToDo: Include media queries for thumbnail
+ .thumbnail-wrapper {
+ width: 7.4em;
+ height: 7.4em;
+ padding:0;
+ cursor: pointer;
+ text-align: center;
+ img {
+ max-width: 100%;
+ max-height: 100%;
+ }
+ &::before {
+ content: ' ';
+ display: inline-block;
+ vertical-align: middle; /* vertical alignment of the inline element */
+ height: 100%;
+ }
+ }
+ h1 {
+ margin-top: 0.3em;
+ margin-bottom: 0.15em;
+ font-size: 1.8em;
+ }
+ .sub-header{
+ margin-bottom: 1em;
+ }
+ .notification-action{
+ color: $ascribe-color-green;
+ }
+}
+
+.notification-menu {
+ .dropdown-menu {
+ padding: 0 !important;
+ li a {
+ padding-top: 0;
+ }
+ }
+}
+
+.notification-amount {
+ padding: 0.3em;
+ font-size: 1.2em;
+
+}
+
+.ascribe-global-action {
+ text-align: center;
+ padding: 1em;
+ color: black;
+ border: 1px solid #cccccc;
+ background-color: white;
+ margin-top: 1px;
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 4f197a44..0a847dcc 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -24,6 +24,7 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'ascribe_footer';
@import 'ascribe_global_action';
@import 'ascribe_global_notification';
+@import 'ascribe_notification_list';
@import 'ascribe_piece_register';
@import 'offset_right';
@import 'ascribe_settings';