From f7121ff8d46c76e6370387be75641e29d465de37 Mon Sep 17 00:00:00 2001 From: Cheerego7 <48879533+Cheerego7@users.noreply.github.com> Date: Wed, 2 Mar 2022 18:27:05 +0800 Subject: [PATCH] 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 --- .../pages/PeriodicRoomDetailPage/index.less | 1 + .../MainPageLayoutHorizontal/index.tsx | 16 +++----- .../MainPageLayoutHorizontal/style.less | 17 ++++---- .../components/PeriodicRoomPage/index.less | 23 ++++++----- .../src/components/PeriodicRoomPage/index.tsx | 6 +-- .../pages/PeriodicRoomDetailPage/index.tsx | 39 +++++++++---------- .../pages/PeriodicRoomDetailPage/style.less | 14 ------- 7 files changed, 47 insertions(+), 69 deletions(-) diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less index 30a50bd202d..00f968bbb49 100644 --- 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 index 82865ab2740..96e1537c314 100644 --- 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 = return (
-
-
- {subMenu && ( - - )} -
{children}
-
+
+ {subMenu && ( + + )} +
{children}
); diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less index a241c677a3e..b93ce24a3e7 100644 --- 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 index 6d71b5f5096..59ac968536b 100644 --- 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 index 70b23ab79c0..ea1cf0e0891 100644 --- 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 = ({ }; return ( -
-
+ <> +
{t("repeat-frequency", { @@ -204,6 +204,6 @@ export const PeriodicRoomPanel: React.FC = ({ onCancel={() => setCancelPeriodicRoomModalVisible(false)} onCancelPeriodicRoom={onCancelPeriodicRoom} /> -
+ ); }; diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx b/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx index c7c3d1da624..dd6bbc03ea2 100644 --- 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>(); const roomStore = useContext(RoomStoreContext); const [cancelRoomUUIDList, setCancelRoomUUIDList] = useState([]); @@ -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 (
-
- navigator.clipboard.writeText(text)} - /> -
+ navigator.clipboard.writeText(text)} + />
); }); diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less b/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less index 9c66e4db0f1..2636631b059 100644 --- a/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less +++ b/web/flat-web/src/pages/PeriodicRoomDetailPage/style.less @@ -1,14 +1,7 @@ .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; @@ -16,10 +9,3 @@ color: var(--text-strong); line-height: 1; } - -.periodic-room-detail-page-panel-container { - flex: 1; - width: 960px; - margin: 0 auto; - border-radius: 6px; -}