fix(flat-components): periodic room detail page overflow (#1404)

* fix(flat-components): periodic room detail page overflow * refactor(flat-components): adjust layout of the MainPageLayoutHorizontal component * style(flat-components): adjust border color * chore(i18n): add i18n
netless-io · Mar 2, 2022 · f7121ff · f7121ff
1 parent b276207
commit f7121ff
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 69 deletions.
diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less
@@ -10,6 +10,7 @@
 }
 
 .periodic-room-detail-page-header-container {
+    border-radius: 6px;
     padding: 16px 24px;
 }
 

diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/index.tsx b/packages/flat-components/src/components/MainPageLayoutHorizontal/index.tsx
@@ -26,17 +26,11 @@ export const MainPageLayoutHorizontal: React.FC<MainPageLayoutHorizontalProps> =
     return (
         <div className="main-horizontal-layout-container">
             <MainPageNavHorizontal {...restProps} activeKeys={activeKeys} onClick={onClick} />
-            <div className="main-horizontal-layout-content-background fancy-scrollbar">
-                <div className="main-horizontal-layout-content-container">
-                    {subMenu && (
-                        <MainPageSubMenu
-                            activeKeys={activeKeys}
-                            subMenu={subMenu}
-                            onClick={onClick}
-                        />
-                    )}
-                    <div className="main-horizontal-layout-content">{children}</div>
-                </div>
+            <div className="main-horizontal-layout-content-container fancy-scrollbar">
+                {subMenu && (
+                    <MainPageSubMenu activeKeys={activeKeys} subMenu={subMenu} onClick={onClick} />
+                )}
+                <div className="main-horizontal-layout-content">{children}</div>
             </div>
         </div>
     );

diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less
@@ -1,28 +1,25 @@
 .main-horizontal-layout-container {
     height: 100vh;
-}
-
-.main-horizontal-layout-content-background {
-    height: calc(100vh - 50px);
-    padding: 16px 0;
-    background-color: var(--grey-0);
+    display: flex;
+    flex-direction: column;
 }
 
 .main-horizontal-layout-content-container {
+    flex: 1;
     display: flex;
     width: 960px;
-    height: 100%;
     margin: 0 auto;
-    border-radius: 8px 8px 0px 0px;
+    padding: 16px 0;
+    border-radius: 6px;
+    background-color: var(--grey-0);
 }
 
 .main-horizontal-layout-content {
     flex: 1;
-    height: 100%;
 }
 
 .flat-color-scheme-dark {
-    .main-horizontal-layout-content-background {
+    .main-horizontal-layout-content-container {
         background-color: var(--grey-12);
     }
 }
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less
@@ -1,14 +1,14 @@
+@import "../../theme/fancy-scrollbar.less";
+
 .periodic-room-panel-container {
-    width: 100%;
     height: 100%;
-    background-color: #fff;
-}
-
-.periodic-room-panel-body {
-    max-width: 840px;
     min-width: 540px;
-    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    padding: 0 48px;
     padding-top: 24px;
+    border-radius: 6px;
+    background-color: #fff;
 }
 
 .periodic-room-panel-btn-list {
@@ -54,10 +54,13 @@
 .periodic-room-panel-table-line {
     width: 100%;
     margin-top: 16px;
-    border-bottom: solid 1px #dbe1ea;
+    border-bottom: solid 1px var(--grey-0);
 }
 
 .periodic-room-panel-table-container {
+    .fancy-scrollbar-mixin();
+    flex: 1;
+
     .ant-table-tbody > tr > td {
         color: var(--text);
         border-bottom: 1px solid transparent;
@@ -81,7 +84,7 @@
         background-color: var(--grey-10);
     }
 
-    .periodic-room-panel-body {
-        background-color: var(--grey-10);
+    .periodic-room-panel-table-line {
+        border-bottom: solid 1px var(--grey-8);
     }
 }
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx
@@ -156,8 +156,8 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
     };
 
     return (
-        <div className="periodic-room-panel-container">
-            <div className="periodic-room-panel-body">
+        <>
+            <div className="periodic-room-panel-container">
                 <div className="periodic-room-panel-tips">
                     <div className="periodic-room-panel-tips-title">
                         {t("repeat-frequency", {
@@ -204,6 +204,6 @@ export const PeriodicRoomPanel: React.FC<PeriodicRoomPanelProps> = ({
                 onCancel={() => setCancelPeriodicRoomModalVisible(false)}
                 onCancelPeriodicRoom={onCancelPeriodicRoom}
             />
-        </div>
+        </>
     );
 };
diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx b/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx
@@ -12,12 +12,11 @@ import { globalStore } from "../../stores/GlobalStore";
 import { RouteNameType, RouteParams, usePushHistory } from "../../utils/routes";
 import { cancelPeriodicRoom, cancelPeriodicSubRoom } from "../../api-middleware/flatServer";
 import { FLAT_WEB_BASE_URL } from "../../constants/process";
-
-/**
- * TODO: we forget set i18n in current file!!!
- */
+import { useTranslation } from "react-i18next";
 
 export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPage() {
+    const { t } = useTranslation();
+
     const params = useParams<RouteParams<RouteNameType.PeriodicRoomDetailPage>>();
     const roomStore = useContext(RoomStoreContext);
     const [cancelRoomUUIDList, setCancelRoomUUIDList] = useState<string[]>([]);
@@ -85,7 +84,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
                     return room && !nextList.includes(room.roomUUID);
                 });
 
-                void message.success("已取消该房间");
+                void message.success(t("the-room-has-been-cancelled"));
 
                 if (nextRooms.length === 0) {
                     pushHistory(RouteNameType.HomePage);
@@ -109,7 +108,7 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
         }
 
         pushHistory(RouteNameType.HomePage);
-        await message.success("已取消该房间");
+        await message.success(t("the-room-has-been-cancelled"));
     }
 
     function jumpToRoomDetailPage(roomUUID: string, periodicUUID: string): void {
@@ -136,21 +135,19 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
 
     return (
         <div className="periodic-room-detail-page-container">
-            <div className="periodic-room-detail-page-panel-container fancy-scrollbar">
-                <PeriodicRoomPanel
-                    inviteBaseUrl={FLAT_WEB_BASE_URL}
-                    isCreator={isCreator}
-                    jumpToModifyOrdinaryRoomPage={jumpToModifyOrdinaryRoomPage}
-                    jumpToModifyPeriodicRoomPage={jumpToModifyPeriodicRoomPage}
-                    jumpToRoomDetailPage={jumpToRoomDetailPage}
-                    periodicInfo={periodicInfo.periodic}
-                    rooms={rooms}
-                    userName={ownerName}
-                    onCancelPeriodicRoom={onCancelPeriodicRoom}
-                    onCancelSubPeriodicRoom={onCancelSubPeriodicRoom}
-                    onCopyInvitation={text => navigator.clipboard.writeText(text)}
-                />
-            </div>
+            <PeriodicRoomPanel
+                inviteBaseUrl={FLAT_WEB_BASE_URL}
+                isCreator={isCreator}
+                jumpToModifyOrdinaryRoomPage={jumpToModifyOrdinaryRoomPage}
+                jumpToModifyPeriodicRoomPage={jumpToModifyPeriodicRoomPage}
+                jumpToRoomDetailPage={jumpToRoomDetailPage}
+                periodicInfo={periodicInfo.periodic}
+                rooms={rooms}
+                userName={ownerName}
+                onCancelPeriodicRoom={onCancelPeriodicRoom}
+                onCancelSubPeriodicRoom={onCancelSubPeriodicRoom}
+                onCopyInvitation={text => navigator.clipboard.writeText(text)}
+            />
         </div>
     );
 });

diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less b/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less
@@ -1,25 +1,11 @@
 .periodic-room-detail-page-container {
-    display: flex;
-    flex-direction: column;
     height: 100%;
 }
 
-.periodic-room-detail-page-header-container {
-    width: 960px;
-    margin: 0 auto;
-}
-
 .periodic-room-detail-page-header-title {
     margin: 0;
     font-size: 16px;
     font-weight: 500;
     color: var(--text-strong);
     line-height: 1;
 }
-
-.periodic-room-detail-page-panel-container {
-    flex: 1;
-    width: 960px;
-    margin: 0 auto;
-    border-radius: 6px;
-}
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,6 +10,7 @@ @@
     }
     .periodic-room-detail-page-header-container {
+        border-radius: 6px;
         padding: 16px 24px;
     }
@@ Expand Down @@