Skip to content

Commit

Permalink
Merge pull request #4389 from thematters/feat/mobile-dialog
Browse files Browse the repository at this point in the history
feat(dialog): disable scroll lock for comment dialogs
  • Loading branch information
robertu7 authored May 16, 2024
2 parents 6619700 + 2f02027 commit 46a877d
Show file tree
Hide file tree
Showing 22 changed files with 166 additions and 135 deletions.
4 changes: 2 additions & 2 deletions lang/zh-Hans.json
Original file line number Diff line number Diff line change
Expand Up @@ -2326,7 +2326,7 @@
"description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
},
"gN4jLB": {
"defaultMessage": "你的编辑作品 {articleTitle} 已发布到分布式网络",
"defaultMessage": "你对 {articleTitle} 的修改已发布到 IPFS",
"description": "src/components/Notice/ArticleNotice/RevisedArticlePublishedNotice.tsx"
},
"gS1u3d": {
Expand Down Expand Up @@ -2947,7 +2947,7 @@
"description": "src/views/Me/Works/Drafts/index.tsx"
},
"tEeEJT": {
"defaultMessage": "你的作品 {articleTitle} 已发布到分布式网络",
"defaultMessage": "你的作品 {articleTitle} 已发布到 IPFS",
"description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx"
},
"tIDG14": {
Expand Down
4 changes: 2 additions & 2 deletions lang/zh-Hant.json
Original file line number Diff line number Diff line change
Expand Up @@ -2326,7 +2326,7 @@
"description": "src/components/Dialogs/RssFeedDialog/Content.tsx"
},
"gN4jLB": {
"defaultMessage": "你的編輯作品 {articleTitle} 已發布到分佈式網絡",
"defaultMessage": "你對 {articleTitle} 的修改已發佈到 IPFS",
"description": "src/components/Notice/ArticleNotice/RevisedArticlePublishedNotice.tsx"
},
"gS1u3d": {
Expand Down Expand Up @@ -2947,7 +2947,7 @@
"description": "src/views/Me/Works/Drafts/index.tsx"
},
"tEeEJT": {
"defaultMessage": "你的作品 {articleTitle} 已發布到分佈式網絡",
"defaultMessage": "你的作品 {articleTitle} 已發布到 IPFS",
"description": "src/components/Notice/ArticleNotice/ArticlePublishedNotice.tsx"
},
"tIDG14": {
Expand Down
21 changes: 10 additions & 11 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
"react-remove-scroll": "^2.5.6",
"react-spring": "^9.7.2",
"react-stickynode": "^4.1.1",
"react-use-gesture": "^9.1.3",
"react-swipeable": "^7.0.1",
"url-loader": "^4.1.1",
"use-debounce": "^9.0.4",
"validator": "^13.11.0",
Expand Down
15 changes: 9 additions & 6 deletions src/common/styles/components/dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,20 +10,23 @@
}

.dialog [data-reach-dialog-content] {
/*
* FIXME: make dialog respect the virtual keyboard on iOS
*
* @see @url{https://saricden.com/how-to-make-fixed-elements-respect-the-virtual-keyboard-on-ios}
*/
position: absolute;
right: 0;
bottom: 0;
left: 0;
inset: calc(var(--vvh) * 100) 0 auto 0;
outline: none;
transform: translateY(-100%);

@media (--sm-up) {
position: relative;
right: auto;
bottom: auto;
left: auto;
inset: auto;
width: 23.4375rem; /* 375px */
margin-top: auto;
margin-bottom: auto;
transform: initial;
transform-origin: center bottom 0;
}
}
1 change: 0 additions & 1 deletion src/common/utils/resolvers/clientPreference.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ const clientPreferenceResolver = (_: any) => {
__typename: 'ClientPreference',
id: 'local',
wall: true,
routeHistory: [],
circleBanner: true,
}
}
Expand Down
3 changes: 0 additions & 3 deletions src/common/utils/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@ export default gql`
"Login or sign up wall in article detail page"
wall: Boolean!
"Log route history for page back button"
routeHistory: [String!]
"Whether cicle banner is shown"
circleBanner: Boolean!
Expand Down
6 changes: 3 additions & 3 deletions src/components/Balance/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const Balance: React.FC<BalanceProps> = ({

return (
<span className={styles.container}>
{!isBalanceInsufficient && (
{isHKD && !isBalanceInsufficient && (
<>
<FormattedMessage
defaultMessage="Balance:"
Expand All @@ -49,18 +49,18 @@ export const Balance: React.FC<BalanceProps> = ({
</>
)}
<span className={styles.balance}>
{isUSDT && <span>USDT {formatAmount(amount)}</span>}
{isHKD && !isBalanceInsufficient && (
<span>HKD {formatAmount(amount)}</span>
)}
{isLike && <span>LIKE {formatAmount(amount, 0)}</span>}
{isHKD && isBalanceInsufficient && (
<FormattedMessage
defaultMessage="Insufficient balance"
description="src/components/Balance/index.tsx"
id="P2tEEn"
/>
)}
{isUSDT && <span>USDT {formatAmount(amount)}</span>}
{isLike && <span>LIKE {formatAmount(amount, 0)}</span>}
</span>
{isHKD && showTopUp && (
<BindEmailHintDialog>
Expand Down
69 changes: 16 additions & 53 deletions src/components/ClientUpdater/index.tsx
Original file line number Diff line number Diff line change
@@ -1,67 +1,30 @@
import { useApolloClient } from '@apollo/react-hooks'
import differenceInDays from 'date-fns/differenceInDays'
import parseISO from 'date-fns/parseISO'
import { useContext, useEffect, useRef } from 'react'
import { useEffect } from 'react'

import { useRoute, ViewerContext } from '~/components'
import { useEventListener } from '~/components'

export const ClientUpdater = () => {
const { router, isInPath, setQuery } = useRoute()
const client = useApolloClient()
const viewer = useContext(ViewerContext)
const visualViewport =
typeof window !== 'undefined' ? window.visualViewport : undefined

/**
* Update routeHistory
*/
const routeHistoryRef = useRef<string[]>([])
const routeChangeComplete = (
url: string,
{ shallow }: { shallow: boolean }
) => {
if (!client?.writeData || shallow) {
// skip shallow route change
const upadteVVH = () => {
if (!visualViewport) {
return
}

const newRouteHistory = [...routeHistoryRef.current, url]
routeHistoryRef.current = newRouteHistory

client.writeData({
id: 'ClientPreference:local',
data: { routeHistory: newRouteHistory },
})
const vvh = (visualViewport.height || 0) / 100 + 'px'
document.documentElement.style.setProperty('--vvh', vvh)
}
useEventListener(
'resize',
() => {
upadteVVH()
},
visualViewport
)

useEffect(() => {
router.events.on('routeChangeComplete', routeChangeComplete)
return () => router.events.off('routeChangeComplete', routeChangeComplete)
upadteVVH()
}, [])

/**
* Change specific new user's home feed.
*/
const changeNewUserHomeFeedSortBy = (createdAt: Date | string | number) => {
if (typeof createdAt === 'string') {
createdAt = parseISO(createdAt)
}

if (differenceInDays(new Date(), createdAt) > 7) {
return
}

setQuery('type', 'icymi')
}

useEffect(() => {
const viewerCreatedAt = viewer?.info.createdAt
const isHome = isInPath('HOME')

if (!viewerCreatedAt || !isHome) {
return
}

changeNewUserHomeFeedSortBy(viewerCreatedAt)
}, [viewer.id])

return null
}
4 changes: 4 additions & 0 deletions src/components/Dialog/Content/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,24 @@
flex-direction: column;
flex-shrink: 1;
max-height: calc(70vh - 4.25rem); /* 4.25rem is the height of header */
max-height: calc(var(--vvh) * 90 - 4.25rem);
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(var(--vvh) * 90 - 4.25rem);

@media (--sm-up) {
height: min(34rem, 64vh);
height: min(34rem, calc(var(--vvh) * 64));
}
}

@media (--sm-up) {
max-height: min(34rem, 64vh);
max-height: min(34rem, calc(var(--vvh) * 64));
}
}

Expand Down
9 changes: 7 additions & 2 deletions src/components/Dialog/Handle.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import { useIntl } from 'react-intl'
import { useSwipeable } from 'react-swipeable'

import styles from './styles.module.css'

interface HandleProps {
closeDialog: () => void
}

const Handle: React.FC<HandleProps> = ({ closeDialog, ...props }) => {
const Handle: React.FC<HandleProps> = ({ closeDialog }) => {
const intl = useIntl()

const handlers = useSwipeable({
onSwipedDown: () => closeDialog(),
})

return (
<button
type="button"
className={styles.handle}
aria-label={intl.formatMessage({ defaultMessage: 'Close', id: 'rbrahO' })}
onClick={closeDialog}
{...props}
{...handlers}
>
<span className={styles.icon} />
</button>
Expand Down
Loading

0 comments on commit 46a877d

Please sign in to comment.