From d67bd44ca1542d665354e733b632c841b6b7d29b Mon Sep 17 00:00:00 2001
From: Eugen Rochko <eugen@zeonfederated.com>
Date: Wed, 15 Nov 2023 12:13:53 +0100
Subject: [PATCH] Add profile setup to onboarding in web UI (#27829)
---
.../api/v1/accounts/credentials_controller.rb | 2 +
app/javascript/mastodon/actions/accounts.js | 15 ++
app/javascript/mastodon/api_types/accounts.ts | 1 +
.../mastodon/components/admin/Retention.jsx | 2 +-
.../mastodon/components/loading_indicator.tsx | 26 ++-
.../components/progress_indicator.jsx | 29 ---
.../features/onboarding/components/step.jsx | 15 +-
.../mastodon/features/onboarding/follows.jsx | 105 ++++------
.../mastodon/features/onboarding/index.jsx | 190 ++++++------------
.../mastodon/features/onboarding/profile.jsx | 162 +++++++++++++++
.../mastodon/features/onboarding/share.jsx | 100 ++++-----
app/javascript/mastodon/features/ui/index.jsx | 2 +-
app/javascript/mastodon/locales/en.json | 13 +-
app/javascript/mastodon/models/account.ts | 1 +
.../styles/mastodon/components.scss | 164 +++++----------
app/javascript/styles/mastodon/forms.scss | 105 ++++++++--
app/serializers/rest/account_serializer.rb | 6 +-
config/routes.rb | 2 +-
18 files changed, 524 insertions(+), 416 deletions(-)
delete mode 100644 app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
create mode 100644 app/javascript/mastodon/features/onboarding/profile.jsx
diff --git a/app/controllers/api/v1/accounts/credentials_controller.rb b/app/controllers/api/v1/accounts/credentials_controller.rb
index 76ba75824..8f31336b9 100644
--- a/app/controllers/api/v1/accounts/credentials_controller.rb
+++ b/app/controllers/api/v1/accounts/credentials_controller.rb
@@ -16,6 +16,8 @@ class Api::V1::Accounts::CredentialsController < Api::BaseController
current_user.update(user_params) if user_params
ActivityPub::UpdateDistributionWorker.perform_async(@account.id)
render json: @account, serializer: REST::CredentialAccountSerializer
+ rescue ActiveRecord::RecordInvalid => e
+ render json: ValidationErrorFormatter.new(e).as_json, status: 422
end
private
diff --git a/app/javascript/mastodon/actions/accounts.js b/app/javascript/mastodon/actions/accounts.js
index e0448f004..9f3bbba03 100644
--- a/app/javascript/mastodon/actions/accounts.js
+++ b/app/javascript/mastodon/actions/accounts.js
@@ -661,3 +661,18 @@ export function unpinAccountFail(error) {
error,
};
}
+
+export const updateAccount = ({ displayName, note, avatar, header, discoverable, indexable }) => (dispatch, getState) => {
+ const data = new FormData();
+
+ data.append('display_name', displayName);
+ data.append('note', note);
+ if (avatar) data.append('avatar', avatar);
+ if (header) data.append('header', header);
+ data.append('discoverable', discoverable);
+ data.append('indexable', indexable);
+
+ return api(getState).patch('/api/v1/accounts/update_credentials', data).then(response => {
+ dispatch(importFetchedAccount(response.data));
+ });
+};
diff --git a/app/javascript/mastodon/api_types/accounts.ts b/app/javascript/mastodon/api_types/accounts.ts
index 985abf946..5bf3e6428 100644
--- a/app/javascript/mastodon/api_types/accounts.ts
+++ b/app/javascript/mastodon/api_types/accounts.ts
@@ -20,6 +20,7 @@ export interface ApiAccountJSON {
bot: boolean;
created_at: string;
discoverable: boolean;
+ indexable: boolean;
display_name: string;
emojis: ApiCustomEmojiJSON[];
fields: ApiAccountFieldJSON[];
diff --git a/app/javascript/mastodon/components/admin/Retention.jsx b/app/javascript/mastodon/components/admin/Retention.jsx
index 2f5671068..1e8ef48b7 100644
--- a/app/javascript/mastodon/components/admin/Retention.jsx
+++ b/app/javascript/mastodon/components/admin/Retention.jsx
@@ -51,7 +51,7 @@ export default class Retention extends PureComponent {
let content;
if (loading) {
- content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading...' />;
+ content = <FormattedMessage id='loading_indicator.label' defaultMessage='Loading…' />;
} else {
content = (
<table className='retention__table'>
diff --git a/app/javascript/mastodon/components/loading_indicator.tsx b/app/javascript/mastodon/components/loading_indicator.tsx
index 6bc24a0d6..fcdbe80d8 100644
--- a/app/javascript/mastodon/components/loading_indicator.tsx
+++ b/app/javascript/mastodon/components/loading_indicator.tsx
@@ -1,7 +1,23 @@
+import { useIntl, defineMessages } from 'react-intl';
+
import { CircularProgress } from './circular_progress';
-export const LoadingIndicator: React.FC = () => (
- <div className='loading-indicator'>
- <CircularProgress size={50} strokeWidth={6} />
- </div>
-);
+const messages = defineMessages({
+ loading: { id: 'loading_indicator.label', defaultMessage: 'Loading…' },
+});
+
+export const LoadingIndicator: React.FC = () => {
+ const intl = useIntl();
+
+ return (
+ <div
+ className='loading-indicator'
+ role='progressbar'
+ aria-busy
+ aria-live='polite'
+ aria-label={intl.formatMessage(messages.loading)}
+ >
+ <CircularProgress size={50} strokeWidth={6} />
+ </div>
+ );
+};
diff --git a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx b/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
deleted file mode 100644
index 37288a286..000000000
--- a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
+++ /dev/null
@@ -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;
diff --git a/app/javascript/mastodon/features/onboarding/components/step.jsx b/app/javascript/mastodon/features/onboarding/components/step.jsx
index 1f42d9d49..1f83f2080 100644
--- a/app/javascript/mastodon/features/onboarding/components/step.jsx
+++ b/app/javascript/mastodon/features/onboarding/components/step.jsx
@@ -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;
diff --git a/app/javascript/mastodon/features/onboarding/follows.jsx b/app/javascript/mastodon/features/onboarding/follows.jsx
index e21c7c75b..e23a335c0 100644
--- a/app/javascript/mastodon/features/onboarding/follows.jsx
+++ b/app/javascript/mastodon/features/onboarding/follows.jsx
@@ -1,79 +1,62 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useEffect } from 'react';
import { FormattedMessage } from 'react-intl';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { useDispatch } from 'react-redux';
+
import { fetchSuggestions } from 'mastodon/actions/suggestions';
import { markAsPartial } from 'mastodon/actions/timelines';
-import Column from 'mastodon/components/column';
import { ColumnBackButton } from 'mastodon/components/column_back_button';
import { EmptyAccount } from 'mastodon/components/empty_account';
import Account from 'mastodon/containers/account_container';
+import { useAppSelector } from 'mastodon/store';
-const mapStateToProps = state => ({
- suggestions: state.getIn(['suggestions', 'items']),
- isLoading: state.getIn(['suggestions', 'isLoading']),
-});
+export const Follows = () => {
+ const dispatch = useDispatch();
+ const isLoading = useAppSelector(state => state.getIn(['suggestions', 'isLoading']));
+ const suggestions = useAppSelector(state => state.getIn(['suggestions', 'items']));
-class Follows extends PureComponent {
-
- static propTypes = {
- onBack: PropTypes.func,
- dispatch: PropTypes.func.isRequired,
- suggestions: ImmutablePropTypes.list,
- isLoading: PropTypes.bool,
- };
-
- componentDidMount () {
- const { dispatch } = this.props;
+ useEffect(() => {
dispatch(fetchSuggestions(true));
+
+ return () => {
+ dispatch(markAsPartial('home'));
+ };
+ }, [dispatch]);
+
+ let loadedContent;
+
+ if (isLoading) {
+ loadedContent = (new Array(8)).fill().map((_, i) => <EmptyAccount key={i} />);
+ } else if (suggestions.isEmpty()) {
+ loadedContent = <div className='follow-recommendations__empty'><FormattedMessage id='onboarding.follows.empty' defaultMessage='Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.' /></div>;
+ } else {
+ loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />);
}
- componentWillUnmount () {
- const { dispatch } = this.props;
- dispatch(markAsPartial('home'));
- }
+ return (
+ <>
+ <ColumnBackButton />
- render () {
- const { onBack, isLoading, suggestions } = this.props;
-
- let loadedContent;
-
- if (isLoading) {
- loadedContent = (new Array(8)).fill().map((_, i) => <EmptyAccount key={i} />);
- } else if (suggestions.isEmpty()) {
- loadedContent = <div className='follow-recommendations__empty'><FormattedMessage id='onboarding.follows.empty' defaultMessage='Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.' /></div>;
- } else {
- loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />);
- }
-
- return (
- <Column>
- <ColumnBackButton onClick={onBack} />
-
- <div className='scrollable privacy-policy'>
- <div className='column-title'>
- <h3><FormattedMessage id='onboarding.follows.title' defaultMessage='Popular on Mastodon' /></h3>
- <p><FormattedMessage id='onboarding.follows.lead' defaultMessage='You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!' /></p>
- </div>
-
- <div className='follow-recommendations'>
- {loadedContent}
- </div>
-
- <p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p>
-
- <div className='onboarding__footer'>
- <button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></button>
- </div>
+ <div className='scrollable privacy-policy'>
+ <div className='column-title'>
+ <h3><FormattedMessage id='onboarding.follows.title' defaultMessage='Popular on Mastodon' /></h3>
+ <p><FormattedMessage id='onboarding.follows.lead' defaultMessage='You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!' /></p>
</div>
- </Column>
- );
- }
-}
+ <div className='follow-recommendations'>
+ {loadedContent}
+ </div>
-export default connect(mapStateToProps)(Follows);
+ <p className='onboarding__lead'><FormattedMessage id='onboarding.tips.accounts_from_other_servers' defaultMessage='<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p>
+
+ <div className='onboarding__footer'>
+ <Link className='link-button' to='/start'><FormattedMessage id='onboarding.actions.back' defaultMessage='Take me back' /></Link>
+ </div>
+ </div>
+ </>
+ );
+};
diff --git a/app/javascript/mastodon/features/onboarding/index.jsx b/app/javascript/mastodon/features/onboarding/index.jsx
index 51d4b71f2..51677fbc7 100644
--- a/app/javascript/mastodon/features/onboarding/index.jsx
+++ b/app/javascript/mastodon/features/onboarding/index.jsx
@@ -1,152 +1,90 @@
-import PropTypes from 'prop-types';
+import { useCallback } from 'react';
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
+import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import { Helmet } from 'react-helmet';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, Switch, Route, useHistory } from 'react-router-dom';
+
+import { useDispatch } from 'react-redux';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
import { ReactComponent as AccountCircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
import { ReactComponent as EditNoteIcon } from '@material-symbols/svg-600/outlined/edit_note.svg';
import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
-import { debounce } from 'lodash';
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
-import { fetchAccount } from 'mastodon/actions/accounts';
import { focusCompose } from 'mastodon/actions/compose';
-import { closeOnboarding } from 'mastodon/actions/onboarding';
import { Icon } from 'mastodon/components/icon';
import Column from 'mastodon/features/ui/components/column';
import { me } from 'mastodon/initial_state';
-import { makeGetAccount } from 'mastodon/selectors';
+import { useAppSelector } from 'mastodon/store';
import { assetHost } from 'mastodon/utils/config';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-import Step from './components/step';
-import Follows from './follows';
-import Share from './share';
+import { Step } from './components/step';
+import { Follows } from './follows';
+import { Profile } from './profile';
+import { Share } from './share';
const messages = defineMessages({
template: { id: 'onboarding.compose.template', defaultMessage: 'Hello #Mastodon!' },
});
-const mapStateToProps = () => {
- const getAccount = makeGetAccount();
+const Onboarding = () => {
+ const account = useAppSelector(state => state.getIn(['accounts', me]));
+ const dispatch = useDispatch();
+ const intl = useIntl();
+ const history = useHistory();
- return state => ({
- account: getAccount(state, me),
- });
+ const handleComposeClick = useCallback(() => {
+ dispatch(focusCompose(history, intl.formatMessage(messages.template)));
+ }, [dispatch, intl, history]);
+
+ return (
+ <Column>
+ <Switch>
+ <Route path='/start' exact>
+ <div className='scrollable privacy-policy'>
+ <div className='column-title'>
+ <img src={illustration} alt='' className='onboarding__illustration' />
+ <h3><FormattedMessage id='onboarding.start.title' defaultMessage="You've made it!" /></h3>
+ <p><FormattedMessage id='onboarding.start.lead' defaultMessage="Your new Mastodon account is ready to go. Here's how you can make the most of it:" /></p>
+ </div>
+
+ <div className='onboarding__steps'>
+ <Step to='/start/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' iconComponent={AccountCircleIcon} label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
+ <Step to='/start/follows' completed={(account.get('following_count') * 1) >= 1} icon='user-plus' iconComponent={PersonAddIcon} label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
+ <Step onClick={handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' iconComponent={EditNoteIcon} label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
+ <Step to='/start/share' icon='copy' iconComponent={ContentCopyIcon} label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
+ </div>
+
+ <p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>
+
+ <div className='onboarding__links'>
+ <Link to='/explore' className='onboarding__link'>
+ <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
+ <Icon icon={ArrowRightAltIcon} />
+ </Link>
+
+ <Link to='/home' className='onboarding__link'>
+ <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
+ <Icon icon={ArrowRightAltIcon} />
+ </Link>
+ </div>
+ </div>
+ </Route>
+
+ <Route path='/start/profile' component={Profile} />
+ <Route path='/start/follows' component={Follows} />
+ <Route path='/start/share' component={Share} />
+ </Switch>
+
+ <Helmet>
+ <meta name='robots' content='noindex' />
+ </Helmet>
+ </Column>
+ );
};
-class Onboarding extends ImmutablePureComponent {
- static propTypes = {
- dispatch: PropTypes.func.isRequired,
- account: ImmutablePropTypes.record,
- ...WithRouterPropTypes,
- };
-
- state = {
- step: null,
- profileClicked: false,
- shareClicked: false,
- };
-
- handleClose = () => {
- const { dispatch, history } = this.props;
-
- dispatch(closeOnboarding());
- history.push('/home');
- };
-
- handleProfileClick = () => {
- this.setState({ profileClicked: true });
- };
-
- handleFollowClick = () => {
- this.setState({ step: 'follows' });
- };
-
- handleComposeClick = () => {
- const { dispatch, intl, history } = this.props;
-
- dispatch(focusCompose(history, intl.formatMessage(messages.template)));
- };
-
- handleShareClick = () => {
- this.setState({ step: 'share', shareClicked: true });
- };
-
- handleBackClick = () => {
- this.setState({ step: null });
- };
-
- handleWindowFocus = debounce(() => {
- const { dispatch, account } = this.props;
- dispatch(fetchAccount(account.get('id')));
- }, 1000, { trailing: true });
-
- componentDidMount () {
- window.addEventListener('focus', this.handleWindowFocus, false);
- }
-
- componentWillUnmount () {
- window.removeEventListener('focus', this.handleWindowFocus);
- }
-
- render () {
- const { account } = this.props;
- const { step, shareClicked } = this.state;
-
- switch(step) {
- case 'follows':
- return <Follows onBack={this.handleBackClick} />;
- case 'share':
- return <Share onBack={this.handleBackClick} />;
- }
-
- return (
- <Column>
- <div className='scrollable privacy-policy'>
- <div className='column-title'>
- <img src={illustration} alt='' className='onboarding__illustration' />
- <h3><FormattedMessage id='onboarding.start.title' defaultMessage="You've made it!" /></h3>
- <p><FormattedMessage id='onboarding.start.lead' defaultMessage="Your new Mastodon account is ready to go. Here's how you can make the most of it:" /></p>
- </div>
-
- <div className='onboarding__steps'>
- <Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' iconComponent={AccountCircleIcon} label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
- <Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' iconComponent={PersonAddIcon} label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
- <Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' iconComponent={EditNoteIcon} label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
- <Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' iconComponent={ContentCopyIcon} label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
- </div>
-
- <p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>
-
- <div className='onboarding__links'>
- <Link to='/explore' className='onboarding__link'>
- <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
- <Icon icon={ArrowRightAltIcon} />
- </Link>
-
- <Link to='/home' className='onboarding__link'>
- <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
- <Icon icon={ArrowRightAltIcon} />
- </Link>
- </div>
- </div>
-
- <Helmet>
- <meta name='robots' content='noindex' />
- </Helmet>
- </Column>
- );
- }
-
-}
-
-export default withRouter(connect(mapStateToProps)(injectIntl(Onboarding)));
+export default Onboarding;
diff --git a/app/javascript/mastodon/features/onboarding/profile.jsx b/app/javascript/mastodon/features/onboarding/profile.jsx
new file mode 100644
index 000000000..19ba0bcb9
--- /dev/null
+++ b/app/javascript/mastodon/features/onboarding/profile.jsx
@@ -0,0 +1,162 @@
+import { useState, useMemo, useCallback, createRef } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { useDispatch } from 'react-redux';
+
+
+import { ReactComponent as AddPhotoAlternateIcon } from '@material-symbols/svg-600/outlined/add_photo_alternate.svg';
+import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg';
+import Toggle from 'react-toggle';
+
+import { updateAccount } from 'mastodon/actions/accounts';
+import { Button } from 'mastodon/components/button';
+import { ColumnBackButton } from 'mastodon/components/column_back_button';
+import { Icon } from 'mastodon/components/icon';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { me } from 'mastodon/initial_state';
+import { useAppSelector } from 'mastodon/store';
+import { unescapeHTML } from 'mastodon/utils/html';
+
+const messages = defineMessages({
+ uploadHeader: { id: 'onboarding.profile.upload_header', defaultMessage: 'Upload profile header' },
+ uploadAvatar: { id: 'onboarding.profile.upload_avatar', defaultMessage: 'Upload profile picture' },
+});
+
+export const Profile = () => {
+ const account = useAppSelector(state => state.getIn(['accounts', me]));
+ const [displayName, setDisplayName] = useState(account.get('display_name'));
+ const [note, setNote] = useState(unescapeHTML(account.get('note')));
+ const [avatar, setAvatar] = useState(null);
+ const [header, setHeader] = useState(null);
+ const [discoverable, setDiscoverable] = useState(account.get('discoverable'));
+ const [indexable, setIndexable] = useState(account.get('indexable'));
+ const [isSaving, setIsSaving] = useState(false);
+ const [errors, setErrors] = useState();
+ const avatarFileRef = createRef();
+ const headerFileRef = createRef();
+ const dispatch = useDispatch();
+ const intl = useIntl();
+ const history = useHistory();
+
+ const handleDisplayNameChange = useCallback(e => {
+ setDisplayName(e.target.value);
+ }, [setDisplayName]);
+
+ const handleNoteChange = useCallback(e => {
+ setNote(e.target.value);
+ }, [setNote]);
+
+ const handleDiscoverableChange = useCallback(e => {
+ setDiscoverable(e.target.checked);
+ }, [setDiscoverable]);
+
+ const handleIndexableChange = useCallback(e => {
+ setIndexable(e.target.checked);
+ }, [setIndexable]);
+
+ const handleAvatarChange = useCallback(e => {
+ setAvatar(e.target?.files?.[0]);
+ }, [setAvatar]);
+
+ const handleHeaderChange = useCallback(e => {
+ setHeader(e.target?.files?.[0]);
+ }, [setHeader]);
+
+ const avatarPreview = useMemo(() => avatar ? URL.createObjectURL(avatar) : account.get('avatar'), [avatar, account]);
+ const headerPreview = useMemo(() => header ? URL.createObjectURL(header) : account.get('header'), [header, account]);
+
+ const handleSubmit = useCallback(() => {
+ setIsSaving(true);
+
+ dispatch(updateAccount({
+ displayName,
+ note,
+ avatar,
+ header,
+ discoverable,
+ indexable,
+ })).then(() => history.push('/start/follows')).catch(err => {
+ setIsSaving(false);
+ setErrors(err.response.data.details);
+ });
+ }, [dispatch, displayName, note, avatar, header, discoverable, indexable, history]);
+
+ return (
+ <>
+ <ColumnBackButton />
+
+ <div className='scrollable privacy-policy'>
+ <div className='column-title'>
+ <h3><FormattedMessage id='onboarding.profile.title' defaultMessage='Profile setup' /></h3>
+ <p><FormattedMessage id='onboarding.profile.lead' defaultMessage='You can always complete this later in the settings, where even more customization options are available.' /></p>
+ </div>
+
+ <div className='simple_form'>
+ <div className='onboarding__profile'>
+ <label className={classNames('app-form__header-input', { selected: !!headerPreview, invalid: !!errors?.header })} title={intl.formatMessage(messages.uploadHeader)}>
+ <input
+ type='file'
+ hidden
+ ref={headerFileRef}
+ accept='image/*'
+ onChange={handleHeaderChange}
+ />
+
+ {headerPreview && <img src={headerPreview} alt='' />}
+
+ <Icon icon={headerPreview ? EditIcon : AddPhotoAlternateIcon} />
+ </label>
+
+ <label className={classNames('app-form__avatar-input', { selected: !!avatarPreview, invalid: !!errors?.avatar })} title={intl.formatMessage(messages.uploadAvatar)}>
+ <input
+ type='file'
+ hidden
+ ref={avatarFileRef}
+ accept='image/*'
+ onChange={handleAvatarChange}
+ />
+
+ {avatarPreview && <img src={avatarPreview} alt='' />}
+
+ <Icon icon={avatarPreview ? EditIcon : AddPhotoAlternateIcon} />
+ </label>
+ </div>
+
+ <div className={classNames('input with_block_label', { field_with_errors: !!errors?.display_name })}>
+ <label htmlFor='display_name'><FormattedMessage id='onboarding.profile.display_name' defaultMessage='Display name' /></label>
+ <span className='hint'><FormattedMessage id='onboarding.profile.display_name_hint' defaultMessage='Your full name or your fun name…' /></span>
+ <div className='label_input'>
+ <input id='display_name' type='text' value={displayName} onChange={handleDisplayNameChange} maxLength={30} />
+ </div>
+ </div>
+
+ <div className={classNames('input with_block_label', { field_with_errors: !!errors?.note })}>
+ <label htmlFor='note'><FormattedMessage id='onboarding.profile.note' defaultMessage='Bio' /></label>
+ <span className='hint'><FormattedMessage id='onboarding.profile.note_hint' defaultMessage='You can @mention other people or #hashtags…' /></span>
+ <div className='label_input'>
+ <textarea id='note' value={note} onChange={handleNoteChange} maxLength={500} />
+ </div>
+ </div>
+ </div>
+
+ <label className='report-dialog-modal__toggle'>
+ <Toggle checked={discoverable} onChange={handleDiscoverableChange} />
+ <FormattedMessage id='onboarding.profile.discoverable' defaultMessage='Feature profile and posts in discovery algorithms' />
+ </label>
+
+ <label className='report-dialog-modal__toggle'>
+ <Toggle checked={indexable} onChange={handleIndexableChange} />
+ <FormattedMessage id='onboarding.profile.indexable' defaultMessage='Include public posts in search results' />
+ </label>
+
+ <div className='onboarding__footer'>
+ <Button block onClick={handleSubmit} disabled={isSaving}>{isSaving ? <LoadingIndicator /> : <FormattedMessage id='onboarding.profile.save_and_continue' defaultMessage='Save and continue' />}</Button>
+ </div>
+ </div>
+ </>
+ );
+};
diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx
index 334924422..adc0f9cba 100644
--- a/app/javascript/mastodon/features/onboarding/share.jsx
+++ b/app/javascript/mastodon/features/onboarding/share.jsx
@@ -1,31 +1,25 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
import SwipeableViews from 'react-swipeable-views';
-import Column from 'mastodon/components/column';
import { ColumnBackButton } from 'mastodon/components/column_back_button';
import { Icon } from 'mastodon/components/icon';
import { me, domain } from 'mastodon/initial_state';
+import { useAppSelector } from 'mastodon/store';
const messages = defineMessages({
shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
});
-const mapStateToProps = state => ({
- account: state.getIn(['accounts', me]),
-});
-
class CopyPasteText extends PureComponent {
static propTypes = {
@@ -141,59 +135,47 @@ class TipCarousel extends PureComponent {
}
-class Share extends PureComponent {
+export const Share = () => {
+ const account = useAppSelector(state => state.getIn(['accounts', me]));
+ const intl = useIntl();
+ const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
- static propTypes = {
- onBack: PropTypes.func,
- account: ImmutablePropTypes.record,
- intl: PropTypes.object,
- };
+ return (
+ <>
+ <ColumnBackButton />
- render () {
- const { onBack, account, intl } = this.props;
-
- const url = (new URL(`/@${account.get('username')}`, document.baseURI)).href;
-
- return (
- <Column>
- <ColumnBackButton onClick={onBack} />
-
- <div className='scrollable privacy-policy'>
- <div className='column-title'>
- <h3><FormattedMessage id='onboarding.share.title' defaultMessage='Share your profile' /></h3>
- <p><FormattedMessage id='onboarding.share.lead' defaultMessage='Let people know how they can find you on Mastodon!' /></p>
- </div>
-
- <CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} />
-
- <TipCarousel>
- <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
- <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain, strong: chunks => <strong>{chunks}</strong> }} /></p></div>
- <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
- </TipCarousel>
-
- <p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p>
-
- <div className='onboarding__links'>
- <Link to='/home' className='onboarding__link'>
- <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
- <Icon icon={ArrowRightAltIcon} />
- </Link>
-
- <Link to='/explore' className='onboarding__link'>
- <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
- <Icon icon={ArrowRightAltIcon} />
- </Link>
- </div>
-
- <div className='onboarding__footer'>
- <button className='link-button' onClick={onBack}><FormattedMessage id='onboarding.action.back' defaultMessage='Take me back' /></button>
- </div>
+ <div className='scrollable privacy-policy'>
+ <div className='column-title'>
+ <h3><FormattedMessage id='onboarding.share.title' defaultMessage='Share your profile' /></h3>
+ <p><FormattedMessage id='onboarding.share.lead' defaultMessage='Let people know how they can find you on Mastodon!' /></p>
</div>
- </Column>
- );
- }
-}
+ <CopyPasteText value={intl.formatMessage(messages.shareableMessage, { username: `@${account.get('username')}@${domain}`, url })} />
-export default connect(mapStateToProps)(injectIntl(Share));
+ <TipCarousel>
+ <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.verification' defaultMessage='<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
+ <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.migration' defaultMessage='<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!' values={{ domain, strong: chunks => <strong>{chunks}</strong> }} /></p></div>
+ <div><p className='onboarding__lead'><FormattedMessage id='onboarding.tips.2fa' defaultMessage='<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!' values={{ strong: chunks => <strong>{chunks}</strong> }} /></p></div>
+ </TipCarousel>
+
+ <p className='onboarding__lead'><FormattedMessage id='onboarding.share.next_steps' defaultMessage='Possible next steps:' /></p>
+
+ <div className='onboarding__links'>
+ <Link to='/home' className='onboarding__link'>
+ <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
+ <Icon icon={ArrowRightAltIcon} />
+ </Link>
+
+ <Link to='/explore' className='onboarding__link'>
+ <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
+ <Icon icon={ArrowRightAltIcon} />
+ </Link>
+ </div>
+
+ <div className='onboarding__footer'>
+ <Link className='link-button' to='/start'><FormattedMessage id='onboarding.action.back' defaultMessage='Take me back' /></Link>
+ </div>
+ </div>
+ </>
+ );
+};
diff --git a/app/javascript/mastodon/features/ui/index.jsx b/app/javascript/mastodon/features/ui/index.jsx
index 02c69cbba..d3fee272f 100644
--- a/app/javascript/mastodon/features/ui/index.jsx
+++ b/app/javascript/mastodon/features/ui/index.jsx
@@ -210,7 +210,7 @@ class SwitchingColumnsArea extends PureComponent {
<WrappedRoute path='/bookmarks' component={BookmarkedStatuses} content={children} />
<WrappedRoute path='/pinned' component={PinnedStatuses} content={children} />
- <WrappedRoute path='/start' exact component={Onboarding} content={children} />
+ <WrappedRoute path='/start' component={Onboarding} content={children} />
<WrappedRoute path='/directory' component={Directory} content={children} />
<WrappedRoute path={['/explore', '/search']} component={Explore} content={children} />
<WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
diff --git a/app/javascript/mastodon/locales/en.json b/app/javascript/mastodon/locales/en.json
index 9cbaf9305..041446037 100644
--- a/app/javascript/mastodon/locales/en.json
+++ b/app/javascript/mastodon/locales/en.json
@@ -390,7 +390,7 @@
"lists.search": "Search among people you follow",
"lists.subheading": "Your lists",
"load_pending": "{count, plural, one {# new item} other {# new items}}",
- "loading_indicator.label": "Loading...",
+ "loading_indicator.label": "Loading…",
"media_gallery.toggle_visible": "{number, plural, one {Hide image} other {Hide images}}",
"moved_to_account_banner.text": "Your account {disabledAccount} is currently disabled because you moved to {movedToAccount}.",
"mute_modal.duration": "Duration",
@@ -479,6 +479,17 @@
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "Your home feed is the primary way to experience Mastodon. The more people you follow, the more active and interesting it will be. To get you started, here are some suggestions:",
"onboarding.follows.title": "Personalize your home feed",
+ "onboarding.profile.discoverable": "Feature profile and posts in discovery algorithms",
+ "onboarding.profile.display_name": "Display name",
+ "onboarding.profile.display_name_hint": "Your full name or your fun name…",
+ "onboarding.profile.indexable": "Include public posts in search results",
+ "onboarding.profile.lead": "You can always complete this later in the settings, where even more customization options are available.",
+ "onboarding.profile.note": "Bio",
+ "onboarding.profile.note_hint": "You can @mention other people or #hashtags…",
+ "onboarding.profile.save_and_continue": "Save and continue",
+ "onboarding.profile.title": "Profile setup",
+ "onboarding.profile.upload_avatar": "Upload profile picture",
+ "onboarding.profile.upload_header": "Upload profile header",
"onboarding.share.lead": "Let people know how they can find you on Mastodon!",
"onboarding.share.message": "I'm {username} on #Mastodon! Come follow me at {url}",
"onboarding.share.next_steps": "Possible next steps:",
diff --git a/app/javascript/mastodon/models/account.ts b/app/javascript/mastodon/models/account.ts
index 00066e284..a04ebe629 100644
--- a/app/javascript/mastodon/models/account.ts
+++ b/app/javascript/mastodon/models/account.ts
@@ -67,6 +67,7 @@ export const accountDefaultValues: AccountShape = {
bot: false,
created_at: '',
discoverable: false,
+ indexable: false,
display_name: '',
display_name_html: '',
emojis: List<CustomEmoji>(),
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index c8cfe46a8..9f87352f5 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -2552,7 +2552,7 @@ $ui-header-height: 55px;
.column-title {
text-align: center;
- padding-bottom: 40px;
+ padding-bottom: 32px;
h3 {
font-size: 24px;
@@ -2743,58 +2743,6 @@ $ui-header-height: 55px;
}
}
-.onboarding__progress-indicator {
- display: flex;
- align-items: center;
- margin-bottom: 30px;
- position: sticky;
- background: $ui-base-color;
-
- @media screen and (width >= 600) {
- padding: 0 40px;
- }
-
- &__line {
- height: 4px;
- flex: 1 1 auto;
- background: lighten($ui-base-color, 4%);
- }
-
- &__step {
- flex: 0 0 auto;
- width: 30px;
- height: 30px;
- background: lighten($ui-base-color, 4%);
- border-radius: 50%;
- color: $primary-text-color;
- display: flex;
- align-items: center;
- justify-content: center;
-
- svg {
- width: 15px;
- height: auto;
- }
-
- &.active {
- background: $valid-value-color;
- }
- }
-
- &__step.active,
- &__line.active {
- background: $valid-value-color;
- background-image: linear-gradient(
- 90deg,
- $valid-value-color,
- lighten($valid-value-color, 8%),
- $valid-value-color
- );
- background-size: 200px 100%;
- animation: skeleton 1.2s ease-in-out infinite;
- }
-}
-
.follow-recommendations {
background: darken($ui-base-color, 4%);
border-radius: 8px;
@@ -2871,6 +2819,28 @@ $ui-header-height: 55px;
}
}
+.onboarding__profile {
+ position: relative;
+ margin-bottom: 40px + 20px;
+
+ .app-form__avatar-input {
+ border: 2px solid $ui-base-color;
+ position: absolute;
+ inset-inline-start: -2px;
+ bottom: -40px;
+ z-index: 2;
+ }
+
+ .app-form__header-input {
+ margin: 0 -20px;
+ border-radius: 0;
+
+ img {
+ border-radius: 0;
+ }
+ }
+}
+
.compose-form__highlightable {
display: flex;
flex-direction: column;
@@ -3145,6 +3115,7 @@ $ui-header-height: 55px;
cursor: pointer;
background-color: transparent;
border: 0;
+ border-radius: 10px;
padding: 0;
user-select: none;
-webkit-tap-highlight-color: rgba($base-overlay-background, 0);
@@ -3169,81 +3140,41 @@ $ui-header-height: 55px;
}
.react-toggle-track {
- width: 50px;
- height: 24px;
+ width: 32px;
+ height: 20px;
padding: 0;
- border-radius: 30px;
- background-color: $ui-base-color;
- transition: background-color 0.2s ease;
+ border-radius: 10px;
+ background-color: #626982;
}
-.react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
- .react-toggle-track {
- background-color: darken($ui-base-color, 10%);
+.react-toggle--focus {
+ outline: $ui-button-focus-outline;
}
.react-toggle--checked .react-toggle-track {
- background-color: darken($ui-highlight-color, 2%);
-}
-
-.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
- .react-toggle-track {
background-color: $ui-highlight-color;
}
-.react-toggle-track-check {
- position: absolute;
- width: 14px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- inset-inline-start: 8px;
- opacity: 0;
- transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-check {
- opacity: 1;
- transition: opacity 0.25s ease;
-}
-
+.react-toggle-track-check,
.react-toggle-track-x {
- position: absolute;
- width: 10px;
- height: 10px;
- top: 0;
- bottom: 0;
- margin-top: auto;
- margin-bottom: auto;
- line-height: 0;
- inset-inline-end: 10px;
- opacity: 1;
- transition: opacity 0.25s ease;
-}
-
-.react-toggle--checked .react-toggle-track-x {
- opacity: 0;
+ display: none;
}
.react-toggle-thumb {
position: absolute;
- top: 1px;
- inset-inline-start: 1px;
- width: 22px;
- height: 22px;
- border: 1px solid $ui-base-color;
+ top: 2px;
+ inset-inline-start: 2px;
+ width: 16px;
+ height: 16px;
border-radius: 50%;
- background-color: darken($simple-background-color, 2%);
+ background-color: $primary-text-color;
box-sizing: border-box;
transition: all 0.25s ease;
transition-property: border-color, left;
}
.react-toggle--checked .react-toggle-thumb {
- inset-inline-start: 27px;
+ inset-inline-start: 32px - 16px - 2px;
border-color: $ui-highlight-color;
}
@@ -4066,6 +3997,17 @@ a.status-card {
justify-content: center;
}
+.button .loading-indicator {
+ position: static;
+ transform: none;
+
+ .circular-progress {
+ color: $primary-text-color;
+ width: 22px;
+ height: 22px;
+ }
+}
+
.circular-progress {
color: lighten($ui-base-color, 26%);
animation: 1.4s linear 0s infinite normal none running simple-rotate;
@@ -5799,12 +5741,14 @@ a.status-card {
&__toggle {
display: flex;
align-items: center;
- margin-bottom: 10px;
+ margin-bottom: 16px;
+ gap: 8px;
& > span {
- font-size: 17px;
+ display: block;
+ font-size: 14px;
font-weight: 500;
- margin-inline-start: 10px;
+ line-height: 20px;
}
}
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 0f8eecee0..e72a01936 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -36,7 +36,7 @@ code {
}
.input {
- margin-bottom: 15px;
+ margin-bottom: 16px;
overflow: hidden;
&.hidden {
@@ -266,12 +266,13 @@ code {
font-size: 14px;
color: $primary-text-color;
display: block;
- font-weight: 500;
- padding-top: 5px;
+ font-weight: 600;
+ line-height: 20px;
}
.hint {
- margin-bottom: 15px;
+ line-height: 16px;
+ margin-bottom: 12px;
}
ul {
@@ -427,7 +428,8 @@ code {
input[type='datetime-local'],
textarea {
box-sizing: border-box;
- font-size: 16px;
+ font-size: 14px;
+ line-height: 20px;
color: $primary-text-color;
display: block;
width: 100%;
@@ -435,9 +437,9 @@ code {
font-family: inherit;
resize: vertical;
background: darken($ui-base-color, 10%);
- border: 1px solid darken($ui-base-color, 14%);
- border-radius: 4px;
- padding: 10px;
+ border: 1px solid darken($ui-base-color, 10%);
+ border-radius: 8px;
+ padding: 10px 16px;
&::placeholder {
color: lighten($darker-text-color, 4%);
@@ -451,14 +453,13 @@ code {
border-color: $valid-value-color;
}
- &:hover {
- border-color: darken($ui-base-color, 20%);
- }
-
&:active,
&:focus {
border-color: $highlight-text-color;
- background: darken($ui-base-color, 8%);
+ }
+
+ @media screen and (width <= 600px) {
+ font-size: 16px;
}
}
@@ -524,12 +525,11 @@ code {
border-radius: 4px;
background: $ui-button-background-color;
color: $ui-button-color;
- font-size: 18px;
- line-height: inherit;
+ font-size: 15px;
+ line-height: 22px;
height: auto;
- padding: 10px;
+ padding: 7px 18px;
text-decoration: none;
- text-transform: uppercase;
text-align: center;
box-sizing: border-box;
cursor: pointer;
@@ -1220,3 +1220,74 @@ code {
background: $highlight-text-color;
}
}
+
+.app-form {
+ & > * {
+ margin-bottom: 16px;
+ }
+
+ &__avatar-input,
+ &__header-input {
+ display: block;
+ border-radius: 8px;
+ background: var(--dropdown-background-color);
+ position: relative;
+ cursor: pointer;
+
+ img {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ border-radius: 8px;
+ z-index: 0;
+ }
+
+ .icon {
+ position: absolute;
+ inset-inline-start: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ color: $darker-text-color;
+ z-index: 3;
+ }
+
+ &.selected .icon {
+ color: $primary-text-color;
+ transform: none;
+ inset-inline-start: auto;
+ inset-inline-end: 8px;
+ top: auto;
+ bottom: 8px;
+ }
+
+ &.invalid img {
+ outline: 1px solid $error-value-color;
+ outline-offset: -1px;
+ }
+
+ &.invalid::before {
+ display: block;
+ content: '';
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background: rgba($error-value-color, 0.25);
+ z-index: 2;
+ border-radius: 8px;
+ }
+
+ &:hover {
+ background-color: var(--dropdown-border-color);
+ }
+ }
+
+ &__avatar-input {
+ width: 80px;
+ height: 80px;
+ }
+
+ &__header-input {
+ aspect-ratio: 580/193;
+ }
+}
diff --git a/app/serializers/rest/account_serializer.rb b/app/serializers/rest/account_serializer.rb
index 8c6520b30..5d1292a6b 100644
--- a/app/serializers/rest/account_serializer.rb
+++ b/app/serializers/rest/account_serializer.rb
@@ -6,7 +6,7 @@ class REST::AccountSerializer < ActiveModel::Serializer
# Please update `app/javascript/mastodon/api_types/accounts.ts` when making changes to the attributes
- attributes :id, :username, :acct, :display_name, :locked, :bot, :discoverable, :group, :created_at,
+ attributes :id, :username, :acct, :display_name, :locked, :bot, :discoverable, :indexable, :group, :created_at,
:note, :url, :uri, :avatar, :avatar_static, :header, :header_static,
:followers_count, :following_count, :statuses_count, :last_status_at, :hide_collections
@@ -112,6 +112,10 @@ class REST::AccountSerializer < ActiveModel::Serializer
object.suspended? ? false : object.discoverable
end
+ def indexable
+ object.suspended? ? false : object.indexable
+ end
+
def moved_to_account
object.suspended? ? nil : AccountDecorator.new(object.moved_to_account)
end
diff --git a/config/routes.rb b/config/routes.rb
index 82431f6ec..150b26cf1 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -31,7 +31,7 @@ Rails.application.routes.draw do
/favourites
/bookmarks
/pinned
- /start
+ /start/(*any)
/directory
/explore/(*any)
/search