Prettier profile headers (no standard header)

zio/stable
Paul Frazee 2023-01-18 12:56:53 -06:00
parent 990c824648
commit 6a01e0529b
6 changed files with 34 additions and 9 deletions

View File

@ -236,6 +236,8 @@ PODS:
- React-jsinspector (0.71.0)
- React-logger (0.71.0):
- glog
- react-native-blur (4.3.0):
- React-Core
- react-native-cameraroll (5.2.0):
- React-Core
- react-native-image-resizer (3.0.4):
@ -413,6 +415,7 @@ DEPENDENCIES:
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- React-logger (from `../node_modules/react-native/ReactCommon/logger`)
- "react-native-blur (from `../node_modules/@react-native-community/blur`)"
- "react-native-cameraroll (from `../node_modules/@react-native-camera-roll/camera-roll`)"
- "react-native-image-resizer (from `../node_modules/@bam.tech/react-native-image-resizer`)"
- react-native-pager-view (from `../node_modules/react-native-pager-view`)
@ -493,6 +496,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
React-logger:
:path: "../node_modules/react-native/ReactCommon/logger"
react-native-blur:
:path: "../node_modules/@react-native-community/blur"
react-native-cameraroll:
:path: "../node_modules/@react-native-camera-roll/camera-roll"
react-native-image-resizer:
@ -578,6 +583,7 @@ SPEC CHECKSUMS:
React-jsiexecutor: 060dd495f1e2af3d87216f7ca8a94c55ec885b4f
React-jsinspector: 5061fcbec93fd672183dfb39cc2f65e55a0835db
React-logger: a6c0b3a807a8e81f6d7fea2e72660766f55daa50
react-native-blur: 50c9feabacbc5f49b61337ebc32192c6be7ec3c3
react-native-cameraroll: 0ff04cc4e0ff5f19a94ff4313e5c8bc4503cd86d
react-native-image-resizer: 794abf75ec13ed1f0dbb1f134e27504ea65e9e66
react-native-pager-view: 54bed894cecebe28cede54c01038d9d1e122de43

View File

@ -24,6 +24,7 @@
"@react-native-async-storage/async-storage": "^1.17.6",
"@react-native-camera-roll/camera-roll": "^5.1.0",
"@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/blur": "^4.3.0",
"@zxing/text-encoding": "^0.9.0",
"base64-js": "^1.5.1",
"email-validator": "^2.0.4",

View File

@ -8,6 +8,7 @@ import {
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {BlurView} from '@react-native-community/blur'
import {ProfileViewModel} from '../../../state/models/profile-view'
import {useStores} from '../../../state'
import {
@ -36,6 +37,9 @@ export const ProfileHeader = observer(function ProfileHeader({
const pal = usePalette('default')
const store = useStores()
const onPressBack = () => {
store.nav.tab.goBack()
}
const onPressAvi = () => {
if (view.avatar) {
store.shell.openLightbox(new ProfileImageLightbox(view))
@ -262,6 +266,11 @@ export const ProfileHeader = observer(function ProfileHeader({
</View>
) : undefined}
</View>
<TouchableWithoutFeedback onPress={onPressBack}>
<BlurView style={styles.backBtn} blurType="dark">
<FontAwesomeIcon size={18} icon="angle-left" style={s.white} />
</BlurView>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
testID="profileHeaderAviButton"
onPress={onPressAvi}>
@ -284,9 +293,19 @@ const styles = StyleSheet.create({
width: '100%',
height: 120,
},
backBtn: {
position: 'absolute',
top: 10,
left: 10,
width: 30,
height: 30,
borderRadius: 15,
alignItems: 'center',
justifyContent: 'center',
},
avi: {
position: 'absolute',
top: 80,
top: 110,
left: 10,
width: 84,
height: 84,

View File

@ -61,7 +61,7 @@ export function UserBanner({
}, [onSelectNewBanner])
const renderSvg = () => (
<Svg width="100%" height="120" viewBox="50 0 200 100">
<Svg width="100%" height="150" viewBox="50 0 200 100">
<Defs>
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<Stop
@ -118,6 +118,6 @@ const styles = StyleSheet.create({
},
bannerImage: {
width: '100%',
height: 120,
height: 150,
},
})

View File

@ -5,7 +5,6 @@ import {ViewSelector} from '../com/util/ViewSelector'
import {ScreenParams} from '../routes'
import {ProfileUiModel, Sections} from '../../state/models/profile-ui'
import {useStores} from '../../state'
import {ConfirmModal} from '../../state/models/shell-ui'
import {ProfileHeader} from '../com/profile/ProfileHeader'
import {FeedItem} from '../com/posts/FeedItem'
import {PostFeedLoadingPlaceholder} from '../com/util/LoadingPlaceholder'
@ -13,8 +12,6 @@ import {ErrorScreen} from '../com/util/error/ErrorScreen'
import {ErrorMessage} from '../com/util/error/ErrorMessage'
import {EmptyState} from '../com/util/EmptyState'
import {Text} from '../com/util/text/Text'
import {ViewHeader} from '../com/util/ViewHeader'
import * as Toast from '../com/util/Toast'
import {FAB} from '../com/util/FAB'
import {s, colors} from '../lib/styles'
import {useOnMainScroll} from '../lib/hooks/useOnMainScroll'
@ -152,11 +149,8 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
renderItem = () => <View />
}
const title =
uiState.profile.displayName || uiState.profile.handle || params.name
return (
<View testID="profileView" style={styles.container}>
<ViewHeader title={title} />
{uiState.profile.hasError ? (
<ErrorScreen
testID="profileErrorScreen"

View File

@ -1967,6 +1967,11 @@
resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.1.tgz#d3a9e685ce2383b1e92b89a334896c5575cc103d"
integrity sha512-nvSIIHzybVWqYxcJE5hpT17ekxAAg383Ggzw5WrYHtkKX61N1AwaKSNmXs5xHV7pmKSOe/yWjtSwxIzfW51I5Q==
"@react-native-community/blur@^4.3.0":
version "4.3.0"
resolved "https://registry.yarnpkg.com/@react-native-community/blur/-/blur-4.3.0.tgz#e5018b3b0bd6de9632ac6cf34e9f8e0f1a9a28ec"
integrity sha512-d6phh39kKcbZ4IluDftiVWqfeFOgjl1AbQWzN47x+hLKQ5GvQJ6QhRvgAuDZ+xbJksrbXgNpMjVYkjsbcVehxg==
"@react-native-community/cli-clean@^10.0.0":
version "10.0.0"
resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-10.0.0.tgz#09cc4c63116e81d3765ffedecc38387bcc7b4483"