From fec2641730fa9d7efb7741c88c159fbf6fcadd56 Mon Sep 17 00:00:00 2001 From: Hristo Terezov Date: Thu, 11 Feb 2021 13:32:38 -0600 Subject: [PATCH] fix(popups): covered by labels. --- css/_labels.scss | 2 +- css/_popover.scss | 1 + css/_transcription-subtitles.scss | 2 +- css/_variables.scss | 6 ++++-- css/_videolayout_default.scss | 8 -------- css/filmstrip/_horizontal_filmstrip.scss | 1 - css/filmstrip/_tile_view.scss | 3 +-- css/filmstrip/_tile_view_overrides.scss | 5 ----- css/modals/invite/_invite_more.scss | 8 ++------ css/modals/video-quality/_video-quality.scss | 4 ---- react/features/conference/components/web/InviteMore.js | 10 +--------- 11 files changed, 11 insertions(+), 39 deletions(-) diff --git a/css/_labels.scss b/css/_labels.scss index 439daeb447..ae1d35d095 100644 --- a/css/_labels.scss +++ b/css/_labels.scss @@ -4,7 +4,7 @@ top: 30px; right: 30px; transition: right 0.5s; - z-index: $filmstripVideosZ + 1; + z-index: $labelsZ; .circular-label { align-items: center; diff --git a/css/_popover.scss b/css/_popover.scss index 2f0dc5117d..2241e3e663 100644 --- a/css/_popover.scss +++ b/css/_popover.scss @@ -47,4 +47,5 @@ border-radius: 3px; margin: -16px -24px; padding: 16px 24px; + z-index: $popoverZ; } diff --git a/css/_transcription-subtitles.scss b/css/_transcription-subtitles.scss index fdd641aaee..ee30b8731c 100644 --- a/css/_transcription-subtitles.scss +++ b/css/_transcription-subtitles.scss @@ -12,7 +12,7 @@ 1px 0px 1px rgba(0,0,0,0.3), 0px 0px 1px rgba(0,0,0,0.3); transform: translateX(-50%); - z-index: $filmstripVideosZ + 1; + z-index: $subtitlesZ; span { background: black; diff --git a/css/_variables.scss b/css/_variables.scss index b1673da181..e0dee8af47 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -114,7 +114,10 @@ $zindex1: 1; $zindex2: 2; $zindex3: 3; $toolbarBackgroundZ: 4; -$filmstripVideosZ: 5; +$labelsZ: 5; +$filmstripVideosZ: 6; +$subtitlesZ: 7; +$popoverZ: 8; $zindex10: 10; $reloadZ: 20; $poweredByZ: 100; @@ -126,7 +129,6 @@ $tooltipsZ: 401; $dropdownMaskZ: 900; $dropdownZ: 901; $centeredVideoLabelZ: 1010; -$popoverZ: 1015; $overlayZ: 1016; diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 4dbf06d59b..87297d918f 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -480,14 +480,6 @@ z-index: $reloadZ; /*The reload button should appear on top of the header!*/ } -.audiolevel { - display: inline-block; - position: absolute; - z-index: $zindex0; - border-radius:1px; - pointer-events: none; -} - #dominantSpeaker { visibility: hidden; width: 300px; diff --git a/css/filmstrip/_horizontal_filmstrip.scss b/css/filmstrip/_horizontal_filmstrip.scss index e41dab576c..bf5cb49bfd 100644 --- a/css/filmstrip/_horizontal_filmstrip.scss +++ b/css/filmstrip/_horizontal_filmstrip.scss @@ -6,7 +6,6 @@ } .horizontal-filmstrip .filmstrip { - position: absolute; bottom: 0; right: 0; padding: 10px 5px; diff --git a/css/filmstrip/_tile_view.scss b/css/filmstrip/_tile_view.scss index 5397ddad9a..f0f303fc08 100644 --- a/css/filmstrip/_tile_view.scss +++ b/css/filmstrip/_tile_view.scss @@ -42,10 +42,9 @@ height: 100%; justify-content: center; left: 0; - position: fixed; + position: absolute; top: 0; width: 100%; - z-index: $filmstripVideosZ; @media (min-width: 581px) { &.shift-right { diff --git a/css/filmstrip/_tile_view_overrides.scss b/css/filmstrip/_tile_view_overrides.scss index 8a13129cfa..79a9d37268 100644 --- a/css/filmstrip/_tile_view_overrides.scss +++ b/css/filmstrip/_tile_view_overrides.scss @@ -22,11 +22,6 @@ display: none; } - #remoteConnectionMessage, - .watermark { - z-index: $filmstripVideosZ + 1; - } - /** * The follow styling uses !important to override inline styles set with * javascript. diff --git a/css/modals/invite/_invite_more.scss b/css/modals/invite/_invite_more.scss index cc109e7ee3..2ea7162d91 100644 --- a/css/modals/invite/_invite_more.scss +++ b/css/modals/invite/_invite_more.scss @@ -7,10 +7,6 @@ text-align: center; z-index: $zindex2; background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); - - &.elevated { - z-index: $filmstripVideosZ + 1; - } } &-header { @@ -98,11 +94,11 @@ border-radius: 4px; cursor: pointer; } - + &:hover > div:hover { background-color: rgba(255, 255, 255, 0.2); } - + & > :not(:last-child) { margin-right: 16px; } diff --git a/css/modals/video-quality/_video-quality.scss b/css/modals/video-quality/_video-quality.scss index aceec1429e..b83d564caa 100644 --- a/css/modals/video-quality/_video-quality.scss +++ b/css/modals/video-quality/_video-quality.scss @@ -111,7 +111,3 @@ display: none; } } - -#videoResolutionLabel { - z-index: $zindex3 + 1; -} diff --git a/react/features/conference/components/web/InviteMore.js b/react/features/conference/components/web/InviteMore.js index 0633ed9a5b..f35ac52f33 100644 --- a/react/features/conference/components/web/InviteMore.js +++ b/react/features/conference/components/web/InviteMore.js @@ -8,17 +8,11 @@ import { getParticipantCount } from '../../../base/participants'; import { connect } from '../../../base/redux'; import { beginAddPeople } from '../../../invite'; import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web'; -import { shouldDisplayTileView } from '../../../video-layout/functions'; declare var interfaceConfig: Object; type Props = { - /** - * Whether tile view is enabled. - */ - _tileViewEnabled: Boolean, - /** * Whether to show the option to invite more people * instead of the subject. @@ -44,14 +38,13 @@ type Props = { * @returns {React$Element} */ function InviteMore({ - _tileViewEnabled, _visible, onClick, t }: Props) { return ( _visible - ?
+ ?
{t('addPeople.inviteMoreHeader')}
@@ -81,7 +74,6 @@ function mapStateToProps(state) { const hide = interfaceConfig.HIDE_INVITE_MORE_HEADER; return { - _tileViewEnabled: shouldDisplayTileView(state), _visible: isToolboxVisible(state) && isButtonEnabled('invite') && isAlone && !hide }; }