From 73c9de3ce27a379b9d57550a8dcc13e251a4e60e Mon Sep 17 00:00:00 2001 From: Hailey Date: Tue, 18 Jun 2024 10:57:08 -0700 Subject: [PATCH 1/2] fix keyboard overlaying onboarding inputs (#4558) --- src/components/forms/DateField/index.tsx | 7 +++++-- src/view/com/util/layouts/LoggedOutLayout.tsx | 8 +++++++- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/forms/DateField/index.tsx b/src/components/forms/DateField/index.tsx index e231ac5baf..c916f4efce 100644 --- a/src/components/forms/DateField/index.tsx +++ b/src/components/forms/DateField/index.tsx @@ -1,5 +1,5 @@ import React from 'react' -import {View} from 'react-native' +import {Keyboard, View} from 'react-native' import DatePicker from 'react-native-date-picker' import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' @@ -49,7 +49,10 @@ export function DateField({ { + Keyboard.dismiss() + control.open() + }} isInvalid={isInvalid} accessibilityHint={accessibilityHint} /> diff --git a/src/view/com/util/layouts/LoggedOutLayout.tsx b/src/view/com/util/layouts/LoggedOutLayout.tsx index 0272a44c6b..c2c080c171 100644 --- a/src/view/com/util/layouts/LoggedOutLayout.tsx +++ b/src/view/com/util/layouts/LoggedOutLayout.tsx @@ -3,6 +3,7 @@ import {ScrollView, StyleSheet, View} from 'react-native' import {isWeb} from '#/platform/detection' import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle' +import {useIsKeyboardVisible} from 'lib/hooks/useIsKeyboardVisible' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' import {atoms as a} from '#/alf' @@ -29,13 +30,18 @@ export const LoggedOutLayout = ({ borderLeftWidth: 1, }) + const [isKeyboardVisible] = useIsKeyboardVisible() + if (isMobile) { if (scrollable) { return ( + keyboardDismissMode="none" + contentContainerStyle={[ + {paddingBottom: isKeyboardVisible ? 300 : 0}, + ]}> {children} ) From 11065174813a322e5a53097c0ea309fd8e613cc7 Mon Sep 17 00:00:00 2001 From: Eric Bailey Date: Tue, 18 Jun 2024 12:59:50 -0500 Subject: [PATCH 2/2] =?UTF-8?q?Is=20it=20"newskie"=20or=20"newsky"=20?= =?UTF-8?q?=F0=9F=A4=94=20=20(#4557)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * add newskie icon (cherry picked from commit 152e074ee053e076bf644e368047e486a5ad127c) (cherry picked from commit 8d2326f115c9c9d32aa1c41259bb81936b3868aa) * add size prop (cherry picked from commit af09ae2d8f4fedf8a50993e94b76efc44a2ef4ea) (cherry picked from commit 38dd38451bcce8afcf302ad1180802640857722a) * add a dialog for newskies to profiles (cherry picked from commit fe16f55e9c5e8faef540b563662b0c0c9a1d2d77) (cherry picked from commit c5b9f1b16ace276f422832069db076a5360616fe) * move newskie to handle (cherry picked from commit 150f2635b278a92ed67dcec748333b428aacb670) (cherry picked from commit 1efaaf835380f4e76d2e4b7fe8b727a92731a794) * use "say hello" in newskie dialog (cherry picked from commit d9a286cfc823a9e697061de84dd317625741a862) (cherry picked from commit 018dd1739fee68906dec63e05519f5ca9ae73910) * tweaks (cherry picked from commit 070363c947600c48368b01c776ea34fbf422f81e) (cherry picked from commit c30855d4ff311e31fb6ae357a9d6cd1662b291d5) * Tweaks * Re-export newskie icon * Design tweaks * Tweaks * Add source icon * Remove unused file * Remove unneeded edits * Simplify logic * Update source * Moderate displayName, fix createdAt type --------- Co-authored-by: Hailey --- assets/icons/newskie.svg | 1 + src/components/NewskieDialog.tsx | 81 +++++++++++++++++++++++++++ src/components/icons/Newskie.tsx | 5 ++ src/screens/Profile/Header/Handle.tsx | 7 ++- 4 files changed, 93 insertions(+), 1 deletion(-) create mode 100644 assets/icons/newskie.svg create mode 100644 src/components/NewskieDialog.tsx create mode 100644 src/components/icons/Newskie.tsx diff --git a/assets/icons/newskie.svg b/assets/icons/newskie.svg new file mode 100644 index 0000000000..e3a9d83c80 --- /dev/null +++ b/assets/icons/newskie.svg @@ -0,0 +1 @@ + diff --git a/src/components/NewskieDialog.tsx b/src/components/NewskieDialog.tsx new file mode 100644 index 0000000000..fcdae0daa5 --- /dev/null +++ b/src/components/NewskieDialog.tsx @@ -0,0 +1,81 @@ +import React from 'react' +import {View} from 'react-native' +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' +import {msg, Trans} from '@lingui/macro' +import {useLingui} from '@lingui/react' +import {differenceInSeconds} from 'date-fns' + +import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo' +import {useModerationOpts} from '#/state/preferences/moderation-opts' +import {HITSLOP_10} from 'lib/constants' +import {sanitizeDisplayName} from 'lib/strings/display-names' +import {atoms as a} from '#/alf' +import {Button} from '#/components/Button' +import * as Dialog from '#/components/Dialog' +import {useDialogControl} from '#/components/Dialog' +import {Newskie} from '#/components/icons/Newskie' +import {Text} from '#/components/Typography' + +export function NewskieDialog({ + profile, +}: { + profile: AppBskyActorDefs.ProfileViewDetailed +}) { + const {_} = useLingui() + const moderationOpts = useModerationOpts() + const control = useDialogControl() + const profileName = React.useMemo(() => { + const name = profile.displayName || profile.handle + if (!moderationOpts) return name + const moderation = moderateProfile(profile, moderationOpts) + return sanitizeDisplayName(name, moderation.ui('displayName')) + }, [moderationOpts, profile]) + const timeAgo = useGetTimeAgo() + const createdAt = profile.createdAt as string | undefined + const daysOld = React.useMemo(() => { + if (!createdAt) return Infinity + return differenceInSeconds(new Date(), new Date(createdAt)) / 86400 + }, [createdAt]) + + if (!createdAt || daysOld > 7) return null + + return ( + + + + + + + + + Say hello! + + + + {profileName} joined Bluesky{' '} + {timeAgo(createdAt, {format: 'long'})} ago + + + + + + + ) +} diff --git a/src/components/icons/Newskie.tsx b/src/components/icons/Newskie.tsx new file mode 100644 index 0000000000..ddbb33201e --- /dev/null +++ b/src/components/icons/Newskie.tsx @@ -0,0 +1,5 @@ +import {createSinglePathSVG} from './TEMPLATE' + +export const Newskie = createSinglePathSVG({ + path: 'M11.183 8.561c0 .544.348.984.892.984.545 0 .893-.44.893-.985V6.985c0-.544-.348-.985-.893-.985-.543 0-.892.44-.892.985v1.576Zm5.94 7.481c0 .539-.438.942-.976.942H8.004c-.538 0-.975-.411-.975-.95 0-2.782 2.264-5.021 5.046-5.021 2.783 0 5.047 2.247 5.047 5.03Zm-.43-4.584a.983.983 0 0 1 0-1.393l1.114-1.114a.985.985 0 0 1 1.393 1.393l-1.114 1.114a.985.985 0 0 1-1.393 0Zm2.897 3.741h1.575c.544 0 .985.349.985.892 0 .544-.44.892-.985.892h-1.67a.872.872 0 0 1-.89-.887c0-.543.44-.897.985-.897Zm-14.045.893c0-.544-.44-.892-.985-.892H2.985c-.544 0-.985.349-.985.892 0 .544.44.892.985.892H4.56c.545 0 .985-.349.985-.892Zm1.913-6.027a.985.985 0 0 1-1.393 1.393L4.95 10.344A.985.985 0 0 1 6.344 8.95l1.114 1.114Z', +}) diff --git a/src/screens/Profile/Header/Handle.tsx b/src/screens/Profile/Header/Handle.tsx index 9ab24fbbed..4f438a2868 100644 --- a/src/screens/Profile/Header/Handle.tsx +++ b/src/screens/Profile/Header/Handle.tsx @@ -5,7 +5,9 @@ import {Trans} from '@lingui/macro' import {Shadow} from '#/state/cache/types' import {isInvalidHandle} from 'lib/strings/handles' +import {isAndroid} from 'platform/detection' import {atoms as a, useTheme, web} from '#/alf' +import {NewskieDialog} from '#/components/NewskieDialog' import {Text} from '#/components/Typography' export function ProfileHeaderHandle({ @@ -17,7 +19,10 @@ export function ProfileHeaderHandle({ const invalidHandle = isInvalidHandle(profile.handle) const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy return ( - + + {profile.viewer?.followedBy && !blockHide ? (