From 6882f49652993167a3e570e06efd2749042a6564 Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Mon, 26 Aug 2024 16:26:00 +0800 Subject: [PATCH 1/3] refactor(editor): rename ToggleAccess to MoreSettings --- lang/default.json | 15 +++++++-------- lang/en.json | 15 +++++++-------- lang/zh-Hans.json | 15 +++++++-------- lang/zh-Hant.json | 15 +++++++-------- .../Editor/BottomBar/MoreSettingsDialog/index.tsx | 6 +++--- src/components/Editor/BottomBar/index.tsx | 6 +++--- .../SelectLicense/About/index.tsx | 0 .../SelectLicense/About/styles.module.css | 0 .../SelectLicense/index.tsx | 0 .../SupportSettingDialog/Content.tsx | 4 ++-- .../SupportSettingDialog/SupportPreview.tsx | 0 .../SupportSettingDialog/Tab.tsx | 0 .../SupportSettingDialog/index.tsx | 0 .../SupportSettingDialog/styles.module.css | 0 .../{ToggleAccess => MoreSettings}/index.tsx | 9 ++++----- .../styles.module.css | 0 .../Editor/SettingsDialog/List/index.tsx | 6 +++--- src/components/Editor/SettingsDialog/index.tsx | 8 ++++---- .../Editor/Sidebar/Management/index.tsx | 6 +++--- src/components/Editor/index.tsx | 2 +- src/views/ArticleDetail/Edit/index.tsx | 6 +++--- .../SupportWidget/EditCopyButton/index.tsx | 2 +- .../AddCircleArticle/Dialog/ConfirmContent.tsx | 2 +- src/views/Me/DraftDetail/BottomBar.tsx | 6 +++--- src/views/Me/DraftDetail/SettingsButton/index.tsx | 4 ++-- src/views/Me/DraftDetail/Sidebar/index.tsx | 2 +- 26 files changed, 62 insertions(+), 67 deletions(-) rename src/components/Editor/{ToggleAccess => MoreSettings}/SelectLicense/About/index.tsx (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SelectLicense/About/styles.module.css (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SelectLicense/index.tsx (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SupportSettingDialog/Content.tsx (98%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SupportSettingDialog/SupportPreview.tsx (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SupportSettingDialog/Tab.tsx (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SupportSettingDialog/index.tsx (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/SupportSettingDialog/styles.module.css (100%) rename src/components/Editor/{ToggleAccess => MoreSettings}/index.tsx (97%) rename src/components/Editor/{ToggleAccess => MoreSettings}/styles.module.css (100%) diff --git a/lang/default.json b/lang/default.json index eeb45189a5..a0b886a8bd 100644 --- a/lang/default.json +++ b/lang/default.json @@ -1189,6 +1189,9 @@ "defaultMessage": "Add hash from IPFS into compatible reader such as", "description": "src/components/Dialogs/RssFeedDialog/Content.tsx" }, + "HwaiSE": { + "defaultMessage": "Upon activation, the main text will be temporarily obscured, displaying only the title and summary. Readers can choose whether to continue reading. (Contains explicit content, violence, gore, etc.)" + }, "HxcjQl": { "defaultMessage": "Matters continues to provide services that combine creativity with blockchain technology. You will be the first to experience them after completing connecting wallet.", "description": "src/components/Forms/WalletAuthForm/Select.tsx" @@ -1941,10 +1944,6 @@ "VmYzLr": { "defaultMessage": "{total} members" }, - "Vn5KLr": { - "defaultMessage": "Upon activation, the main text will be temporarily obscured, displaying only the title and summary. Readers can choose whether to continue reading. (Contains explicit content, violence, gore, etc.)", - "description": "src/components/Editor/ToggleAccess/index.tsx" - }, "VqdOGQ": { "defaultMessage": "More", "description": "src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx" @@ -2756,6 +2755,10 @@ "l2eEyp": { "defaultMessage": "Transaction Password successfully changed." }, + "l31hCd": { + "defaultMessage": "Preview", + "description": "src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx" + }, "l9LpDx": { "defaultMessage": "{q} - Matters Search", "description": "src/views/Search/AggregateResults/Articles.tsx" @@ -3548,10 +3551,6 @@ "defaultMessage": "left a comment in {circleName}", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" }, - "zn83cE": { - "defaultMessage": "Preview", - "description": "src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx" - }, "zvNfwL": { "defaultMessage": "Operation too frequent, please try again later.", "description": "ACTION_LIMIT_EXCEEDED" diff --git a/lang/en.json b/lang/en.json index 7685e87f65..081c6350f4 100644 --- a/lang/en.json +++ b/lang/en.json @@ -1189,6 +1189,9 @@ "defaultMessage": "Add hash from IPFS into compatible reader such as ", "description": "src/components/Dialogs/RssFeedDialog/Content.tsx" }, + "HwaiSE": { + "defaultMessage": "Upon activation, the main text will be temporarily obscured, displaying only the title and summary. Readers can choose whether to continue reading. (Contains explicit content, violence, gore, etc.)" + }, "HxcjQl": { "defaultMessage": "Matters continues to provide services that combine creativity with blockchain technology. You will be the first to experience them after completing connecting wallet.", "description": "src/components/Forms/WalletAuthForm/Select.tsx" @@ -1941,10 +1944,6 @@ "VmYzLr": { "defaultMessage": "{total} members" }, - "Vn5KLr": { - "defaultMessage": "Upon activation, the main text will be temporarily obscured, displaying only the title and summary. Readers can choose whether to continue reading. (Contains explicit content, violence, gore, etc.)", - "description": "src/components/Editor/ToggleAccess/index.tsx" - }, "VqdOGQ": { "defaultMessage": "More", "description": "src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx" @@ -2756,6 +2755,10 @@ "l2eEyp": { "defaultMessage": "Transaction Password successfully changed." }, + "l31hCd": { + "defaultMessage": "Preview", + "description": "src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx" + }, "l9LpDx": { "defaultMessage": "{q} - Matters Search", "description": "src/views/Search/AggregateResults/Articles.tsx" @@ -3548,10 +3551,6 @@ "defaultMessage": "left a comment in {circleName}", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" }, - "zn83cE": { - "defaultMessage": "Preview", - "description": "src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx" - }, "zvNfwL": { "defaultMessage": "Operation too frequent, please try again later.", "description": "ACTION_LIMIT_EXCEEDED" diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json index b40838e2cc..c154fe0422 100644 --- a/lang/zh-Hans.json +++ b/lang/zh-Hans.json @@ -1189,6 +1189,9 @@ "defaultMessage": "添加 IPFS 生成的 IPNS 指纹到阅读器，如：", "description": "src/components/Dialogs/RssFeedDialog/Content.tsx" }, + "HwaiSE": { + "defaultMessage": "开启后，正文将被暂时遮蔽，只显示标题与摘要，并由读者选择是否继续阅读（例如含有色情、暴力、血腥等内容）" + }, "HxcjQl": { "defaultMessage": "Matters 将提供更多创作与区块链结合的服务，接入钱包后即可在未来第一时间体验新功能。", "description": "src/components/Forms/WalletAuthForm/Select.tsx" @@ -1941,10 +1944,6 @@ "VmYzLr": { "defaultMessage": "{total} 個成員" }, - "Vn5KLr": { - "defaultMessage": "开启后，正文将被暂时遮蔽，只显示标题与摘要，并由读者选择是否继续阅读（例如含有色情、暴力、血腥等内容）", - "description": "src/components/Editor/ToggleAccess/index.tsx" - }, "VqdOGQ": { "defaultMessage": "相关推荐", "description": "src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx" @@ -2756,6 +2755,10 @@ "l2eEyp": { "defaultMessage": "交易密码重置成功" }, + "l31hCd": { + "defaultMessage": "效果预览", + "description": "src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx" + }, "l9LpDx": { "defaultMessage": "{q} - Matters 搜索", "description": "src/views/Search/AggregateResults/Articles.tsx" @@ -3548,10 +3551,6 @@ "defaultMessage": "在 {circleName} 中留言", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" }, - "zn83cE": { - "defaultMessage": "效果预览", - "description": "src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx" - }, "zvNfwL": { "defaultMessage": "操作过于频繁，请稍候重试", "description": "ACTION_LIMIT_EXCEEDED" diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json index 4915ea77c4..e02e3be558 100644 --- a/lang/zh-Hant.json +++ b/lang/zh-Hant.json @@ -1189,6 +1189,9 @@ "defaultMessage": "添加 IPFS 生成的 IPNS 指紋到閱讀器，如：", "description": "src/components/Dialogs/RssFeedDialog/Content.tsx" }, + "HwaiSE": { + "defaultMessage": "開啟後，正文將被暫時遮蔽，只顯示標題與摘要，並由讀者選擇是否繼續閱讀（例如含有色情、暴力、血腥等內容）" + }, "HxcjQl": { "defaultMessage": "Matters 將提供更多創作與區塊鏈結合的服務，接入錢包後即可在未來第一時間體驗新功能。", "description": "src/components/Forms/WalletAuthForm/Select.tsx" @@ -1941,10 +1944,6 @@ "VmYzLr": { "defaultMessage": "{total} 個成員" }, - "Vn5KLr": { - "defaultMessage": "開啟後，正文將被暫時遮蔽，只顯示標題與摘要，並由讀者選擇是否繼續閱讀（例如含有色情、暴力、血腥等內容）", - "description": "src/components/Editor/ToggleAccess/index.tsx" - }, "VqdOGQ": { "defaultMessage": "相關推薦", "description": "src/views/ArticleDetail/AuthorSidebar/Tabs/index.tsx" @@ -2756,6 +2755,10 @@ "l2eEyp": { "defaultMessage": "交易密碼重置成功" }, + "l31hCd": { + "defaultMessage": "效果預覽", + "description": "src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx" + }, "l9LpDx": { "defaultMessage": "{q} - Matters 搜尋", "description": "src/views/Search/AggregateResults/Articles.tsx" @@ -3548,10 +3551,6 @@ "defaultMessage": "在 {circleName} 中留言", "description": "src/components/Notice/CircleNotice/CircleNewDiscussionComments.tsx" }, - "zn83cE": { - "defaultMessage": "效果預覽", - "description": "src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx" - }, "zvNfwL": { "defaultMessage": "操作過於頻繁，請稍候重試", "description": "ACTION_LIMIT_EXCEEDED" diff --git a/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx b/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx index f6e09299e4..58e0ed9829 100644 --- a/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx +++ b/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx @@ -3,14 +3,14 @@ import { FormattedMessage } from 'react-intl' import { Dialog, useDialogSwitch } from '~/components' +import MoreSettings, { MoreSettingsProps } from '../../MoreSettings' import SelectCampaign, { SelectCampaignProps } from '../../SelectCampaign' -import ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess' import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse' import styles from './styles.module.css' type MoreSettingsDialogProps = { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode -} & ToggleAccessProps & +} & MoreSettingsProps & ToggleResponseProps & Partial @@ -77,7 +77,7 @@ const BaseMoreSettingsDialog = ({
- +
diff --git a/src/components/Editor/BottomBar/index.tsx b/src/components/Editor/BottomBar/index.tsx index bcf7393930..d79b7ab28b 100644 --- a/src/components/Editor/BottomBar/index.tsx +++ b/src/components/Editor/BottomBar/index.tsx @@ -13,11 +13,11 @@ import { Translate, } from '~/components' import { + MoreSettingsProps, SetCollectionProps, SetCoverProps, SetResponseProps, SetTagsProps, - ToggleAccessProps, ToggleResponseProps, } from '~/components/Editor' import { SearchSelectNode } from '~/components/Forms/SearchSelectForm' @@ -41,7 +41,7 @@ export type BottomBarProps = { SetCollectionProps & SetTagsProps & SetResponseProps & - ToggleAccessProps & + MoreSettingsProps & Partial /** @@ -113,7 +113,7 @@ const BottomBar: React.FC = ({ entityType, coverSaving, } - const settingsProps: ToggleAccessProps & + const settingsProps: MoreSettingsProps & ToggleResponseProps & Partial = { circle, diff --git a/src/components/Editor/ToggleAccess/SelectLicense/About/index.tsx b/src/components/Editor/MoreSettings/SelectLicense/About/index.tsx similarity index 100% rename from src/components/Editor/ToggleAccess/SelectLicense/About/index.tsx rename to src/components/Editor/MoreSettings/SelectLicense/About/index.tsx diff --git a/src/components/Editor/ToggleAccess/SelectLicense/About/styles.module.css b/src/components/Editor/MoreSettings/SelectLicense/About/styles.module.css similarity index 100% rename from src/components/Editor/ToggleAccess/SelectLicense/About/styles.module.css rename to src/components/Editor/MoreSettings/SelectLicense/About/styles.module.css diff --git a/src/components/Editor/ToggleAccess/SelectLicense/index.tsx b/src/components/Editor/MoreSettings/SelectLicense/index.tsx similarity index 100% rename from src/components/Editor/ToggleAccess/SelectLicense/index.tsx rename to src/components/Editor/MoreSettings/SelectLicense/index.tsx diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx b/src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx similarity index 98% rename from src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx rename to src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx index 8ea6436bb6..a5a186dd6d 100644 --- a/src/components/Editor/ToggleAccess/SupportSettingDialog/Content.tsx +++ b/src/components/Editor/MoreSettings/SupportSettingDialog/Content.tsx @@ -216,8 +216,8 @@ const SupportSettingDialogContent: React.FC = ({ diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx b/src/components/Editor/MoreSettings/SupportSettingDialog/SupportPreview.tsx similarity index 100% rename from src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx rename to src/components/Editor/MoreSettings/SupportSettingDialog/SupportPreview.tsx diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/Tab.tsx b/src/components/Editor/MoreSettings/SupportSettingDialog/Tab.tsx similarity index 100% rename from src/components/Editor/ToggleAccess/SupportSettingDialog/Tab.tsx rename to src/components/Editor/MoreSettings/SupportSettingDialog/Tab.tsx diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/index.tsx b/src/components/Editor/MoreSettings/SupportSettingDialog/index.tsx similarity index 100% rename from src/components/Editor/ToggleAccess/SupportSettingDialog/index.tsx rename to src/components/Editor/MoreSettings/SupportSettingDialog/index.tsx diff --git a/src/components/Editor/ToggleAccess/SupportSettingDialog/styles.module.css b/src/components/Editor/MoreSettings/SupportSettingDialog/styles.module.css similarity index 100% rename from src/components/Editor/ToggleAccess/SupportSettingDialog/styles.module.css rename to src/components/Editor/MoreSettings/SupportSettingDialog/styles.module.css diff --git a/src/components/Editor/ToggleAccess/index.tsx b/src/components/Editor/MoreSettings/index.tsx similarity index 97% rename from src/components/Editor/ToggleAccess/index.tsx rename to src/components/Editor/MoreSettings/index.tsx index 2c89a7bede..b8af591bd1 100644 --- a/src/components/Editor/ToggleAccess/index.tsx +++ b/src/components/Editor/MoreSettings/index.tsx @@ -17,7 +17,7 @@ import ListItem from '../ListItem' import SelectLicense from './SelectLicense' import styles from './styles.module.css' -export type ToggleAccessProps = { +export type MoreSettingsProps = { circle?: DigestRichCirclePublicFragment | null accessType: ArticleAccessType license: ArticleLicenseType @@ -55,7 +55,7 @@ export type ToggleAccessProps = { theme?: 'sidebar' | 'bottomBar' } -const ToggleAccess: React.FC = ({ +const MoreSettings: React.FC = ({ circle, license, @@ -231,8 +231,7 @@ const ToggleAccess: React.FC = ({

@@ -284,4 +283,4 @@ const ToggleAccess: React.FC = ({ ) } -export default ToggleAccess +export default MoreSettings diff --git a/src/components/Editor/ToggleAccess/styles.module.css b/src/components/Editor/MoreSettings/styles.module.css similarity index 100% rename from src/components/Editor/ToggleAccess/styles.module.css rename to src/components/Editor/MoreSettings/styles.module.css diff --git a/src/components/Editor/SettingsDialog/List/index.tsx b/src/components/Editor/SettingsDialog/List/index.tsx index da4fe75eb5..4fad29f003 100644 --- a/src/components/Editor/SettingsDialog/List/index.tsx +++ b/src/components/Editor/SettingsDialog/List/index.tsx @@ -4,9 +4,9 @@ import { Dialog } from '~/components' import { SetPublishISCNProps } from '~/components/Editor' import ListItem from '../../ListItem' +import MoreSettings, { MoreSettingsProps } from '../../MoreSettings' import SelectCampaign, { SelectCampaignProps } from '../../SelectCampaign' import { Step } from '../../SettingsDialog' -import ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess' import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse' import styles from './styles.module.css' @@ -31,7 +31,7 @@ export type SettingsListDialogProps = { tagsCount: number } & SettingsListDialogButtons & ToggleResponseProps & - ToggleAccessProps & + MoreSettingsProps & SetPublishISCNProps & Partial @@ -172,7 +172,7 @@ const SettingsList = ({ - + diff --git a/src/components/Editor/SettingsDialog/index.tsx b/src/components/Editor/SettingsDialog/index.tsx index 4b11236725..5b3b8ae517 100644 --- a/src/components/Editor/SettingsDialog/index.tsx +++ b/src/components/Editor/SettingsDialog/index.tsx @@ -3,12 +3,12 @@ import { FormattedMessage } from 'react-intl' import { Dialog, SpinnerBlock, useDialogSwitch, useStep } from '~/components' import { + MoreSettingsProps, SetCollectionProps, SetCoverProps, SetPublishISCNProps, SetTagsProps, SetVersionDescriptionProps, - ToggleAccessProps, ToggleResponseProps, } from '~/components/Editor' import { SearchSelectNode } from '~/components/Forms/SearchSelectForm' @@ -47,7 +47,7 @@ export type EditorSettingsDialogProps = { } & SetCoverProps & SetCollectionProps & SetTagsProps & - ToggleAccessProps & + MoreSettingsProps & ToggleResponseProps & SetPublishISCNProps & SettingsListDialogButtons & @@ -64,7 +64,7 @@ const DynamicSetCover = dynamic(() => import('../SetCover'), { }) const DynamicSetSupportFeedback = dynamic( - () => import('~/components/Editor/ToggleAccess/SupportSettingDialog/Content'), + () => import('~/components/Editor/MoreSettings/SupportSettingDialog/Content'), { loading: () => } ) @@ -160,7 +160,7 @@ const BaseEditorSettingsDialog = ({ entityType, coverSaving, } - const accessProps: ToggleAccessProps = { + const accessProps: MoreSettingsProps = { circle, editAccess, accessSaving, diff --git a/src/components/Editor/Sidebar/Management/index.tsx b/src/components/Editor/Sidebar/Management/index.tsx index fda4e99589..e195641987 100644 --- a/src/components/Editor/Sidebar/Management/index.tsx +++ b/src/components/Editor/Sidebar/Management/index.tsx @@ -4,11 +4,11 @@ import { ReactComponent as IconSettings } from '@/public/static/icons/24px/setti import { Icon } from '~/components' import { SetPublishISCNProps } from '../..' -import ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess' +import MoreSettings, { MoreSettingsProps } from '../../MoreSettings' import Box from '../Box' import styles from './styles.module.css' -export type SidebarManagementProps = ToggleAccessProps & SetPublishISCNProps +export type SidebarManagementProps = MoreSettingsProps & SetPublishISCNProps const SidebarManagement: React.FC = (props) => { return ( @@ -19,7 +19,7 @@ const SidebarManagement: React.FC = (props) => { } >
- +
) diff --git a/src/components/Editor/index.tsx b/src/components/Editor/index.tsx index 544aaca3aa..36cad78de4 100644 --- a/src/components/Editor/index.tsx +++ b/src/components/Editor/index.tsx @@ -3,8 +3,8 @@ import { DigestTagFragment, } from '~/gql/graphql' +export * from './MoreSettings' export * from './SetCover' -export * from './ToggleAccess' export * from './ToggleResponse' export type SetCollectionProps = { diff --git a/src/views/ArticleDetail/Edit/index.tsx b/src/views/ArticleDetail/Edit/index.tsx index d0ad070055..4127788975 100644 --- a/src/views/ArticleDetail/Edit/index.tsx +++ b/src/views/ArticleDetail/Edit/index.tsx @@ -21,20 +21,20 @@ import { ViewerContext, } from '~/components' import { + MoreSettingsProps, SetCollectionProps, SetCoverProps, SetResponseProps, SetTagsProps, SetVersionDescriptionProps, - ToggleAccessProps, } from '~/components/Editor' import BottomBar from '~/components/Editor/BottomBar' +import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog' import { getSelectCampaign, SelectCampaignProps, } from '~/components/Editor/SelectCampaign' import Sidebar from '~/components/Editor/Sidebar' -import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog' import { QueryError, useImperativeQuery } from '~/components/GQL' import { DIRECT_IMAGE_UPLOAD, @@ -205,7 +205,7 @@ const BaseEdit = ({ article }: { article: Article }) => { editCampaign: setCampaign, } - const accessProps: ToggleAccessProps = { + const accessProps: MoreSettingsProps = { circle, accessType, license, diff --git a/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx b/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx index ebf5327e12..da86a53b00 100644 --- a/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx +++ b/src/views/ArticleDetail/Support/SupportWidget/EditCopyButton/index.tsx @@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl' import { ReactComponent as IconEdit } from '@/public/static/icons/24px/edit.svg' import { analytics } from '~/common/utils' import { Button, Icon, TextIcon } from '~/components' -import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog' +import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog' import { ArticleDetailPublicQuery } from '~/gql/graphql' import { useEditArticleDetailSupportSetting } from '../../../Hook' diff --git a/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx b/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx index 9eeaf2003e..13b21b3dee 100644 --- a/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx +++ b/src/views/Circle/Profile/AddCircleArticle/Dialog/ConfirmContent.tsx @@ -2,7 +2,7 @@ import { useState } from 'react' import { FormattedMessage } from 'react-intl' import { Dialog } from '~/components' -import SelectLicense from '~/components/Editor/ToggleAccess/SelectLicense' +import SelectLicense from '~/components/Editor/MoreSettings/SelectLicense' import { ArticleLicenseType } from '~/gql/graphql' interface ContentProps { diff --git a/src/views/Me/DraftDetail/BottomBar.tsx b/src/views/Me/DraftDetail/BottomBar.tsx index d0fe9bb5fd..967b282f98 100644 --- a/src/views/Me/DraftDetail/BottomBar.tsx +++ b/src/views/Me/DraftDetail/BottomBar.tsx @@ -1,18 +1,18 @@ import { ENTITY_TYPE } from '~/common/enums' import { toDigestTagPlaceholder } from '~/components' import { + MoreSettingsProps, SetCollectionProps, SetCoverProps, SetResponseProps, SetTagsProps, - ToggleAccessProps, } from '~/components/Editor' import BottomBar from '~/components/Editor/BottomBar' +import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog' import { getSelectCampaign, SelectCampaignProps, } from '~/components/Editor/SelectCampaign' -import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog' import { DigestRichCirclePublicFragment, EditMetaDraftFragment, @@ -91,7 +91,7 @@ const EditDraftBottomBar = ({ editCollection, collectionSaving, } - const accessProps: ToggleAccessProps & + const accessProps: MoreSettingsProps & SetResponseProps & Partial = { circle: draft?.access.circle, diff --git a/src/views/Me/DraftDetail/SettingsButton/index.tsx b/src/views/Me/DraftDetail/SettingsButton/index.tsx index ffb2589ef3..f8f13e81ce 100644 --- a/src/views/Me/DraftDetail/SettingsButton/index.tsx +++ b/src/views/Me/DraftDetail/SettingsButton/index.tsx @@ -3,11 +3,11 @@ import { FormattedMessage } from 'react-intl' import { ENTITY_TYPE } from '~/common/enums' import { Button, TextIcon, toDigestTagPlaceholder } from '~/components' import { + MoreSettingsProps, SetCollectionProps, SetCoverProps, SetResponseProps, SetTagsProps, - ToggleAccessProps, } from '~/components/Editor' import { getSelectCampaign, @@ -111,7 +111,7 @@ const SettingsButton = ({ editCollection, collectionSaving, } - const accessProps: ToggleAccessProps = { + const accessProps: MoreSettingsProps = { circle: draft?.access.circle, accessType: draft.access.type, license: draft.license, diff --git a/src/views/Me/DraftDetail/Sidebar/index.tsx b/src/views/Me/DraftDetail/Sidebar/index.tsx index c2a72657be..564a32ecb0 100644 --- a/src/views/Me/DraftDetail/Sidebar/index.tsx +++ b/src/views/Me/DraftDetail/Sidebar/index.tsx @@ -1,8 +1,8 @@ import { ENTITY_TYPE } from '~/common/enums' import { toDigestTagPlaceholder } from '~/components' +import SupportSettingDialog from '~/components/Editor/MoreSettings/SupportSettingDialog' import { getSelectCampaign } from '~/components/Editor/SelectCampaign' import Sidebar from '~/components/Editor/Sidebar' -import SupportSettingDialog from '~/components/Editor/ToggleAccess/SupportSettingDialog' import { DigestRichCirclePublicFragment, EditMetaDraftFragment, From f1e866d00b748f4142558ba819a1b73b9f815f39 Mon Sep 17 00:00:00 2001 From: robertu <4065233+robertu7@users.noreply.github.com> Date: Tue, 27 Aug 2024 12:08:44 +0800 Subject: [PATCH 2/3] feat(editor): add support for article indentFirstLine --- lang/default.json | 3 ++ lang/en.json | 3 ++ lang/zh-Hans.json | 3 ++ lang/zh-Hant.json | 3 ++ public/static/icons/24px/indent.svg | 5 +++ .../index.tsx | 41 +++++++++++++++---- .../styles.module.css | 11 ++++- src/components/Editor/BottomBar/index.tsx | 21 +++++++--- src/components/Editor/Sidebar/Box/index.tsx | 6 ++- .../Editor/Sidebar/Indent/index.tsx | 41 +++++++++++++++++++ src/components/Editor/Sidebar/index.tsx | 10 +++-- src/views/ArticleDetail/Content/index.tsx | 3 ++ .../ArticleDetail/Content/styles.module.css | 6 +++ src/views/ArticleDetail/Edit/Header/gql.ts | 4 ++ src/views/ArticleDetail/Edit/Header/index.tsx | 7 +++- src/views/ArticleDetail/Edit/gql.ts | 1 + src/views/ArticleDetail/Edit/index.tsx | 17 ++++++++ src/views/ArticleDetail/History/gql.ts | 1 + src/views/ArticleDetail/History/index.tsx | 1 + src/views/ArticleDetail/gql.ts | 1 + src/views/ArticleDetail/index.tsx | 1 + src/views/Me/DraftDetail/BottomBar.tsx | 13 +++++- src/views/Me/DraftDetail/Sidebar/index.tsx | 15 +++++++ src/views/Me/DraftDetail/gql.ts | 11 +++++ src/views/Me/DraftDetail/hooks.ts | 27 ++++++++++++ src/views/Me/DraftDetail/index.tsx | 1 + 26 files changed, 235 insertions(+), 21 deletions(-) create mode 100644 public/static/icons/24px/indent.svg rename src/components/Editor/BottomBar/{MoreSettingsDialog => MobileSettingsDialog}/index.tsx (66%) rename src/components/Editor/BottomBar/{MoreSettingsDialog => MobileSettingsDialog}/styles.module.css (57%) create mode 100644 src/components/Editor/Sidebar/Indent/index.tsx diff --git a/lang/default.json b/lang/default.json index a0b886a8bd..0cb898408d 100644 --- a/lang/default.json +++ b/lang/default.json @@ -184,6 +184,9 @@ "defaultMessage": "Circle Subscription", "description": "src/components/Transaction/index.tsx" }, + "0r2yd+": { + "defaultMessage": "Paragraph indent" + }, "0tHLRn": { "defaultMessage": "Insufficient Balance" }, diff --git a/lang/en.json b/lang/en.json index 081c6350f4..b2c508fab7 100644 --- a/lang/en.json +++ b/lang/en.json @@ -184,6 +184,9 @@ "defaultMessage": "Circle Subscription", "description": "src/components/Transaction/index.tsx" }, + "0r2yd+": { + "defaultMessage": "Paragraph indent" + }, "0tHLRn": { "defaultMessage": "Insufficient Balance" }, diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json index c154fe0422..bd50198220 100644 --- a/lang/zh-Hans.json +++ b/lang/zh-Hans.json @@ -184,6 +184,9 @@ "defaultMessage": "围炉营收", "description": "src/components/Transaction/index.tsx" }, + "0r2yd+": { + "defaultMessage": "首行缩进" + }, "0tHLRn": { "defaultMessage": "钱包余额不足" }, diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json index e02e3be558..64e1b53471 100644 --- a/lang/zh-Hant.json +++ b/lang/zh-Hant.json @@ -184,6 +184,9 @@ "defaultMessage": "圍爐訂閱", "description": "src/components/Transaction/index.tsx" }, + "0r2yd+": { + "defaultMessage": "首行縮排" + }, "0tHLRn": { "defaultMessage": "錢包餘額不足" }, diff --git a/public/static/icons/24px/indent.svg b/public/static/icons/24px/indent.svg new file mode 100644 index 0000000000..ba98434993 --- /dev/null +++ b/public/static/icons/24px/indent.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx b/src/components/Editor/BottomBar/MobileSettingsDialog/index.tsx similarity index 66% rename from src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx rename to src/components/Editor/BottomBar/MobileSettingsDialog/index.tsx index 58e0ed9829..7fc405d49e 100644 --- a/src/components/Editor/BottomBar/MoreSettingsDialog/index.tsx +++ b/src/components/Editor/BottomBar/MobileSettingsDialog/index.tsx @@ -1,28 +1,33 @@ import _get from 'lodash/get' -import { FormattedMessage } from 'react-intl' +import { FormattedMessage, useIntl } from 'react-intl' -import { Dialog, useDialogSwitch } from '~/components' +import { Dialog, Switch, useDialogSwitch } from '~/components' import MoreSettings, { MoreSettingsProps } from '../../MoreSettings' import SelectCampaign, { SelectCampaignProps } from '../../SelectCampaign' +import { SidebarIndentProps } from '../../Sidebar/Indent' import ToggleResponse, { ToggleResponseProps } from '../../ToggleResponse' import styles from './styles.module.css' -type MoreSettingsDialogProps = { +type MobileSettingsDialogProps = { children: ({ openDialog }: { openDialog: () => void }) => React.ReactNode } & MoreSettingsProps & ToggleResponseProps & + SidebarIndentProps & Partial -const BaseMoreSettingsDialog = ({ +const BaseMobileSettingsDialog = ({ children, canComment, toggleComment, appliedCampaign, selectedStage, editCampaign, + indented, + toggleIndent, ...props -}: MoreSettingsDialogProps) => { +}: MobileSettingsDialogProps) => { + const intl = useIntl() const { show, openDialog, closeDialog } = useDialogSwitch(true) const toggleResponseProps: ToggleResponseProps = { @@ -56,6 +61,7 @@ const BaseMoreSettingsDialog = ({ /> + {/* campaign */} {appliedCampaign && editCampaign && (

@@ -72,10 +78,29 @@ const BaseMoreSettingsDialog = ({

)} + {/* indent */} +
+

+ +

+ + toggleIndent(!indented)} + /> +
+ + {/* response */}
+ {/* more settings */}
@@ -87,10 +112,10 @@ const BaseMoreSettingsDialog = ({ ) } -const MoreSettingsDialog = (props: MoreSettingsDialogProps) => ( - }> +const MobileSettingsDialog = (props: MobileSettingsDialogProps) => ( + }> {({ openDialog }) => <>{props.children({ openDialog })}} ) -export default MoreSettingsDialog +export default MobileSettingsDialog diff --git a/src/components/Editor/BottomBar/MoreSettingsDialog/styles.module.css b/src/components/Editor/BottomBar/MobileSettingsDialog/styles.module.css similarity index 57% rename from src/components/Editor/BottomBar/MoreSettingsDialog/styles.module.css rename to src/components/Editor/BottomBar/MobileSettingsDialog/styles.module.css index fad79cd37e..13b883aa6b 100644 --- a/src/components/Editor/BottomBar/MoreSettingsDialog/styles.module.css +++ b/src/components/Editor/BottomBar/MobileSettingsDialog/styles.module.css @@ -1,5 +1,6 @@ .campaign, -.response { +.response, +.indent { padding: var(--sp16); } @@ -11,3 +12,11 @@ .access { padding: var(--sp16); } + +.indent { + @mixin flex-center-space-between; + + & .title { + padding-bottom: 0; + } +} diff --git a/src/components/Editor/BottomBar/index.tsx b/src/components/Editor/BottomBar/index.tsx index d79b7ab28b..2d1e24f0f5 100644 --- a/src/components/Editor/BottomBar/index.tsx +++ b/src/components/Editor/BottomBar/index.tsx @@ -30,8 +30,9 @@ import { import ArticleCustomStagingArea from '../ArticleCustomStagingArea' import { SelectCampaignProps } from '../SelectCampaign' import SetCover from '../SetCover' +import { SidebarIndentProps } from '../Sidebar/Indent' import TagCustomStagingArea from '../TagCustomStagingArea' -import MoreSettingsDialog from './MoreSettingsDialog' +import MobileSettingsDialog from './MobileSettingsDialog' import styles from './styles.module.css' export type BottomBarProps = { @@ -42,7 +43,8 @@ export type BottomBarProps = { SetTagsProps & SetResponseProps & MoreSettingsProps & - Partial + Partial & + SidebarIndentProps /** * Editor toolbar that fixed on bottom to edit cover, tags and collection, @@ -94,6 +96,10 @@ const BottomBar: React.FC = ({ selectedStage, editCampaign, + indented, + toggleIndent, + indentSaving, + saving, disabled, }) => { @@ -115,6 +121,7 @@ const BottomBar: React.FC = ({ } const settingsProps: MoreSettingsProps & ToggleResponseProps & + SidebarIndentProps & Partial = { circle, accessType, @@ -144,6 +151,10 @@ const BottomBar: React.FC = ({ appliedCampaign, selectedStage, editCampaign, + + indented, + toggleIndent, + indentSaving, } return ( @@ -253,8 +264,8 @@ const BottomBar: React.FC = ({ )} - {/* Campaign & Circle & License & Support Feedback & ISCN & canComment */} - + {/* Campaign, Indent, Comment, Circle, License, Support Feedback, ISCN */} + {({ openDialog }) => ( )} - + diff --git a/src/components/Editor/Sidebar/Box/index.tsx b/src/components/Editor/Sidebar/Box/index.tsx index 1cf268ce70..5938458712 100644 --- a/src/components/Editor/Sidebar/Box/index.tsx +++ b/src/components/Editor/Sidebar/Box/index.tsx @@ -11,6 +11,7 @@ interface BoxProps { subtitle?: React.ReactNode onClick?: () => any disabled?: boolean + rightButton?: React.ReactNode footerSpacing?: boolean borderColor?: 'freeWriteBlue' } @@ -21,6 +22,7 @@ const Box: React.FC> = ({ subtitle, onClick, disabled, + rightButton, footerSpacing = true, borderColor, children, @@ -39,7 +41,9 @@ const Box: React.FC> = ({ {title} - {onClick && ( + {rightButton} + + {!rightButton && onClick && (