BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #18765 from Arthurk12/bbb/2.7/18763

Browse Source 
fix(user-list): center icons on safari
This commit is contained in:
Ramón Souza 2023-10-09 08:13:24 -03:00 committed by GitHub
commit f7a77beb61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Settings from '/imports/ui/services/settings'; import Settings from '/imports/ui/services/settings';
import Styled from './styles'; import Styled from './styles';
import browserInfo from '/imports/utils/browserInfo'; import deviceInfo from '/imports/utils/deviceInfo';
const propTypes = { const propTypes = {
children: PropTypes.node, children: PropTypes.node,
@ -37,7 +37,7 @@ const defaultProps = {
}; };
const { animations } = Settings.application; const { animations } = Settings.application;
const { isChrome, isFirefox, isEdge } = browserInfo; const { isIos } = deviceInfo;
const UserAvatar = ({ const UserAvatar = ({
children, children,
@ -70,10 +70,7 @@ const UserAvatar = ({
listenOnly={listenOnly} listenOnly={listenOnly}
voice={voice} voice={voice}
noVoice={noVoice && !listenOnly} noVoice={noVoice && !listenOnly}
isChrome={isChrome} isIos={isIos}
isFirefox={isFirefox}
isEdge={isEdge}
className={className}
style={{ style={{
backgroundColor: color, backgroundColor: color,
color, // We need the same color on both for the border color, // We need the same color on both for the border

26
bigbluebutton-html5/imports/ui/components/user-avatar/styles.js
View File

@ -118,7 +118,7 @@ const Avatar = styled.div`
width: 0; width: 0;
height: 0; height: 0;
padding-top: .5rem; padding-top: .5rem;
padding-right: 0; padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};;
padding-left: 0; padding-left: 0;
padding-bottom: 0; padding-bottom: 0;
color: inherit; color: inherit;
@ -158,7 +158,6 @@ const Avatar = styled.div`
${({ presenter }) => presenter && ` ${({ presenter }) => presenter && `
&:before { &:before {
content: "\\00a0\\e90b\\00a0"; content: "\\00a0\\e90b\\00a0";
padding: ${mdPaddingY} !important;
opacity: 1; opacity: 1;
top: ${userIndicatorsOffset}; top: ${userIndicatorsOffset};
left: ${userIndicatorsOffset}; left: ${userIndicatorsOffset};
@ -166,27 +165,21 @@ const Avatar = styled.div`
right: auto; right: auto;
border-radius: 5px; border-radius: 5px;
background-color: ${colorPrimary}; background-color: ${colorPrimary};
height: 1.2rem;
width: 1.2rem;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset}; right: ${userIndicatorsOffset};
letter-spacing: -.33rem; letter-spacing: -.33rem;
} }
} }
`} `}
${({
presenter, isChrome, isFirefox, isEdge,
}) => presenter && (isChrome || isFirefox || isEdge) && `
&:before {
padding: ${indicatorPadding} !important;
}
`}
${({ whiteboardAccess }) => whiteboardAccess && ` ${({ whiteboardAccess }) => whiteboardAccess && `
&:before { &:before {
content: "\\00a0\\e925\\00a0"; content: "\\00a0\\e925\\00a0";
padding: ${mdPaddingY} !important;
border-radius: 50% !important; border-radius: 50% !important;
opacity: 1; opacity: 1;
top: ${userIndicatorsOffset}; top: ${userIndicatorsOffset};
@ -195,9 +188,12 @@ const Avatar = styled.div`
right: auto; right: auto;
border-radius: 5px; border-radius: 5px;
background-color: ${colorPrimary}; background-color: ${colorPrimary};
height: 1.2rem;
width: 1.2rem;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset}; right: ${userIndicatorsOffset};
letter-spacing: -.33rem; letter-spacing: -.33rem;
transform: scale(-1, 1); transform: scale(-1, 1);
@ -205,14 +201,6 @@ const Avatar = styled.div`
} }
`} `}
${({
whiteboardAccess, isChrome, isFirefox, isEdge,
}) => whiteboardAccess && (isChrome || isFirefox || isEdge) && `
&:before {
padding: ${indicatorPadding};
}
`}
${({ voice }) => voice && ` ${({ voice }) => voice && `
&:after { &:after {
content: "\\00a0\\e931\\00a0"; content: "\\00a0\\e931\\00a0";