From a68fe98afb3ea8d10d6430fd3a07edadec505f8f Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 15:31:20 +0000 Subject: [PATCH 01/20] create menu and menu item --- packages/client/components/MeetingOptions.tsx | 39 ++++++++++ .../client/components/MeetingOptionsMenu.tsx | 73 +++++++++++++++++++ packages/client/components/MeetingTopBar.tsx | 2 + packages/client/ui/Menu/Menu.tsx | 23 ++++++ packages/client/ui/Menu/MenuItem.tsx | 24 ++++++ 5 files changed, 161 insertions(+) create mode 100644 packages/client/components/MeetingOptions.tsx create mode 100644 packages/client/components/MeetingOptionsMenu.tsx create mode 100644 packages/client/ui/Menu/Menu.tsx create mode 100644 packages/client/ui/Menu/MenuItem.tsx diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx new file mode 100644 index 00000000000..72358986079 --- /dev/null +++ b/packages/client/components/MeetingOptions.tsx @@ -0,0 +1,39 @@ +import styled from '@emotion/styled' +import React from 'react' +import {MenuPosition} from '~/hooks/useCoords' +import useMenu from '~/hooks/useMenu' +import {PALETTE} from '~/styles/paletteV3' +import BaseButton from './BaseButton' +import IconLabel from './IconLabel' +import {Menu} from '../ui/Menu/Menu' +import {MenuItem} from '../ui/Menu/MenuItem' + +const OptionsButton = styled(BaseButton)({ + color: PALETTE.SKY_500, + display: 'flex', + flexDirection: 'column', + height: '100%', + opacity: 1, + padding: '0px 8px', + fontWeight: 600, + ':hover, :focus, :active': { + color: PALETTE.SKY_600 + } +}) + +const MeetingOptions = () => { + return ( + + +
Options
+ + } + > + {}} /> + + ) +} + +export default MeetingOptions diff --git a/packages/client/components/MeetingOptionsMenu.tsx b/packages/client/components/MeetingOptionsMenu.tsx new file mode 100644 index 00000000000..cbc8f70ac24 --- /dev/null +++ b/packages/client/components/MeetingOptionsMenu.tsx @@ -0,0 +1,73 @@ +import styled from '@emotion/styled' +import {Flag, Link as MuiLink, OpenInNew, Replay} from '@mui/icons-material' +import React from 'react' +import {PALETTE} from '../styles/paletteV3' +import Menu from './Menu' +import MenuItem from './MenuItem' +import {MenuItemLabelStyle} from './MenuItemLabel' + +const LinkIcon = styled(MuiLink)({ + color: PALETTE.SLATE_600, + marginRight: 8 +}) + +const ReplayIcon = styled(Replay)({ + color: PALETTE.SLATE_600, + marginRight: 8 +}) + +const FlagIcon = styled(Flag)({ + color: PALETTE.SLATE_600, + marginRight: 8 +}) + +const OptionMenuItem = styled('div')({ + ...MenuItemLabelStyle, + width: '240px' +}) + +const MeetingOptionsMenu = () => { + return ( + + + + Copy meeting permalink + + } + /> + + + {'Edit recurrence settings'} + + } + /> + + + Configure Slack + + + } + /> + + + {'End this meeting'} + + } + /> + + ) +} + +export default MeetingOptionsMenu diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index a9d37c7e096..f7a23acfd4f 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -9,6 +9,7 @@ import makeMinWidthMediaQuery from '../utils/makeMinWidthMediaQuery' import DemoCreateAccountButton from './DemoCreateAccountButton' import PlainButton from './PlainButton/PlainButton' import SidebarToggle from './SidebarToggle' +import MeetingOptions from './MeetingOptions' const localHeaderBreakpoint = makeMinWidthMediaQuery(600) @@ -177,6 +178,7 @@ const MeetingTopBar = (props: Props) => { )} {avatarGroup} + {showDiscussionButton && toggleDrawer && ( diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx new file mode 100644 index 00000000000..c30390e19f6 --- /dev/null +++ b/packages/client/ui/Menu/Menu.tsx @@ -0,0 +1,23 @@ +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import React from 'react' + +interface MenuProps { + trigger: React.ReactNode +} + +export const Menu: React.FC = ({trigger, children}) => { + return ( + + {trigger} + + + {children} + + + + ) +} diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx new file mode 100644 index 00000000000..ee8aaf83b68 --- /dev/null +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -0,0 +1,24 @@ +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import React from 'react' + +interface MenuItemProps { + value: string + label: string + onClick: (value: string) => void + isDisabled?: boolean +} + +export const MenuItem: React.FC = (props: MenuItemProps) => { + const {value, label, onClick, isDisabled} = props + + return ( + !isDisabled && onClick(value)} + > + {label} + + ) +} From a06fbfc201f2fe4f9c3966b10f60e758c1beb461 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 16:06:53 +0000 Subject: [PATCH 02/20] add menu item icon --- packages/client/components/MeetingOptions.tsx | 26 ++++++------------- .../TeamPrompt/TeamPromptOptions.tsx | 2 +- packages/client/ui/Menu/Menu.tsx | 2 +- packages/client/ui/Menu/MenuItem.tsx | 6 +++-- 4 files changed, 14 insertions(+), 22 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 72358986079..db1684b3a4e 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -1,25 +1,10 @@ import styled from '@emotion/styled' import React from 'react' -import {MenuPosition} from '~/hooks/useCoords' -import useMenu from '~/hooks/useMenu' -import {PALETTE} from '~/styles/paletteV3' -import BaseButton from './BaseButton' import IconLabel from './IconLabel' import {Menu} from '../ui/Menu/Menu' import {MenuItem} from '../ui/Menu/MenuItem' - -const OptionsButton = styled(BaseButton)({ - color: PALETTE.SKY_500, - display: 'flex', - flexDirection: 'column', - height: '100%', - opacity: 1, - padding: '0px 8px', - fontWeight: 600, - ':hover, :focus, :active': { - color: PALETTE.SKY_600 - } -}) +import SwapHorizIcon from '@mui/icons-material/SwapHoriz' +import {OptionsButton} from './TeamPrompt/TeamPromptOptions' const MeetingOptions = () => { return ( @@ -31,7 +16,12 @@ const MeetingOptions = () => { } > - {}} /> + {}} + icon={} + /> ) } diff --git a/packages/client/components/TeamPrompt/TeamPromptOptions.tsx b/packages/client/components/TeamPrompt/TeamPromptOptions.tsx index f34a7530830..bef32e09be0 100644 --- a/packages/client/components/TeamPrompt/TeamPromptOptions.tsx +++ b/packages/client/components/TeamPrompt/TeamPromptOptions.tsx @@ -14,7 +14,7 @@ import TeamPromptOptionsMenu from './TeamPromptOptionsMenu' const COPIED_TOOLTIP_DURATION_MS = 2000 -const OptionsButton = styled(BaseButton)({ +export const OptionsButton = styled(BaseButton)({ color: PALETTE.SKY_500, display: 'flex', flexDirection: 'column', diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index c30390e19f6..50fe65c8d74 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -13,7 +13,7 @@ export const Menu: React.FC = ({trigger, children}) => { {children} diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index ee8aaf83b68..4589465c4d6 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -6,18 +6,20 @@ interface MenuItemProps { label: string onClick: (value: string) => void isDisabled?: boolean + icon?: React.ReactNode } export const MenuItem: React.FC = (props: MenuItemProps) => { - const {value, label, onClick, isDisabled} = props + const {value, label, onClick, isDisabled, icon} = props return ( !isDisabled && onClick(value)} > + {icon &&
{icon}
} {label} ) From 80e8b312aa760952b0c3b5e1f270e30dfba43b03 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 16:54:00 +0000 Subject: [PATCH 03/20] add retro drawer --- packages/client/components/MeetingOptions.tsx | 16 ++++++-- packages/client/components/MeetingTopBar.tsx | 8 +++- packages/client/components/RetroDrawer.tsx | 39 +++++++++++++++++++ .../TeamPrompt/TeamPromptDrawer.tsx | 2 +- 4 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 packages/client/components/RetroDrawer.tsx diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index db1684b3a4e..212eb252e79 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -1,4 +1,3 @@ -import styled from '@emotion/styled' import React from 'react' import IconLabel from './IconLabel' import {Menu} from '../ui/Menu/Menu' @@ -6,7 +5,18 @@ import {MenuItem} from '../ui/Menu/MenuItem' import SwapHorizIcon from '@mui/icons-material/SwapHoriz' import {OptionsButton} from './TeamPrompt/TeamPromptOptions' -const MeetingOptions = () => { +type Props = { + setShowDrawer: (showDrawer: boolean) => void + showDrawer: boolean +} + +const MeetingOptions = (props: Props) => { + const {setShowDrawer, showDrawer} = props + + const handleClick = () => { + setShowDrawer(!showDrawer) + } + return ( { {}} + onClick={handleClick} icon={} /> diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index f7a23acfd4f..ae376e6bf9d 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled' import {Comment} from '@mui/icons-material' -import React, {ReactElement, ReactNode} from 'react' +import React, {ReactElement, ReactNode, useState} from 'react' import {PALETTE} from '~/styles/paletteV3' import {meetingAvatarMediaQueries} from '../styles/meeting' import hasToken from '../utils/hasToken' @@ -10,6 +10,7 @@ import DemoCreateAccountButton from './DemoCreateAccountButton' import PlainButton from './PlainButton/PlainButton' import SidebarToggle from './SidebarToggle' import MeetingOptions from './MeetingOptions' +import RetroDrawer from './RetroDrawer' const localHeaderBreakpoint = makeMinWidthMediaQuery(600) @@ -163,6 +164,8 @@ const MeetingTopBar = (props: Props) => { } = props const showButton = isDemoRoute() && !hasToken() const showDiscussionButton = toggleDrawer && !isRightDrawerOpen + const [showDrawer, setShowDrawer] = useState(false) + return ( @@ -178,7 +181,7 @@ const MeetingTopBar = (props: Props) => { )} {avatarGroup} - + {showDiscussionButton && toggleDrawer && ( @@ -190,6 +193,7 @@ const MeetingTopBar = (props: Props) => { )} + ) } diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx new file mode 100644 index 00000000000..c6ee8ffcf0f --- /dev/null +++ b/packages/client/components/RetroDrawer.tsx @@ -0,0 +1,39 @@ +import {Close} from '@mui/icons-material' +import React from 'react' +import {DiscussionThreadEnum} from '../types/constEnums' +import ResponsiveDashSidebar from './ResponsiveDashSidebar' +import {Drawer} from './TeamPrompt/TeamPromptDrawer' + +interface Props { + setShowDrawer: (showDrawer: boolean) => void + showDrawer: boolean +} + +const RetroDrawer = (props: Props) => { + const {showDrawer, setShowDrawer} = props + + const toggleDrawer = () => { + setShowDrawer(!showDrawer) + } + + return ( + {}} + sidebarWidth={DiscussionThreadEnum.WIDTH} + > + +
+
+
Templates
+
+ +
+
+
+ + + ) +} +export default RetroDrawer diff --git a/packages/client/components/TeamPrompt/TeamPromptDrawer.tsx b/packages/client/components/TeamPrompt/TeamPromptDrawer.tsx index f4343cf89ce..8698ce12919 100644 --- a/packages/client/components/TeamPrompt/TeamPromptDrawer.tsx +++ b/packages/client/components/TeamPrompt/TeamPromptDrawer.tsx @@ -13,7 +13,7 @@ import useBreakpoint from '../../hooks/useBreakpoint' import findStageById from '../../utils/meetings/findStageById' import SendClientSideEvent from '../../mutations/SendClientSideEvent' -const Drawer = styled('div')<{isDesktop: boolean; isMobile: boolean; isOpen: boolean}>( +export const Drawer = styled('div')<{isDesktop: boolean; isMobile: boolean; isOpen: boolean}>( ({isDesktop, isMobile, isOpen}) => ({ boxShadow: isDesktop ? desktopSidebarShadow : undefined, backgroundColor: '#FFFFFF', From 3b10b2d2563d1b079f3ac3c9f167c6ac75bed1d9 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 17:28:35 +0000 Subject: [PATCH 04/20] implement RetroDrawerTemplateCard and get templates showing up --- packages/client/components/MeetingTopBar.tsx | 4 +- packages/client/components/RetroDrawer.tsx | 30 +++++++++- .../client/components/RetroDrawerRoot.tsx | 23 ++++++++ .../components/RetroDrawerTemplateCard.tsx | 58 +++++++++++++++++++ 4 files changed, 111 insertions(+), 4 deletions(-) create mode 100644 packages/client/components/RetroDrawerRoot.tsx create mode 100644 packages/client/components/RetroDrawerTemplateCard.tsx diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index ae376e6bf9d..3d0ac94054b 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -10,7 +10,7 @@ import DemoCreateAccountButton from './DemoCreateAccountButton' import PlainButton from './PlainButton/PlainButton' import SidebarToggle from './SidebarToggle' import MeetingOptions from './MeetingOptions' -import RetroDrawer from './RetroDrawer' +import RetroDrawerRoot from './RetroDrawerRoot' const localHeaderBreakpoint = makeMinWidthMediaQuery(600) @@ -193,7 +193,7 @@ const MeetingTopBar = (props: Props) => { )} - + ) } diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx index c6ee8ffcf0f..3e1faa28cdc 100644 --- a/packages/client/components/RetroDrawer.tsx +++ b/packages/client/components/RetroDrawer.tsx @@ -1,16 +1,39 @@ import {Close} from '@mui/icons-material' +import graphql from 'babel-plugin-relay/macro' import React from 'react' +import {usePreloadedQuery} from 'react-relay' import {DiscussionThreadEnum} from '../types/constEnums' import ResponsiveDashSidebar from './ResponsiveDashSidebar' +import RetroDrawerTemplateCard from './RetroDrawerTemplateCard' import {Drawer} from './TeamPrompt/TeamPromptDrawer' +import retroDrawerQuery, {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' interface Props { setShowDrawer: (showDrawer: boolean) => void showDrawer: boolean + queryRef: any } const RetroDrawer = (props: Props) => { - const {showDrawer, setShowDrawer} = props + const {queryRef, showDrawer, setShowDrawer} = props + const data = usePreloadedQuery( + graphql` + query RetroDrawerQuery($first: Int!) { + viewer { + availableTemplates(first: $first) @connection(key: "RetroDrawer_availableTemplates") { + edges { + node { + ...RetroDrawerTemplateCard_template + id + } + } + } + } + } + `, + queryRef + ) + const templates = data.viewer.availableTemplates.edges const toggleDrawer = () => { setShowDrawer(!showDrawer) @@ -26,11 +49,14 @@ const RetroDrawer = (props: Props) => {
-
Templates
+
Templates
+ {templates.map((template) => ( + + ))}
diff --git a/packages/client/components/RetroDrawerRoot.tsx b/packages/client/components/RetroDrawerRoot.tsx new file mode 100644 index 00000000000..534aeb79829 --- /dev/null +++ b/packages/client/components/RetroDrawerRoot.tsx @@ -0,0 +1,23 @@ +import React, {Suspense} from 'react' +import useQueryLoaderNow from '../hooks/useQueryLoaderNow' +import retroDrawerQuery, {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' +import RetroDrawer from './RetroDrawer' + +type Props = { + showDrawer: boolean + setShowDrawer: (showDrawer: boolean) => void +} + +const RetroDrawerRoot = (props: Props) => { + const {showDrawer, setShowDrawer} = props + const queryRef = useQueryLoaderNow(retroDrawerQuery, {first: 200}) + return ( + + {queryRef && ( + + )} + + ) +} + +export default RetroDrawerRoot diff --git a/packages/client/components/RetroDrawerTemplateCard.tsx b/packages/client/components/RetroDrawerTemplateCard.tsx new file mode 100644 index 00000000000..41ecd63d302 --- /dev/null +++ b/packages/client/components/RetroDrawerTemplateCard.tsx @@ -0,0 +1,58 @@ +import {ActivityBadge} from './ActivityLibrary/ActivityBadge' +import {ActivityLibraryCardDescription} from './ActivityLibrary/ActivityLibraryCardDescription' +import graphql from 'babel-plugin-relay/macro' +import React from 'react' +import {useFragment, usePreloadedQuery} from 'react-relay' +import {ActivityLibraryCard} from './ActivityLibrary/ActivityLibraryCard' +import {ActivityCardImage} from './ActivityLibrary/ActivityCard' +import {CategoryID, CATEGORY_THEMES} from '././ActivityLibrary/Categories' + +interface Props { + templateRef: any +} + +const RetroDrawerTemplateCard = (props: Props) => { + const {templateRef} = props + const template = useFragment( + graphql` + fragment RetroDrawerTemplateCard_template on MeetingTemplate { + ...ActivityLibraryCardDescription_template + id + teamId + team { + name + } + name + type + category + illustrationUrl + isRecommended + isFree + } + `, + templateRef + ) + + return ( +
+ Premium + ) : null + } + > + + + +
+ ) +} +export default RetroDrawerTemplateCard From 4438b6f5d7690840ef4a63c7df9acf60718d4c48 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 17:47:49 +0000 Subject: [PATCH 05/20] filter templates on server by meeting type --- packages/client/components/RetroDrawer.tsx | 9 +++++---- packages/client/components/RetroDrawerRoot.tsx | 5 ++++- packages/client/components/RetroDrawerTemplateCard.tsx | 4 ++-- packages/server/graphql/public/typeDefs/User.graphql | 4 ++++ packages/server/graphql/public/types/User.ts | 3 ++- 5 files changed, 17 insertions(+), 8 deletions(-) diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx index 3e1faa28cdc..7077db4a354 100644 --- a/packages/client/components/RetroDrawer.tsx +++ b/packages/client/components/RetroDrawer.tsx @@ -6,7 +6,7 @@ import {DiscussionThreadEnum} from '../types/constEnums' import ResponsiveDashSidebar from './ResponsiveDashSidebar' import RetroDrawerTemplateCard from './RetroDrawerTemplateCard' import {Drawer} from './TeamPrompt/TeamPromptDrawer' -import retroDrawerQuery, {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' +import {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' interface Props { setShowDrawer: (showDrawer: boolean) => void @@ -18,9 +18,10 @@ const RetroDrawer = (props: Props) => { const {queryRef, showDrawer, setShowDrawer} = props const data = usePreloadedQuery( graphql` - query RetroDrawerQuery($first: Int!) { + query RetroDrawerQuery($first: Int!, $type: MeetingTypeEnum!) { viewer { - availableTemplates(first: $first) @connection(key: "RetroDrawer_availableTemplates") { + availableTemplates(first: $first, type: $type) + @connection(key: "RetroDrawer_availableTemplates") { edges { node { ...RetroDrawerTemplateCard_template @@ -46,7 +47,7 @@ const RetroDrawer = (props: Props) => { onToggle={() => {}} sidebarWidth={DiscussionThreadEnum.WIDTH} > - +
Templates
diff --git a/packages/client/components/RetroDrawerRoot.tsx b/packages/client/components/RetroDrawerRoot.tsx index 534aeb79829..f38fb27ead6 100644 --- a/packages/client/components/RetroDrawerRoot.tsx +++ b/packages/client/components/RetroDrawerRoot.tsx @@ -10,7 +10,10 @@ type Props = { const RetroDrawerRoot = (props: Props) => { const {showDrawer, setShowDrawer} = props - const queryRef = useQueryLoaderNow(retroDrawerQuery, {first: 200}) + const queryRef = useQueryLoaderNow(retroDrawerQuery, { + first: 200, + type: 'retrospective' + }) return ( {queryRef && ( diff --git a/packages/client/components/RetroDrawerTemplateCard.tsx b/packages/client/components/RetroDrawerTemplateCard.tsx index 41ecd63d302..c88a2c80647 100644 --- a/packages/client/components/RetroDrawerTemplateCard.tsx +++ b/packages/client/components/RetroDrawerTemplateCard.tsx @@ -2,7 +2,7 @@ import {ActivityBadge} from './ActivityLibrary/ActivityBadge' import {ActivityLibraryCardDescription} from './ActivityLibrary/ActivityLibraryCardDescription' import graphql from 'babel-plugin-relay/macro' import React from 'react' -import {useFragment, usePreloadedQuery} from 'react-relay' +import {useFragment} from 'react-relay' import {ActivityLibraryCard} from './ActivityLibrary/ActivityLibraryCard' import {ActivityCardImage} from './ActivityLibrary/ActivityCard' import {CategoryID, CATEGORY_THEMES} from '././ActivityLibrary/Categories' @@ -36,7 +36,7 @@ const RetroDrawerTemplateCard = (props: Props) => { return (
{ + availableTemplates: async ({id: userId}, {first, after, type}, {authToken, dataLoader}) => { const viewerId = getUserId(authToken) const user = await dataLoader.get('users').loadNonNull(userId) const teamIds = @@ -174,6 +174,7 @@ const User: UserResolvers = { ...activity, sortOrder: getScore(activity, teamIds) })) + .filter((activity) => !type || activity.type === type) .sort((a, b) => (a.sortOrder > b.sortOrder ? -1 : 1)) return connectionFromTemplateArray(allActivities, first, after) From 41e2c3bd29a2495f0079ae72fef2c9e4794a20bb Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 17:57:13 +0000 Subject: [PATCH 06/20] fix mobile --- packages/client/components/RetroDrawer.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx index 7077db4a354..aa681597143 100644 --- a/packages/client/components/RetroDrawer.tsx +++ b/packages/client/components/RetroDrawer.tsx @@ -1,17 +1,18 @@ import {Close} from '@mui/icons-material' import graphql from 'babel-plugin-relay/macro' import React from 'react' -import {usePreloadedQuery} from 'react-relay' -import {DiscussionThreadEnum} from '../types/constEnums' +import {PreloadedQuery, usePreloadedQuery} from 'react-relay' +import {Breakpoint, DiscussionThreadEnum} from '../types/constEnums' import ResponsiveDashSidebar from './ResponsiveDashSidebar' import RetroDrawerTemplateCard from './RetroDrawerTemplateCard' import {Drawer} from './TeamPrompt/TeamPromptDrawer' import {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' +import useBreakpoint from '../hooks/useBreakpoint' interface Props { setShowDrawer: (showDrawer: boolean) => void showDrawer: boolean - queryRef: any + queryRef: PreloadedQuery } const RetroDrawer = (props: Props) => { @@ -34,7 +35,10 @@ const RetroDrawer = (props: Props) => { `, queryRef ) + const templates = data.viewer.availableTemplates.edges + const isMobile = !useBreakpoint(Breakpoint.FUZZY_TABLET) + const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT) const toggleDrawer = () => { setShowDrawer(!showDrawer) @@ -44,10 +48,15 @@ const RetroDrawer = (props: Props) => { {}} + onToggle={toggleDrawer} sidebarWidth={DiscussionThreadEnum.WIDTH} > - +
Templates
From c4bc28fd7528a756056a2783ca7e5a8403680fc4 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 18:03:39 +0000 Subject: [PATCH 07/20] only show options in reflect phase --- packages/client/components/MeetingOptions.tsx | 4 +++- packages/client/components/MeetingTopBar.tsx | 10 ++++++++-- .../components/RetroReflectPhase/RetroReflectPhase.tsx | 1 + 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 212eb252e79..192c0755eb5 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -8,15 +8,17 @@ import {OptionsButton} from './TeamPrompt/TeamPromptOptions' type Props = { setShowDrawer: (showDrawer: boolean) => void showDrawer: boolean + isReflectPhase?: boolean } const MeetingOptions = (props: Props) => { - const {setShowDrawer, showDrawer} = props + const {setShowDrawer, showDrawer, isReflectPhase} = props const handleClick = () => { setShowDrawer(!showDrawer) } + if (!isReflectPhase) return null return ( void toggleDrawer?: () => void + isReflectPhase?: boolean } const MeetingTopBar = (props: Props) => { @@ -160,7 +161,8 @@ const MeetingTopBar = (props: Props) => { isMeetingSidebarCollapsed, isRightDrawerOpen, toggleDrawer, - toggleSidebar + toggleSidebar, + isReflectPhase = false } = props const showButton = isDemoRoute() && !hasToken() const showDiscussionButton = toggleDrawer && !isRightDrawerOpen @@ -181,7 +183,11 @@ const MeetingTopBar = (props: Props) => { )} {avatarGroup} - + {showDiscussionButton && toggleDrawer && ( diff --git a/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx b/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx index 74a5f422cb3..b856bc70e87 100644 --- a/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx +++ b/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx @@ -59,6 +59,7 @@ const RetroReflectPhase = (props: Props) => { Date: Wed, 1 Nov 2023 18:41:47 +0000 Subject: [PATCH 08/20] move meeting options to retroDrawer --- packages/client/components/MeetingOptions.tsx | 6 +- packages/client/components/MeetingTopBar.tsx | 18 ++--- packages/client/components/RetroDrawer.tsx | 75 +++++++++++++------ .../client/components/RetroDrawerRoot.tsx | 6 +- .../RetroReflectPhase/RetroReflectPhase.tsx | 3 +- 5 files changed, 69 insertions(+), 39 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 192c0755eb5..01cd8265079 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -8,17 +8,16 @@ import {OptionsButton} from './TeamPrompt/TeamPromptOptions' type Props = { setShowDrawer: (showDrawer: boolean) => void showDrawer: boolean - isReflectPhase?: boolean + hasReflections: boolean } const MeetingOptions = (props: Props) => { - const {setShowDrawer, showDrawer, isReflectPhase} = props + const {setShowDrawer, showDrawer, hasReflections} = props const handleClick = () => { setShowDrawer(!showDrawer) } - if (!isReflectPhase) return null return ( { value='template' label='Change template' onClick={handleClick} + isDisabled={hasReflections} icon={} /> diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index d2e1b801415..6bbe89c3818 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -9,7 +9,6 @@ import makeMinWidthMediaQuery from '../utils/makeMinWidthMediaQuery' import DemoCreateAccountButton from './DemoCreateAccountButton' import PlainButton from './PlainButton/PlainButton' import SidebarToggle from './SidebarToggle' -import MeetingOptions from './MeetingOptions' import RetroDrawerRoot from './RetroDrawerRoot' const localHeaderBreakpoint = makeMinWidthMediaQuery(600) @@ -150,7 +149,7 @@ interface Props { isRightDrawerOpen?: boolean toggleSidebar: () => void toggleDrawer?: () => void - isReflectPhase?: boolean + meetingId?: string } const MeetingTopBar = (props: Props) => { @@ -162,7 +161,7 @@ const MeetingTopBar = (props: Props) => { isRightDrawerOpen, toggleDrawer, toggleSidebar, - isReflectPhase = false + meetingId } = props const showButton = isDemoRoute() && !hasToken() const showDiscussionButton = toggleDrawer && !isRightDrawerOpen @@ -183,11 +182,13 @@ const MeetingTopBar = (props: Props) => { )} {avatarGroup} - + {meetingId && ( + + )} {showDiscussionButton && toggleDrawer && ( @@ -199,7 +200,6 @@ const MeetingTopBar = (props: Props) => { )} - ) } diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx index aa681597143..4c88a53f4ec 100644 --- a/packages/client/components/RetroDrawer.tsx +++ b/packages/client/components/RetroDrawer.tsx @@ -4,6 +4,7 @@ import React from 'react' import {PreloadedQuery, usePreloadedQuery} from 'react-relay' import {Breakpoint, DiscussionThreadEnum} from '../types/constEnums' import ResponsiveDashSidebar from './ResponsiveDashSidebar' +import MeetingOptions from './MeetingOptions' import RetroDrawerTemplateCard from './RetroDrawerTemplateCard' import {Drawer} from './TeamPrompt/TeamPromptDrawer' import {RetroDrawerQuery} from '../__generated__/RetroDrawerQuery.graphql' @@ -17,10 +18,22 @@ interface Props { const RetroDrawer = (props: Props) => { const {queryRef, showDrawer, setShowDrawer} = props - const data = usePreloadedQuery( + const {viewer} = usePreloadedQuery( graphql` - query RetroDrawerQuery($first: Int!, $type: MeetingTypeEnum!) { + query RetroDrawerQuery($first: Int!, $type: MeetingTypeEnum!, $meetingId: ID!) { viewer { + meeting(meetingId: $meetingId) { + ... on RetrospectiveMeeting { + reflectionGroups { + id + } + localPhase { + ... on ReflectPhase { + phaseType + } + } + } + } availableTemplates(first: $first, type: $type) @connection(key: "RetroDrawer_availableTemplates") { edges { @@ -36,7 +49,10 @@ const RetroDrawer = (props: Props) => { queryRef ) - const templates = data.viewer.availableTemplates.edges + const templates = viewer.availableTemplates.edges + const meeting = viewer.meeting + const hasReflections = !!(meeting?.reflectionGroups && meeting.reflectionGroups.length > 0) + const phaseType = meeting?.localPhase?.phaseType const isMobile = !useBreakpoint(Breakpoint.FUZZY_TABLET) const isDesktop = useBreakpoint(Breakpoint.SIDEBAR_LEFT) @@ -44,32 +60,43 @@ const RetroDrawer = (props: Props) => { setShowDrawer(!showDrawer) } + if (!phaseType || phaseType !== 'reflect') return null return ( - - + + -
-
-
Templates
-
- + +
+
+
Templates
+
+ +
+ {templates.map((template) => ( + + ))}
- {templates.map((template) => ( - - ))} -
- - + + + ) } export default RetroDrawer diff --git a/packages/client/components/RetroDrawerRoot.tsx b/packages/client/components/RetroDrawerRoot.tsx index f38fb27ead6..58bf63544ff 100644 --- a/packages/client/components/RetroDrawerRoot.tsx +++ b/packages/client/components/RetroDrawerRoot.tsx @@ -6,13 +6,15 @@ import RetroDrawer from './RetroDrawer' type Props = { showDrawer: boolean setShowDrawer: (showDrawer: boolean) => void + meetingId: string } const RetroDrawerRoot = (props: Props) => { - const {showDrawer, setShowDrawer} = props + const {showDrawer, setShowDrawer, meetingId} = props const queryRef = useQueryLoaderNow(retroDrawerQuery, { first: 200, - type: 'retrospective' + type: 'retrospective', + meetingId }) return ( diff --git a/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx b/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx index b856bc70e87..493ae73247c 100644 --- a/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx +++ b/packages/client/components/RetroReflectPhase/RetroReflectPhase.tsx @@ -30,6 +30,7 @@ const RetroReflectPhase = (props: Props) => { ...StageTimerDisplay_meeting ...StageTimerControl_meeting ...PhaseItemColumn_meeting + id endedAt localPhase { ...RetroReflectPhase_phase @relay(mask: false) @@ -59,7 +60,7 @@ const RetroReflectPhase = (props: Props) => { Date: Wed, 1 Nov 2023 18:45:41 +0000 Subject: [PATCH 09/20] add tooltip for disabled options menu item --- packages/client/components/MeetingOptions.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 01cd8265079..2f3bde949c0 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -4,6 +4,8 @@ import {Menu} from '../ui/Menu/Menu' import {MenuItem} from '../ui/Menu/MenuItem' import SwapHorizIcon from '@mui/icons-material/SwapHoriz' import {OptionsButton} from './TeamPrompt/TeamPromptOptions' +import useTooltip from '../hooks/useTooltip' +import {MenuPosition} from '../hooks/useCoords' type Props = { setShowDrawer: (showDrawer: boolean) => void @@ -13,6 +15,9 @@ type Props = { const MeetingOptions = (props: Props) => { const {setShowDrawer, showDrawer, hasReflections} = props + const {openTooltip, tooltipPortal, originRef, closeTooltip} = useTooltip( + MenuPosition.UPPER_CENTER + ) const handleClick = () => { setShowDrawer(!showDrawer) @@ -27,13 +32,16 @@ const MeetingOptions = (props: Props) => { } > - } - /> +
+ } + /> +
+ {tooltipPortal('You can only change the template before reflections have been added.')}
) } From 237b96c0fb240fed95914d283f00bec679849a4f Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 18:48:17 +0000 Subject: [PATCH 10/20] handle mouse enter and leave --- packages/client/components/MeetingOptions.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 2f3bde949c0..35928fca7a0 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -23,6 +23,16 @@ const MeetingOptions = (props: Props) => { setShowDrawer(!showDrawer) } + const handleMouseEnter = () => { + if (hasReflections) { + openTooltip() + } + } + + const handleMouseLeave = () => { + closeTooltip() + } + return ( { } > -
+
Date: Wed, 1 Nov 2023 18:51:47 +0000 Subject: [PATCH 11/20] reduce menu item padding --- packages/client/ui/Menu/MenuItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index 4589465c4d6..00e88c820e4 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -14,7 +14,7 @@ export const MenuItem: React.FC = (props: MenuItemProps) => { return ( !isDisabled && onClick(value)} From e2c44b5e0dc1cb3eb42f36e3a5ea9abf20a912f4 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Wed, 1 Nov 2023 18:56:25 +0000 Subject: [PATCH 12/20] clean up --- .../client/components/MeetingOptionsMenu.tsx | 73 ------------------- .../components/RetroDrawerTemplateCard.tsx | 11 +-- 2 files changed, 2 insertions(+), 82 deletions(-) delete mode 100644 packages/client/components/MeetingOptionsMenu.tsx diff --git a/packages/client/components/MeetingOptionsMenu.tsx b/packages/client/components/MeetingOptionsMenu.tsx deleted file mode 100644 index cbc8f70ac24..00000000000 --- a/packages/client/components/MeetingOptionsMenu.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import styled from '@emotion/styled' -import {Flag, Link as MuiLink, OpenInNew, Replay} from '@mui/icons-material' -import React from 'react' -import {PALETTE} from '../styles/paletteV3' -import Menu from './Menu' -import MenuItem from './MenuItem' -import {MenuItemLabelStyle} from './MenuItemLabel' - -const LinkIcon = styled(MuiLink)({ - color: PALETTE.SLATE_600, - marginRight: 8 -}) - -const ReplayIcon = styled(Replay)({ - color: PALETTE.SLATE_600, - marginRight: 8 -}) - -const FlagIcon = styled(Flag)({ - color: PALETTE.SLATE_600, - marginRight: 8 -}) - -const OptionMenuItem = styled('div')({ - ...MenuItemLabelStyle, - width: '240px' -}) - -const MeetingOptionsMenu = () => { - return ( - - - - Copy meeting permalink - - } - /> - - - {'Edit recurrence settings'} - - } - /> - - - Configure Slack - - - } - /> - - - {'End this meeting'} - - } - /> - - ) -} - -export default MeetingOptionsMenu diff --git a/packages/client/components/RetroDrawerTemplateCard.tsx b/packages/client/components/RetroDrawerTemplateCard.tsx index c88a2c80647..4f4700f9c80 100644 --- a/packages/client/components/RetroDrawerTemplateCard.tsx +++ b/packages/client/components/RetroDrawerTemplateCard.tsx @@ -5,10 +5,11 @@ import React from 'react' import {useFragment} from 'react-relay' import {ActivityLibraryCard} from './ActivityLibrary/ActivityLibraryCard' import {ActivityCardImage} from './ActivityLibrary/ActivityCard' +import {RetroDrawerTemplateCard_template$key} from '~/__generated__/RetroDrawerTemplateCard_template.graphql' import {CategoryID, CATEGORY_THEMES} from '././ActivityLibrary/Categories' interface Props { - templateRef: any + templateRef: RetroDrawerTemplateCard_template$key } const RetroDrawerTemplateCard = (props: Props) => { @@ -17,16 +18,9 @@ const RetroDrawerTemplateCard = (props: Props) => { graphql` fragment RetroDrawerTemplateCard_template on MeetingTemplate { ...ActivityLibraryCardDescription_template - id - teamId - team { - name - } name - type category illustrationUrl - isRecommended isFree } `, @@ -37,7 +31,6 @@ const RetroDrawerTemplateCard = (props: Props) => {
Date: Mon, 6 Nov 2023 14:41:53 +0000 Subject: [PATCH 13/20] add twMerge to menu and menu item --- packages/client/components/MeetingOptions.tsx | 5 +-- packages/client/ui/Menu/Menu.tsx | 16 +++++---- packages/client/ui/Menu/MenuItem.tsx | 35 +++++++++++-------- 3 files changed, 32 insertions(+), 24 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 35928fca7a0..80bf643ac42 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -45,11 +45,12 @@ const MeetingOptions = (props: Props) => {
} - /> + > + Change template +
{tooltipPortal('You can only change the template before reflections have been added.')}
diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index 50fe65c8d74..b432fbab260 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -1,23 +1,25 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import React from 'react' +import {twMerge} from 'tailwind-merge' interface MenuProps { trigger: React.ReactNode + children: React.ReactNode } -export const Menu: React.FC = ({trigger, children}) => { +export const Menu = React.forwardRef(({trigger, children}, ref) => { + const contentClass = twMerge( + 'border-rad w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none' + ) + return ( {trigger} - + {children} ) -} +}) diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index 00e88c820e4..31e8481af1e 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -1,26 +1,31 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import React from 'react' +import {twMerge} from 'tailwind-merge' interface MenuItemProps { value: string - label: string onClick: (value: string) => void isDisabled?: boolean icon?: React.ReactNode + children: React.ReactNode } -export const MenuItem: React.FC = (props: MenuItemProps) => { - const {value, label, onClick, isDisabled, icon} = props +export const MenuItem = React.forwardRef( + ({value, onClick, isDisabled, icon, children}, ref) => { + const itemClass = twMerge( + 'flex w-full items-center rounded-md px-4 py-3 text-sm text-slate-700 outline-none hover:bg-slate-100 focus:bg-slate-100', + isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' + ) - return ( - !isDisabled && onClick(value)} - > - {icon &&
{icon}
} - {label} - - ) -} + return ( + !isDisabled && onClick(value)} + ref={ref} + > + {icon &&
{icon}
} + {children} + + ) + } +) From 18d88bc951f883c5e40cd3cc2262e8d81962f976 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Mon, 6 Nov 2023 15:47:16 +0000 Subject: [PATCH 14/20] remove icon prop --- packages/client/components/MeetingOptions.tsx | 9 +++------ packages/client/ui/Menu/MenuItem.tsx | 15 ++++----------- packages/client/ui/Tooltip/TooltipContent.tsx | 2 +- packages/client/ui/Tooltip/TooltipTrigger.tsx | 2 +- .../ui/{fordwardRadix.tsx => forwardRadix.tsx} | 0 5 files changed, 9 insertions(+), 19 deletions(-) rename packages/client/ui/{fordwardRadix.tsx => forwardRadix.tsx} (100%) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 80bf643ac42..6662988d0b2 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -20,6 +20,7 @@ const MeetingOptions = (props: Props) => { ) const handleClick = () => { + if (hasReflections) return setShowDrawer(!showDrawer) } @@ -43,12 +44,8 @@ const MeetingOptions = (props: Props) => { } >
- } - > + +
{}
Change template
diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index 31e8481af1e..b039416c3ad 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -3,27 +3,20 @@ import React from 'react' import {twMerge} from 'tailwind-merge' interface MenuItemProps { - value: string - onClick: (value: string) => void + onClick: (event: Event) => void isDisabled?: boolean - icon?: React.ReactNode children: React.ReactNode } export const MenuItem = React.forwardRef( - ({value, onClick, isDisabled, icon, children}, ref) => { + ({onClick, isDisabled, children}, ref) => { const itemClass = twMerge( 'flex w-full items-center rounded-md px-4 py-3 text-sm text-slate-700 outline-none hover:bg-slate-100 focus:bg-slate-100', - isDisabled ? 'cursor-not-allowed' : 'cursor-pointer' + isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' ) return ( - !isDisabled && onClick(value)} - ref={ref} - > - {icon &&
{icon}
} + {children} ) diff --git a/packages/client/ui/Tooltip/TooltipContent.tsx b/packages/client/ui/Tooltip/TooltipContent.tsx index 03f77bea4ef..c119f4a2b70 100644 --- a/packages/client/ui/Tooltip/TooltipContent.tsx +++ b/packages/client/ui/Tooltip/TooltipContent.tsx @@ -1,7 +1,7 @@ import {Content, Portal} from '@radix-ui/react-tooltip' import * as React from 'react' import {twMerge} from 'tailwind-merge' -import {forwardRadix} from '../fordwardRadix' +import {forwardRadix} from '../forwardRadix' export const TooltipContent = forwardRadix( ({className, children, ...props}, ref) => ( diff --git a/packages/client/ui/Tooltip/TooltipTrigger.tsx b/packages/client/ui/Tooltip/TooltipTrigger.tsx index b364812034c..2a0b7b0ca36 100644 --- a/packages/client/ui/Tooltip/TooltipTrigger.tsx +++ b/packages/client/ui/Tooltip/TooltipTrigger.tsx @@ -1,6 +1,6 @@ import {Trigger} from '@radix-ui/react-tooltip' import * as React from 'react' -import {forwardRadix} from '../fordwardRadix' +import {forwardRadix} from '../forwardRadix' export const TooltipTrigger = forwardRadix( ({className, children, ...props}, ref) => ( diff --git a/packages/client/ui/fordwardRadix.tsx b/packages/client/ui/forwardRadix.tsx similarity index 100% rename from packages/client/ui/fordwardRadix.tsx rename to packages/client/ui/forwardRadix.tsx From 011b6184548a670b82a5daaedd4d5e6e89602c13 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Mon, 6 Nov 2023 16:01:05 +0000 Subject: [PATCH 15/20] add radix tooltip --- packages/client/components/MeetingOptions.tsx | 35 +++++++++++-------- 1 file changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index 6662988d0b2..d32bb71a6d3 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -1,11 +1,12 @@ -import React from 'react' +import React, {useState} from 'react' import IconLabel from './IconLabel' import {Menu} from '../ui/Menu/Menu' import {MenuItem} from '../ui/Menu/MenuItem' import SwapHorizIcon from '@mui/icons-material/SwapHoriz' import {OptionsButton} from './TeamPrompt/TeamPromptOptions' -import useTooltip from '../hooks/useTooltip' -import {MenuPosition} from '../hooks/useCoords' +import {Tooltip} from '../ui/Tooltip/Tooltip' +import {TooltipTrigger} from '../ui/Tooltip/TooltipTrigger' +import {TooltipContent} from '../ui/Tooltip/TooltipContent' type Props = { setShowDrawer: (showDrawer: boolean) => void @@ -15,9 +16,7 @@ type Props = { const MeetingOptions = (props: Props) => { const {setShowDrawer, showDrawer, hasReflections} = props - const {openTooltip, tooltipPortal, originRef, closeTooltip} = useTooltip( - MenuPosition.UPPER_CENTER - ) + const [isOpen, setIsOpen] = useState(false) const handleClick = () => { if (hasReflections) return @@ -26,12 +25,12 @@ const MeetingOptions = (props: Props) => { const handleMouseEnter = () => { if (hasReflections) { - openTooltip() + setIsOpen(true) } } const handleMouseLeave = () => { - closeTooltip() + setIsOpen(false) } return ( @@ -43,13 +42,19 @@ const MeetingOptions = (props: Props) => { } > -
- -
{}
- Change template - -
- {tooltipPortal('You can only change the template before reflections have been added.')} + +
+ + +
{}
+ Change template + + +
+ + {'You can only change the template before reflections have been added.'} + + ) } From fa0d1eecb438c9739735618fe24006e1f9a71743 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Mon, 6 Nov 2023 17:22:43 +0000 Subject: [PATCH 16/20] dont show options btn in demo --- packages/client/components/MeetingTopBar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index 6bbe89c3818..b00132fc397 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -166,6 +166,7 @@ const MeetingTopBar = (props: Props) => { const showButton = isDemoRoute() && !hasToken() const showDiscussionButton = toggleDrawer && !isRightDrawerOpen const [showDrawer, setShowDrawer] = useState(false) + const isOptionsVisible = !!meetingId && !isDemoRoute return ( @@ -182,7 +183,7 @@ const MeetingTopBar = (props: Props) => { )} {avatarGroup} - {meetingId && ( + {isOptionsVisible && ( Date: Mon, 6 Nov 2023 17:26:46 +0000 Subject: [PATCH 17/20] clean up --- packages/client/components/MeetingTopBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/components/MeetingTopBar.tsx b/packages/client/components/MeetingTopBar.tsx index b00132fc397..287a53012b4 100644 --- a/packages/client/components/MeetingTopBar.tsx +++ b/packages/client/components/MeetingTopBar.tsx @@ -166,7 +166,7 @@ const MeetingTopBar = (props: Props) => { const showButton = isDemoRoute() && !hasToken() const showDiscussionButton = toggleDrawer && !isRightDrawerOpen const [showDrawer, setShowDrawer] = useState(false) - const isOptionsVisible = !!meetingId && !isDemoRoute + const isOptionsVisible = !!meetingId && !isDemoRoute() return ( From 6f71f35adc93023cc1cb6c33b6c5cff835b77351 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Tue, 7 Nov 2023 16:58:19 +0000 Subject: [PATCH 18/20] close drawer once reflections have been added --- packages/client/components/RetroDrawer.tsx | 8 ++++- packages/client/ui/Menu/Menu.tsx | 34 ++++++++++++---------- packages/client/ui/Menu/MenuItem.tsx | 6 ++-- 3 files changed, 30 insertions(+), 18 deletions(-) diff --git a/packages/client/components/RetroDrawer.tsx b/packages/client/components/RetroDrawer.tsx index 4c88a53f4ec..8d6404ada0e 100644 --- a/packages/client/components/RetroDrawer.tsx +++ b/packages/client/components/RetroDrawer.tsx @@ -1,6 +1,6 @@ import {Close} from '@mui/icons-material' import graphql from 'babel-plugin-relay/macro' -import React from 'react' +import React, {useEffect} from 'react' import {PreloadedQuery, usePreloadedQuery} from 'react-relay' import {Breakpoint, DiscussionThreadEnum} from '../types/constEnums' import ResponsiveDashSidebar from './ResponsiveDashSidebar' @@ -60,6 +60,12 @@ const RetroDrawer = (props: Props) => { setShowDrawer(!showDrawer) } + useEffect(() => { + if (hasReflections && showDrawer) { + setShowDrawer(false) + } + }, [hasReflections]) + if (!phaseType || phaseType !== 'reflect') return null return ( <> diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index b432fbab260..bd500a57b69 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -4,22 +4,26 @@ import {twMerge} from 'tailwind-merge' interface MenuProps { trigger: React.ReactNode + className?: string children: React.ReactNode } -export const Menu = React.forwardRef(({trigger, children}, ref) => { - const contentClass = twMerge( - 'border-rad w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none' - ) +export const Menu = React.forwardRef( + ({trigger, className, children}, ref) => { + const contentClass = twMerge( + 'border-rad w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none', + className + ) - return ( - - {trigger} - - - {children} - - - - ) -}) + return ( + + {trigger} + + + {children} + + + + ) + } +) diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index b039416c3ad..20bca1b5cd4 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -5,14 +5,16 @@ import {twMerge} from 'tailwind-merge' interface MenuItemProps { onClick: (event: Event) => void isDisabled?: boolean + className?: string children: React.ReactNode } export const MenuItem = React.forwardRef( - ({onClick, isDisabled, children}, ref) => { + ({onClick, isDisabled, className, children}, ref) => { const itemClass = twMerge( 'flex w-full items-center rounded-md px-4 py-3 text-sm text-slate-700 outline-none hover:bg-slate-100 focus:bg-slate-100', - isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' + isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', + className ) return ( From fcab9cecb34d1510777767c8166fe0228c928e6c Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Mon, 13 Nov 2023 14:46:08 +0000 Subject: [PATCH 19/20] update tooltip copy --- packages/client/components/MeetingOptions.tsx | 2 +- packages/client/ui/Menu/Menu.tsx | 15 +++++++++------ packages/client/ui/Menu/MenuItem.tsx | 16 +++++++++------- 3 files changed, 19 insertions(+), 14 deletions(-) diff --git a/packages/client/components/MeetingOptions.tsx b/packages/client/components/MeetingOptions.tsx index d32bb71a6d3..d0fd3d97a7c 100644 --- a/packages/client/components/MeetingOptions.tsx +++ b/packages/client/components/MeetingOptions.tsx @@ -52,7 +52,7 @@ const MeetingOptions = (props: Props) => {
- {'You can only change the template before reflections have been added.'} + {'You can only change the template if no reflections have been added.'} diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index bd500a57b69..47afbbbf35b 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -10,16 +10,19 @@ interface MenuProps { export const Menu = React.forwardRef( ({trigger, className, children}, ref) => { - const contentClass = twMerge( - 'border-rad w-auto min-w-[200px] max-w-[400px] rounded-md bg-white shadow-lg outline-none', - className - ) - return ( {trigger} - + {children} diff --git a/packages/client/ui/Menu/MenuItem.tsx b/packages/client/ui/Menu/MenuItem.tsx index 20bca1b5cd4..fe117676eb0 100644 --- a/packages/client/ui/Menu/MenuItem.tsx +++ b/packages/client/ui/Menu/MenuItem.tsx @@ -11,14 +11,16 @@ interface MenuItemProps { export const MenuItem = React.forwardRef( ({onClick, isDisabled, className, children}, ref) => { - const itemClass = twMerge( - 'flex w-full items-center rounded-md px-4 py-3 text-sm text-slate-700 outline-none hover:bg-slate-100 focus:bg-slate-100', - isDisabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer', - className - ) - return ( - + {children} ) From f1633701680b6b9cf69d379339b54efa056b0fe6 Mon Sep 17 00:00:00 2001 From: Nick O'Ferrall Date: Tue, 19 Mar 2024 16:07:23 +0000 Subject: [PATCH 20/20] add category to ActivityCardImage prop --- packages/client/components/RetroDrawerTemplateCard.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/client/components/RetroDrawerTemplateCard.tsx b/packages/client/components/RetroDrawerTemplateCard.tsx index 4f4700f9c80..c126f6d0d6c 100644 --- a/packages/client/components/RetroDrawerTemplateCard.tsx +++ b/packages/client/components/RetroDrawerTemplateCard.tsx @@ -39,7 +39,11 @@ const RetroDrawerTemplateCard = (props: Props) => { ) : null } > - +