Left Column: Support resizing; Better support for large displays (#1484)

Ajaxy · Oct 13, 2021 · 5180eb0 · 5180eb0
1 parent 03ea0cb
commit 5180eb0
Show file tree

Hide file tree

Showing 16 changed files with 296 additions and 110 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -1 +1 @@
-> 2%, last 2 edge versions
+> 2%, last 2 edge versions, iOS >= 13.4, firefox >= 68, firefoxandroid >= 68, last 2 safari major versions
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "@typescript-eslint/eslint-plugin": "^4.29.1",
     "@typescript-eslint/parser": "^4.29.1",
     "@webpack-cli/serve": "^1.5.1",
-    "autoprefixer": "^10.3.1",
+    "autoprefixer": "^10.3.7",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "browserlist": "^1.0.1",

diff --git a/src/components/common/UiLoader.scss b/src/components/common/UiLoader.scss
@@ -11,16 +11,33 @@
     right: 0;
     margin: 0 auto;
     width: 100%;
-    max-width: 1680px;
+    max-width: 1920px;
     height: 100%;
     z-index: var(--z-ui-loader-mask);
     display: flex;
 
+
+    @media (min-width: 600px) {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 100%;
+    }
+
     .left {
       flex: 1;
       background: var(--color-background);
-      min-width: 15.5rem;
-      max-width: 26.5rem;
+      min-width: 18rem;
+      width: 26.5rem;
+      max-width: 33vw;
+
+      @media (min-width: 926px) {
+        width: 25vw;
+        max-width: 40vw;
+      }
+
+      @media (min-width: 1276px) {
+        max-width: 33vw;
+      }
 
       @media (min-width: 1680px) {
         border-left: 1px solid var(--color-borders);

diff --git a/src/components/common/UiLoader.tsx b/src/components/common/UiLoader.tsx
@@ -32,6 +32,7 @@ type StateProps = Pick<GlobalState, 'uiReadyState' | 'shouldSkipHistoryAnimation
   hasCustomBackground?: boolean;
   hasCustomBackgroundColor: boolean;
   isRightColumnShown?: boolean;
+  leftColumnWidth?: number;
 };
 
 type DispatchProps = Pick<GlobalActions, 'setIsUiReady'>;
@@ -83,6 +84,7 @@ const UiLoader: FC<OwnProps & StateProps & DispatchProps> = ({
   hasCustomBackgroundColor,
   isRightColumnShown,
   shouldSkipHistoryAnimations,
+  leftColumnWidth,
   setIsUiReady,
 }) => {
   const [isReady, markReady] = useFlag();
@@ -131,7 +133,11 @@ const UiLoader: FC<OwnProps & StateProps & DispatchProps> = ({
         <div className={buildClassName('mask', transitionClassNames)}>
           {page === 'main' ? (
             <>
-              <div className="left" />
+              <div
+                className="left"
+                // @ts-ignore teact feature
+                style={leftColumnWidth ? `width: ${leftColumnWidth}px` : undefined}
+              />
               <div
                 className={buildClassName(
                   'middle',
@@ -162,6 +168,7 @@ export default withGlobal<OwnProps>(
       hasCustomBackground: Boolean(background),
       hasCustomBackgroundColor: Boolean(backgroundColor),
       isRightColumnShown: selectIsRightColumnShown(global),
+      leftColumnWidth: global.leftColumnWidth,
     };
   },
   (setGlobal, actions): DispatchProps => pick(actions, ['setIsUiReady']),

diff --git a/src/components/left/LeftColumn.scss b/src/components/left/LeftColumn.scss
@@ -1,7 +1,3 @@
-#LeftColumn {
-  overflow: hidden;
-}
-
 #NewChat {
   height: 100%;
 }

diff --git a/src/components/left/LeftColumn.tsx b/src/components/left/LeftColumn.tsx
@@ -1,5 +1,5 @@
 import React, {
-  FC, memo, useCallback, useEffect, useState,
+  FC, memo, useCallback, useEffect, useRef, useState,
 } from '../../lib/teact/teact';
 import { withGlobal } from '../../lib/teact/teactn';
 
@@ -10,6 +10,7 @@ import { LAYERS_ANIMATION_NAME } from '../../util/environment';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { pick } from '../../util/iteratees';
 import useFoldersReducer from '../../hooks/reducers/useFoldersReducer';
+import { useResize } from '../../hooks/useResize';
 
 import Transition from '../ui/Transition';
 import LeftMain from './main/LeftMain';
@@ -24,11 +25,12 @@ type StateProps = {
   searchDate?: number;
   activeChatFolder: number;
   shouldSkipHistoryAnimations?: boolean;
+  leftColumnWidth?: number;
 };
 
 type DispatchProps = Pick<GlobalActions, (
   'setGlobalSearchQuery' | 'setGlobalSearchChatId' | 'resetChatCreation' | 'setGlobalSearchDate' |
-  'loadPasswordInfo' | 'clearTwoFaError'
+  'loadPasswordInfo' | 'clearTwoFaError' | 'setLeftColumnWidth' | 'resetLeftColumnWidth'
 )>;
 
 enum ContentType {
@@ -50,13 +52,18 @@ const LeftColumn: FC<StateProps & DispatchProps> = ({
   searchDate,
   activeChatFolder,
   shouldSkipHistoryAnimations,
+  leftColumnWidth,
   setGlobalSearchQuery,
   setGlobalSearchChatId,
   resetChatCreation,
   setGlobalSearchDate,
   loadPasswordInfo,
   clearTwoFaError,
+  setLeftColumnWidth,
+  resetLeftColumnWidth,
 }) => {
+  // eslint-disable-next-line no-null/no-null
+  const resizeRef = useRef<HTMLDivElement>(null);
   const [content, setContent] = useState<LeftColumnContent>(LeftColumnContent.ChatList);
   const [settingsScreen, setSettingsScreen] = useState(SettingsScreens.Main);
   const [contactsFilter, setContactsFilter] = useState<string>('');
@@ -257,81 +264,95 @@ const LeftColumn: FC<StateProps & DispatchProps> = ({
     }
   }, [clearTwoFaError, loadPasswordInfo, settingsScreen]);
 
+  const {
+    initResize, resetResize, handleMouseUp,
+  } = useResize(resizeRef, setLeftColumnWidth, resetLeftColumnWidth, leftColumnWidth);
+
   const handleSettingsScreenSelect = (screen: SettingsScreens) => {
     setContent(LeftColumnContent.Settings);
     setSettingsScreen(screen);
   };
 
   return (
-    <Transition
+    <div
       id="LeftColumn"
-      name={shouldSkipHistoryAnimations ? 'none' : LAYERS_ANIMATION_NAME}
-      renderCount={RENDER_COUNT}
-      activeKey={contentType}
-      shouldCleanup
-      cleanupExceptionKey={ContentType.Main}
+      ref={resizeRef}
     >
-      {(isActive) => {
-        switch (contentType) {
-          case ContentType.Archived:
-            return (
-              <ArchivedChats
-                isActive={isActive}
-                onReset={handleReset}
-                onContentChange={setContent}
-              />
-            );
-          case ContentType.Settings:
-            return (
-              <Settings
-                isActive={isActive}
-                currentScreen={settingsScreen}
-                foldersState={foldersState}
-                foldersDispatch={foldersDispatch}
-                onScreenSelect={handleSettingsScreenSelect}
-                onReset={handleReset}
-                shouldSkipTransition={shouldSkipHistoryAnimations}
-              />
-            );
-          case ContentType.NewChannel:
-            return (
-              <NewChat
-                key={lastResetTime}
-                isActive={isActive}
-                isChannel
-                content={content}
-                onContentChange={setContent}
-                onReset={handleReset}
-              />
-            );
-          case ContentType.NewGroup:
-            return (
-              <NewChat
-                key={lastResetTime}
-                isActive={isActive}
-                content={content}
-                onContentChange={setContent}
-                onReset={handleReset}
-              />
-            );
-          default:
-            return (
-              <LeftMain
-                content={content}
-                searchQuery={searchQuery}
-                searchDate={searchDate}
-                contactsFilter={contactsFilter}
-                foldersDispatch={foldersDispatch}
-                onContentChange={setContent}
-                onSearchQuery={handleSearchQuery}
-                onScreenSelect={handleSettingsScreenSelect}
-                onReset={handleReset}
-                shouldSkipTransition={shouldSkipHistoryAnimations}
-              />
-            );
-        }
-      }}
-    </Transition>
+      <Transition
+        name={shouldSkipHistoryAnimations ? 'none' : LAYERS_ANIMATION_NAME}
+        renderCount={RENDER_COUNT}
+        activeKey={contentType}
+        shouldCleanup
+        cleanupExceptionKey={ContentType.Main}
+      >
+        {(isActive) => {
+          switch (contentType) {
+            case ContentType.Archived:
+              return (
+                <ArchivedChats
+                  isActive={isActive}
+                  onReset={handleReset}
+                  onContentChange={setContent}
+                />
+              );
+            case ContentType.Settings:
+              return (
+                <Settings
+                  isActive={isActive}
+                  currentScreen={settingsScreen}
+                  foldersState={foldersState}
+                  foldersDispatch={foldersDispatch}
+                  onScreenSelect={handleSettingsScreenSelect}
+                  onReset={handleReset}
+                  shouldSkipTransition={shouldSkipHistoryAnimations}
+                />
+              );
+            case ContentType.NewChannel:
+              return (
+                <NewChat
+                  key={lastResetTime}
+                  isActive={isActive}
+                  isChannel
+                  content={content}
+                  onContentChange={setContent}
+                  onReset={handleReset}
+                />
+              );
+            case ContentType.NewGroup:
+              return (
+                <NewChat
+                  key={lastResetTime}
+                  isActive={isActive}
+                  content={content}
+                  onContentChange={setContent}
+                  onReset={handleReset}
+                />
+              );
+            default:
+              return (
+                <LeftMain
+                  content={content}
+                  searchQuery={searchQuery}
+                  searchDate={searchDate}
+                  contactsFilter={contactsFilter}
+                  foldersDispatch={foldersDispatch}
+                  onContentChange={setContent}
+                  onSearchQuery={handleSearchQuery}
+                  onScreenSelect={handleSettingsScreenSelect}
+                  onReset={handleReset}
+                  shouldSkipTransition={shouldSkipHistoryAnimations}
+                />
+              );
+          }
+        }}
+      </Transition>
+      <div
+        className="resize-handle"
+        onMouseDown={initResize}
+        onMouseUp={handleMouseUp}
+        onDoubleClick={resetResize}
+      />
+    </div>
   );
 };
 
@@ -346,13 +367,14 @@ export default memo(withGlobal(
         activeChatFolder,
       },
       shouldSkipHistoryAnimations,
+      leftColumnWidth,
     } = global;
     return {
-      searchQuery: query, searchDate: date, activeChatFolder, shouldSkipHistoryAnimations,
+      searchQuery: query, searchDate: date, activeChatFolder, shouldSkipHistoryAnimations, leftColumnWidth,
     };
   },
   (setGlobal, actions): DispatchProps => pick(actions, [
     'setGlobalSearchQuery', 'setGlobalSearchChatId', 'resetChatCreation', 'setGlobalSearchDate',
-    'loadPasswordInfo', 'clearTwoFaError',
+    'loadPasswordInfo', 'clearTwoFaError', 'setLeftColumnWidth', 'resetLeftColumnWidth',
   ]),
 )(LeftColumn));