From 14cc519746f00405a8cf12a3f9ab5735991baa76 Mon Sep 17 00:00:00 2001 From: Monica <36325249+syt-honey@users.noreply.github.com> Date: Thu, 2 Nov 2023 10:45:25 +0800 Subject: [PATCH] refactor(style): adjust periodic bg (#2073) --- .../EditRoomBody/renderPeriodicForm.tsx | 10 +++--- .../EditRoomPage/EditRoomBody/style.less | 2 +- .../MainPageLayoutHorizontal/style.less | 2 +- .../components/PeriodicRoomPage/index.less | 31 ++++++++-------- .../src/components/PeriodicRoomPage/index.tsx | 36 +++++++++++-------- packages/flat-components/src/theme/theme.less | 3 +- packages/flat-i18n/locales/en.json | 1 - packages/flat-i18n/locales/zh-CN.json | 1 - 8 files changed, 45 insertions(+), 41 deletions(-) diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx index 3c98244c4c2..d7291e12d70 100644 --- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx +++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/renderPeriodicForm.tsx @@ -64,26 +64,26 @@ export const renderPeriodicForm = (t: FlatI18nTFunction, lang: string) =>
{t("time")} -
+ {periodic.weeks.length > 0 ? t("every-frequency", { freq: getWeekNames(periodic.weeks, lang) }) : t("no-frequency-selected")} -
+
{t("type")} -
{t(`class-room-type.${roomType}`)}
+ {t(`class-room-type.${roomType}`)}
{t("periodic")} -
+ {t("periodic-room-tip", { date: formatISODayWeekiii(periodic.endTime, lang), rate: periodic.rate, })} -
+
); diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less index ec8db18e419..ee3da9c2a81 100644 --- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less +++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/style.less @@ -135,7 +135,7 @@ } >div+div { - margin-top: 8px; + margin-top: 4px; } } diff --git a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less index b93ce24a3e7..c83d6d0ad40 100644 --- a/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less +++ b/packages/flat-components/src/components/MainPageLayoutHorizontal/style.less @@ -11,7 +11,7 @@ margin: 0 auto; padding: 16px 0; border-radius: 6px; - background-color: var(--grey-0); + background-color: #f6f6f6; } .main-horizontal-layout-content { diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.less b/packages/flat-components/src/components/PeriodicRoomPage/index.less index 7bf4e7c0065..44e8b4532d7 100644 --- a/packages/flat-components/src/components/PeriodicRoomPage/index.less +++ b/packages/flat-components/src/components/PeriodicRoomPage/index.less @@ -32,24 +32,21 @@ } .periodic-room-panel-tips { - background-color: var(--grey-0); - border-radius: 8px; - padding: 12px; + padding: 8px 16px; margin-bottom: 24px; -} - -.periodic-room-panel-tips-title { - color: #3381ff; -} + border-radius: 6px; + background-color: #f6f6f6; + font-size: 12px; -.periodic-room-panel-tips-type { - color: var(--text); - margin-top: 8px; - margin-bottom: 8px; -} + >div { + display: flex; + justify-content: space-between; + line-height: 24px; + } -.periodic-room-panel-tips-inner { - color: var(--text); + >div+div { + margin-top: 4px; + } } .periodic-room-panel-table-line { @@ -62,7 +59,7 @@ .fancy-scrollbar-mixin(); flex: 1; - .ant-table-tbody > tr > td { + .ant-table-tbody>tr>td { color: var(--text); border-bottom: 1px solid transparent; } @@ -88,4 +85,4 @@ .periodic-room-panel-table-line { border-bottom: solid 1px var(--grey-8); } -} +} \ No newline at end of file diff --git a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx index 571cc8981f3..73015cc2519 100644 --- a/packages/flat-components/src/components/PeriodicRoomPage/index.tsx +++ b/packages/flat-components/src/components/PeriodicRoomPage/index.tsx @@ -51,7 +51,7 @@ export const PeriodicRoomPanel: React.FC = ({ const yearMonthFormat = formatWithOptions({ locale }, "yyyy/MM"); const dayFormat = formatWithOptions({ locale }, "dd"); const timeSuffixFormat = format("HH:mm"); - const dayWeekFormat = formatWithOptions({ locale }, "yyyy/MM/dd iii"); + const dayWeekFormat = formatWithOptions({ locale }, "yyyy/MM/dd (iii)"); const hasRunning = rooms.some(room => [RoomStatus.Started, RoomStatus.Paused].includes(room?.roomStatus as RoomStatus), @@ -159,21 +159,29 @@ export const PeriodicRoomPanel: React.FC = ({ <>
-
- {t("repeat-frequency", { - week: getWeekNames(periodicInfo.weeks, language), - })} +
+ {t("time")} + + + {t("repeat-frequency", { + week: getWeekNames(periodicInfo.weeks, language), + })} +
-
- {t("schedule-room-type", { - type: t(`class-room-type.${periodicInfo.roomType}`), - })} +
+ {t("type")} + + {t(`class-room-type.${periodicInfo.roomType}`)}
-
- {t("schedule-room-detail", { - time: dayWeekFormat(periodicInfo.endTime), - length: rooms.length, - })} +
+ {t("periodic")} + + + {t("schedule-room-detail", { + time: dayWeekFormat(periodicInfo.endTime), + length: rooms.length, + })} +
diff --git a/packages/flat-components/src/theme/theme.less b/packages/flat-components/src/theme/theme.less index 3994f31150b..76676014b6a 100644 --- a/packages/flat-components/src/theme/theme.less +++ b/packages/flat-components/src/theme/theme.less @@ -86,7 +86,8 @@ html[lang^="zh"] .flat-theme-root { } .flat-theme-root { - background-color: var(--grey-0); + // @TODO: danger! more and more `#f6f6f6` were used + background-color: #f6f6f6; } .flat-color-scheme-dark { diff --git a/packages/flat-i18n/locales/en.json b/packages/flat-i18n/locales/en.json index 08214406169..1bbe262c298 100644 --- a/packages/flat-i18n/locales/en.json +++ b/packages/flat-i18n/locales/en.json @@ -269,7 +269,6 @@ "delete-room-records-tips": "Are you sure to delete the current room record?", "repeat-frequency": "Every {{week}}", "schedule-room-detail": "Ends at {{time}} with {{length}} rooms", - "schedule-room-type": "Room type: {{type}}", "view-all-rooms-in-periodic-rooms": "View all ({{count}}) rooms", "ending": "Ending...", "follow-your-perspective-tips": "Other users will follow your perspective", diff --git a/packages/flat-i18n/locales/zh-CN.json b/packages/flat-i18n/locales/zh-CN.json index 31664a883d0..bf84d64013f 100644 --- a/packages/flat-i18n/locales/zh-CN.json +++ b/packages/flat-i18n/locales/zh-CN.json @@ -269,7 +269,6 @@ "delete-room-records-tips": "确定删除当前房间记录？", "view-all-rooms-in-periodic-rooms": "查看全部 ({{count}}) 场房间", "repeat-frequency": "每{{week}}", - "schedule-room-type": "房间类型：{{type}}", "schedule-room-detail": "结束于 {{time}} ，共 {{length}} 个房间", "more": "更多", "pausing": "暂停中...",