Skip to content
This repository has been archived by the owner on Apr 4, 2023. It is now read-only.

[WIP] Write mode polish #397

Merged
merged 10 commits into from
Jun 8, 2016
Merged

[WIP] Write mode polish #397

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b09a883
write mode header and toggle colors
xtine Jun 8, 2016
bd00d15
refactor comment controls nesting and button placement
xtine Jun 8, 2016
ac6c4a5
comment attachment selector ordering
xtine Jun 8, 2016
8366702
set comment attachment margins
xtine Jun 8, 2016
850b3be
rm space
xtine Jun 8, 2016
ec2b007
comment attachment stacking
xtine Jun 8, 2016
d93129a
write mode delete response
xtine Jun 8, 2016
124d782
delete response status
xtine Jun 8, 2016
bb5da73
comment out delete response as it's not fully tested
xtine Jun 8, 2016
1b90a38
show/hide toggle text for comment excerpt
xtine Jun 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion regulations/static/regulations/css/less/module/comment-review.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ comment-review.less contains styles for Review Your Comment page
text-transform: none;
}


p {
.font-regular;
}
Expand Down
220 changes: 121 additions & 99 deletions regulations/static/regulations/css/less/module/comment.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-hide {
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;
Expand Down Expand Up @@ -145,29 +205,14 @@ Write Mode
}

.status {
clear: both;
float: right;
font-weight: bold;
padding: 5px 0 0 0;
text-align: right;
width: 100%;
width: 200px;
}
}

.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;
Expand All @@ -189,6 +234,15 @@ Write Mode
}
}

.comment-controls {
padding-bottom: 35px;
}

.comment-attachments-wrapper {
float: left;
width: 50%;
}

.comment-upload-button {
background-color: @grey;
color: @black;
Expand All @@ -205,50 +259,69 @@ Write Mode
}
}

.comment-context-wrapper {
border-radius: 2px;
box-shadow: 0 0 1px 1px @text_area_border;
margin: 30px 0;
position: relative;
.comment-attachments,
.comment-upload-button,
.comment-attachment-count,
.comment-attachment-limit {
float: left;
clear: both;
}

.comment-context-toggle {
background-color: @grey;
border-radius: 2px;
cursor: pointer;
display: block;
font-size: 16px;
padding: 10px 15px;
.comment-upload-button {
text-align: center;
width: 165px;
}

.comment-context-text {
color: @blue;
.comment-attachment-count {
margin-top: 10px;
}

.comment-attachments {
display: inline-block;
margin-bottom: 5px;
}

.comment-attachment {
background: @grey;
padding: 3px 10px;
margin: 5px 5px 0 0;
word-break: break-all;

span {
padding: 0 1px;
}

.fa-minus-circle,
.comment-context-text-less {
display: none;
.attachment-filename {
.font-bold;
}

.fa {
margin-right: 3px;
.attachment-remove {
padding-left: 9px;
color: @80_gray;

&:hover {
color: @black;
cursor: pointer;
}
}

.comment-context-label {
font-weight: bold;
&:last-child {
margin-right: 0;
}
}

.comment-context {
border-top: 1px solid @text_area_border;
display: none;
margin: 0 0 25px 0;
max-height: 400px;
overflow: auto;
padding: 0 20px;
.comment-delete-response {
color: @uswds_dark_red;
display: block;
.font-bold;
float: right;
padding: 12px 15px 0 0;
}

ul {
padding-left: 0;
}
.comment-submission {
float: right;
margin-top: 5px;
width: 165px;
}

@icon_width: 48px;
Expand Down Expand Up @@ -370,54 +443,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;
}
}
}

.comment-header {
margin: 0.6em 0;

.comment-header-link a {
color: @black;
border-bottom: 2px solid fade(@blue, 80%);
}
}
19 changes: 17 additions & 2 deletions regulations/static/regulations/js/source/views/comment/comment-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
},

Expand All @@ -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');
Expand Down Expand Up @@ -116,6 +118,8 @@ var CommentView = Backbone.View.extend({

this.$contextSectionLabel.html(options.label);

this.$deleteResponseDiv.attr('data-section', options.section);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works, but we should probably switch to a template at some point


this.$context.append(options.$parent);
}
},
Expand All @@ -135,8 +139,8 @@ var CommentView = Backbone.View.extend({
},

toggleCommentExcerpt: function() {
$('.comment-context-text-more').toggle();
$('.comment-context-text-less').toggle();
$('.comment-context-text-show').toggle();
$('.comment-context-text-hide').toggle();
$('.fa-plus-circle').toggle();
$('.fa-minus-circle').toggle();
$('.comment-context').toggle();
Expand Down Expand Up @@ -226,6 +230,17 @@ 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();

this.$status.hide().html('Your comment was deleted.').fadeIn();
}
},

save: function(e) {
e.preventDefault();
this.model.set({
Expand Down
32 changes: 17 additions & 15 deletions regulations/templates/regulations/preamble-partial.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ <h3>Comment period is not open</h3>
<div class="comment-wrapper">
<div class="comment">
<h4 class="comment-header">
You are writing a comment about
You are writing about
<span class="comment-header-link"></span>
</h4>

Expand All @@ -69,10 +69,8 @@ <h4 class="comment-header">
<span class="comment-context-text">
<span class="fa fa-plus-circle" aria-hidden="true"></span>
<span class="fa fa-minus-circle" aria-hidden="true"></span>
Show
<span class="comment-context-text-more">more</span>
<span class="comment-context-text-less">less</span>
context for:
<span class="comment-context-text-show">Show:</span>
<span class="comment-context-text-hide">Hide:</span>
</span>
<span class="comment-context-label">
<span class="comment-context-type">
Expand All @@ -98,16 +96,20 @@ <h4 class="comment-header">

<form>
<div class="editor-container"></div>
<div class="comment-controls">
<div class="comment-attachments"></div>
<label class="comment-upload-button file-upload">
Upload Attachment<input type="file" multiple/>
</label>
<div class="comment-attachment-count"></div>
<div class="comment-attachment-limit"></div>
</div>
<div class="comment-submission">
<button class="comment-button" type="submit">Save Response</button>
<div class="comment-controls group">
<div class="comment-attachments-wrapper">
<div class="comment-attachments"></div>
<label class="comment-upload-button file-upload">
Upload Attachment<input type="file" multiple/>
</label>
<div class="comment-attachment-count"></div>
<div class="comment-attachment-limit"></div>
</div>
<button class="comment-button comment-submission" type="submit">Save Response</button>
<a class="comment-delete-response" data-section="" href="#">
<span class="fa fa-trash" aria-hidden="true"></span>
Delete response
</a>
<div class="status"></div>
</div>
</form>
Expand Down