Feat/mobile article comment

lang/default.json

@@ -256,6 +256,9 @@
     "defaultMessage": "Asset not found",
     "description": "ASSET_NOT_FOUND"
   },
+  "4OMGUj": {
+    "defaultMessage": "Comment Details"
+  },
   "4RpVDe": {
     "defaultMessage": "Delete Draft"
   },
@@ -1134,10 +1137,6 @@
   "Q8Qw5B": {
     "defaultMessage": "Description"
   },
-  "QGBMmO": {
-    "defaultMessage": "Published",
-    "description": "src/components/Forms/CommentFormBeta/index.tsx"
-  },
   "QQSdHP": {
     "defaultMessage": "View More"
   },
@@ -1798,6 +1797,9 @@
     "defaultMessage": "Open IPNS page",
     "description": "src/components/UserProfile/WalletLabel/index.tsx"
   },
+  "jwnump": {
+    "defaultMessage": "Comment..."
+  },
   "jy3tx0": {
     "defaultMessage": "broadcast in {circlename}",
     "description": "src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx"
@@ -2111,6 +2113,9 @@
   "sy+pv5": {
     "defaultMessage": "Email"
   },
+  "syEQFE": {
+    "defaultMessage": "Publish"
+  },
   "tBt9u0": {
     "defaultMessage": "Sign in",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2212,10 +2217,6 @@
   "w+6UiO": {
     "defaultMessage": "Add Invitation"
   },
-  "w/Bet8": {
-    "defaultMessage": "Comment Details",
-    "description": "src/views/ArticleDetail/index.tsx"
-  },
   "wCgTu5": {
     "defaultMessage": "Comments"
   },

lang/en.json

@@ -256,6 +256,9 @@
     "defaultMessage": "Asset not found",
     "description": "ASSET_NOT_FOUND"
   },
+  "4OMGUj": {
+    "defaultMessage": "Comment Details"
+  },
   "4RpVDe": {
     "defaultMessage": "Delete Draft"
   },
@@ -1134,10 +1137,6 @@
   "Q8Qw5B": {
     "defaultMessage": "Description"
   },
-  "QGBMmO": {
-    "defaultMessage": "Published",
-    "description": "src/components/Forms/CommentFormBeta/index.tsx"
-  },
   "QQSdHP": {
     "defaultMessage": "View More"
   },
@@ -1798,6 +1797,9 @@
     "defaultMessage": "Open IPNS page",
     "description": "src/components/UserProfile/WalletLabel/index.tsx"
   },
+  "jwnump": {
+    "defaultMessage": "Comment..."
+  },
   "jy3tx0": {
     "defaultMessage": "broadcast in {circlename}",
     "description": "src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx"
@@ -2111,6 +2113,9 @@
   "sy+pv5": {
     "defaultMessage": "Email"
   },
+  "syEQFE": {
+    "defaultMessage": "Publish"
+  },
   "tBt9u0": {
     "defaultMessage": "Sign in",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2212,10 +2217,6 @@
   "w+6UiO": {
     "defaultMessage": "Add Invitation"
   },
-  "w/Bet8": {
-    "defaultMessage": "Comment Details",
-    "description": "src/views/ArticleDetail/index.tsx"
-  },
   "wCgTu5": {
     "defaultMessage": "Comments"
   },

lang/zh-Hans.json

@@ -256,6 +256,9 @@
     "defaultMessage": "资源不存在",
     "description": "ASSET_NOT_FOUND"
   },
+  "4OMGUj": {
+    "defaultMessage": "评论详情"
+  },
   "4RpVDe": {
     "defaultMessage": "刪除草稿"
   },
@@ -1134,10 +1137,6 @@
   "Q8Qw5B": {
     "defaultMessage": "描述"
   },
-  "QGBMmO": {
-    "defaultMessage": "发布",
-    "description": "src/components/Forms/CommentFormBeta/index.tsx"
-  },
   "QQSdHP": {
     "defaultMessage": "查看更多"
   },
@@ -1798,6 +1797,9 @@
     "defaultMessage": "打开 IPNS 页面",
     "description": "src/components/UserProfile/WalletLabel/index.tsx"
   },
+  "jwnump": {
+    "defaultMessage": "发布评论..."
+  },
   "jy3tx0": {
     "defaultMessage": "在 {circlename} 发布广播",
     "description": "src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx"
@@ -2111,6 +2113,9 @@
   "sy+pv5": {
     "defaultMessage": "邮箱"
   },
+  "syEQFE": {
+    "defaultMessage": "发布"
+  },
   "tBt9u0": {
     "defaultMessage": "登录",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2212,10 +2217,6 @@
   "w+6UiO": {
     "defaultMessage": "新增邀请"
   },
-  "w/Bet8": {
-    "defaultMessage": "评论详情",
-    "description": "src/views/ArticleDetail/index.tsx"
-  },
   "wCgTu5": {
     "defaultMessage": "评论"
   },

lang/zh-Hant.json

@@ -256,6 +256,9 @@
     "defaultMessage": "資源不存在",
     "description": "ASSET_NOT_FOUND"
   },
+  "4OMGUj": {
+    "defaultMessage": "評論詳情"
+  },
   "4RpVDe": {
     "defaultMessage": "刪除草稿"
   },
@@ -1134,10 +1137,6 @@
   "Q8Qw5B": {
     "defaultMessage": "描述"
   },
-  "QGBMmO": {
-    "defaultMessage": "發布",
-    "description": "src/components/Forms/CommentFormBeta/index.tsx"
-  },
   "QQSdHP": {
     "defaultMessage": "查看更多"
   },
@@ -1798,6 +1797,9 @@
     "defaultMessage": "打開 IPNS 頁面",
     "description": "src/components/UserProfile/WalletLabel/index.tsx"
   },
+  "jwnump": {
+    "defaultMessage": "發布評論..."
+  },
   "jy3tx0": {
     "defaultMessage": "在 {circlename} 發布廣播",
     "description": "src/components/Notice/CommentNotice/CircleNewBroadcastNotice.tsx"
@@ -2111,6 +2113,9 @@
   "sy+pv5": {
     "defaultMessage": "電子郵件"
   },
+  "syEQFE": {
+    "defaultMessage": "發布"
+  },
   "tBt9u0": {
     "defaultMessage": "登入",
     "description": "src/components/Forms/EmailLoginForm/index.tsx"
@@ -2212,10 +2217,6 @@
   "w+6UiO": {
     "defaultMessage": "新增邀請"
   },
-  "w/Bet8": {
-    "defaultMessage": "評論詳情",
-    "description": "src/views/ArticleDetail/index.tsx"
-  },
   "wCgTu5": {
     "defaultMessage": "評論"
   },

src/common/enums/article.ts

@@ -1 +1,2 @@
 export const COMMENTS_COUNT = 15
+export const TOOLBAR_FIXEDTOOLBAR_ID = 'toolbar/fixedToolbar/id'

src/common/enums/events.ts

@@ -22,6 +22,7 @@ export const CLOSE_ACTIVE_DIALOG = 'closeActiveDialog'
 export const OPEN_SUBSCRIBE_CIRCLE_DIALOG = 'openSubscribeCircleDialog'
 export const OPEN_SET_USER_NAME_DIALOG = 'openSetUserNameDialog'
 export const OPEN_SHOW_NOMAD_BADGE_DIALOG = 'openShowNomadBadgeDialog'
+export const OPEN_ARTICLE_DETAIL_DIALOG = 'openArticleDetailDialog'
 
 // Toast
 export const TOAST_SEND_EMAIL_VERIFICATION = 'toastSendEmailVerification'

src/components/Button/index.tsx

@@ -31,6 +31,7 @@ export type ButtonHeight =
   | '1.25rem'
   | '1.5rem'
   | '1.75rem'
+  | '1.875rem'
   | '2rem'
   | '2.25rem'
   | '2.5rem'
@@ -54,6 +55,7 @@ export type ButtonSpacingX =
   | 'baseTight'
   | 'tight'
   | 'base'
+  | 'baseLoose'
   | 'loose'
 
 type ButtonColor =

src/components/Button/styles.module.css

@@ -254,6 +254,18 @@ span.container {
   }
 }
 
+.spacingXBaseLoose {
+  &:not(.isTransparent) {
+    padding-right: var(--spacing-base-loose);
+    padding-left: var(--spacing-base-loose);
+  }
+
+  & .hotarea {
+    margin-right: calc(var(--spacing-base-loose) * -1);
+    margin-left: calc(var(--spacing-base-loose) * -1);
+  }
+}
+
 .spacingXLoose {
   &:not(.isTransparent) {
     padding-right: var(--spacing-loose);

src/components/CommentBeta/FooterActions/index.tsx

@@ -6,8 +6,10 @@ import { ERROR_CODES, ERROR_MESSAGES } from '~/common/enums'
 import { makeMentionElement, translate } from '~/common/utils'
 import {
   CommentFormBeta,
+  CommentFormBetaDialog,
   CommentFormType,
   LanguageContext,
+  Media,
   Spacer,
   toast,
   ViewerContext,
@@ -152,13 +154,43 @@ const BaseFooterActions = ({
         <section className={styles.left}>
           {hasUpvote && <UpvoteButton {...buttonProps} />}
           {hasReply && (
-            <ReplyButton
-              type={type}
-              {...buttonProps}
-              {...replyButtonProps}
-              {...replyCustomButtonProps}
-              onClick={toggleShowForm}
-            />
+            <>
+              <Media at="sm">
+                <CommentFormBetaDialog
+                  articleId={article?.id}
+                  type={'article'}
+                  replyToId={comment.id}
+                  parentId={comment.parentComment?.id || comment.id}
+                  submitCallback={submitCallback}
+                  // closeCallback={() => setShowForm(false)}
+                  isInCommentDetail={isInCommentDetail}
+                  defaultContent={`${makeMentionElement(
+                    comment.author.id,
+                    comment.author.userName || '',
+                    comment.author.displayName || ''
+                  )} `}
+                >
+                  {({ openDialog }) => (
+                    <ReplyButton
+                      type={type}
+                      {...buttonProps}
+                      {...replyButtonProps}
+                      {...replyCustomButtonProps}
+                      onClick={openDialog}
+                    />
+                  )}
+                </CommentFormBetaDialog>
+              </Media>
+              <Media greaterThan="sm">
+                <ReplyButton
+                  type={type}
+                  {...buttonProps}
+                  {...replyButtonProps}
+                  {...replyCustomButtonProps}
+                  onClick={toggleShowForm}
+                />
+              </Media>
+            </>
           )}
         </section>
       </footer>

src/components/Dialog/Buttons.tsx

@@ -55,15 +55,30 @@ export const TextButton: React.FC<DialogTextButtonProps> = ({
 
 export type DialogRoundedButtonProps = {
   text: React.ReactNode
-  color?: 'greyDarker' | 'green' | 'red'
+  textSize?: 'sm' | 'xm'
+  textWeight?: 'md' | 'normal'
+
+  color?: 'greyDarker' | 'green' | 'red' | 'white' | 'black'
   icon?: React.ReactNode
   loading?: boolean
 } & ButtonProps
 
 export const RoundedButton: React.FC<
   React.PropsWithChildren<DialogRoundedButtonProps>
 > = forwardRef(
-  ({ text, color = 'green', loading, icon, disabled, ...restProps }, ref) => {
+  (
+    {
+      text,
+      textSize = 'xm',
+      textWeight = 'md',
+      color = 'green',
+      loading,
+      icon,
+      disabled,
+      ...restProps
+    },
+    ref
+  ) => {
     let buttonProps: ButtonProps = restProps
 
     switch (color) {
@@ -84,6 +99,19 @@ export const RoundedButton: React.FC<
       case 'red':
         buttonProps = { ...buttonProps, borderColor: 'red', textColor: 'red' }
         break
+      case 'white':
+        buttonProps = {
+          ...buttonProps,
+          textColor: 'white',
+        }
+        break
+      case 'black':
+        buttonProps = {
+          ...buttonProps,
+          borderColor: 'greyLight',
+          textColor: 'black',
+        }
+        break
     }
 
     return (
@@ -95,8 +123,8 @@ export const RoundedButton: React.FC<
       >
         <TextIcon
           icon={icon || (loading && <IconSpinner16 size="md" />)}
-          size="xm"
-          weight="md"
+          size={textSize}
+          weight={textWeight}
           textPlacement="left"
         >
           {!loading ? text : null}

src/components/Dialog/Content/styles.module.css

@@ -2,13 +2,13 @@
   display: flex;
   flex-direction: column;
   flex-shrink: 1;
-  max-height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+  max-height: calc(90vh - 4.25rem); /* 4.25rem is the height of header */
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
 
   &.fixedHeight {
-    height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
+    height: calc(90vh - 4.25rem); /* 4.25rem is the height of header */
 
     @media (--sm-up) {
       height: min(34rem, 64vh);