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 />; return <span />;
} }
const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000); const formattedSubCount = toCompactNotation(channelSubCount, lang, 10000);
const formattedSubCountLocale = Number(channelSubCount).toLocaleString();
return ( return (
<Tooltip title={channelSubCount} followCursor placement="top"> <Tooltip title={formattedSubCountLocale} followCursor placement="top">
<span className="claim-preview__channel-sub-count"> <span className="claim-preview__channel-sub-count">
{channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })} {channelSubCount === 1 ? __('1 Follower') : __('%formattedSubCount% Followers', { formattedSubCount })}
</span> </span>

View file

@ -15,6 +15,7 @@ import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
import { selectModerationBlockList } from 'redux/selectors/comments'; import { selectModerationBlockList } from 'redux/selectors/comments';
import { selectMutedChannels } from 'redux/selectors/blocked'; import { selectMutedChannels } from 'redux/selectors/blocked';
import { doOpenModal } from 'redux/actions/app'; import { doOpenModal } from 'redux/actions/app';
import { selectLanguage } from 'redux/selectors/settings';
import ChannelPage from './view'; import ChannelPage from './view';
const select = (state, props) => { const select = (state, props) => {
@ -35,6 +36,7 @@ const select = (state, props) => {
blockedChannels: selectModerationBlockList(state), blockedChannels: selectModerationBlockList(state),
mutedChannels: selectMutedChannels(state), mutedChannels: selectMutedChannels(state),
unpublishedCollections: selectMyUnpublishedCollections(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'; import TruncatedText from 'component/common/truncated-text';
// $FlowFixMe cannot resolve ... // $FlowFixMe cannot resolve ...
import PlaceholderTx from 'static/img/placeholderTx.gif'; 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 PAGE_VIEW_QUERY = `view`;
export const DISCUSSION_PAGE = `discussion`; export const DISCUSSION_PAGE = `discussion`;
@ -58,6 +60,7 @@ type Props = {
blockedChannels: Array<string>, blockedChannels: Array<string>,
mutedChannels: Array<string>, mutedChannels: Array<string>,
unpublishedCollections: CollectionGroup, unpublishedCollections: CollectionGroup,
lang: string,
}; };
function ChannelPage(props: Props) { function ChannelPage(props: Props) {
@ -77,6 +80,7 @@ function ChannelPage(props: Props) {
blockedChannels, blockedChannels,
mutedChannels, mutedChannels,
unpublishedCollections, unpublishedCollections,
lang,
} = props; } = props;
const { const {
push, push,
@ -91,6 +95,7 @@ function ChannelPage(props: Props) {
const { channelName } = parseURI(uri); const { channelName } = parseURI(uri);
const { permanent_url: permanentUrl } = claim; const { permanent_url: permanentUrl } = claim;
const claimId = claim.claim_id; const claimId = claim.claim_id;
const compactSubCount = toCompactNotation(subCount, lang, 10000);
const formattedSubCount = Number(subCount).toLocaleString(); const formattedSubCount = Number(subCount).toLocaleString();
const isBlocked = claim && blockedChannels.includes(claim.permanent_url); const isBlocked = claim && blockedChannels.includes(claim.permanent_url);
const isMuted = claim && mutedChannels.includes(claim.permanent_url); const isMuted = claim && mutedChannels.includes(claim.permanent_url);
@ -231,10 +236,12 @@ function ChannelPage(props: Props) {
<ChannelStakedIndicator uri={uri} large /> <ChannelStakedIndicator uri={uri} large />
</h1> </h1>
<div className="channel__meta"> <div className="channel__meta">
<span> <Tooltip title={formattedSubCount} followCursor placement="top">
{formattedSubCount} {subCount !== 1 ? __('Followers') : __('Follower')} <span>
<HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" /> {compactSubCount} {subCount !== 1 ? __('Followers') : __('Follower')}
</span> <HelpLink href="https://odysee.com/@OdyseeHelp:b/OdyseeBasics:c" />
</span>
</Tooltip>
{channelIsMine && ( {channelIsMine && (
<> <>
{pending ? ( {pending ? (