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

Merge pull request #20024 from Arthurk12/bbb/2.7/small-screens-toolbar

Browse Source 
[2.7] fix(presentation): toolbar width on small screens
This commit is contained in:
Ramón Souza 2024-05-02 15:32:31 -03:00 committed by GitHub
commit 356f6331c1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
bigbluebutton-html5/imports/ui/components/presentation/component.jsx
View File

@ -792,17 +792,21 @@ class Presentation extends PureComponent {
const { presentationToolbarMinWidth } = DEFAULT_VALUES; const { presentationToolbarMinWidth } = DEFAULT_VALUES;
const isLargePresentation = const isLargePresentation =
(svgWidth > presentationToolbarMinWidth || isMobile) && (svgWidth > presentationToolbarMinWidth) &&
!( !(
layoutType === LAYOUT_TYPE.VIDEO_FOCUS && layoutType === LAYOUT_TYPE.VIDEO_FOCUS
numCameras > 0 && && numCameras > 0
!fullscreenContext && !fullscreenContext
); );
const containerWidth = isLargePresentation const containerWidth = isLargePresentation
? svgWidth ? svgWidth
: presentationToolbarMinWidth; : presentationToolbarMinWidth;
const mobileAwareContainerWidth = isMobile
? presentationBounds.width
: containerWidth;
const slideContent = currentSlide?.content const slideContent = currentSlide?.content
? `${intl.formatMessage(intlMessages.slideContentStart)} ? `${intl.formatMessage(intlMessages.slideContentStart)}
${currentSlide.content} ${currentSlide.content}
@ -901,7 +905,7 @@ class Presentation extends PureComponent {
this.refPresentationToolbar = ref; this.refPresentationToolbar = ref;
}} }}
style={{ style={{
width: containerWidth, width: mobileAwareContainerWidth,
}} }}
> >
{this.renderPresentationToolbar(svgWidth)} {this.renderPresentationToolbar(svgWidth)}

1
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/component.jsx
View File

@ -319,6 +319,7 @@ class PresentationToolbar extends PureComponent {
return ( return (
<Styled.PresentationToolbarWrapper <Styled.PresentationToolbarWrapper
id="presentationToolbarWrapper" id="presentationToolbarWrapper"
isMobile={isMobile}
> >
{this.renderAriaDescs()} {this.renderAriaDescs()}
<Styled.QuickPollButtonWrapper> <Styled.QuickPollButtonWrapper>

5
bigbluebutton-html5/imports/ui/components/presentation/presentation-toolbar/styles.js
View File

@ -25,12 +25,15 @@ const PresentationToolbarWrapper = styled.div`
z-index: 1; z-index: 1;
background-color: ${colorOffWhite}; background-color: ${colorOffWhite};
border-top: 1px solid ${colorBlueLightest}; border-top: 1px solid ${colorBlueLightest};
min-width: fit-content;
width: 100%; width: 100%;
bottom: 0px; bottom: 0px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
padding: 2px; padding: 2px;
${({ isMobile }) => (isMobile
? 'overflow: auto;'
: 'min-width: fit-content;'
)};
select { select {
&:-moz-focusring { &:-moz-focusring {