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

fix(user-list): center icons on safari

Browse Source 
Centers icons indicating presenter, audio state and whiteboard access in the
user list.
This commit is contained in:
Arthurk12 2023-09-12 15:39:34 -03:00
parent 74e8a6e593
commit f92d3a1ca5
2 changed files with 7 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,7 +37,7 @@ const defaultProps = {
}; };
const { animations } = Settings.application; const { animations } = Settings.application;
const { isChrome, isFirefox, isEdge } = browserInfo; const { isSafari } = browserInfo;
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} isSafari={isSafari}
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

24
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: ${({ isSafari }) => isSafari ? '.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,6 +165,8 @@ 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;
@ -175,18 +176,9 @@ const Avatar = styled.div`
} }
`} `}
${({
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,6 +187,8 @@ 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;
@ -205,14 +199,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";