Layout: Improvements for tablet UI (#1218)

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<StateProps & DispatchProps> = ({
   theme,
   backgroundColor,
   patternColor,
+  isLeftColumnShown,
   isRightColumnShown,
   isBackgroundBlurred,
   isMobileSearchActive,
@@ -179,6 +186,10 @@ const MiddleColumn: FC<StateProps & DispatchProps> = ({
     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<StateProps & DispatchProps> = ({
         --theme-background-color:
           ${backgroundColor || (theme === 'dark' ? DARK_THEME_BG_COLOR : LIGHT_THEME_BG_COLOR)};
       `}
+      onClick={(IS_TABLET_COLUMN_LAYOUT && isLeftColumnShown) ? handleTabletFocus : undefined}
     >
       <div
         id="middle-column-bg"
@@ -332,13 +344,14 @@ export default memo(withGlobal(
     } = global.settings.themes[theme] || {};
 
     const currentMessageList = selectCurrentMessageList(global);
-    const { chats: { listIds } } = global;
+    const { isLeftColumnShown, chats: { listIds } } = global;
 
     const state: StateProps = {
       theme,
       customBackground,
       backgroundColor,
       patternColor,
+      isLeftColumnShown,
       isRightColumnShown: selectIsRightColumnShown(global),
       isBackgroundBlurred,
       isMobileSearchActive: Boolean(IS_SINGLE_COLUMN_LAYOUT && selectCurrentTextSearch(global)),

src/components/middle/MiddleHeader.tsx

@@ -21,7 +21,7 @@ import {
   SAFE_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN,
   SAFE_SCREEN_WIDTH_FOR_CHAT_INFO,
 } from '../../config';
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import { IS_SINGLE_COLUMN_LAYOUT, IS_TABLET_COLUMN_LAYOUT } from '../../util/environment';
 import {
   isChatPrivate,
   isChatArchived,
@@ -156,7 +156,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
   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<HTMLDivElement>(null);
@@ -183,7 +183,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
     openChat({ id: chatId, threadId: MAIN_THREAD_ID, type: 'pinned' });
   }, [openChat, chatId]);
 
-  const handleBackClick = useCallback(() => {
+  const handleBackClick = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     if (IS_SINGLE_COLUMN_LAYOUT) {
       const messageInput = document.getElementById(EDITABLE_INPUT_ID);
       if (messageInput) {
@@ -191,7 +191,8 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
       }
     }
     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<OwnProps & StateProps & DispatchProps> = ({
     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) {

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;
   }
 

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
 ));