matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'next' into 'next'

Browse Source 
next

See merge request soapbox-pub/soapbox-fe!1250
This commit is contained in:
Alex Gleason
2022-04-22 21:12:22 +00:00
parent 0a1cc033af 8f848877a0
commit 942027bbd9
15 changed files with 162 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/soapbox/components/list.js
View File

@ -5,7 +5,6 @@ import { v4 as uuidv4 } from 'uuid';
import Icon from './icon';
const List = ({ children }) => (
<div className='space-y-0.5'>{children}</div>
);

33
app/soapbox/components/load_more.js
View File

@ -1,33 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Button } from 'soapbox/components/ui';
export default class LoadMore extends React.PureComponent {
static propTypes = {
onClick: PropTypes.func,
disabled: PropTypes.bool,
visible: PropTypes.bool,
}
static defaultProps = {
visible: true,
}
render() {
const { disabled, visible } = this.props;
if (!visible) {
return null;
}
return (
<Button theme='secondary' block disabled={disabled || !visible} onClick={this.props.onClick}>
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
</Button>
);
}
}

24
app/soapbox/components/load_more.tsx Normal file
View File

@ -0,0 +1,24 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Button } from 'soapbox/components/ui';
interface ILoadMore {
onClick: () => void,
disabled?: boolean,
visible?: Boolean,
}
const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {
if (!visible) {
return null;
}
return (
<Button theme='secondary' block disabled={disabled || !visible} onClick={onClick}>
<FormattedMessage id='status.load_more' defaultMessage='Load more' />
</Button>
);
};
export default LoadMore;

68
app/soapbox/components/more_follows.js
View File

@ -1,68 +0,0 @@
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { getFeatures } from 'soapbox/utils/features';
const messages = defineMessages({
following: {
id: 'morefollows.following_label',
defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
},
followers: {
id: 'morefollows.followers_label',
defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
},
});
const mapStateToProps = state => {
const instance = state.get('instance');
return {
features: getFeatures(instance),
};
};
export default @connect(mapStateToProps)
@injectIntl
class MoreFollows extends React.PureComponent {
static propTypes = {
visible: PropTypes.bool,
count: PropTypes.number,
type: PropTypes.string,
intl: PropTypes.object.isRequired,
features: PropTypes.object.isRequired,
}
static defaultProps = {
visible: true,
}
getMessage = () => {
const { type, count, intl } = this.props;
return intl.formatMessage(messages[type], { count });
}
render() {
const { features } = this.props;
// If the instance isn't federating, there are no remote followers
if (!features.federating) {
return null;
}
return (
<div className='morefollows-indicator'>
<div>
<div className='morefollows-indicator__label' style={{ visibility: this.props.visible ? 'visible' : 'hidden' }}>
{this.getMessage()}
</div>
</div>
</div>
);
}
}

49
app/soapbox/components/more_follows.tsx Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
import { useAppSelector } from 'soapbox/hooks';
import { getFeatures } from 'soapbox/utils/features';
const messages = defineMessages({
following: {
id: 'morefollows.following_label',
defaultMessage: '…and {count} more {count, plural, one {follow} other {follows}} on remote sites.',
},
followers: {
id: 'morefollows.followers_label',
defaultMessage: '…and {count} more {count, plural, one {follower} other {followers}} on remote sites.',
},
});
interface IMoreFollows {
visible?: Boolean,
count?: number,
type: 'following' | 'followers',
}
const MoreFollows: React.FC<IMoreFollows> = ({ visible = true, count, type }) => {
const intl = useIntl();
const features = useAppSelector((state) => getFeatures(state.instance));
const getMessage = () => {
return intl.formatMessage(messages[type], { count });
};
// If the instance isn't federating, there are no remote followers
if (!features.federating) {
return null;
}
return (
<div className='morefollows-indicator'>
<div>
<div className='morefollows-indicator__label' style={{ visibility: visible ? 'visible' : 'hidden' }}>
{getMessage()}
</div>
</div>
</div>
);
};
export default MoreFollows;

17
app/soapbox/components/progress_bar.js
View File

@ -1,17 +0,0 @@
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
export default class ProgressBar extends ImmutablePureComponent {
render() {
const { progress } = this.props;
return (
<div className='progress-bar'>
<div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
</div>
);
}
}

13
app/soapbox/components/progress_bar.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react';
interface IProgressBar {
progress: number,
}
const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
<div className='progress-bar'>
<div className='progress-bar__progress' style={{ width: `${Math.floor(progress*100)}%` }} />
</div>
);
export default ProgressBar;

62
app/soapbox/components/progress_circle.js
View File

@ -1,62 +0,0 @@
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
export default class ProgressCircle extends React.PureComponent {
static propTypes = {
progress: PropTypes.number.isRequired,
radius: PropTypes.number,
stroke: PropTypes.number,
title: PropTypes.string,
};
static defaultProps = {
radius: 12,
stroke: 4,
}
render() {
const { progress, radius, stroke, title } = this.props;
const progressStroke = stroke + 0.5;
const actualRadius = radius + progressStroke;
const circumference = 2 * Math.PI * radius;
const dashoffset = circumference * (1 - Math.min(progress, 1));
return (
<div title={title}>
<svg
width={actualRadius * 2}
height={actualRadius * 2}
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
>
<circle
className='stroke-gray-400'
cx={actualRadius}
cy={actualRadius}
r={radius}
fill='none'
strokeWidth={stroke}
/>
<circle
className={classNames('stroke-primary-800', {
'stroke-danger-600': progress > 1,
})}
style={{
strokeDashoffset: dashoffset,
strokeDasharray: circumference,
}}
cx={actualRadius}
cy={actualRadius}
r={radius}
fill='none'
strokeWidth={progressStroke}
strokeLinecap='round'
/>
</svg>
</div>
);
}
}

52
app/soapbox/components/progress_circle.tsx Normal file
View File

@ -0,0 +1,52 @@
import classNames from 'classnames';
import React from 'react';
interface IProgressCircle {
progress: number,
radius?: number,
stroke?: number,
title?: string,
}
const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stroke = 4, title }) => {
const progressStroke = stroke + 0.5;
const actualRadius = radius + progressStroke;
const circumference = 2 * Math.PI * radius;
const dashoffset = circumference * (1 - Math.min(progress, 1));
return (
<div title={title}>
<svg
width={actualRadius * 2}
height={actualRadius * 2}
viewBox={`0 0 ${actualRadius * 2} ${actualRadius * 2}`}
>
<circle
className='stroke-gray-400'
cx={actualRadius}
cy={actualRadius}
r={radius}
fill='none'
strokeWidth={stroke}
/>
<circle
className={classNames('stroke-primary-800', {
'stroke-danger-600': progress > 1,
})}
style={{
strokeDashoffset: dashoffset,
strokeDasharray: circumference,
}}
cx={actualRadius}
cy={actualRadius}
r={radius}
fill='none'
strokeWidth={progressStroke}
strokeLinecap='round'
/>
</svg>
</div>
);
};
export default ProgressCircle;

6
app/soapbox/features/onboarding/onboarding-wizard.tsx
View File

@ -68,13 +68,13 @@ const OnboardingWizard = () => {
return (
<div data-testid='onboarding-wizard'>
<div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-cyan-50' />
<div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
<main className='h-screen flex flex-col'>
<main className='h-screen flex flex-col overflow-x-hidden'>
<div className='flex flex-col justify-center items-center h-full'>
<ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
{steps.map((step, i) => (
<div key={i} className='py-6 sm:mx-auto w-full sm:max-w-lg md:max-w-2xl'>
<div key={i} className='py-6 sm:mx-auto w-full max-w-[100vw] sm:max-w-lg md:max-w-2xl'>
<div
className={classNames({
'transition-opacity ease-linear': true,

2
app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
View File

@ -114,7 +114,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
<Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}

4
app/soapbox/features/onboarding/steps/bio-step.tsx
View File

@ -65,7 +65,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
>
<Textarea
onChange={(event) => setValue(event.target.value)}
placeholder='Tell the world a little about yourself...'
placeholder='Tell the world a little about yourself…'
value={value}
maxLength={500}
/>
@ -82,7 +82,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
onClick={handleSubmit}
>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}

2
app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
View File

@ -135,7 +135,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
<Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? 'Saving...' : 'Next'}
{isSubmitting ? 'Saving…' : 'Next'}
</Button>
{isDisabled && (

2
app/soapbox/features/onboarding/steps/display-name-step.tsx
View File

@ -87,7 +87,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
disabled={isDisabled || isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? 'Saving...' : 'Next'}
{isSubmitting ? 'Saving…' : 'Next'}
</Button>
<Button block theme='link' type='button' onClick={onNext}>

16
app/soapbox/locales/pl.json
View File

@ -536,8 +536,10 @@
"header.back_to.label": "Wróć na {siteTitle}",
"header.home.label": "Strona główna",
"header.login.email.placeholder": "Adres e-mail",
"header.login.forgot_password": "Nie pamiętasz hasła?",
"header.login.label": "Zaloguj się",
"header.login.password.label": "Hasło",
"header.login.username.placeholder": "Nazwa użytkownika lub e-mail",
"header.register.label": "Rejestracja",
"home.column_settings.show_direct": "Pokazuj wiadomości bezpośrednie",
"home.column_settings.show_reblogs": "Pokazuj podbicia",
@ -746,6 +748,20 @@
"notifications.filter.statuses": "Nowe wpisy osób, które subskrybujesz",
"notifications.group": "{count, number} {count, plural, one {powiadomienie} few {powiadomienia} many {powiadomień} more {powiadomień}}",
"notifications.queue_label": "Naciśnij aby zobaczyć {count} {count, plural, one {nowe powiadomienie} few {nowe powiadomienia} many {nowych powiadomień} other {nowe powiadomienia}}",
"onboarding.avatar.title": "Wybierz zdjęcie profilowe",
"onboarding.display_name.subtitle": "Możesz ją zawsze zmienić później.",
"onboarding.display_name.title": "Wybierz wyświetlaną nazwę",
"onboarding.finished.message": "Cieszymy się, że możemy powitać Cię w naszej społeczności! Naciśnij poniższy przycisk, aby rozpocząć.",
"onboarding.header.subtitle": "Będzie widoczny w górnej części Twojego profilu",
"onboarding.header.title": "Wybierz obraz tła",
"onboarding.next": "Dalej",
"onboarding.note.subtitle": "Możesz go zawsze edytować później",
"onboarding.note.title": "Napisz krótki opis",
"onboarding.saving": "Zapisywanie…",
"onboarding.skip": "Na razie pomiń",
"onboarding.suggestions.subtitle": "Oto kilka najbardziej popularnych kont, które mogą Ci się spodobać.",
"onboarding.suggestions.title": "Proponowane konta",
"onboarding.view_feed": "Pokaż strumień",
"password_reset.confirmation": "Sprawdź swoją pocztę e-mail, aby potwierdzić.",
"password_reset.fields.username_placeholder": "Adres e-mail lub nazwa użytkownika",
"password_reset.header": "Resetowanie hasła",