chore: use SidePanel component for the article diff panel (#15333)
# Pull Request Template ## Description The unsaved changes panel in the Help Center article editor now uses the shared `SidePanel` component instead of its own custom drawer. It now matches the rest of the dashboard, with the same slide-in animation, backdrop, and close button for a consistent experience. ## Type of change - [x] New feature (non-breaking change which adds functionality) ## How Has This Been Tested? ### Screenshots **Before** <img width="1530" height="879" alt="image" src="https://github.com/user-attachments/assets/4ef7eafb-0cd6-455f-a970-e1411a24ef25" /> **After** <img width="1530" height="879" alt="image" src="https://github.com/user-attachments/assets/be99ee0d-1906-4a49-967b-3ba1f4fa40b6" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
This commit is contained in:
Sivin Varghese
@@ -1,16 +1,13 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { computed, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { vOnClickOutside } from '@vueuse/components';
|
||||
import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
|
||||
import MessageFormatter from 'shared/helpers/MessageFormatter';
|
||||
import {
|
||||
renderInlineDiff,
|
||||
buildDiffBlocks,
|
||||
} from 'dashboard/helper/articleDiffHelper';
|
||||
|
||||
import Button from 'dashboard/components-next/button/Button.vue';
|
||||
import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
|
||||
import SidePanel from 'dashboard/components-next/side-panel/SidePanel.vue';
|
||||
|
||||
const props = defineProps({
|
||||
article: {
|
||||
@@ -19,10 +16,15 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const isOpen = defineModel({ type: Boolean, default: false });
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const panelRef = ref(null);
|
||||
|
||||
defineExpose({
|
||||
open: () => panelRef.value?.open(),
|
||||
close: () => panelRef.value?.close(),
|
||||
});
|
||||
|
||||
const liveTitle = computed(() => props.article?.title ?? '');
|
||||
const liveContent = computed(() => props.article?.content ?? '');
|
||||
const draftTitle = computed(() => props.article?.draftTitle ?? liveTitle.value);
|
||||
@@ -85,89 +87,56 @@ const blockClass = type => {
|
||||
}
|
||||
return 'border-transparent';
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
const dismissOnClickOutside = [close, { ignore: ['[data-diff-toggle]'] }];
|
||||
|
||||
useKeyboardEvents({ Escape: { action: close, allowOnFocusedInput: true } });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<TeleportWithDirection to="body">
|
||||
<Transition
|
||||
enter-active-class="transition-transform duration-200 ease-in-out"
|
||||
leave-active-class="transition-transform duration-200 ease-in-out"
|
||||
enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
|
||||
leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
|
||||
>
|
||||
<aside
|
||||
v-if="isOpen"
|
||||
v-on-click-outside="dismissOnClickOutside"
|
||||
class="fixed inset-y-0 z-40 flex flex-col w-full shadow-2xl end-0 max-w-lg bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak"
|
||||
>
|
||||
<header
|
||||
class="flex items-start justify-between gap-3 px-6 py-4 border-b shrink-0 border-n-weak bg-n-solid-1"
|
||||
>
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
|
||||
<h3 class="text-base font-medium leading-6 text-n-slate-12">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
icon="i-lucide-x"
|
||||
variant="ghost"
|
||||
color="slate"
|
||||
size="sm"
|
||||
class="shrink-0 hover:text-n-slate-11"
|
||||
@click="close"
|
||||
/>
|
||||
</header>
|
||||
|
||||
<div
|
||||
class="flex flex-col flex-1 min-h-0 gap-4 px-6 pt-4 pb-6 overflow-y-auto"
|
||||
>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
v-if="titleChanged"
|
||||
class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
|
||||
>
|
||||
<span
|
||||
class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
|
||||
>
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
|
||||
</span>
|
||||
<h1
|
||||
class="text-lg font-semibold leading-snug text-n-slate-12"
|
||||
v-html="titleDiff"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="contentChanged"
|
||||
class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
|
||||
>
|
||||
<div
|
||||
v-for="(block, index) in contentBlocks"
|
||||
:key="index"
|
||||
class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
|
||||
:class="blockClass(block.type)"
|
||||
v-html="renderMarkdown(block.md)"
|
||||
/>
|
||||
</div>
|
||||
<!-- eslint-enable vue/no-v-html -->
|
||||
<SidePanel
|
||||
ref="panelRef"
|
||||
width="lg"
|
||||
:title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE')"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex flex-col gap-1 min-w-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="size-2 rounded-full bg-n-amber-9 shrink-0" />
|
||||
<h3 class="text-base font-medium leading-6 text-n-slate-12">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE') }}
|
||||
</h3>
|
||||
</div>
|
||||
</aside>
|
||||
</Transition>
|
||||
</TeleportWithDirection>
|
||||
<p class="text-sm text-n-slate-11">
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.DESCRIPTION') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div
|
||||
v-if="titleChanged"
|
||||
class="flex flex-col gap-1.5 border-s-[3px] border-transparent ps-3"
|
||||
>
|
||||
<span
|
||||
class="text-[11px] font-medium tracking-wide uppercase text-n-slate-10"
|
||||
>
|
||||
{{ t('HELP_CENTER.EDIT_ARTICLE_PAGE.DIFF_DIALOG.TITLE_LABEL') }}
|
||||
</span>
|
||||
<h1
|
||||
class="text-lg font-semibold leading-snug text-n-slate-12"
|
||||
v-html="titleDiff"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="contentChanged"
|
||||
class="flex flex-col gap-1 [&_table]:w-full [&_table]:border-collapse [&_th]:border [&_td]:border [&_th]:border-n-weak [&_td]:border-n-weak [&_th]:p-2 [&_td]:p-2 [&_th]:bg-n-alpha-1 [&_th]:text-start [&_td]:align-top"
|
||||
>
|
||||
<div
|
||||
v-for="(block, index) in contentBlocks"
|
||||
:key="index"
|
||||
class="px-3 py-1.5 overflow-x-auto text-sm leading-relaxed break-words border-s-[3px] rounded-e-md text-n-slate-12 prose-sm prose dark:prose-invert max-w-none [&_p]:my-0 [&>:first-child]:mt-0 [&>:last-child]:mb-0"
|
||||
:class="blockClass(block.type)"
|
||||
v-html="renderMarkdown(block.md)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</SidePanel>
|
||||
</template>
|
||||
|
||||
@@ -53,7 +53,7 @@ const hasPendingChanges = computed(
|
||||
const localTitle = ref(effectiveTitle());
|
||||
const localContent = ref(effectiveContent());
|
||||
|
||||
const isDiffPanelOpen = ref(false);
|
||||
const diffPanelRef = ref(null);
|
||||
|
||||
// Autosave 500ms after the last edit. It sends both title and content so an
|
||||
// edit to one never drops a recent edit to the other. `stop` cancels a queued
|
||||
@@ -84,7 +84,7 @@ watch(
|
||||
[() => props.article?.id, hasPendingChanges],
|
||||
([id, pending], [prevId, prevPending]) => {
|
||||
if ((id && id !== prevId) || (prevPending && !pending)) syncLocalState();
|
||||
if (prevPending && !pending) isDiffPanelOpen.value = false;
|
||||
if (prevPending && !pending) diffPanelRef.value?.close();
|
||||
}
|
||||
);
|
||||
|
||||
@@ -156,9 +156,9 @@ const handleCreateArticle = event => {
|
||||
:is-saving="isSaving"
|
||||
@go-back="onClickGoBack"
|
||||
@preview-article="previewArticle"
|
||||
@show-diff="isDiffPanelOpen = !isDiffPanelOpen"
|
||||
@show-diff="diffPanelRef?.open()"
|
||||
/>
|
||||
<ArticleDiffPanel v-model="isDiffPanelOpen" :article="article" />
|
||||
<ArticleDiffPanel ref="diffPanelRef" :article="article" />
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="flex flex-col gap-3 pl-4 mb-3 rtl:pr-3 rtl:pl-0">
|
||||
|
||||
@@ -260,7 +260,6 @@ const onDraftFailed = error => {
|
||||
<button
|
||||
v-if="hasPendingChanges"
|
||||
type="button"
|
||||
data-diff-toggle
|
||||
:title="t('HELP_CENTER.EDIT_ARTICLE_PAGE.HEADER.VIEW_CHANGES')"
|
||||
class="flex items-center gap-1.5 px-2 py-1 text-xs font-medium transition-colors rounded-lg cursor-pointer text-n-amber-11 bg-n-amber-3 outline outline-1 outline-n-amber-5 hover:bg-n-amber-4"
|
||||
@click="emit('showDiff')"
|
||||
|
||||
Reference in New Issue
Block a user