Merge pull request #568 from hammerlab/comments-style

Change comment styling and icons
hammerlab · Apr 1, 2015 · 413b030 · 413b030
2 parents b30827c + 3ecf170
commit 413b030
Show file tree

Hide file tree

Showing 10 changed files with 449 additions and 41 deletions.
diff --git a/LICENSE b/LICENSE
@@ -5,4 +5,10 @@ APACHE-LICENSE-2.0.txt.
 The CycleDash logo/favicon, "Retro old fashioned bicycle", by Vintage Printables at
 http://vintageprintables.blogspot.com/2012/09/vintage-old-fashioned-bicycle-clip-art.html
 is Creative Commons 4.0 BY licensed, (https://creativecommons.org/licenses/by/4.0/)
-and in /licenses as CREATIVE-COMMONS-BY-4.0.txt.
+and in /licenses as CREATIVE-COMMONS-BY-4.0.txt.
+
+The following icons are Creative Commons 3.0 BY licensed, found at
+https://creativecommons.org/licenses/by/3.0/ and in /licensed as
+CREATIVE-COMMONS-BY-3.0.txt:
+https://thenounproject.com/term/8070/
+https://thenounproject.com/term/16505/
diff --git a/cycledash/static/css/examine.css b/cycledash/static/css/examine.css
@@ -117,28 +117,45 @@ body {
   background: rgb(247, 252, 253);
   text-align: left;
 }
-.vcf-table .comment-container {
-  width: 600px;
+.vcf-table .comment-edit-container, .vcf-table .comment-view-container {
+  width: 700px;
+  margin: 10px 5px;
 }
-.vcf-table .comment-box-head {
-  width: 600px;
+.vcf-table .comment-edit-container {
+  border-radius: 3px;
+  border: 1px solid #ccc;
+  padding: 5px;
+  background-color: #fff;
+}
+.vcf-table .comment-box-header {
+  width: 700px;
   text-align: left;
-  vertical-align: middle;
+  height: 18px;
 }
 .vcf-table .comment-header {
-  width: 600px;
+  width: 700px;
+  height: 35px;
+  padding-top: 2px;
   text-align: right;
+  background-color: #f5f5f5;
+  border: 1px solid #ccc;
+  border-radius: 3px 3px 0px 0px;
+  color: #666;
 }
 .vcf-table .comment-text {
   clear: both;
   width: 100%;
-  min-height: 70px;
   height: auto;
-  background-color: #eee;
+  min-height: 70px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  background-color: #fff;
   border: 1px solid #ccc;
+  border-top: 0px;
   white-space: pre-wrap;
   word-wrap: break-word;
-  margin-bottom: 10px;
+  border-radius: 0px 0px 3px 3px;
+  padding: 10px;
 }
 .vcf-table .comment-text p, ul, li, pre {
   margin: 0px;
@@ -147,22 +164,54 @@ body {
   line-height: 1.1;
 }
 .vcf-table .comment-textarea {
-  width: 600px;
+  width: 100%;
   height: 100px;
+  background-color: #f5f5f5;
+  border-radius: 3px;
+}
+.vcf-table .comment-textarea:focus {
+  background-color: #fff;
 }
 .vcf-table .comment-button {
   margin: 6px 0px 6px 6px;
 }
 .vcf-table .edit-buttons {
   float: right;
+  padding: 0px;
+  margin-top: 5px;
+  margin-right: 5px;
+}
+.vcf-table .comment-delete {
+  width: 20px;
+  height: 20px;
+  background: url(/static/img/delete-comment-noun_16505_cc.svg);
+  background-size: 20px 20px;
+  opacity: 0.7;
+  display: inline-block;
+  margin-left: 5px;
+  margin-bottom: -1px;
+}
+.vcf-table .comment-edit {
+  width: 20px;
+  height: 20px;
+  background: url(/static/img/edit-comment-noun_8070_cc.svg);
+  background-size: 22px 22px;
+  opacity: 0.7;
+  display: inline-block;
+}
+.vcf-table .comment-cancel, .vcf-table .comment-save {
+  margin-bottom: 0px;
 }
 .vcf-table .comment-by {
   float: left;
-  padding-top: 15px;
+  margin-top: 10px;
+  margin-left: 10px;
 }
 .vcf-table .save-buttons {
-  width: 600px;
+  width: 100%;
   text-align: right;
+  padding: 0px;
+  margin: 0px;
 }
 .vcf-table .comment-author {
   margin-bottom: 3px;
@@ -172,8 +221,12 @@ body {
   font-size: 14px;
   line-height: 20px;
   border: 1px solid #B6B6B7;
-  border-radius: 5px;
+  border-radius: 3px;
   outline: none;
+  background-color: #f9f9f9;
+}
+.vcf-table .comment-author:focus {
+  background-color: #fff;
 }
 .vcf-table .dalliance-open, .vcf-table .igv-links {
   padding: 7px 0 0 21px;
@@ -188,6 +241,17 @@ body {
   background: url(/static/img/igv32x32.jpg) no-repeat 2px 3px;
   background-size: 16px 16px;
   margin-left: 10px;
+  height: 16px;
+}
+.vcf-table .igv-help {
+  margin-bottom: -4px;
+  margin-left: 4px;
+  width: 18px;
+  height: 18px;
+  background: url(/static/img/question-mark-noun_61692.svg);
+  background-size: 18px 18px;
+  opacity: 0.55;
+  display: inline-block;
 }
 .vcf-table tbody tr:nth-child(even) {
   background: rgb(245, 245, 245);

diff --git a/cycledash/static/img/delete-comment-noun_16505_cc.svg b/cycledash/static/img/delete-comment-noun_16505_cc.svg
diff --git a/cycledash/static/img/edit-comment-noun_8070_cc.svg b/cycledash/static/img/edit-comment-noun_8070_cc.svg
diff --git a/cycledash/static/js/examine/components/CommentBox.js b/cycledash/static/js/examine/components/CommentBox.js
@@ -224,11 +224,7 @@ var VCFComment = React.createClass({
                         placeHolder={placeHolder}
                         handleDelete={this.props.handleDelete}
                         handleEdit={this.makeEditable} />;
-    return (
-      <div className='comment-container'>
-        {commentElement}
-      </div>
-    );
+    return commentElement;
   }
 });
 
@@ -267,7 +263,7 @@ var VCFCommentHeader = React.createClass({
         <span className='igv-links'>
           IGV: {igvLinks[0]}&nbsp;
                {igvLinks[1]}&nbsp;
-               <a href="https://github.com/hammerlab/cycledash/wiki/IGV-Integration">help</a>
+               <a href="https://github.com/hammerlab/cycledash/wiki/IGV-Integration" className="igv-help" title="IGV Help"></a>
         </span>
       </div>
     );
@@ -291,23 +287,17 @@ var VCFCommentViewer = React.createClass({
 
     var markedDownText = marked(plainText);
     return (
-      <div>
+      <div className='comment-view-container'>
         <div className='comment-header'>
           <span className='comment-by'>
             Comment by <b>{this.props.authorName}</b>, {this.props.createdString}
           </span>
           <span className='edit-buttons'>
-            <button className='btn btn-default btn-xs comment-button btn-danger'
-                    onClick={this.props.handleDelete}>
-              Delete
-            </button>
-            <button className='btn btn-default btn-xs comment-button'
-                    onClick={this.props.handleEdit}>
-              Edit
-            </button>
+            <a className='comment-edit' title='Edit Comment' href='#' onClick={this.props.handleEdit}></a>
+            <a className='comment-delete' title='Delete Comment' href='#' onClick={this.props.handleDelete}></a>
           </span>
         </div>
-        <div className='form-control comment-text'
+        <div className='comment-text'
              dangerouslySetInnerHTML={{__html: markedDownText}} />
       </div>
     );
@@ -383,23 +373,23 @@ var VCFCommentEditor = React.createClass({
     var buttons = [];
     if (this.props.cancelable) {
       buttons.push(
-        <button className='btn btn-xs comment-button btn-default'
+        <button className='btn btn-xs comment-button btn-default comment-cancel'
                 key='cancel'
                 onClick={this.handleCancelConfirm}>
           Cancel
         </button>
       );
     }
     buttons.push(
-      <button className='btn btn-xs comment-button btn-success'
+      <button className='btn btn-xs comment-button btn-success comment-save'
               key='save'
               onClick={this.handleSaveText}>
         Save
       </button>
     );
     return (
-      <div>
-        <input className='comment-author'
+      <div className='comment-edit-container'>
+        <input className='form-control comment-author'
                type='text'
                value={this.state.newAuthorName}
                placeholder='Enter your name here'