From 9a641a5a0e7a8d45bf6d3b8e4bfdc269def2dc06 Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Sun, 14 Jun 2020 22:29:40 +0200 Subject: [PATCH] [Glitch] Add hints about incomplete remote content to web UI Port 3e9dc4044bb7e1ef6131fbd6430ed85b3cc2fcfa to glitch-soc Signed-off-by: Thibaut Girka --- .../glitch/components/scrollable_list.js | 5 +++- .../glitch/components/timeline_hint.js | 18 ++++++++++++ .../glitch/features/account_timeline/index.js | 28 +++++++++++++++++-- .../glitch/features/followers/index.js | 26 +++++++++++++++-- .../glitch/features/following/index.js | 26 +++++++++++++++-- .../glitch/styles/components/index.scss | 25 +++++++++++++++++ 6 files changed, 121 insertions(+), 7 deletions(-) create mode 100644 app/javascript/flavours/glitch/components/timeline_hint.js diff --git a/app/javascript/flavours/glitch/components/scrollable_list.js b/app/javascript/flavours/glitch/components/scrollable_list.js index c022290a4..fae0a7393 100644 --- a/app/javascript/flavours/glitch/components/scrollable_list.js +++ b/app/javascript/flavours/glitch/components/scrollable_list.js @@ -32,6 +32,7 @@ export default class ScrollableList extends PureComponent { hasMore: PropTypes.bool, numPending: PropTypes.number, prepend: PropTypes.node, + append: PropTypes.node, alwaysPrepend: PropTypes.bool, emptyMessage: PropTypes.node, children: PropTypes.node, @@ -272,7 +273,7 @@ export default class ScrollableList extends PureComponent { } render () { - const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, emptyMessage, onLoadMore } = this.props; + const { children, scrollKey, trackScroll, shouldUpdateScroll, showLoading, isLoading, hasMore, numPending, prepend, alwaysPrepend, append, emptyMessage, onLoadMore } = this.props; const { fullscreen } = this.state; const childrenCount = React.Children.count(children); @@ -319,6 +320,8 @@ export default class ScrollableList extends PureComponent { ))} {loadMore} + + {!hasMore && append} ); diff --git a/app/javascript/flavours/glitch/components/timeline_hint.js b/app/javascript/flavours/glitch/components/timeline_hint.js new file mode 100644 index 000000000..fb55a62cc --- /dev/null +++ b/app/javascript/flavours/glitch/components/timeline_hint.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; + +const TimelineHint = ({ resource, url }) => ( +
+ +
+ +
+); + +TimelineHint.propTypes = { + resource: PropTypes.node.isRequired, + url: PropTypes.string.isRequired, +}; + +export default TimelineHint; diff --git a/app/javascript/flavours/glitch/features/account_timeline/index.js b/app/javascript/flavours/glitch/features/account_timeline/index.js index f25c82a00..a8e8aa7a8 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/index.js +++ b/app/javascript/flavours/glitch/features/account_timeline/index.js @@ -15,11 +15,14 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; import { fetchAccountIdentityProofs } from '../../actions/identity_proofs'; import MissingIndicator from 'flavours/glitch/components/missing_indicator'; +import TimelineHint from 'flavours/glitch/components/timeline_hint'; const mapStateToProps = (state, { params: { accountId }, withReplies = false }) => { const path = withReplies ? `${accountId}:with_replies` : accountId; return { + remote: !!state.getIn(['accounts', accountId, 'acct']) !== state.getIn(['accounts', accountId, 'username']), + remoteUrl: state.getIn(['accounts', accountId, 'url']), isAccount: !!state.getIn(['accounts', accountId]), statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableList()), featuredStatusIds: withReplies ? ImmutableList() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableList()), @@ -28,6 +31,14 @@ const mapStateToProps = (state, { params: { accountId }, withReplies = false }) }; }; +const RemoteHint = ({ url }) => ( + } /> +); + +RemoteHint.propTypes = { + url: PropTypes.string.isRequired, +}; + export default @connect(mapStateToProps) class AccountTimeline extends ImmutablePureComponent { @@ -40,6 +51,8 @@ class AccountTimeline extends ImmutablePureComponent { hasMore: PropTypes.bool, withReplies: PropTypes.bool, isAccount: PropTypes.bool, + remote: PropTypes.bool, + remoteUrl: PropTypes.string, multiColumn: PropTypes.bool, }; @@ -78,7 +91,7 @@ class AccountTimeline extends ImmutablePureComponent { } render () { - const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, multiColumn } = this.props; + const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, multiColumn, remote, remoteUrl } = this.props; if (!isAccount) { return ( @@ -97,6 +110,16 @@ class AccountTimeline extends ImmutablePureComponent { ); } + let emptyMessage; + + if (remote && statusIds.isEmpty()) { + emptyMessage = ; + } else { + emptyMessage = ; + } + + const remoteMessage = remote ? : null; + return ( @@ -104,13 +127,14 @@ class AccountTimeline extends ImmutablePureComponent { } alwaysPrepend + append={remoteMessage} scrollKey='account_timeline' statusIds={statusIds} featuredStatusIds={featuredStatusIds} isLoading={isLoading} hasMore={hasMore} onLoadMore={this.handleLoadMore} - emptyMessage={} + emptyMessage={emptyMessage} bindToDocument={!multiColumn} timelineId='account' /> diff --git a/app/javascript/flavours/glitch/features/followers/index.js b/app/javascript/flavours/glitch/features/followers/index.js index bf41f3b98..8ae46be94 100644 --- a/app/javascript/flavours/glitch/features/followers/index.js +++ b/app/javascript/flavours/glitch/features/followers/index.js @@ -17,14 +17,25 @@ import HeaderContainer from 'flavours/glitch/features/account_timeline/container import ImmutablePureComponent from 'react-immutable-pure-component'; import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import TimelineHint from 'flavours/glitch/components/timeline_hint'; const mapStateToProps = (state, props) => ({ + remote: !!state.getIn(['accounts', props.params.accountId, 'acct']) !== state.getIn(['accounts', props.params.accountId, 'username']), + remoteUrl: state.getIn(['accounts', props.params.accountId, 'url']), isAccount: !!state.getIn(['accounts', props.params.accountId]), accountIds: state.getIn(['user_lists', 'followers', props.params.accountId, 'items']), hasMore: !!state.getIn(['user_lists', 'followers', props.params.accountId, 'next']), isLoading: state.getIn(['user_lists', 'followers', props.params.accountId, 'isLoading'], true), }); +const RemoteHint = ({ url }) => ( + } /> +); + +RemoteHint.propTypes = { + url: PropTypes.string.isRequired, +}; + export default @connect(mapStateToProps) class Followers extends ImmutablePureComponent { @@ -35,6 +46,8 @@ class Followers extends ImmutablePureComponent { hasMore: PropTypes.bool, isLoading: PropTypes.bool, isAccount: PropTypes.bool, + remote: PropTypes.bool, + remoteUrl: PropTypes.string, multiColumn: PropTypes.bool, }; @@ -65,7 +78,7 @@ class Followers extends ImmutablePureComponent { } render () { - const { accountIds, hasMore, isAccount, multiColumn, isLoading } = this.props; + const { accountIds, hasMore, isAccount, multiColumn, isLoading, remote, remoteUrl } = this.props; if (!isAccount) { return ( @@ -83,7 +96,15 @@ class Followers extends ImmutablePureComponent { ); } - const emptyMessage = ; + let emptyMessage; + + if (remote && accountIds.isEmpty()) { + emptyMessage = ; + } else { + emptyMessage = ; + } + + const remoteMessage = remote ? : null; return ( @@ -96,6 +117,7 @@ class Followers extends ImmutablePureComponent { onLoadMore={this.handleLoadMore} prepend={} alwaysPrepend + append={remoteMessage} emptyMessage={emptyMessage} bindToDocument={!multiColumn} > diff --git a/app/javascript/flavours/glitch/features/following/index.js b/app/javascript/flavours/glitch/features/following/index.js index f090900cc..e06eaa8a6 100644 --- a/app/javascript/flavours/glitch/features/following/index.js +++ b/app/javascript/flavours/glitch/features/following/index.js @@ -17,14 +17,25 @@ import HeaderContainer from 'flavours/glitch/features/account_timeline/container import ImmutablePureComponent from 'react-immutable-pure-component'; import MissingIndicator from 'flavours/glitch/components/missing_indicator'; import ScrollableList from 'flavours/glitch/components/scrollable_list'; +import TimelineHint from 'flavours/glitch/components/timeline_hint'; const mapStateToProps = (state, props) => ({ + remote: !!state.getIn(['accounts', props.params.accountId, 'acct']) !== state.getIn(['accounts', props.params.accountId, 'username']), + remoteUrl: state.getIn(['accounts', props.params.accountId, 'url']), isAccount: !!state.getIn(['accounts', props.params.accountId]), accountIds: state.getIn(['user_lists', 'following', props.params.accountId, 'items']), hasMore: !!state.getIn(['user_lists', 'following', props.params.accountId, 'next']), isLoading: state.getIn(['user_lists', 'following', props.params.accountId, 'isLoading'], true), }); +const RemoteHint = ({ url }) => ( + } /> +); + +RemoteHint.propTypes = { + url: PropTypes.string.isRequired, +}; + export default @connect(mapStateToProps) class Following extends ImmutablePureComponent { @@ -35,6 +46,8 @@ class Following extends ImmutablePureComponent { hasMore: PropTypes.bool, isLoading: PropTypes.bool, isAccount: PropTypes.bool, + remote: PropTypes.bool, + remoteUrl: PropTypes.string, multiColumn: PropTypes.bool, }; @@ -65,7 +78,7 @@ class Following extends ImmutablePureComponent { } render () { - const { accountIds, hasMore, isAccount, multiColumn, isLoading } = this.props; + const { accountIds, hasMore, isAccount, multiColumn, isLoading, remote, remoteUrl } = this.props; if (!isAccount) { return ( @@ -83,7 +96,15 @@ class Following extends ImmutablePureComponent { ); } - const emptyMessage = ; + let emptyMessage; + + if (remote && accountIds.isEmpty()) { + emptyMessage = ; + } else { + emptyMessage = ; + } + + const remoteMessage = remote ? : null; return ( @@ -96,6 +117,7 @@ class Following extends ImmutablePureComponent { onLoadMore={this.handleLoadMore} prepend={} alwaysPrepend + append={remoteMessage} emptyMessage={emptyMessage} bindToDocument={!multiColumn} > diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss index 50cea8b26..a37cef795 100644 --- a/app/javascript/flavours/glitch/styles/components/index.scss +++ b/app/javascript/flavours/glitch/styles/components/index.scss @@ -1093,6 +1093,31 @@ border-bottom: 1px solid lighten($ui-base-color, 8%); } +.timeline-hint { + text-align: center; + color: $darker-text-color; + padding: 15px; + box-sizing: border-box; + width: 100%; + cursor: default; + + strong { + font-weight: 500; + } + + a { + color: lighten($ui-highlight-color, 8%); + text-decoration: none; + + &:hover, + &:focus, + &:active { + text-decoration: underline; + color: lighten($ui-highlight-color, 12%); + } + } +} + .missing-indicator { padding-top: 20px + 48px;