Page MenuHomePhorge
Files F32965624

D7192.1768295735.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D7192.1768295735.diff
View Options

diff --git a/web/components/avatar.css b/web/components/avatar.css
new file mode 100644
--- /dev/null
+++ b/web/components/avatar.css
@@ -0,0 +1,57 @@
+.emojiContainer {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.emojiMicro {
+ font-size: 9px;
+ height: 16px;
+ line-height: 16px;
+}
+
+.emojiSmall {
+ font-size: 14px;
+ height: 24px;
+ line-height: 24px;
+}
+
+.emojiLarge {
+ font-size: 28px;
+ height: 42px;
+ line-height: 42px;
+}
+
+.emojiProfile {
+ font-size: 80px;
+ height: 112px;
+ line-height: 112px;
+}
+
+.micro {
+ border-radius: 8px;
+ height: 16px;
+ width: 16px;
+ min-width: 16px;
+}
+
+.small {
+ border-radius: 12px;
+ height: 24px;
+ width: 24px;
+ min-width: 24px;
+}
+
+.large {
+ border-radius: 21px;
+ height: 42px;
+ width: 42px;
+ min-width: 42px;
+}
+
+.profile {
+ border-radius: 56px;
+ height: 112px;
+ width: 112px;
+ min-width: 112px;
+}
diff --git a/web/components/avatar.react.js b/web/components/avatar.react.js
new file mode 100644
--- /dev/null
+++ b/web/components/avatar.react.js
@@ -0,0 +1,67 @@
+// @flow
+
+import classnames from 'classnames';
+import * as React from 'react';
+
+import type { ClientAvatar } from 'lib/types/avatar-types';
+
+import css from './avatar.css';
+
+type Props = {
+ +avatarInfo: ClientAvatar,
+ +size: 'micro' | 'small' | 'large' | 'profile',
+};
+
+function Avatar(props: Props): React.Node {
+ const { avatarInfo, size } = props;
+
+ const containerSizeClassName = classnames({
+ [css.micro]: size === 'micro',
+ [css.small]: size === 'small',
+ [css.large]: size === 'large',
+ [css.profile]: size === 'profile',
+ });
+
+ const emojiSizeClassName = classnames({
+ [css.emojiContainer]: true,
+ [css.emojiMicro]: size === 'micro',
+ [css.emojiSmall]: size === 'small',
+ [css.emojiLarge]: size === 'large',
+ [css.emojiProfile]: size === 'profile',
+ });
+
+ const emojiContainerColorStyle = React.useMemo(() => {
+ if (avatarInfo.type === 'emoji') {
+ return { backgroundColor: `#${avatarInfo.color}` };
+ }
+ }, [avatarInfo.color, avatarInfo.type]);
+
+ const avatar = React.useMemo(() => {
+ if (avatarInfo.type === 'image') {
+ return (
+ <img
+ src={avatarInfo.uri}
+ alt="image avatar"
+ className={containerSizeClassName}
+ />
+ );
+ }
+
+ return (
+ <div className={containerSizeClassName} style={emojiContainerColorStyle}>
+ <div className={emojiSizeClassName}>{avatarInfo.emoji}</div>
+ </div>
+ );
+ }, [
+ avatarInfo.emoji,
+ avatarInfo.type,
+ avatarInfo.uri,
+ containerSizeClassName,
+ emojiContainerColorStyle,
+ emojiSizeClassName,
+ ]);
+
+ return <React.Fragment>{avatar}</React.Fragment>;
+}
+
+export default Avatar;

File Metadata

Mime Type
text/plain
Expires
Tue, Jan 13, 9:15 AM (4 h, 18 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5926316
Default Alt Text
D7192.1768295735.diff (2 KB)

Event Timeline