From 9080c84fa93d13041db7d7d007c9fb83237acce9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 25 Sep 2015 11:20:12 +0200
Subject: [PATCH] Implement word wrap for ContractSettings

---
 .../ascribe_settings/contract_settings.js       | 10 +++++-----
 js/utils/general_utils.js                       | 17 +++++++++++++++++
 sass/ascribe_panel.scss                         |  4 ++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js
index a2ff405e..298caaee 100644
--- a/js/components/ascribe_settings/contract_settings.js
+++ b/js/components/ascribe_settings/contract_settings.js
@@ -23,7 +23,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
-import { mergeOptions } from '../../utils/general_utils';
+import { mergeOptions, wrapTextAtCharIndex } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
@@ -109,7 +109,7 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={wrapTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                 <AclProxy
@@ -151,7 +151,7 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={wrapTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
                                                <AclProxy
@@ -172,8 +172,8 @@ let ContractSettings = React.createClass({
                                                 </button>
                                            </div>
                                        }
-                                       leftColumnWidth="40%"
-                                       rightColumnWidth="60%"/>
+                                       leftColumnWidth="60%"
+                                       rightColumnWidth="40%"/>
                                 );
                             })}
                         </div>
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js
index 7717a96a..3565a271 100644
--- a/js/utils/general_utils.js
+++ b/js/utils/general_utils.js
@@ -204,4 +204,21 @@ export function excludePropFromObject(obj, propList){
         }
     }
     return clonedObj;
+}
+
+/**
+ * Takes a string and breaks it at the supplied index and replaces it
+ * with a (potentially) short string that also has been provided
+ * @param  {string} text        The string to wrap
+ * @param  {number} charIndex   The char number at which the text should be wrapped
+ * @param  {String} replacement All text after charIndex will be replaced with this string
+ * @return {string}             The wrapped text
+ */
+export function wrapTextAtCharIndex(text, charIndex, replacement = '...') {
+    let wrappedText = '';
+
+    wrappedText = text.slice(0, charIndex);
+    wrappedText += text.length > charIndex ? replacement : '';
+
+    return wrappedText;
 }
\ No newline at end of file
diff --git a/sass/ascribe_panel.scss b/sass/ascribe_panel.scss
index 9d53b911..0d156d7f 100644
--- a/sass/ascribe_panel.scss
+++ b/sass/ascribe_panel.scss
@@ -24,6 +24,10 @@
     > .ascribe-panel-content {
         display: table-cell;
         vertical-align: middle;
+
+        &:first-child {
+            font-size: .9em;
+        }
     }
 
     @media(max-width:767px) {