Merge branch 'feat/nomad-badges' into fix/revise-nomad-badges

thematters · Dec 8, 2023 · 63718ff · 63718ff
2 parents 7ae71ec + 133ca36
commit 63718ff
Show file tree

Hide file tree

Showing 11 changed files with 51 additions and 1 deletion.
diff --git a/lang/default.json b/lang/default.json
@@ -1484,6 +1484,10 @@
     "defaultMessage": "Number of readers",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
+  "iIa+u8": {
+    "defaultMessage": "Badge Name",
+    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
+  },
   "icdrwy": {
     "defaultMessage": "Followed You",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/en.json b/lang/en.json
@@ -1484,6 +1484,10 @@
     "defaultMessage": "Number of readers",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
+  "iIa+u8": {
+    "defaultMessage": "Badge Name",
+    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
+  },
   "icdrwy": {
     "defaultMessage": "Followed You",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/zh-Hans.json b/lang/zh-Hans.json
@@ -1484,6 +1484,10 @@
     "defaultMessage": "读者数量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
+  "iIa+u8": {
+    "defaultMessage": "徽章名称",
+    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
+  },
   "icdrwy": {
     "defaultMessage": "追踪了你",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/lang/zh-Hant.json b/lang/zh-Hant.json
@@ -1484,6 +1484,10 @@
     "defaultMessage": "讀者數量",
     "description": "src/components/ArticleDigest/Published/FooterActions/index.tsx"
   },
+  "iIa+u8": {
+    "defaultMessage": "徽章名稱",
+    "description": "src/views/User/UserProfile/BadgeNomadLabel/index.tsx"
+  },
   "icdrwy": {
     "defaultMessage": "追蹤了你",
     "description": "src/components/Buttons/FollowUser/FollowState.tsx"

diff --git a/src/components/Dialog/Content/index.tsx b/src/components/Dialog/Content/index.tsx
@@ -7,6 +7,7 @@ interface DialogContentProps {
   noSpacing?: boolean
   smExtraSpacing?: boolean
   fixedHeight?: boolean
+  fixedHeightNoFooter?: boolean
   noSpacingBottom?: boolean
   noMaxHeight?: boolean
 }
@@ -19,13 +20,15 @@ const DialogContent: React.FC<React.PropsWithChildren<DialogContentProps>> & {
   noSpacingBottom,
   noMaxHeight,
   fixedHeight,
+  fixedHeightNoFooter,
   children,
 }) => {
   const contentClasses = classNames({
     [styles.content]: true,
     [styles.spacing]: !noSpacing,
     [styles.smExtraSpacing]: smExtraSpacing,
     [styles.fixedHeight]: !!fixedHeight,
+    [styles.fixedHeightNoFooter]: !!fixedHeightNoFooter,
     [styles.noSpacingBottom]: !!noSpacingBottom,
     [styles.noMaxHeight]: !!noMaxHeight,
   })

diff --git a/src/components/Dialog/Content/styles.module.css b/src/components/Dialog/Content/styles.module.css
@@ -15,6 +15,12 @@
     }
   }
 
+  &.fixedHeightNoFooter {
+    min-height: calc(
+      70vh - 4.25rem + 6.75rem
+    ); /* 4.25rem is the height of header; 6.75rem is the Footer  */
+  }
+
   @media (--sm-up) {
     max-height: min(30rem, 64vh);
   }

diff --git a/src/components/Icon/IconArrowAction.tsx b/src/components/Icon/IconArrowAction.tsx
@@ -0,0 +1,5 @@
+import { ReactComponent as Icon } from '@/public/static/icons/24px/arrow-action.svg'
+
+import { withIcon } from './withIcon'
+
+export const IconArrowAction = withIcon(Icon)
diff --git a/src/views/User/UserProfile/AsideUserProfile/index.tsx b/src/views/User/UserProfile/AsideUserProfile/index.tsx
@@ -1,7 +1,6 @@
 import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
-
 import {
   OPEN_SHOW_NOMAD_BADGE_DIALOG,
   TEST_ID,
@@ -28,6 +27,7 @@ import {
   ArchitectBadge,
   CivicLikerBadge,
   GoldenMotorBadge,
+  // NomadBadge,
   SeedBadge,
   TraveloggersBadge,
 } from '../Badges'

diff --git a/src/views/User/UserProfile/BadgeNomadLabel/index.tsx b/src/views/User/UserProfile/BadgeNomadLabel/index.tsx
@@ -50,3 +50,4 @@ export const BadgeNomadLabel: React.FC<BadgeNomadLabelProps> = ({
     </>
   )
 }
+
diff --git a/src/views/User/UserProfile/Badges/index.tsx b/src/views/User/UserProfile/Badges/index.tsx
@@ -14,6 +14,19 @@ import { Tooltip, Translate, withIcon } from '~/components'
 import { IconArrowAction24 } from '~/components/Icon/IconArrowAction24'
 import { UserStatus } from '~/gql/graphql'
 
+import { ReactComponent as IconArchitectBadge } from '@/public/static/icons/48px/badge-architect.svg'
+import { ReactComponent as IconCivicLikerBadge } from '@/public/static/icons/48px/badge-civic-liker.svg'
+import { ReactComponent as IconGoldenMotorBadge } from '@/public/static/icons/48px/badge-golden-motor.svg'
+import { ReactComponent as IconNomad1Badge } from '@/public/static/icons/48px/badge-nomad1-moon.svg'
+import { ReactComponent as IconNomad2Badge } from '@/public/static/icons/48px/badge-nomad2-star.svg'
+import { ReactComponent as IconNomad3Badge } from '@/public/static/icons/48px/badge-nomad3-light.svg'
+import { ReactComponent as IconNomad4Badge } from '@/public/static/icons/48px/badge-nomad4-fire.svg'
+import { ReactComponent as IconSeedBadge } from '@/public/static/icons/48px/badge-seed.svg'
+import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/48px/badge-traveloggers.svg'
+import { IconArrowAction, Tooltip, Translate, withIcon } from '~/components'
+import { UserStatus } from '~/gql/graphql'
+
+import { BadgeNomadDialog } from '../BadgeNomadLabel'
 import styles from './styles.module.css'
 
 type badgePros = {

diff --git a/src/views/User/UserProfile/index.tsx b/src/views/User/UserProfile/index.tsx
@@ -69,6 +69,12 @@ export const UserProfile = () => {
     })
   }, [user?.id, viewer.id])
 
+  useEffect(() => {
+    if (showBadges) {
+      window.dispatchEvent(new CustomEvent(OPEN_SHOW_NOMAD_BADGE_DIALOG))
+    }
+  }, [showBadges])
+
   /**
    * Render
    */
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,3 +50,4 @@ export const BadgeNomadLabel: React.FC<BadgeNomadLabelProps> = ({
		</>
		)
		}