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

Jump to bottom

fix: add new styling for emoji links #14481

Merged
merged 6 commits into from
Apr 17, 2024
Merged

fix: add new styling for emoji links #14481

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
94a6863
add new styling for emoji links
Apr 8, 2024
3049eb5
fix double lines on enter
Apr 8, 2024
5c75d7c
UI fixes
Apr 9, 2024
ee5e019
fix type error
Apr 9, 2024
c60d650
fix to only show margin on enter
Apr 9, 2024
c6ccbfa
Merge branch 'main' into fix/rating-template-improvements
PeerRich Apr 17, 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
12 changes: 6 additions & 6 deletions apps/web/modules/bookings/views/bookings-single-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -860,10 +860,10 @@ export default function Success(props: PageProps) {
</>
) : (
<>
<div className="my-3 flex justify-end">
<div className="my-3 flex justify-center space-x-1">
<button
className={classNames(
"m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
"flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
rateValue === 1
? "border-focus bg-emphasis"
: "border-muted bg-default opacity-50"
Expand All @@ -874,7 +874,7 @@ export default function Success(props: PageProps) {
</button>
<button
className={classNames(
"m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
"flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
rateValue === 2
? "border-focus bg-emphasis"
: "border-muted bg-default opacity-50"
Expand All @@ -885,7 +885,7 @@ export default function Success(props: PageProps) {
</button>
<button
className={classNames(
"m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
"flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
rateValue === 3
? "border-focus bg-emphasis"
: " border-muted bg-default opacity-50"
Expand All @@ -896,7 +896,7 @@ export default function Success(props: PageProps) {
</button>
<button
className={classNames(
"m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
"flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
rateValue === 4
? "border-focus bg-emphasis"
: "border-muted bg-default opacity-50"
Expand All @@ -907,7 +907,7 @@ export default function Success(props: PageProps) {
</button>
<button
className={classNames(
"m-1 items-center justify-center rounded-full border p-1 text-2xl hover:opacity-100",
"flex h-10 w-10 items-center justify-center rounded-full border text-2xl hover:opacity-100",
rateValue === 5
? "border-focus bg-emphasis"
: "border-muted bg-default opacity-50"
Expand Down
22 changes: 21 additions & 1 deletion packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import client from "@sendgrid/client";
import type { MailData } from "@sendgrid/helpers/classes/mail";
import sgMail from "@sendgrid/mail";
import { JSDOM } from "jsdom";

import { SENDER_NAME } from "@calcom/lib/constants";
import { setTestEmail } from "@calcom/lib/testEmails";
Expand Down Expand Up @@ -70,7 +71,7 @@ export function sendSendgridMail(
name: addData.sender || SENDER_NAME,
},
subject: mailData.subject,
html: mailData.html || "",
html: addHTMLStyles(mailData.html),
batchId: mailData.batchId,
replyTo: mailData.replyTo || senderEmail,
attachments: mailData.attachments,
Expand Down Expand Up @@ -109,3 +110,22 @@ export function deleteScheduledSend(referenceId: string | null) {
method: "DELETE",
});
}

function addHTMLStyles(html?: string) {
if (!html) {
return "";
}
const dom = new JSDOM(html);
const document = dom.window.document;

// Select all <a> tags inside <h6> elements --> only used for emojis in rating template
const links = document.querySelectorAll("h6 a");

links.forEach((link) => {
Copy link
Member Author

Choose a reason for hiding this comment

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

add inline styles for emojis (h6 links)

const htmlLink = link as HTMLElement;
htmlLink.style.fontSize = "20px";
htmlLink.style.textDecoration = "none";
});

return dom.serialize();
}
24 changes: 12 additions & 12 deletions packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,28 +50,28 @@ const emailRatingTemplate = ({
endTime = dayjs(endTime).tz(timeZone).format(currentTimeFormat);
}

const emailSubject = `How was your recent experience?: ${eventName}`;
const emailSubject = `How was your recent experience? ${eventName}`;

const introHtml = `<body>Hi${
const introHtml = `<p>Hi${
name ? ` ${name}` : ""
},<br><br>We're always looking to improve our customer's experience. How satisfied were you with your recent meeting?<br><br>`;
},<br><br>We're always looking to improve our customer's experience. How satisfied were you with your recent meeting?<br></p>`;

const ratingHtml = `<a href="${ratingUrl}=1">😠</a> <a href="${ratingUrl}=2">🙁</a> <a href="${ratingUrl}=3">😐</a> <a href="${ratingUrl}=4">😄</a> <a href="${ratingUrl}=5">😍</a><br><br>`;
const ratingHtml = `<h6><a href="${ratingUrl}=1">😠 </a> <a href="${ratingUrl}=2">🙁 </a> <a href="${ratingUrl}=3">😐 </a> <a href="${ratingUrl}=4">😄 </a> <a href="${ratingUrl}=5">😍</a></h6>`;

const noShowHtml = `<div><a href="${noShowUrl}">${organizer} didn't join the meeting</a></div><br><br>`;
const noShowHtml = `${organizer} didn't join the meeting?<a href="${noShowUrl}"> Reschedule here</a><br><br>`;

const eventHtml = `<div><strong class="editor-text-bold">Event: </strong></div>${eventName}<br><br>`;
const eventHtml = `<strong>Event: </strong>${eventName}<br><br>`;

const dateTimeHtml = `<div><strong class="editor-text-bold">Date & Time: </strong></div>${eventDate} - ${endTime} (${timeZone})<br><br>`;
const dateTimeHtml = `<strong>Date & Time: </strong>${eventDate} - ${endTime} (${timeZone})<br><br>`;

const attendeeHtml = `<div><strong class="editor-text-bold">Attendees: </strong></div>You & ${organizer}<br><br>`;
const attendeeHtml = `<strong>Attendees: </strong>You & ${organizer}<br><br>`;

const branding = !isBrandingDisabled && !isEditingMode ? `<br><br>_<br><br>Scheduling by ${APP_NAME}` : "";
const branding =
!isBrandingDisabled && !isEditingMode ? `<div>_<br><br>Scheduling by ${APP_NAME}</div>` : "";

const endingHtml = `This survey was triggered by a Workflow in Cal.${branding}</body>`;
const endingHtml = `This survey was triggered by a Workflow in Cal.${branding}`;

const emailBody =
introHtml + ratingHtml + noShowHtml + eventHtml + dateTimeHtml + attendeeHtml + endingHtml;
const emailBody = `<body>${introHtml}${ratingHtml}<p>${noShowHtml}${eventHtml}${dateTimeHtml}${attendeeHtml}${endingHtml}</p></body>`;

return { emailSubject, emailBody };
};
Expand Down
1 change: 1 addition & 0 deletions packages/ui/components/editor/ExampleTheme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const exampleTheme = {
heading: {
h1: "editor-heading-h1",
h2: "editor-heading-h2",
h6: "editor-heading-h6",
},
list: {
nested: {
Expand Down
7 changes: 6 additions & 1 deletion packages/ui/components/editor/plugins/ToolbarPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,7 +376,12 @@ export default function ToolbarPlugin(props: TextEditorProps) {
editor.registerUpdateListener(({ editorState, prevEditorState }) => {
editorState.read(() => {
const textInHtml = $generateHtmlFromNodes(editor).replace(/&lt;/g, "<").replace(/&gt;/g, ">");
props.setText(textInHtml);
props.setText(
Copy link
Member Author

@CarinaWolli CarinaWolli Apr 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Enter results in <p class="editor-paragraph"><br></p> which is the paragraph margin and a new line. We only want the margin.

Multiple enter in a row don't work as expected in the email, but for this case shift-enter can be used. Wasn't able to figure out a fix for this yet

textInHtml.replace(
/<p\s+class="editor-paragraph"[^>]*>\s*<br>\s*<\/p>/g,
"<p class='editor-paragraph'></p>"
)
);
});
if (!prevEditorState._selection) editor.blur();
});
Expand Down
16 changes: 11 additions & 5 deletions packages/ui/components/editor/stylesEditor.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.editor a {
text-decoration: underline;
font-size: 14px;
}

.editor li {
padding-left: 1.28571429em;
Expand Down Expand Up @@ -56,9 +52,18 @@
font-style: italic;
}

// h6 is only used for emoji links
.editor-heading-h6 {
}
Copy link
Member Author

Choose a reason for hiding this comment

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

Not sure why I need this, but if I remove it then the styles for h6 a from below are not applied

Copy link
Member

Choose a reason for hiding this comment

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

Yeah seems like an issue in editor's end really.


h6 a {
font-size: 20px !important;
text-decoration: none !important;
}

.editor-link {
color: rgb(33, 111, 219);
text-decoration: none;
text-decoration: underline;
}

.editor-tokenFunction {
Expand All @@ -67,6 +72,7 @@

.editor-paragraph {
margin: 0;
margin-top:14px;
position: relative;
Copy link
Member Author

Choose a reason for hiding this comment

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

same as

behaves in email

color: var(--cal-text);
}
Expand Down
Loading