feat: remove adorable icons requirements

berty · Jul 3, 2019 · 84d58b7 · 84d58b7
1 parent 2ea6903
commit 84d58b7
Show file tree

Hide file tree

Showing 15 changed files with 102 additions and 48 deletions.
diff --git a/client/react-native/app/common/constants/colors.js b/client/react-native/app/common/constants/colors.js
@@ -1,4 +1,4 @@
-export default {
+const colors = {
   transparent: 'transparent',
 
   white: '#FFFFFF',
@@ -72,3 +72,7 @@ export default {
 
   transparentGrey: 'rgba(161, 161, 178, 0.9)', // based on darkGrey
 }
+
+module.exports = colors
+
+export default colors
diff --git a/client/react-native/app/view/component/Avatar.js b/client/react-native/app/view/component/Avatar.js
@@ -1,48 +1,95 @@
 import React from 'react'
-import { Image } from 'react-native'
+import { Text, View } from 'react-native'
+import {
+  blue,
+  blue25,
+  green,
+  green25,
+  pink,
+  pink25,
+  orange,
+  orange25,
+  purple,
+  purple25,
+} from '@berty/common/constants/colors'
 import { fingerprint } from '@berty/common/helpers/fingerprint'
+import { conversation } from '@berty/common/helpers/entity'
 
-const Avatar = ({ data, size = 40, margin = 4, uri = null, style = [] }) => {
-  if (uri !== null) {
-    return (
-      <Image
-        style={[
-          { width: size, height: size, borderRadius: size / 2, margin: margin },
-          ...style,
-        ]}
-        source={{
-          uri: uri,
-        }}
-      />
-    )
-  }
+// From https://fluentcolors.com/
+const pastels = [
+  { default: blue, light: blue25 },
+  { default: green, light: green25 },
+  { default: pink, light: pink25 },
+  { default: orange, light: orange25 },
+  { default: purple, light: purple25 },
+]
 
+const Avatar = ({
+  id,
+  name,
+  size = 40,
+  margin = 4,
+  uri = null,
+  style = [],
+}) => {
   if (!(style instanceof Array)) {
     style = [style]
   }
 
-  if (!data || !data.id) {
-    console.error(['No id provided', data])
-    return null
-  }
+  const hexCode = fingerprint(id).substring(0, 16)
 
-  const extractedPublicKey = data.id
+  const initials = name
+    ? name
+        .replace(' ', '')
+        .substring(0, 2)
+        .toLocaleUpperCase()
+    : '?'
 
-  const hexCode = fingerprint(extractedPublicKey || data.id).substring(0, 16)
-  const retinaMode = 2
+  let colorIdx =
+    parseInt(hexCode.substring(hexCode.length - 2, hexCode.length), 16) %
+    pastels.length
 
   return (
-    <Image
+    <View
       style={[
-        { width: size, height: size, borderRadius: size / 2, margin: margin },
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          margin: margin,
+          backgroundColor: pastels[colorIdx].light,
+        },
         ...style,
       ]}
-      source={{
-        uri: `https://api.adorable.io/avatars/${size *
-          retinaMode}/${hexCode}.png`,
-      }}
-    />
+    >
+      <Text
+        style={{
+          color: pastels[colorIdx].default,
+          paddingTop: size / 4.4,
+          fontSize: size / 2.2,
+          textAlign: 'center',
+        }}
+      >
+        {initials}
+      </Text>
+    </View>
   )
 }
 
+export const ContactAvatar = ({ data = {}, ...props }) => (
+  <Avatar id={data.id} name={data.displayName} {...props} />
+)
+Avatar.Contact = ContactAvatar
+
+export const ConversationAvatar = ({ data = {}, ...props }) =>
+  data.kind === 1 ? (
+    <ContactAvatar
+      data={data.members.find(_ => _.contact.status !== 42)?.contact}
+      {...props}
+    />
+  ) : (
+    <Avatar id={data.id} name={conversation.getTitle(data)} {...props} />
+  )
+Avatar.Conversation = ConversationAvatar
+
 export default Avatar
diff --git a/client/react-native/app/view/component/ContactIdentity.js b/client/react-native/app/view/component/ContactIdentity.js
@@ -117,7 +117,7 @@ class ContactIdentity extends React.Component {
     return (
       <>
         <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
-          <Avatar data={data} size={78} style={{ marginTop: 0 }} />
+          <Avatar.Contact data={data} size={78} style={{ marginTop: 0 }} />
         </View>
         <Text large color={colors.fakeBlack} center padding>
           {data.overrideDisplayName || data.displayName}

diff --git a/client/react-native/app/view/component/ListItem.js b/client/react-native/app/view/component/ListItem.js
@@ -23,7 +23,7 @@ export default class ListItem extends PureComponent {
       >
         <Flex.Cols align="center">
           <Flex.Rows size={1} align="center">
-            <Avatar data={this.props} size={40} />
+            <Avatar.Contact data={this.props} size={40} />
           </Flex.Rows>
           <Flex.Rows
             size={7}

diff --git a/client/react-native/app/view/navigation/ContactNavigator.js b/client/react-native/app/view/navigation/ContactNavigator.js
@@ -65,7 +65,7 @@ export const SubviewsContactAddNavigator = createStackNavigator(
                         navigation.navigate('modal/contacts/card', data)
                       }
                     >
-                      <Avatar data={data} size={24} />
+                      <Avatar.Contact data={data} size={24} />
                     </TouchableOpacity>
                   ) : (
                     <Loader />

diff --git a/client/react-native/app/view/screen/Chats/Add.js b/client/react-native/app/view/screen/Chats/Add.js
@@ -50,7 +50,7 @@ export class Item extends PureComponent {
         ]}
       >
         <Flex.Cols size={1} align="center">
-          <Avatar data={this.props.data} size={40} />
+          <Avatar.Contact data={this.props.data} size={40} />
           <Flex.Rows size={3} justify="start" style={[marginLeft]}>
             <Text color={colors.fakeBlack} left ellipsed>
               {overrideDisplayName || displayName}

diff --git a/client/react-native/app/view/screen/Chats/Detail.js b/client/react-native/app/view/screen/Chats/Detail.js
@@ -107,7 +107,7 @@ export class Message extends PureComponent {
               zIndex: 2,
             }}
           >
-            <Avatar
+            <Avatar.Contact
               size={22}
               data={contact}
               style={{ margin: 0, marginBottom: -4, marginRight: 4 }}

diff --git a/client/react-native/app/view/screen/Chats/List.js b/client/react-native/app/view/screen/Chats/List.js
@@ -155,11 +155,11 @@ export class Item extends React.PureComponent {
                   return 18
                 }}
               >
-                <Avatar data={this.props.data} size={40} />
+                <Avatar.Conversation data={data} size={40} />
               </Badge>
             </View>
           ) : (
-            <Avatar data={data} size={40} />
+            <Avatar.Conversation data={data} size={40} />
           )}
         </Flex.Rows>
         <Flex.Rows

diff --git a/client/react-native/app/view/screen/Chats/Settings/List.js b/client/react-native/app/view/screen/Chats/Settings/List.js
@@ -166,17 +166,20 @@ export class SettingsScreen extends PureComponent {
                 const { id, contact, contactId } = member
                 const { displayName, overrideDisplayName } = contact || {
                   id: contactId,
-                  displayName: '?????',
+                  displayName: 'Unknown',
                 }
                 return (
                   <Menu.Item
                     key={id}
-                    icon={<Avatar data={{ id }} size={28} />}
+                    icon={
+                      <Avatar.Contact
+                        data={contact || { id: contactId }}
+                        size={28}
+                      />
+                    }
                     title={overrideDisplayName || displayName}
                     onPress={() =>
-                      navigation.navigate('modal/contacts/card', {
-                        id,
-                      })
+                      navigation.navigate('modal/contacts/card', contact)
                     }
                   />
                 )

diff --git a/client/react-native/app/view/screen/Contacts/ChatsSwitcherModal.js b/client/react-native/app/view/screen/Contacts/ChatsSwitcherModal.js
@@ -302,7 +302,7 @@ class ItemBase extends React.PureComponent {
         ]}
       >
         <Flex.Rows size={1} align="center">
-          <Avatar data={data} size={40} />
+          <Avatar.Conversation data={data} size={40} />
         </Flex.Rows>
         <Flex.Rows
           size={7}

diff --git a/client/react-native/app/view/screen/Contacts/Detail/Detail.js b/client/react-native/app/view/screen/Contacts/Detail/Detail.js
@@ -97,7 +97,7 @@ class Details extends PureComponent {
             <Screen>
               <Menu absolute>
                 <Menu.Header
-                  icon={<Avatar data={data} size={78} />}
+                  icon={<Avatar.Contact data={data} size={78} />}
                   title={data.overrideDisplayName || data.displayName}
                 />
                 <Menu.Section>

diff --git a/client/react-native/app/view/screen/Contacts/Detail/Edit.js b/client/react-native/app/view/screen/Contacts/Detail/Edit.js
@@ -40,7 +40,7 @@ export default class Edit extends PureComponent {
                     medium
                     onPress={this.onChoosePicture}
                   >
-                    <Avatar data={contact} size={78} />
+                    <Avatar.Contact data={contact} size={78} />
                   </Badge>
                 }
               />

diff --git a/client/react-native/app/view/screen/Contacts/List/Item.js b/client/react-native/app/view/screen/Contacts/List/Item.js
@@ -42,7 +42,7 @@ export class Item extends PureComponent {
         onPress={this.showDetails}
       >
         <Flex.Cols size={1} align="center">
-          <Avatar data={data} size={40} />
+          <Avatar.Contact data={data} size={40} />
           <Flex.Rows size={3} justify="start" style={[marginLeft]}>
             <Text color={colors.fakeBlack} left ellipsed>
               {overrideDisplayName || displayName}

diff --git a/client/react-native/app/view/screen/Settings/List.js b/client/react-native/app/view/screen/Settings/List.js
@@ -28,7 +28,7 @@ class List extends PureComponent {
     return (
       <Menu absolute>
         <Menu.Header
-          icon={<Avatar data={{ id }} size={78} />}
+          icon={<Avatar.Contact data={data} size={78} />}
           title={overrideDisplayName || displayName}
         />
         <Menu.Section>

diff --git a/client/react-native/app/view/screen/Settings/MyAccount/MyAccount.js b/client/react-native/app/view/screen/Settings/MyAccount/MyAccount.js
@@ -59,7 +59,7 @@ class MyAccount extends React.PureComponent {
               medium
               onPress={this.onChoosePicture}
             >
-              <Avatar data={data} size={78} />
+              <Avatar.Contact data={{ ...data, displayName }} size={78} />
             </Badge>
           }
         />