Skip to content

Commit

Permalink
fix: refactor new meeting team dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
Dschoordsch committed May 2, 2024
1 parent 0dca699 commit f0389d2
Show file tree
Hide file tree
Showing 9 changed files with 109 additions and 240 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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 {
Expand Down Expand Up @@ -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' && (
<div className='w-[352px] p-4'>
<div>
This custom activity is private to the <b>{templateTeam.name}</b> team.
</div>
<br />
<div>
As a member of the team you can share this activity with other teams at the{' '}
<b>{templateTeam.organization.name}</b> organization so that they can also use the activity.
</div>
<button
onClick={handleShareToOrg}
className={
'mt-4 flex w-max cursor-pointer items-center rounded-full border border-solid border-slate-400 bg-white px-3 py-2 text-center font-sans text-sm font-semibold text-slate-700 hover:bg-slate-100'
}
>
<LockOpen style={{marginRight: '8px', color: PALETTE.SLATE_600}} />
Allow other teams to use this activity
</button>
</div>
)

const meetingNamePlaceholder =
type === 'retrospective'
? 'Retro'
Expand Down Expand Up @@ -255,11 +220,9 @@ const ActivityDetailsSidebar = (props: Props) => {
>
<div className='mt-6 flex grow flex-col gap-2'>
<NewMeetingTeamPicker
positionOverride={isMobile ? MenuPosition.UPPER_RIGHT : MenuPosition.UPPER_LEFT} // refactor this: https://github.com/ParabolInc/parabol/issues/9274
onSelectTeam={onSelectTeam}
selectedTeamRef={selectedTeam}
teamsRef={availableTeams}
customPortal={teamScopePopover}
/>
{type === 'retrospective' && (
<>
Expand Down
55 changes: 0 additions & 55 deletions packages/client/components/DropdownToggleInner.tsx

This file was deleted.

65 changes: 0 additions & 65 deletions packages/client/components/DropdownToggleV2.tsx

This file was deleted.

36 changes: 0 additions & 36 deletions packages/client/components/NewMeetingDropdown.tsx

This file was deleted.

87 changes: 44 additions & 43 deletions packages/client/components/NewMeetingTeamPicker.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLDivElement>(
positionOverride ?? MenuPosition.LOWER_RIGHT,
{
isDropdown: true
}
)
const {selectedTeamRef, teamsRef, onSelectTeam} = props

const atmosphere = useAtmosphere()

Expand Down Expand Up @@ -66,29 +48,48 @@ const NewMeetingTeamPicker = (props: Props) => {
)

const {name} = selectedTeam

return (
<>
<NewMeetingDropdown
icon={<NewMeetingTeamPickerAvatars teamRef={selectedTeam} />}
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
) : (
<SelectTeamDropdown
menuProps={menuProps}
teams={teams}
teamHandleClick={handleSelectTeam}
/>
)
)}
<Menu
className='data-[side=top]:animate-slideUp data-[side=bottom]:animate-slideDown'
trigger={
<div className='group flex cursor-pointer items-center rounded-md bg-slate-200 p-2 hover:bg-slate-300'>
<div className='p-2'>
<NewMeetingTeamPickerAvatars teamRef={selectedTeam} />
</div>
<div className='grow pl-2'>
<div className='text-sm leading-4'>Team</div>
<div className='text-xl font-semibold leading-5'>{name}</div>
</div>
<div className='s-6 p-2 pl-0'>
<ExpandMore className='text-4xl text-slate-600 transition-transform group-data-[state=open]:rotate-180' />
</div>
</div>
}
>
<div
className='w-[var(--radix-dropdown-menu-trigger-width)]'
>
<DropdownMenu.Label className='text-base px-3 py-2 font-semibold'>Select Team:</DropdownMenu.Label>
<DropdownMenu.Separator className='border-b border-slate-300' />
<div className='py-2'>
{teams.map((team) => {
return (
<DropdownMenu.Item
key={team.id}
className='text-base px-3 py-1 hover:bg-slate-200 outline-none'
onClick={() => {
handleSelectTeam(team.id)
}}
>
{team.name}
</DropdownMenu.Item>
)
})}
</div>
</div>
</Menu>
</>
)
}
Expand Down
2 changes: 1 addition & 1 deletion packages/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
24 changes: 23 additions & 1 deletion packages/client/tailwindTheme.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Loading

0 comments on commit f0389d2

Please sign in to comment.