luna/mastodon
0
0
Fork 0
mirror of https://github.com/lunaisnotaboy/mastodon.git synced 2024-11-17 20:32:56 +00:00
Code Issues Projects Releases Wiki Activity

Make unfollow button light up red when hovered (#8286)

Browse source 
Fix #8284
This commit is contained in:
Eugen Rochko 2018-08-19 03:28:43 +02:00 committed by GitHub
parent 58ffe3f7c3
commit 19b07ba260
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 24 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/helpers/stream_entries_helper.rb
View file

@ -19,7 +19,7 @@ module StreamEntriesHelper
safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')]) safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('settings.edit_profile')])
end end
elsif current_account.following?(account) || current_account.requested?(account) elsif current_account.following?(account) || current_account.requested?(account)
link_to account_unfollow_path(account), class: 'button logo-button', data: { method: :post } do link_to account_unfollow_path(account), class: 'button logo-button button--destructive', data: { method: :post } do
safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')]) safe_join([render(file: Rails.root.join('app', 'javascript', 'images', 'logo.svg')), t('accounts.unfollow')])
end end
else else

11
app/javascript/styles/mastodon/components.scss
View file

@ -35,6 +35,17 @@
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
&--destructive {
transition: none;
&:active,
&:focus,
&:hover {
background-color: $error-red;
transition: none;
}
}
&:disabled { &:disabled {
background-color: $ui-primary-color; background-color: $ui-primary-color;
cursor: default; cursor: default;

12
app/javascript/styles/mastodon/stream_entries.scss
View file

@ -110,6 +110,18 @@
} }
} }
&.button--destructive {
&:active,
&:focus,
&:hover {
background: $error-red;
svg path:last-child {
fill: $error-red;
}
}
}
@media screen and (max-width: $no-gap-breakpoint) { @media screen and (max-width: $no-gap-breakpoint) {
svg { svg {
display: none; display: none;