From f18548d4a34744ac91700937609e1c6d82e02038 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Tue, 28 Feb 2023 18:43:53 +0100 Subject: [PATCH] Chat: Use normal list item height for forum --- .../common/ChatForumLastMessage.module.scss | 8 ++++ .../common/ChatForumLastMessage.tsx | 8 ++-- src/components/common/LastMessageMeta.scss | 3 -- src/components/left/main/Archive.tsx | 1 - src/components/left/main/Chat.scss | 23 +++++----- src/components/left/main/Chat.tsx | 3 -- src/components/left/main/ChatList.tsx | 34 +++------------ .../main/hooks/useCollapseWithForumPanel.ts | 36 ---------------- src/components/ui/ListItem.scss | 32 +++++++++----- src/components/ui/ListItem.tsx | 3 -- src/config.ts | 1 - src/styles/_common.scss | 42 +++++++++++++------ 12 files changed, 80 insertions(+), 114 deletions(-) delete mode 100644 src/components/left/main/hooks/useCollapseWithForumPanel.ts diff --git a/src/components/common/ChatForumLastMessage.module.scss b/src/components/common/ChatForumLastMessage.module.scss index f242547aa..96e427703 100644 --- a/src/components/common/ChatForumLastMessage.module.scss +++ b/src/components/common/ChatForumLastMessage.module.scss @@ -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 { diff --git a/src/components/common/ChatForumLastMessage.tsx b/src/components/common/ChatForumLastMessage.tsx index 97416afc5..769943d6e 100644 --- a/src/components/common/ChatForumLastMessage.tsx +++ b/src/components/common/ChatForumLastMessage.tsx @@ -90,7 +90,7 @@ const ChatForumLastMessage: FC = ({ style={overwrittenWidth ? `--overwritten-width: ${overwrittenWidth}px` : undefined} > {lastActiveTopic && ( - +
= ({
- +
)} {!lastActiveTopic &&
{lang('Loading')}
} - = ({
)} - +
); diff --git a/src/components/common/LastMessageMeta.scss b/src/components/common/LastMessageMeta.scss index bb2045ff9..aa2295d40 100644 --- a/src/components/common/LastMessageMeta.scss +++ b/src/components/common/LastMessageMeta.scss @@ -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; } } diff --git a/src/components/left/main/Archive.tsx b/src/components/left/main/Archive.tsx index 6673c0e4e..9e6ceb93c 100644 --- a/src/components/left/main/Archive.tsx +++ b/src/components/left/main/Archive.tsx @@ -154,7 +154,6 @@ const Archive: FC = ({ 'chat-item-archive', )} buttonClassName={styles.button} - offsetCollapseDelta={0} contextActions={contextActions} withPortalForMenu > diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index efffda7ad..be4354e2c 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -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; diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index bce4f7103..64e8f1344 100644 --- a/src/components/left/main/Chat.tsx +++ b/src/components/left/main/Chat.tsx @@ -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 = ({ actionTargetMessage, actionTargetChatId, offsetTop, - offsetCollapseDelta, draft, animationLevel, isSelected, @@ -233,7 +231,6 @@ const Chat: FC = ({ contextActions={contextActions} onClick={handleClick} onDragEnter={handleDragEnter} - offsetCollapseDelta={offsetCollapseDelta} withPortalForMenu >
diff --git a/src/components/left/main/ChatList.tsx b/src/components/left/main/ChatList.tsx index b1b2604b4..ea1322395 100644 --- a/src/components/left/main/ChatList.tsx +++ b/src/components/left/main/ChatList.tsx @@ -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 = ({ throttleMs: INTERSECTION_THROTTLE, }); - useCollapseWithForumPanel(containerRef, isForumPanelOpen); - const handleArchivedClick = useCallback(() => { onLeftColumnContentChange(LeftColumnContent.Archived); closeForumPanel(); @@ -165,32 +162,14 @@ const ChatList: FC = ({ 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 ( = ({ folderId={folderId} animationType={getAnimationType(id)} orderDiff={orderDiffById[id]} - offsetTop={isForumPanelOpen ? collapsedOffsetTop : expendedOffsetTop} - offsetCollapseDelta={expendedOffsetTop - collapsedOffsetTop} + offsetTop={offsetTop} observeIntersection={observe} onDragEnter={handleDragEnter} /> diff --git a/src/components/left/main/hooks/useCollapseWithForumPanel.ts b/src/components/left/main/hooks/useCollapseWithForumPanel.ts deleted file mode 100644 index aec2c57ad..000000000 --- a/src/components/left/main/hooks/useCollapseWithForumPanel.ts +++ /dev/null @@ -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, - isForumPanelOpen = false, -) { - useLayoutEffect(() => { - const chatEls = Array.from(containerRef.current!.querySelectorAll('.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]); -} diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss index 339a85eb4..5b377279a 100644 --- a/src/components/ui/ListItem.scss +++ b/src/components/ui/ListItem.scss @@ -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; diff --git a/src/components/ui/ListItem.tsx b/src/components/ui/ListItem.tsx index bed31c662..7f4356dae 100644 --- a/src/components/ui/ListItem.tsx +++ b/src/components/ui/ListItem.tsx @@ -54,7 +54,6 @@ interface OwnProps { multiline?: boolean; isStatic?: boolean; contextActions?: MenuItemContextAction[]; - offsetCollapseDelta?: number; withPortalForMenu?: boolean; href?: string; onMouseDown?: (e: React.MouseEvent) => void; @@ -85,7 +84,6 @@ const ListItem: FC = ({ isStatic, contextActions, withPortalForMenu, - offsetCollapseDelta, href, onMouseDown, onClick, @@ -216,7 +214,6 @@ const ListItem: FC = ({ className={fullClassName} dir={lang.isRtl ? 'rtl' : undefined} style={style} - data-offset-collapse-delta={offsetCollapseDelta} onMouseDown={onMouseDown} onDragEnter={onDragEnter} > diff --git a/src/config.ts b/src/config.ts index 63ced2d81..148f8ef8a 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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; diff --git a/src/styles/_common.scss b/src/styles/_common.scss index 9ed4616c4..fa490a461 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -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