paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 49 Packages Projects Releases Wiki Activity

Add a Avatar component to @backstage/core

Browse Source
This commit is contained in:
Oliver Sand
2020-12-09 15:59:22 +01:00
parent cbd3a44c09
commit 8ef71ed32e
10 changed files with 169 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/org/src/components/Avatar/Avatar.tsx
-73
View File
@@ -1,73 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React, { CSSProperties } from 'react';
import {
Avatar as MaterialAvatar,
createStyles,
makeStyles,
Theme,
} from '@material-ui/core';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
avatar: {
width: '4rem',
height: '4rem',
color: '#fff',
fontWeight: theme.typography.fontWeightBold,
letterSpacing: '1px',
textTransform: 'uppercase',
},
}),
);
const stringToColour = (str: string) => {
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
}
let colour = '#';
for (let i = 0; i < 3; i++) {
const value = (hash >> (i * 8)) & 0xff;
colour += `00${value.toString(16)}`.substr(-2);
}
return colour;
};
export const Avatar = ({
displayName,
picture,
customStyles,
}: {
displayName: string | undefined;
picture: string | undefined;
customStyles?: CSSProperties;
}) => {
const classes = useStyles();
return (
<MaterialAvatar
alt={displayName}
src={picture}
className={classes.avatar}
style={{
backgroundColor: stringToColour(displayName || picture || ''),
...customStyles,
}}
>
{displayName && displayName.match(/\b\w/g)!.join('').substring(0, 2)}
</MaterialAvatar>
);
};
plugins/org/src/components/Avatar/index.ts
-16
View File
@@ -1,16 +0,0 @@
/*
* Copyright 2020 Spotify AB
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export { Avatar } from './Avatar';
plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+10 -11
View File
@@ -13,8 +13,13 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import Alert from '@material-ui/lab/Alert';
import {
Entity,
RELATION_MEMBER_OF,
UserEntity,
} from '@backstage/catalog-model';
import { Avatar, InfoCard, Progress, useApi } from '@backstage/core';
import { catalogApiRef, entityRouteParams } from '@backstage/plugin-catalog';
import {
Box,
createStyles,
@@ -24,16 +29,10 @@ import {
Theme,
Typography,
} from '@material-ui/core';
import { InfoCard, Progress, useApi } from '@backstage/core';
import {
UserEntity,
RELATION_MEMBER_OF,
Entity,
} from '@backstage/catalog-model';
import { Link as RouterLink, generatePath } from 'react-router-dom';
import { catalogApiRef, entityRouteParams } from '@backstage/plugin-catalog';
import Alert from '@material-ui/lab/Alert';
import React from 'react';
import { generatePath, Link as RouterLink } from 'react-router-dom';
import { useAsync } from 'react-use';
import { Avatar } from '../../../Avatar';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+6 -7
View File
@@ -13,21 +13,20 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import React from 'react';
import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
import Alert from '@material-ui/lab/Alert';
import { InfoCard } from '@backstage/core';
import { entityRouteParams } from '@backstage/plugin-catalog';
import {
Entity,
RELATION_MEMBER_OF,
UserEntity,
} from '@backstage/catalog-model';
import { Avatar, InfoCard } from '@backstage/core';
import { entityRouteParams } from '@backstage/plugin-catalog';
import { Box, Grid, Link, Tooltip, Typography } from '@material-ui/core';
import EmailIcon from '@material-ui/icons/Email';
import GroupIcon from '@material-ui/icons/Group';
import PersonIcon from '@material-ui/icons/Person';
import { Link as RouterLink, generatePath } from 'react-router-dom';
import { Avatar } from '../../../Avatar';
import Alert from '@material-ui/lab/Alert';
import React from 'react';
import { generatePath, Link as RouterLink } from 'react-router-dom';
const GroupLink = ({
groupName,