Tighten vertical spacing in messages

In this change:
- Move and align the message reply button with the message content
  that it actually quotes when clicked.
- Do not show the message reply button if the message is "automated".
- Reduce margin around message reply button and make it "link" style.
- Remove the trailing margin from the top-level comment formatted text.
- Reduce the vertical spacing between blocks (e.g. paragraphs) in
  formatted texts.

Bug: Issue 7468
Change-Id: Iaec387ea32139062f90d37a5647394f644e9f17f
This commit is contained in:
Wyatt Allen
2017-10-30 16:32:44 -07:00
parent b5cef34edc
commit 54d3b180a8
3 changed files with 11 additions and 9 deletions

View File

@@ -126,13 +126,13 @@ limitations under the License.
top: 10px; top: 10px;
} }
.replyContainer { .replyContainer {
padding: .5em 0 1em; padding: .5em 0 0 0;
} }
.positiveVote { .positiveVote {
box-shadow: inset 0 4.4em #d4ffd4; box-shadow: inset 0 3.8em #d4ffd4;
} }
.negativeVote { .negativeVote {
box-shadow: inset 0 4.4em #ffd4d4; box-shadow: inset 0 3.8em #ffd4d4;
} }
gr-account-label { gr-account-label {
--gr-account-label-text-style: { --gr-account-label-text-style: {
@@ -156,9 +156,13 @@ limitations under the License.
<div class="content"> <div class="content">
<div class="message hideOnOpen">[[message.message]]</div> <div class="message hideOnOpen">[[message.message]]</div>
<gr-formatted-text <gr-formatted-text
no-trailing-margin
class="message hideOnCollapsed" class="message hideOnCollapsed"
content="[[message.message]]" content="[[message.message]]"
config="[[_commentLinks]]"></gr-formatted-text> config="[[_commentLinks]]"></gr-formatted-text>
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
<gr-button link small on-tap="_handleReplyTap">Reply</gr-button>
</div>
<gr-comment-list <gr-comment-list
comments="[[comments]]" comments="[[comments]]"
change-num="[[changeNum]]" change-num="[[changeNum]]"
@@ -196,9 +200,6 @@ limitations under the License.
</a> </a>
</template> </template>
</div> </div>
<div class="replyContainer" hidden$="[[!showReplyButton]]" hidden>
<gr-button small on-tap="_handleReplyTap">Reply</gr-button>
</div>
</div> </div>
<gr-rest-api-interface id="restAPI"></gr-rest-api-interface> <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
</template> </template>

View File

@@ -131,7 +131,8 @@
}, },
_computeShowReplyButton(message, loggedIn) { _computeShowReplyButton(message, loggedIn) {
return !!message.message && loggedIn; return !!message.message && loggedIn &&
!this._computeIsAutomated(message);
}, },
_computeExpanded(expanded) { _computeExpanded(expanded) {
@@ -163,7 +164,7 @@
_computeIsAutomated(message) { _computeIsAutomated(message) {
return !!(message.reviewer || return !!(message.reviewer ||
message.type === 'REVIEWER_UPDATE' || this._computeIsReviewerUpdate(message) ||
(message.tag && message.tag.startsWith('autogenerated'))); (message.tag && message.tag.startsWith('autogenerated')));
}, },

View File

@@ -28,7 +28,7 @@ limitations under the License.
ul, ul,
blockquote, blockquote,
gr-linked-text.pre { gr-linked-text.pre {
margin: 0 0 1.4em 0; margin: 0 0 .8em 0;
} }
p, p,
ul, ul,