ar
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Fix regressions in icon buttons in web UI 

Port a549415868 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
rebase/4.0.0rc2
Eugen Rochko 2020-10-04 15:02:36 +02:00 committed by Thibaut Girka
parent 8f950e540b
commit 47edac871c
3 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/flavours/glitch/components/icon_button.js
View File

@ -123,6 +123,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') {

10
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -144,8 +144,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;
@ -154,6 +153,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,
@ -228,6 +228,12 @@
} }
} }
&--with-counter {
display: inline-flex;
align-items: center;
width: auto !important;
}
&__counter { &__counter {
display: inline-block; display: inline-block;
width: 14px; width: 14px;

4
app/javascript/flavours/glitch/styles/components/status.scss
View File

@ -568,6 +568,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 {