diff --git a/webapp/channels/src/components/tours/channels_tour_tip.tsx b/webapp/channels/src/components/tours/channels_tour_tip.tsx index 553c1413cf..333b19ea7f 100644 --- a/webapp/channels/src/components/tours/channels_tour_tip.tsx +++ b/webapp/channels/src/components/tours/channels_tour_tip.tsx @@ -33,6 +33,7 @@ export type ChannelsTourTipProps = { hideBackdrop?: boolean; tippyBlueStyle?: boolean; showOptOut?: boolean; + interactivePunchOut?: boolean; } export const ChannelsTourTip = ({ @@ -50,6 +51,7 @@ export const ChannelsTourTip = ({ hideBackdrop = false, tippyBlueStyle = false, showOptOut = true, + interactivePunchOut = false, }: ChannelsTourTipProps) => { const { show, @@ -131,6 +133,7 @@ export const ChannelsTourTip = ({ hideBackdrop={hideBackdrop} tippyBlueStyle={tippyBlueStyle} showOptOut={showOptOut} + interactivePunchOut={interactivePunchOut} /> ); }; diff --git a/webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx b/webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx index 4409a68c08..907966e23f 100644 --- a/webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx +++ b/webapp/channels/src/components/tours/crt_tour/crt_threads_pane_tutorial_tip.tsx @@ -9,7 +9,7 @@ import {Constants, Preferences} from 'utils/constants'; import {getCurrentUserId} from 'mattermost-redux/selectors/entities/common'; import {savePreferences} from 'mattermost-redux/actions/preferences'; -import {TourTip, useMeasurePunchouts} from '@mattermost/components'; +import {TourTip, useFollowElementDimensions, useMeasurePunchouts} from '@mattermost/components'; const translate = {x: 2, y: 25}; @@ -17,6 +17,9 @@ const CRTThreadsPaneTutorialTip = () => { const dispatch = useDispatch(); const {formatMessage} = useIntl(); const currentUserId = useSelector(getCurrentUserId); + + const dimensions = useFollowElementDimensions('sidebar-right'); + const title = ( { dispatch(savePreferences(currentUserId, preferences)); }; - const overlayPunchOut = useMeasurePunchouts(['rhsContainer'], []); + const overlayPunchOut = useMeasurePunchouts(['rhsContainer'], [dimensions?.width]); return ( { const title = ( @@ -26,7 +26,7 @@ export const CreateAndJoinChannelsTour = () => {

); - const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'invitePeople'], [], {y: -8, height: 16, x: 0, width: 0}); + const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'showNewChannel'], [], {y: -8, height: 16, x: 0, width: 0}); return ( {

); - const overlayPunchOut = useMeasurePunchouts(['showMoreChannels', 'invitePeople'], [], {y: -8, height: 16, x: 0, width: 0}); + const overlayPunchOut = useMeasurePunchouts(['invitePeople'], [], {y: -8, height: 16, x: 0, width: 0}); return ( { const {formatMessage} = useIntl(); - const {playbooksCount, boardsCount, showBoardsTour} = useShowTourTip(); - const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], []); + const dimensions = useFollowElementDimensions('sidebar-right'); + const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], [dimensions?.width]); if (!showBoardsTour) { return null; @@ -60,6 +60,7 @@ export const BoardsTourTip = (): JSX.Element | null => { singleTip={playbooksCount === 0} placement='left-start' showOptOut={false} + interactivePunchOut={true} /> ); }; diff --git a/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx b/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx index d8dbe14116..0193222be4 100644 --- a/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx +++ b/webapp/channels/src/components/tours/worktemplate_explore_tour/playbooks_tour_tip.tsx @@ -4,7 +4,7 @@ import React from 'react'; import {FormattedMessage, useIntl} from 'react-intl'; -import {useMeasurePunchouts} from '@mattermost/components'; +import {useFollowElementDimensions, useMeasurePunchouts} from '@mattermost/components'; import {useShowTourTip} from './useShowTourTip'; import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip'; @@ -12,7 +12,8 @@ import OnboardingWorkTemplateTourTip from './worktemplate_explore_tour_tip'; export const PlaybooksTourTip = (): JSX.Element | null => { const {formatMessage} = useIntl(); const {playbooksCount, boardsCount, showPlaybooksTour} = useShowTourTip(); - const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], []); + const dimensions = useFollowElementDimensions('sidebar-right'); + const overlayPunchOut = useMeasurePunchouts(['sidebar-right'], [dimensions?.width]); if (!showPlaybooksTour) { return null; @@ -59,6 +60,7 @@ export const PlaybooksTourTip = (): JSX.Element | null => { overlayPunchOut={overlayPunchOut} placement='left-start' showOptOut={false} + interactivePunchOut={true} /> ); }; diff --git a/webapp/platform/components/src/common/hooks/useFollowElementDimensions.ts b/webapp/platform/components/src/common/hooks/useFollowElementDimensions.ts new file mode 100644 index 0000000000..beb3306fc9 --- /dev/null +++ b/webapp/platform/components/src/common/hooks/useFollowElementDimensions.ts @@ -0,0 +1,27 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import {useEffect, useState} from 'react'; + +export const useFollowElementDimensions = (elementId: string): DOMRectReadOnly => { + const [dimensions, setDimensions] = useState(new DOMRect()); + + useEffect(() => { + const element = document.getElementById(elementId); + if (!element) { + return undefined; + } + const observer = new ResizeObserver((entries) => { + if (entries.length > 0) { + setDimensions(entries[0].contentRect); + } + }); + observer.observe(element); + + return () => { + observer.unobserve(element); + }; + }, [elementId]); + + return dimensions; +}; diff --git a/webapp/platform/components/src/index.tsx b/webapp/platform/components/src/index.tsx index 4ea9461df8..f1615adf19 100644 --- a/webapp/platform/components/src/index.tsx +++ b/webapp/platform/components/src/index.tsx @@ -16,3 +16,4 @@ export {FocusTrap} from './focus_trap'; // hooks export * from './common/hooks/useMeasurePunchouts'; export {useElementAvailable} from './common/hooks/useElementAvailable'; +export {useFollowElementDimensions} from './common/hooks/useFollowElementDimensions'; diff --git a/webapp/platform/components/src/tour_tip/tour_tip.scss b/webapp/platform/components/src/tour_tip/tour_tip.scss index a4fedc2eb1..378ae208df 100644 --- a/webapp/platform/components/src/tour_tip/tour_tip.scss +++ b/webapp/platform/components/src/tour_tip/tour_tip.scss @@ -363,7 +363,7 @@ &__backdrop { position: absolute; - z-index: 999; + z-index: 100; top: 0; left: 0; width: 100%; diff --git a/webapp/platform/components/src/tour_tip/tour_tip.tsx b/webapp/platform/components/src/tour_tip/tour_tip.tsx index 7f2509bb15..90cdac6a8f 100644 --- a/webapp/platform/components/src/tour_tip/tour_tip.tsx +++ b/webapp/platform/components/src/tour_tip/tour_tip.tsx @@ -90,15 +90,10 @@ export const TourTip = ({ }: Props) => { const FIRST_STEP_INDEX = 0; const triggerRef = useRef(null); - const [useBackdrop, setUseBackdrop] = useState(!hideBackdrop); const onJump = (event: React.MouseEvent, jumpToStep: number) => { handleJump?.(event, jumpToStep); }; - useClickOutsideRef(triggerRef, () => { - setUseBackdrop(false); - }); - // This needs to be changed if root-portal node isn't available to maybe body const rootPortal = document.getElementById('root-portal'); @@ -214,7 +209,7 @@ export const TourTip = ({ > - {useBackdrop && } + /> {show && ( ); }; -