diff --git a/src/components/common/Composer.scss b/src/components/common/Composer.scss index 7160c7547..3f292e668 100644 --- a/src/components/common/Composer.scss +++ b/src/components/common/Composer.scss @@ -691,6 +691,8 @@ .placeholder-star-icon { line-height: 1; + margin-inline-end: 0.0625rem; + margin-inline-start: 0.25rem; } .forced-placeholder, .placeholder-text { diff --git a/src/components/left/settings/PrivacyLockedOption.module.scss b/src/components/left/settings/PrivacyLockedOption.module.scss index 4806e4f52..6ad89150d 100644 --- a/src/components/left/settings/PrivacyLockedOption.module.scss +++ b/src/components/left/settings/PrivacyLockedOption.module.scss @@ -12,7 +12,5 @@ } .checked .lock-icon { - left: 1.25rem; - font-size: 1rem; color: var(--color-primary); } diff --git a/src/components/left/settings/PrivacyMessages.tsx b/src/components/left/settings/PrivacyMessages.tsx index 835eeb972..8c94490dc 100644 --- a/src/components/left/settings/PrivacyMessages.tsx +++ b/src/components/left/settings/PrivacyMessages.tsx @@ -24,6 +24,7 @@ import useLang from '../../../hooks/useLang'; import useLastCallback from '../../../hooks/useLastCallback'; import useOldLang from '../../../hooks/useOldLang'; +import Icon from '../../common/icons/Icon'; import ListItem from '../../ui/ListItem'; import RadioGroup from '../../ui/RadioGroup'; import RangeSlider from '../../ui/RangeSlider'; @@ -130,8 +131,13 @@ function PrivacyMessages({ }, [setChargeForMessages, updateGlobalPrivacySettingsWithDebounced]); const renderValueForStarsRange = useCallback((value: number) => { - return formatStarsAsText(lang, value); - }, [lang]); + return ( + + {!canChangeChargeForMessages && ()} + {formatStarsAsText(lang, value)} + + ); + }, [lang, canChangeChargeForMessages]); function renderSectionStarsAmountForPaidMessages() { return ( @@ -146,6 +152,7 @@ function PrivacyMessages({ value={chargeForMessages} onChange={handleChargeForMessagesChange} renderValue={renderValueForStarsRange} + readOnly={!canChangeChargeForMessages} />

{lang('SectionDescriptionStarsForForMessages', { @@ -219,8 +226,7 @@ function PrivacyMessages({ {privacyDescription}

- {canChangeChargeForMessages - && selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()} + {selectedValue === 'charge_for_messages' && renderSectionStarsAmountForPaidMessages()} {canChangeChargeForMessages && selectedValue === 'charge_for_messages' && renderSectionNoPaidMessagesForUsers()} {!isCurrentUserPremium && } diff --git a/src/components/left/settings/Settings.scss b/src/components/left/settings/Settings.scss index 0122a48f7..c0afda18e 100644 --- a/src/components/left/settings/Settings.scss +++ b/src/components/left/settings/Settings.scss @@ -121,6 +121,12 @@ } } +.settings-range-value { + color: var(--color-primary); + display: inline-flex; + align-items: center; +} + .settings-item-simple, .settings-item { text-align: initial; diff --git a/src/components/middle/MessageList.tsx b/src/components/middle/MessageList.tsx index 4914f54ea..82269f837 100644 --- a/src/components/middle/MessageList.tsx +++ b/src/components/middle/MessageList.tsx @@ -226,6 +226,10 @@ const MessageList: FC = ({ const areMessagesLoaded = Boolean(messageIds); + const isPrivate = isUserId(chatId); + const withUsers = Boolean((!isPrivate && !isChannelChat) + || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars); + useSyncEffect(() => { // We only need it first time when message list appears if (areMessagesLoaded) { @@ -329,9 +333,13 @@ const MessageList: FC = ({ memoUnreadDividerBeforeIdRef.current, !isForum ? Number(threadId) : undefined, isChatWithSelf, + withUsers, ) : undefined; - }, [messageIds, messagesById, type, isServiceNotificationsChat, isForum, threadId, isChatWithSelf, channelJoinInfo]); + }, [withUsers, + messageIds, messagesById, type, + isServiceNotificationsChat, isForum, + threadId, isChatWithSelf, channelJoinInfo]); useInterval(() => { if (!messageIds || !messagesById || type === 'scheduled') return; @@ -635,9 +643,6 @@ const MessageList: FC = ({ } }, [isSelectModeActive]); - const isPrivate = isUserId(chatId); - const withUsers = Boolean((!isPrivate && !isChannelChat) - || isChatWithSelf || isSystemBotChat || isAnonymousForwards || isChannelWithAvatars); const noAvatars = Boolean(!withUsers || (isChannelChat && !isChannelWithAvatars)); const shouldRenderGreeting = isUserId(chatId) && !isChatWithSelf && !isBot && !isAnonymousForwards && type === 'thread' diff --git a/src/components/middle/helpers/groupMessages.ts b/src/components/middle/helpers/groupMessages.ts index 57202548e..d6be99222 100644 --- a/src/components/middle/helpers/groupMessages.ts +++ b/src/components/middle/helpers/groupMessages.ts @@ -19,7 +19,7 @@ export function isAlbum(messageOrAlbum: ApiMessage | IAlbum): messageOrAlbum is } export function groupMessages( - messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean, + messages: ApiMessage[], firstUnreadId?: number, topMessageId?: number, isChatWithSelf?: boolean, withUsers?: boolean, ) { const initDateGroup: MessageDateGroup = { originalDate: messages[0].date, @@ -90,7 +90,7 @@ export function groupMessages( } else if ( nextMessage.id === firstUnreadId || message.senderId !== nextMessage.senderId - || message.paidMessageStars + || (!withUsers && message.paidMessageStars) || message.isOutgoing !== nextMessage.isOutgoing || message.postAuthorTitle !== nextMessage.postAuthorTitle || (isActionMessage(message) && message.content.action?.type !== 'phoneCall') diff --git a/src/components/ui/RangeSlider.scss b/src/components/ui/RangeSlider.scss index d26183bb8..aa114c0c4 100644 --- a/src/components/ui/RangeSlider.scss +++ b/src/components/ui/RangeSlider.scss @@ -25,6 +25,10 @@ --slider-color: var(--color-text-secondary); } + &.readOnly { + pointer-events: none; + } + .slider-top-row { display: flex; justify-content: space-between; diff --git a/src/components/ui/RangeSlider.tsx b/src/components/ui/RangeSlider.tsx index 3cf0150f6..fef49a944 100644 --- a/src/components/ui/RangeSlider.tsx +++ b/src/components/ui/RangeSlider.tsx @@ -1,5 +1,5 @@ import type { ChangeEvent } from 'react'; -import type { FC } from '../../lib/teact/teact'; +import type { FC, TeactNode } from '../../lib/teact/teact'; import React, { memo, useCallback, useMemo } from '../../lib/teact/teact'; import buildClassName from '../../util/buildClassName'; @@ -16,9 +16,10 @@ type OwnProps = { label?: string; value: number; disabled?: boolean; + readOnly?: boolean; bold?: boolean; className?: string; - renderValue?: (value: number) => string; + renderValue?: (value: number) => TeactNode; onChange: (value: number) => void; isCenteredLayout?: boolean; }; @@ -31,6 +32,7 @@ const RangeSlider: FC = ({ label, value, disabled, + readOnly, bold, className, renderValue, @@ -46,6 +48,7 @@ const RangeSlider: FC = ({ className, 'RangeSlider', disabled && 'disabled', + readOnly && 'readOnly', bold && 'bold', );