feat(toolbar) Make toolbar full width

Change behaviour so that things above the toolbar get resized (no more overlap between toolbar and content)
jitsi · Sep 4, 2023 · 423b27a · 423b27a
1 parent 0170c65
commit 423b27a
Show file tree

Hide file tree

Showing 27 changed files with 118 additions and 222 deletions.
diff --git a/css/_toolbars.scss b/css/_toolbars.scss
@@ -32,14 +32,6 @@
     pointer-events: none;
     z-index: $toolbarZ + 2;
 
-    &.shift-up {
-        bottom: calc(((#{$newToolbarSize} + 30px) * 2) * -1);
-
-        .toolbox-content {
-            margin-bottom: 46px;
-        }
-    }
-
     &.visible {
         bottom: 0;
     }
@@ -53,7 +45,6 @@
     align-items: center;
     box-sizing: border-box;
     display: flex;
-    margin-bottom: 16px;
     position: relative;
     z-index: $toolbarZ;
     pointer-events: none;
@@ -79,24 +70,11 @@
 }
 
 .toolbox-content-wrapper {
-    display: flex;
-    flex-direction: column;
-    margin: 0 auto;
-    max-width: 100%;
-    pointer-events: all;
-    border-radius: 6px;
-
     .toolbox-content-items {
         @include ltr;
     }
 }
 
-.toolbox-content-wrapper::after {
-    content: '';
-    background: $newToolbarBackgroundColor;
-    padding-bottom: env(safe-area-inset-bottom, 0);
-}
-
 .overflow-menu-hr {
     border-top: 1px solid #4C4D50;
     border-bottom: 0;

diff --git a/css/_variables.scss b/css/_variables.scss
@@ -16,7 +16,7 @@ $thumbnailsBorder: 2px;
 $newToolbarBackgroundColor: #131519;
 $newToolbarSize: 48px;
 $newToolbarSizeMobile: 60px;
-$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
+$newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 12px);
 
 /**
  * Chat

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
@@ -21,6 +21,12 @@
     left: 0px;
     right: 0px;
     overflow: hidden;
+    transition: height .3s ease-in, min-height .3s ease-in;
+
+    &.with-toolbox {
+        height: calc(100% - #{$newToolbarSizeWithPadding});
+        min-height: calc(100% - #{$newToolbarSizeWithPadding});
+    }
 }
 
 #largeVideoBackgroundContainer,

diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss
@@ -40,11 +40,6 @@
         width: 100%;
 
         &.collapse {
-            #remoteVideos {
-                height: calc(100% - #{$newToolbarSizeMobile}) !important;
-                margin-bottom: $newToolbarSizeMobile;
-            }
-
             .remote-videos {
                 // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
                 overflow: hidden auto !important;
@@ -103,3 +98,7 @@
         }
     }
 }
+
+.tile-transition {
+    transition: height .3s ease-in, width .3s ease-in;
+}
diff --git a/css/premeeting/_premeeting-screens.scss b/css/premeeting/_premeeting-screens.scss
@@ -89,6 +89,14 @@
             box-sizing: border-box;
             width: auto;
         }
+
+        .toolbox-content-wrapper {
+            margin: 0 auto;
+            max-width: 100%;
+            background: none;
+            box-shadow: none;
+            padding: 0;
+        }
     }
 
     @media (max-width: 400px) {

diff --git a/modules/UI/etherpad/Etherpad.js b/modules/UI/etherpad/Etherpad.js
@@ -4,7 +4,6 @@ import $ from 'jquery';
 
 import { setDocumentEditingState } from '../../../react/features/etherpad/actions';
 import { getSharedDocumentUrl } from '../../../react/features/etherpad/functions';
-import { getToolboxHeight } from '../../../react/features/toolbox/functions.web';
 import Filmstrip from '../videolayout/Filmstrip';
 import LargeContainer from '../videolayout/LargeContainer';
 import VideoLayout from '../videolayout/VideoLayout';
@@ -68,7 +67,7 @@ class Etherpad extends LargeContainer {
         let height, width;
 
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
-            height = containerHeight - getToolboxHeight();
+            height = containerHeight;
             width = containerWidth - Filmstrip.getVerticalFilmstripWidth();
         } else {
             height = containerHeight - Filmstrip.getFilmstripHeight();

diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js
@@ -394,6 +394,7 @@ export class VideoContainer extends LargeContainer {
         const currentLayout = getCurrentLayout(state);
 
         const verticalFilmstripWidth = state['features/filmstrip'].width?.current;
+        const containerHeightWithToolbox = containerHeight - (state['features/toolbox'].visible ? 60 : 0);
 
         if (currentLayout === LAYOUTS.TILE_VIEW || currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW) {
             // We don't need to resize the large video since it won't be displayed and we'll resize when returning back
@@ -403,7 +404,8 @@ export class VideoContainer extends LargeContainer {
 
         this.positionRemoteStatusMessages();
 
-        const [ width, height ] = this._getVideoSize(containerWidth, containerHeight, verticalFilmstripWidth);
+        const [ width, height ] = this._getVideoSize(containerWidth,
+            containerHeightWithToolbox, verticalFilmstripWidth);
 
         if (width === 0 || height === 0) {
             // We don't need to set 0 for width or height since the visibility is controlled by the visibility css prop
@@ -414,7 +416,7 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
-        if ((containerWidth > width) || (containerHeight > height)) {
+        if ((containerWidth > width) || (containerHeightWithToolbox > height)) {
             this._backgroundOrientation = containerWidth > width ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
             this._hideBackground = false;
         } else {
@@ -424,7 +426,7 @@ export class VideoContainer extends LargeContainer {
         this._updateBackground();
 
         const { horizontalIndent, verticalIndent }
-            = this.getVideoPosition(width, height, containerWidth, containerHeight, verticalFilmstripWidth);
+            = this.getVideoPosition(width, height, containerWidth, containerHeightWithToolbox, verticalFilmstripWidth);
 
         APP.store.dispatch(setLargeVideoDimensions(height, width));
 

diff --git a/modules/UI/videolayout/VideoLayout.js b/modules/UI/videolayout/VideoLayout.js
@@ -129,10 +129,10 @@ const VideoLayout = {
     /**
      * Resizes the video area.
      */
-    resizeVideoArea() {
+    resizeVideoArea(animate = false) {
         if (largeVideo) {
             largeVideo.updateContainerSize();
-            largeVideo.resize(false);
+            largeVideo.resize(animate);
         }
     },
 
@@ -306,8 +306,8 @@ const VideoLayout = {
     /**
      * Handles window resizes.
      */
-    onResize() {
-        VideoLayout.resizeVideoArea();
+    onResize(animate = false) {
+        VideoLayout.resizeVideoArea(animate);
     }
 };
 

diff --git a/react/features/base/responsive-ui/actions.ts b/react/features/base/responsive-ui/actions.ts
@@ -2,7 +2,9 @@ import { batch } from 'react-redux';
 
 import { IStore } from '../../app/types';
 import { CHAT_SIZE } from '../../chat/constants';
+import { TOOLBAR_HEIGHT } from '../../filmstrip/constants';
 import { getParticipantsPaneOpen } from '../../participants-pane/functions';
+import { isToolboxVisible } from '../../toolbox/functions';
 import theme from '../components/themes/participantsPaneTheme.json';
 
 import {
@@ -36,11 +38,17 @@ const REDUCED_UI_THRESHOLD = 300;
 export function clientResized(clientWidth: number, clientHeight: number) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         let availableWidth = clientWidth;
+        let availableHeight = clientHeight;
 
         if (navigator.product !== 'ReactNative') {
             const state = getState();
             const { isOpen: isChatOpen } = state['features/chat'];
             const isParticipantsPaneOpen = getParticipantsPaneOpen(state);
+            const toolboxVisible = isToolboxVisible(state);
+
+            if (toolboxVisible) {
+                availableHeight -= TOOLBAR_HEIGHT;
+            }
 
             if (isChatOpen) {
                 availableWidth -= CHAT_SIZE;
@@ -54,7 +62,7 @@ export function clientResized(clientWidth: number, clientHeight: number) {
         batch(() => {
             dispatch({
                 type: CLIENT_RESIZED,
-                clientHeight,
+                clientHeight: availableHeight,
                 clientWidth: availableWidth
             });
             dispatch(setAspectRatio(clientWidth, clientHeight));

diff --git a/react/features/base/ui/constants.web.ts b/react/features/base/ui/constants.web.ts
@@ -253,15 +253,21 @@ export const commonStyles = (theme: Theme) => {
             textAlign: 'center' as const
         },
 
-        '.toolbox-content-items': {
+        '.toolbox-content-wrapper': {
             background: theme.palette.ui01,
-            borderRadius: 6,
-            margin: '0 auto',
-            padding: 6,
+            padding: theme.spacing(2),
+            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
+            display: 'flex',
+            flexDirection: 'row' as const,
+            justifyContent: 'center',
+            width: '100%',
+            pointerEvents: 'all' as const
+        },
+
+        '.toolbox-content-items': {
             textAlign: 'center' as const,
             pointerEvents: 'all' as const,
             display: 'flex',
-            boxShadow: '0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15)',
 
             '& > div': {
                 marginRight: theme.spacing(2),

diff --git a/react/features/conference/components/web/Conference.tsx b/react/features/conference/components/web/Conference.tsx
@@ -28,6 +28,7 @@ import { toggleToolboxVisible } from '../../../toolbox/actions.any';
 import { fullScreenChanged, showToolbox } from '../../../toolbox/actions.web';
 import JitsiPortal from '../../../toolbox/components/web/JitsiPortal';
 import Toolbox from '../../../toolbox/components/web/Toolbox';
+import { isToolboxVisible } from '../../../toolbox/functions.web';
 import { LAYOUT_CLASSNAMES } from '../../../video-layout/constants';
 import { getCurrentLayout } from '../../../video-layout/functions.any';
 import { init } from '../../actions.web';
@@ -74,6 +75,11 @@ interface IProps extends AbstractProps, WithTranslation {
      */
     _isAnyOverlayVisible: boolean;
 
+    /**
+     * Whether or not the toolbox is visible.
+     */
+    _isToolboxVisible: boolean;
+
     /**
      * The CSS class to apply to the root of {@link Conference} to modify the
      * application layout.
@@ -207,6 +213,7 @@ class Conference extends AbstractConference<IProps, any> {
         const {
             _filmstripDisabled,
             _isAnyOverlayVisible,
+            _isToolboxVisible,
             _layoutClassName,
             _notificationsVisible,
             _overflowDrawer,
@@ -231,6 +238,7 @@ class Conference extends AbstractConference<IProps, any> {
                     <ConferenceInfo />
                     <Notice />
                     <div
+                        className = { _isToolboxVisible ? 'with-toolbox' : '' }
                         id = 'videospace'
                         onTouchStart = { this._onVidespaceTouchStart }>
                         <LargeVideo />
@@ -406,6 +414,7 @@ function _mapStateToProps(state: IReduxState) {
         _backgroundAlpha: backgroundAlpha,
         _filmstripDisabled: isFilmstripDisabled(state),
         _isAnyOverlayVisible: Boolean(getOverlayToRender(state)),
+        _isToolboxVisible: isToolboxVisible(state),
         _layoutClassName: LAYOUT_CLASSNAMES[getCurrentLayout(state) ?? ''],
         _mouseMoveCallbackInterval: mouseMoveCallbackInterval,
         _overflowDrawer: overflowDrawer,

diff --git a/react/features/display-name/components/web/StageParticipantNameLabel.tsx b/react/features/display-name/components/web/StageParticipantNameLabel.tsx
@@ -11,7 +11,6 @@ import {
 } from '../../../base/participants/functions';
 import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import { getLargeVideoParticipant } from '../../../large-video/functions';
-import { isToolboxVisible } from '../../../toolbox/functions.web';
 import { isLayoutTileView } from '../../../video-layout/functions.web';
 
 import DisplayNameBadge from './DisplayNameBadge';
@@ -23,17 +22,14 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             display: 'inline-flex',
             justifyContent: 'center',
-            marginBottom: theme.spacing(7),
+            marginBottom: theme.spacing(3),
             transition: 'margin-bottom 0.3s',
             pointerEvents: 'none',
             position: 'absolute',
             bottom: 0,
             left: 0,
             width: '100%',
             zIndex: 1
-        },
-        containerElevated: {
-            marginBottom: theme.spacing(12)
         }
     };
 });
@@ -53,7 +49,6 @@ const StageParticipantNameLabel = () => {
     const localId = localParticipant?.id;
 
     const isTileView = useSelector(isLayoutTileView);
-    const toolboxVisible: boolean = useSelector(isToolboxVisible);
     const showDisplayName = useSelector(isDisplayNameVisible);
 
     if (showDisplayName
@@ -66,8 +61,7 @@ const StageParticipantNameLabel = () => {
             <div
                 className = { cx(
                     'stage-participant-label',
-                    classes.badgeContainer,
-                    toolboxVisible && classes.containerElevated
+                    classes.badgeContainer
                 ) }>
                 <DisplayNameBadge name = { nameToDisplay } />
             </div>

diff --git a/react/features/filmstrip/actions.web.ts b/react/features/filmstrip/actions.web.ts
@@ -213,7 +213,8 @@ export function setVerticalViewDimensions() {
             remoteVideosContainerWidth
                 = thumbnails?.local?.width + TILE_VERTICAL_CONTAINER_HORIZONTAL_MARGIN + SCROLL_SIZE;
             remoteVideosContainerHeight
-                = clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height) - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
+                = clientHeight - (disableSelfView ? 0 : thumbnails?.local?.height)
+                    - VERTICAL_FILMSTRIP_VERTICAL_MARGIN;
 
             // Account for the height of the local screen share thumbnail when calculating the height of the remote
             // videos container.

diff --git a/react/features/filmstrip/components/web/Filmstrip.tsx b/react/features/filmstrip/components/web/Filmstrip.tsx
@@ -36,6 +36,7 @@ import {
     MIN_STAGE_VIEW_WIDTH,
     TILE_HORIZONTAL_MARGIN,
     TILE_VERTICAL_MARGIN,
+    TOOLBAR_HEIGHT,
     TOP_FILMSTRIP_HEIGHT
 } from '../../constants';
 import {
@@ -334,6 +335,7 @@ class Filmstrip extends PureComponent <IProps, IState> {
             _currentLayout,
             _disableSelfView,
             _localScreenShareId,
+            _isToolboxVisible,
             _mainFilmstripVisible,
             _resizableFilmstrip,
             _topPanelFilmstrip,
@@ -373,6 +375,8 @@ class Filmstrip extends PureComponent <IProps, IState> {
         } else if (_currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW
             || (_currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW && filmstripType === FILMSTRIP_TYPE.MAIN)) {
             filmstripStyle.maxWidth = _verticalViewMaxWidth;
+            filmstripStyle.maxHeight = `calc(100% - ${_isToolboxVisible ? TOOLBAR_HEIGHT : 0}px)`;
+            filmstripStyle.transition = 'max-height .3s ease-in';
             if (!_mainFilmstripVisible) {
                 filmstripStyle.right = `-${filmstripStyle.maxWidth}px`;
             }