From 1a7a74ff76a129031a3fd6d73688ab9409899002 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Wed, 30 May 2018 18:41:47 +0200 Subject: [PATCH] Improve getting started column (#7676) * Adjust footer of getting started column - Improved style - Moved hotkeys, about this instance and logout to footer - Removed FAQ, User Guide, Apps links - Use hamburger icon for the column * Add edit profile action button to profile and more to dropdown * Add "Trending now" to getting started column * Add preferences/security links on mobile layout --- app/javascript/mastodon/components/hashtag.js | 41 +++++++ .../features/account/components/action_bar.js | 28 ++++- .../features/account/components/header.js | 11 ++ .../compose/components/search_results.js | 39 +------ .../mastodon/features/compose/index.js | 2 +- .../mastodon/features/domain_blocks/index.js | 2 +- .../features/getting_started/index.js | 109 +++++++++++------- app/javascript/mastodon/locales/en.json | 2 +- .../styles/mastodon/components.scss | 71 ++++++++---- 9 files changed, 197 insertions(+), 108 deletions(-) create mode 100644 app/javascript/mastodon/components/hashtag.js diff --git a/app/javascript/mastodon/components/hashtag.js b/app/javascript/mastodon/components/hashtag.js new file mode 100644 index 000000000..cc37a91e2 --- /dev/null +++ b/app/javascript/mastodon/components/hashtag.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { Sparklines, SparklinesCurve } from 'react-sparklines'; +import { Link } from 'react-router-dom'; +import { FormattedMessage, FormattedNumber } from 'react-intl'; +import ImmutablePropTypes from 'react-immutable-proptypes'; + +const shortNumberFormat = number => { + if (number < 1000) { + return ; + } else { + return K; + } +}; + +const Hashtag = ({ hashtag }) => ( +
+
+ + #{hashtag.get('name')} + + + {shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))} }} /> +
+ +
+ {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))} +
+ +
+ day.get('uses')).toArray()}> + + +
+
+); + +Hashtag.propTypes = { + hashtag: ImmutablePropTypes.map.isRequired, +}; + +export default Hashtag; diff --git a/app/javascript/mastodon/features/account/components/action_bar.js b/app/javascript/mastodon/features/account/components/action_bar.js index 23dbf32bc..3a1f92811 100644 --- a/app/javascript/mastodon/features/account/components/action_bar.js +++ b/app/javascript/mastodon/features/account/components/action_bar.js @@ -23,6 +23,14 @@ const messages = defineMessages({ unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unhide {domain}' }, hideReblogs: { id: 'account.hide_reblogs', defaultMessage: 'Hide boosts from @{name}' }, showReblogs: { id: 'account.show_reblogs', defaultMessage: 'Show boosts from @{name}' }, + pins: { id: 'navigation_bar.pins', defaultMessage: 'Pinned toots' }, + preferences: { id: 'navigation_bar.preferences', defaultMessage: 'Preferences' }, + follow_requests: { id: 'navigation_bar.follow_requests', defaultMessage: 'Follow requests' }, + favourites: { id: 'navigation_bar.favourites', defaultMessage: 'Favourites' }, + lists: { id: 'navigation_bar.lists', defaultMessage: 'Lists' }, + blocks: { id: 'navigation_bar.blocks', defaultMessage: 'Blocked users' }, + domain_blocks: { id: 'navigation_bar.domain_blocks', defaultMessage: 'Hidden domains' }, + mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' }, }); @injectIntl @@ -54,17 +62,29 @@ export default class ActionBar extends React.PureComponent { let menu = []; let extraInfo = ''; - menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention }); - menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect }); + if (account.get('id') !== me) { + menu.push({ text: intl.formatMessage(messages.mention, { name: account.get('username') }), action: this.props.onMention }); + menu.push({ text: intl.formatMessage(messages.direct, { name: account.get('username') }), action: this.props.onDirect }); + menu.push(null); + } if ('share' in navigator) { menu.push({ text: intl.formatMessage(messages.share, { name: account.get('username') }), action: this.handleShare }); + menu.push(null); } - menu.push(null); - if (account.get('id') === me) { menu.push({ text: intl.formatMessage(messages.edit_profile), href: '/settings/profile' }); + menu.push({ text: intl.formatMessage(messages.preferences), href: '/settings/preferences' }); + menu.push({ text: intl.formatMessage(messages.pins), to: '/pinned' }); + menu.push(null); + menu.push({ text: intl.formatMessage(messages.follow_requests), to: '/follow_requests' }); + menu.push({ text: intl.formatMessage(messages.favourites), to: '/favourites' }); + menu.push({ text: intl.formatMessage(messages.lists), to: '/lists' }); + menu.push(null); + menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' }); + menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' }); + menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' }); } else { if (account.getIn(['relationship', 'following'])) { if (account.getIn(['relationship', 'showing_reblogs'])) { diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js index 7358053da..dd2cd406b 100644 --- a/app/javascript/mastodon/features/account/components/header.js +++ b/app/javascript/mastodon/features/account/components/header.js @@ -14,6 +14,7 @@ const messages = defineMessages({ follow: { id: 'account.follow', defaultMessage: 'Follow' }, requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, + edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' }, }); class Avatar extends ImmutablePureComponent { @@ -74,6 +75,10 @@ export default class Header extends ImmutablePureComponent { intl: PropTypes.object.isRequired, }; + openEditProfile = () => { + window.open('/settings/profile', '_blank'); + } + render () { const { account, intl } = this.props; @@ -118,6 +123,12 @@ export default class Header extends ImmutablePureComponent { ); } + } else { + actionBtn = ( +
+ +
+ ); } if (account.get('moved') && !account.getIn(['relationship', 'following'])) { diff --git a/app/javascript/mastodon/features/compose/components/search_results.js b/app/javascript/mastodon/features/compose/components/search_results.js index 445bf27bb..cf022362e 100644 --- a/app/javascript/mastodon/features/compose/components/search_results.js +++ b/app/javascript/mastodon/features/compose/components/search_results.js @@ -1,42 +1,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; -import { FormattedMessage, FormattedNumber } from 'react-intl'; +import { FormattedMessage } from 'react-intl'; import AccountContainer from '../../../containers/account_container'; import StatusContainer from '../../../containers/status_container'; -import { Link } from 'react-router-dom'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Sparklines, SparklinesCurve } from 'react-sparklines'; - -const shortNumberFormat = number => { - if (number < 1000) { - return ; - } else { - return K; - } -}; - -const renderHashtag = hashtag => ( -
-
- - #{hashtag.get('name')} - - - {shortNumberFormat(hashtag.getIn(['history', 0, 'accounts']))} }} /> -
- -
- {shortNumberFormat(hashtag.getIn(['history', 0, 'uses']))} -
- -
- day.get('uses')).toArray()}> - - -
-
-); +import Hashtag from '../../../components/hashtag'; export default class SearchResults extends ImmutablePureComponent { @@ -66,7 +35,7 @@ export default class SearchResults extends ImmutablePureComponent { - {trends && trends.map(hashtag => renderHashtag(hashtag))} + {trends && trends.map(hashtag => )} ); @@ -100,7 +69,7 @@ export default class SearchResults extends ImmutablePureComponent {
- {results.get('hashtags').map(hashtag => renderHashtag(hashtag))} + {results.get('hashtags').map(hashtag => )}
); } diff --git a/app/javascript/mastodon/features/compose/index.js b/app/javascript/mastodon/features/compose/index.js index d8e9ad9ee..df1ec4915 100644 --- a/app/javascript/mastodon/features/compose/index.js +++ b/app/javascript/mastodon/features/compose/index.js @@ -75,7 +75,7 @@ export default class Compose extends React.PureComponent { const { columns } = this.props; header = (