moves variable margins etc outside of avatar component (#1018)

* moves variable margins etc outside of avatar component

* show usernameless contacts last in contact list

* cleans up contact display when long name or key

* ensure (?) is visible

* tightening up

* remove avatar color

App/Components/Avatar.tsx

@@ -19,7 +19,6 @@ interface StateProps {
   local: boolean
   started: boolean
   online: boolean
-  color: string
 }
 
 type Props = OwnProps & StateProps & Partial<ImageProps>
@@ -66,39 +65,35 @@ class Avatar extends React.Component<Props, State> {
   }
 
   render () {
-    const { style, icon, target, local, started, online, color } = this.props
-    let width: string | number = this.state.defaultSize
-    let height: string | number = this.state.defaultSize
-    if (style) {
-      if (style.width) {
-        width = height = style.width
-      } else if (style.height) {
-        width = height = style.height
-      }
-    }
+    const { style, icon, target, local, started, online } = this.props
+    const width = style && style.width ? style.width : this.state.defaultSize
+    const height = style && style.height ? style.height : width
+
     const { borderRadius: radius } = this.state
-    const borderRadius = radius || Number(width) / 2
+    const borderRadius = style && style.borderRadius ? style.borderRadius : typeof width === 'number' ? width / 2 : radius
 
     // If requested or if no target is known, show the ( ? ) icon
     if (icon || !target) {
-      const heightNumber = typeof height === 'number' ? height as number : this.state.defaultSize
-      const borderWidth = this.props.style && this.props.style.borderWidth ? this.props.style.borderWidth as number : 0
+      const fontSize = Math.ceil(this.state.borderRadius * 2)
       return (
         <View
           style={{
             ...(this.props.style || {}),
+            backgroundColor: undefined,
             borderRadius,
             width,
             height,
+            overflow: 'hidden',
             alignContent: 'center',
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
+            padding: 0, margin: 0
           }}
         >
           <Icon
-            style={{ width, height, textAlign: 'center' }}
+            style={{ fontSize, lineHeight: fontSize, textAlign: 'center' }}
             name={icon || 'question-circle'}
-            size={heightNumber - borderWidth}
+            size={fontSize}
             color={colors.grey_5}
             onLayout={this.onImageLayout}
           />
@@ -112,7 +107,7 @@ class Avatar extends React.Component<Props, State> {
       return (
         <View style={{ ...(this.props.style || {}), width, height, borderRadius, overflow: 'hidden' }}>
           <TextileImage
-            style={{ ...(this.props.style || {}), width, height, borderRadius }}
+            style={{ width, height, borderRadius }}
             target={target}
             index={0}
             forMinWidth={widthNumber}
@@ -175,17 +170,10 @@ const mapStateToProps = (state: RootState, ownProps: OwnProps): StateProps => {
     target = localTarget
   }
 
-  let color = 'hsla(200, 60%, 100%, 0.3)'
-  if (target) {
-    const h = Math.floor(360 * target.charCodeAt(target.length - 1) / 125)
-    const hue = h < 360 ? h > 0 ? h : 0 : 360
-    color = `hsla(${hue},90%,60%,0.3)`
-  }
-
   const started = state.textile.nodeState.state === 'started'
   const online = state.textile.online
 
-  return { target, local, started, color, online }
+  return { target, local, started, online }
 }
 
 export default connect(mapStateToProps)(Avatar)

App/Components/GroupCard/index.tsx

@@ -65,7 +65,11 @@ const GroupCard = (props: ScreenProps) => {
         <View style={styles.avatarContainer}>
           { members.slice(0, 8).map((mem: pb.IContact, i: number) => {
             const imageStyle = cardImageStyle(members.length, i)
-            return (<Avatar key={mem.address} style={imageStyle} target={mem.avatar}/>)
+            return (
+              <View key={mem.address} style={imageStyle} >
+                <Avatar style={{width: '100%', height: '100%'}} target={mem.avatar}/>
+              </View>
+            )
           })}
         </View>
       </View>

App/Components/GroupCard/statics/styles.tsx

@@ -26,6 +26,9 @@ export function cardImageStyle (count: number, index: number): ImageStyle {
   return {
     ...baseStyle,
     width: ROW_COLUMN * 0.66,
+    height: ROW_COLUMN * 0.66,
+    borderRadius: (ROW_COLUMN * 0.66) / 2,
+    overflow: 'hidden',
     backgroundColor: 'white', // avoids any transparencies blending
     marginBottom,
     marginLeft,

App/Components/Styles/ContactModal.tsx

@@ -18,8 +18,8 @@ export default StyleSheet.create({
     backgroundColor: 'white'
   } as ViewStyle,
   profile: {
-    width: '100%',
     flexDirection: 'row',
+    flex: 1,
     alignItems: 'center',
     paddingVertical: 50,
     paddingHorizontal: 19,
@@ -29,6 +29,8 @@ export default StyleSheet.create({
   } as ViewStyle,
   username: {
     marginLeft: 18,
+    marginRight: 6,
+    flex: 1,
     fontFamily: 'Biotif-Bold',
     color: Colors.cover,
     fontSize: 32

App/Components/join.tsx

@@ -15,7 +15,9 @@ const CONTAINER: ViewStyle = {
 
 const AVATAR: ImageStyle = {
   height: size._024,
-  width: size._024
+  width: size._024,
+  backgroundColor: color.grey_5,
+  borderRadius: size._024 / 2
 }
 
 const CONTENT: ViewStyle = {

App/Components/message.tsx

@@ -17,7 +17,9 @@ const CONTAINER = (alignItems: 'center' | 'flex-start'): ViewStyle => {
 
 const AVATAR: ImageStyle = {
   height: size._024,
-  width: size._024
+  width: size._024,
+  backgroundColor: color.grey_5,
+  borderRadius: size._024 / 2
 }
 
 const CONTENT: ViewStyle = {

App/Containers/Contact.tsx

@@ -25,6 +25,7 @@ interface NavProps {
 }
 
 interface StateProps {
+  displayName: string
   threadThumbs: ReadonlyArray<ThreadThumbs>
 }
 
@@ -53,12 +54,18 @@ class ContactModal extends React.Component<Props> {
 
   render () {
     const avatar = this.props.navigation.getParam('avatar')
-    const username = this.props.navigation.getParam('username')
+    // const username = this.props.navigation.getParam('username')
     return (
       <View style={styles.container}>
         <View style={styles.profile}>
           <Avatar style={{ width: 72, height: 72 }} target={avatar} />
-          <Text style={styles.username}>{username}</Text>
+          <Text
+            adjustsFontSizeToFit={true}
+            numberOfLines={1}
+            style={styles.username}
+          >
+            {this.props.displayName}
+          </Text>
         </View>
         <ScrollView style={styles.threadsList}>
           <Text style={styles.threadsTitle}>
@@ -76,8 +83,10 @@ class ContactModal extends React.Component<Props> {
 }
 
 const mapStateToProps = (state: RootState, ownProps: NavigationScreenProps<NavProps>): StateProps => {
+  const username = ownProps.navigation.getParam('username')
   const address = ownProps.navigation.getParam('address')
   return {
+    displayName: username ? username : address.substring(0, 12),
     threadThumbs: getThreadThumbs(state, address, 'name')
   }
 }

App/Containers/Contacts.tsx

@@ -116,11 +116,11 @@ class Contacts extends React.Component<Props, State> {
 
   renderRow = (row: ListRenderItemInfo<pb.IContact>) => {
     const { item } = row
-    const leftItem = <Avatar style={{ width: 50 }} target={item.avatar} />
+    const leftItem = <Avatar style={{ width: 50, height: 50 }} target={item.avatar} />
     const rightItems = [<Icon key='more' name='chevron-right' size={24} color={color.grey_4} />]
     return (
       <ListItem
-        title={item.name || item.address}
+        title={item.name || item.address.substring(0, 10)}
         leftItem={leftItem}
         rightItems={rightItems}
         onPress={this.onPress(item)}
@@ -152,8 +152,19 @@ class Contacts extends React.Component<Props, State> {
 
 const mapStateToProps = (state: RootState): StateProps => {
   const contacts = state.contacts.contacts.slice().sort((a, b) => {
-    const aSortKey = a.name || a.address
-    const bSortKey = b.name || b.address
+    let aSortKey = a.name
+    let bSortKey = b.name
+    if (a.name && !b.name) {
+      // move b later if no name
+      return -1
+    } else if (!a.name && b.name) {
+      // move a later if no name
+      return 1
+    } else if (!a.name && !b.name) {
+      // if neither have name, use address and continue
+      aSortKey = a.address
+      bSortKey = b.address
+    }
     if (aSortKey < bSortKey) {
       return -1
     } else if (aSortKey > bSortKey) {

App/SB/components/FeedItem/index.js

@@ -35,7 +35,7 @@ const FeedItem = props => {
       style={{...readStyle, justifyContent: 'center', alignItems: 'center', alignContent: 'center'}}
     >
       <Avatar
-        style={{ width: 24, height: 24 }}
+        style={{ width: '100%', height: '100%', borderRadius: 16 }}
         target={notification.avatar}
       />
     </View>