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

Chat: Use normal list item height for forum

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-28 18:43:53 +01:00
parent 37b9836739
commit f18548d4a3
12 changed files with 80 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/common/ChatForumLastMessage.module.scss
View File

@ -44,6 +44,7 @@
.loading {
color: var(--color-text-secondary);
line-height: 1.25rem;
}
.other-column, .main-column {
@ -102,6 +103,7 @@
.title {
margin-left: 0.25rem;
font-size: 0.9375rem;
line-height: 1.25rem;
overflow: hidden;
text-overflow: ellipsis;
}
@ -115,6 +117,8 @@
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
line-height: 1.25rem;
height: 1.25rem;
}
.ellipsis {
@ -145,6 +149,10 @@
width: 100%;
height: 100%;
}
:global(.last-message) {
line-height: 1.25rem !important;
}
}
.reverse-corner {

8
src/components/common/ChatForumLastMessage.tsx
View File

@ -90,7 +90,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
style={overwrittenWidth ? `--overwritten-width: ${overwrittenWidth}px` : undefined}
>
{lastActiveTopic && (
<span className={styles.titleRow}>
<div className={styles.titleRow}>
<div
className={buildClassName(
styles.mainColumn,
@ -129,10 +129,10 @@ const ChatForumLastMessage: FC<OwnProps> = ({
</div>
<div className={styles.ellipsis} />
</span>
</div>
)}
{!lastActiveTopic && <div className={buildClassName(styles.titleRow, styles.loading)}>{lang('Loading')}</div>}
<span
<div
className={buildClassName(styles.lastMessage, lastActiveTopic?.unreadCount && styles.unread)}
ref={lastMessageRef}
onMouseDown={handleOpenTopic}
@ -143,7 +143,7 @@ const ChatForumLastMessage: FC<OwnProps> = ({
<div className={styles.after} />
</div>
)}
</span>
</div>
</div>
);

3
src/components/common/LastMessageMeta.scss
View File

@ -1,9 +1,7 @@
.LastMessageMeta {
margin-right: 0.1875rem;
padding: 0.3125rem 0 0.125rem;
flex-shrink: 0;
font-size: 0.75rem;
line-height: 1;
display: flex;
align-items: center;
@ -19,6 +17,5 @@
.time {
color: var(--color-text-meta);
line-height: 1.125rem;
}
}

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

@ -154,7 +154,6 @@ const Archive: FC<OwnProps> = ({
'chat-item-archive',
)}
buttonClassName={styles.button}
offsetCollapseDelta={0}
contextActions={contextActions}
withPortalForMenu
>

23
src/components/left/main/Chat.scss
View File

@ -25,11 +25,6 @@
transition: transform 0.2s ease-out;
}
&.animate-collapse {
will-change: transform;
transition: transform var(--layer-transition);
}
&:hover,
&.ListItem.has-menu-open {
.Avatar.online::after {
@ -160,6 +155,15 @@
&.forum {
--color-chat-username: var(--color-text);
.ListItem-button {
padding-top: 0.25rem;
padding-bottom: 0.375rem;
}
.title {
line-height: 1.375rem;
}
}
.ripple-container {
@ -167,9 +171,10 @@
}
.status {
height: 3.375rem;
position: relative;
flex-shrink: 0;
align-self: stretch;
display: flex;
align-items: center;
z-index: 1;
background: var(--background-color);
}
@ -198,10 +203,6 @@
.info {
transition: opacity 300ms ease, transform var(--layer-transition);
.subtitle {
margin-top: -0.125rem;
}
.icon-muted {
font-size: 1.25rem;
margin-top: -0.0625rem;

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

@ -66,7 +66,6 @@ type OwnProps = {
animationType: ChatAnimationTypes;
isPinned?: boolean;
offsetTop: number;
offsetCollapseDelta: number;
observeIntersection?: ObserveFn;
onDragEnter?: (chatId: string) => void;
};
@ -111,7 +110,6 @@ const Chat: FC<OwnProps & StateProps> = ({
actionTargetMessage,
actionTargetChatId,
offsetTop,
offsetCollapseDelta,
draft,
animationLevel,
isSelected,
@ -233,7 +231,6 @@ const Chat: FC<OwnProps & StateProps> = ({
contextActions={contextActions}
onClick={handleClick}
onDragEnter={handleDragEnter}
offsetCollapseDelta={offsetCollapseDelta}
withPortalForMenu
>
<div className="status">

34
src/components/left/main/ChatList.tsx
View File

@ -1,7 +1,7 @@
import React, {
memo, useEffect, useRef, useCallback, useMemo,
memo, useEffect, useRef, useCallback,
} from '../../../lib/teact/teact';
import { getActions, getGlobal } from '../../../global';
import { getActions } from '../../../global';
import type { FC } from '../../../lib/teact/teact';
import type { FolderEditDispatch } from '../../../hooks/reducers/useFoldersReducer';
@ -11,13 +11,13 @@ import type { GlobalState } from '../../../global/types';
import {
ALL_FOLDER_ID,
ARCHIVED_FOLDER_ID, ARCHIVE_MINIMIZED_HEIGHT, CHAT_HEIGHT_FORUM_PX,
ARCHIVED_FOLDER_ID,
ARCHIVE_MINIMIZED_HEIGHT,
CHAT_HEIGHT_PX,
CHAT_LIST_SLICE,
} from '../../../config';
import { IS_MAC_OS, IS_PWA } from '../../../util/environment';
import { getPinnedChatsCount, getOrderKey } from '../../../util/folderManager';
import { selectChat } from '../../../global/selectors';
import buildClassName from '../../../util/buildClassName';
import useInfiniteScroll from '../../../hooks/useInfiniteScroll';
@ -26,7 +26,6 @@ import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver'
import { useHotkeys } from '../../../hooks/useHotkeys';
import useDebouncedCallback from '../../../hooks/useDebouncedCallback';
import useChatOrderDiff from './hooks/useChatOrderDiff';
import useCollapseWithForumPanel from './hooks/useCollapseWithForumPanel';
import InfiniteScroll from '../../ui/InfiniteScroll';
import Loading from '../../ui/Loading';
@ -134,8 +133,6 @@ const ChatList: FC<OwnProps> = ({
throttleMs: INTERSECTION_THROTTLE,
});
useCollapseWithForumPanel(containerRef, isForumPanelOpen);
const handleArchivedClick = useCallback(() => {
onLeftColumnContentChange(LeftColumnContent.Archived);
closeForumPanel();
@ -165,32 +162,14 @@ const ChatList: FC<OwnProps> = ({
shouldIgnoreDragRef.current = true;
}, []);
const viewportOffsetPx = useMemo(() => {
if (!viewportIds?.length) return 0;
const global = getGlobal();
const viewportOffset = orderedIds!.indexOf(viewportIds![0]);
return archiveHeight + orderedIds!.reduce((acc, id, i) => {
if (i >= viewportOffset) {
return acc;
}
return acc + (selectChat(global, id)!.isForum ? CHAT_HEIGHT_FORUM_PX : CHAT_HEIGHT_PX);
}, 0);
}, [archiveHeight, orderedIds, viewportIds]);
function renderChats() {
const viewportOffset = orderedIds!.indexOf(viewportIds![0]);
const global = getGlobal();
const pinnedCount = getPinnedChatsCount(resolvedFolderId) || 0;
let currentChatListHeight = viewportOffsetPx;
return viewportIds!.map((id, i) => {
const isPinned = viewportOffset + i < pinnedCount;
const expendedOffsetTop = currentChatListHeight;
const collapsedOffsetTop = archiveHeight + (viewportOffset + i) * CHAT_HEIGHT_PX;
currentChatListHeight += (selectChat(global, id)?.isForum ? CHAT_HEIGHT_FORUM_PX : CHAT_HEIGHT_PX);
const offsetTop = archiveHeight + (viewportOffset + i) * CHAT_HEIGHT_PX;
return (
<Chat
@ -201,8 +180,7 @@ const ChatList: FC<OwnProps> = ({
folderId={folderId}
animationType={getAnimationType(id)}
orderDiff={orderDiffById[id]}
offsetTop={isForumPanelOpen ? collapsedOffsetTop : expendedOffsetTop}
offsetCollapseDelta={expendedOffsetTop - collapsedOffsetTop}
offsetTop={offsetTop}
observeIntersection={observe}
onDragEnter={handleDragEnter}
/>

36
src/components/left/main/hooks/useCollapseWithForumPanel.ts
View File

@ -1,36 +0,0 @@
import { useLayoutEffect } from '../../../../lib/teact/teact';
import { fastRaf } from '../../../../util/schedulers';
import { ANIMATION_END_DELAY } from '../../../../config';
const ANIMATION_DURATION = 450;
// Reduce height of forum chat items when opening Forum Panel
export default function useCollapseWithForumPanel(
containerRef: React.RefObject<HTMLDivElement>,
isForumPanelOpen = false,
) {
useLayoutEffect(() => {
const chatEls = Array.from(containerRef.current!.querySelectorAll<HTMLDivElement>('.Chat'));
chatEls.forEach((chatEl) => {
const offsetCollapseDelta = Number(chatEl.dataset.offsetCollapseDelta);
chatEl.style.transform = `translateY(${isForumPanelOpen ? offsetCollapseDelta : -offsetCollapseDelta!}px)`;
});
fastRaf(() => {
chatEls.forEach((chatEl) => {
chatEl.classList.add('animate-collapse');
chatEl.style.transform = '';
});
});
setTimeout(() => {
// Wait one more frame for better animation performance
fastRaf(() => {
chatEls.forEach((chatEl) => {
chatEl.classList.remove('animate-collapse');
});
});
}, ANIMATION_DURATION + ANIMATION_END_DELAY);
}, [containerRef, isForumPanelOpen]);
}

32
src/components/ui/ListItem.scss
View File

@ -3,7 +3,7 @@
body.is-ios &,
body.is-android & {
&:not(:last-of-type)::after {
&::after {
content: "";
position: absolute;
bottom: 0;
@ -14,6 +14,10 @@
box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers);
}
&:last-of-type::after {
display: none;
}
&.small-icon::after {
left: 3.875rem;
}
@ -23,11 +27,9 @@
}
}
body.is-android & {
&:not(:last-of-type)::after {
/* stylelint-disable-next-line plugin/whole-pixel */
box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers-android);
}
body.is-android &::after {
/* stylelint-disable-next-line plugin/whole-pixel */
box-shadow: inset 0 -0.03125rem 0 0 var(--color-dividers-android);
}
.ListItem-button {
@ -38,10 +40,10 @@
box-shadow: none !important;
outline: none !important;
display: flex;
align-items: center;
padding: 1rem;
position: relative;
overflow: hidden;
line-height: 1.5rem;
white-space: nowrap;
color: var(--color-text);
border-radius: var(--border-radius-default);
@ -60,6 +62,10 @@
}
}
.title, .subtitle {
line-height: 1.5rem;
}
.user-status,
.group-status,
.title,
@ -181,12 +187,11 @@
}
.Avatar {
flex-shrink: 0;
margin-right: 0.5rem;
}
.info {
flex-grow: 1;
flex: 1;
overflow: hidden;
}
@ -214,7 +219,6 @@
.status,
.typing-status {
font-size: 1rem;
line-height: 1.6875rem;
margin: 0;
overflow: hidden;
white-space: nowrap;
@ -238,9 +242,15 @@
.ChatInfo {
display: flex;
align-items: center;
flex-grow: 1;
flex: 1;
overflow: hidden;
.info {
display: flex;
flex-direction: column;
justify-content: center;
}
.custom-title {
padding-inline-start: 1rem;
font-size: 0.875rem;

3
src/components/ui/ListItem.tsx
View File

@ -54,7 +54,6 @@ interface OwnProps {
multiline?: boolean;
isStatic?: boolean;
contextActions?: MenuItemContextAction[];
offsetCollapseDelta?: number;
withPortalForMenu?: boolean;
href?: string;
onMouseDown?: (e: React.MouseEvent<HTMLDivElement>) => void;
@ -85,7 +84,6 @@ const ListItem: FC<OwnProps> = ({
isStatic,
contextActions,
withPortalForMenu,
offsetCollapseDelta,
href,
onMouseDown,
onClick,
@ -216,7 +214,6 @@ const ListItem: FC<OwnProps> = ({
className={fullClassName}
dir={lang.isRtl ? 'rtl' : undefined}
style={style}
data-offset-collapse-delta={offsetCollapseDelta}
onMouseDown={onMouseDown}
onDragEnter={onDragEnter}
>

1
src/config.ts
View File

@ -63,7 +63,6 @@ export const MESSAGE_LIST_VIEWPORT_LIMIT = MESSAGE_LIST_SLICE * 2;
export const ARCHIVE_MINIMIZED_HEIGHT = 36;
export const CHAT_HEIGHT_PX = 72;
export const CHAT_HEIGHT_FORUM_PX = 94;
export const TOPIC_HEIGHT_PX = 65;
export const CHAT_LIST_SLICE = isBigScreen ? 30 : 25;
export const CHAT_LIST_LOAD_SLICE = 100;

42
src/styles/_common.scss
View File

@ -93,20 +93,8 @@
}
.Chat[dir="rtl"] .info {
transform: translateX(25%);
transform: translateX(20%);
}
.group .ListItem-button {
height: 4.5rem;
}
}
.scroll-container {
position: relative;
}
.ListItem.chat-item-clickable {
margin: 0;
}
@media (max-width: 600px) {
@ -114,11 +102,39 @@
padding-right: 0;
}
.scroll-container {
position: relative;
}
.no-results {
color: var(--color-text-meta);
margin-top: 2rem;
text-align: center;
}
.Avatar {
transition: transform var(--layer-transition);
}
.ListItem {
&.chat-item-clickable {
margin: 0;
}
}
body.is-ios &,
body.is-android & {
.ListItem::after {
opacity: 1;
transition: opacity var(--layer-transition);
}
&.forum-panel-open {
.ListItem::after {
opacity: 0;
}
}
}
}
// Used by Avatar and ProfilePhoto components