avatar cleanup (keybase#18824)

tendi09 · Aug 7, 2019 · c167df7 · c167df7
1 parent 3c7913f
commit c167df7
Show file tree

Hide file tree

Showing 9 changed files with 2,664 additions and 1,296 deletions.
diff --git a/shared/chat/avatars.tsx b/shared/chat/avatars.tsx
@@ -78,7 +78,6 @@ class Avatars extends React.Component<AvatarProps> {
           loadingColor: globalColors.greyLight,
           size: 32,
           skipBackground: isMobile,
-          skipBackgroundAfterLoaded: isMobile,
           username,
         } as const)
     )

diff --git a/shared/chat/conversation/messages/message-popup/exploding/index.tsx b/shared/chat/conversation/messages/message-popup/exploding/index.tsx
@@ -88,7 +88,7 @@ class ExplodingPopupHeader extends React.Component<PropsWithTimer<Props>, State>
           <Box2 direction="horizontal">
             <Text type="BodySmall">by</Text>
             <Box2 direction="horizontal" gap="xtiny" gapStart={true} style={styles.user}>
-              <Avatar username={author} size={16} clickToProfile="tracker" />
+              <Avatar username={author} size={16} />
               <ConnectedUsernames
                 onUsernameClicked="profile"
                 colorFollowing={true}

diff --git a/shared/chat/conversation/messages/message-popup/header.tsx b/shared/chat/conversation/messages/message-popup/header.tsx
@@ -66,7 +66,7 @@ const MessagePopupHeader = (props: {
           by
         </Kb.Text>
         <Kb.Box2 direction="horizontal" gap="xtiny" gapStart={true} style={styles.alignItemsCenter}>
-          <Kb.Avatar username={author} size={16} clickToProfile="tracker" />
+          <Kb.Avatar username={author} size={16} />
           <Kb.ConnectedUsernames
             onUsernameClicked="profile"
             colorFollowing={true}

diff --git a/shared/chat/conversation/messages/message-popup/payment/index.tsx b/shared/chat/conversation/messages/message-popup/payment/index.tsx
@@ -116,7 +116,7 @@ const Header = (props: HeaderProps) =>
       >
         <Kb.Box2 direction="horizontal" gap="xtiny" fullWidth={true} centerChildren={true}>
           <Kb.Text type="BodySmall">{upperFirst(props.txVerb)} by</Kb.Text>
-          <Kb.Avatar size={16} username={props.sender} clickToProfile="tracker" />
+          <Kb.Avatar size={16} username={props.sender} />
           <Kb.ConnectedUsernames
             onUsernameClicked="profile"
             colorFollowing={true}

diff --git a/shared/common-adapters/avatar.render.desktop.tsx b/shared/common-adapters/avatar.render.desktop.tsx
@@ -3,60 +3,66 @@ import * as React from 'react'
 import * as Styles from '../styles'
 import {Props} from './avatar.render'
 
-class AvatarRender extends React.PureComponent<Props> {
-  render() {
-    const avatarSizeClasName = `avatar-${this.props.isTeam ? 'team' : 'user'}-size-${this.props.size}`
-    return (
-      <div
-        className={Styles.classNames('avatar', avatarSizeClasName)}
-        onClick={this.props.onClick}
-        style={(this.props.style as unknown) as React.CSSProperties}
-      >
-        {!this.props.skipBackground && (
-          <div className={Styles.classNames('avatar-background', avatarSizeClasName)} />
-        )}
-        {!!this.props.url && (
-          <div
-            className={Styles.classNames('avatar-user-image', avatarSizeClasName)}
-            style={{
-              backgroundImage: this.props.url,
-              opacity:
-                this.props.opacity === undefined || this.props.opacity === 1 ? undefined : this.props.opacity,
-            }}
-          />
-        )}
-        {(!!this.props.borderColor || this.props.isTeam) && (
-          <div
-            style={{
-              boxShadow: `0px 0px 0px ${this.props.isTeam ? 1 : 2}px ${this.props.borderColor ||
-                Styles.globalColors.black_10} ${this.props.isTeam ? 'inset' : ''}`,
-            }}
-            className={Styles.classNames(
-              {
-                'avatar-border': !this.props.isTeam,
-                'avatar-border-team': this.props.isTeam,
-              },
-              avatarSizeClasName
-            )}
-          />
-        )}
-        {this.props.followIconType && (
-          <Icon type={this.props.followIconType} style={this.props.followIconStyle} />
-        )}
-        {this.props.editable && (
-          <Icon
-            type="iconfont-edit"
-            style={{
-              bottom: this.props.isTeam ? -2 : 0,
-              position: 'absolute',
-              right: this.props.isTeam ? -18 : 0,
-            }}
-          />
-        )}
-        {this.props.children}
-      </div>
-    )
-  }
+const Avatar = (props: Props) => {
+  const avatarSizeClasName = `avatar-${props.isTeam ? 'team' : 'user'}-size-${props.size}`
+  return (
+    <div
+      className={Styles.classNames('avatar', avatarSizeClasName)}
+      onClick={props.onClick}
+      style={Styles.collapseStyles([props.style, props.onClick && styles.clickable])}
+    >
+      {!props.skipBackground && (
+        <div className={Styles.classNames('avatar-background', avatarSizeClasName)} />
+      )}
+      {!!props.url && (
+        <div
+          className={Styles.classNames('avatar-user-image', avatarSizeClasName)}
+          style={{
+            backgroundImage: props.url,
+            opacity: props.opacity === undefined || props.opacity === 1 ? undefined : props.opacity,
+          }}
+        />
+      )}
+      {(!!props.borderColor || props.isTeam) && (
+        <div
+          style={Styles.collapseStyles([
+            props.isTeam ? styles.borderTeam : styles.border,
+            props.borderColor && {
+              boxShadow: `0px 0px 0px ${props.isTeam ? 1 : 2}px ${props.borderColor ||
+                Styles.globalColors.black_10} ${props.isTeam ? 'inset' : ''}`,
+            },
+          ])}
+          className={Styles.classNames(
+            {'avatar-border': !props.isTeam, 'avatar-border-team': props.isTeam},
+            avatarSizeClasName
+          )}
+        />
+      )}
+      {props.followIconType && <Icon type={props.followIconType} style={props.followIconStyle} />}
+      {props.editable && <Icon type="iconfont-edit" style={props.isTeam ? styles.editTeam : styles.edit} />}
+      {props.children}
+    </div>
+  )
 }
 
-export default AvatarRender
+const styles = Styles.styleSheetCreate({
+  border: Styles.platformStyles({
+    isElectron: {boxShadow: `0px 0px 0px 2px ${Styles.globalColors.black_10}}`},
+  }),
+  borderTeam: Styles.platformStyles({
+    isElectron: {boxShadow: `0px 0px 0px 1px ${Styles.globalColors.black_10} inset`},
+  }),
+  clickable: Styles.platformStyles({isElectron: {...Styles.desktopStyles.clickable}}),
+  edit: {
+    bottom: 0,
+    position: 'absolute',
+    right: 0,
+  },
+  editTeam: {
+    bottom: -2,
+    position: 'absolute',
+    right: -18,
+  },
+})
+
+export default Avatar
diff --git a/shared/common-adapters/avatar.render.native.tsx b/shared/common-adapters/avatar.render.native.tsx
@@ -13,10 +13,6 @@ const Kb = {
   NativeImage,
 }
 
-type State = {
-  loaded: boolean
-}
-
 const sizeToTeamBorderRadius = {
   '12': 2,
   '128': 12,
@@ -27,121 +23,53 @@ const sizeToTeamBorderRadius = {
   '96': 10,
 }
 
-// Android doesn't handle background colors border radius setting
 const backgroundOffset = 1
-
-const background = props => (
-  <Kb.Box
-    loadingColor={props.loadingColor}
-    borderRadius={props.borderRadius}
-    style={[
-      styles.background,
-      {
-        backgroundColor: props.loaded
-          ? Styles.globalColors.white
-          : props.loadingColor || Styles.globalColors.greyLight,
-        borderRadius: props.borderRadius,
-      },
-    ]}
-  />
-)
-
-const userImage = ({onLoadEnd, url, size, borderRadius, opacity = 1}) => (
-  <Kb.NativeImage
-    source={url}
-    onLoadEnd={onLoadEnd}
-    style={[styles[`image:${size}`], {borderRadius, opacity}]}
-  />
-)
-
 const borderOffset = -1
 const borderSize = 1
 // Layer on top to extend outside of the image
-const border = ({borderColor, borderRadius}) => (
-  <Kb.Box style={[styles.borderBase, {borderColor, borderRadius}]} />
-)
-
-class AvatarRender extends React.PureComponent<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {loaded: true}
-  }
-
-  _mounted = false
-
-  _onLoadOrError = () => {
-    if (this._mounted && !this.state.loaded) {
-      this.setState({loaded: true})
-    }
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    if (this.props.url !== prevProps.url) {
-      this.setState({loaded: false})
-    }
-  }
 
-  componentDidMount() {
-    this._mounted = true
-  }
-
-  componentWillUnmount() {
-    this._mounted = false
-  }
-
-  render() {
-    const {size} = this.props
-    const borderRadius = this.props.isTeam ? sizeToTeamBorderRadius[String(size)] : size / 2
-    const containerStyle = Styles.collapseStyles([styles[`box:${size}`], this.props.style])
-
-    return (
-      <Kb.ClickableBox onClick={this.props.onClick} feedback={false} style={containerStyle}>
-        <Kb.Box style={containerStyle}>
-          {!this.props.skipBackground &&
-            (!this.props.skipBackgroundAfterLoaded || !this.state.loaded) &&
-            background({
-              borderRadius: borderRadius,
-              loaded: this.state.loaded,
-              loadingColor: this.props.loadingColor,
-            })}
-          {!!this.props.url &&
-            userImage({
-              borderRadius: borderRadius,
-              onLoadEnd: this._onLoadOrError,
-              opacity: this.props.opacity,
-              size: size,
-              url: this.props.url,
-            })}
-          {(!!this.props.borderColor || this.props.isTeam) &&
-            border({
-              borderColor: this.props.borderColor || Styles.globalColors.black_10,
-              borderRadius: borderRadius,
-            })}
-          {this.props.followIconType && (
-            <Kb.Icon
-              type={this.props.followIconType}
-              style={Styles.collapseStyles([
-                styles[`icon:${this.props.followIconSize}`],
-                this.props.followIconStyle,
-              ])}
-            />
-          )}
-          {this.props.editable && (
-            <Kb.Icon
-              type="iconfont-edit"
-              onClick={this.props.onEditAvatarClick}
-              style={{
-                bottom: this.props.isTeam ? -2 : 0,
-                position: 'absolute',
-                right: this.props.isTeam ? -28 : 0,
-              }}
-            />
-          )}
-          {this.props.children}
-        </Kb.Box>
-      </Kb.ClickableBox>
-    )
-  }
+const Avatar = (props: Props) => {
+  const {size} = props
+  const borderRadius: number = props.isTeam ? sizeToTeamBorderRadius[String(size)] : size / 2
+  const containerStyle = Styles.collapseStyles([styles[`box:${size}`], props.style])
+
+  return (
+    <Kb.ClickableBox onClick={props.onClick} feedback={false} style={containerStyle}>
+      <Kb.Box style={containerStyle}>
+        {!props.skipBackground && (
+          <Kb.Box style={[styles.background, {backgroundColor: Styles.globalColors.white, borderRadius}]} />
+        )}
+        {!!props.url && (
+          <Kb.NativeImage
+            source={props.url}
+            style={[styles[`image:${props.size}`], {borderRadius, opacity: props.opacity}]}
+          />
+        )}
+        {(!!props.borderColor || props.isTeam) && (
+          <Kb.Box
+            style={[
+              styles.borderBase,
+              {borderColor: props.borderColor || Styles.globalColors.black_10, borderRadius},
+            ]}
+          />
+        )}
+        {props.followIconType && (
+          <Kb.Icon
+            type={props.followIconType}
+            style={Styles.collapseStyles([styles[`icon:${props.followIconSize}`], props.followIconStyle])}
+          />
+        )}
+        {props.editable && (
+          <Kb.Icon
+            type="iconfont-edit"
+            onClick={props.onEditAvatarClick}
+            style={props.isTeam ? styles.editTeam : styles.edit}
+          />
+        )}
+        {props.children}
+      </Kb.Box>
+    </Kb.ClickableBox>
+  )
 }
 
 const sizes = [128, 96, 64, 48, 32, 16, 12]
@@ -190,6 +118,16 @@ const styles = Styles.styleSheetCreate({
     right: borderOffset,
     top: borderOffset,
   },
+  edit: {
+    bottom: 0,
+    position: 'absolute',
+    right: 0,
+  },
+  editTeam: {
+    bottom: -2,
+    position: 'absolute',
+    right: -28,
+  },
 })
 
-export default AvatarRender
+export default Avatar