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

Merge pull request #15165 from JoVictorNunes/connection-status-modal-snap-scroll

Browse Source 
improvement: mobile-like behavior in connection status modal
This commit is contained in:
Ramón Souza 2022-12-06 09:53:51 -03:00 committed by GitHub
commit 6cb87316d6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx
View File

@ -159,7 +159,6 @@ class ConnectionStatusComponent extends PureComponent {
this.help = Service.getHelp();
this.state = {
selectedTab: 0,
dataPage: '1',
dataSaving: props.dataSaving,
hasNetworkData: false,
copyButtonText: intl.formatMessage(intlMessages.copy),
@ -511,44 +510,17 @@ class ConnectionStatusComponent extends PureComponent {
}
}
function handlePaginationClick(action) {
if (action === 'next') {
this.setState({ dataPage: '2' });
}
else {
this.setState({ dataPage: '1' });
}
}
return (
<Styled.NetworkDataContainer data-test="networkDataContainer">
<Styled.Prev>
<Styled.ButtonLeft
role="button"
tabIndex={0}
disabled={dataPage === '1'}
aria-label={`${intl.formatMessage(intlMessages.prev)} ${intl.formatMessage(intlMessages.ariaTitle)}`}
onClick={handlePaginationClick.bind(this, 'prev')}
>
<Styled.Chevron
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M15 19l-7-7 7-7"
/>
</Styled.Chevron>
</Styled.ButtonLeft>
</Styled.Prev>
<Styled.Helper page={dataPage}>
<ConnectionStatusHelper closeModal={() => closeModal(dataSaving, intl)} />
</Styled.Helper>
<Styled.NetworkDataContent page={dataPage}>
<Styled.NetworkDataContainer
data-test="networkDataContainer"
tabIndex={0}
>
<Styled.HelperWrapper>
<Styled.Helper>
<ConnectionStatusHelper closeModal={() => closeModal(dataSaving, intl)} />
</Styled.Helper>
</Styled.HelperWrapper>
<Styled.NetworkDataContent>
<Styled.DataColumn>
<Styled.NetworkData>
<div>{`${audioUploadLabel}`}</div>
@ -587,29 +559,6 @@ class ConnectionStatusComponent extends PureComponent {
</Styled.NetworkData>
</Styled.DataColumn>
</Styled.NetworkDataContent>
<Styled.Next>
<Styled.ButtonRight
role="button"
tabIndex={0}
disabled={dataPage === '2'}
aria-label={`${intl.formatMessage(intlMessages.next)} ${intl.formatMessage(intlMessages.ariaTitle)}`}
onClick={handlePaginationClick.bind(this, 'next')}
>
<Styled.Chevron
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 5l7 7-7 7"
/>
</Styled.Chevron>
</Styled.ButtonRight>
</Styled.Next>
</Styled.NetworkDataContainer>
);
}

145
bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js
View File

@ -29,6 +29,9 @@ import {
hasPhoneWidth,
smallOnly,
} from '/imports/ui/stylesheets/styled-components/breakpoints';
import {
ScrollboxVertical,
} from '/imports/ui/stylesheets/styled-components/scrollable';
import {
Tab, Tabs, TabList, TabPanel,
} from 'react-tabs';
@ -174,12 +177,23 @@ const Label = styled.span`
margin-bottom: ${lgPaddingY};
`;
const NetworkDataContainer = styled.div`
const NetworkDataContainer = styled(ScrollboxVertical)`
width: 100%;
height: 100%;
display: flex;
flex-wrap: nowrap;
overflow: auto;
scroll-snap-type: x mandatory;
padding-bottom: 1.25rem;
&:focus {
outline: none;
&::-webkit-scrollbar-thumb {
background: rgba(0,0,0,.5);
}
}
@media ${mediumDown} {
justify-content: space-between;
}
@ -270,6 +284,19 @@ const Copy = styled.span`
`}
`;
const HelperWrapper = styled.div`
min-width: 12.5rem;
height: 100%;
@media ${mediumDown} {
flex: none;
width: 100%;
scroll-snap-align: start;
display: flex;
justify-content: center;
}
`;
const Helper = styled.div`
width: 12.5rem;
height: 100%;
@ -280,12 +307,6 @@ const Helper = styled.div`
justify-content: center;
align-items: center;
padding: .5rem;
@media ${mediumDown} {
${({ page }) => (page === '1'
? 'display: flex;'
: 'display: none;')}
}
`;
const NetworkDataContent = styled.div`
@ -295,9 +316,9 @@ const NetworkDataContent = styled.div`
flex-grow: 1;
@media ${mediumDown} {
${({ page }) => (page === '2'
? 'display: flex;'
: 'display: none;')}
flex: none;
width: 100%;
scroll-snap-align: start;
}
`;
@ -311,100 +332,6 @@ const DataColumn = styled.div`
}
`;
const Main = styled.div`
height: 19.5rem;
display: flex;
flex-direction: column;
`;
const Body = styled.div`
padding: ${jumboPaddingY} 0;
margin: 0;
flex-grow: 1;
overflow: auto;
position: relative;
`;
const Prev = styled.div`
display: none;
margin: 0 .5rem 0 .25rem;
@media ${mediumDown} {
display: flex;
flex-direction: column;
justify-content: center;
}
@media ${hasPhoneWidth} {
margin: 0;
}
`;
const Next = styled(Prev)`
margin: 0 .25rem 0 .5rem;
@media ${hasPhoneWidth} {
margin: 0;
}
`;
const Button = styled.button`
flex: 0;
margin: 0;
padding: 0;
border: none;
background: none;
color: inherit;
border-radius: 50%;
cursor: pointer;
&:disabled {
cursor: not-allowed;
opacity: .5;
}
&:hover {
opacity: .75;
}
&:hover,
&:focus {
outline: 2px solid ${colorPrimary};
}
@media ${hasPhoneWidth} {
position: absolute;
bottom: 0;
padding: .25rem;
}
`;
const ButtonLeft = styled(Button)`
left: calc(50% - 2rem);
[dir="rtl"] & {
left: calc(50%);
}
`;
const ButtonRight = styled(Button)`
right: calc(50% - 2rem);
[dir="rtl"] & {
right: calc(50%);
}
`;
const Chevron = styled.svg`
display: flex;
width: 1rem;
height: 1rem;
[dir="rtl"] & {
transform: rotate(180deg);
}
`;
const ConnectionTabs = styled(Tabs)`
display: flex;
flex-flow: column;
@ -535,15 +462,9 @@ export default {
Copy,
Helper,
NetworkDataContent,
Main,
Body,
FullName,
DataColumn,
Prev,
Next,
ButtonLeft,
ButtonRight,
Chevron,
HelperWrapper,
ConnectionTabs,
ConnectionTabList,
ConnectionTabSelector,