From f0389d21356a0a77c35b9896678609e535d9d268 Mon Sep 17 00:00:00 2001 From: Georg Bremer Date: Mon, 29 Apr 2024 12:51:17 +0200 Subject: [PATCH] fix: refactor new meeting team dropdown --- .../ActivityDetailsSidebar.tsx | 37 -------- .../client/components/DropdownToggleInner.tsx | 55 ------------ .../client/components/DropdownToggleV2.tsx | 65 -------------- .../client/components/NewMeetingDropdown.tsx | 36 -------- .../components/NewMeetingTeamPicker.tsx | 87 ++++++++++--------- packages/client/package.json | 2 +- packages/client/tailwindTheme.ts | 24 ++++- packages/client/ui/Menu/Menu.tsx | 2 +- yarn.lock | 41 ++++++++- 9 files changed, 109 insertions(+), 240 deletions(-) delete mode 100644 packages/client/components/DropdownToggleInner.tsx delete mode 100644 packages/client/components/DropdownToggleV2.tsx delete mode 100644 packages/client/components/NewMeetingDropdown.tsx diff --git a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx index 672be252b8c..7ae8554929d 100644 --- a/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx +++ b/packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx @@ -17,14 +17,11 @@ import { RecurrenceSettingsInput } from '../../__generated__/StartRetrospectiveMutation.graphql' import useAtmosphere from '../../hooks/useAtmosphere' -import useBreakpoint from '../../hooks/useBreakpoint' -import {MenuPosition} from '../../hooks/useCoords' import useMutationProps from '../../hooks/useMutationProps' import SelectTemplateMutation from '../../mutations/SelectTemplateMutation' import StartCheckInMutation from '../../mutations/StartCheckInMutation' import StartTeamPromptMutation from '../../mutations/StartTeamPromptMutation' import {PALETTE} from '../../styles/paletteV3' -import {Breakpoint} from '../../types/constEnums' import sortByTier from '../../utils/sortByTier' import FlatPrimaryButton from '../FlatPrimaryButton' import NewMeetingActionsCurrentMeetings from '../NewMeetingActionsCurrentMeetings' @@ -45,7 +42,6 @@ interface Props { const ActivityDetailsSidebar = (props: Props) => { const {selectedTemplateRef, teamsRef, type, preferredTeamId} = props const [isMinimized, setIsMinimized] = useState(false) - const isMobile = !useBreakpoint(Breakpoint.INVOICE) const selectedTemplate = useFragment( graphql` fragment ActivityDetailsSidebar_template on MeetingTemplate { @@ -188,37 +184,6 @@ const ActivityDetailsSidebar = (props: Props) => { } } - const handleShareToOrg = () => { - selectedTemplate && - UpdateReflectTemplateScopeMutation( - atmosphere, - {scope: 'ORGANIZATION', templateId: selectedTemplate.id}, - {onError, onCompleted} - ) - } - - const teamScopePopover = templateTeam && selectedTemplate.scope === 'TEAM' && ( -
-
- This custom activity is private to the {templateTeam.name} team. -
-
-
- As a member of the team you can share this activity with other teams at the{' '} - {templateTeam.organization.name} organization so that they can also use the activity. -
- -
- ) - const meetingNamePlaceholder = type === 'retrospective' ? 'Retro' @@ -255,11 +220,9 @@ const ActivityDetailsSidebar = (props: Props) => { >
{type === 'retrospective' && ( <> diff --git a/packages/client/components/DropdownToggleInner.tsx b/packages/client/components/DropdownToggleInner.tsx deleted file mode 100644 index 673493093eb..00000000000 --- a/packages/client/components/DropdownToggleInner.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import styled from '@emotion/styled' -import React, {forwardRef} from 'react' -import {PALETTE} from '~/styles/paletteV3' - -const Container = styled('div')({ - alignItems: 'center', - display: 'flex', - flex: 1, - minWidth: 0 -}) - -const IconContainer = styled('div')({ - marginRight: 16 -}) - -const MenuToggleLabelContainer = styled('div')({ - overflow: 'hidden' -}) - -const MenuToggleLabel = styled('div')({ - flex: 1, - overflow: 'hidden', - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - fontSize: 20, - fontWeight: 600, - color: PALETTE.SLATE_900 -}) - -const MenuToggleTitle = styled('div')({ - fontSize: 14, - lineHeight: '16px', - fontWeight: 400, - color: PALETTE.SLATE_900 -}) - -interface Props { - label: string - icon?: React.ReactElement - title?: string -} -const DropdownToggleInner = forwardRef((props: Props, ref: any) => { - const {icon, label, title} = props - return ( - - {icon && {icon}} - - {title && {title}} - {label} - - - ) -}) - -export default DropdownToggleInner diff --git a/packages/client/components/DropdownToggleV2.tsx b/packages/client/components/DropdownToggleV2.tsx deleted file mode 100644 index b7111cd7384..00000000000 --- a/packages/client/components/DropdownToggleV2.tsx +++ /dev/null @@ -1,65 +0,0 @@ -import styled from '@emotion/styled' -import {ExpandMore as ExpandMoreIcon, KeyboardArrowRight} from '@mui/icons-material' -import React, {ReactNode, Ref, forwardRef} from 'react' -import useMenu from '../hooks/useMenu' -import {PALETTE} from '../styles/paletteV3' - -const DropdownIcon = styled('div')<{opened: boolean | undefined}>(({opened}) => ({ - color: PALETTE.SLATE_600, - height: 36, - width: 36, - svg: { - fontSize: 36 - }, - alignSelf: 'center', - transform: opened ? 'rotateX(180deg)' : 'none', - transition: 'transform 0.2s' -})) - -const DropdownBlock = styled('div')<{disabled: boolean | undefined}>(({disabled}) => ({ - background: PALETTE.SLATE_200, - borderRadius: '8px', - cursor: disabled ? 'not-allowed' : 'pointer', - display: 'flex', - fontSize: 14, - lineHeight: '24px', - fontWeight: 600, - userSelect: 'none', - width: '100%', - ':hover': { - backgroundColor: PALETTE.SLATE_300 - }, - padding: 16 -})) - -interface Props { - className?: string - disabled?: boolean - icon?: string - onClick: ReturnType['togglePortal'] - onMouseEnter?: () => void - children: ReactNode - opened?: boolean -} - -const DropdownToggleV2 = forwardRef((props: Props, ref: Ref) => { - const {className, children, icon, onClick, onMouseEnter, disabled, opened} = props - return ( - - {children} - {!disabled && ( - - {icon ? : } - - )} - - ) -}) - -export default DropdownToggleV2 diff --git a/packages/client/components/NewMeetingDropdown.tsx b/packages/client/components/NewMeetingDropdown.tsx deleted file mode 100644 index c27f812c293..00000000000 --- a/packages/client/components/NewMeetingDropdown.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, {forwardRef} from 'react' -import useMenu from '../hooks/useMenu' -import DropdownToggleInner from './DropdownToggleInner' -import DropdownToggleV2 from './DropdownToggleV2' - -interface Props { - className?: string - icon?: React.ReactElement - dropdownIcon?: string - label: string - disabled?: boolean - onClick: ReturnType['togglePortal'] - onMouseEnter?: () => void - title?: string - opened?: boolean -} - -const NewMeetingDropdown = forwardRef((props: Props, ref: any) => { - const {className, icon, dropdownIcon, label, disabled, onClick, onMouseEnter, title, opened} = - props - return ( - - - - ) -}) - -export default NewMeetingDropdown diff --git a/packages/client/components/NewMeetingTeamPicker.tsx b/packages/client/components/NewMeetingTeamPicker.tsx index 199499dc2dc..8761276b9a8 100644 --- a/packages/client/components/NewMeetingTeamPicker.tsx +++ b/packages/client/components/NewMeetingTeamPicker.tsx @@ -1,41 +1,23 @@ +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import {ExpandMore} from '@mui/icons-material' import graphql from 'babel-plugin-relay/macro' import React from 'react' import {useFragment} from 'react-relay' import {NewMeetingTeamPicker_selectedTeam$key} from '~/__generated__/NewMeetingTeamPicker_selectedTeam.graphql' import {NewMeetingTeamPicker_teams$key} from '~/__generated__/NewMeetingTeamPicker_teams.graphql' import useAtmosphere from '../hooks/useAtmosphere' -import {MenuPosition} from '../hooks/useCoords' -import useMenu from '../hooks/useMenu' -import {PortalStatus} from '../hooks/usePortal' -import lazyPreload from '../utils/lazyPreload' +import {Menu} from '../ui/Menu/Menu' import setPreferredTeamId from '../utils/relay/setPreferredTeamId' -import NewMeetingDropdown from './NewMeetingDropdown' import NewMeetingTeamPickerAvatars from './NewMeetingTeamPickerAvatars' -const SelectTeamDropdown = lazyPreload( - () => - import( - /* webpackChunkName: 'SelectTeamDropdown' */ - './SelectTeamDropdown' - ) -) - interface Props { selectedTeamRef: NewMeetingTeamPicker_selectedTeam$key teamsRef: NewMeetingTeamPicker_teams$key onSelectTeam: (teamId: string) => void - positionOverride?: MenuPosition - customPortal?: React.ReactNode } const NewMeetingTeamPicker = (props: Props) => { - const {selectedTeamRef, teamsRef, onSelectTeam, positionOverride, customPortal} = props - const {togglePortal, menuPortal, originRef, menuProps, portalStatus} = useMenu( - positionOverride ?? MenuPosition.LOWER_RIGHT, - { - isDropdown: true - } - ) + const {selectedTeamRef, teamsRef, onSelectTeam} = props const atmosphere = useAtmosphere() @@ -66,29 +48,48 @@ const NewMeetingTeamPicker = (props: Props) => { ) const {name} = selectedTeam + return ( <> - } - label={name} - onClick={togglePortal} - onMouseEnter={SelectTeamDropdown.preload} - disabled={teams.length === 0} - ref={originRef} - title={'Team'} - opened={[PortalStatus.Entering, PortalStatus.Entered].includes(portalStatus)} - /> - {menuPortal( - customPortal ? ( - customPortal - ) : ( - - ) - )} + +
+ +
+
+
Team
+
{name}
+
+
+ +
+
+ } + > +
+ Select Team: + +
+ {teams.map((team) => { + return ( + { + handleSelectTeam(team.id) + }} + > + {team.name} + + ) + })} +
+
+ ) } diff --git a/packages/client/package.json b/packages/client/package.json index 31411898561..22197c38378 100644 --- a/packages/client/package.json +++ b/packages/client/package.json @@ -76,7 +76,7 @@ "@radix-ui/react-avatar": "^1.0.4", "@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-dialog": "^1.0.4", - "@radix-ui/react-dropdown-menu": "^2.0.4", + "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-radio-group": "^1.1.2", "@radix-ui/react-scroll-area": "^1.0.3", "@radix-ui/react-select": "^1.2.2", diff --git a/packages/client/tailwindTheme.ts b/packages/client/tailwindTheme.ts index 8e27c1efdfa..eaf637eadca 100644 --- a/packages/client/tailwindTheme.ts +++ b/packages/client/tailwindTheme.ts @@ -168,12 +168,34 @@ export default { opacity: 0, transform: 'scale(0)' } + }, + slideUp: { + from: { + opacity: 0, + transform: 'translateY(10px)', + }, + to: { + opacity: 1, + transform: 'translateY(0)', + } + }, + slideDown: { + from: { + opacity: 0, + transform: 'translateY(-10px)', + }, + to: { + opacity: 1, + transform: 'translateY(0)', + } } }, animation: { overlayShow: 'overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)', contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)', - scaleIn: 'scaleIn 150ms cubic-bezier(0, 0, .2, 1)' + scaleIn: 'scaleIn 150ms cubic-bezier(0, 0, .2, 1)', + slideUp: 'slideUp 200ms cubic-bezier(0, 0, 0.2, 1)', + slideDown: 'slideDown 200ms cubic-bezier(0, 0, 0.2, 1)', } } } as const diff --git a/packages/client/ui/Menu/Menu.tsx b/packages/client/ui/Menu/Menu.tsx index 47afbbbf35b..17f96ce16ed 100644 --- a/packages/client/ui/Menu/Menu.tsx +++ b/packages/client/ui/Menu/Menu.tsx @@ -17,7 +17,7 @@ export const Menu = React.forwardRef(