From b09a883448d14fd2c29e1ddbf2efaffb07be2aa5 Mon Sep 17 00:00:00 2001 From: xtine Date: Tue, 7 Jun 2016 17:43:57 -0700 Subject: [PATCH 01/10] write mode header and toggle colors --- .../regulations/css/less/module/comment.less | 115 +++++++++--------- .../js/source/views/comment/comment-view.js | 2 - .../regulations/preamble-partial.html | 7 +- 3 files changed, 62 insertions(+), 62 deletions(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index f244f7bda..92290e7ad 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -79,6 +79,66 @@ Write Mode .font-regular; padding-left: 15px; + // You are writing about + .comment-header { + margin: 0.6em 0; + + .comment-header-link a { + color: @black; + border-bottom: 2px solid fade(@blue, 80%); + } + } + + // Show more toggle wrapper + .comment-context-wrapper { + border-radius: 2px; + box-shadow: 0 0 1px 1px @text_area_border; + margin: 30px 0; + position: relative; + } + + // Show toggle box + a.comment-context-toggle { + background-color: @grey; + border-radius: 2px; + color: @dark_text; + cursor: pointer; + display: block; + font-size: 16px; + padding: 10px 15px; + + .comment-context-text { + color: @blue; + } + + .fa-minus-circle, + .comment-context-text-less { + display: none; + } + + .fa { + margin-right: 3px; + } + + .comment-context-label { + font-weight: bold; + } + } + + // Show toggle comment context + .comment-context { + border-top: 1px solid @text_area_border; + display: none; + margin: 0 0 25px 0; + max-height: 400px; + overflow: auto; + padding: 0 20px; + + ul { + padding-left: 0; + } + } + .comment { font-size: 14px; padding-bottom: 10px; @@ -205,52 +265,6 @@ Write Mode } } - .comment-context-wrapper { - border-radius: 2px; - box-shadow: 0 0 1px 1px @text_area_border; - margin: 30px 0; - position: relative; - } - - .comment-context-toggle { - background-color: @grey; - border-radius: 2px; - cursor: pointer; - display: block; - font-size: 16px; - padding: 10px 15px; - - .comment-context-text { - color: @blue; - } - - .fa-minus-circle, - .comment-context-text-less { - display: none; - } - - .fa { - margin-right: 3px; - } - - .comment-context-label { - font-weight: bold; - } - } - - .comment-context { - border-top: 1px solid @text_area_border; - display: none; - margin: 0 0 25px 0; - max-height: 400px; - overflow: auto; - padding: 0 20px; - - ul { - padding-left: 0; - } - } - @icon_width: 48px; .write-warning { background-color: @toc_highlight; @@ -412,12 +426,3 @@ Write Mode } } } - -.comment-header { - margin: 0.6em 0; - - .comment-header-link a { - color: @black; - border-bottom: 2px solid fade(@blue, 80%); - } -} diff --git a/regulations/static/regulations/js/source/views/comment/comment-view.js b/regulations/static/regulations/js/source/views/comment/comment-view.js index 09327a79a..9fc06d37a 100644 --- a/regulations/static/regulations/js/source/views/comment/comment-view.js +++ b/regulations/static/regulations/js/source/views/comment/comment-view.js @@ -135,8 +135,6 @@ var CommentView = Backbone.View.extend({ }, toggleCommentExcerpt: function() { - $('.comment-context-text-more').toggle(); - $('.comment-context-text-less').toggle(); $('.fa-plus-circle').toggle(); $('.fa-minus-circle').toggle(); $('.comment-context').toggle(); diff --git a/regulations/templates/regulations/preamble-partial.html b/regulations/templates/regulations/preamble-partial.html index 1a23e5eda..aacb4b25c 100644 --- a/regulations/templates/regulations/preamble-partial.html +++ b/regulations/templates/regulations/preamble-partial.html @@ -59,7 +59,7 @@

Comment period is not open

- You are writing a comment about + You are writing about

@@ -69,10 +69,7 @@

- Show - more - less - context for: + Show: From bd00d151f7795adf7f306b7e5fe41bff653aba21 Mon Sep 17 00:00:00 2001 From: xtine Date: Tue, 7 Jun 2016 18:02:40 -0700 Subject: [PATCH 02/10] refactor comment controls nesting and button placement --- .../regulations/css/less/module/comment.less | 123 ++++++++++-------- .../regulations/preamble-partial.html | 20 +-- 2 files changed, 76 insertions(+), 67 deletions(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index 92290e7ad..ed0516e32 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -213,21 +213,6 @@ Write Mode } } - .comment-controls { - float: left; - padding-bottom: 35px; - width: 70%; - - button { - float: left; - } - } - - .comment-submission { - width: 30%; - float: right; - } - .comment-button, a.comment-index-review { background-color: @pacific; @@ -249,6 +234,15 @@ Write Mode } } + .comment-controls { + padding-bottom: 35px; + } + + .comment-attachments-wrapper { + float: left; + width: 70%; + } + .comment-upload-button { background-color: @grey; color: @black; @@ -265,6 +259,63 @@ Write Mode } } + .comment-attachment-limit, + .comment-attachment-count, + .comment-attachments, + .comment-upload-button { + float: left; + clear: both; + } + + .comment-upload-button { + text-align: center; + width: 165px; + } + + .comment-attachment-count { + margin-top: 10px; + } + + .comment-attachments { + display: inline-block; + margin-bottom: 5px; + } + + .comment-attachment { + display: inline-block; + background: @grey; + padding: 3px 10px; + margin: 0 5px 3px 0; + + span { + padding: 0 1px; + } + + .attachment-filename { + .font-bold; + } + + .attachment-remove { + padding-left: 9px; + color: @80_gray; + + &:hover { + color: @black; + cursor: pointer; + } + } + + &:last-child { + margin-right: 0; + } + } + + .comment-submission { + float: right; + margin-top: 5px; + width: 165px; + } + @icon_width: 48px; .write-warning { background-color: @toc_highlight; @@ -384,45 +435,3 @@ Write Mode // for adding a draft watermark to PDFs of unsubmitted comments background-image: url("../img/draft_watermark.png"); } - -.comment-attachment-limit, -.comment-attachment-count, -.comment-attachments, -.comment-upload-button { - float: left; - clear: both; -} - -.comment-attachment-count { - margin-top: 10px; -} - -.comment-attachments { - display: inline-block; - margin-bottom: 5px; -} - -.comment-attachment { - display: inline-block; - background: @grey; - padding: 3px 10px; - margin-bottom: 3px; - - span { - padding: 0 1px; - } - - .attachment-filename { - .font-bold; - } - - .attachment-remove { - padding-left: 9px; - color: @80_gray; - - &:hover { - color: @black; - cursor: pointer; - } - } -} diff --git a/regulations/templates/regulations/preamble-partial.html b/regulations/templates/regulations/preamble-partial.html index aacb4b25c..e2f6289a4 100644 --- a/regulations/templates/regulations/preamble-partial.html +++ b/regulations/templates/regulations/preamble-partial.html @@ -95,16 +95,16 @@

-
-
- -
-
-
-
- +
+
+
+ +
+
+
+
From ac6c4a5f5c24c0495dfe23c7fbb425b10036b86d Mon Sep 17 00:00:00 2001 From: xtine Date: Tue, 7 Jun 2016 18:09:23 -0700 Subject: [PATCH 03/10] comment attachment selector ordering --- regulations/static/regulations/css/less/module/comment.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index ed0516e32..aef1f204c 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -259,10 +259,10 @@ Write Mode } } - .comment-attachment-limit, - .comment-attachment-count, .comment-attachments, - .comment-upload-button { + .comment-upload-button, + .comment-attachment-count, + .comment-attachment-limit { float: left; clear: both; } From 83667020da42ef259b472eadeca27aafd66478c2 Mon Sep 17 00:00:00 2001 From: xtine Date: Tue, 7 Jun 2016 18:14:15 -0700 Subject: [PATCH 04/10] set comment attachment margins --- regulations/static/regulations/css/less/module/comment.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index aef1f204c..fdc8a61bb 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -285,7 +285,7 @@ Write Mode display: inline-block; background: @grey; padding: 3px 10px; - margin: 0 5px 3px 0; + margin: 5px 5px 0 0; span { padding: 0 1px; From 850b3beb54d4b0bc48ad318375d37477775caa23 Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 11:45:00 -0700 Subject: [PATCH 05/10] rm space --- .../static/regulations/css/less/module/comment-review.less | 1 - 1 file changed, 1 deletion(-) diff --git a/regulations/static/regulations/css/less/module/comment-review.less b/regulations/static/regulations/css/less/module/comment-review.less index 16951012d..40aa98794 100644 --- a/regulations/static/regulations/css/less/module/comment-review.less +++ b/regulations/static/regulations/css/less/module/comment-review.less @@ -14,7 +14,6 @@ comment-review.less contains styles for Review Your Comment page text-transform: none; } - p { .font-regular; } From ec2b007ed1e55f99947dfc73efc77c675eb27d4e Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 11:45:16 -0700 Subject: [PATCH 06/10] comment attachment stacking --- regulations/static/regulations/css/less/module/comment.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index fdc8a61bb..1933c8a0f 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -282,10 +282,11 @@ Write Mode } .comment-attachment { - display: inline-block; background: @grey; padding: 3px 10px; margin: 5px 5px 0 0; + width: 85%; + word-break: break-all; span { padding: 0 1px; From d93129a853385bbe2a729c0f03da49c319fb2870 Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 12:54:53 -0700 Subject: [PATCH 07/10] write mode delete response --- .../regulations/css/less/module/comment.less | 15 +++++++++++---- .../js/source/views/comment/comment-view.js | 13 +++++++++++++ .../templates/regulations/preamble-partial.html | 4 ++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index 1933c8a0f..429e62f99 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -205,11 +205,11 @@ Write Mode } .status { - clear: both; + float: right; font-weight: bold; padding: 5px 0 0 0; text-align: right; - width: 100%; + width: 200px; } } @@ -240,7 +240,7 @@ Write Mode .comment-attachments-wrapper { float: left; - width: 70%; + width: 50%; } .comment-upload-button { @@ -285,7 +285,6 @@ Write Mode background: @grey; padding: 3px 10px; margin: 5px 5px 0 0; - width: 85%; word-break: break-all; span { @@ -311,6 +310,14 @@ Write Mode } } + .comment-delete-response { + color: @uswds_dark_red; + display: block; + .font-bold; + float: right; + padding: 12px 15px 0 0; + } + .comment-submission { float: right; margin-top: 5px; diff --git a/regulations/static/regulations/js/source/views/comment/comment-view.js b/regulations/static/regulations/js/source/views/comment/comment-view.js index 9fc06d37a..b43c8ad7b 100644 --- a/regulations/static/regulations/js/source/views/comment/comment-view.js +++ b/regulations/static/regulations/js/source/views/comment/comment-view.js @@ -44,6 +44,7 @@ var CommentView = Backbone.View.extend({ 'dragleave input[type="file"]': 'unhighlightDropzone', 'click .comment-header': 'openComment', 'click .comment-context-toggle': 'toggleCommentExcerpt', + 'click .comment-delete-response': 'deleteComment', 'submit form': 'save' }, @@ -54,6 +55,7 @@ var CommentView = Backbone.View.extend({ this.$contextSectionLabel = this.$el.find('.comment-context-section'); this.$header = this.$el.find('.comment-header'); this.$headerLink = this.$el.find('.comment-header-link'); + this.$deleteResponseDiv = this.$el.find('.comment-delete-response'); this.$container = this.$el.find('.editor-container'); this.$input = this.$el.find('input[type="file"]'); this.$attachmentCount = this.$el.find('.comment-attachment-count'); @@ -116,6 +118,8 @@ var CommentView = Backbone.View.extend({ this.$contextSectionLabel.html(options.label); + this.$deleteResponseDiv.attr('data-section', options.section); + this.$context.append(options.$parent); } }, @@ -224,6 +228,15 @@ var CommentView = Backbone.View.extend({ this.$input.prop('disabled', this.attachmentCount >= MAX_ATTACHMENTS); }, + deleteComment: function(e) { + e.preventDefault(); + + var comment = comments.get($(e.target).data('section')); + if (comment) { + comment.destroy(); + } + }, + save: function(e) { e.preventDefault(); this.model.set({ diff --git a/regulations/templates/regulations/preamble-partial.html b/regulations/templates/regulations/preamble-partial.html index e2f6289a4..0c56bc494 100644 --- a/regulations/templates/regulations/preamble-partial.html +++ b/regulations/templates/regulations/preamble-partial.html @@ -105,6 +105,10 @@

+ + + Delete response +

From 124d782aa6fc2a2b271cddd08f4250f163aacad9 Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 12:56:22 -0700 Subject: [PATCH 08/10] delete response status --- .../static/regulations/js/source/views/comment/comment-view.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/regulations/static/regulations/js/source/views/comment/comment-view.js b/regulations/static/regulations/js/source/views/comment/comment-view.js index b43c8ad7b..36c6b951e 100644 --- a/regulations/static/regulations/js/source/views/comment/comment-view.js +++ b/regulations/static/regulations/js/source/views/comment/comment-view.js @@ -234,6 +234,8 @@ var CommentView = Backbone.View.extend({ var comment = comments.get($(e.target).data('section')); if (comment) { comment.destroy(); + + this.$status.hide().html('Your comment was deleted.').fadeIn(); } }, From bb5da734f79984308447dca28a3d8c6a3e8bf33c Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 13:04:56 -0700 Subject: [PATCH 09/10] comment out delete response as it's not fully tested --- regulations/templates/regulations/preamble-partial.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/regulations/templates/regulations/preamble-partial.html b/regulations/templates/regulations/preamble-partial.html index 0c56bc494..b18762a07 100644 --- a/regulations/templates/regulations/preamble-partial.html +++ b/regulations/templates/regulations/preamble-partial.html @@ -105,10 +105,12 @@

+ {% comment %} Delete response + {% endcomment %}
From 1b90a387a91cf5e3fdf69c550cc47f02d4066a5f Mon Sep 17 00:00:00 2001 From: xtine Date: Wed, 8 Jun 2016 13:13:55 -0700 Subject: [PATCH 10/10] show/hide toggle text for comment excerpt --- regulations/static/regulations/css/less/module/comment.less | 2 +- .../regulations/js/source/views/comment/comment-view.js | 2 ++ regulations/templates/regulations/preamble-partial.html | 5 ++--- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/regulations/static/regulations/css/less/module/comment.less b/regulations/static/regulations/css/less/module/comment.less index 429e62f99..844746867 100644 --- a/regulations/static/regulations/css/less/module/comment.less +++ b/regulations/static/regulations/css/less/module/comment.less @@ -112,7 +112,7 @@ Write Mode } .fa-minus-circle, - .comment-context-text-less { + .comment-context-text-hide { display: none; } diff --git a/regulations/static/regulations/js/source/views/comment/comment-view.js b/regulations/static/regulations/js/source/views/comment/comment-view.js index 36c6b951e..d5715324e 100644 --- a/regulations/static/regulations/js/source/views/comment/comment-view.js +++ b/regulations/static/regulations/js/source/views/comment/comment-view.js @@ -139,6 +139,8 @@ var CommentView = Backbone.View.extend({ }, toggleCommentExcerpt: function() { + $('.comment-context-text-show').toggle(); + $('.comment-context-text-hide').toggle(); $('.fa-plus-circle').toggle(); $('.fa-minus-circle').toggle(); $('.comment-context').toggle(); diff --git a/regulations/templates/regulations/preamble-partial.html b/regulations/templates/regulations/preamble-partial.html index b18762a07..19409273f 100644 --- a/regulations/templates/regulations/preamble-partial.html +++ b/regulations/templates/regulations/preamble-partial.html @@ -69,7 +69,8 @@

- Show: + Show: + Hide: @@ -105,12 +106,10 @@

- {% comment %} Delete response - {% endcomment %}