commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 1.9k Packages Projects Releases Wiki Activity

fix: add new styling for emoji links (#14481)

Browse Source
This commit is contained in:
Carina Wollendorfer
2024-04-17 12:30:14 +00:00
committed by GitHub
parent 4aeb6b7c9b
commit 8bb5200dd8
6 changed files with 57 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/modules/bookings/views/bookings-single-view.tsx
+6 -6
View File
@@ -877,10 +877,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"
@@ -891,7 +891,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"
@@ -902,7 +902,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"
@@ -913,7 +913,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"
@@ -924,7 +924,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"
packages/features/ee/workflows/lib/reminders/providers/sendgridProvider.ts
+21 -1
View File
@@ -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";
@@ -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,
@@ -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) => {
const htmlLink = link as HTMLElement;
htmlLink.style.fontSize = "20px";
htmlLink.style.textDecoration = "none";
});
return dom.serialize();
}
packages/features/ee/workflows/lib/reminders/templates/emailRatingTemplate.ts
+12 -12
View File
@@ -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 };
};
packages/ui/components/editor/ExampleTheme.ts
+1
View File
@@ -4,6 +4,7 @@ const exampleTheme = {
heading: {
h1: "editor-heading-h1",
h2: "editor-heading-h2",
h6: "editor-heading-h6",
},
list: {
nested: {
packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+6 -1
View File
@@ -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(
textInHtml.replace(
/<p\s+class="editor-paragraph"[^>]*>\s*<br>\s*<\/p>/g,
"<p class='editor-paragraph'></p>"
)
);
});
if (!prevEditorState._selection) editor.blur();
});
packages/ui/components/editor/stylesEditor.css
+11 -5
View File
@@ -1,7 +1,3 @@
.editor a {
text-decoration: underline;
font-size: 14px;
}
.editor li {
padding-left: 1.28571429em;
@@ -56,9 +52,18 @@
font-style: italic;
}
// h6 is only used for emoji links
.editor-heading-h6 {
}
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 {
@@ -67,6 +72,7 @@
.editor-paragraph {
margin: 0;
margin-top:14px;
position: relative;
color: var(--cal-text);
}