Merge pull request #4779 from thematters/feat/indent

Indent
thematters · Aug 27, 2024 · 38af573 · 38af573
2 parents fa4d42b + b44c419
commit 38af573
Show file tree

Hide file tree

Showing 43 changed files with 297 additions and 88 deletions.
diff --git a/lang/default.json b/lang/default.json
@@ -188,6 +188,9 @@
     "defaultMessage": "Circle Subscription",
     "description": "src/components/Transaction/index.tsx"
   },
+  "0r2yd+": {
+    "defaultMessage": "Paragraph indent"
+  },
   "0tHLRn": {
     "defaultMessage": "Insufficient Balance"
   },
@@ -1193,6 +1196,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"
@@ -1945,10 +1951,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 +2758,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 +3554,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
@@ -188,6 +188,9 @@
     "defaultMessage": "Circle Subscription",
     "description": "src/components/Transaction/index.tsx"
   },
+  "0r2yd+": {
+    "defaultMessage": "Paragraph indent"
+  },
   "0tHLRn": {
     "defaultMessage": "Insufficient Balance"
   },
@@ -1193,6 +1196,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"
@@ -1945,10 +1951,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 +2758,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 +3554,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
@@ -188,6 +188,9 @@
     "defaultMessage": "围炉营收",
     "description": "src/components/Transaction/index.tsx"
   },
+  "0r2yd+": {
+    "defaultMessage": "首行缩进"
+  },
   "0tHLRn": {
     "defaultMessage": "钱包余额不足"
   },
@@ -1193,6 +1196,9 @@
     "defaultMessage": "添加 IPFS 生成的 IPNS 指纹到阅读器，如：",
     "description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
   },
+  "HwaiSE": {
+    "defaultMessage": "开启后，正文将被暂时遮蔽，只显示标题与摘要，并由读者选择是否继续阅读（例如含有色情、暴力、血腥等内容）"
+  },
   "HxcjQl": {
     "defaultMessage": "Matters 将提供更多创作与区块链结合的服务，接入钱包后即可在未来第一时间体验新功能。",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
@@ -1945,10 +1951,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 +2758,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 +3554,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
@@ -188,6 +188,9 @@
     "defaultMessage": "圍爐訂閱",
     "description": "src/components/Transaction/index.tsx"
   },
+  "0r2yd+": {
+    "defaultMessage": "首行縮排"
+  },
   "0tHLRn": {
     "defaultMessage": "錢包餘額不足"
   },
@@ -1193,6 +1196,9 @@
     "defaultMessage": "添加 IPFS 生成的 IPNS 指紋到閱讀器，如：",
     "description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
   },
+  "HwaiSE": {
+    "defaultMessage": "開啟後，正文將被暫時遮蔽，只顯示標題與摘要，並由讀者選擇是否繼續閱讀（例如含有色情、暴力、血腥等內容）"
+  },
   "HxcjQl": {
     "defaultMessage": "Matters 將提供更多創作與區塊鏈結合的服務，接入錢包後即可在未來第一時間體驗新功能。",
     "description": "src/components/Forms/WalletAuthForm/Select.tsx"
@@ -1945,10 +1951,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 +2758,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 +3554,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/public/static/icons/24px/indent.svg b/public/static/icons/24px/indent.svg
diff --git a/...or/BottomBar/MoreSettingsDialog/index.tsx → .../BottomBar/MobileSettingsDialog/index.tsx b/...or/BottomBar/MoreSettingsDialog/index.tsx → .../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 ToggleAccess, { ToggleAccessProps } from '../../ToggleAccess'
+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
-} & ToggleAccessProps &
+} & MoreSettingsProps &
   ToggleResponseProps &
+  SidebarIndentProps &
   Partial<SelectCampaignProps>
 
-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 = ({
         />
 
         <Dialog.Content noSpacing>
+          {/* campaign */}
           {appliedCampaign && editCampaign && (
             <section className={styles.campaign}>
               <h3 className={styles.title}>
@@ -72,12 +78,31 @@ const BaseMoreSettingsDialog = ({
             </section>
           )}
 
+          {/* indent */}
+          <section className={styles.indent}>
+            <h3 className={styles.title}>
+              <FormattedMessage defaultMessage="Paragraph indent" id="0r2yd+" />
+            </h3>
+
+            <Switch
+              name="indent"
+              label={intl.formatMessage({
+                defaultMessage: 'Paragraph indent',
+                id: '0r2yd+',
+              })}
+              checked={!!indented}
+              onChange={() => toggleIndent(!indented)}
+            />
+          </section>
+
+          {/* response */}
           <section className={styles.response}>
             <ToggleResponse {...toggleResponseProps} />
           </section>
 
+          {/* more settings */}
           <section className={styles.access}>
-            <ToggleAccess {...props} theme="bottomBar" />
+            <MoreSettings {...props} theme="bottomBar" />
           </section>
         </Dialog.Content>
 
@@ -87,10 +112,10 @@ const BaseMoreSettingsDialog = ({
   )
 }
 
-const MoreSettingsDialog = (props: MoreSettingsDialogProps) => (
-  <Dialog.Lazy mounted={<BaseMoreSettingsDialog {...props} />}>
+const MobileSettingsDialog = (props: MobileSettingsDialogProps) => (
+  <Dialog.Lazy mounted={<BaseMobileSettingsDialog {...props} />}>
     {({ openDialog }) => <>{props.children({ openDialog })}</>}
   </Dialog.Lazy>
 )
 
-export default MoreSettingsDialog
+export default MobileSettingsDialog
diff --git a/...mBar/MoreSettingsDialog/styles.module.css → ...ar/MobileSettingsDialog/styles.module.css b/...mBar/MoreSettingsDialog/styles.module.css → ...ar/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;
+  }
+}