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

Placeholder: display placeholders for Notifications, refactor scss

This commit is contained in:
Alex Gleason 2021-10-12 14:00:01 -05:00
parent 7f1613dd20
commit f808ac6786
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
8 changed files with 114 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@ import ScrollableList from '../../components/scrollable_list';
import LoadGap from '../../components/load_gap';
import TimelineQueueButtonHeader from '../../components/timeline_queue_button_header';
import { getSettings } from 'soapbox/actions/settings';
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
const messages = defineMessages({
title: { id: 'column.notifications', defaultMessage: 'Notifications' },
@ -170,6 +171,8 @@ class Notifications extends React.PureComponent {
showLoading={isLoading && notifications.size === 0}
hasMore={hasMore}
emptyMessage={emptyMessage}
placeholderComponent={PlaceholderNotification}
placeholderCount={20}
onLoadMore={this.handleLoadOlder}
onScrollToTop={this.handleScrollToTop}
onScroll={this.handleScroll}

22
app/soapbox/features/placeholder/components/placeholder_account.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import PlaceholderAvatar from './placeholder_avatar';
import PlaceholderDisplayName from './placeholder_display_name';
export default class PlaceholderAccount extends React.Component {
render() {
return (
<div className='account'>
<div className='account__wrapper'>
<span className='account__display-name'>
<div className='account__avatar-wrapper'>
<PlaceholderAvatar size={36} />
</div>
<PlaceholderDisplayName minLength={3} maxLength={25} />
</span>
</div>
</div>
);
}
}

4
app/soapbox/features/placeholder/components/placeholder_display_name.js
View File

@ -12,14 +12,16 @@ export default class DisplayName extends React.Component {
render() {
const { maxLength, minLength } = this.props;
const length = randomIntFromInterval(maxLength, minLength);
const acctLength = randomIntFromInterval(maxLength, minLength);
return (
<span className='display-name'>
<span className='display-name display-name--placeholder'>
<span>
<span className='display-name__name'>
<bdi><strong className='display-name__html'>{generateText(length)}</strong></bdi>
</span>
</span>
<span class='display-name__account'>{generateText(acctLength)}</span>
</span>
);
}

27
app/soapbox/features/placeholder/components/placeholder_notification.js Normal file
View File

@ -0,0 +1,27 @@
import React from 'react';
import PlaceholderAccount from './placeholder_account';
import { randomIntFromInterval, generateText } from '../utils';
export default class PlaceholderNotification extends React.Component {
shouldComponentUpdate() {
// Re-rendering this will just cause the random lengths to jump around.
// There's basically no reason to ever do it.
return false;
}
render() {
return (
<div className='notification notification-follow notification--placeholder' tabIndex='0'>
<div className='notification__message'>
<span>
{generateText(randomIntFromInterval(15, 30))}
</span>
</div>
<PlaceholderAccount />
</div>
);
}
}

2
app/soapbox/features/placeholder/components/placeholder_status_content.js
View File

@ -14,7 +14,7 @@ export default class PlaceholderStatusContent extends React.Component {
const length = randomIntFromInterval(maxLength, minLength);
return(
<div className='status__content' tabIndex='0' key='content'>
<div className='status__content status__content--placeholder' tabIndex='0' key='content'>
{generateText(length)}
</div>
);

1
app/styles/application.scss
View File

@ -29,6 +29,7 @@
@import 'demetricator';
@import 'chats';
@import 'navigation';
@import 'placeholder';
// COMPONENTS
@import 'components/buttons';

40
app/styles/basics.scss
View File

@ -204,43 +204,3 @@ noscript {
.greentext {
color: #789922;
}
.placeholder-status {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
90deg,
hsla(var(--foreground-color_hsl), 0) 0%,
hsla(var(--foreground-color_hsl), 0) 25%,
var(--foreground-color) 50%,
hsla(var(--foreground-color_hsl), 0) 70%,
hsla(var(--foreground-color_hsl), 0) 100%
);
background-size: 200%;
animation: placeholder-pulse 2s infinite;
z-index: 1;
opacity: 0.9;
}
.status__display-name strong,
.status__content {
letter-spacing: -1px;
color: var(--brand-color);
opacity: 0.1;
}
}
@keyframes placeholder-pulse {
0% { background-position-x: 200%; }
100% { background-position-x: 0; }
}

57
app/styles/placeholder.scss Normal file
View File

@ -0,0 +1,57 @@
.placeholder-status,
.notification--placeholder {
position: relative;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(
90deg,
hsla(var(--foreground-color_hsl), 0) 0%,
hsla(var(--foreground-color_hsl), 0) 25%,
var(--foreground-color) 50%,
hsla(var(--foreground-color_hsl), 0) 70%,
hsla(var(--foreground-color_hsl), 0) 100%
);
background-size: 200%;
animation: placeholder-pulse 2s infinite;
z-index: 1;
opacity: 0.9;
}
}
.placeholder-status .display-name__account {
display: none;
}
@keyframes placeholder-pulse {
0% { background-position-x: 200%; }
100% { background-position-x: 0; }
}
.notification--placeholder {
.notification__message span {
color: var(--brand-color);
opacity: 0.1;
}
}
.status__content--placeholder,
.display-name--placeholder {
letter-spacing: -1px;
color: var(--brand-color) !important;
opacity: 0.1;
}
.display-name--placeholder {
.display-name__html {
color: var(--brand-color) !important;
}
}