refactor(avatar) use jss instead of scss (#11037)
This commit is contained in:
Shahab
GitHub
parent
a6b55b676c
commit
c25fb702c2
|
|
@ -1,50 +0,0 @@
|
|||
.avatar {
|
||||
background-color: #AAA;
|
||||
border-radius: 50%;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
font-weight: 100;
|
||||
object-fit: cover;
|
||||
|
||||
&.avatar-small {
|
||||
height: 28px !important;
|
||||
width: 28px !important;
|
||||
}
|
||||
|
||||
&.avatar-xsmall {
|
||||
height: 16px !important;
|
||||
width: 16px !important;
|
||||
}
|
||||
|
||||
.jitsi-icon {
|
||||
transform: translateY(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-svg {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.avatar-badge {
|
||||
position: relative;
|
||||
|
||||
&-available::after {
|
||||
@include avatarBadge;
|
||||
background-color: $presence-available;
|
||||
}
|
||||
|
||||
&-away::after {
|
||||
@include avatarBadge;
|
||||
background-color: $presence-away;
|
||||
}
|
||||
|
||||
&-busy::after {
|
||||
@include avatarBadge;
|
||||
background-color: $presence-busy;
|
||||
}
|
||||
|
||||
&-idle::after {
|
||||
@include avatarBadge;
|
||||
background-color: $presence-idle;
|
||||
}
|
||||
}
|
||||
|
|
@ -193,16 +193,3 @@
|
|||
@mixin transparentBg($color, $alpha) {
|
||||
background-color: rgba(red($color), green($color), blue($color), $alpha);
|
||||
}
|
||||
|
||||
/**
|
||||
* Avatar status badge mixin
|
||||
*/
|
||||
@mixin avatarBadge {
|
||||
border-radius: 50%;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 35%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 35%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,10 +28,6 @@ $defaultSemiDarkColor: #ACACAC;
|
|||
$defaultDarkColor: #2b3d5c;
|
||||
$defaultWarningColor: rgb(215, 121, 118);
|
||||
$participantsPaneBgColor: #141414;
|
||||
$presence-available: rgb(110, 176, 5);
|
||||
$presence-away: rgb(250, 201, 20);
|
||||
$presence-busy: rgb(233, 0, 27);
|
||||
$presence-idle: rgb(172, 172, 172);
|
||||
|
||||
/**
|
||||
* Toolbar
|
||||
|
|
|
|||
|
|
@ -82,7 +82,6 @@ $flagsImagePath: "../images/";
|
|||
@import 'navigate_section_list';
|
||||
@import 'third-party-branding/google';
|
||||
@import 'third-party-branding/microsoft';
|
||||
@import 'avatar';
|
||||
@import 'promotional-footer';
|
||||
@import 'chrome-extension-banner';
|
||||
@import 'settings-button';
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { StyleSheet } from 'react-native';
|
||||
|
||||
import { ColorPalette } from '../../../styles';
|
||||
import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
|
||||
|
||||
const DEFAULT_SIZE = 65;
|
||||
|
||||
|
|
@ -34,16 +35,16 @@ export default {
|
|||
|
||||
switch (status) {
|
||||
case 'available':
|
||||
color = 'rgb(110, 176, 5)';
|
||||
color = PRESENCE_AVAILABLE_COLOR;
|
||||
break;
|
||||
case 'away':
|
||||
color = 'rgb(250, 201, 20)';
|
||||
color = PRESENCE_AWAY_COLOR;
|
||||
break;
|
||||
case 'busy':
|
||||
color = 'rgb(233, 0, 27)';
|
||||
color = PRESENCE_BUSY_COLOR;
|
||||
break;
|
||||
case 'idle':
|
||||
color = 'rgb(172, 172, 172)';
|
||||
color = PRESENCE_IDLE_COLOR;
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
// Colors for avatar status badge
|
||||
export const PRESENCE_AVAILABLE_COLOR = 'rgb(110, 176, 5)';
|
||||
export const PRESENCE_AWAY_COLOR = 'rgb(250, 201, 20)';
|
||||
export const PRESENCE_BUSY_COLOR = 'rgb(233, 0, 27)';
|
||||
export const PRESENCE_IDLE_COLOR = 'rgb(172, 172, 172)';
|
||||
|
|
@ -1,12 +1,20 @@
|
|||
// @flow
|
||||
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import { Icon } from '../../../icons';
|
||||
import AbstractStatelessAvatar, { type Props as AbstractProps } from '../AbstractStatelessAvatar';
|
||||
import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
|
||||
|
||||
type Props = AbstractProps & {
|
||||
|
||||
/**
|
||||
* An object containing the CSS classes.
|
||||
*/
|
||||
classes: Object,
|
||||
|
||||
/**
|
||||
* External class name passed through props.
|
||||
*/
|
||||
|
|
@ -38,11 +46,77 @@ type Props = AbstractProps & {
|
|||
useCORS?: ?boolean
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates the styles for the component.
|
||||
*
|
||||
* @returns {Object}
|
||||
*/
|
||||
const styles = () => {
|
||||
return {
|
||||
avatar: {
|
||||
backgroundColor: '#AAA',
|
||||
borderRadius: '50%',
|
||||
color: 'rgba(255, 255, 255, 1)',
|
||||
fontWeight: '100',
|
||||
objectFit: 'cover',
|
||||
|
||||
'&.avatar-small': {
|
||||
height: '28px !important',
|
||||
width: '28px !important'
|
||||
},
|
||||
|
||||
'&.avatar-xsmall': {
|
||||
height: '16px !important',
|
||||
width: '16px !important'
|
||||
},
|
||||
|
||||
'& .jitsi-icon': {
|
||||
transform: 'translateY(50%)'
|
||||
},
|
||||
|
||||
'& .avatar-svg': {
|
||||
height: '100%',
|
||||
width: '100%'
|
||||
}
|
||||
},
|
||||
|
||||
badge: {
|
||||
position: 'relative',
|
||||
|
||||
'&.avatar-badge:after': {
|
||||
borderRadius: '50%',
|
||||
content: '""',
|
||||
display: 'block',
|
||||
height: '35%',
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
width: '35%'
|
||||
},
|
||||
|
||||
'&.avatar-badge-available:after': {
|
||||
backgroundColor: PRESENCE_AVAILABLE_COLOR
|
||||
},
|
||||
|
||||
'&.avatar-badge-away:after': {
|
||||
backgroundColor: PRESENCE_AWAY_COLOR
|
||||
},
|
||||
|
||||
'&.avatar-badge-busy:after': {
|
||||
backgroundColor: PRESENCE_BUSY_COLOR
|
||||
},
|
||||
|
||||
'&.avatar-badge-idle:after': {
|
||||
backgroundColor: PRESENCE_IDLE_COLOR
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Implements a stateless avatar component that renders an avatar purely from what gets passed through
|
||||
* props.
|
||||
*/
|
||||
export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
||||
class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
||||
|
||||
/**
|
||||
* Instantiates a new {@code Component}.
|
||||
|
|
@ -66,7 +140,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|||
if (this._isIcon(url)) {
|
||||
return (
|
||||
<div
|
||||
className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
|
||||
className = { clsx(this._getAvatarClassName(), this._getBadgeClassName()) }
|
||||
data-testid = { this.props.testId }
|
||||
id = { this.props.id }
|
||||
style = { this._getAvatarStyle(this.props.color) }>
|
||||
|
|
@ -96,7 +170,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|||
if (initials) {
|
||||
return (
|
||||
<div
|
||||
className = { `${this._getAvatarClassName()} ${this._getBadgeClassName()}` }
|
||||
className = { clsx(this._getAvatarClassName(), this._getBadgeClassName()) }
|
||||
data-testid = { this.props.testId }
|
||||
id = { this.props.id }
|
||||
style = { this._getAvatarStyle(this.props.color) }>
|
||||
|
|
@ -157,7 +231,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|||
* @returns {string}
|
||||
*/
|
||||
_getAvatarClassName(additional) {
|
||||
return `avatar ${additional || ''} ${this.props.className || ''}`;
|
||||
return clsx('avatar', additional, this.props.className, this.props.classes.avatar);
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -169,7 +243,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|||
const { status } = this.props;
|
||||
|
||||
if (status) {
|
||||
return `avatar-badge avatar-badge-${status}`;
|
||||
return clsx('avatar-badge', `avatar-badge-${status}`, this.props.classes.badge);
|
||||
}
|
||||
|
||||
return '';
|
||||
|
|
@ -192,3 +266,5 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default withStyles(styles)(StatelessAvatar);
|
||||
|
|
|
|||
Loading…
Reference in New Issue