From 79bef1e0a92dd4e578fe07635b16d6fed64f6e42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Thu, 30 Jul 2015 11:48:47 +0200
Subject: [PATCH] add ellipsis functionality to detail property

---
 .gitignore                                    |  5 ++++-
 .../ascribe_detail/detail_property.js         | 20 ++++++++++++++++---
 js/components/ascribe_detail/edition.js       | 12 ++++++++---
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/.gitignore b/.gitignore
index 04138bb0..e77dc4ef 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,7 +6,10 @@ lib-cov
 *.out
 *.pid
 *.gz
- 
+*.sublime-project
+*.sublime-workspace
+
+
 pids
 logs
 results
diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js
index b2d8170d..f220fc98 100644
--- a/js/components/ascribe_detail/detail_property.js
+++ b/js/components/ascribe_detail/detail_property.js
@@ -12,7 +12,7 @@ let DetailProperty = React.createClass({
         separator: React.PropTypes.string,
         labelClassName: React.PropTypes.string,
         valueClassName: React.PropTypes.string,
-        breakWord: React.PropTypes.bool
+        ellipsis: React.PropTypes.bool
     },
 
     getDefaultProps() {
@@ -25,6 +25,16 @@ let DetailProperty = React.createClass({
 
     render() {
         let value = this.props.value;
+        let styles = {};
+
+        if(this.props.ellipsis) {
+            styles = {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            };
+        }
+
 
         if (this.props.children){
             value = (
@@ -32,7 +42,9 @@ let DetailProperty = React.createClass({
                     <div className="col-xs-6 col-xs-height col-bottom no-padding">
                         { this.props.value }
                     </div>
-                    <div className="col-xs-6 col-xs-height">
+                    <div
+                        className="col-xs-6 col-xs-height"
+                        style={styles}>
                         { this.props.children }
                     </div>
                 </div>);
@@ -43,7 +55,9 @@ let DetailProperty = React.createClass({
                     <div className={this.props.labelClassName + ' col-xs-height col-bottom ascribe-detail-property-label'}>
                         { this.props.label + this.props.separator}
                     </div>
-                    <div className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}>
+                    <div
+                        className={this.props.valueClassName + ' col-xs-height col-bottom ascribe-detail-property-value'}
+                        style={styles}>
                         {value}
                     </div>
                 </div>
diff --git a/js/components/ascribe_detail/edition.js b/js/components/ascribe_detail/edition.js
index 98bfe654..4daa2543 100644
--- a/js/components/ascribe_detail/edition.js
+++ b/js/components/ascribe_detail/edition.js
@@ -264,10 +264,16 @@ let EditionSummary = React.createClass({
     render() {
         return (
             <div className="ascribe-detail-header">
-                <EditionDetailProperty label={getLangText('EDITION')}
+                <EditionDetailProperty
+                    label={getLangText('EDITION')}
                     value={this.props.edition.edition_number + ' ' + getLangText('of') + ' ' + this.props.edition.num_editions} />
-                <EditionDetailProperty label={getLangText('ID')} value={ this.props.edition.bitcoin_id } />
-                <EditionDetailProperty label={getLangText('OWNER')} value={ this.props.edition.owner } />
+                <EditionDetailProperty
+                    label={getLangText('ID')}
+                    value={ this.props.edition.bitcoin_id }
+                    ellipsis={true} />
+                <EditionDetailProperty
+                    label={getLangText('OWNER')}
+                    value={ this.props.edition.owner } />
                 {this.getStatus()}
                 {this.getActions()}
                 <hr/>