diff --git a/css/_avatar.scss b/css/_avatar.scss deleted file mode 100644 index a66816213..000000000 --- a/css/_avatar.scss +++ /dev/null @@ -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; - } -} diff --git a/css/_mixins.scss b/css/_mixins.scss index 11ec2a6e7..46bb83962 100644 --- a/css/_mixins.scss +++ b/css/_mixins.scss @@ -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%; -} diff --git a/css/_variables.scss b/css/_variables.scss index 03bc3c2f0..dadc6289c 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -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 diff --git a/css/main.scss b/css/main.scss index e71598759..3aa7ab140 100644 --- a/css/main.scss +++ b/css/main.scss @@ -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'; diff --git a/react/features/base/avatar/components/native/styles.js b/react/features/base/avatar/components/native/styles.js index b28a1db7b..d426b6e5f 100644 --- a/react/features/base/avatar/components/native/styles.js +++ b/react/features/base/avatar/components/native/styles.js @@ -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; } diff --git a/react/features/base/avatar/components/styles.js b/react/features/base/avatar/components/styles.js new file mode 100644 index 000000000..9e77f3774 --- /dev/null +++ b/react/features/base/avatar/components/styles.js @@ -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)'; diff --git a/react/features/base/avatar/components/web/StatelessAvatar.js b/react/features/base/avatar/components/web/StatelessAvatar.js index 91b9c3622..3c5fe7757 100644 --- a/react/features/base/avatar/components/web/StatelessAvatar.js +++ b/react/features/base/avatar/components/web/StatelessAvatar.js @@ -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 { +class StatelessAvatar extends AbstractStatelessAvatar { /** * Instantiates a new {@code Component}. @@ -66,7 +140,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar { if (this._isIcon(url)) { return (
@@ -96,7 +170,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar { if (initials) { return (
@@ -157,7 +231,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar { * @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 { 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 { } } } + +export default withStyles(styles)(StatelessAvatar);