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.

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(styling): styling in article and email #2009

Merged
merged 1 commit into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 desk/src/components/Settings/EmailAdd.vue
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
:name="field.name"
:type="field.type"
/>
<p class="text-xs text-gray-500">{{ field.description }}</p>
<p class="text-gray-500 text-p-sm">{{ field.description }}</p>
</div>
</div>
<ErrorMessage v-if="error" class="ml-1" :message="error" />
Expand Down
2 changes: 1 addition & 1 deletion desk/src/components/Settings/EmailEdit.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
:name="field.name"
:type="field.type"
/>
<p class="text-xs text-gray-500">{{ field.description }}</p>
<p class="text-p-sm text-gray-500">{{ field.description }}</p>
</div>
</div>
<ErrorMessage v-if="error" class="ml-1" :message="error" />
Expand Down
9 changes: 6 additions & 3 deletions desk/src/pages/KnowledgeBaseArticle.vue
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,9 @@
</template>
</PageTitle>
<div class="overflow-auto">
<div class="container m-auto my-12">
<div class="mx-5 my-12">
<TextEditor
v-if="textEditorContentWithIDs"
:content="textEditorContentWithIDs"
:editable="editMode"
:placeholder="placeholder"
Expand All @@ -47,6 +48,9 @@
/>
</template>
</TextEditor>
<div v-else class="text-gray-500 text-2xl font-semibold mb-5">
Article Not Found
</div>
<RouterLink
v-if="route.meta.public"
:to="{ name: CUSTOMER_PORTAL_NEW_TICKET }"
Expand Down Expand Up @@ -93,7 +97,6 @@ import KnowledgeBaseArticleActionsNew from "./knowledge-base/KnowledgeBaseArticl
import KnowledgeBaseArticleActionsView from "./knowledge-base/KnowledgeBaseArticleActionsView.vue";
import KnowledgeBaseArticleTopEdit from "./knowledge-base/KnowledgeBaseArticleTopEdit.vue";
import KnowledgeBaseArticleTopNew from "./knowledge-base/KnowledgeBaseArticleTopNew.vue";
import KnowledgeBaseArticleTopPublic from "./knowledge-base/KnowledgeBaseArticleTopPublic.vue";
import KnowledgeBaseArticleTopView from "./knowledge-base/KnowledgeBaseArticleTopView.vue";
import { Extension } from "@tiptap/core";

Expand Down Expand Up @@ -408,7 +411,7 @@ const PreserveIds: Extension = Extension.create({
});

const textEditorContentWithIDs = computed(() =>
addLinksToHeadings(article.data?.content)
article.data?.content ? addLinksToHeadings(article.data?.content) : null
);

function addLinksToHeadings(content: string) {
Expand Down
149 changes: 76 additions & 73 deletions desk/src/pages/TicketNew.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,81 +5,84 @@
title="New"
:current="route.name"
/>
<div v-if="template.data?.about" class="mx-5 my-3">
<div class="prose-f" v-html="sanitize(template.data.about)" />
</div>
<div class="grid grid-cols-1 gap-4 px-5 sm:grid-cols-3">
<UniInput
v-for="field in visibleFields"
:key="field.fieldname"
:field="field"
:value="templateFields[field.fieldname]"
@change="templateFields[field.fieldname] = $event.value"
/>
</div>
<div class="m-5">
<FormControl
v-model="subject"
type="text"
label="Subject*"
placeholder="A short description"
/>
</div>
<TicketNewArticles
v-if="isCustomerPortal"
:search="subject"
class="mx-5 mb-5"
/>
<div v-if="isCustomerPortal" class="mx-5 mb-5 h-full">
<TicketTextEditor
v-show="subject.length > 2 || description.length > 0"
ref="editor"
v-model:attachments="attachments"
v-model:content="description"
placeholder="Detailed explanation"
expand
<!-- Container -->
<div class="max-w-screen-xl mx-5 flex flex-col gap-5 mb-5">
<div v-if="Boolean(template.data?.about)" class="mx-5 my-3">
{{ template.data.about }}
<div class="prose-f" v-html="sanitize(template.data.about)" />
</div>
<div
class="grid grid-cols-1 gap-4 sm:grid-cols-3"
v-if="Boolean(visibleFields)"
>
<template #bottom-right>
<Button
label="Submit"
theme="gray"
variant="solid"
:disabled="
$refs.editor.editor.isEmpty || ticket.loading || !subject
"
@click="() => ticket.submit()"
/>
</template>
</TicketTextEditor>
<h4
v-show="subject.length <= 2 && description.length === 0"
class="flex items-center justify-center text-lg text-gray-500"
>
Please enter a subject to continue
</h4>
</div>
<UniInput
v-for="field in visibleFields"
:key="field.fieldname"
:field="field"
:value="templateFields[field.fieldname]"
@change="templateFields[field.fieldname] = $event.value"
/>
</div>
<div>
<FormControl
v-model="subject"
type="text"
label="Subject*"
placeholder="A short description"
/>
</div>
<TicketNewArticles v-if="isCustomerPortal" :search="subject" />
<div v-if="isCustomerPortal">
<TicketTextEditor
v-show="subject.length > 2 || description.length > 0"
ref="editor"
v-model:attachments="attachments"
v-model:content="description"
placeholder="Detailed explanation"
expand
>
<template #bottom-right>
<Button
label="Submit"
theme="gray"
variant="solid"
:disabled="
$refs.editor.editor.isEmpty || ticket.loading || !subject
"
@click="() => ticket.submit()"
/>
</template>
</TicketTextEditor>
<h4
v-show="subject.length <= 2 && description.length === 0"
class="text-lg text-gray-500"
>
Please enter a subject to continue
</h4>
</div>

<!-- for agent portal -->
<div v-else class="mx-5 mb-5 h-full">
<TicketTextEditor
ref="editor"
v-model:attachments="attachments"
v-model:content="description"
placeholder="Detailed explanation"
expand
>
<template #bottom-right>
<Button
label="Submit"
theme="gray"
variant="solid"
:disabled="
$refs.editor.editor.isEmpty || ticket.loading || !subject
"
@click="() => ticket.submit()"
/>
</template>
</TicketTextEditor>
<!-- for agent portal -->
<div v-else>
<TicketTextEditor
ref="editor"
v-model:attachments="attachments"
v-model:content="description"
placeholder="Detailed explanation"
expand
>
<template #bottom-right>
<Button
label="Submit"
theme="gray"
variant="solid"
:disabled="
$refs.editor.editor.isEmpty || ticket.loading || !subject
"
@click="() => ticket.submit()"
/>
</template>
</TicketTextEditor>
</div>
</div>
</div>
</template>
Expand Down
8 changes: 4 additions & 4 deletions desk/src/pages/ticket/TicketNewArticles.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@
}"
target="_blank"
>
<span class="text-xs">(View All)</span>
<span class="text-xs underline">(View All)</span>
</RouterLink>
</div>
<dl class="space-y-2">
<dl>
<div
v-for="a in articles.data"
:key="a.id"
class="focus:ring-cyan-30 rounded-md border-2 border-hidden p-4 hover:bg-cyan-100 focus:outline-none focus:ring active:bg-cyan-50"
>
<RouterLink
class="group cursor-pointer hover:text-gray-900"
class="group cursor-pointer hover:text-gray-900 flex flex-col gap-2"
:to="{
name: 'KBArticlePublicNew',
params: {
Expand All @@ -34,7 +34,7 @@
>
<dt class="font-semibold">{{ a.subject }} - {{ a.headings }}</dt>
<!-- eslint-disable-next-line vue/no-v-html -->
<dd class="font-light" v-html="a.description"></dd>
<dd class="font-light text-p-sm" v-html="a.description"></dd>
</RouterLink>
</div>
</dl>
Expand Down
Loading