Conversation list mobile

shared/actions/chat.js

@@ -928,7 +928,7 @@ function * _loadInbox (action: ?LoadInbox): SagaGenerator<any, any> {
       }
       // find it
     } else if (incoming.chatInboxFailed) {
-      console.warn('ignoring chatInboxFailed', incoming.chatInboxFailed)
+      console.log('ignoring chatInboxFailed', incoming.chatInboxFailed)
       incoming.chatInboxFailed.response.result()
       const error = incoming.chatInboxFailed.params.error
       const conversationIDKey = conversationIDToKey(incoming.chatInboxFailed.params.convID)

shared/chat/conversations-list/index.native.js

@@ -1,6 +1,6 @@
 // @flow
 import React from 'react'
-import {Text, MultiAvatar, Icon, /* Usernames, Markdown, */ Box, ClickableBox, NativeScrollView} from '../../common-adapters/index.native'
+import {Text, MultiAvatar, Icon, Usernames, Markdown, Box, ClickableBox, NativeScrollView} from '../../common-adapters/index.native'
 import {globalStyles, globalColors, globalMargins} from '../../styles'
 import {shouldUpdate} from 'recompose'
 
@@ -59,51 +59,49 @@ const Avatars = ({participants, youNeedToRekey, participantNeedToRekey, isMuted,
 }
 
 const TopLine = ({hasUnread, showBold, participants, subColor, timestamp, usernameColor, commaColor}) => {
-  return null
-  // const boldOverride = showBold ? globalStyles.fontBold : null
-  // return (
-    // <Box style={{...globalStyles.flexBoxRow, alignItems: 'center', maxHeight: 17, minHeight: 17}}>
-      // <Box style={{...globalStyles.flexBoxRow, flex: 1, height: 17, position: 'relative'}}>
-        // <Box style={{...globalStyles.flexBoxColumn, bottom: 0, justifyContent: 'flex-start', left: 0, position: 'absolute', right: 0, top: 0}}>
-          // <Usernames
-            // inline={true}
-            // type='BodySemibold'
-            // style={{...boldOverride, color: usernameColor}}
-            // commaColor={commaColor}
-            // containerStyle={{color: usernameColor, paddingRight: 7}}
-            // users={participants.map(p => ({username: p})).toArray()}
-            // title={participants.join(', ')} />
-        // </Box>
-      // </Box>
-      // <Text type='BodySmall' style={{...boldOverride, color: subColor, lineHeight: 17}}>{timestamp}</Text>
-      // {hasUnread && <Box style={unreadDotStyle} />}
-    // </Box>
-  // )
+  const boldOverride = showBold ? globalStyles.fontBold : null
+  return (
+    <Box style={{...globalStyles.flexBoxRow, alignItems: 'center', maxHeight: 17, minHeight: 17}}>
+      <Box style={{...globalStyles.flexBoxRow, flex: 1, height: 17, position: 'relative'}}>
+        <Box style={{...globalStyles.flexBoxColumn, bottom: 0, justifyContent: 'flex-start', left: 0, position: 'absolute', right: 0, top: 0}}>
+          <Usernames
+            inline={true}
+            type='BodySemibold'
+            style={{...boldOverride, color: usernameColor}}
+            commaColor={commaColor}
+            containerStyle={{color: usernameColor, paddingRight: 7}}
+            users={participants.map(p => ({username: p})).toArray()}
+            title={participants.join(', ')} />
+        </Box>
+      </Box>
+      <Text type='BodySmall' style={{...boldOverride, color: subColor, lineHeight: 17}}>{timestamp}</Text>
+      {hasUnread && <Box style={unreadDotStyle} />}
+    </Box>
+  )
 }
 
 const BottomLine = ({participantNeedToRekey, youNeedToRekey, isMuted, showBold, subColor, snippet}) => {
-  return null
-  // const boldOverride = showBold ? globalStyles.fontBold : null
-
-  // let content
-
-  // if (youNeedToRekey) {
-    // content = <Text type='BodySmallSemibold' backgroundMode='Terminal' style={{alignSelf: 'flex-start', backgroundColor: globalColors.red, borderRadius: 2, color: globalColors.white, fontSize: 10, paddingLeft: 2, paddingRight: 2}}>REKEY NEEDED</Text>
-  // } else if (participantNeedToRekey) {
-    // content = <Text type='BodySmall' backgroundMode='Terminal' style={{color: subColor}}>Waiting for participants to rekey</Text>
-  // } else if (snippet && !isMuted) {
-    // content = <Markdown preview={true} style={{...noWrapStyle, ...boldOverride, color: subColor, fontSize: 11, lineHeight: 15, minHeight: 15}}>{snippet}</Markdown>
-  // } else {
-    // return null
-  // }
-
-  // return (
-    // <Box style={{...globalStyles.flexBoxRow, alignItems: 'center', maxHeight: 17, minHeight: 17, position: 'relative'}}>
-      // <Box style={{...globalStyles.flexBoxColumn, bottom: 0, justifyContent: 'flex-start', left: 0, position: 'absolute', right: 0, top: 0}}>
-        // {content}
-      // </Box>
-    // </Box>
-  // )
+  const boldOverride = showBold ? globalStyles.fontBold : null
+
+  let content
+
+  if (youNeedToRekey) {
+    content = <Text type='BodySmallSemibold' backgroundMode='Terminal' style={{alignSelf: 'flex-start', backgroundColor: globalColors.red, borderRadius: 2, color: globalColors.white, fontSize: 10, paddingLeft: 2, paddingRight: 2}}>REKEY NEEDED</Text>
+  } else if (participantNeedToRekey) {
+    content = <Text type='BodySmall' backgroundMode='Terminal' style={{color: subColor}}>Waiting for participants to rekey</Text>
+  } else if (snippet && !isMuted) {
+    content = <Markdown preview={true} style={{...boldOverride, color: subColor, fontSize: 11, lineHeight: 15, minHeight: 15}}>{snippet}</Markdown>
+  } else {
+    return null
+  }
+
+  return (
+    <Box style={{...globalStyles.flexBoxRow, alignItems: 'center', maxHeight: 17, minHeight: 17, position: 'relative'}}>
+      <Box style={{...globalStyles.flexBoxColumn, bottom: 0, justifyContent: 'flex-start', left: 0, position: 'absolute', right: 0, top: 0}}>
+        {content}
+      </Box>
+    </Box>
+  )
 }
 
 const _Row = (props: RowProps) => {
@@ -158,28 +156,22 @@ const Row = shouldUpdate((props: RowProps, nextProps: RowProps) => {
   return different
 })(_Row)
 
-// type RowProps = Props & {conversation: InboxState, unreadCount: number, rekeyInfos: Map<ConversationIDKey, RekeyInfo>}
-
-// const Row = (props: RowProps) => (
-  // <Text type='Body'>{props.conversation.get('participants').toArray()}</Text>
-// )
-
 const ConversationList = (props: Props) => (
-  <Box style={{...globalStyles.flexBoxColumn, flex: 1, backgroundColor: globalColors.darkBlue4}}>
+  <Box style={{...globalStyles.flexBoxColumn, backgroundColor: globalColors.darkBlue4, flex: 1}}>
     <AddNewRow {...props} />
     <NativeScrollView style={{...globalStyles.flexBoxColumn, flex: 1}}>
       {props.rows.map(rowProps => <Row {...rowProps} key={rowProps.conversationIDKey} />)}
     </NativeScrollView>
   </Box>
 )
 
-// const unreadDotStyle = {
-  // backgroundColor: globalColors.orange,
-  // borderRadius: 3,
-  // height: 6,
-  // marginLeft: 4,
-  // width: 6,
-// }
+const unreadDotStyle = {
+  backgroundColor: globalColors.orange,
+  borderRadius: 3,
+  height: 6,
+  marginLeft: 4,
+  width: 6,
+}
 
 const avatarMutedIconStyle = {
   marginLeft: -globalMargins.small,
@@ -199,27 +191,6 @@ const conversationRowStyle = {
   paddingRight: 8,
 }
 
-// const containerStyle = {
-  // ...globalStyles.flexBoxColumn,
-  // backgroundColor: globalColors.darkBlue4,
-  // flex: 1,
-  // maxWidth: 240,
-// }
-
-// const scrollableStyle = {
-  // ...globalStyles.flexBoxColumn,
-  // flex: 1,
-  // overflowY: 'auto',
-  // willChange: 'transform',
-// }
-
-// const noWrapStyle = {
-  // display: 'block',
-  // overflow: 'hidden',
-  // textOverflow: 'ellipsis',
-  // whiteSpace: 'nowrap',
-// }
-
 const rowContainerStyle = {
   ...globalStyles.flexBoxRow,
   ...globalStyles.clickable,

shared/chat/dumb.js

@@ -343,7 +343,7 @@ const conversationsList = {
           info: null,
           muted: false,
           participants: List(['look down!']),
-          snippet: 'one two three four five six seven eight nine ten',
+          snippet: 'one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen',
           time: now,
           unreadCount: 3,
         }),

shared/common-adapters/markdown.js

@@ -1,5 +1,4 @@
 // @flow
-
 import Text from './text'
 import Box from './box'
 import {emojiIndex} from 'emoji-mart'
@@ -53,7 +52,13 @@ class EmojiIfExists extends PureComponent<void, EmojiProps, void> {
   render () {
     const emoji = (this.props.children && this.props.children.join('')) || ''
     const exists = emojiIndex.emojis.hasOwnProperty(emoji.split(':')[1])
-    return exists ? <Emoji {...this.props} /> : <Text type='Body' style={this.props.preview ? neutralPreviewStyle : neutralStyle}>{emoji}</Text>
+    return exists
+      ? <Emoji {...this.props} />
+      : <Text
+        type='Body'
+        style={this.props.preview ? neutralPreviewStyle : neutralStyle}
+        lineClamp={this.props.preview ? 1 : undefined}
+        >{emoji}</Text>
   }
 }
 
@@ -64,7 +69,7 @@ function previewCreateComponent (type, key, children, options) {
     case 'native-emoji':
       return <Emoji size={16} key={key}>{children}</Emoji>
     default:
-      return <Text type='BodySmall' key={key} style={neutralPreviewStyle}>{children}</Text>
+      return <Text type='BodySmall' key={key} style={neutralPreviewStyle} lineClamp={1}>{children}</Text>
   }
 }
 
@@ -116,7 +121,7 @@ function process (ast, createComponent) {
 
 class Markdown extends PureComponent<void, Props, void> {
   render () {
-    return <Text type='Body' style={this.props.style}>{process(parser.parse(this.props.children || ''), this.props.preview ? previewCreateComponent : messageCreateComponent)}</Text>
+    return <Text type='Body' style={this.props.style} lineClamp={this.props.preview ? 1 : undefined}>{process(parser.parse(this.props.children || ''), this.props.preview ? previewCreateComponent : messageCreateComponent)}</Text>
   }
 }
 

shared/common-adapters/usernames.js

@@ -13,7 +13,7 @@ function usernameText ({type, users, style, commaColor, inline, redColor, backgr
       ...(!isMobile ? {textDecoration: 'inherit'} : null),
       ...((colorFollowing && !u.you) ? {color: u.following ? globalColors.green2 : globalColors.blue} : null),
       ...((colorBroken && u.broken && !u.you) ? {color: redColor || globalColors.red} : null),
-      ...(inline ? {display: 'inline'} : null),
+      ...((inline && !isMobile) ? {display: 'inline'} : null),
       ...(u.you ? globalStyles.italic : null),
     }
 
@@ -35,24 +35,27 @@ function usernameText ({type, users, style, commaColor, inline, redColor, backgr
   })
 }
 
+const inlineStyle = isMobile ? { } : {
+  display: 'inline',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  width: '100%',
+}
+const inlineProps = isMobile ? {lineClamp: 1} : { }
+
 class Usernames extends Component<void, Props, void> {
   shouldComponentUpdate (nextProps: Props) {
     return JSON.stringify(this.props) !== JSON.stringify(nextProps)
   }
 
   render () {
-    const containerStyle = this.props.inline ? {
-      display: 'inline',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      width: '100%',
-      overflow: 'hidden',
-    } : {...globalStyles.flexBoxRow, flexWrap: 'wrap'}
+    const containerStyle = this.props.inline ? inlineStyle : {...globalStyles.flexBoxRow, flexWrap: 'wrap'}
     const rwers = this.props.users.filter(u => !u.readOnly)
     const readers = this.props.users.filter(u => !!u.readOnly)
 
     return (
-      <Text type={this.props.type} backgroundMode={this.props.backgroundMode} style={{...containerStyle, ...(isMobile ? {} : {textDecoration: 'inherit'}), ...this.props.containerStyle}} title={this.props.title}>
+      <Text type={this.props.type} backgroundMode={this.props.backgroundMode} style={{...containerStyle, ...(isMobile ? {} : {textDecoration: 'inherit'}), ...this.props.containerStyle}} title={this.props.title} {...(this.props.inline ? inlineProps : { })}>
         {!!this.props.prefix && <Text type={this.props.type} backgroundMode={this.props.backgroundMode} style={this.props.style}>{this.props.prefix}</Text>}
         {usernameText({...this.props, users: rwers})}
         {!!readers.length && <Text type={this.props.type} backgroundMode={this.props.backgroundMode} style={{...this.props.style, marginRight: 1}}>#</Text>}

shared/local-debug-live.js

@@ -8,10 +8,10 @@ import {envVarDebugJson, isTesting} from './local-debug'
 
 // Shared settings
 const dumbFilterJson = (envVarDebugJson() || {}).dumbFilter || ''
-const dumbFilterOverride = '' // Changing this will apply during a hot reload session
+const dumbFilterOverride = 'conversations' // Changing this will apply during a hot reload session
 
 export const dumbFilter = dumbFilterOverride || dumbFilterJson
 
 // Mobile only settings
-export const dumbIndex = 0
+export const dumbIndex = 9
 export const dumbFullscreen = isTesting