From 443829320fab84bb4320a0c5845f75b18e271ff9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Fri, 5 Jun 2015 16:20:28 +0200 Subject: [PATCH] add personal note to piece detail page --- .../ascribe_buttons/acl_button_list.js | 17 ++-- js/components/edition.js | 84 ++++++++++++++----- js/components/edition_container.js | 10 ++- package.json | 4 +- sass/ascribe_edition.scss | 10 ++- sass/main.scss | 1 + sass/variables.scss | 2 +- 7 files changed, 98 insertions(+), 30 deletions(-) diff --git a/js/components/ascribe_buttons/acl_button_list.js b/js/components/ascribe_buttons/acl_button_list.js index d2f60a1e..cd81c19b 100644 --- a/js/components/ascribe_buttons/acl_button_list.js +++ b/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() { - return UserStore.getState(); + propTypes: { + className: React.PropTypes.string, + editions: React.PropTypes.array, + availableAcls: React.PropTypes.array, + handleSuccess: React.PropTypes.func }, - onChange(state) { - this.setState(state); + getInitialState() { + return UserStore.getState(); }, componentDidMount() { @@ -23,9 +26,13 @@ let AclButtonList = React.createClass({ UserStore.unlisten(this.onChange); }, + onChange(state) { + this.setState(state); + }, + render() { return ( -
+
{ 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 ( - +

- + + + + 0}> - 0}> - @@ -89,7 +97,7 @@ let Edition = React.createClass({ -
); @@ -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 (
- + {this.props.children} -
); } 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 ? () : null; + return (
- {this.props.title} - {text} + {text} {icon} {this.props.title}
{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 ( + + + + + + + ); + } +}); + export default Edition; diff --git a/js/components/edition_container.js b/js/components/edition_container.js index 70ee5f13..1f2461bd 100644 --- a/js/components/edition_container.js +++ b/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() { @@ -45,8 +50,9 @@ let EditionContainer = React.createClass({ return ( + currentUser={this.state.currentUser} + deleteEdition={this.deleteEdition} + savePersonalNote={this.savePersonalNote}/> ); } else { return ( diff --git a/package.json b/package.json index 2e9d596b..3c26be6b 100644 --- a/package.json +++ b/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", - "react-datepicker": "~0.8.0" + "uglifyjs": "^2.4.10" }, "jest": { "scriptPreprocessor": "node_modules/babel-jest", diff --git a/sass/ascribe_edition.scss b/sass/ascribe_edition.scss index 386d3b28..12970235 100644 --- a/sass/ascribe_edition.scss +++ b/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; } diff --git a/sass/main.scss b/sass/main.scss index 5dd95ade..58f43926 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -21,6 +21,7 @@ border-left:0; border-right:0; margin-bottom: 1.5em; + border-top:0; } .clear-paddings { diff --git a/sass/variables.scss b/sass/variables.scss index bd767f12..6f65772e 100644 --- a/sass/variables.scss +++ b/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;