bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Rotate unread notification bell icon with CSS instead of relying on a separate icon

Browse source
This commit is contained in:
Alex Gleason 2021-10-05 17:49:44 -05:00
parent e04a488ea4
commit 30973bd05f
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
3 changed files with 18 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/soapbox/components/primary_navigation.js
View file

@ -63,8 +63,11 @@ class PrimaryNavigation extends React.PureComponent {
{account && (
<NavLink key='notifications' className='btn grouped' to='/notifications' data-preview-title-id='column.notifications'>
<IconWithCounter
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
className={classNames('primary-navigation__icon', { 'svg-icon--active': location.pathname === '/notifications' })}
src={require('@tabler/icons/icons/bell.svg')}
className={classNames('primary-navigation__icon', {
'svg-icon--active': location.pathname === '/notifications',
'svg-icon--unread': notificationCount > 0,
})}
count={notificationCount}
/>
<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />

7
app/soapbox/components/thumb_navigation.js
View file

@ -56,8 +56,11 @@ class ThumbNavigation extends React.PureComponent {
{account && (
<NavLink to='/notifications' className='thumb-navigation__link'>
<IconWithCounter
src={notificationCount > 0 ? require('@tabler/icons/icons/bell-ringing-2.svg') : require('@tabler/icons/icons/bell.svg')}
className={classNames({ 'svg-icon--active': location.pathname === '/notifications' })}
src={require('@tabler/icons/icons/bell.svg')}
className={classNames({
'svg-icon--active': location.pathname === '/notifications',
'svg-icon--unread': notificationCount > 0,
})}
count={notificationCount}
/>
<span>

8
app/styles/components/icon.scss
View file

@ -4,11 +4,13 @@
display: flex;
align-items: center;
justify-content: center;
transition: 0.2s;
svg {
// Apparently this won't skew the image as long as it has a viewbox
width: 100%;
height: 100%;
transition: 0.2s;
}
&--active {
@ -39,6 +41,12 @@
}
}
}
&--unread {
svg.icon-tabler-bell {
transform: rotate(45deg);
}
}
}
.icon-button > div {