@repzo/widget-react-native 1.3.1 → 1.4.0

package/src/ui/screens/chat/ChatView.styles.ts

@@ -2,9 +2,14 @@
 
 import { StyleSheet } from 'react-native';
 
-import { fontSize, palette, radius, spacing } from '../../styles/theme';
+import { fontSize, palette, radius, shadows, spacing } from '../../styles/theme';
 import { START_ALIGN } from '../../utils/rtl';
 
+/** A message's photo album: one square, fitting the bubble on a 320 pt phone. */
+const ALBUM_SIZE = 216;
+const ALBUM_GAP = 3;
+const ALBUM_TILE = (ALBUM_SIZE - ALBUM_GAP) / 2;
+
 export const styles = StyleSheet.create({
   header: {
     flexDirection: 'row',
@@ -113,6 +118,54 @@ export const styles = StyleSheet.create({
     paddingBottom: spacing.sm,
     gap: spacing.sm,
   },
+  // The inverted list flips its container: paddingTop shows at the bottom.
+  threadContent: {
+    paddingHorizontal: spacing.lg,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.lg,
+  },
+  threadRow: {
+    gap: spacing.sm,
+  },
+  threadGap: {
+    height: spacing.sm,
+  },
+  threadTail: {
+    gap: spacing.sm,
+  },
+  threadTailInList: {
+    paddingTop: spacing.sm,
+  },
+  // Floats over the thread's bottom corner, just above the composer.
+  jumpToLatest: {
+    position: 'absolute',
+    bottom: spacing.md,
+    end: spacing.lg,
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.white,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: palette.border,
+    ...shadows.floating,
+  },
+  jumpBadge: {
+    position: 'absolute',
+    top: -6,
+    end: -4,
+    minWidth: 18,
+    height: 18,
+    paddingHorizontal: 5,
+    borderRadius: radius.pill,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  jumpBadgeText: {
+    fontSize: fontSize.micro,
+    fontWeight: '700',
+  },
   loadMore: {
     alignSelf: 'center',
     paddingVertical: spacing.sm,
@@ -204,6 +257,10 @@ export const styles = StyleSheet.create({
   attachments: {
     gap: spacing.xs + 2,
   },
+  // A reply's paragraphs and the images between them.
+  inlineParts: {
+    gap: spacing.sm,
+  },
   attachmentsSpaced: {
     marginTop: spacing.sm,
   },
@@ -211,6 +268,87 @@ export const styles = StyleSheet.create({
     width: 180,
     height: 140,
     borderRadius: radius.md,
+    // What shows while it loads, like an album tile.
+    backgroundColor: 'rgba(0,0,0,0.08)',
+  },
+  // Over a photo while it loads: a dark disc reads on the brand bubble and the white one alike.
+  photoLoader: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  photoLoaderBadge: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.4)',
+  },
+  album: {
+    width: ALBUM_SIZE,
+    height: ALBUM_SIZE,
+    borderRadius: radius.md,
+    overflow: 'hidden',
+    gap: ALBUM_GAP,
+  },
+  albumRow: {
+    flexDirection: 'row',
+  },
+  albumGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  albumColumn: {
+    flex: 1,
+    gap: ALBUM_GAP,
+  },
+  // Half the square: one of two side by side, or the tall one of three.
+  albumHalf: {
+    flex: 1,
+  },
+  albumQuarter: {
+    width: ALBUM_TILE,
+    height: ALBUM_TILE,
+  },
+  albumTile: {
+    overflow: 'hidden',
+    backgroundColor: 'rgba(0,0,0,0.08)',
+  },
+  albumImage: {
+    width: '100%',
+    height: '100%',
+  },
+  // Opaque, so it reads the same in the visitor's colored bubble and a teammate's.
+  albumFallback: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    padding: spacing.sm,
+    backgroundColor: palette.surfaceAlt,
+  },
+  albumFallbackType: {
+    color: palette.textMuted,
+    fontSize: fontSize.caption,
+    fontWeight: '700',
+  },
+  albumFallbackName: {
+    color: palette.text,
+    fontSize: fontSize.caption,
+    textAlign: 'center',
+  },
+  // Over the last tile when the album has more photos than it shows.
+  albumMore: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'rgba(0,0,0,0.45)',
+  },
+  albumMoreText: {
+    color: palette.white,
+    fontSize: fontSize.heading,
+    fontWeight: '700',
   },
   // Follows the bubble's side. Under the visitor's it lines up with
   // `receiptText`, which it replaces on a failed message.