acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

adjust edit icon and image cropping size

Browse Source
This commit is contained in:
João Ferreiro
2022-12-05 16:29:44 +00:00
parent 979a264cc0
commit 49ad3746a5
2 changed files with 25 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/util/UserAvatar.tsx
+9 -8
View File
@@ -95,8 +95,8 @@ export function UserAvatar({
<View style={styles.editButtonContainer}> <View style={styles.editButtonContainer}>
<FontAwesomeIcon <FontAwesomeIcon
icon="camera" icon="camera"
size={10} size={24}
style={{color: colors.gray1}} style={{color: colors.gray1 + '99'}}
/> />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@@ -124,14 +124,15 @@ function getInitials(str: string): string {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
editButtonContainer: { editButtonContainer: {
position: 'absolute', position: 'absolute',
bottom: 6, width: 50,
right: 6, height: 50,
backgroundColor: colors.gray5, top: '50%',
width: 20, left: '50%',
height: 20, borderRadius: 25,
borderRadius: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: colors.gray5 + '99',
transform: [{translateX: -25}, {translateY: -25}],
}, },
avatarImage: { avatarImage: {
width: 80, width: 80,
src/view/com/util/UserBanner.tsx
+16 -14
View File
@@ -1,5 +1,5 @@
import React, {useCallback} from 'react' import React, {useCallback} from 'react'
import {StyleSheet, View, TouchableOpacity, Alert, Image} from 'react-native' import {StyleSheet, View, TouchableOpacity, Alert, Image, Dimensions} from 'react-native'
import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg' import Svg, {Rect, Defs, LinearGradient, Stop} from 'react-native-svg'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {getGradient} from '../../lib/asset-gen' import {getGradient} from '../../lib/asset-gen'
@@ -27,8 +27,8 @@ export function UserBanner({
openCamera({ openCamera({
mediaType: 'photo', mediaType: 'photo',
cropping: true, cropping: true,
width: 1000, width: 1500,
height: 120, height: 500,
}).then(item => { }).then(item => {
// setLocalBannerPicture(item.path) // setLocalBannerPicture(item.path)
console.log(item) console.log(item)
@@ -44,8 +44,8 @@ export function UserBanner({
await openCropper({ await openCropper({
mediaType: 'photo', mediaType: 'photo',
path: item.path, path: item.path,
width: 1000, width: 1500,
height: 120, height: 500,
}).then(croppedItem => { }).then(croppedItem => {
// setLocalBannerPicture(croppedItem.path) // setLocalBannerPicture(croppedItem.path)
console.log(croppedItem) console.log(croppedItem)
@@ -84,8 +84,8 @@ export function UserBanner({
<View style={styles.editButtonContainer}> <View style={styles.editButtonContainer}>
<FontAwesomeIcon <FontAwesomeIcon
icon="camera" icon="camera"
size={10} size={24}
style={{color: colors.gray1}} style={{color: colors.gray1 + '99'}}
/> />
</View> </View>
</TouchableOpacity> </TouchableOpacity>
@@ -97,17 +97,19 @@ export function UserBanner({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
editButtonContainer: { editButtonContainer: {
position: 'absolute', position: 'absolute',
bottom: 6, width: 50,
right: 6, height: 50,
backgroundColor: colors.gray5, top: '50%',
width: 20, left: '50%',
height: 20, borderRadius: 25,
borderRadius: 10,
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
backgroundColor: colors.gray5 + '99',
transform: [{translateX: -25}, {translateY: -25}],
}, },
bannerImage: { bannerImage: {
width: 1000, width: '100%',
height: 120, height: 120,
resizeMode: 'contain',
}, },
}) })