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(dashboard): Apply UI fixes to email and in-app editor #7278

Merged
merged 1 commit into from
Dec 12, 2024
Merged

fix(dashboard): Apply UI fixes to email and in-app editor #7278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions apps/dashboard/src/components/workflow-editor/in-app-preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const InAppPreview = (props: InAppPreviewProps) => {
return (
<div
className={cn(
'border-foreground-200 to-background/90 pointer-events-none relative mx-auto flex h-full w-full flex-col gap-4 rounded-xl px-2 py-3 shadow-sm',
'border-foreground-200 to-background/90 pointer-events-none relative mx-auto flex h-full w-full flex-col gap-4 rounded-xl px-4 py-3 shadow-sm',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix alignment issues between the body and the preview header. Padding and margin should always be on the layout level, not on each component of the preview.

className
)}
{...rest}
Expand All @@ -42,7 +42,7 @@ export const InAppPreviewHeader = (props: InAppPreviewHeaderProps) => {
const { className, ...rest } = props;

return (
<div className={cn('z-20 flex items-center justify-between px-2 text-neutral-300', className)} {...rest}>
<div className={cn('z-20 flex items-center justify-between text-neutral-300', className)} {...rest}>
<div className="flex items-center gap-2">
<span className="text-xl font-medium">Inbox</span>
<InboxArrowDown />
Expand All @@ -51,7 +51,7 @@ export const InAppPreviewHeader = (props: InAppPreviewHeaderProps) => {
<span className="p-0.5">
<InboxEllipsis />
</span>
<span className="p-0.5">
<span>
<InboxSettings />
</span>
</div>
Expand Down
10 changes: 3 additions & 7 deletions apps/dashboard/src/components/workflow-editor/steps/email/email-editor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Separator } from '@/components/primitives/separator';
import { getComponentByType } from '@/components/workflow-editor/steps/component-utils';
import { EmailPreviewHeader } from '@/components/workflow-editor/steps/email/email-preview';
import { EmailTabsEditSection } from '@/components/workflow-editor/steps/email/email-tabs-section';
import { type UiSchema } from '@novu/shared';

const subjectKey = 'subject';
Expand All @@ -14,13 +13,10 @@ export const EmailEditor = (props: EmailEditorProps) => {

return (
<>
<EmailPreviewHeader className="p-3" />
<EmailTabsEditSection>{subject && getComponentByType({ component: subject.component })}</EmailTabsEditSection>

<EmailPreviewHeader />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think removing the p-3 here made the header appear in different places for the tabs.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fixing that now.

<div className="px-8 py-2">{getComponentByType({ component: subject.component })}</div>
<Separator className="bg-neutral-100" />
<EmailTabsEditSection>
{emailEditor && getComponentByType({ component: emailEditor.component })}
</EmailTabsEditSection>
<div className="pl-6">{emailEditor && getComponentByType({ component: emailEditor.component })}</div>
</>
);
};
4 changes: 2 additions & 2 deletions apps/dashboard/src/components/workflow-editor/steps/email/email-tabs-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@ import { HTMLAttributes } from 'react';
type EmailTabsSectionProps = HTMLAttributes<HTMLDivElement>;
export const EmailTabsEditSection = (props: EmailTabsSectionProps) => {
const { className, ...rest } = props;
return <div className={cn('px-12 py-4', className)} {...rest} />;
return <div className={cn('p-4', className)} {...rest} />;
};

type EmailTabsPreviewSectionProps = HTMLAttributes<HTMLDivElement>;
export const EmailTabsPreviewSection = (props: EmailTabsPreviewSectionProps) => {
const { className, ...rest } = props;
return <div className={cn('px-3 py-4', className)} {...rest} />;
return <div className={cn('p-4', className)} {...rest} />;
};
15 changes: 11 additions & 4 deletions apps/dashboard/src/components/workflow-editor/steps/email/email-tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { EmailEditor } from '@/components/workflow-editor/steps/email/email-edit
import { EmailEditorPreview } from '@/components/workflow-editor/steps/email/email-editor-preview';
import { CustomStepControls } from '../controls/custom-step-controls';
import { EmailTabsEditSection } from '@/components/workflow-editor/steps/email/email-tabs-section';
import { WorkflowOriginEnum } from '@novu/shared';

const tabsContentClassName = 'h-full w-full overflow-y-auto';

Expand Down Expand Up @@ -55,10 +56,16 @@ export const EmailTabs = (props: StepEditorProps) => {
</header>
<Separator />
<TabsContent value="editor" className={tabsContentClassName}>
<EmailEditor uiSchema={uiSchema} />
<EmailTabsEditSection>
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
</EmailTabsEditSection>
{workflow.origin === WorkflowOriginEnum.NOVU_CLOUD && (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Show sections based on workflow type avoiding redundant empty divs or the dangling Email Acme header

<EmailTabsEditSection>
<EmailEditor uiSchema={uiSchema} />
</EmailTabsEditSection>
)}
{workflow.origin === WorkflowOriginEnum.EXTERNAL && (
<EmailTabsEditSection>
<CustomStepControls dataSchema={dataSchema} origin={workflow.origin} />
</EmailTabsEditSection>
)}
</TabsContent>
<TabsContent value="preview" className={tabsContentClassName}>
<EmailEditorPreview workflow={workflow} step={step} formValues={form.getValues()} />
Expand Down
Loading