Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Sidebar in start custom activity #9647

Merged
merged 9 commits into from
Apr 29, 2024
Merged

fix: Sidebar in start custom activity #9647

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2c7f04d
fix: Sidebar in start custom activity
Dschoordsch Apr 16, 2024
13a4d60
Make activity details screen reactive
Dschoordsch Apr 16, 2024
f60aa72
Fix editing view
Dschoordsch Apr 16, 2024
354fce4
Remove z-index
Dschoordsch Apr 18, 2024
e317b04
Make all content visible on mobile
Dschoordsch Apr 18, 2024
f1eab03
Mobile adaptions
Dschoordsch Apr 18, 2024
dfe77ed
More CSS
Dschoordsch Apr 18, 2024
d3cd078
Hide template details image on small screens
Dschoordsch Apr 23, 2024
e746b8b
Avoid shrinking and expanding of the sidebar when switching teams
Dschoordsch Apr 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/client/components/ActivityLibrary/ActivityCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export const ActivityCardImage = (props: PropsWithChildren<ActivityCardImageProp
>
<img className='object-contain' src={backgroundSrc} alt='' />
<img
className='absolute top-0 left-0 z-10 h-full w-full object-contain p-10'
className='absolute top-0 left-0 h-full w-full object-contain p-10'
src={src}
alt='Card Illustration'
/>
Expand Down
70 changes: 31 additions & 39 deletions packages/client/components/ActivityLibrary/ActivityDetails/ActivityDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,72 +90,64 @@ const ActivityDetails = (props: Props) => {
}`

const isOwner = viewerLowestScope === 'TEAM'
const MOBILE_SETTINGS_HEIGHT = 208

return (
<div className='flex h-full flex-col bg-white'>
<div className={clsx(`flex grow pb-[${MOBILE_SETTINGS_HEIGHT}px]`)}>
<div className='mt-4 grow'>
<div className='mb-14 ml-4 flex h-min w-max items-center'>
<div className='flex h-full w-full flex-col bg-white'>
<div className='flex grow'>
<div className='mt-4 w-full grow'>
<div className='mb-14 ml-4 flex h-min w-max items-center max-md:mb-6'>
<div className='mr-4'>
<Link to={categoryLink}>
<IconLabel icon={'arrow_back'} iconLarge />
</Link>
</div>
<div className='w-max text-xl font-semibold'>Start Activity</div>
</div>
<div className='mx-auto w-min'>
<div
className={clsx(
'flex w-full flex-col justify-start pl-4 pr-14 xl:flex-row xl:justify-center xl:pl-14',
isEditing && 'lg:flex-row lg:justify-center lg:pl-14'
)}
>
<ActivityCard
className='ml-14 mb-8 max-h-[200px] w-80 xl:ml-0 xl:mb-0'
theme={CATEGORY_THEMES[category as CategoryID]}
badge={null}
type={type}
>
<ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
</ActivityCard>
<div className='pb-20'>
<div className='mb-10 space-y-2 pl-14'>
<div className='flex min-h-[40px] items-center'>
<EditableTemplateName
className='text-[32px] leading-9'
name={activity.name}
templateId={activity.id}
isOwner={isOwner && isEditing}
/>
</div>
<TemplateDetails
activityRef={activity}
viewerRef={viewer}
isEditing={isEditing}
setIsEditing={setIsEditing}
<div className='mx-auto'>
<div className='flex flex-col justify-start pl-4 pr-4 md:pr-14 xl:flex-row xl:justify-center xl:pl-14'>
<div>
<ActivityCard
className='mb-8 w-80 max-md:hidden sm:ml-14 xl:ml-0 xl:mb-0'
theme={CATEGORY_THEMES[category as CategoryID]}
badge={null}
type={type}
>
<ActivityCardImage src={illustrationUrl} category={category as CategoryID} />
</ActivityCard>
</div>
<div className='mb-10 space-y-2 sm:pl-14'>
<div className='flex min-h-[40px] items-center'>
<EditableTemplateName
className='text-[32px] leading-9'
name={activity.name}
templateId={activity.id}
isOwner={isOwner && isEditing}
/>
</div>
<TemplateDetails
activityRef={activity}
viewerRef={viewer}
isEditing={isEditing}
setIsEditing={setIsEditing}
/>
</div>
</div>
</div>
</div>
<div className='hidden lg:block'>
<div className='hidden w-[385px] shrink-0 lg:block'>
<ActivityDetailsSidebar
selectedTemplateRef={activity}
teamsRef={teams}
isOpen={!isEditing}
type={activity.type}
preferredTeamId={preferredTeamId}
viewerRef={viewer}
/>
</div>
</div>
<div className={`fixed min-h-[${MOBILE_SETTINGS_HEIGHT}px] bottom-0 w-full lg:hidden`}>
<div className={clsx('lg:hidden', isEditing && 'hidden')}>
<ActivityDetailsSidebar
selectedTemplateRef={activity}
teamsRef={teams}
isOpen={!isEditing}
type={activity.type}
preferredTeamId={preferredTeamId}
viewerRef={viewer}
Expand Down
6 changes: 3 additions & 3 deletions packages/client/components/ActivityLibrary/ActivityDetails/TemplateDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,7 +212,7 @@ export const TemplateDetails = (props: Props) => {
return (
<div className='space-y-6'>
<ActivityDetailsBadges isEditing={isEditing} templateRef={activity} />
<div className='w-[480px]'>
<div className='max-w-[480px]'>
<div className='mb-6'>
{__typename === 'FixedActivity' && (
<div className='text-base font-semibold text-slate-600'>Created by Parabol</div>
Expand Down Expand Up @@ -275,9 +275,9 @@ export const TemplateDetails = (props: Props) => {
</div>
{activityDescription}
</div>
<IntegrationsTip>{integrationsTip}</IntegrationsTip>
<IntegrationsTip className='flex-wrap'>{integrationsTip}</IntegrationsTip>

<div className='-ml-14 pt-4'>
<div className='pt-4 sm:-ml-14'>
{prompts && (
<>
<TemplatePromptList
Expand Down
2 changes: 1 addition & 1 deletion packages/client/components/ActivityLibrary/ActivityDetails/components/IntegrationsTip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const IntegrationsTip = (props: Props) => {
const {className, children} = props

return (
<div className={clsx('flex min-w-max items-center', className)}>
<div className={clsx('flex items-center', className)}>
<div className='flex items-center gap-3'>
<JiraSVG />
<GitHubSVG />
Expand Down
13 changes: 2 additions & 11 deletions packages/client/components/ActivityLibrary/ActivityDetailsSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,12 @@ interface Props {
selectedTemplateRef: ActivityDetailsSidebar_template$key
teamsRef: ActivityDetailsSidebar_teams$key
type: MeetingTypeEnum
isOpen: boolean
preferredTeamId: string | null
viewerRef: ActivityDetailsSidebar_viewer$key
}

const ActivityDetailsSidebar = (props: Props) => {
const {selectedTemplateRef, teamsRef, type, isOpen, preferredTeamId, viewerRef} = props
const {selectedTemplateRef, teamsRef, type, preferredTeamId, viewerRef} = props
const [isMinimized, setIsMinimized] = useState(false)
const isMobile = !useBreakpoint(Breakpoint.INVOICE)
const selectedTemplate = useFragment(
Expand Down Expand Up @@ -253,14 +252,7 @@ const ActivityDetailsSidebar = (props: Props) => {

return (
<>
{isOpen && <div className='w-96' />}
<div
className={clsx(
'fixed bottom-0 flex w-full flex-col overflow-hidden border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:w-96 lg:border-l lg:pt-14',
isOpen ? 'translate-y-0' : 'translate-y-full lg:translate-x-0 lg:translate-y-0',
isOpen ? 'opacity-100' : 'opacity-0 lg:opacity-100'
)}
>
<div className='sticky bottom-0 flex w-full flex-col border-t border-solid border-slate-300 bg-white px-4 pt-2 lg:right-0 lg:top-0 lg:min-h-screen lg:w-full lg:w-96 lg:border-l lg:pt-14'>
<div className='flex-grow'>
<div className='flex items-center justify-between pt-2 text-xl font-semibold lg:pt-0'>
Settings
Expand Down Expand Up @@ -312,7 +304,6 @@ const ActivityDetailsSidebar = (props: Props) => {
<div className='z-10 flex h-fit w-full flex-col gap-2 pb-4'>
{error && <StyledError>{error.message}</StyledError>}
<NewMeetingActionsCurrentMeetings team={selectedTeam} />
{/* TODO: scheduling meeting does not work with one-on-one https://github.com/ParabolInc/parabol/issues/8820 */}
<ScheduleMeetingButton
handleStartActivity={handleStartActivity}
mutationProps={mutationProps}
Expand Down
Loading