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

Merge pull request #18958 from Arthurk12/bbb/2.7/18763-1

Browse Source 
fix(user-list): center icons on apple devices
This commit is contained in:
Ramón Souza 2023-10-23 11:39:37 -03:00 committed by GitHub
commit ed44b33b15
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,6 @@ 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 deviceInfo from '/imports/utils/deviceInfo';
const propTypes = { const propTypes = {
children: PropTypes.node, children: PropTypes.node,
@ -37,7 +36,6 @@ const defaultProps = {
}; };
const { animations } = Settings.application; const { animations } = Settings.application;
const { isIos } = deviceInfo;
const UserAvatar = ({ const UserAvatar = ({
children, children,
@ -70,7 +68,6 @@ const UserAvatar = ({
listenOnly={listenOnly} listenOnly={listenOnly}
voice={voice} voice={voice}
noVoice={noVoice && !listenOnly} noVoice={noVoice && !listenOnly}
isIos={isIos}
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

@ -117,10 +117,6 @@ const Avatar = styled.div`
position: absolute; position: absolute;
width: 0; width: 0;
height: 0; height: 0;
padding-top: .5rem;
padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};;
padding-left: 0;
padding-bottom: 0;
color: inherit; color: inherit;
top: auto; top: auto;
left: auto; left: auto;
@ -135,14 +131,11 @@ const Avatar = styled.div`
font-size: .65rem; font-size: .65rem;
line-height: 0; line-height: 0;
text-align: center; text-align: center;
vertical-align: middle;
letter-spacing: -.65rem;
z-index: 1; z-index: 1;
[dir="rtl"] & { [dir="rtl"] & {
left: ${userIndicatorsOffset}; left: ${userIndicatorsOffset};
right: auto; right: auto;
padding-right: .65rem;
padding-left: 0; padding-left: 0;
} }
@ -167,12 +160,13 @@ const Avatar = styled.div`
background-color: ${colorPrimary}; background-color: ${colorPrimary};
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset}; right: ${userIndicatorsOffset};
letter-spacing: -.33rem;
} }
} }
`} `}
@ -190,12 +184,13 @@ const Avatar = styled.div`
background-color: ${colorPrimary}; background-color: ${colorPrimary};
height: 1.2rem; height: 1.2rem;
width: 1.2rem; width: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
[dir="rtl"] & { [dir="rtl"] & {
left: auto; left: auto;
padding-right: .3rem !important;
right: ${userIndicatorsOffset}; right: ${userIndicatorsOffset};
letter-spacing: -.33rem;
transform: scale(-1, 1); transform: scale(-1, 1);
} }
} }
@ -216,6 +211,9 @@ const Avatar = styled.div`
opacity: 1; opacity: 1;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
} }
`} `}
@ -226,6 +224,9 @@ const Avatar = styled.div`
opacity: 1; opacity: 1;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
} }
`} `}
@ -235,6 +236,9 @@ const Avatar = styled.div`
opacity: 1; opacity: 1;
width: 1.2rem; width: 1.2rem;
height: 1.2rem; height: 1.2rem;
display: flex;
justify-content: center;
align-items: center;
} }
`} `}