kopia lustrzana https://gitlab.com/soapbox-pub/soapbox
Notifications: clean up styles
rodzic
d674d998e3
commit
42904dc82f
|
@ -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>
|
||||
);
|
||||
|
|
|
@ -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')}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -444,6 +444,7 @@
|
|||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
min-height: 120px;
|
||||
padding: 30px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Ładowanie…
Reference in New Issue