diff options
Diffstat (limited to 'src/view/com/composer/ComposerReplyTo.tsx')
| -rw-r--r-- | src/view/com/composer/ComposerReplyTo.tsx | 157 |
1 files changed, 67 insertions, 90 deletions
diff --git a/src/view/com/composer/ComposerReplyTo.tsx b/src/view/com/composer/ComposerReplyTo.tsx index d4ba1f3a8..74ca61507 100644 --- a/src/view/com/composer/ComposerReplyTo.tsx +++ b/src/view/com/composer/ComposerReplyTo.tsx @@ -16,7 +16,7 @@ import {ComposerOptsPostRef} from 'state/shell/composer' import {QuoteEmbed} from 'view/com/util/post-embeds/QuoteEmbed' import {Text} from 'view/com/util/text/Text' import {PreviewableUserAvatar} from 'view/com/util/UserAvatar' -import {useTheme} from '#/alf' +import {atoms as a, useTheme} from '#/alf' export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) { const t = useTheme() @@ -122,94 +122,87 @@ function ComposerReplyToImages({ showFull: boolean }) { return ( - <View - style={{ - width: 65, - flexDirection: 'column', - alignItems: 'center', - }}> - <View style={styles.imagesContainer}> - {(images.length === 1 && ( - <Image - source={{uri: images[0].thumb}} - style={styles.singleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> + <View style={[styles.imagesContainer, a.mx_xs]}> + {(images.length === 1 && ( + <Image + source={{uri: images[0].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + )) || + (images.length === 2 && ( + <View style={[a.flex_1, a.flex_row, a.gap_2xs]}> + <Image + source={{uri: images[0].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + <Image + source={{uri: images[1].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + </View> )) || - (images.length === 2 && ( - <View style={[styles.imagesInner, styles.imagesRow]}> + (images.length === 3 && ( + <View style={[a.flex_1, a.flex_row, a.gap_2xs]}> + <Image + source={{uri: images[0].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + <View style={[a.flex_1, a.gap_2xs]}> <Image - source={{uri: images[0].thumb}} - style={styles.doubleImageTall} + source={{uri: images[1].thumb}} + style={[a.flex_1]} cachePolicy="memory-disk" accessibilityIgnoresInvertColors /> <Image - source={{uri: images[1].thumb}} - style={styles.doubleImageTall} + source={{uri: images[2].thumb}} + style={[a.flex_1]} cachePolicy="memory-disk" accessibilityIgnoresInvertColors /> </View> - )) || - (images.length === 3 && ( - <View style={[styles.imagesInner, styles.imagesRow]}> + </View> + )) || + (images.length === 4 && ( + <View style={[a.flex_1, a.gap_2xs]}> + <View style={[a.flex_1, a.flex_row, a.gap_2xs]}> <Image source={{uri: images[0].thumb}} - style={styles.doubleImageTall} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + <Image + source={{uri: images[1].thumb}} + style={[a.flex_1]} cachePolicy="memory-disk" accessibilityIgnoresInvertColors /> - <View style={styles.imagesInner}> - <Image - source={{uri: images[1].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - <Image - source={{uri: images[2].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - </View> </View> - )) || - (images.length === 4 && ( - <View style={styles.imagesInner}> - <View style={[styles.imagesInner, styles.imagesRow]}> - <Image - source={{uri: images[0].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - <Image - source={{uri: images[1].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - </View> - <View style={[styles.imagesInner, styles.imagesRow]}> - <Image - source={{uri: images[2].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - <Image - source={{uri: images[3].thumb}} - style={styles.doubleImage} - cachePolicy="memory-disk" - accessibilityIgnoresInvertColors - /> - </View> + <View style={[a.flex_1, a.flex_row, a.gap_2xs]}> + <Image + source={{uri: images[2].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> + <Image + source={{uri: images[3].thumb}} + style={[a.flex_1]} + cachePolicy="memory-disk" + accessibilityIgnoresInvertColors + /> </View> - ))} - </View> + </View> + ))} </View> ) } @@ -240,23 +233,7 @@ const styles = StyleSheet.create({ borderRadius: 6, overflow: 'hidden', marginTop: 2, - }, - imagesInner: { - gap: 2, - }, - imagesRow: { - flexDirection: 'row', - }, - singleImage: { - width: 65, - height: 65, - }, - doubleImageTall: { - width: 32.5, - height: 65, - }, - doubleImage: { - width: 32.5, - height: 32.5, + height: 64, + width: 64, }, }) |