From bd1fcd6546f95774e5cc8e0a48ea05cc7c0ab09a Mon Sep 17 00:00:00 2001 From: Joao Victor Date: Fri, 10 Jun 2022 11:50:35 -0300 Subject: [PATCH 1/2] improvement: a more mobile-like behavior in connection status modal --- .../connection-status/modal/component.jsx | 69 ++------- .../connection-status/modal/styles.js | 131 +++++------------- 2 files changed, 43 insertions(+), 157 deletions(-) diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx b/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx index a60e32bf2b..050c644758 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/component.jsx @@ -159,7 +159,6 @@ class ConnectionStatusComponent extends PureComponent { this.help = Service.getHelp(); this.state = { selectedTab: '1', - dataPage: '1', dataSaving: props.dataSaving, hasNetworkData: false, networkData: { @@ -499,43 +498,17 @@ class ConnectionStatusComponent extends PureComponent { } } - function handlePaginationClick(action) { - if (action === 'next') { - this.setState({ dataPage: '2' }); - } - else { - this.setState({ dataPage: '1' }); - } - } - return ( - - - - - - - - - - closeModal(dataSaving, intl)} /> - - + + + + closeModal(dataSaving, intl)} /> + + +
{`${audioUploadLabel}`}
@@ -574,28 +547,6 @@ class ConnectionStatusComponent extends PureComponent { - - - - - - - ); } diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js index f10aac0f2d..4af91d8d8b 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js @@ -27,6 +27,9 @@ import { mediumDown, hasPhoneWidth, } from '/imports/ui/stylesheets/styled-components/breakpoints'; +import { + ScrollboxVertical, +} from '/imports/ui/stylesheets/styled-components/scrollable'; const Item = styled.div` display: flex; @@ -169,13 +172,21 @@ const Label = styled.span` margin-bottom: ${lgPaddingY}; `; -const NetworkDataContainer = styled.div` +const NetworkDataContainer = styled(ScrollboxVertical)` width: 100%; height: 100%; + padding-bottom: 1.5rem; display: flex; - - @media ${mediumDown} { - justify-content: space-between; + flex-wrap: nowrap; + overflow: auto; + scroll-snap-type: x mandatory; + + &:focus { + outline: none; + + &::-webkit-scrollbar-thumb { + background: rgba(0,0,0,.5); + } } `; @@ -267,6 +278,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%; @@ -276,12 +300,6 @@ const Helper = styled.div` flex-direction: column; justify-content: center; align-items: center; - - @media ${mediumDown} { - ${({ page }) => page === '1' - ? 'display: flex;' - : 'display: none;'} - } `; const NetworkDataContent = styled.div` @@ -291,9 +309,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; } `; @@ -314,7 +332,7 @@ const Main = styled.div` `; const Body = styled.div` - padding: ${jumboPaddingY} 0; + padding-top: ${jumboPaddingY}; margin: 0; flex-grow: 1; overflow: auto; @@ -357,85 +375,6 @@ const Navigation = styled.div` } `; -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; - } - - &:focus { - outline: none; - } - - @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); - } -`; - export default { Item, Left, @@ -471,9 +410,5 @@ export default { Navigation, FullName, DataColumn, - Prev, - Next, - ButtonLeft, - ButtonRight, - Chevron, + HelperWrapper, }; From 5a72c518909acf9dc98f1542f8e93410fb28943b Mon Sep 17 00:00:00 2001 From: Joao Victor Date: Tue, 6 Dec 2022 09:41:37 -0300 Subject: [PATCH 2/2] resolve conflicts --- .../imports/ui/components/connection-status/modal/styles.js | 1 - 1 file changed, 1 deletion(-) diff --git a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js index 1bd441b40a..0e5856b71a 100644 --- a/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js +++ b/bigbluebutton-html5/imports/ui/components/connection-status/modal/styles.js @@ -180,7 +180,6 @@ const Label = styled.span` const NetworkDataContainer = styled(ScrollboxVertical)` width: 100%; height: 100%; - padding-bottom: 1.5rem; display: flex; flex-wrap: nowrap; overflow: auto;