From 6c9e108b72d78bb0af3261bad8a7bcfda7a08265 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 23 Dec 2015 09:39:02 +0100
Subject: [PATCH] Hide unnecessary items from the piece and edition details in
 print

---
 .../ascribe_detail/detail_property.js         | 33 ++++++++++---------
 js/components/ascribe_detail/edition.js       | 25 +++++++-------
 .../ascribe_detail/media_container.js         |  2 +-
 .../ascribe_detail/piece_container.js         |  6 ++--
 4 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index 8b0f50b5..44eec06a 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -1,9 +1,10 @@
 'use strict';
 
 import React from 'react';
+import classNames from 'classnames';
 
 
-let DetailProperty = React.createClass({
+const DetailProperty = React.createClass({
     propTypes: {
         label: React.PropTypes.string,
         value: React.PropTypes.oneOfType([
@@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
             React.PropTypes.element
         ]),
         separator: React.PropTypes.string,
+        className: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
         ellipsis: React.PropTypes.bool,
@@ -30,24 +32,23 @@ let DetailProperty = React.createClass({
     },
 
     render() {
-        let styles = {};
-        const { labelClassName,
-                label,
-                separator,
-                valueClassName,
-                children,
-                value } = this.props;
+        const {
+            children,
+            className,
+            label,
+            labelClassName,
+            separator,
+            valueClassName,
+            value } = this.props;
 
-        if(this.props.ellipsis) {
-            styles = {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            };
-        }
+        const styles = this.props.ellipsis ? {
+            whiteSpace: 'nowrap',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis'
+        } : null;
 
         return (
-            <div className="row ascribe-detail-property">
+            <div className={classNames('row ascribe-detail-property', className)}>
                 <div className="row-same-height">
                     <div className={labelClassName}>
                         {label} {separator}
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 862a4021..b1816b6a 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -16,7 +16,7 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
 
 import Form from './../ascribe_forms/form';
 import Property from './../ascribe_forms/property';
-import EditionDetailProperty from './detail_property';
+import DetailProperty from './detail_property';
 import LicenseDetail from './license_detail';
 import FurtherDetails from './further_details';
 
@@ -63,10 +63,10 @@ let Edition = React.createClass({
                 </Col>
                 <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
                     <div className="ascribe-detail-header">
-                        <hr style={{marginTop: 0}}/>
+                        <hr className="hidden-print" style={{marginTop: 0}}/>
                         <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
-                        <EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
-                        <EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
+                        <DetailProperty label="BY" value={this.props.edition.artist_name} />
+                        <DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
                         <hr/>
                     </div>
                     <EditionSummary
@@ -169,10 +169,10 @@ let EditionSummary = React.createClass({
         let status = null;
         if (this.props.edition.status.length > 0){
             let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
-            status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
+            status = <DetailProperty label="STATUS" value={ statusStr }/>;
             if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
                 status = (
-                    <EditionDetailProperty label="STATUS" value={ statusStr } />
+                    <DetailProperty label="STATUS" value={ statusStr } />
                 );
             }
         }
@@ -183,14 +183,14 @@ let EditionSummary = React.createClass({
         let { actionPanelButtonListType, edition, currentUser } = this.props;
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('EDITION')}
                     value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('ID')}
                     value={ edition.bitcoin_id }
                     ellipsis={true} />
-                <EditionDetailProperty
+                <DetailProperty
                     label={getLangText('OWNER')}
                     value={ edition.owner } />
                 <LicenseDetail license={edition.license_type}/>
@@ -201,14 +201,15 @@ let EditionSummary = React.createClass({
                     `AclInformation` would show up
                 */}
                 <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
-                    <EditionDetailProperty
-                        label={getLangText('ACTIONS')}>
+                    <DetailProperty
+                        label={getLangText('ACTIONS')}
+                        className="hidden-print">
                         <EditionActionPanel
                             actionPanelButtonListType={actionPanelButtonListType}
                             edition={edition}
                             currentUser={currentUser}
                             handleSuccess={this.handleSuccess} />
-                    </EditionDetailProperty>
+                    </DetailProperty>
                 </AclProxy>
                 <hr/>
             </div>
diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js
index c6845a44..3c1e7eb9 100644
--- a/js/components/ascribe_detail/media_container.js
+++ b/js/components/ascribe_detail/media_container.js
@@ -114,7 +114,7 @@ let MediaContainer = React.createClass({
                     url={content.digital_work.url}
                     extraData={extraData}
                     encodingStatus={content.digital_work.isEncoding} />
-                <p className="text-center">
+                <p className="text-center hidden-print">
                     <span className="ascribe-social-button-list">
                         <FacebookShareButton />
                         <TwitterShareButton
diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js
index 7dfc9570..1aebff75 100644
--- a/js/components/ascribe_detail/piece_container.js
+++ b/js/components/ascribe_detail/piece_container.js
@@ -219,7 +219,9 @@ let PieceContainer = React.createClass({
                         no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
                         `AclInformation` would show up
                     */}
-                    <DetailProperty label={getLangText('ACTIONS')}>
+                    <DetailProperty
+                        label={getLangText('ACTIONS')}
+                        className="hidden-print">
                         <AclButtonList
                             className="ascribe-button-list"
                             availableAcls={piece.acl}
@@ -257,7 +259,7 @@ let PieceContainer = React.createClass({
                     loadPiece={this.loadPiece}
                     header={
                         <div className="ascribe-detail-header">
-                            <hr style={{marginTop: 0}}/>
+                            <hr className="hidden-print" style={{marginTop: 0}}/>
                             <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
                             <DetailProperty label="BY" value={this.state.piece.artist_name} />
                             <DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />