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

This commit is contained in:
Eugen Rochko 2020-10-04 15:02:36 +02:00 committed by GitHub
parent 16b776c68f
commit a549415868
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 19 additions and 9 deletions

View File

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

View File

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

View File

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