post/nas
1
0
Fork 0
forked from gitea/nas
Code Pull requests Activity

Add profile setup to onboarding in web UI (#27829)

Browse source
This commit is contained in:
Eugen Rochko 2023-11-15 12:13:53 +01:00 • committed by GitHub
parent d8074128f9
commit d67bd44ca1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 524 additions and 416 deletions
Download patch file Download diff file Expand all files Collapse all files

29
app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
View file

@ -1,29 +0,0 @@
import PropTypes from 'prop-types';
import { Fragment } from 'react';
import classNames from 'classnames';
import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
import { Icon } from 'mastodon/components/icon';
const ProgressIndicator = ({ steps, completed }) => (
<div className='onboarding__progress-indicator'>
{(new Array(steps)).fill().map((_, i) => (
<Fragment key={i}>
{i > 0 && <div className={classNames('onboarding__progress-indicator__line', { active: completed > i })} />}
<div className={classNames('onboarding__progress-indicator__step', { active: completed > i })}>
{completed > i && <Icon icon={CheckIcon} />}
</div>
</Fragment>
))}
</div>
);
ProgressIndicator.propTypes = {
steps: PropTypes.number.isRequired,
completed: PropTypes.number,
};
export default ProgressIndicator;

15
app/javascript/mastodon/features/onboarding/components/step.jsx
View file

@ -1,11 +1,13 @@
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
import { Icon } from 'mastodon/components/icon';
import { Icon } from 'mastodon/components/icon';
const Step = ({ label, description, icon, iconComponent, completed, onClick, href }) => {
export const Step = ({ label, description, icon, iconComponent, completed, onClick, href, to }) => {
const content = (
<>
<div className='onboarding__steps__item__icon'>
@ -29,6 +31,12 @@ const Step = ({ label, description, icon, iconComponent, completed, onClick, hre
{content}
</a>
);
} else if (to) {
return (
<Link to={to} className='onboarding__steps__item'>
{content}
</Link>
);
}
return (
@ -45,7 +53,6 @@ Step.propTypes = {
iconComponent: PropTypes.func,
completed: PropTypes.bool,
href: PropTypes.string,
to: PropTypes.string,
onClick: PropTypes.func,
};
export default Step;