Formatting improvements (#731)
This commit is contained in:
parent
b0d9127b78
commit
24d53cd7d8
3 changed files with 15 additions and 5 deletions
|
@ -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>
|
||||||
|
|
|
@ -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),
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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 ? (
|
||||||
|
|
Loading…
Reference in a new issue