diff --git a/LICENSE b/LICENSE index 92f8c39..c19b4b2 100644 --- 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. \ No newline at end of file +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 index f90a5ad..4b258b9 100644 --- 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 new file mode 100644 index 0000000..1a9efc4 --- /dev/null +++ b/cycledash/static/img/delete-comment-noun_16505_cc.svg @@ -0,0 +1,8 @@ + + Slice 1 + Created with Sketch (http://www.bohemiancoding.com/sketch) + + + + + \ No newline at end of file diff --git a/cycledash/static/img/edit-comment-noun_8070_cc.svg b/cycledash/static/img/edit-comment-noun_8070_cc.svg new file mode 100644 index 0000000..ee53a51 --- /dev/null +++ b/cycledash/static/img/edit-comment-noun_8070_cc.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/cycledash/static/js/examine/components/CommentBox.js b/cycledash/static/js/examine/components/CommentBox.js index 236f7ce..5f30c40 100644 --- 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 ( -
- {commentElement} -
- ); + return commentElement; } }); @@ -267,7 +263,7 @@ var VCFCommentHeader = React.createClass({ IGV: {igvLinks[0]}  {igvLinks[1]}  - help + ); @@ -291,23 +287,17 @@ var VCFCommentViewer = React.createClass({ var markedDownText = marked(plainText); return ( -
+
Comment by {this.props.authorName}, {this.props.createdString} - - + +
-
); @@ -383,7 +373,7 @@ var VCFCommentEditor = React.createClass({ var buttons = []; if (this.props.cancelable) { buttons.push( - ); return ( -
- + n); + TestUtils.Simulate.click(links[n]); + } + // Change the comment text for the nth comment (0-indexed) in the row function changeCommentText(commentText, n) { if (_.isUndefined(n)) { @@ -159,14 +172,14 @@ describe('ExaminePage Comments', function() { // Edit the second comment, save it, and check that the fake DB was updated. resetAndClickRow(2); assert.equal('Second', commentText()); - clickCommentButton('Edit'); + clickCommentLinkClass('comment-edit'); changeCommentText('Edited Comment'); clickCommentButton('Save'); assert.equal('Edited Comment', commentText()); assert.equal('Edited Comment', commentDatabase['17'].comment_text); // Delete the second comment. - clickCommentButton('Delete'); + clickCommentLinkClass('comment-delete'); assert.equal(4, getNumComments()); assert(!_.has(commentDatabase, '17')); @@ -178,7 +191,7 @@ describe('ExaminePage Comments', function() { assert.equal('New Comment', commentDatabase['43'].comment_text); // Delete the added comment. - clickCommentButton('Delete'); + clickCommentLinkClass('comment-delete'); assert.equal(4, getNumComments()); assert(!_.has(commentDatabase, '43')); }); @@ -197,13 +210,13 @@ describe('ExaminePage Comments', function() { // updated. Then try to delete it. resetAndClickRow(2); assert.equal('Second', commentText()); - clickCommentButton('Edit'); + clickCommentLinkClass('comment-edit'); changeCommentText('Edited Comment'); clickCommentButton('Save'); assert.equal('Second', commentText()); assert.equal('Second', commentDatabase['17'].comment_text); assert.equal(5, getNumComments()); - clickCommentButton('Delete'); + clickCommentLinkClass('comment-delete'); assert.equal('Second', commentText()); assert.equal('Second', commentDatabase['17'].comment_text); assert.equal(5, getNumComments()); diff --git a/tests/pdifftests/images/examine_comments-edit.png b/tests/pdifftests/images/examine_comments-edit.png index af9ec8a..cd3e1cc 100644 Binary files a/tests/pdifftests/images/examine_comments-edit.png and b/tests/pdifftests/images/examine_comments-edit.png differ diff --git a/tests/pdifftests/images/examine_comments-view.png b/tests/pdifftests/images/examine_comments-view.png index 298e792..2ecb9cd 100644 Binary files a/tests/pdifftests/images/examine_comments-view.png and b/tests/pdifftests/images/examine_comments-view.png differ diff --git a/tests/pdifftests/test.py b/tests/pdifftests/test.py index 4a0f482..1b6f9c6 100644 --- a/tests/pdifftests/test.py +++ b/tests/pdifftests/test.py @@ -79,8 +79,7 @@ def comments_edit(self, driver): """Examine page showing a comment in edit mode.""" row = driver.find_element_by_css_selector('tbody tr') row.click() - btn = driver.find_elements_by_css_selector('.comment-button')[1] - assert btn.text.lower() == 'edit' + btn = driver.find_elements_by_css_selector('.comment-edit')[1] btn.click() @dontwaitfor('.query-status')