treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Fix regressions in icon buttons in web UI (#14915)

lolsob-rspec
Eugen Rochko 2020-10-04 15:02:36 +02:00 committed by GitHub
parent 4a567139fa
commit 5c10211bcd
3 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/mastodon/components/icon_button.js
View File

@ -116,6 +116,7 @@ export default class IconButton extends React.PureComponent {
activate, activate,
deactivate, deactivate,
overlayed: overlay, overlayed: overlay,
'icon-button--with-counter': typeof counter !== 'undefined',
}); });
if (typeof counter !== 'undefined') { if (typeof counter !== 'undefined') {

14
app/javascript/styles/mastodon/components.scss
View File

@ -163,8 +163,7 @@
} }
.icon-button { .icon-button {
display: inline-flex; display: inline-block;
align-items: center;
padding: 0; padding: 0;
color: $action-button-color; color: $action-button-color;
border: 0; border: 0;
@ -173,6 +172,7 @@
cursor: pointer; cursor: pointer;
transition: all 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color; transition-property: background-color, color;
text-decoration: none;
&:hover, &:hover,
&:active, &:active,
@ -247,6 +247,12 @@
} }
} }
&--with-counter {
display: inline-flex;
align-items: center;
width: auto !important;
}
&__counter { &__counter {
display: inline-block; display: inline-block;
width: 14px; width: 14px;
@ -1152,6 +1158,10 @@
.status__action-bar-button { .status__action-bar-button {
margin-right: 18px; margin-right: 18px;
&.icon-button--with-counter {
margin-right: 14px;
}
} }
.status__action-bar-dropdown { .status__action-bar-dropdown {

13
app/views/statuses/_simple_status.html.haml
View File

@ -52,13 +52,12 @@
= t 'statuses.show_thread' = t 'statuses.show_thread'
.status__action-bar .status__action-bar
.status__action-bar__counter = link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button icon-button--with-counter modal-button' do
= link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button modal-button' do - if status.in_reply_to_id.nil?
- if status.in_reply_to_id.nil? = fa_icon 'reply fw'
= fa_icon 'reply fw' - else
- else = fa_icon 'reply-all fw'
= fa_icon 'reply-all fw' %span.icon-button__counter= obscured_counter status.replies_count
.status__action-bar__counter__label= obscured_counter status.replies_count
= link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button' do = link_to remote_interaction_path(status, type: :reblog), class: 'status__action-bar-button icon-button modal-button' do
- if status.distributable? - if status.distributable?
= fa_icon 'retweet fw' = fa_icon 'retweet fw'