forked from treehouse/mastodon
[Glitch] Add dismissable hints to various timelines in web UI
Port f41ec9af05
to glitch-soc
Co-authored-by: Yamagishi Kazutoshi <ykzts@desire.sh>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
rebase/4.0.0rc1
parent
e5720cd540
commit
dea951cce8
|
@ -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 'flavours/glitch/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 (
|
||||||
|
<div className='dismissable-banner'>
|
||||||
|
<div className='dismissable-banner__message'>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className='dismissable-banner__action'>
|
||||||
|
<IconButton icon='times' title={intl.formatMessage(messages.dismiss)} onClick={this.handleDismiss} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
|
||||||
import Column from 'flavours/glitch/components/column';
|
import Column from 'flavours/glitch/components/column';
|
||||||
import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
|
import LinkFooter from 'flavours/glitch/features/ui/components/link_footer';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.about', defaultMessage: 'About' },
|
title: { id: 'column.about', defaultMessage: 'About' },
|
||||||
|
@ -25,7 +24,7 @@ class About extends React.PureComponent {
|
||||||
<LinkFooter />
|
<LinkFooter />
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,7 +10,8 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
|
||||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||||
import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
|
import { connectCommunityStream } from 'flavours/glitch/actions/streaming';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
import { domain } from 'flavours/glitch/initial_state';
|
||||||
|
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.community', defaultMessage: 'Local timeline' },
|
title: { id: 'column.community', defaultMessage: 'Local timeline' },
|
||||||
|
@ -138,6 +139,10 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
<ColumnSettingsContainer columnId={columnId} />
|
<ColumnSettingsContainer columnId={columnId} />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
|
<DismissableBanner id='community_timeline'>
|
||||||
|
<FormattedMessage id='dismissable_banner.community_timeline' defaultMessage='These are the most recent public posts from people whose accounts are hosted by {domain}.' values={{ domain }} />
|
||||||
|
</DismissableBanner>
|
||||||
|
|
||||||
<StatusListContainer
|
<StatusListContainer
|
||||||
trackScroll={!pinned}
|
trackScroll={!pinned}
|
||||||
scrollKey={`community_timeline-${columnId}`}
|
scrollKey={`community_timeline-${columnId}`}
|
||||||
|
@ -149,7 +154,7 @@ class CommunityTimeline extends React.PureComponent {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,6 @@ import RadioButton from 'flavours/glitch/components/radio_button';
|
||||||
import LoadMore from 'flavours/glitch/components/load_more';
|
import LoadMore from 'flavours/glitch/components/load_more';
|
||||||
import ScrollContainer from 'flavours/glitch/containers/scroll_container';
|
import ScrollContainer from 'flavours/glitch/containers/scroll_container';
|
||||||
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -169,7 +168,7 @@ class Directory extends React.PureComponent {
|
||||||
{multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
|
{multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -13,7 +13,6 @@ import Search from 'flavours/glitch/features/compose/containers/search_container
|
||||||
import SearchResults from './results';
|
import SearchResults from './results';
|
||||||
import { showTrends } from 'flavours/glitch/initial_state';
|
import { showTrends } from 'flavours/glitch/initial_state';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'explore.title', defaultMessage: 'Explore' },
|
title: { id: 'explore.title', defaultMessage: 'Explore' },
|
||||||
|
@ -85,7 +84,7 @@ class Explore extends React.PureComponent {
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
|
import { fetchTrendingLinks } from 'flavours/glitch/actions/trends';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
links: state.getIn(['trends', 'links', 'items']),
|
links: state.getIn(['trends', 'links', 'items']),
|
||||||
|
@ -29,9 +30,17 @@ class Links extends React.PureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { isLoading, links } = this.props;
|
const { isLoading, links } = this.props;
|
||||||
|
|
||||||
|
const banner = (
|
||||||
|
<DismissableBanner id='explore/links'>
|
||||||
|
<FormattedMessage id='dismissable_banner.explore_links' defaultMessage='These news stories are being talked about by people on this and other servers of the decentralized network right now.' />
|
||||||
|
</DismissableBanner>
|
||||||
|
);
|
||||||
|
|
||||||
if (!isLoading && links.isEmpty()) {
|
if (!isLoading && links.isEmpty()) {
|
||||||
return (
|
return (
|
||||||
<div className='explore__links scrollable scrollable--flex'>
|
<div className='explore__links scrollable scrollable--flex'>
|
||||||
|
{banner}
|
||||||
|
|
||||||
<div className='empty-column-indicator'>
|
<div className='empty-column-indicator'>
|
||||||
<FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
|
<FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,6 +50,8 @@ class Links extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='explore__links'>
|
<div className='explore__links'>
|
||||||
|
{banner}
|
||||||
|
|
||||||
{isLoading ? (<LoadingIndicator />) : links.map(link => (
|
{isLoading ? (<LoadingIndicator />) : links.map(link => (
|
||||||
<Story
|
<Story
|
||||||
key={link.get('id')}
|
key={link.get('id')}
|
||||||
|
|
|
@ -10,7 +10,6 @@ import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'
|
||||||
import { List as ImmutableList } from 'immutable';
|
import { List as ImmutableList } from 'immutable';
|
||||||
import LoadMore from 'flavours/glitch/components/load_more';
|
import LoadMore from 'flavours/glitch/components/load_more';
|
||||||
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -118,7 +117,7 @@ class Results extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title, { q })} - {title}</title>
|
<title>{intl.formatMessage(messages.title, { q })}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends';
|
import { fetchTrendingStatuses, expandTrendingStatuses } from 'flavours/glitch/actions/trends';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
|
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
statusIds: state.getIn(['status_lists', 'trending', 'items']),
|
statusIds: state.getIn(['status_lists', 'trending', 'items']),
|
||||||
|
@ -40,6 +41,11 @@ class Statuses extends React.PureComponent {
|
||||||
const emptyMessage = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />;
|
const emptyMessage = <FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
|
<DismissableBanner id='explore/statuses'>
|
||||||
|
<FormattedMessage id='dismissable_banner.explore_statuses' defaultMessage='These posts from this and other servers in the decentralized network are gaining traction on this server right now.' />
|
||||||
|
</DismissableBanner>
|
||||||
|
|
||||||
<StatusList
|
<StatusList
|
||||||
trackScroll
|
trackScroll
|
||||||
statusIds={statusIds}
|
statusIds={statusIds}
|
||||||
|
@ -51,6 +57,7 @@ class Statuses extends React.PureComponent {
|
||||||
bindToDocument={!multiColumn}
|
bindToDocument={!multiColumn}
|
||||||
withCounters
|
withCounters
|
||||||
/>
|
/>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,6 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
|
import { fetchTrendingHashtags } from 'flavours/glitch/actions/trends';
|
||||||
import { FormattedMessage } from 'react-intl';
|
import { FormattedMessage } from 'react-intl';
|
||||||
|
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
hashtags: state.getIn(['trends', 'tags', 'items']),
|
hashtags: state.getIn(['trends', 'tags', 'items']),
|
||||||
|
@ -29,9 +30,17 @@ class Tags extends React.PureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { isLoading, hashtags } = this.props;
|
const { isLoading, hashtags } = this.props;
|
||||||
|
|
||||||
|
const banner = (
|
||||||
|
<DismissableBanner id='explore/tags'>
|
||||||
|
<FormattedMessage id='dismissable_banner.explore_tags' defaultMessage='These hashtags are gaining traction among people on this and other servers of the decentralized network right now.' />
|
||||||
|
</DismissableBanner>
|
||||||
|
);
|
||||||
|
|
||||||
if (!isLoading && hashtags.isEmpty()) {
|
if (!isLoading && hashtags.isEmpty()) {
|
||||||
return (
|
return (
|
||||||
<div className='explore__links scrollable scrollable--flex'>
|
<div className='explore__links scrollable scrollable--flex'>
|
||||||
|
{banner}
|
||||||
|
|
||||||
<div className='empty-column-indicator'>
|
<div className='empty-column-indicator'>
|
||||||
<FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
|
<FormattedMessage id='empty_column.explore_statuses' defaultMessage='Nothing is trending right now. Check back later!' />
|
||||||
</div>
|
</div>
|
||||||
|
@ -41,6 +50,8 @@ class Tags extends React.PureComponent {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='explore__links'>
|
<div className='explore__links'>
|
||||||
|
{banner}
|
||||||
|
|
||||||
{isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
|
{isLoading ? (<LoadingIndicator />) : hashtags.map(hashtag => (
|
||||||
<Hashtag key={hashtag.get('name')} hashtag={hashtag} />
|
<Hashtag key={hashtag.get('name')} hashtag={hashtag} />
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -14,7 +14,6 @@ import { isEqual } from 'lodash';
|
||||||
import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
|
import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
|
||||||
import Icon from 'flavours/glitch/components/icon';
|
import Icon from 'flavours/glitch/components/icon';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -228,7 +227,7 @@ class HashtagTimeline extends React.PureComponent {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{`#${id}`} - {title}</title>
|
<title>#{id}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,7 +15,6 @@ import classNames from 'classnames';
|
||||||
import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
|
import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
|
||||||
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
|
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.home', defaultMessage: 'Home' },
|
title: { id: 'column.home', defaultMessage: 'Home' },
|
||||||
|
@ -170,7 +169,7 @@ class HomeTimeline extends React.PureComponent {
|
||||||
) : <NotSignedInIndicator />}
|
) : <NotSignedInIndicator />}
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -30,7 +30,6 @@ import compareId from 'flavours/glitch/compare_id';
|
||||||
import NotificationsPermissionBanner from './components/notifications_permission_banner';
|
import NotificationsPermissionBanner from './components/notifications_permission_banner';
|
||||||
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
|
import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
|
|
||||||
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
|
import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
|
||||||
|
|
||||||
|
@ -373,7 +372,7 @@ class Notifications extends React.PureComponent {
|
||||||
{scrollContainer}
|
{scrollContainer}
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
|
import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
|
||||||
import Column from 'flavours/glitch/components/column';
|
import Column from 'flavours/glitch/components/column';
|
||||||
|
@ -51,7 +50,7 @@ class PrivacyPolicy extends React.PureComponent {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/col
|
||||||
import ColumnSettingsContainer from './containers/column_settings_container';
|
import ColumnSettingsContainer from './containers/column_settings_container';
|
||||||
import { connectPublicStream } from 'flavours/glitch/actions/streaming';
|
import { connectPublicStream } from 'flavours/glitch/actions/streaming';
|
||||||
import { Helmet } from 'react-helmet';
|
import { Helmet } from 'react-helmet';
|
||||||
import { title } from 'flavours/glitch/initial_state';
|
import DismissableBanner from 'flavours/glitch/components/dismissable_banner';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
title: { id: 'column.public', defaultMessage: 'Federated timeline' },
|
title: { id: 'column.public', defaultMessage: 'Federated timeline' },
|
||||||
|
@ -143,6 +143,10 @@ class PublicTimeline extends React.PureComponent {
|
||||||
<ColumnSettingsContainer columnId={columnId} />
|
<ColumnSettingsContainer columnId={columnId} />
|
||||||
</ColumnHeader>
|
</ColumnHeader>
|
||||||
|
|
||||||
|
<DismissableBanner id='public_timeline'>
|
||||||
|
<FormattedMessage id='dismissable_banner.public_timeline' defaultMessage='These are the most recent public posts from people on this and other servers of the decentralized network that this server knows about.' />
|
||||||
|
</DismissableBanner>
|
||||||
|
|
||||||
<StatusListContainer
|
<StatusListContainer
|
||||||
timelineId={`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`}
|
timelineId={`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`}
|
||||||
onLoadMore={this.handleLoadMore}
|
onLoadMore={this.handleLoadMore}
|
||||||
|
@ -154,7 +158,7 @@ class PublicTimeline extends React.PureComponent {
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<Helmet>
|
<Helmet>
|
||||||
<title>{intl.formatMessage(messages.title)} - {title}</title>
|
<title>{intl.formatMessage(messages.title)}</title>
|
||||||
</Helmet>
|
</Helmet>
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
|
|
|
@ -45,3 +45,4 @@ export default class Settings {
|
||||||
|
|
||||||
export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
|
export const pushNotificationsSetting = new Settings('mastodon_push_notification_data');
|
||||||
export const tagHistory = new Settings('mastodon_tag_history');
|
export const tagHistory = new Settings('mastodon_tag_history');
|
||||||
|
export const bannerSettings = new Settings('mastodon_banner_settings');
|
||||||
|
|
|
@ -936,3 +936,28 @@ $ui-header-height: 55px;
|
||||||
color: $darker-text-color;
|
color: $darker-text-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dismissable-banner {
|
||||||
|
background: $ui-base-color;
|
||||||
|
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 30px;
|
||||||
|
|
||||||
|
&__message {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 20px 15px;
|
||||||
|
cursor: default;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px;
|
||||||
|
color: $primary-text-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__action {
|
||||||
|
padding: 15px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue