Formatting improvements (#731)

This commit is contained in:
Thomas Zarebczan 2022-01-18 13:30:43 -05:00 committed by GitHub
parent b0d9127b78
commit 24d53cd7d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 5 deletions

View file

@ -170,8 +170,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
return <span />;
}
const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000);
const formattedSubCountLocale = Number(channelSubCount).toLocaleString();
return (
<Tooltip title={channelSubCount} followCursor placement="top">
<Tooltip title={formattedSubCountLocale} followCursor placement="top">
<span className="claim-preview__channel-sub-count">
{channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
</span>

View file

@ -15,6 +15,7 @@ import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
import { selectModerationBlockList } from 'redux/selectors/comments';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { doOpenModal } from 'redux/actions/app';
import { selectLanguage } from 'redux/selectors/settings';
import ChannelPage from './view';
const select = (state, props) => {
@ -35,6 +36,7 @@ const select = (state, props) => {
blockedChannels: selectModerationBlockList(state),
mutedChannels: selectMutedChannels(state),
unpublishedCollections: selectMyUnpublishedCollections(state),
lang: selectLanguage(state),
};
};

View file

@ -27,6 +27,8 @@ import I18nMessage from 'component/i18nMessage';
import TruncatedText from 'component/common/truncated-text';
// $FlowFixMe cannot resolve ...
import PlaceholderTx from 'static/img/placeholderTx.gif';
import Tooltip from 'component/common/tooltip';
import { toCompactNotation } from 'util/string';
export const PAGE_VIEW_QUERY = `view`;
export const DISCUSSION_PAGE = `discussion`;
@ -58,6 +60,7 @@ type Props = {
blockedChannels: Array<string>,
mutedChannels: Array<string>,
unpublishedCollections: CollectionGroup,
lang: string,
};
function ChannelPage(props: Props) {
@ -77,6 +80,7 @@ function ChannelPage(props: Props) {
blockedChannels,
mutedChannels,
unpublishedCollections,
lang,
} = props;
const {
push,
@ -91,6 +95,7 @@ function ChannelPage(props: Props) {
const { channelName } = parseURI(uri);
const { permanent_url: permanentUrl } = claim;
const claimId = claim.claim_id;
const compactSubCount = toCompactNotation(subCount, lang, 10000);
const formattedSubCount = Number(subCount).toLocaleString();
const isBlocked = claim && blockedChannels.includes(claim.permanent_url);
const isMuted = claim && mutedChannels.includes(claim.permanent_url);
@ -231,10 +236,12 @@ function ChannelPage(props: Props) {
<ChannelStakedIndicator uri={uri} large />
</h1>
<div className="channel__meta">
<span>
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
<HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />
</span>
<Tooltip title={formattedSubCount} followCursor placement="top">
<span>
{compactSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
<HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />
</span>
</Tooltip>
{channelIsMine && (
<>
{pending ? (