mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modernize <Avatar> component code, fix an overflow bug

Browse source
This commit is contained in:
Evan Hahn 2021-04-21 11:32:23 -05:00 committed by Scott Nonnenberg
parent e7ef3de6d0
commit 2bae019f1a
5 changed files with 230 additions and 472 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

320
stylesheets/_modules.scss
View file

@ -1423,7 +1423,7 @@
&:focus {
outline: none;
.module-avatar {
.module-Avatar {
@include keyboard-mode {
box-shadow: 0 0 0 3px $ultramarine-ui-light;
}
@ -3980,322 +3980,6 @@ button.module-conversation-details__action-button {
}
}
// Module: Avatar
.module-avatar {
position: relative;
vertical-align: middle;
display: inline-block;
border-radius: 50%;
user-select: none;
img {
object-fit: cover;
border-radius: 50%;
}
}
.module-avatar-button {
@include button-reset;
// Ensures that the border of the item sticks tight to the inner contents
width: 100%;
line-height: 0;
border-radius: 50%;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
}
}
}
.module-avatar__label {
width: 100%;
text-align: center;
font-weight: bold;
text-transform: uppercase;
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
}
}
.module-avatar__icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.module-avatar__icon--group {
@include light-theme {
@include color-svg('../images/icons/v2/group-outline-40.svg', $color-white);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/group-outline-40.svg',
$color-gray-05
);
}
}
.module-avatar__icon--direct {
@include light-theme {
@include color-svg(
'../images/icons/v2/profile-outline-40.svg',
$color-white
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/profile-outline-40.svg',
$color-gray-05
);
}
}
.module-avatar--28 {
min-width: 28px;
height: 28px;
width: 28px;
img {
height: 28px;
width: 28px;
}
}
.module-avatar__icon--28.module-avatar__icon--group {
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/group-outline-20.svg',
$color-gray-05
);
}
}
.module-avatar__icon--28.module-avatar__icon--direct {
height: 20px;
width: 20px;
@include light-theme {
@include color-svg(
'../images/icons/v2/profile-outline-20.svg',
$color-white
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/profile-outline-20.svg',
$color-gray-05
);
}
}
.module-avatar__label--28 {
font-size: 14px;
line-height: 28px;
}
.module-avatar--32 {
height: 32px;
width: 32px;
min-width: 32px;
img {
height: 32px;
width: 32px;
}
}
.module-avatar__icon--32.module-avatar__icon--group {
height: 20px;
width: 20px;
@include light-theme {
@include color-svg('../images/icons/v2/group-outline-20.svg', $color-white);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/group-outline-20.svg',
$color-gray-05
);
}
}
.module-avatar__icon--32.module-avatar__icon--direct {
height: 20px;
width: 20px;
@include light-theme {
@include color-svg(
'../images/icons/v2/profile-outline-20.svg',
$color-white
);
}
@include dark-theme {
@include color-svg(
'../images/icons/v2/profile-outline-20.svg',
$color-gray-05
);
}
}
.module-avatar__label--32 {
font-size: 14px;
line-height: 32px;
}
.module-avatar--52 {
height: 52px;
width: 52px;
min-width: 52px;
img {
height: 52px;
width: 52px;
}
}
.module-avatar__label--52 {
width: 52px;
font-size: 22px;
letter-spacing: 0.19px;
line-height: 52px;
}
.module-avatar__icon--52 {
height: 38px;
width: 38px;
}
.module-avatar__icon--52.module-avatar__icon--direct {
height: 42px;
width: 42px;
}
.module-avatar--80 {
height: 80px;
width: 80px;
min-width: 80px;
img {
height: 80px;
width: 80px;
}
}
.module-avatar__label--80 {
width: 80px;
font-size: 40px;
line-height: 80px;
}
.module-avatar__icon--80 {
height: 58px;
width: 58px;
}
.module-avatar__icon--80.module-avatar__icon--direct {
height: 62px;
width: 62px;
}
.module-avatar--96 {
height: 96px;
width: 96px;
min-width: 96px;
img {
height: 96px;
width: 96px;
}
}
.module-avatar__label--96 {
width: 96px;
font-size: 48px;
line-height: 96px;
}
.module-avatar__icon--96 {
height: 70px;
width: 70px;
}
.module-avatar--112 {
height: 112px;
width: 112px;
min-width: 112px;
img {
height: 112px;
width: 112px;
}
}
.module-avatar__label--112 {
width: 112px;
font-size: 56px;
line-height: 112px;
}
.module-avatar__icon--112 {
height: 81px;
width: 81px;
}
.module-avatar__icon--112.module-avatar__icon--direct {
height: 87px;
width: 87px;
}
.module-avatar__icon--note-to-self {
width: 70%;
height: 70%;
@include light-theme {
@include color-svg('../images/note-28.svg', $color-white);
}
@include dark-theme {
@include color-svg('../images/note-28.svg', $color-gray-05);
}
}
.module-avatar--no-image {
@include light-theme {
background-color: $color-conversation-grey;
}
@include dark-theme {
background-color: $color-conversation-grey-shade;
}
}
.module-avatar__spinner-container {
padding: 4px;
}
.module-avatar--signal-blue {
background-color: $ultramarine-ui-light;
}
@each $color, $value in $conversation-colors {
.module-avatar--#{$color} {
@include light-theme {
background-color: $value;
}
}
}
@each $color, $value in $conversation-colors-shade {
.module-avatar--#{$color} {
@include dark-theme {
background-color: $value;
}
}
}
// Module: Main Header
.module-main-header {
@ -6684,7 +6368,7 @@ button.module-image__border-overlay:focus {
}
// The avatar image can be dragged on Windows.
.module-avatar img {
.module-Avatar img {
-webkit-user-drag: none;
-webkit-user-select: none;
}

113
stylesheets/components/Avatar.scss Normal file
View file

@ -0,0 +1,113 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
.module-Avatar {
align-items: center;
border-radius: 100%;
display: inline-flex;
justify-content: center;
line-height: 0;
overflow: hidden;
user-select: none;
vertical-align: middle;
&__button {
@include button-reset;
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
@include keyboard-mode {
&:focus {
box-shadow: 0px 0px 0px 2px $ultramarine-ui-light;
}
}
}
img {
object-fit: cover;
height: 100%;
width: 100%;
}
&__label {
align-items: center;
display: flex;
font-weight: bold;
justify-content: center;
text-align: center;
text-transform: uppercase;
transition: font-size 100ms ease-out;
@include light-theme {
color: $color-white;
}
@include dark-theme {
color: $color-gray-05;
}
}
&__icon {
@mixin avatar-icon($icon) {
@include light-theme {
@include color-svg($icon, $color-white);
}
@include dark-theme {
@include color-svg($icon, $color-gray-05);
}
}
&--direct {
@include avatar-icon('../images/icons/v2/profile-outline-20.svg');
height: 60%;
width: 60%;
}
&--group {
@include avatar-icon('../images/icons/v2/group-outline-20.svg');
height: 60%;
width: 60%;
}
&--note-to-self {
@include avatar-icon('../images/note-28.svg');
height: 70%;
width: 70%;
}
}
&__spinner-container {
padding: 4px;
}
&--no-image {
@include light-theme {
background-color: $color-conversation-grey;
}
@include dark-theme {
background-color: $color-conversation-grey-shade;
}
}
&--signal-blue {
background-color: $ultramarine-ui-light;
}
@each $color, $value in $conversation-colors {
&--#{$color} {
@include light-theme {
background-color: $value;
}
}
}
@each $color, $value in $conversation-colors-shade {
&--#{$color} {
@include dark-theme {
background-color: $value;
}
}
}
}

1
stylesheets/manifest.scss
View file

@ -28,6 +28,7 @@
// New style: components
@import './components/AddGroupMembersModal.scss';
@import './components/Avatar.scss';
@import './components/AvatarInput.scss';
@import './components/Button.scss';
@import './components/ContactPill.scss';

24
ts/components/Avatar.stories.tsx
View file

@ -44,7 +44,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
onClick: action('onClick'),
phoneNumber: text('phoneNumber', overrideProps.phoneNumber || ''),
size: 80,
title: '',
title: overrideProps.title || '',
});
const sizes: Array<Props['size']> = [112, 96, 80, 52, 32, 28];
@ -59,15 +59,31 @@ story.add('Avatar', () => {
story.add('One-word Name', () => {
const props = createProps({
name: 'John',
title: 'John',
});
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
});
story.add('Multi-word Name', () => {
story.add('Two-word Name', () => {
const props = createProps({
name: 'John Smith',
title: 'John Smith',
});
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
});
story.add('Wide initials', () => {
const props = createProps({
title: 'Walter White',
});
return sizes.map(size => <Avatar key={size} {...props} size={size} />);
});
story.add('Three-word name', () => {
const props = createProps({
title: 'Walter H. White',
});
return sizes.map(size => <Avatar key={size} {...props} size={size} />);

244
ts/components/Avatar.tsx
View file

@ -1,7 +1,12 @@
// Copyright 2018-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import * as React from 'react';
import React, {
FunctionComponent,
ReactNode,
useEffect,
useState,
} from 'react';
import classNames from 'classnames';
import { Spinner } from './Spinner';
@ -9,6 +14,7 @@ import { Spinner } from './Spinner';
import { getInitials } from '../util/getInitials';
import { LocalizerType } from '../types/Util';
import { ColorType } from '../types/Colors';
import * as log from '../logging/log';
export enum AvatarSize {
TWENTY_EIGHT = 28,
@ -40,111 +46,35 @@ export type Props = {
i18n: LocalizerType;
} & Pick<React.HTMLProps<HTMLDivElement>, 'className'>;
type State = {
readonly imageBroken: boolean;
readonly lastAvatarPath?: string;
};
export const Avatar: FunctionComponent<Props> = ({
avatarPath,
className,
color,
conversationType,
i18n,
innerRef,
loading,
noteToSelf,
onClick,
size,
title,
}) => {
const [imageBroken, setImageBroken] = useState(false);
export class Avatar extends React.Component<Props, State> {
public handleImageErrorBound: () => void;
useEffect(() => {
setImageBroken(false);
}, [avatarPath]);
public constructor(props: Props) {
super(props);
const initials = getInitials(title);
const hasImage = !noteToSelf && avatarPath && !imageBroken;
const shouldUseInitials =
!hasImage && conversationType === 'direct' && Boolean(initials);
this.handleImageErrorBound = this.handleImageError.bind(this);
this.state = {
lastAvatarPath: props.avatarPath,
imageBroken: false,
};
}
public static getDerivedStateFromProps(props: Props, state: State): State {
if (props.avatarPath !== state.lastAvatarPath) {
return {
...state,
lastAvatarPath: props.avatarPath,
imageBroken: false,
};
}
return state;
}
public handleImageError(): void {
window.log.info(
'Avatar: Image failed to load; failing over to placeholder'
);
this.setState({
imageBroken: true,
});
}
public renderImage(): JSX.Element | null {
const { avatarPath, i18n, title } = this.props;
const { imageBroken } = this.state;
if (!avatarPath || imageBroken) {
return null;
}
return (
<img
onError={this.handleImageErrorBound}
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
);
}
public renderNoImage(): JSX.Element {
const { conversationType, noteToSelf, size, title } = this.props;
const initials = getInitials(title);
const isGroup = conversationType === 'group';
if (noteToSelf) {
return (
<div
className={classNames(
'module-avatar__icon',
'module-avatar__icon--note-to-self',
`module-avatar__icon--${size}`
)}
/>
);
}
if (!isGroup && initials) {
return (
<div
className={classNames(
'module-avatar__label',
`module-avatar__label--${size}`
)}
>
{initials}
</div>
);
}
return (
<div
className={classNames(
'module-avatar__icon',
`module-avatar__icon--${conversationType}`,
`module-avatar__icon--${size}`
)}
/>
);
}
public renderLoading(): JSX.Element {
const { size } = this.props;
let contents: ReactNode;
if (loading) {
const svgSize = size < 40 ? 'small' : 'normal';
return (
<div className="module-avatar__spinner-container">
contents = (
<div className="module-Avatar__spinner-container">
<Spinner
size={`${size - 8}px`}
svgSize={svgSize}
@ -152,58 +82,72 @@ export class Avatar extends React.Component<Props, State> {
/>
</div>
);
}
public render(): JSX.Element {
const {
avatarPath,
color,
innerRef,
loading,
noteToSelf,
onClick,
size,
className,
} = this.props;
const { imageBroken } = this.state;
const hasImage = !noteToSelf && avatarPath && !imageBroken;
if (![28, 32, 52, 80, 96, 112].includes(size)) {
throw new Error(`Size ${size} is not supported!`);
}
let contents;
if (loading) {
contents = this.renderLoading();
} else if (onClick) {
contents = (
<button
type="button"
className="module-avatar-button"
onClick={onClick}
>
{hasImage ? this.renderImage() : this.renderNoImage()}
</button>
);
} else {
contents = hasImage ? this.renderImage() : this.renderNoImage();
}
return (
} else if (hasImage) {
contents = (
<img
onError={() => {
log.warn('Avatar: Image failed to load; failing over to placeholder');
setImageBroken(true);
}}
alt={i18n('contactAvatarAlt', [title])}
src={avatarPath}
/>
);
} else if (noteToSelf) {
contents = (
<div
className={classNames(
'module-avatar',
`module-avatar--${size}`,
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
!hasImage ? `module-avatar--${color}` : null,
className
'module-Avatar__icon',
'module-Avatar__icon--note-to-self'
)}
ref={innerRef}
/>
);
} else if (shouldUseInitials) {
contents = (
<div
className="module-Avatar__label"
style={{ fontSize: Math.ceil(size * 0.5) }}
>
{contents}
{initials}
</div>
);
} else {
contents = (
<div
className={classNames(
'module-Avatar__icon',
`module-Avatar__icon--${conversationType}`
)}
/>
);
}
}
if (onClick) {
contents = (
<button className="module-Avatar__button" type="button" onClick={onClick}>
{contents}
</button>
);
}
return (
<div
className={classNames(
'module-Avatar',
hasImage ? 'module-Avatar--with-image' : 'module-Avatar--no-image',
{
[`module-Avatar--${color}`]: !hasImage,
},
className
)}
style={{
minWidth: size,
width: size,
height: size,
}}
ref={innerRef}
>
{contents}
</div>
);
};