diff --git a/src/components/common/ChatForumLastMessage.tsx b/src/components/common/ChatForumLastMessage.tsx index 769943d6e..daf252c26 100644 --- a/src/components/common/ChatForumLastMessage.tsx +++ b/src/components/common/ChatForumLastMessage.tsx @@ -11,11 +11,13 @@ import type { ObserveFn } from '../../hooks/useIntersectionObserver'; import type { FC } from '../../lib/teact/teact'; import type { ApiChat } from '../../api/types'; -import { REM } from './helpers/mediaDimensions'; +import { IS_TOUCH_ENV } from '../../util/environment'; import buildClassName from '../../util/buildClassName'; import { getOrderedTopics } from '../../global/helpers'; -import renderText from './helpers/renderText'; +import { getIsMobile } from '../../hooks/useAppLayout'; import useLang from '../../hooks/useLang'; +import { REM } from './helpers/mediaDimensions'; +import renderText from './helpers/renderText'; import TopicIcon from './TopicIcon'; @@ -60,7 +62,13 @@ const ChatForumLastMessage: FC = ({ function handleOpenTopic(e: React.MouseEvent) { if (lastActiveTopic.unreadCount === 0) return; e.stopPropagation(); - openChat({ id: chat.id, threadId: lastActiveTopic.id, shouldReplaceHistory: true }); + e.preventDefault(); + openChat({ + id: chat.id, + threadId: lastActiveTopic.id, + shouldReplaceHistory: true, + noForumTopicPanel: getIsMobile(), + }); } useLayoutEffect(() => { @@ -97,7 +105,8 @@ const ChatForumLastMessage: FC = ({ lastActiveTopic.unreadCount && styles.unread, )} ref={mainColumnRef} - onMouseDown={handleOpenTopic} + onMouseDown={IS_TOUCH_ENV ? undefined : handleOpenTopic} + onClick={IS_TOUCH_ENV ? handleOpenTopic : undefined} > = ({
{lastMessage} {!overwrittenWidth && !isReversedCorner && ( diff --git a/src/components/left/main/Archive.module.scss b/src/components/left/main/Archive.module.scss index c4c1fc432..6e84ea2f4 100644 --- a/src/components/left/main/Archive.module.scss +++ b/src/components/left/main/Archive.module.scss @@ -46,7 +46,7 @@ } &::after { - opacity: 0; + display: none; } } diff --git a/src/components/left/main/Chat.scss b/src/components/left/main/Chat.scss index be4354e2c..1f8be02c3 100644 --- a/src/components/left/main/Chat.scss +++ b/src/components/left/main/Chat.scss @@ -51,7 +51,7 @@ } &:last-of-type { - padding-bottom: 0.5rem; + border-bottom: 0.5rem solid transparent; // `margin` does not help, and `padding` affects forum indicator height } @media (max-width: 600px) { @@ -66,22 +66,9 @@ border-color: var(--color-chat-hover); } } - - &.selected-forum { - .avatar-badge-wrapper { - --outline-color: var(--color-chat-hover); - } - } } @media (min-width: 600px) { - &.selected-forum.forum, - &.selected-forum.forum:hover { - .avatar-badge-wrapper { - --outline-color: var(--color-chat-hover); - } - } - &.selected:not(.forum), &.selected:not(.forum):hover { --background-color: var(--color-chat-active) !important; @@ -144,7 +131,9 @@ } &.selected-forum { - --background-color: var(--color-chat-hover) !important; + &::before { + transform: translateX(0) scaleY(1) !important; + } } @media (max-width: 600px) { @@ -156,6 +145,30 @@ &.forum { --color-chat-username: var(--color-text); + &::before { + content: ''; + position: absolute; + top: 0.625rem; + bottom: 0.625rem; + left: -0.4375rem; // `.chat-list` left padding + width: 0.3125rem; + + transform: translateX(-0.375rem) scaleY(0.5); + transition: transform var(--layer-transition); + + background: var(--color-primary); + z-index: 1; + + border-start-end-radius: var(--border-radius-default); + border-end-end-radius: var(--border-radius-default); + } + + @media (max-width: 600px) { + &::before { + left: 0; + } + } + .ListItem-button { padding-top: 0.25rem; padding-bottom: 0.375rem; diff --git a/src/components/left/main/Chat.tsx b/src/components/left/main/Chat.tsx index 64e8f1344..dc793f290 100644 --- a/src/components/left/main/Chat.tsx +++ b/src/components/left/main/Chat.tsx @@ -157,7 +157,7 @@ const Chat: FC = ({ const handleClick = useCallback(() => { if (isForum) { - openForumPanel({ chatId }); + openForumPanel({ chatId }, { forceOnHeavyAnimation: true }); return; } diff --git a/src/styles/_common.scss b/src/styles/_common.scss index fa490a461..0339c9083 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -95,6 +95,16 @@ .Chat[dir="rtl"] .info { transform: translateX(20%); } + + .Avatar { + transform: scale(0.9); + } + } + + @media (min-width: 600px) { + &.forum-panel-open .selected-forum .Avatar { + transform: none; + } } @media (max-width: 600px) {