From f92d3a1ca504337250c0c7ddb146b6433ced3424 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Tue, 12 Sep 2023 15:39:34 -0300 Subject: [PATCH 1/2] fix(user-list): center icons on safari Centers icons indicating presenter, audio state and whiteboard access in the user list. --- .../ui/components/user-avatar/component.jsx | 7 ++---- .../ui/components/user-avatar/styles.js | 24 ++++--------------- 2 files changed, 7 insertions(+), 24 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index dd5b91c25e..91e8c8f3a4 100755 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -37,7 +37,7 @@ const defaultProps = { }; const { animations } = Settings.application; -const { isChrome, isFirefox, isEdge } = browserInfo; +const { isSafari } = browserInfo; const UserAvatar = ({ children, @@ -70,10 +70,7 @@ const UserAvatar = ({ listenOnly={listenOnly} voice={voice} noVoice={noVoice && !listenOnly} - isChrome={isChrome} - isFirefox={isFirefox} - isEdge={isEdge} - className={className} + isSafari={isSafari} style={{ backgroundColor: color, color, // We need the same color on both for the border diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js index ddf31d3ce4..511b5477cc 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js @@ -118,7 +118,7 @@ const Avatar = styled.div` width: 0; height: 0; padding-top: .5rem; - padding-right: 0; + padding-right: ${({ isSafari }) => isSafari ? '.6rem' : '0'}; padding-left: 0; padding-bottom: 0; color: inherit; @@ -158,7 +158,6 @@ const Avatar = styled.div` ${({ presenter }) => presenter && ` &:before { content: "\\00a0\\e90b\\00a0"; - padding: ${mdPaddingY} !important; opacity: 1; top: ${userIndicatorsOffset}; left: ${userIndicatorsOffset}; @@ -166,6 +165,8 @@ const Avatar = styled.div` right: auto; border-radius: 5px; background-color: ${colorPrimary}; + height: 1.2rem; + width: 1.2rem; [dir="rtl"] & { left: auto; @@ -175,18 +176,9 @@ const Avatar = styled.div` } `} - ${({ - presenter, isChrome, isFirefox, isEdge, - }) => presenter && (isChrome || isFirefox || isEdge) && ` - &:before { - padding: ${indicatorPadding} !important; - } - `} - ${({ whiteboardAccess }) => whiteboardAccess && ` &:before { content: "\\00a0\\e925\\00a0"; - padding: ${mdPaddingY} !important; border-radius: 50% !important; opacity: 1; top: ${userIndicatorsOffset}; @@ -195,6 +187,8 @@ const Avatar = styled.div` right: auto; border-radius: 5px; background-color: ${colorPrimary}; + height: 1.2rem; + width: 1.2rem; [dir="rtl"] & { left: auto; @@ -205,14 +199,6 @@ const Avatar = styled.div` } `} - ${({ - whiteboardAccess, isChrome, isFirefox, isEdge, - }) => whiteboardAccess && (isChrome || isFirefox || isEdge) && ` - &:before { - padding: ${indicatorPadding}; - } - `} - ${({ voice }) => voice && ` &:after { content: "\\00a0\\e931\\00a0"; From 6129314a33c847d924237a1b5592b53fec9227c7 Mon Sep 17 00:00:00 2001 From: Arthurk12 Date: Fri, 6 Oct 2023 19:11:49 -0300 Subject: [PATCH 2/2] fix(user-list): center icons in chrome on iOS devices --- .../imports/ui/components/user-avatar/component.jsx | 6 +++--- .../imports/ui/components/user-avatar/styles.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx index 91e8c8f3a4..8cb03adb35 100755 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/component.jsx @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Settings from '/imports/ui/services/settings'; import Styled from './styles'; -import browserInfo from '/imports/utils/browserInfo'; +import deviceInfo from '/imports/utils/deviceInfo'; const propTypes = { children: PropTypes.node, @@ -37,7 +37,7 @@ const defaultProps = { }; const { animations } = Settings.application; -const { isSafari } = browserInfo; +const { isIos } = deviceInfo; const UserAvatar = ({ children, @@ -70,7 +70,7 @@ const UserAvatar = ({ listenOnly={listenOnly} voice={voice} noVoice={noVoice && !listenOnly} - isSafari={isSafari} + isIos={isIos} style={{ backgroundColor: color, color, // We need the same color on both for the border diff --git a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js index 511b5477cc..170a70aab0 100644 --- a/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js +++ b/bigbluebutton-html5/imports/ui/components/user-avatar/styles.js @@ -118,7 +118,7 @@ const Avatar = styled.div` width: 0; height: 0; padding-top: .5rem; - padding-right: ${({ isSafari }) => isSafari ? '.6rem' : '0'}; + padding-right: ${({ isIos }) => isIos ? '.6rem;' : '0;'};; padding-left: 0; padding-bottom: 0; color: inherit; @@ -170,6 +170,7 @@ const Avatar = styled.div` [dir="rtl"] & { left: auto; + padding-right: .3rem !important; right: ${userIndicatorsOffset}; letter-spacing: -.33rem; } @@ -192,6 +193,7 @@ const Avatar = styled.div` [dir="rtl"] & { left: auto; + padding-right: .3rem !important; right: ${userIndicatorsOffset}; letter-spacing: -.33rem; transform: scale(-1, 1);