mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-23 02:58:07 +01:00
[Glitch] Change labels and styles on the onboarding screen in web UI
Port a985d587e1
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
parent
d5bad93460
commit
06e819537b
6 changed files with 75 additions and 40 deletions
|
@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
|
||||||
import { Check } from 'flavours/glitch/components/check';
|
import { Check } from 'flavours/glitch/components/check';
|
||||||
import { Icon } from 'flavours/glitch/components/icon';
|
import { Icon } from 'flavours/glitch/components/icon';
|
||||||
|
|
||||||
|
import ArrowSmallRight from './arrow_small_right';
|
||||||
|
|
||||||
const Step = ({ label, description, icon, completed, onClick, href }) => {
|
const Step = ({ label, description, icon, completed, onClick, href }) => {
|
||||||
const content = (
|
const content = (
|
||||||
<>
|
<>
|
||||||
|
@ -15,11 +17,9 @@ const Step = ({ label, description, icon, completed, onClick, href }) => {
|
||||||
<p>{description}</p>
|
<p>{description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{completed && (
|
<div className={completed ? 'onboarding__steps__item__progress' : 'onboarding__steps__item__go'}>
|
||||||
<div className='onboarding__steps__item__progress'>
|
{completed ? <Check /> : <ArrowSmallRight />}
|
||||||
<Check />
|
</div>
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -12,20 +12,11 @@ import Column from 'flavours/glitch/components/column';
|
||||||
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
import ColumnBackButton from 'flavours/glitch/components/column_back_button';
|
||||||
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
|
import { EmptyAccount } from 'flavours/glitch/components/empty_account';
|
||||||
import Account from 'flavours/glitch/containers/account_container';
|
import Account from 'flavours/glitch/containers/account_container';
|
||||||
import { me } from 'flavours/glitch/initial_state';
|
|
||||||
import { makeGetAccount } from 'flavours/glitch/selectors';
|
|
||||||
|
|
||||||
import ProgressIndicator from './components/progress_indicator';
|
const mapStateToProps = state => ({
|
||||||
|
suggestions: state.getIn(['suggestions', 'items']),
|
||||||
const mapStateToProps = () => {
|
isLoading: state.getIn(['suggestions', 'isLoading']),
|
||||||
const getAccount = makeGetAccount();
|
});
|
||||||
|
|
||||||
return state => ({
|
|
||||||
account: getAccount(state, me),
|
|
||||||
suggestions: state.getIn(['suggestions', 'items']),
|
|
||||||
isLoading: state.getIn(['suggestions', 'isLoading']),
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
class Follows extends PureComponent {
|
class Follows extends PureComponent {
|
||||||
|
|
||||||
|
@ -33,7 +24,6 @@ class Follows extends PureComponent {
|
||||||
onBack: PropTypes.func,
|
onBack: PropTypes.func,
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
suggestions: ImmutablePropTypes.list,
|
suggestions: ImmutablePropTypes.list,
|
||||||
account: ImmutablePropTypes.map,
|
|
||||||
isLoading: PropTypes.bool,
|
isLoading: PropTypes.bool,
|
||||||
multiColumn: PropTypes.bool,
|
multiColumn: PropTypes.bool,
|
||||||
};
|
};
|
||||||
|
@ -49,7 +39,7 @@ class Follows extends PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { onBack, isLoading, suggestions, account, multiColumn } = this.props;
|
const { onBack, isLoading, suggestions, multiColumn } = this.props;
|
||||||
|
|
||||||
let loadedContent;
|
let loadedContent;
|
||||||
|
|
||||||
|
@ -58,7 +48,7 @@ class Follows extends PureComponent {
|
||||||
} else if (suggestions.isEmpty()) {
|
} 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>;
|
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 {
|
} else {
|
||||||
loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} />);
|
loadedContent = suggestions.map(suggestion => <Account id={suggestion.get('account')} key={suggestion.get('account')} withBio />);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -71,8 +61,6 @@ class Follows extends PureComponent {
|
||||||
<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>
|
<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>
|
||||||
|
|
||||||
<ProgressIndicator steps={7} completed={account.get('following_count') * 1} />
|
|
||||||
|
|
||||||
<div className='follow-recommendations'>
|
<div className='follow-recommendations'>
|
||||||
{loadedContent}
|
{loadedContent}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -18,6 +18,7 @@ import { closeOnboarding } from 'flavours/glitch/actions/onboarding';
|
||||||
import Column from 'flavours/glitch/features/ui/components/column';
|
import Column from 'flavours/glitch/features/ui/components/column';
|
||||||
import { me } from 'flavours/glitch/initial_state';
|
import { me } from 'flavours/glitch/initial_state';
|
||||||
import { makeGetAccount } from 'flavours/glitch/selectors';
|
import { makeGetAccount } from 'flavours/glitch/selectors';
|
||||||
|
import { assetHost } from 'flavours/glitch/utils/config';
|
||||||
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
|
import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
|
||||||
|
|
||||||
import ArrowSmallRight from './components/arrow_small_right';
|
import ArrowSmallRight from './components/arrow_small_right';
|
||||||
|
@ -122,21 +123,22 @@ class Onboarding extends ImmutablePureComponent {
|
||||||
<div className='onboarding__steps'>
|
<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' 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.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' 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' 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.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' 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' 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.' />} />
|
<Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' 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' 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!' />} />
|
<Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' 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>
|
</div>
|
||||||
|
|
||||||
<p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage='Want to skip right ahead?' /></p>
|
<p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>
|
||||||
|
|
||||||
<div className='onboarding__links'>
|
<div className='onboarding__links'>
|
||||||
<Link to='/explore' className='onboarding__link'>
|
<Link to='/explore' className='onboarding__link'>
|
||||||
|
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
|
||||||
<ArrowSmallRight />
|
<ArrowSmallRight />
|
||||||
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage="See what's trending" />
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='onboarding__footer'>
|
<Link to='/home' className='onboarding__link'>
|
||||||
<button className='link-button' onClick={this.handleClose}><FormattedMessage id='onboarding.actions.close' defaultMessage="Don't show this screen again" /></button>
|
<FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
|
||||||
|
<ArrowSmallRight />
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -177,13 +177,13 @@ class Share extends PureComponent {
|
||||||
|
|
||||||
<div className='onboarding__links'>
|
<div className='onboarding__links'>
|
||||||
<Link to='/home' className='onboarding__link'>
|
<Link to='/home' className='onboarding__link'>
|
||||||
|
<FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
|
||||||
<ArrowSmallRight />
|
<ArrowSmallRight />
|
||||||
<FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Go to your home feed' />
|
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link to='/explore' className='onboarding__link'>
|
<Link to='/explore' className='onboarding__link'>
|
||||||
|
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
|
||||||
<ArrowSmallRight />
|
<ArrowSmallRight />
|
||||||
<FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage="See what's trending" />
|
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -36,12 +36,37 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__note {
|
&__note {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 2;
|
-webkit-line-clamp: 1;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
color: $ui-secondary-color;
|
margin-top: 10px;
|
||||||
|
color: $darker-text-color;
|
||||||
|
|
||||||
|
&--missing {
|
||||||
|
color: $dark-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus,
|
||||||
|
&:active {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -951,13 +951,15 @@ $ui-header-height: 55px;
|
||||||
.onboarding__link {
|
.onboarding__link {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
color: $highlight-text-color;
|
color: $highlight-text-color;
|
||||||
background: lighten($ui-base-color, 4%);
|
background: lighten($ui-base-color, 4%);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 10px;
|
padding: 10px 15px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-size: 17px;
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
height: 56px;
|
height: 56px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
||||||
|
@ -1019,6 +1021,7 @@ $ui-header-height: 55px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
padding-inline-end: 15px;
|
||||||
margin-bottom: 2px;
|
margin-bottom: 2px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
text-align: start;
|
text-align: start;
|
||||||
|
@ -1031,14 +1034,14 @@ $ui-header-height: 55px;
|
||||||
|
|
||||||
&__icon {
|
&__icon {
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
background: $ui-base-color;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: none;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
color: $dark-text-color;
|
color: $highlight-text-color;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -1062,16 +1065,33 @@ $ui-header-height: 55px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__go {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 21px;
|
||||||
|
height: 21px;
|
||||||
|
color: $highlight-text-color;
|
||||||
|
font-size: 17px;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
height: 1.5em;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&__description {
|
&__description {
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
line-height: 18px;
|
line-height: 20px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
h6 {
|
h6 {
|
||||||
color: $primary-text-color;
|
color: $highlight-text-color;
|
||||||
font-weight: 700;
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue