From f41ec9af05d3e2145e62f705225dbabb7e04e242 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 9 Oct 2022 06:08:37 +0200 Subject: [PATCH] Add dismissable hints to various timelines in web UI (#19315) Co-authored-by: Yamagishi Kazutoshi --- .../mastodon/components/dismissable_banner.js | 51 +++++++++++++++++++ .../features/community_timeline/index.js | 6 +++ .../mastodon/features/explore/links.js | 11 ++++ .../mastodon/features/explore/statuses.js | 29 +++++++---- .../mastodon/features/explore/tags.js | 11 ++++ .../features/public_timeline/index.js | 5 ++ app/javascript/mastodon/settings.js | 1 + .../styles/mastodon/components.scss | 25 +++++++++ 8 files changed, 128 insertions(+), 11 deletions(-) create mode 100644 app/javascript/mastodon/components/dismissable_banner.js diff --git a/app/javascript/mastodon/components/dismissable_banner.js b/app/javascript/mastodon/components/dismissable_banner.js new file mode 100644 index 000000000..1ee032056 --- /dev/null +++ b/app/javascript/mastodon/components/dismissable_banner.js @@ -0,0 +1,51 @@ +import React from 'react'; +import IconButton from './icon_button'; +import PropTypes from 'prop-types'; +import { injectIntl, defineMessages } from 'react-intl'; +import { bannerSettings } from 'mastodon/settings'; + +const messages = defineMessages({ + dismiss: { id: 'dismissable_banner.dismiss', defaultMessage: 'Dismiss' }, +}); + +export default @injectIntl +class DismissableBanner extends React.PureComponent { + + static propTypes = { + id: PropTypes.string.isRequired, + children: PropTypes.node, + intl: PropTypes.object.isRequired, + }; + + state = { + visible: !bannerSettings.get(this.props.id), + }; + + handleDismiss = () => { + const { id } = this.props; + this.setState({ visible: false }, () => bannerSettings.set(id, true)); + } + + render () { + const { visible } = this.state; + + if (!visible) { + return null; + } + + const { children, intl } = this.props; + + return ( +
+
+ {children} +
+ +
+ +
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/community_timeline/index.js b/app/javascript/mastodon/features/community_timeline/index.js index afa7b3ed4..757521802 100644 --- a/app/javascript/mastodon/features/community_timeline/index.js +++ b/app/javascript/mastodon/features/community_timeline/index.js @@ -10,6 +10,8 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectCommunityStream } from '../../actions/streaming'; import { Helmet } from 'react-helmet'; +import { domain } from 'mastodon/initial_state'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.community', defaultMessage: 'Local timeline' }, @@ -134,6 +136,10 @@ class CommunityTimeline extends React.PureComponent { + + + + ({ links: state.getIn(['trends', 'links', 'items']), @@ -29,9 +30,17 @@ class Links extends React.PureComponent { render () { const { isLoading, links } = this.props; + const banner = ( + + + + ); + if (!isLoading && links.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Links extends React.PureComponent { return (
+ {banner} + {isLoading ? () : links.map(link => ( ({ statusIds: state.getIn(['status_lists', 'trending', 'items']), @@ -40,17 +41,23 @@ class Statuses extends React.PureComponent { const emptyMessage = ; return ( - + <> + + + + + + ); } diff --git a/app/javascript/mastodon/features/explore/tags.js b/app/javascript/mastodon/features/explore/tags.js index 6cd3a6fb1..258dc392f 100644 --- a/app/javascript/mastodon/features/explore/tags.js +++ b/app/javascript/mastodon/features/explore/tags.js @@ -6,6 +6,7 @@ import LoadingIndicator from 'mastodon/components/loading_indicator'; import { connect } from 'react-redux'; import { fetchTrendingHashtags } from 'mastodon/actions/trends'; import { FormattedMessage } from 'react-intl'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const mapStateToProps = state => ({ hashtags: state.getIn(['trends', 'tags', 'items']), @@ -29,9 +30,17 @@ class Tags extends React.PureComponent { render () { const { isLoading, hashtags } = this.props; + const banner = ( + + + + ); + if (!isLoading && hashtags.isEmpty()) { return (
+ {banner} +
@@ -41,6 +50,8 @@ class Tags extends React.PureComponent { return (
+ {banner} + {isLoading ? () : hashtags.map(hashtag => ( ))} diff --git a/app/javascript/mastodon/features/public_timeline/index.js b/app/javascript/mastodon/features/public_timeline/index.js index 5b1b7c650..8dbef98c0 100644 --- a/app/javascript/mastodon/features/public_timeline/index.js +++ b/app/javascript/mastodon/features/public_timeline/index.js @@ -10,6 +10,7 @@ import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import ColumnSettingsContainer from './containers/column_settings_container'; import { connectPublicStream } from '../../actions/streaming'; import { Helmet } from 'react-helmet'; +import DismissableBanner from 'mastodon/components/dismissable_banner'; const messages = defineMessages({ title: { id: 'column.public', defaultMessage: 'Federated timeline' }, @@ -137,6 +138,10 @@ class PublicTimeline extends React.PureComponent { + + + +