design: Improve design of Subscribe/Unsubscribe buttons in message view.

Tweaked by tabbott to use an existing button style.

Fixes #5196.
This commit is contained in:
Cynthia Lin
2017-06-04 14:19:07 -07:00
committed by Tim Abbott
parent b89be3f54b
commit 11e68606b4
3 changed files with 15 additions and 11 deletions

View File

@@ -343,15 +343,15 @@ exports.MessageList.prototype = {
}, },
subscribed_bookend_content: function (stream_name) { subscribed_bookend_content: function (stream_name) {
return "--- Subscribed to stream " + stream_name + " ---"; return "You subscribed to stream " + stream_name;
}, },
unsubscribed_bookend_content: function (stream_name) { unsubscribed_bookend_content: function (stream_name) {
return "--- Unsubscribed from stream " + stream_name + " ---"; return "You unsubscribed from stream " + stream_name;
}, },
not_subscribed_bookend_content: function (stream_name) { not_subscribed_bookend_content: function (stream_name) {
return "--- Not subscribed to stream " + stream_name + " ---"; return "You are not subscribed to stream " + stream_name;
}, },
// Maintains a trailing bookend element explaining any changes in // Maintains a trailing bookend element explaining any changes in

View File

@@ -2186,12 +2186,6 @@ div.floating_recipient {
cursor: pointer; cursor: pointer;
} }
.stream_sub_unsub_button {
min-width: 140px;
margin-top: 9px;
margin-right: 10px;
}
.sub_button_row { .sub_button_row {
text-align: center; text-align: center;
} }
@@ -2439,6 +2433,7 @@ img.emoji {
margin: 0px 5px 0px 5px; margin: 0px 5px 0px 5px;
} }
.sub-unsub-message span,
.date_row span { .date_row span {
display: block; display: block;
background: inherit; background: inherit;
@@ -2450,6 +2445,13 @@ img.emoji {
text-shadow: 1px 1px 0px #fff; text-shadow: 1px 1px 0px #fff;
} }
.sub-unsub-message span {
font-size: 1em;
text-transform: none;
}
.sub-unsub-message span:before,
.sub-unsub-message span:after,
.date_row span:before, .date_row span:before,
.date_row span:after { .date_row span:after {
display: inline-block; display: inline-block;
@@ -2462,11 +2464,13 @@ img.emoji {
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
} }
.sub-unsub-message span:before,
.date_row span:before { .date_row span:before {
right: 0.5em; right: 0.5em;
margin-left: -50%; margin-left: -50%;
} }
.sub-unsub-message span:after,
.date_row span:after { .date_row span:after {
left: 0.5em; left: 0.5em;
margin-right: -50%; margin-right: -50%;

View File

@@ -4,8 +4,8 @@
<div class="{{#if trailing}}trailing_bookend{{/if}} bookend sub-unsub-message"> <div class="{{#if trailing}}trailing_bookend{{/if}} bookend sub-unsub-message">
<span>{{bookend_content}}</span> <span>{{bookend_content}}</span>
{{#if trailing}} {{#if trailing}}
<div class="sub_button_row"> <div class="sub_button_row new-style">
<button class="btn stream_sub_unsub_button btn-default" type="button" name="subscription"> <button class="button white sea-green rounded stream_sub_unsub_button {{#unless subscribed}}unsubscribed{{/unless}}" type="button" name="subscription">
{{#if subscribed}} {{#if subscribed}}
{{t 'Unsubscribe' }} {{t 'Unsubscribe' }}
{{else}} {{else}}