add personal note to piece detail page

js/components/ascribe_buttons/acl_button_list.js

@@ -6,12 +6,15 @@ import UserStore from '../../stores/user_store';
 import AclButton from '../ascribe_buttons/acl_button';
 
 let AclButtonList = React.createClass({
-    getInitialState() {
+    propTypes: {
-        return UserStore.getState();
+        className: React.PropTypes.string,
+        editions: React.PropTypes.array,
+        availableAcls: React.PropTypes.array,
+        handleSuccess: React.PropTypes.func
     },
 
-    onChange(state) {
+    getInitialState() {
-        this.setState(state);
+        return UserStore.getState();
     },
 
     componentDidMount() {
@@ -23,9 +26,13 @@ let AclButtonList = React.createClass({
         UserStore.unlisten(this.onChange);
     },
 
+    onChange(state) {
+        this.setState(state);
+    },
+
     render() {
         return (
-            <div className="text-center">
+            <div className={this.props.className}>
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="transfer"

js/components/edition.js

@@ -8,6 +8,7 @@ import Row from 'react-bootstrap/lib/Row';
 import Col from 'react-bootstrap/lib/Col';
 import Button from 'react-bootstrap/lib/Button';
 import Glyphicon from 'react-bootstrap/lib/Glyphicon';
+import TextareaAutosize from 'react-textarea-autosize';
 
 import EditionActions from '../actions/edition_actions';
 import AclButtonList from './ascribe_buttons/acl_button_list';
@@ -21,7 +22,8 @@ let Edition = React.createClass({
     propTypes: {
         edition: React.PropTypes.object,
         currentUser: React.PropTypes.object,
-        deleteEdition: React.PropTypes.func
+        deleteEdition: React.PropTypes.func,
+        savePersonalNote: React.PropTypes.func
     },
 
     render() {
@@ -30,7 +32,7 @@ let Edition = React.createClass({
         let extraData = null;
 
         if (this.props.edition.digital_work.encoding_urls) {
-            extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label } });
+            extraData = this.props.edition.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
         }
 
         let bitcoinIdValue = (
@@ -43,7 +45,7 @@ let Edition = React.createClass({
 
         return (
             <Row>
-                <Col md={7}>
+                <Col md={6}>
                     <MediaPlayer mimetype={mimetype}
                                     preview={thumbnail}
                                     url={this.props.edition.digital_work.url}
@@ -54,11 +56,17 @@ let Edition = React.createClass({
                         </Button>
                     </p>
                 </Col>
-                <Col md={5}>
+                <Col md={6} className="ascribe-edition-details">
                     <EditionHeader edition={this.props.edition}/>
                     <EditionSummary
                         edition={this.props.edition}
                         currentUser={ this.props.currentUser }/>
+                    <CollapsibleEditionDetails
+                        title="Personal Note"
+                        iconName="pencil">
+                        <EditionPersonalNote 
+                            savePersonalNote={this.props.savePersonalNote}/>
+                    </CollapsibleEditionDetails>
 
                     <CollapsibleEditionDetails
                         title="Provenance/Ownership History"
@@ -138,10 +146,15 @@ let EditionSummary = React.createClass({
                 <EditionDetailProperty label="ID" value={ this.props.edition.bitcoin_id } />
                 <EditionDetailProperty label="OWNER" value={ this.props.edition.owner } />
                 <br/>
+                <Row>
+                    <Col md={12}>
                         <AclButtonList
+                            className="pull-left"
                             availableAcls={this.props.edition.acl}
                             editions={[this.props.edition]}
                             handleSuccess={this.handleSuccess} />
+                    </Col>
+                </Row>
                 <hr/>
             </div>
         );
@@ -156,7 +169,8 @@ let CollapsibleEditionDetails = React.createClass({
             React.PropTypes.object,
             React.PropTypes.array
         ]),
-        show: React.PropTypes.bool
+        show: React.PropTypes.bool,
+        iconName: React.PropTypes.string
     },
 
     getDefaultProps() {
@@ -169,10 +183,11 @@ let CollapsibleEditionDetails = React.createClass({
         if(this.props.show) {
             return (
                 <div className="ascribe-detail-header">
-                    <CollapsibleParagraph title={this.props.title}>
+                    <CollapsibleParagraph
+                        title={this.props.title}
+                        iconName={this.props.iconName}>
                         {this.props.children}
                     </CollapsibleParagraph>
-                    <hr/>
                 </div>
             );
         } else {
@@ -188,7 +203,8 @@ const CollapsibleParagraph = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.object,
             React.PropTypes.array
-        ])
+        ]),
+        iconName: React.PropTypes.string
     },
 
     mixins: [CollapsibleMixin],
@@ -206,14 +222,16 @@ const CollapsibleParagraph = React.createClass({
         this.setState({expanded: !this.state.expanded});
     },
 
-    render(){
+    render() {
         let styles = this.getCollapsibleClassSet();
-        let text = this.isExpanded() ? 'Hide' : 'Show';
+        let text = this.isExpanded() ? '-' : '+';
+
+        let icon = this.props.iconName ? (<Glyphicon style={{fontSize: '.75em'}} glyph={this.props.iconName} />) : null;
+
         return (
             <div className="ascribe-edition-collapsible-wrapper">
                 <div onClick={this.onHandleToggle}>
-                    <span>{this.props.title} </span>
+                    <span>{text} {icon} {this.props.title} </span>
-                    <a>{text}</a>
                 </div>
                 <div ref='panel' className={classNames(styles) + ' ascribe-edition-collapible-content'}>
                     {this.props.children}
@@ -284,5 +302,33 @@ let EditionDetailHistoryIterator = React.createClass({
     }
 });
 
+let EditionPersonalNote = React.createClass({
+    propTypes: {
+        savePersonalNote: React.PropTypes.func
+    },
+
+    prepareSavePersonalNote() {
+        let personalNote = React.findDOMNode(this.refs.personalNote).value;
+        this.props.savePersonalNote(personalNote);
+    },
+
+    render() {
+        return (
+            <Row>
+                <Col md={12} className="ascribe-edition-personal-note">
+                    <TextareaAutosize
+                        ref="personalNote"
+                        className="form-control"
+                        rows={3}
+                        placeholder='Write something...' />
+                    <Button
+                        onClick={this.prepareSavePersonalNote}
+                        className="pull-right">Save</Button>
+                </Col>
+            </Row>
+        );
+    }
+});
+
 
 export default Edition;

js/components/edition_container.js

@@ -37,7 +37,12 @@ let EditionContainer = React.createClass({
     },
 
     deleteEdition() {
+        // Delete Edition from server
+    },
 
+    savePersonalNote(note) {
+        console.log(note);
+        // Save personalNote to server
     },
 
     render() {
@@ -46,7 +51,8 @@ let EditionContainer = React.createClass({
                 <Edition
                     edition={this.state.edition}
                     currentUser={this.state.currentUser}
-                    deleteEdition={this.deleteEdition}/>
+                    deleteEdition={this.deleteEdition}
+                    savePersonalNote={this.savePersonalNote}/>
             );
         } else {
             return (

package.json

@@ -29,6 +29,7 @@
     "gulp-util": "^3.0.4",
     "jest-cli": "^0.4.0",
     "lodash": "^3.9.3",
+    "react-textarea-autosize": "^2.2.3",
     "reactify": "^1.1.0",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
@@ -45,8 +46,7 @@
     "react-datepicker": "~0.8.0",
     "react-router": "^0.13.3",
     "shmui": "^0.1.0",
-    "uglifyjs": "^2.4.10",
+    "uglifyjs": "^2.4.10"
-    "react-datepicker": "~0.8.0"
   },
   "jest": {
     "scriptPreprocessor": "node_modules/babel-jest",

sass/ascribe_edition.scss

@@ -1,3 +1,11 @@
+.ascribe-edition-details hr {
+    border-top: 1px solid #616161;
+}
+
+.ascribe-edition-personal-note > textarea {
+    margin-bottom: 1em;
+}
+
 .ascribe-edition-collapsible-wrapper {
     vertical-align: bottom;
     width:100%;
@@ -9,7 +17,7 @@
 }
 
 .ascribe-edition-collapsible-wrapper > div > span {
-    font-size:1.4em;
+    font-size:1.3em;
     margin-right: .5em;
 }
 

sass/main.scss

@@ -21,6 +21,7 @@
     border-left:0;
     border-right:0;
     margin-bottom: 1.5em;
+    border-top:0;
 }
 
 .clear-paddings {

sass/variables.scss

@@ -366,7 +366,7 @@ $navbar-collapse-max-height:       340px !default;
 
 $navbar-default-color:             #777 !default;
 $navbar-default-bg:                white !default;
-$navbar-default-border:            darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-border:            #616161;
 
 // Navbar links
 $navbar-default-link-color:                #777 !default;