From df95e75025785a6b35c52f2b9fec4182395b822b Mon Sep 17 00:00:00 2001
From: vrde <agranzot@gmail.com>
Date: Wed, 27 May 2015 17:34:15 +0200
Subject: [PATCH 1/7] WIP

---
 js/components/ascribe_media/image_viewer.js   | 25 --------
 .../ascribe_media/resource_viewer.js          | 40 +++++++++++++
 .../ascribe_table/table_item_subtable.js      |  2 +-
 js/components/edition.js                      | 11 +++-
 js/mixins/inject_in_head_mixin.js             | 57 +++++++++++++++++++
 5 files changed, 106 insertions(+), 29 deletions(-)
 delete mode 100644 js/components/ascribe_media/image_viewer.js
 create mode 100644 js/components/ascribe_media/resource_viewer.js
 create mode 100644 js/mixins/inject_in_head_mixin.js

diff --git a/js/components/ascribe_media/image_viewer.js b/js/components/ascribe_media/image_viewer.js
deleted file mode 100644
index fdbd0342..00000000
--- a/js/components/ascribe_media/image_viewer.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-
-/**
- * This is the component that implements display-specific functionality
- */
-let ImageViewer = React.createClass({
-    propTypes: {
-        thumbnail: React.PropTypes.string.isRequired
-    },
-
-    render() {
-        let thumbnail = <img className="img-responsive" src={this.props.thumbnail}/>;
-        let aligner = <span className="vcenter"></span>;
-        return (
-            <div>
-                <div>
-                {aligner}
-                {thumbnail}
-                </div>
-            </div>
-        );
-    }
-});
-
-export default ImageViewer;
\ No newline at end of file
diff --git a/js/components/ascribe_media/resource_viewer.js b/js/components/ascribe_media/resource_viewer.js
new file mode 100644
index 00000000..4519bcb7
--- /dev/null
+++ b/js/components/ascribe_media/resource_viewer.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import InjectInHeadMixin from '../../mixins/inject_in_head_mixin';
+
+/**
+ * This is the component that implements display-specific functionality.
+ *
+ * ResourceViewer handles the following mimetypes:
+ *  - image
+ *  - video
+ *  - audio
+ *  - pdf
+ *  - other
+ */
+
+let resourceMap = {
+    'image': 1
+}
+
+let ResourceViewer = React.createClass({
+    propTypes: {
+        thumbnail: React.PropTypes.string.isRequired,
+        mimetype: React.PropTypes.oneOf(['image', 'video', 'audio', 'pdf', 'other']).isRequired
+    },
+
+    mixins: [InjectInHeadMixin],
+
+    componentDidMount() {
+        this.inject('http://antani.com');
+    },
+
+    render() {
+        return (
+            <div>
+                resourceviewer {this.props.thumbnail} {this.props.mimetype}
+            </div>
+        );
+    }
+});
+
+export default ResourceViewer;
diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js
index e9bd05f2..c8f4c498 100644
--- a/js/components/ascribe_table/table_item_subtable.js
+++ b/js/components/ascribe_table/table_item_subtable.js
@@ -55,7 +55,7 @@ let TableItemSubtable = React.createClass({
         let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
 
         if(numOfColumns > 10) {
-            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
+            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.');
         } else {
             return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
         }
diff --git a/js/components/edition.js b/js/components/edition.js
index 336bacff..7bb3f221 100644
--- a/js/components/edition.js
+++ b/js/components/edition.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ImageViewer from './ascribe_media/image_viewer';
+import ResourceViewer from './ascribe_media/resource_viewer';
 
 /**
  * This is the component that implements display-specific functionality
@@ -10,10 +10,15 @@ let Edition = React.createClass({
     //},
 
     render() {
+        let thumbnail = this.props.edition.thumbnail;
+        let mimetype = this.props.edition.digital_work.mime;
+
         return (
             <div>
                 <div className="col-md-7">
-                    <ImageViewer thumbnail={this.props.edition.thumbnail}/>
+                    <ResourceViewer thumbnail={thumbnail}
+                                    mimetype={mimetype}
+                                    />
                 </div>
                 <div className="col-md-5">
                     <EditionHeader edition={this.props.edition}/>
@@ -103,4 +108,4 @@ let EditionDetails = React.createClass({
 });
 
 
-export default Edition;
\ No newline at end of file
+export default Edition;
diff --git a/js/mixins/inject_in_head_mixin.js b/js/mixins/inject_in_head_mixin.js
new file mode 100644
index 00000000..0c83be16
--- /dev/null
+++ b/js/mixins/inject_in_head_mixin.js
@@ -0,0 +1,57 @@
+let mapAttr = {
+    link: 'href',
+    source: 'src'
+}
+
+let mapExt = {
+    js: 'source',
+    css: 'link'
+}
+
+
+let InjectInHeadMixin = {
+    /**
+     * Provide functions to inject `<script>` and `<link>` in `<head>`.
+     * Useful when you have to load a huge external library and
+     * you don't want to embed everything inside the build file.
+     */
+
+    isPresent(tag, src) {
+        let attr = mapAttr[tag];
+        let query = `head > ${tag}[${attr}="${src}"]`;
+        return document.querySelector(query);
+    },
+
+    injectTag(tag, src){
+        console.log(this.foobar);
+        if (InjectInHeadMixin.isPresent(tag, src))
+            return;
+
+        let attr = mapAttr[tag];
+        let element = document.createElement(tag);
+        document.head.appendChild(element);
+        element[attr] = src;
+    },
+
+    injectStylesheet(src) {
+        this.injectTag('link', src);
+    },
+
+    injectScript(src) {
+        this.injectTag('source', src);
+    },
+
+    inject(src) {
+        debugger;
+        let ext = src.split('.').pop();
+        try {
+            let tag = mapAttr(src);
+        } catch (e) {
+            throw new Error(`Cannot inject ${src} in the DOM, cannot guess the tag name from extension ${ext}. Valid extensions are "js" and "css".`);
+        }
+        InjectInHeadMixin.injectTag(tag, src);
+    }
+
+};
+
+export default InjectInHeadMixin;

From 897b771068e077b5067b50b5880e17a7bdf7b813 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 29 May 2015 16:28:05 +0200
Subject: [PATCH 2/7] style and prepare boilerplate components

---
 .../ascribe_accordion_list/accordion_list.js  |  26 +++++
 .../accordion_list_item.js                    |  27 +++++
 .../ascribe_accordion_list/table_header.js    |  50 ++++++++
 .../table_header_item.js                      |  52 +++++++++
 .../table_header_item_carret.js               |  24 ++++
 .../ascribe_accordion_list/table_item_acl.js  |  18 +++
 .../ascribe_accordion_list/table_item_img.js  |  20 ++++
 .../table_item_selectable.js                  |  38 ++++++
 .../table_item_subtable.js                    | 110 ++++++++++++++++++
 .../table_item_subtable_button.js             |  21 ++++
 .../ascribe_accordion_list/table_item_text.js |  21 ++++
 .../table_item_wrapper.js                     |  34 ++++++
 js/components/header.js                       |   7 +-
 js/components/piece_list.js                   |  80 +++++--------
 sass/ascribe-accordion_list.scss              |  51 ++++++++
 sass/ascribe-variables.scss                   |   1 +
 sass/main.scss                                |  17 ++-
 sass/variables.scss                           |   6 +-
 18 files changed, 542 insertions(+), 61 deletions(-)
 create mode 100644 js/components/ascribe_accordion_list/accordion_list.js
 create mode 100644 js/components/ascribe_accordion_list/accordion_list_item.js
 create mode 100644 js/components/ascribe_accordion_list/table_header.js
 create mode 100644 js/components/ascribe_accordion_list/table_header_item.js
 create mode 100644 js/components/ascribe_accordion_list/table_header_item_carret.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_acl.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_img.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_selectable.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_subtable.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_subtable_button.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_text.js
 create mode 100644 js/components/ascribe_accordion_list/table_item_wrapper.js
 create mode 100644 sass/ascribe-accordion_list.scss
 create mode 100644 sass/ascribe-variables.scss

diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
new file mode 100644
index 00000000..9eb484b7
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list.js
@@ -0,0 +1,26 @@
+import React from 'react';
+import ReactAddons from 'react/addons';
+
+
+let AccordionList = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
+    },
+    
+    render() {
+        if(this.props.itemList && this.props.itemList.length > 0) {
+            return (
+                <div className={this.props.className}>
+                    {this.props.children}
+                </div>
+            );
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
+    }
+});
+
+export default AccordionList;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
new file mode 100644
index 00000000..cf615820
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -0,0 +1,27 @@
+import React from 'react';
+
+let AccordionListItem = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        content: React.PropTypes.object
+    },
+
+    render() {
+        console.log(this.props.content);
+        return (
+            <div className={this.props.className}>
+                <div className="wrapper">
+                    <div className="thumbnail-wrapper">
+                        <img src={this.props.content.thumbnail} />
+                    </div>
+                    <div className="info-wrapper">
+                        <h1>{this.props.content.title}</h1>
+                        <h3>by {this.props.content.artist_name}</h3>
+                    </div>
+                </div>
+            </div> 
+        );
+    }
+});
+
+export default AccordionListItem;
diff --git a/js/components/ascribe_accordion_list/table_header.js b/js/components/ascribe_accordion_list/table_header.js
new file mode 100644
index 00000000..8176ad31
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_header.js
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import TableColumnMixin from '../../mixins/table_column_mixin';
+import GeneralUtils from '../../utils/general_utils';
+import TableHeaderItem from './table_header_item';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+
+let TableHeader = React.createClass({
+    mixins: [TableColumnMixin],
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        itemList: React.PropTypes.array.isRequired,
+        changeOrder: React.PropTypes.func,
+        orderAsc: React.PropTypes.bool,
+        orderBy: React.PropTypes.string
+    },
+
+    render() {
+        return (
+            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
+                <div className="row">
+                    {this.props.columnList.map((val, i) => {
+
+                        let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
+                        let columnName = this.props.columnList[i].columnName;
+                        let canBeOrdered = this.props.columnList[i].canBeOrdered;
+
+                        return (
+                            <TableHeaderItem
+                                key={i}
+                                columnClasses={columnClasses} 
+                                displayName={val.displayName} 
+                                columnName={columnName} 
+                                canBeOrdered={canBeOrdered} 
+                                orderAsc={this.props.orderAsc}
+                                orderBy={this.props.orderBy}
+                                changeOrder={this.props.changeOrder}>
+                            </TableHeaderItem>
+                        );
+                    })}
+                </div>
+            </div> 
+        );
+
+    }
+});
+
+export default TableHeader;
diff --git a/js/components/ascribe_accordion_list/table_header_item.js b/js/components/ascribe_accordion_list/table_header_item.js
new file mode 100644
index 00000000..dce2261e
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_header_item.js
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import TableHeaderItemCarret from './table_header_item_carret';
+
+let TableHeaderItem = React.createClass({
+
+    propTypes: {
+        columnClasses: React.PropTypes.string.isRequired,
+        displayName: React.PropTypes.string.isRequired,
+        columnName: React.PropTypes.string.isRequired,
+        canBeOrdered: React.PropTypes.bool,
+        changeOrder: React.PropTypes.func,
+        orderAsc: React.PropTypes.bool,
+        orderBy: React.PropTypes.string
+    },
+
+    changeOrder() {
+        this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
+    },
+
+    render() {
+        if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
+            if(this.props.columnName === this.props.orderBy) {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
+                    </div>
+                );
+            } else {
+                return (
+                    <div 
+                        className={this.props.columnClasses + ' ascribe-table-header-column'}
+                        onClick={this.changeOrder}>
+                        <span>{this.props.displayName}</span>
+                    </div>
+                );
+            }
+        } else {
+            return (
+                <div className={this.props.columnClasses + ' ascribe-table-header-column'}>
+                    <span>
+                        {this.props.displayName}
+                    </span>
+                </div>
+            );
+        }
+    }
+});
+
+export default TableHeaderItem;
diff --git a/js/components/ascribe_accordion_list/table_header_item_carret.js b/js/components/ascribe_accordion_list/table_header_item_carret.js
new file mode 100644
index 00000000..628ead11
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_header_item_carret.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+let TableHeaderItemCarret = React.createClass({
+    propTypes: {
+        orderAsc: React.PropTypes.bool.isRequired
+    },
+
+    render() {
+        let carretDirection = 'glyphicon-triangle-';
+
+        if(this.props.orderAsc) {
+            carretDirection += 'bottom';
+        } else {
+            carretDirection += 'top';
+        }
+
+        return (
+            <span className={'glyphicon ' + carretDirection}>
+            </span>
+        );
+    }
+});
+
+export default TableHeaderItemCarret;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_acl.js b/js/components/ascribe_accordion_list/table_item_acl.js
new file mode 100644
index 00000000..87e14761
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_acl.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+
+let TableItemAcl = React.createClass({
+    propTypes: {
+        content: React.PropTypes.array.isRequired
+    },
+
+    render() {
+        return (
+            <span>
+                {this.props.content.join('/')}
+            </span>
+        );
+    }
+});
+
+export default TableItemAcl;
diff --git a/js/components/ascribe_accordion_list/table_item_img.js b/js/components/ascribe_accordion_list/table_item_img.js
new file mode 100644
index 00000000..c082e85a
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_img.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * This could be enhanced further by specifying an optional description for example
+ */
+let TableItemImg = React.createClass({
+    propTypes: {
+        content: React.PropTypes.string.isRequired,
+    },
+
+    render() {
+        return (
+            <span>
+                <img src={this.props.content} width="50" />
+            </span>
+        );
+    }
+});
+
+export default TableItemImg;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_selectable.js b/js/components/ascribe_accordion_list/table_item_selectable.js
new file mode 100644
index 00000000..d62f8d04
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_selectable.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+import TableItem from './table_item';
+
+// This component is implemented as recommended here: http://stackoverflow.com/a/25723635/1263876
+let TableItemSelectable = React.createClass({
+
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object,
+        parentId: React.PropTypes.number,
+        className: React.PropTypes.string
+    },
+
+    selectItem() {
+        this.props.selectItem(this.props.parentId, this.props.columnContent.edition_number);
+    },
+
+    render() {
+        let tableItemClasses = classNames({
+            'ascribe-table-item-selected': this.props.columnContent.selected
+        });
+
+        return (
+            <TableItem 
+                classNames={tableItemClasses + ' ' + this.props.className}
+                columnList={this.props.columnList}
+                columnContent={this.props.columnContent}
+                onClick={this.selectItem}>
+            </TableItem>
+        );
+    }
+});
+
+export default TableItemSelectable;
diff --git a/js/components/ascribe_accordion_list/table_item_subtable.js b/js/components/ascribe_accordion_list/table_item_subtable.js
new file mode 100644
index 00000000..dcd3da0f
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_subtable.js
@@ -0,0 +1,110 @@
+import React from 'react';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+import EditionListStore from '../../stores/edition_list_store';
+import EditionListActions from '../../actions/edition_list_actions';
+
+
+import Table from './table';
+import TableItemWrapper from './table_item_wrapper';
+import TableItemText from './table_item_text';
+import TableItemAcl from './table_item_acl';
+import TableItemSelectable from './table_item_selectable';
+import TableItemSubtableButton from './table_item_subtable_button';
+
+
+let TableItemSubtable = React.createClass({
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return {
+            'open': false
+        };
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        EditionListStore.listen(this.onChange);
+    },
+
+    loadEditionList() {
+        if(this.state.open) {
+            this.setState({
+                'open': false
+            });
+        } else {
+
+            EditionListActions.fetchEditionList(this.props.columnContent.id);
+            this.setState({
+                'open': true,
+                'editionList': EditionListStore.getState()
+            });
+        }
+    },
+
+    selectItem(parentId, itemId) {
+        EditionListActions.selectEdition({
+            'pieceId': parentId,
+            'editionId': itemId
+        });
+    },
+
+    render() {
+
+        let renderEditionListTable = () => {
+
+            let columnList = [
+                new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
+                new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
+                new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
+            ];
+
+            if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
+                return (
+                    <div className="row">
+                      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                        <Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
+                            {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
+                                return (
+                                    <TableItemSelectable
+                                        className="ascribe-table-item-selectable"
+                                        selectItem={this.selectItem}
+                                        parentId={this.props.columnContent.id}
+                                        key={i}>
+                                    </TableItemSelectable>
+                                );
+                            })} 
+                        </Table>
+                      </div>  
+                    </div>
+                );
+            }
+        };
+
+        return (
+            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
+                <div className="row">
+                    <TableItemWrapper
+                        columnList={this.props.columnList}
+                        columnContent={this.props.columnContent}
+                        columnWidth={12}>
+                    </TableItemWrapper>
+                    <div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
+                        <TableItemSubtableButton content="+" onClick={this.loadEditionList}>
+                        </TableItemSubtableButton>
+                    </div>
+                </div>
+                {renderEditionListTable()}
+            </div> 
+        );
+    }
+});
+
+export default TableItemSubtable;
diff --git a/js/components/ascribe_accordion_list/table_item_subtable_button.js b/js/components/ascribe_accordion_list/table_item_subtable_button.js
new file mode 100644
index 00000000..8c5431d8
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_subtable_button.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+let TableItemSubtableButton = React.createClass({
+    
+    propTypes: {
+        content: React.PropTypes.string.isRequired,
+        onClick: React.PropTypes.func.isRequired
+    },
+
+    render() {
+        return (
+            <span>
+                <button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
+                    {this.props.content}
+                </button>
+            </span>
+        );
+    }
+});
+
+export default TableItemSubtableButton;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_text.js b/js/components/ascribe_accordion_list/table_item_text.js
new file mode 100644
index 00000000..0e90a2d5
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_text.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+
+let TableItemText = React.createClass({
+    propTypes: {
+        content: React.PropTypes.oneOfType([
+            React.PropTypes.string,
+            React.PropTypes.number
+        ]) 
+    },
+
+    render() {
+        return (
+            <span>
+                {this.props.content}
+            </span>
+        );
+    }
+});
+
+export default TableItemText;
diff --git a/js/components/ascribe_accordion_list/table_item_wrapper.js b/js/components/ascribe_accordion_list/table_item_wrapper.js
new file mode 100644
index 00000000..2f9f4c7e
--- /dev/null
+++ b/js/components/ascribe_accordion_list/table_item_wrapper.js
@@ -0,0 +1,34 @@
+import React from 'react';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+import TableColumnMixin from '../../mixins/table_column_mixin';
+
+let TableItemWrapper = React.createClass({
+    mixins: [TableColumnMixin],
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object,
+        columnWidth: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <div>
+                {this.props.columnList.map((column, i) => {
+
+                    let TypeElement = column.displayType;
+                    let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
+
+                    return (
+                        <div className={columnClass + ' ascribe-table-item-column'} key={i}>
+                            <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
+                        </div>
+                    );
+
+                })}
+            </div>
+        );
+    }
+});
+
+export default TableItemWrapper;
\ No newline at end of file
diff --git a/js/components/header.js b/js/components/header.js
index f191c04c..20855b1b 100644
--- a/js/components/header.js
+++ b/js/components/header.js
@@ -24,7 +24,7 @@ let Header = React.createClass({
 
     render() {
         return (
-            <nav className="navbar navbar-default navbar-fixed-top">
+            <nav className="navbar navbar-default">
                 <div className="container">
                     <div className="navbar-header">
                         <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
@@ -35,15 +35,12 @@ let Header = React.createClass({
                         </button>
                         <a className="navbar-brand" href="#">
                             <span>ascribe </span> 
-                            <span className="glyph-ascribe-spool-chunked"></span>
+                            <span className="glyph-ascribe-spool-chunked ascribe-color"></span>
                         </a>
                     </div>
                     
                     <div id="navbar" className="navbar-collapse collapse">
                         <ul className="nav navbar-nav navbar-left">
-                            <li>
-                                <Link to="pieces">Pieces</Link>
-                            </li>
                         </ul>
                         <ul className="nav navbar-nav navbar-right">
                             <li className="dropdown">
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 34a1baf0..899c3306 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -4,14 +4,8 @@ import AltContainer from 'alt/AltContainer';
 import PieceListStore from '../stores/piece_list_store';
 import PieceListActions from '../actions/piece_list_actions';
 
-import Table from './ascribe_table/table';
-import TableItem from './ascribe_table/table_item';
-import TableItemImg from './ascribe_table/table_item_img';
-import TableItemText from './ascribe_table/table_item_text';
-import TableItemSubtable from './ascribe_table/table_item_subtable';
-import TableItemSubtableButton from './ascribe_table/table_item_subtable_button';
-
-import TableColumnContentModel from '../models/table_column_content_model';
+import AccordionList from './ascribe_accordion_list/accordion_list';
+import AccordionListItem from './ascribe_accordion_list/accordion_list_item';
 
 import Pagination from './ascribe_pagination/pagination';
 
@@ -44,55 +38,43 @@ let PieceList = React.createClass({
                                                       this.state.orderAsc);
     },
 
-    tableChangeOrder(orderBy, orderAsc) {
+    accordionChangeOrder(orderBy, orderAsc) {
         PieceListActions.fetchPieceList(this.state.page, this.state.pageSize,
                                         this.state.search, orderBy, orderAsc);
     },
 
     render() {
-        let columnList = [
-            new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false),
-            new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true),
-            new TableColumnContentModel('title', 'Title', TableItemText, 4, true)
-        ];
-
         let currentPage = parseInt(this.props.query.page, 10) || 1;
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
         
-        if(this.state.pieceList && this.state.pieceList.length > 0) {
-            return (
-                <div>
-                    <PieceListToolbar />
-                    <Table 
-                        columnList={columnList} 
-                        changeOrder={this.tableChangeOrder}
-                        itemList={this.state.pieceList}
-                        itemListCount={this.state.pieceListCount}
-                        orderBy={this.state.orderBy}
-                        orderAsc={this.state.orderAsc}
-                        search={this.state.search}
-                        page={this.state.page}
-                        pageSize={this.state.pageSize}>
-                            {this.state.pieceList.map((item, i) => {
-                                return (
-                                    <TableItemSubtable
-                                        key={i}>
-                                    </TableItemSubtable>
-                                );
-                            })}
-                    </Table>
-                    <Pagination currentPage={currentPage}
-                                totalPages={totalPages}
-                                goToPage={this.paginationGoToPage}>
-                    </Pagination>
-                </div>
-            );
-        } else {
-            return (
-                <p>Loading</p>
-            );
-        }
-        
+        return (
+            <div class="row">
+                <AccordionList
+                    className="ascribe-accordion-list row"
+                    changeOrder={this.accordionChangeOrder}
+                    itemList={this.state.pieceList}
+                    itemListCount={this.state.pieceListCount}
+                    orderBy={this.state.orderBy}
+                    orderAsc={this.state.orderAsc}
+                    search={this.state.search}
+                    page={this.state.page}
+                    pageSize={this.state.pageSize}>
+                    {this.state.pieceList.map((item, i) => {
+                        return (
+                            <AccordionListItem 
+                                className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
+                                content={item}
+                                key={i} />
+                        );
+                    })}
+                </AccordionList>
+                <Pagination
+                    currentPage={currentPage}
+                    totalPages={totalPages}
+                    goToPage={this.paginationGoToPage}>
+                </Pagination>
+            </div>
+        );
     }
 });
 
diff --git a/sass/ascribe-accordion_list.scss b/sass/ascribe-accordion_list.scss
new file mode 100644
index 00000000..ee1a55f5
--- /dev/null
+++ b/sass/ascribe-accordion_list.scss
@@ -0,0 +1,51 @@
+$ascribe-accordion-list-item-height: 9em;
+$ascribe-accordion-list-font: 'Source Sans Pro';
+
+.ascribe-accordion-list-item {
+    background-color: rgba(0,0,0,0.004);
+    border: 1px solid black;
+    height: $ascribe-accordion-list-item-height;
+    margin-bottom: 3em;
+
+    padding-left:0;
+    padding-right:0;
+
+    overflow:hidden;
+
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+    border-left: 0.1em solid #E0E0E0;
+    border-right: 0.1em solid #E0E0E0;
+    border-top: 0.1em solid #E0E0E0;
+    border-radius: 5px;
+    border-bottom: 0.25em solid #E0E0E0;
+    .wrapper {
+        width:100%;
+        // ToDo: Include media queries for thumbnail
+        .thumbnail-wrapper {
+            float:left;
+            height:100%;
+            width:$ascribe-accordion-list-item-height;
+            overflow:hidden;
+            padding-left:0;
+            padding-right:0;
+
+            img {
+                height: $ascribe-accordion-list-item-height;
+            }
+        }
+        .info-wrapper {
+            float:left;
+            font-family: $ascribe-accordion-list-font;
+            margin-left: 2em;
+            padding-top: .75em;
+            h1 {
+                font-size: 2.25em;
+            }
+            h3 {
+                font-size: 1.1em;
+                margin: .7em 0 0 0;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/sass/ascribe-variables.scss b/sass/ascribe-variables.scss
new file mode 100644
index 00000000..8b636994
--- /dev/null
+++ b/sass/ascribe-variables.scss
@@ -0,0 +1 @@
+$ascribe-color: rgba(2, 182, 163, 0.5);
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index cd0edf3a..a7f3111c 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -1,16 +1,25 @@
+// If you import a new .scss file, make sure to restart gulp
+// otherwise it will not be included
 @import 'variables';
+@import 'ascribe-variables';
 @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
 @import './ascribe-fonts/style';
 @import './ascribe-fonts/ascribe-fonts';
-
-#main {
-    padding-top: 70px;
-}
+@import 'ascribe-accordion_list';
 
 .hidden {
     display: none;
 }
 
+.navbar-default {
+    border-left:0;
+    border-right:0;
+}
+
+.ascribe-color {
+    color: $ascribe-color;
+}
+
 /* Taken from http://stackoverflow.com/a/20548578 */
 .vcenter {
     display: inline-block;
diff --git a/sass/variables.scss b/sass/variables.scss
index f68ac03e..bd767f12 100644
--- a/sass/variables.scss
+++ b/sass/variables.scss
@@ -359,13 +359,13 @@ $container-lg:                 $container-large-desktop !default;
 // Basics of a navbar
 $navbar-height:                    50px !default;
 $navbar-margin-bottom:             $line-height-computed !default;
-$navbar-border-radius:             $border-radius-base !default;
+$navbar-border-radius:             0 !default;
 $navbar-padding-horizontal:        floor(($grid-gutter-width / 2)) !default;
 $navbar-padding-vertical:          (($navbar-height - $line-height-computed) / 2) !default;
 $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;
-$navbar-default-bg:                #f8f8f8 !default;
+$navbar-default-bg:                white !default;
 $navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
 
 // Navbar links
@@ -378,7 +378,7 @@ $navbar-default-link-disabled-color:       #ccc !default;
 $navbar-default-link-disabled-bg:          transparent !default;
 
 // Navbar brand label
-$navbar-default-brand-color:               $navbar-default-link-color !default;
+$navbar-default-brand-color:               black !default;
 $navbar-default-brand-hover-color:         darken($navbar-default-brand-color, 10%) !default;
 $navbar-default-brand-hover-bg:            transparent !default;
 

From ed66c4150e7f178b89a34f638db3fe1437b377c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Jun 2015 09:05:30 +0200
Subject: [PATCH 3/7] refactor routes

---
 js/components/ascribe_accordion_list/accordion_list_item.js   | 1 -
 js/components/ascribe_accordion_list/table_item_selectable.js | 2 +-
 js/components/ascribe_table/table_item.js                     | 4 ++--
 js/components/ascribe_table/table_item_selectable.js          | 2 +-
 js/routes.js                                                  | 4 ++--
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index cf615820..ec70e7ad 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -7,7 +7,6 @@ let AccordionListItem = React.createClass({
     },
 
     render() {
-        console.log(this.props.content);
         return (
             <div className={this.props.className}>
                 <div className="wrapper">
diff --git a/js/components/ascribe_accordion_list/table_item_selectable.js b/js/components/ascribe_accordion_list/table_item_selectable.js
index d62f8d04..d0c15c4f 100644
--- a/js/components/ascribe_accordion_list/table_item_selectable.js
+++ b/js/components/ascribe_accordion_list/table_item_selectable.js
@@ -26,7 +26,7 @@ let TableItemSelectable = React.createClass({
 
         return (
             <TableItem 
-                classNames={tableItemClasses + ' ' + this.props.className}
+                className={tableItemClasses + ' ' + this.props.className}
                 columnList={this.props.columnList}
                 columnContent={this.props.columnContent}
                 onClick={this.selectItem}>
diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js
index 1827253f..6f2a3388 100644
--- a/js/components/ascribe_table/table_item.js
+++ b/js/components/ascribe_table/table_item.js
@@ -11,13 +11,13 @@ let TableItem = React.createClass({
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         columnContent: React.PropTypes.object,
         onClick: React.PropTypes.func, // See: https://facebook.github.io/react/tips/expose-component-functions.html
-        classNames: React.PropTypes.string
+        className: React.PropTypes.string
     },
 
     render() {
         return (
             <div 
-                className={this.props.classNames + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
+                className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
                 onClick={this.props.onClick}>
                 <div className="row">
                     <TableItemWrapper
diff --git a/js/components/ascribe_table/table_item_selectable.js b/js/components/ascribe_table/table_item_selectable.js
index d62f8d04..d0c15c4f 100644
--- a/js/components/ascribe_table/table_item_selectable.js
+++ b/js/components/ascribe_table/table_item_selectable.js
@@ -26,7 +26,7 @@ let TableItemSelectable = React.createClass({
 
         return (
             <TableItem 
-                classNames={tableItemClasses + ' ' + this.props.className}
+                className={tableItemClasses + ' ' + this.props.className}
                 columnList={this.props.columnList}
                 columnContent={this.props.columnContent}
                 onClick={this.selectItem}>
diff --git a/js/routes.js b/js/routes.js
index 0fccc60a..ab515462 100644
--- a/js/routes.js
+++ b/js/routes.js
@@ -9,8 +9,8 @@ let Route = Router.Route;
 
 
 let routes = (
-    <Route name="app" path="/" handler={AscribeApp}>
-        <Route name="pieces" path="/pieces" handler={PieceList}>
+    <Route name="app" handler={AscribeApp}>
+        <Route name="pieces" path="/" handler={PieceList}>
             
         </Route>
         <Route name="edition" path="/editions/:editionId" handler={EditionContainer}>

From ade6ab7f2693f9df957e3549d6a641ef028d511a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Jun 2015 11:51:03 +0200
Subject: [PATCH 4/7] integrate table component into accordion list

---
 .../accordion_list_item.js                    |  25 ++--
 .../accordion_list_item_table.js              |  78 +++++++++++++
 .../accordion_list_item_table_editions.js     |  61 ++++++++++
 .../ascribe_accordion_list/table_header.js    |  50 --------
 .../table_header_item.js                      |  52 ---------
 .../table_header_item_carret.js               |  24 ----
 .../ascribe_accordion_list/table_item_acl.js  |  18 ---
 .../ascribe_accordion_list/table_item_img.js  |  20 ----
 .../table_item_selectable.js                  |  38 ------
 .../table_item_subtable.js                    | 110 ------------------
 .../table_item_subtable_button.js             |  21 ----
 .../ascribe_accordion_list/table_item_text.js |  21 ----
 .../table_item_wrapper.js                     |  34 ------
 js/components/ascribe_table/table.js          |  28 ++---
 js/components/ascribe_table/table_item.js     |   3 +-
 .../ascribe_table/table_item_selectable.js    |  27 +++--
 js/components/piece_list.js                   |  11 +-
 sass/ascribe-accordion_list.scss              |  35 +++++-
 sass/ascribe-variables.scss                   |   3 +-
 sass/main.scss                                |   9 +-
 20 files changed, 232 insertions(+), 436 deletions(-)
 create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table.js
 create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
 delete mode 100644 js/components/ascribe_accordion_list/table_header.js
 delete mode 100644 js/components/ascribe_accordion_list/table_header_item.js
 delete mode 100644 js/components/ascribe_accordion_list/table_header_item_carret.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_acl.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_img.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_selectable.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_subtable.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_subtable_button.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_text.js
 delete mode 100644 js/components/ascribe_accordion_list/table_item_wrapper.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js
index ec70e7ad..f932b12b 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item.js
@@ -1,5 +1,8 @@
 import React from 'react';
 
+import AccordionListItemTable from './accordion_list_item_table';
+
+
 let AccordionListItem = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
@@ -8,17 +11,21 @@ let AccordionListItem = React.createClass({
 
     render() {
         return (
-            <div className={this.props.className}>
-                <div className="wrapper">
-                    <div className="thumbnail-wrapper">
-                        <img src={this.props.content.thumbnail} />
-                    </div>
-                    <div className="info-wrapper">
-                        <h1>{this.props.content.title}</h1>
-                        <h3>by {this.props.content.artist_name}</h3>
+            <div className="row">
+                <div className={this.props.className}>
+                    <div className="wrapper">
+                        <div className="thumbnail-wrapper">
+                            <img src={this.props.content.thumbnail} />
+                        </div>
+                        <div className="info-wrapper">
+                            <h1>{this.props.content.title}</h1>
+                            <h3>by {this.props.content.artist_name}</h3>
+                        </div>
+                        <span style={{'clear': 'both'}}></span>
                     </div>
                 </div>
-            </div> 
+                {this.props.children}
+            </div>
         );
     }
 });
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js
new file mode 100644
index 00000000..7d545bd2
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import Table from '../ascribe_table/table';
+import TableItemSelectable from '../ascribe_table/table_item_selectable';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+let AccordionListItemTable = React.createClass({
+    getInitialState() {
+        return {
+            'show': false
+        };
+    },
+
+    propTypes: {
+        className: React.PropTypes.string,
+        parentId: React.PropTypes.number,
+        fetchData: React.PropTypes.func,
+        itemList: React.PropTypes.array,
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel))
+    },
+
+    toggleTable() {
+        this.props.fetchData();
+        this.setState({
+            'show': !this.state.show
+        });
+    },
+
+    render() {
+        if(this.props.itemList && this.state.show) {
+            return (
+                <div className={this.props.className}>
+                    <Table
+                      columnList={this.props.columnList} 
+                      itemList={this.props.itemList}>
+                        {this.props.itemList.map((item, i) => {
+                            return (
+                                 <TableItemSelectable
+                                    className="ascribe-table-item-selectable"
+                                    key={i}>
+                                </TableItemSelectable>
+                            );
+                        })}
+                    </Table>
+                    <AccordionListItemTableToggle
+                        className="ascribe-accordion-list-table-toggle" 
+                        onClick={this.toggleTable} />
+                </div>
+            );
+        } else {
+            return (
+                <div className={this.props.className}>
+                    <AccordionListItemTableToggle
+                        className="ascribe-accordion-list-table-toggle" 
+                        onClick={this.toggleTable} />
+                </div>
+            );
+        }
+    }
+});
+
+let AccordionListItemTableToggle = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        onClick: React.PropTypes.func
+    },
+
+    render() {
+        return (
+            <span 
+                className={this.props.className}
+                onClick={this.props.onClick}>Show all X Editions</span>
+        );
+    }
+});
+
+export default AccordionListItemTable;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
new file mode 100644
index 00000000..c68fa739
--- /dev/null
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import EditionListStore from '../../stores/edition_list_store';
+import EditionListActions from '../../actions/edition_list_actions';
+
+import AccordionListItemTable from './accordion_list_item_table';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+import TableItemImg from '../ascribe_table/table_item_img';
+import TableItemText from '../ascribe_table/table_item_text';
+import TableItemAcl from '../ascribe_table/table_item_acl';
+
+let AccordionListItemTableEditions = React.createClass({
+
+    propTypes: {
+        className: React.PropTypes.string,
+        parentId: React.PropTypes.number
+    },
+
+    getInitialState() {
+        return EditionListStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        EditionListStore.listen(this.onChange);
+    },
+
+    componentDidUnmount() {
+        EditionListStore.unlisten(this.onChange);
+    },
+
+    getEditionList() {
+        EditionListActions.fetchEditionList(this.props.parentId);
+    },
+
+    render() {
+
+        let columnList = [
+            new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
+            new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, false),
+            new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, false)
+        ];
+
+        return (
+            <AccordionListItemTable
+                className={this.props.className}
+                parentId={this.props.parentId}
+                fetchData={this.getEditionList}
+                itemList={this.state.editionList[this.props.parentId]}
+                columnList={columnList}>
+            </AccordionListItemTable>
+        );
+    }
+});
+
+export default AccordionListItemTableEditions;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_header.js b/js/components/ascribe_accordion_list/table_header.js
deleted file mode 100644
index 8176ad31..00000000
--- a/js/components/ascribe_accordion_list/table_header.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-
-import TableColumnMixin from '../../mixins/table_column_mixin';
-import GeneralUtils from '../../utils/general_utils';
-import TableHeaderItem from './table_header_item';
-
-import TableColumnContentModel from '../../models/table_column_content_model';
-
-
-let TableHeader = React.createClass({
-    mixins: [TableColumnMixin],
-    propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        itemList: React.PropTypes.array.isRequired,
-        changeOrder: React.PropTypes.func,
-        orderAsc: React.PropTypes.bool,
-        orderBy: React.PropTypes.string
-    },
-
-    render() {
-        return (
-            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
-                <div className="row">
-                    {this.props.columnList.map((val, i) => {
-
-                        let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
-                        let columnName = this.props.columnList[i].columnName;
-                        let canBeOrdered = this.props.columnList[i].canBeOrdered;
-
-                        return (
-                            <TableHeaderItem
-                                key={i}
-                                columnClasses={columnClasses} 
-                                displayName={val.displayName} 
-                                columnName={columnName} 
-                                canBeOrdered={canBeOrdered} 
-                                orderAsc={this.props.orderAsc}
-                                orderBy={this.props.orderBy}
-                                changeOrder={this.props.changeOrder}>
-                            </TableHeaderItem>
-                        );
-                    })}
-                </div>
-            </div> 
-        );
-
-    }
-});
-
-export default TableHeader;
diff --git a/js/components/ascribe_accordion_list/table_header_item.js b/js/components/ascribe_accordion_list/table_header_item.js
deleted file mode 100644
index dce2261e..00000000
--- a/js/components/ascribe_accordion_list/table_header_item.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-
-import TableHeaderItemCarret from './table_header_item_carret';
-
-let TableHeaderItem = React.createClass({
-
-    propTypes: {
-        columnClasses: React.PropTypes.string.isRequired,
-        displayName: React.PropTypes.string.isRequired,
-        columnName: React.PropTypes.string.isRequired,
-        canBeOrdered: React.PropTypes.bool,
-        changeOrder: React.PropTypes.func,
-        orderAsc: React.PropTypes.bool,
-        orderBy: React.PropTypes.string
-    },
-
-    changeOrder() {
-        this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
-    },
-
-    render() {
-        if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
-            if(this.props.columnName === this.props.orderBy) {
-                return (
-                    <div 
-                        className={this.props.columnClasses + ' ascribe-table-header-column'}
-                        onClick={this.changeOrder}>
-                        <span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
-                    </div>
-                );
-            } else {
-                return (
-                    <div 
-                        className={this.props.columnClasses + ' ascribe-table-header-column'}
-                        onClick={this.changeOrder}>
-                        <span>{this.props.displayName}</span>
-                    </div>
-                );
-            }
-        } else {
-            return (
-                <div className={this.props.columnClasses + ' ascribe-table-header-column'}>
-                    <span>
-                        {this.props.displayName}
-                    </span>
-                </div>
-            );
-        }
-    }
-});
-
-export default TableHeaderItem;
diff --git a/js/components/ascribe_accordion_list/table_header_item_carret.js b/js/components/ascribe_accordion_list/table_header_item_carret.js
deleted file mode 100644
index 628ead11..00000000
--- a/js/components/ascribe_accordion_list/table_header_item_carret.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-
-let TableHeaderItemCarret = React.createClass({
-    propTypes: {
-        orderAsc: React.PropTypes.bool.isRequired
-    },
-
-    render() {
-        let carretDirection = 'glyphicon-triangle-';
-
-        if(this.props.orderAsc) {
-            carretDirection += 'bottom';
-        } else {
-            carretDirection += 'top';
-        }
-
-        return (
-            <span className={'glyphicon ' + carretDirection}>
-            </span>
-        );
-    }
-});
-
-export default TableHeaderItemCarret;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_acl.js b/js/components/ascribe_accordion_list/table_item_acl.js
deleted file mode 100644
index 87e14761..00000000
--- a/js/components/ascribe_accordion_list/table_item_acl.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-
-let TableItemAcl = React.createClass({
-    propTypes: {
-        content: React.PropTypes.array.isRequired
-    },
-
-    render() {
-        return (
-            <span>
-                {this.props.content.join('/')}
-            </span>
-        );
-    }
-});
-
-export default TableItemAcl;
diff --git a/js/components/ascribe_accordion_list/table_item_img.js b/js/components/ascribe_accordion_list/table_item_img.js
deleted file mode 100644
index c082e85a..00000000
--- a/js/components/ascribe_accordion_list/table_item_img.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-
-/**
- * This could be enhanced further by specifying an optional description for example
- */
-let TableItemImg = React.createClass({
-    propTypes: {
-        content: React.PropTypes.string.isRequired,
-    },
-
-    render() {
-        return (
-            <span>
-                <img src={this.props.content} width="50" />
-            </span>
-        );
-    }
-});
-
-export default TableItemImg;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_selectable.js b/js/components/ascribe_accordion_list/table_item_selectable.js
deleted file mode 100644
index d0c15c4f..00000000
--- a/js/components/ascribe_accordion_list/table_item_selectable.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import TableColumnContentModel from '../../models/table_column_content_model';
-
-import TableItem from './table_item';
-
-// This component is implemented as recommended here: http://stackoverflow.com/a/25723635/1263876
-let TableItemSelectable = React.createClass({
-
-    propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        columnContent: React.PropTypes.object,
-        parentId: React.PropTypes.number,
-        className: React.PropTypes.string
-    },
-
-    selectItem() {
-        this.props.selectItem(this.props.parentId, this.props.columnContent.edition_number);
-    },
-
-    render() {
-        let tableItemClasses = classNames({
-            'ascribe-table-item-selected': this.props.columnContent.selected
-        });
-
-        return (
-            <TableItem 
-                className={tableItemClasses + ' ' + this.props.className}
-                columnList={this.props.columnList}
-                columnContent={this.props.columnContent}
-                onClick={this.selectItem}>
-            </TableItem>
-        );
-    }
-});
-
-export default TableItemSelectable;
diff --git a/js/components/ascribe_accordion_list/table_item_subtable.js b/js/components/ascribe_accordion_list/table_item_subtable.js
deleted file mode 100644
index dcd3da0f..00000000
--- a/js/components/ascribe_accordion_list/table_item_subtable.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-
-import TableColumnContentModel from '../../models/table_column_content_model';
-
-import EditionListStore from '../../stores/edition_list_store';
-import EditionListActions from '../../actions/edition_list_actions';
-
-
-import Table from './table';
-import TableItemWrapper from './table_item_wrapper';
-import TableItemText from './table_item_text';
-import TableItemAcl from './table_item_acl';
-import TableItemSelectable from './table_item_selectable';
-import TableItemSubtableButton from './table_item_subtable_button';
-
-
-let TableItemSubtable = React.createClass({
-    propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        columnContent: React.PropTypes.object
-    },
-
-    getInitialState() {
-        return {
-            'open': false
-        };
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    componentDidMount() {
-        EditionListStore.listen(this.onChange);
-    },
-
-    loadEditionList() {
-        if(this.state.open) {
-            this.setState({
-                'open': false
-            });
-        } else {
-
-            EditionListActions.fetchEditionList(this.props.columnContent.id);
-            this.setState({
-                'open': true,
-                'editionList': EditionListStore.getState()
-            });
-        }
-    },
-
-    selectItem(parentId, itemId) {
-        EditionListActions.selectEdition({
-            'pieceId': parentId,
-            'editionId': itemId
-        });
-    },
-
-    render() {
-
-        let renderEditionListTable = () => {
-
-            let columnList = [
-                new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
-                new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
-                new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
-            ];
-
-            if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
-                return (
-                    <div className="row">
-                      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
-                        <Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
-                            {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
-                                return (
-                                    <TableItemSelectable
-                                        className="ascribe-table-item-selectable"
-                                        selectItem={this.selectItem}
-                                        parentId={this.props.columnContent.id}
-                                        key={i}>
-                                    </TableItemSelectable>
-                                );
-                            })} 
-                        </Table>
-                      </div>  
-                    </div>
-                );
-            }
-        };
-
-        return (
-            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
-                <div className="row">
-                    <TableItemWrapper
-                        columnList={this.props.columnList}
-                        columnContent={this.props.columnContent}
-                        columnWidth={12}>
-                    </TableItemWrapper>
-                    <div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
-                        <TableItemSubtableButton content="+" onClick={this.loadEditionList}>
-                        </TableItemSubtableButton>
-                    </div>
-                </div>
-                {renderEditionListTable()}
-            </div> 
-        );
-    }
-});
-
-export default TableItemSubtable;
diff --git a/js/components/ascribe_accordion_list/table_item_subtable_button.js b/js/components/ascribe_accordion_list/table_item_subtable_button.js
deleted file mode 100644
index 8c5431d8..00000000
--- a/js/components/ascribe_accordion_list/table_item_subtable_button.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-let TableItemSubtableButton = React.createClass({
-    
-    propTypes: {
-        content: React.PropTypes.string.isRequired,
-        onClick: React.PropTypes.func.isRequired
-    },
-
-    render() {
-        return (
-            <span>
-                <button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
-                    {this.props.content}
-                </button>
-            </span>
-        );
-    }
-});
-
-export default TableItemSubtableButton;
\ No newline at end of file
diff --git a/js/components/ascribe_accordion_list/table_item_text.js b/js/components/ascribe_accordion_list/table_item_text.js
deleted file mode 100644
index 0e90a2d5..00000000
--- a/js/components/ascribe_accordion_list/table_item_text.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-
-let TableItemText = React.createClass({
-    propTypes: {
-        content: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.number
-        ]) 
-    },
-
-    render() {
-        return (
-            <span>
-                {this.props.content}
-            </span>
-        );
-    }
-});
-
-export default TableItemText;
diff --git a/js/components/ascribe_accordion_list/table_item_wrapper.js b/js/components/ascribe_accordion_list/table_item_wrapper.js
deleted file mode 100644
index 2f9f4c7e..00000000
--- a/js/components/ascribe_accordion_list/table_item_wrapper.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-import TableColumnContentModel from '../../models/table_column_content_model';
-import TableColumnMixin from '../../mixins/table_column_mixin';
-
-let TableItemWrapper = React.createClass({
-    mixins: [TableColumnMixin],
-    propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        columnContent: React.PropTypes.object,
-        columnWidth: React.PropTypes.number.isRequired
-    },
-
-    render() {
-        return (
-            <div>
-                {this.props.columnList.map((column, i) => {
-
-                    let TypeElement = column.displayType;
-                    let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
-
-                    return (
-                        <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                            <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
-                        </div>
-                    );
-
-                })}
-            </div>
-        );
-    }
-});
-
-export default TableItemWrapper;
\ No newline at end of file
diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index 06af7b89..50f5f8d9 100644
--- a/js/components/ascribe_table/table.js
+++ b/js/components/ascribe_table/table.js
@@ -24,24 +24,20 @@ let Table = React.createClass({
     },
     
     render() {
-        if(this.props.itemList && this.props.itemList.length > 0) {
-            return (
-                <div className="ascribe-table">
-                    <TableHeader 
-                        columnList={this.props.columnList} 
-                        itemList={this.props.itemList} 
-                        fetchList={this.props.fetchList} 
-                        changeOrder={this.props.changeOrder} 
-                        orderAsc={this.props.orderAsc} 
-                        orderBy={this.props.orderBy} />
+        return (
+            <div className="ascribe-table">
+                <TableHeader 
+                    columnList={this.props.columnList} 
+                    itemList={this.props.itemList} 
+                    fetchList={this.props.fetchList} 
+                    changeOrder={this.props.changeOrder} 
+                    orderAsc={this.props.orderAsc} 
+                    orderBy={this.props.orderBy} />
+                <div className="row">
                     {this.renderChildren()}
                 </div>
-            );
-        } else {
-            return (
-                <p>Loading</p>
-            );
-        }
+            </div>
+        );
     }
 });
 
diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js
index 6f2a3388..dffb7fa9 100644
--- a/js/components/ascribe_table/table_item.js
+++ b/js/components/ascribe_table/table_item.js
@@ -16,8 +16,7 @@ let TableItem = React.createClass({
 
     render() {
         return (
-            <div 
-                className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
+            <div className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
                 onClick={this.props.onClick}>
                 <div className="row">
                     <TableItemWrapper
diff --git a/js/components/ascribe_table/table_item_selectable.js b/js/components/ascribe_table/table_item_selectable.js
index d0c15c4f..98532acd 100644
--- a/js/components/ascribe_table/table_item_selectable.js
+++ b/js/components/ascribe_table/table_item_selectable.js
@@ -24,14 +24,25 @@ let TableItemSelectable = React.createClass({
             'ascribe-table-item-selected': this.props.columnContent.selected
         });
 
-        return (
-            <TableItem 
-                className={tableItemClasses + ' ' + this.props.className}
-                columnList={this.props.columnList}
-                columnContent={this.props.columnContent}
-                onClick={this.selectItem}>
-            </TableItem>
-        );
+        if(this.props.onClick) {
+            return (
+                <TableItem 
+                    className={tableItemClasses + ' ' + this.props.className}
+                    columnList={this.props.columnList}
+                    columnContent={this.props.columnContent}
+                    onClick={this.selectItem}>
+                </TableItem>
+            );
+        } else {
+            return (
+                <TableItem 
+                    className={tableItemClasses + ' ' + this.props.className}
+                    columnList={this.props.columnList}
+                    columnContent={this.props.columnContent}>
+                </TableItem>
+            );
+        }
+        
     }
 });
 
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 899c3306..96c1acc6 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -6,6 +6,7 @@ import PieceListActions from '../actions/piece_list_actions';
 
 import AccordionList from './ascribe_accordion_list/accordion_list';
 import AccordionListItem from './ascribe_accordion_list/accordion_list_item';
+import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
 
 import Pagination from './ascribe_pagination/pagination';
 
@@ -48,9 +49,9 @@ let PieceList = React.createClass({
         let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
         
         return (
-            <div class="row">
+            <div>
                 <AccordionList
-                    className="ascribe-accordion-list row"
+                    className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
                     itemList={this.state.pieceList}
                     itemListCount={this.state.pieceListCount}
@@ -64,7 +65,11 @@ let PieceList = React.createClass({
                             <AccordionListItem 
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={item}
-                                key={i} />
+                                key={i}>
+                                <AccordionListItemTableEditions 
+                                    className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
+                                    parentId={item.id} />
+                            </AccordionListItem>
                         );
                     })}
                 </AccordionList>
diff --git a/sass/ascribe-accordion_list.scss b/sass/ascribe-accordion_list.scss
index ee1a55f5..43b77fa9 100644
--- a/sass/ascribe-accordion_list.scss
+++ b/sass/ascribe-accordion_list.scss
@@ -5,22 +5,20 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
     background-color: rgba(0,0,0,0.004);
     border: 1px solid black;
     height: $ascribe-accordion-list-item-height;
-    margin-bottom: 3em;
 
     padding-left:0;
     padding-right:0;
 
     overflow:hidden;
 
-    border-top-left-radius: 2px;
-    border-top-right-radius: 2px;
     border-left: 0.1em solid #E0E0E0;
     border-right: 0.1em solid #E0E0E0;
     border-top: 0.1em solid #E0E0E0;
     border-radius: 5px;
-    border-bottom: 0.25em solid #E0E0E0;
+    border-bottom: 0.2em solid #E0E0E0;
     .wrapper {
         width:100%;
+        height:100%;
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
             float:left;
@@ -48,4 +46,33 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
             }
         }
     }
+}
+
+.ascribe-accordion-list-item-table {
+    text-align: center;
+    margin-bottom: 3em;
+    background-color: rgba(0,0,0,0.004);
+
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    border-bottom: 0.15em solid #E0E0E0;
+    border-left: 0.1em solid #E0E0E0;
+    border-right: 0.1em solid #E0E0E0;
+}
+
+span.ascribe-accordion-list-table-toggle {
+    ::selection { background: transparent; }
+    ::-moz-selection { background: transparent; }
+    &:hover {
+        color: $ascribe-color-dark;
+        cursor:pointer;
+    }
+}
+
+.ascribe-accordion-list-table-list {
+    margin-bottom: .5em;
+    th, td {
+      font-size:.85em;
+      text-align: center;
+    }
 }
\ No newline at end of file
diff --git a/sass/ascribe-variables.scss b/sass/ascribe-variables.scss
index 8b636994..27697f1e 100644
--- a/sass/ascribe-variables.scss
+++ b/sass/ascribe-variables.scss
@@ -1 +1,2 @@
-$ascribe-color: rgba(2, 182, 163, 0.5);
\ No newline at end of file
+$ascribe-color: rgba(2, 182, 163, 0.5);
+$ascribe-color-dark: rgba(2, 182, 163, 0.8);
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index a7f3111c..6cc6af95 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -28,8 +28,7 @@
 }
 
 .ascribe-table-header-row {
-    border-bottom: 2px solid rgba(2, 182, 163, 0.5);
-    border-top: 2px solid rgba(2, 182, 163, 0.5);
+    border-bottom: 2px solid #E0E0E0;
     padding: 0;
 }
 
@@ -44,8 +43,8 @@
     vertical-align: middle;
     font-family: 'Source Sans Pro';
     font-weight: 600;
-    color: rgba(2, 182, 163, 1);
-    font-size: 1.4em;
+    color: #424242;
+    font-size: 1.2em;
 }
 
 .ascribe-table-header-column > span > .glyphicon {
@@ -63,7 +62,7 @@
 .ascribe-table-item-column {
     display: table;
     font-family: 'Source Sans Pro';
-    font-size: 1.2em;
+    font-size: .8em;
     height:3em;
 }
 

From f653564b5120ba995940ae8651a40ad64b5a7e3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Jun 2015 13:18:24 +0200
Subject: [PATCH 5/7] implement toggle functionality

---
 .../accordion_list_item_table.js              | 19 +++++++++++-----
 .../accordion_list_item_table_editions.js     | 13 ++++++-----
 js/components/ascribe_table/table.js          |  2 +-
 .../ascribe_table/table_item_acl_filtered.js  | 22 +++++++++++++++++++
 js/components/piece_list.js                   |  5 +++--
 sass/main.scss                                |  1 -
 6 files changed, 47 insertions(+), 15 deletions(-)
 create mode 100644 js/components/ascribe_table/table_item_acl_filtered.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js
index 7d545bd2..bb5353e6 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js
@@ -17,7 +17,8 @@ let AccordionListItemTable = React.createClass({
         parentId: React.PropTypes.number,
         fetchData: React.PropTypes.func,
         itemList: React.PropTypes.array,
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel))
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        numOfTableItems: React.PropTypes.number
     },
 
     toggleTable() {
@@ -45,7 +46,9 @@ let AccordionListItemTable = React.createClass({
                     </Table>
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable} />
+                        onClick={this.toggleTable}
+                        show={this.state.show}
+                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         } else {
@@ -53,7 +56,9 @@ let AccordionListItemTable = React.createClass({
                 <div className={this.props.className}>
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable} />
+                        onClick={this.toggleTable} 
+                        show={this.state.show}
+                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         }
@@ -63,14 +68,18 @@ let AccordionListItemTable = React.createClass({
 let AccordionListItemTableToggle = React.createClass({
     propTypes: {
         className: React.PropTypes.string,
-        onClick: React.PropTypes.func
+        onClick: React.PropTypes.func,
+        show: React.PropTypes.bool,
+        numOfTableItems: React.PropTypes.number
     },
 
     render() {
         return (
             <span 
                 className={this.props.className}
-                onClick={this.props.onClick}>Show all X Editions</span>
+                onClick={this.props.onClick}>
+                {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
+            </span>
         );
     }
 });
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index c68fa739..e2d98457 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -9,13 +9,14 @@ import TableColumnContentModel from '../../models/table_column_content_model';
 
 import TableItemImg from '../ascribe_table/table_item_img';
 import TableItemText from '../ascribe_table/table_item_text';
-import TableItemAcl from '../ascribe_table/table_item_acl';
+import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
 let AccordionListItemTableEditions = React.createClass({
 
     propTypes: {
         className: React.PropTypes.string,
-        parentId: React.PropTypes.number
+        parentId: React.PropTypes.number,
+        numOfEditions: React.PropTypes.number
     },
 
     getInitialState() {
@@ -42,8 +43,8 @@ let AccordionListItemTableEditions = React.createClass({
 
         let columnList = [
             new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
-            new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, false),
-            new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, false)
+            new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
+            new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false)
         ];
 
         return (
@@ -52,8 +53,8 @@ let AccordionListItemTableEditions = React.createClass({
                 parentId={this.props.parentId}
                 fetchData={this.getEditionList}
                 itemList={this.state.editionList[this.props.parentId]}
-                columnList={columnList}>
-            </AccordionListItemTable>
+                columnList={columnList}
+                numOfTableItems={this.props.numOfEditions} />
         );
     }
 });
diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index 50f5f8d9..74f19058 100644
--- a/js/components/ascribe_table/table.js
+++ b/js/components/ascribe_table/table.js
@@ -9,7 +9,7 @@ let Table = React.createClass({
     
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        changeOrder: React.PropTypes.func // turn isRequired on again after editions order implemented
+        changeOrder: React.PropTypes.func
     },
 
     renderChildren() {
diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js
new file mode 100644
index 00000000..dada05ab
--- /dev/null
+++ b/js/components/ascribe_table/table_item_acl_filtered.js
@@ -0,0 +1,22 @@
+import React from 'react';
+
+
+let TableItemAclFiltered = React.createClass({
+    propTypes: {
+        content: React.PropTypes.array.isRequired
+    },
+
+    render() {
+        let filteredAcls = this.props.content.filter((v) => {
+            return v === 'consign' || v === 'loan' || v === 'transfer' || v === 'view';
+        });
+
+        return (
+            <span>
+                {filteredAcls.join('/')}
+            </span>
+        );
+    }
+});
+
+export default TableItemAclFiltered;
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 96c1acc6..3f36cfe2 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -54,13 +54,13 @@ let PieceList = React.createClass({
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
                     itemList={this.state.pieceList}
-                    itemListCount={this.state.pieceListCount}
                     orderBy={this.state.orderBy}
                     orderAsc={this.state.orderAsc}
                     search={this.state.search}
                     page={this.state.page}
                     pageSize={this.state.pageSize}>
                     {this.state.pieceList.map((item, i) => {
+                        
                         return (
                             <AccordionListItem 
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
@@ -68,7 +68,8 @@ let PieceList = React.createClass({
                                 key={i}>
                                 <AccordionListItemTableEditions 
                                     className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
-                                    parentId={item.id} />
+                                    parentId={item.id} 
+                                    numOfEditions={item.num_editions}/>
                             </AccordionListItem>
                         );
                     })}
diff --git a/sass/main.scss b/sass/main.scss
index 6cc6af95..419da031 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -44,7 +44,6 @@
     font-family: 'Source Sans Pro';
     font-weight: 600;
     color: #424242;
-    font-size: 1.2em;
 }
 
 .ascribe-table-header-column > span > .glyphicon {

From 7c4d4afbd43b2125fad9e98d2e0d29c33b4c6728 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Jun 2015 14:10:11 +0200
Subject: [PATCH 6/7] add checkbox select functionality

---
 .../accordion_list_item_table.js              |  6 ++---
 .../accordion_list_item_table_editions.js     | 13 +++++++---
 .../ascribe_table/table_item_checkbox.js      | 23 ++++++++++++++++
 .../ascribe_table/table_item_selectable.js    | 26 ++++++-------------
 .../ascribe_table/table_item_wrapper.js       |  4 ++-
 js/models/table_column_content_model.js       |  3 ++-
 js/stores/edition_list_store.js               |  4 +--
 7 files changed, 49 insertions(+), 30 deletions(-)
 create mode 100644 js/components/ascribe_table/table_item_checkbox.js

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js
index bb5353e6..9ddb3308 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Table from '../ascribe_table/table';
-import TableItemSelectable from '../ascribe_table/table_item_selectable';
+import TableItem from '../ascribe_table/table_item';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 
@@ -37,10 +37,10 @@ let AccordionListItemTable = React.createClass({
                       itemList={this.props.itemList}>
                         {this.props.itemList.map((item, i) => {
                             return (
-                                 <TableItemSelectable
+                                 <TableItem
                                     className="ascribe-table-item-selectable"
                                     key={i}>
-                                </TableItemSelectable>
+                                </TableItem>
                             );
                         })}
                     </Table>
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index e2d98457..2432e019 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -9,6 +9,7 @@ import TableColumnContentModel from '../../models/table_column_content_model';
 
 import TableItemImg from '../ascribe_table/table_item_img';
 import TableItemText from '../ascribe_table/table_item_text';
+import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
 import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
 let AccordionListItemTableEditions = React.createClass({
@@ -39,12 +40,16 @@ let AccordionListItemTableEditions = React.createClass({
         EditionListActions.fetchEditionList(this.props.parentId);
     },
 
-    render() {
+    selectItem(pieceId, editionId) {
+        EditionListActions.selectEdition({pieceId, editionId});
+    },
 
+    render() {
         let columnList = [
-            new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
-            new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
-            new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false)
+            new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
+            new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
+            new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
+            new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 5, false)
         ];
 
         return (
diff --git a/js/components/ascribe_table/table_item_checkbox.js b/js/components/ascribe_table/table_item_checkbox.js
new file mode 100644
index 00000000..02357fa3
--- /dev/null
+++ b/js/components/ascribe_table/table_item_checkbox.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+
+let TableItemCheckbox = React.createClass({
+    propTypes: {
+        editionId: React.PropTypes.number,
+        pieceId: React.PropTypes.number,
+        selectItem: React.PropTypes.func,
+        selected: React.PropTypes.bool
+    },
+
+    selectItem() {
+        this.props.selectItem(this.props.pieceId, this.props.editionId);
+    },
+
+    render() {
+        return (
+            <input type="checkbox" onChange={this.selectItem} checked={this.props.selected}/>
+        );
+    }
+});
+
+export default TableItemCheckbox;
diff --git a/js/components/ascribe_table/table_item_selectable.js b/js/components/ascribe_table/table_item_selectable.js
index 98532acd..711e42b6 100644
--- a/js/components/ascribe_table/table_item_selectable.js
+++ b/js/components/ascribe_table/table_item_selectable.js
@@ -24,24 +24,14 @@ let TableItemSelectable = React.createClass({
             'ascribe-table-item-selected': this.props.columnContent.selected
         });
 
-        if(this.props.onClick) {
-            return (
-                <TableItem 
-                    className={tableItemClasses + ' ' + this.props.className}
-                    columnList={this.props.columnList}
-                    columnContent={this.props.columnContent}
-                    onClick={this.selectItem}>
-                </TableItem>
-            );
-        } else {
-            return (
-                <TableItem 
-                    className={tableItemClasses + ' ' + this.props.className}
-                    columnList={this.props.columnList}
-                    columnContent={this.props.columnContent}>
-                </TableItem>
-            );
-        }
+        return (
+            <TableItem 
+                className={tableItemClasses + ' ' + this.props.className}
+                columnList={this.props.columnList}
+                columnContent={this.props.columnContent}
+                onClick={this.selectItem}>
+            </TableItem>
+        );
         
     }
 });
diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js
index 2f9f4c7e..c6251c4b 100644
--- a/js/components/ascribe_table/table_item_wrapper.js
+++ b/js/components/ascribe_table/table_item_wrapper.js
@@ -17,11 +17,13 @@ let TableItemWrapper = React.createClass({
                 {this.props.columnList.map((column, i) => {
 
                     let TypeElement = column.displayType;
+                    let typeElementProps = column.transformFn(this.props.columnContent);
+
                     let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
 
                     return (
                         <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                            <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
+                            <TypeElement {...typeElementProps} />
                         </div>
                     );
 
diff --git a/js/models/table_column_content_model.js b/js/models/table_column_content_model.js
index 4084fb4a..5e93cce4 100644
--- a/js/models/table_column_content_model.js
+++ b/js/models/table_column_content_model.js
@@ -1,6 +1,7 @@
 class TableColumnContentModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
+    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
+        this.transformFn = transformFn;
         this.columnName = columnName;
         this.displayName = displayName;
         this.displayType = displayType;
diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js
index feb0ba2a..13660356 100644
--- a/js/stores/edition_list_store.js
+++ b/js/stores/edition_list_store.js
@@ -21,9 +21,8 @@ class EditionListStore {
     }
 
     onSelectEdition({pieceId, editionId}) {
-
         this.editionList[pieceId].forEach((edition) => {
-            if(edition.edition_number === editionId) {
+            if(edition.id === editionId) {
                 if(edition.selected) {
                     edition.selected = false;
                 } else {
@@ -31,7 +30,6 @@ class EditionListStore {
                 }
             }
         });
-
     }
 };
 

From 8a18d894cc41f17e419fb35f7e63d139d8e2e57c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Mon, 1 Jun 2015 15:12:31 +0200
Subject: [PATCH 7/7] add clear selection functionality

---
 index.html                                    |  2 +-
 js/actions/edition_list_actions.js            |  3 +-
 .../accordion_list_item_table_editions.js     |  2 +-
 .../piece_list_toolbar.js                     | 54 ++++++++++++++-----
 js/components/piece_list.js                   |  2 +-
 js/stores/edition_list_store.js               | 15 ++++++
 sass/ascribe-piece-list-toolbar.scss          | 20 +++++++
 sass/main.scss                                | 14 +++--
 8 files changed, 90 insertions(+), 22 deletions(-)
 create mode 100644 sass/ascribe-piece-list-toolbar.scss

diff --git a/index.html b/index.html
index 4c875443..8b61e4b0 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
         <link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
     </head>
     <body>
-        <div id="main" class="container"></div>
+        <div id="main" class="container clear-margins-and-paddings"></div>
         <div id="modal" class="container"></div>
         <script src="build/app.js"></script>
     </body>
diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js
index 48e02d2d..78cc0eeb 100644
--- a/js/actions/edition_list_actions.js
+++ b/js/actions/edition_list_actions.js
@@ -6,7 +6,8 @@ class EditionListActions {
     constructor() {
         this.generateActions(
             'updateEditionList',
-            'selectEdition'
+            'selectEdition',
+            'clearAllEditionSelections'
         );
     }
 
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index 2432e019..2b3bd5c0 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -49,7 +49,7 @@ let AccordionListItemTableEditions = React.createClass({
             new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
             new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
             new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
-            new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 5, false)
+            new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 4, false)
         ];
 
         return (
diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
index 4840b27a..f7b04cc6 100644
--- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
+++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
@@ -1,11 +1,16 @@
 import React from 'react';
 
 import EditionListStore from '../../stores/edition_list_store';
+import EditionListActions from '../../actions/edition_list_actions';
 
 import AclButton from '../acl_button';
 import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
 
 let PieceListToolbar = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string
+    },
+
     getInitialState() {
         return EditionListStore.getState();
     },
@@ -66,25 +71,46 @@ let PieceListToolbar = React.createClass({
         return availableAcls;
     },
 
+    clearAllSelections() {
+        EditionListActions.clearAllEditionSelections();
+    },
+
     render() {
         let availableAcls = this.getAvailableAcls();
 
-        return (
-            <div className="row no-margin">
-                <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
-                    <div className="pull-left">
-                        <PieceListToolbarSelectedEditionsWidget
-                            numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
-                    </div>
-                    <div className="pull-right">
-                        <AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
+        if(availableAcls.length > 0) {
+            return (
+                <div className={this.props.className}>
+                    <div className="row no-margin">
+                        <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
+                            <p></p>
+                            <div className="row">
+                                <div className="text-center">
+                                    <PieceListToolbarSelectedEditionsWidget
+                                        numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
+                                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                                    <span 
+                                        className="piece-list-toolbar-clear-all"
+                                        onClick={this.clearAllSelections}>clear all</span>
+                                </div>
+                            </div>
+                            <p></p>
+                            <div className="row">
+                                <div className="text-center">
+                                    <AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
+                                    <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
+                                    <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
+                                    <AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-            </div>
-        );
+            );
+        } else {
+            return null;
+        } 
+        
     }
 });
 
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 3f36cfe2..9580ffb1 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -50,6 +50,7 @@ let PieceList = React.createClass({
         
         return (
             <div>
+                <PieceListToolbar className="ascribe-piece-list-toolbar" />
                 <AccordionList
                     className="ascribe-accordion-list"
                     changeOrder={this.accordionChangeOrder}
@@ -60,7 +61,6 @@ let PieceList = React.createClass({
                     page={this.state.page}
                     pageSize={this.state.pageSize}>
                     {this.state.pieceList.map((item, i) => {
-                        
                         return (
                             <AccordionListItem 
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js
index 13660356..b8855896 100644
--- a/js/stores/edition_list_store.js
+++ b/js/stores/edition_list_store.js
@@ -31,6 +31,21 @@ class EditionListStore {
             }
         });
     }
+
+    onClearAllEditionSelections() {
+        Object
+            .keys(this.editionList)
+            .forEach((pieceId) => {
+                this.editionList[pieceId]
+                    .forEach((edition) => {
+                        try {
+                            delete edition.selected;
+                        } catch(err) {
+                            //just ignore
+                        }
+                    });
+            });
+    }
 };
 
 export default alt.createStore(EditionListStore);
\ No newline at end of file
diff --git a/sass/ascribe-piece-list-toolbar.scss b/sass/ascribe-piece-list-toolbar.scss
new file mode 100644
index 00000000..6093aed9
--- /dev/null
+++ b/sass/ascribe-piece-list-toolbar.scss
@@ -0,0 +1,20 @@
+.ascribe-piece-list-toolbar {
+    position: fixed;
+    top:0;
+    width:1170px;
+    height:6em;
+    background-color: #FAFAFA;
+
+    border-left: 0.1em solid #E0E0E0;
+    border-right: 0.1em solid #E0E0E0;
+    border-top: 0.1em solid #E0E0E0;
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border-bottom: 0.2em solid #E0E0E0;
+    z-index:9999;
+}
+
+.piece-list-toolbar-clear-all {
+    text-decoration: underline;
+    cursor:pointer;
+}
\ No newline at end of file
diff --git a/sass/main.scss b/sass/main.scss
index 419da031..471a6124 100644
--- a/sass/main.scss
+++ b/sass/main.scss
@@ -6,6 +6,7 @@
 @import './ascribe-fonts/style';
 @import './ascribe-fonts/ascribe-fonts';
 @import 'ascribe-accordion_list';
+@import 'ascribe-piece-list-toolbar';
 
 .hidden {
     display: none;
@@ -14,6 +15,12 @@
 .navbar-default {
     border-left:0;
     border-right:0;
+    margin-bottom: 3em;
+}
+
+.clear-margins-and-paddings {
+    padding-left:0;
+    padding-right:0;
 }
 
 .ascribe-color {
@@ -68,6 +75,9 @@
 .ascribe-table-item-column > * {
     display: table-cell;
     vertical-align: middle;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
 }
 
 .ascribe-table-item-selected {
@@ -78,10 +88,6 @@
     cursor: default;
 }
 
-.piece-list-toolbar {
-    height:3em;
-}
-
 .no-margin {
     margin-right: 0;
     margin-left: 0;