diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index dadadb805..f03783dbd 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -19,7 +19,12 @@ import { DARK_THEME_BG_COLOR, LIGHT_THEME_BG_COLOR, } from '../../config'; -import { IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV, MASK_IMAGE_DISABLED } from '../../util/environment'; +import { + IS_SINGLE_COLUMN_LAYOUT, + IS_TABLET_COLUMN_LAYOUT, + IS_TOUCH_ENV, + MASK_IMAGE_DISABLED, +} from '../../util/environment'; import { DropAreaState } from './composer/DropArea'; import { selectChat, @@ -67,6 +72,7 @@ type StateProps = { customBackground?: string; backgroundColor?: string; patternColor?: string; + isLeftColumnShown?: boolean; isRightColumnShown?: boolean; isBackgroundBlurred?: boolean; isMobileSearchActive?: boolean; @@ -96,6 +102,7 @@ const MiddleColumn: FC = ({ theme, backgroundColor, patternColor, + isLeftColumnShown, isRightColumnShown, isBackgroundBlurred, isMobileSearchActive, @@ -179,6 +186,10 @@ const MiddleColumn: FC = ({ openChat({ id: chatId }); }, [unpinAllMessages, openChat, closeUnpinModal, chatId]); + const handleTabletFocus = useCallback(() => { + openChat({ id: chatId }); + }, [openChat, chatId]); + const customBackgroundValue = useCustomBackground(theme, customBackground); const className = buildClassName( @@ -228,6 +239,7 @@ const MiddleColumn: FC = ({ --theme-background-color: ${backgroundColor || (theme === 'dark' ? DARK_THEME_BG_COLOR : LIGHT_THEME_BG_COLOR)}; `} + onClick={(IS_TABLET_COLUMN_LAYOUT && isLeftColumnShown) ? handleTabletFocus : undefined} >
= ({ const { width: windowWidth } = useWindowSize(); const isLeftColumnHideable = windowWidth <= MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN; - const shouldShowCloseButton = windowWidth >= MOBILE_SCREEN_MAX_WIDTH && isLeftColumnShown; + const shouldShowCloseButton = IS_TABLET_COLUMN_LAYOUT && isLeftColumnShown; // eslint-disable-next-line no-null/no-null const componentRef = useRef(null); @@ -183,7 +183,7 @@ const MiddleHeader: FC = ({ openChat({ id: chatId, threadId: MAIN_THREAD_ID, type: 'pinned' }); }, [openChat, chatId]); - const handleBackClick = useCallback(() => { + const handleBackClick = useCallback((e: React.MouseEvent) => { if (IS_SINGLE_COLUMN_LAYOUT) { const messageInput = document.getElementById(EDITABLE_INPUT_ID); if (messageInput) { @@ -191,7 +191,8 @@ const MiddleHeader: FC = ({ } } if (threadId === MAIN_THREAD_ID && messageListType === 'thread') { - if (IS_SINGLE_COLUMN_LAYOUT) { + if (IS_SINGLE_COLUMN_LAYOUT || shouldShowCloseButton) { + e.stopPropagation(); // Stop propagation to prevent chat re-opening on tablets openChat({ id: undefined }); } else { toggleLeftColumn(); @@ -203,8 +204,12 @@ const MiddleHeader: FC = ({ if (messageListType === 'scheduled' && isSelectModeActive) { exitMessageSelectMode(); } + openChat({ id: originChatId, threadId: MAIN_THREAD_ID }); - }, [openChat, originChatId, threadId, messageListType, toggleLeftColumn, isSelectModeActive, exitMessageSelectMode]); + }, [ + openChat, originChatId, threadId, messageListType, toggleLeftColumn, isSelectModeActive, exitMessageSelectMode, + shouldShowCloseButton, + ]); const unreadCount = useMemo(() => { if (!isLeftColumnHideable || !chatsById) { diff --git a/src/modules/actions/ui/misc.ts b/src/modules/actions/ui/misc.ts index c04f53069..f0d261393 100644 --- a/src/modules/actions/ui/misc.ts +++ b/src/modules/actions/ui/misc.ts @@ -2,7 +2,7 @@ import { addReducer } from '../../../lib/teact/teactn'; import { GlobalState } from '../../../global/types'; -import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment'; +import { IS_SINGLE_COLUMN_LAYOUT, IS_TABLET_COLUMN_LAYOUT } from '../../../util/environment'; import getReadableErrorText from '../../../util/getReadableErrorText'; import { selectCurrentMessageList } from '../../selectors'; @@ -58,7 +58,7 @@ addReducer('closeManagement', (global): GlobalState | undefined => { }); addReducer('openChat', (global, actions, payload) => { - if (!IS_SINGLE_COLUMN_LAYOUT) { + if (!IS_SINGLE_COLUMN_LAYOUT && !IS_TABLET_COLUMN_LAYOUT) { return undefined; } diff --git a/src/util/environment.ts b/src/util/environment.ts index 8dd96130f..471286f46 100644 --- a/src/util/environment.ts +++ b/src/util/environment.ts @@ -1,4 +1,5 @@ import { + MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN, MOBILE_SCREEN_MAX_WIDTH, MOBILE_SCREEN_LANDSCAPE_MAX_HEIGHT, MOBILE_SCREEN_LANDSCAPE_MAX_WIDTH, @@ -42,6 +43,10 @@ export const IS_TOUCH_ENV = window.matchMedia('(pointer: coarse)').matches; export const IS_SINGLE_COLUMN_LAYOUT = window.innerWidth <= MOBILE_SCREEN_MAX_WIDTH || ( window.innerWidth <= MOBILE_SCREEN_LANDSCAPE_MAX_WIDTH && window.innerHeight <= MOBILE_SCREEN_LANDSCAPE_MAX_HEIGHT ); +// Special layout, 1 column while chat opened, 2 columns while collapsed +export const IS_TABLET_COLUMN_LAYOUT = !IS_SINGLE_COLUMN_LAYOUT && ( + window.innerWidth <= MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN +); export const IS_VOICE_RECORDING_SUPPORTED = (navigator.mediaDevices && 'getUserMedia' in navigator.mediaDevices && ( window.AudioContext || (window as any).webkitAudioContext ));