ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Various padding fixes (#4924)

Browse Source
This commit is contained in:
zubiden 2024-08-29 15:53:01 +02:00 committed by Alexander Zinchuk
parent e5daa2dc20
commit d6d98bdae1
14 changed files with 128 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/common/ChatExtra.module.scss
View File

@ -1,38 +0,0 @@
.businessLocation {
width: 4rem;
height: 4rem;
object-fit: cover;
border-radius: 0.25rem;
flex-shrink: 0;
margin-inline-start: 0.25rem;
}
.personalChannel {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
column-gap: 0.5rem;
margin-bottom: 0.5rem;
}
.personalChannelTitle {
grid-column: 1;
grid-row: 1;
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-inline-start: 0.5rem;
margin-bottom: 0;
}
.personalChannelSubscribers {
grid-column: 2;
grid-row: 1;
color: var(--color-text-secondary);
font-size: 0.875rem;
margin-inline-end: 0.5rem;
}
.personalChannelItem {
grid-column: 1 / span 2;
grid-row: 2;
}

1
src/components/common/RecipientPicker.tsx
View File

@ -104,6 +104,7 @@ const RecipientPicker: FC<OwnProps & StateProps> = ({
isOpen={isOpen}
className={className}
chatOrUserIds={renderingIds}
currentUserId={currentUserId}
searchPlaceholder={searchPlaceholder}
search={search}
onSearchChange={setSearch}

25
src/components/common/pickers/ChatOrUserPicker.scss
View File

@ -1,3 +1,5 @@
@use "../../../styles/mixins";
.ChatOrUserPicker {
.modal-dialog {
height: 70%;
@ -54,7 +56,9 @@
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: 0 0.5rem;
padding-inline: 0.5rem;
@include mixins.adapt-padding-to-scrollbar(0.5rem);
body.is-ios &,
body.is-android & {
@ -81,25 +85,12 @@
position: relative;
}
.ListItem {
.ChatOrUserPicker-item {
position: absolute;
width: 100%;
body.is-ios &:not(:last-of-type)::after,
body.is-android &:not(:last-of-type)::after {
right: -0.5rem;
}
}
.ListItem.chat-item-clickable {
&:not(.force-rounded-corners) {
@media (max-width: 600px) {
margin: 0;
.ListItem-button {
border-radius: 0;
}
}
.online {
color: var(--color-primary);
}
}

150
src/components/common/pickers/ChatOrUserPicker.tsx
View File

@ -1,18 +1,24 @@
import type { FC } from '../../../lib/teact/teact';
import React, {
memo, useMemo, useRef, useState,
memo, useCallback, useMemo, useRef, useState,
} from '../../../lib/teact/teact';
import { getActions, getGlobal } from '../../../global';
import type { ApiTopic } from '../../../api/types';
import type { GlobalState } from '../../../global/types';
import type { ThreadId } from '../../../types';
import { CHAT_HEIGHT_PX } from '../../../config';
import { getCanPostInChat, isUserId } from '../../../global/helpers';
import { PEER_PICKER_ITEM_HEIGHT_PX } from '../../../config';
import {
getCanPostInChat, getGroupStatus, getUserStatus, isUserOnline,
} from '../../../global/helpers';
import { isApiPeerChat } from '../../../global/helpers/peers';
import { selectChat, selectPeer, selectUserStatus } from '../../../global/selectors';
import buildClassName from '../../../util/buildClassName';
import { REM } from '../helpers/mediaDimensions';
import renderText from '../helpers/renderText';
import useSelector from '../../../hooks/data/useSelector';
import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
import useInputFocusOnOpen from '../../../hooks/useInputFocusOnOpen';
import useKeyboardListNavigation from '../../../hooks/useKeyboardListNavigation';
@ -22,13 +28,13 @@ import useOldLang from '../../../hooks/useOldLang';
import Button from '../../ui/Button';
import InfiniteScroll from '../../ui/InfiniteScroll';
import InputText from '../../ui/InputText';
import ListItem from '../../ui/ListItem';
import Loading from '../../ui/Loading';
import Modal from '../../ui/Modal';
import Transition from '../../ui/Transition';
import GroupChatInfo from '../GroupChatInfo';
import PrivateChatInfo from '../PrivateChatInfo';
import Avatar from '../Avatar';
import FullNameTitle from '../FullNameTitle';
import TopicIcon from '../TopicIcon';
import PickerItem from './PickerItem';
import './ChatOrUserPicker.scss';
@ -49,6 +55,8 @@ export type OwnProps = {
const CHAT_LIST_SLIDE = 0;
const TOPIC_LIST_SLIDE = 1;
const TOPIC_ICON_SIZE = 2.75 * REM;
const ITEM_CLASS_NAME = 'ChatOrUserPicker-item';
const TOPIC_ITEM_HEIGHT_PX = 56;
const ChatOrUserPicker: FC<OwnProps> = ({
isOpen,
@ -86,22 +94,33 @@ const ChatOrUserPicker: FC<OwnProps> = ({
useInputFocusOnOpen(searchRef, isOpen && activeKey === CHAT_LIST_SLIDE, resetSearch);
useInputFocusOnOpen(topicSearchRef, isOpen && activeKey === TOPIC_LIST_SLIDE);
const selectTopics = useLastCallback((global: GlobalState) => {
if (!forumId) {
return undefined;
}
return selectChat(global, forumId)?.topics;
});
const forumTopics = useSelector(selectTopics);
const [topicIds, topics] = useMemo(() => {
const global = getGlobal();
const chatsById = global.chats.byId;
const chatFullInfoById = global.chats.fullInfoById;
const topicsResult = forumId ? chatsById[forumId].topics : undefined;
if (!topicsResult) {
const chat = chatsById[forumId!];
if (!chat || !forumTopics) {
return [undefined, undefined];
}
const searchTitle = topicSearch.toLowerCase();
const result = topicsResult
? Object.values(topicsResult).reduce((acc, topic) => {
const result = forumTopics
? Object.values(forumTopics).reduce((acc, topic) => {
if (
getCanPostInChat(chatsById[forumId!], topic.id, undefined, chatFullInfoById[forumId!])
getCanPostInChat(chat, topic.id, undefined, chatFullInfoById[forumId!])
&& (!searchTitle || topic.title.toLowerCase().includes(searchTitle))
) {
acc[topic.id] = topic;
@ -109,10 +128,10 @@ const ChatOrUserPicker: FC<OwnProps> = ({
return acc;
}, {} as Record<number, ApiTopic>)
: topicsResult;
: forumTopics;
return [Object.keys(result).map(Number), result];
}, [forumId, topicSearch]);
}, [forumId, topicSearch, forumTopics]);
const handleHeaderBackClick = useLastCallback(() => {
setForumId(undefined);
@ -140,15 +159,15 @@ const ChatOrUserPicker: FC<OwnProps> = ({
onSelectChatOrUser(chatId);
}
}
}, '.ListItem-button', true);
}, `.${ITEM_CLASS_NAME}`, true);
const handleTopicKeyDown = useKeyboardListNavigation(topicContainerRef, isOpen, (index) => {
if (topicIds?.length) {
onSelectChatOrUser(forumId!, topicIds[index === -1 ? 0 : index]);
}
}, '.ListItem-button', true);
}, `.${ITEM_CLASS_NAME}`, true);
const handleClick = useLastCallback((e: React.MouseEvent, chatId: string) => {
const handleClick = useLastCallback((chatId: string) => {
const chatsById = getGlobal().chats.byId;
const chat = chatsById?.[chatId];
if (chat?.isForum) {
@ -160,9 +179,52 @@ const ChatOrUserPicker: FC<OwnProps> = ({
}
});
const handleTopicClick = useLastCallback((e: React.MouseEvent, topicId: number) => {
onSelectChatOrUser(forumId!, topicId);
});
const renderChatItem = useCallback((id: string, index: number) => {
const global = getGlobal();
const peer = selectPeer(global, id);
if (!peer) {
return undefined;
}
const isSelf = peer && !isApiPeerChat(peer) ? peer.isSelf : undefined;
function getSubtitle() {
if (!peer) return undefined;
if (peer.id === currentUserId) return [lang('SavedMessagesInfo')];
if (isApiPeerChat(peer)) {
return [getGroupStatus(lang, peer)];
}
const userStatus = selectUserStatus(global, peer.id);
return [
getUserStatus(lang, peer, userStatus),
buildClassName(isUserOnline(peer, userStatus, true) && 'online'),
];
}
const [subtitle, subtitleClassName] = getSubtitle() || [];
return (
<PickerItem
key={id}
className={ITEM_CLASS_NAME}
title={<FullNameTitle peer={peer} isSavedMessages={isSelf} />}
avatarElement={(
<Avatar
peer={peer}
isSavedMessages={isSelf}
size="medium"
/>
)}
subtitle={subtitle}
subtitleClassName={subtitleClassName}
ripple
style={`top: ${(viewportOffset + index) * PEER_PICKER_ITEM_HEIGHT_PX}px;`}
// eslint-disable-next-line react/jsx-no-bind
onClick={() => handleClick(id)}
/>
);
}, [currentUserId, lang, viewportOffset]);
function renderTopicList() {
return (
@ -184,28 +246,28 @@ const ChatOrUserPicker: FC<OwnProps> = ({
className="picker-list custom-scroll"
items={topicIds}
withAbsolutePositioning
maxHeight={!topicIds ? 0 : topicIds.length * CHAT_HEIGHT_PX}
maxHeight={(topicIds?.length || 0) * TOPIC_ITEM_HEIGHT_PX}
onKeyDown={handleTopicKeyDown}
>
{topicIds
? topicIds.map((topicId, i) => (
<ListItem
key={`${forumId}_${topicId}`}
className="chat-item-clickable force-rounded-corners small-icon topic-item"
style={`top: ${i * CHAT_HEIGHT_PX}px;`}
onClick={handleTopicClick}
clickArg={topicId}
>
{!topicIds && <Loading />}
{topicIds?.map((topicId, i) => (
<PickerItem
key={`${forumId}_${topicId}`}
className={ITEM_CLASS_NAME}
// eslint-disable-next-line react/jsx-no-bind
onClick={() => onSelectChatOrUser(forumId!, topicId)}
style={`top: ${(viewportOffset + i) * TOPIC_ITEM_HEIGHT_PX}px;`}
avatarElement={(
<TopicIcon
size={TOPIC_ICON_SIZE}
topic={topics[topicId]}
className="topic-icon"
letterClassName="topic-icon-letter"
/>
<div dir="auto" className="fullName">{renderText(topics[topicId].title)}</div>
</ListItem>
))
: <Loading />}
)}
title={renderText(topics[topicId].title)}
/>
))}
</InfiniteScroll>
</>
);
@ -237,29 +299,13 @@ const ChatOrUserPicker: FC<OwnProps> = ({
ref={containerRef}
className="picker-list custom-scroll"
items={viewportIds}
itemSelector={`.${ITEM_CLASS_NAME}`}
onLoadMore={getMore}
withAbsolutePositioning
maxHeight={chatOrUserIds!.length * CHAT_HEIGHT_PX}
maxHeight={chatOrUserIds!.length * PEER_PICKER_ITEM_HEIGHT_PX}
onKeyDown={handleKeyDown}
>
{viewportIds.map((id, i) => (
<ListItem
key={id}
className="chat-item-clickable force-rounded-corners small-icon"
style={`height: ${CHAT_HEIGHT_PX}px; top: ${(viewportOffset + i) * CHAT_HEIGHT_PX}px;`}
onClick={handleClick}
clickArg={id}
>
{isUserId(id) ? (
<PrivateChatInfo
status={id === currentUserId ? lang('SavedMessagesInfo') : undefined}
userId={id}
/>
) : (
<GroupChatInfo chatId={id} />
)}
</ListItem>
))}
{viewportIds.map(renderChatItem)}
</InfiniteScroll>
) : viewportIds && !viewportIds.length ? (
<p className="no-results">{lang('lng_blocked_list_not_found')}</p>

2
src/components/common/pickers/PickerItem.module.scss
View File

@ -60,7 +60,6 @@
color: var(--color-text-secondary);
grid-row: 2;
grid-column: 3;
align-self: start;
}
.title, .subtitle {
@ -76,6 +75,7 @@
.multiline {
.title {
grid-row: 1;
align-self: end;
}
}

3
src/components/common/pickers/PickerItem.tsx
View File

@ -22,6 +22,7 @@ type OwnProps = {
className?: string;
titleClassName?: string;
subtitleClassName?: string;
style?: string;
onClick?: NoneToVoidFunction;
onDisabledClick?: NoneToVoidFunction;
};
@ -38,6 +39,7 @@ const PickerItem = ({
className,
titleClassName,
subtitleClassName,
style,
onClick,
onDisabledClick,
}: OwnProps) => {
@ -66,6 +68,7 @@ const PickerItem = ({
className,
)}
onClick={handleClick}
style={style}
dir={lang.isRtl ? 'rtl' : undefined}
role={isClickable ? 'button' : undefined}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

4
src/components/common/profile/ChatExtra.module.scss
View File

@ -40,6 +40,10 @@
.personalChannelItem {
grid-column: 1 / span 2;
grid-row: 2;
:global(.Avatar) {
margin-right: 0.9375rem !important;
}
}
.openAppButton {

1
src/components/left/main/Chat.tsx
View File

@ -335,6 +335,7 @@ const Chat: FC<OwnProps & StateProps> = ({
peer={peer}
isSavedMessages={user?.isSelf}
isSavedDialog={isSavedDialog}
size={isPreview ? 'medium' : 'large'}
withStory={!user?.isSelf}
withStoryGap={isAvatarOnlineShown}
storyViewerOrigin={StoryViewerOrigin.ChatList}

6
src/components/left/search/LeftSearch.scss
View File

@ -86,7 +86,7 @@
}
.RecentContacts .search-section {
padding-left: 0.25rem;
padding-inline: 0.5rem;
}
.WebLink {
@ -193,7 +193,9 @@
}
.search-section {
padding: 0 0.125rem 0 0.75rem;
padding-inline: 0.5rem;
@include mixins.adapt-padding-to-scrollbar(0.5rem);
.section-heading {
color: var(--color-text-secondary);

2
src/components/left/search/RecentContacts.scss
View File

@ -81,6 +81,6 @@
.clear-recent-chats {
position: absolute;
inset-inline-end: 0.5rem;
inset-inline-end: 0;
}
}

2
src/components/ui/Checkbox.scss
View File

@ -224,12 +224,14 @@
&.onlyInput {
padding-inline-start: 1.125rem;
margin-block: 0 1.25rem;
.Checkbox-main {
&::before,
&::after {
left: 0;
right: 0;
top: 0;
}
}
}

4
src/components/ui/Tab.scss
View File

@ -86,11 +86,11 @@
.platform {
position: absolute;
bottom: -0.625rem;
left: 0;
left: -0.5rem;
right: -0.5rem;
opacity: 0;
background-color: var(--color-primary);
height: 0.1875rem;
width: 100%;
border-radius: 0.1875rem 0.1875rem 0 0;
pointer-events: none;
box-sizing: content-box;

1
src/config.ts
View File

@ -71,6 +71,7 @@ export const MESSAGE_LIST_VIEWPORT_LIMIT = MESSAGE_LIST_SLICE * 2;
export const ARCHIVE_MINIMIZED_HEIGHT = 36;
export const CHAT_HEIGHT_PX = 72;
export const TOPIC_HEIGHT_PX = 65;
export const PEER_PICKER_ITEM_HEIGHT_PX = 56;
export const CHAT_LIST_SLICE = isBigScreen ? 30 : 25;
export const CHAT_LIST_LOAD_SLICE = 100;
export const SHARED_MEDIA_SLICE = 42;

4
src/styles/_common.scss
View File

@ -101,9 +101,9 @@
.chat-list {
background: var(--color-background);
height: 100%;
padding: 0.5rem 0.4375rem 0.5rem 0.4375rem;
padding: 0.5rem;
@include mixins.adapt-padding-to-scrollbar(0.4375rem);
@include mixins.adapt-padding-to-scrollbar(0.5rem);
overflow-x: hidden;
overflow-y: scroll;