moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Notifications: clean up styles

This commit is contained in:
Alex Gleason 2021-10-05 22:01:16 -05:00
parent d674d998e3
commit 42904dc82f
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
6 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/soapbox/components/column.js
View File

@ -1,18 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class Column extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
children: PropTypes.node,
label: PropTypes.string,
};
render() {
const { label, children } = this.props;
const { className, label, children } = this.props;
return (
<div role='region' aria-label={label} className='column'>
<div
role='region'
aria-label={label}
className={classNames('column', className)}
>
{children}
</div>
);

54
app/soapbox/features/notifications/components/notification.js
View File

@ -112,8 +112,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user-plus' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/user-plus.svg')} />
</div>
<span title={notification.get('created_at')}>
@ -134,8 +134,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='user' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/user.svg')} />
</div>
<span title={notification.get('created_at')}>
@ -151,18 +151,20 @@ class Notification extends ImmutablePureComponent {
renderMention(notification) {
return (
<StatusContainer
id={notification.get('status')}
withDismiss
hidden={this.props.hidden}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
/>
<div className='notification notification-mention' tabIndex='0'>
<StatusContainer
id={notification.get('status')}
withDismiss
hidden={this.props.hidden}
onMoveDown={this.handleMoveDown}
onMoveUp={this.handleMoveUp}
contextType='notifications'
getScrollPosition={this.props.getScrollPosition}
updateScrollBottom={this.props.updateScrollBottom}
cachedMediaWidth={this.props.cachedMediaWidth}
cacheMediaWidth={this.props.cacheMediaWidth}
/>
</div>
);
}
@ -173,8 +175,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-chat-mention focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.chat_mention', defaultMessage: '{name} sent you a message' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='comment' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/messages.svg')} />
</div>
<span title={notification.get('created_at')}>
@ -200,7 +202,7 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-emoji-react focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.pleroma:emoji_reaction', defaultMessage: '{name} reacted to your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<div className='notification__icon-wrapper'>
<span dangerouslySetInnerHTML={{ __html: emojify(emojify(notification.get('emoji'))) }} />
</div>
@ -232,8 +234,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} liked your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='thumbs-up' className='star-icon' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/thumb-up.svg')} />
</div>
<span title={notification.get('created_at')}>
@ -264,7 +266,7 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} reposted your post' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<div className='notification__icon-wrapper'>
<Icon src={require('feather-icons/dist/icons/repeat.svg')} />
</div>
@ -296,8 +298,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-poll focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.poll', defaultMessage: 'A poll you have voted in has ended' }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='tasks' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/chart-bar.svg')} />
</div>
<span title={notification.get('created_at')}>
@ -330,8 +332,8 @@ class Notification extends ImmutablePureComponent {
<HotKeys handlers={this.getHandlers()}>
<div className='notification notification-move focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.move', defaultMessage: '{name} moved to {targetName}' }, { name: account.get('acct'), targetName: targetAccount.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'>
<div className='notification__favourite-icon-wrapper'>
<Icon id='suitcase' fixedWidth />
<div className='notification__icon-wrapper'>
<Icon src={require('@tabler/icons/icons/briefcase.svg')} />
</div>
<span title={notification.get('created_at')}>

2
app/soapbox/features/notifications/index.js
View File

@ -179,7 +179,7 @@ class Notifications extends React.PureComponent {
);
return (
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)}>
<Column ref={this.setColumnRef} label={intl.formatMessage(messages.title)} className='column--notifications'>
<ColumnHeader icon='bell' active={isUnread} title={intl.formatMessage(messages.title)}>
<ColumnSettingsContainer />
</ColumnHeader>

11
app/styles/components/emoji-reacts.scss
View File

@ -25,14 +25,13 @@
vertical-align: middle;
display: inline-flex;
i.fa {
color: var(--highlight-text-color);
font-size: 20px;
margin-right: 0.2em;
}
.svg-icon {
margin-right: 0.2em;
color: var(--highlight-text-color);
svg {
stroke-width: 3px;
}
}
}

40
app/styles/components/notification.scss
View File

@ -1,3 +1,12 @@
.notification {
border-bottom: 1px solid var(--brand-color--med);
padding: 10px 0;
}
.notification-mention {
padding: 15px 0;
}
.notification-favourite {
.status.status-direct {
background: transparent;
@ -28,12 +37,22 @@
}
}
.notification__favourite-icon-wrapper {
.notification__icon-wrapper {
left: -26px;
position: absolute;
.star-icon {
color: $gold-star;
.svg-icon {
width: 20px;
height: 20px;
color: var(--highlight-text-color);
svg.icon-tabler-thumb-up {
color: $gold-star;
}
svg.feather-repeat {
color: var(--highlight-text-color);
}
}
}
@ -55,3 +74,18 @@
.notification .status__wrapper {
box-shadow: none;
}
.notification {
.status-container {
padding: 0;
}
.status__wrapper {
border-radius: 0;
padding: 0;
}
.status {
padding-bottom: 8px !important;
}
}

1
app/styles/ui.scss
View File

@ -444,6 +444,7 @@
flex: 1 1 auto;
position: relative;
min-height: 120px;
padding: 30px 15px;
}
}