feat: remove editor split screen and add modal for source code viewing

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Dec 22, 2024 · 6d21648 · 6d21648
1 parent d7e0ef0
commit 6d21648
Show file tree

Hide file tree

Showing 13 changed files with 150 additions and 71 deletions.
diff --git a/app/components/calendar/entry/EntryViewSlideover.vue b/app/components/calendar/entry/EntryViewSlideover.vue
@@ -205,7 +205,7 @@ const canDo = computed(() => ({
                         <UDivider />
                     </template>
 
-                    <div class="mx-auto max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
+                    <div class="mx-auto w-full max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
                         <HTMLContent v-if="entry.content?.content" class="px-4 py-2" :value="entry.content.content" />
                     </div>
                 </template>

diff --git a/app/components/documents/DocumentEditor.vue b/app/components/documents/DocumentEditor.vue
@@ -645,7 +645,7 @@ logger.info(
                             <TiptapEditor
                                 v-model="state.content"
                                 :disabled="!canEdit || !canDo.edit"
-                                class="mx-auto max-w-screen-xl flex-1 overflow-y-hidden"
+                                class="mx-auto w-full max-w-screen-xl flex-1 overflow-y-hidden"
                                 rounded="rounded-none"
                             >
                                 <template #footer>

diff --git a/app/components/documents/DocumentView.vue b/app/components/documents/DocumentView.vue
@@ -516,7 +516,7 @@ defineShortcuts({
                 <h2 class="sr-only">
                     {{ $t('common.content') }}
                 </h2>
-                <div class="mx-auto max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
+                <div class="mx-auto w-full max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
                     <HTMLContent v-if="doc.content?.content" class="px-4 py-2" :value="doc.content.content" />
                 </div>
             </div>

diff --git a/app/components/documents/templates/TemplateEditor.vue b/app/components/documents/templates/TemplateEditor.vue
@@ -380,9 +380,19 @@ const categoriesLoading = ref(false);
         </UDashboardNavbar>
 
         <UDashboardPanelContent class="p-0">
-            <UTabs v-model="selectedTab" :items="items" class="w-full" :ui="{ list: { rounded: '' } }">
+            <UTabs
+                v-model="selectedTab"
+                :items="items"
+                class="flex flex-1 flex-col"
+                :ui="{
+                    wrapper: 'space-y-0 overflow-y-hidden',
+                    container: 'flex flex-1 flex-col overflow-y-hidden',
+                    base: 'flex flex-1 flex-col overflow-y-hidden',
+                    list: { rounded: '' },
+                }"
+            >
                 <template #details>
-                    <UContainer class="w-full">
+                    <UContainer class="mt-2 w-full overflow-y-scroll">
                         <div>
                             <UFormGroup name="weight" :label="`${$t('common.template', 1)} ${$t('common.weight')}`">
                                 <UInput
@@ -479,7 +489,7 @@ const categoriesLoading = ref(false);
                 </template>
 
                 <template #content>
-                    <UContainer class="w-full">
+                    <UContainer class="flex w-full flex-1 flex-col overflow-y-hidden">
                         <SingleHint
                             class="my-2"
                             hint-id="template_editor_templating"
@@ -488,55 +498,62 @@ const categoriesLoading = ref(false);
                             link-target="_blank"
                         />
 
-                        <div>
-                            <UFormGroup name="contentTitle" :label="`${$t('common.content')} ${$t('common.title')}`" required>
-                                <UTextarea v-model="state.contentTitle" name="contentTitle" :rows="2" />
-                            </UFormGroup>
-
-                            <UFormGroup name="category" :label="$t('common.category', 1)">
-                                <ClientOnly>
-                                    <UInputMenu
-                                        v-model="state.category"
-                                        option-attribute="name"
-                                        :search-attributes="['name']"
-                                        block
-                                        nullable
-                                        :search="
-                                            async (search: string) => {
-                                                try {
-                                                    categoriesLoading = true;
-                                                    const categories = await completorStore.completeDocumentCategories(search);
-                                                    categoriesLoading = false;
-                                                    return categories;
-                                                } catch (e) {
-                                                    handleGRPCError(e as RpcError);
-                                                    throw e;
-                                                } finally {
-                                                    categoriesLoading = false;
-                                                }
+                        <UFormGroup name="contentTitle" :label="`${$t('common.content')} ${$t('common.title')}`" required>
+                            <UTextarea v-model="state.contentTitle" name="contentTitle" :rows="2" />
+                        </UFormGroup>
+
+                        <UFormGroup name="category" :label="$t('common.category', 1)">
+                            <ClientOnly>
+                                <UInputMenu
+                                    v-model="state.category"
+                                    option-attribute="name"
+                                    :search-attributes="['name']"
+                                    block
+                                    nullable
+                                    :search="
+                                        async (search: string) => {
+                                            try {
+                                                categoriesLoading = true;
+                                                const categories = await completorStore.completeDocumentCategories(search);
+                                                categoriesLoading = false;
+                                                return categories;
+                                            } catch (e) {
+                                                handleGRPCError(e as RpcError);
+                                                throw e;
+                                            } finally {
+                                                categoriesLoading = false;
                                             }
-                                        "
-                                        search-lazy
-                                        :search-placeholder="$t('common.search_field')"
-                                    >
-                                        <template #option-empty="{ query: search }">
-                                            <q>{{ search }}</q> {{ $t('common.query_not_found') }}
-                                        </template>
-                                        <template #empty> {{ $t('common.not_found', [$t('common.category', 2)]) }} </template>
-                                    </UInputMenu>
-                                </ClientOnly>
-                            </UFormGroup>
-
-                            <UFormGroup name="contentState" :label="`${$t('common.content')} ${$t('common.state')}`">
-                                <UTextarea v-model="state.contentState" name="contentState" :rows="2" />
-                            </UFormGroup>
-
-                            <UFormGroup name="content" :label="`${$t('common.content')} ${$t('common.template')}`" required>
-                                <ClientOnly>
-                                    <TiptapEditor v-model="state.content" split-screen wrapper-class="min-h-72" />
-                                </ClientOnly>
-                            </UFormGroup>
-                        </div>
+                                        }
+                                    "
+                                    search-lazy
+                                    :search-placeholder="$t('common.search_field')"
+                                >
+                                    <template #option-empty="{ query: search }">
+                                        <q>{{ search }}</q> {{ $t('common.query_not_found') }}
+                                    </template>
+                                    <template #empty> {{ $t('common.not_found', [$t('common.category', 2)]) }} </template>
+                                </UInputMenu>
+                            </ClientOnly>
+                        </UFormGroup>
+
+                        <UFormGroup name="contentState" :label="`${$t('common.content')} ${$t('common.state')}`">
+                            <UTextarea v-model="state.contentState" name="contentState" :rows="2" />
+                        </UFormGroup>
+
+                        <UFormGroup
+                            name="content"
+                            :label="`${$t('common.content')} ${$t('common.template')}`"
+                            required
+                            class="flex flex-1 flex-col overflow-y-hidden"
+                            :ui="{ container: 'flex flex-1 overflow-y-hidden' }"
+                        >
+                            <ClientOnly>
+                                <TiptapEditor
+                                    v-model="state.content"
+                                    class="mx-auto w-full max-w-screen-xl flex-1 overflow-y-hidden"
+                                />
+                            </ClientOnly>
+                        </UFormGroup>
                     </UContainer>
                 </template>
             </UTabs>

diff --git a/app/components/mailer/TemplateEditForm.vue b/app/components/mailer/TemplateEditForm.vue
@@ -104,7 +104,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                 <ClientOnly>
                     <TiptapEditor
                         v-model="state.content"
-                        class="mx-auto max-w-screen-xl flex-1 overflow-y-hidden"
+                        class="mx-auto w-full max-w-screen-xl flex-1 overflow-y-hidden"
                         wrapper-class="min-h-80"
                     />
                 </ClientOnly>

diff --git a/app/components/mailer/TemplatesModal.vue b/app/components/mailer/TemplatesModal.vue
@@ -110,7 +110,6 @@ const editing = ref(false);
                                             v-model="templates.templates[index].content"
                                             disabled
                                             hide-toolbar
-                                            split-screen
                                             wrapper-class="min-h-44"
                                         />
                                     </ClientOnly>

diff --git a/app/components/partials/TiptapEditor.vue b/app/components/partials/TiptapEditor.vue
@@ -41,6 +41,7 @@ import FontSize from 'tiptap-extension-font-size';
 import UniqueId from 'tiptap-unique-id';
 import { ImageResize } from '~/composables/tiptap/extensions/imageResize';
 import SearchAndReplace from '~/composables/tiptap/extensions/searchAndReplace';
+import TiptapEditorSourceCodeModal from './TiptapEditorSourceCodeModal.vue';
 
 const props = withDefaults(
     defineProps<{
@@ -49,7 +50,6 @@ const props = withDefaults(
         limit?: number;
         disabled?: boolean;
         placeholder?: string;
-        splitScreen?: boolean;
         hideToolbar?: boolean;
         commentMode?: boolean;
         rounded?: string;
@@ -59,7 +59,6 @@ const props = withDefaults(
         limit: undefined,
         disabled: false,
         placeholder: undefined,
-        splitScreen: false,
         hideToolbar: false,
         commentMode: false,
         rounded: 'rounded',
@@ -72,6 +71,8 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+const modal = useModal();
+
 const content = useVModel(props, 'modelValue', emit);
 
 const extensions: Extensions = [
@@ -975,6 +976,24 @@ onBeforeUnmount(() => {
                         @click="editor.chain().focus().redo().run()"
                     />
                 </UButtonGroup>
+
+                <UDivider
+                    v-if="!commentMode"
+                    orientation="vertical"
+                    :ui="{ border: { base: 'border-gray-200 dark:border-gray-700' } }"
+                />
+                <UButton
+                    v-if="!commentMode"
+                    color="white"
+                    variant="ghost"
+                    icon="i-mdi-file-code"
+                    @click="
+                        modal.open(TiptapEditorSourceCodeModal, {
+                            content: content,
+                            'onUpdate:content': ($event) => (content = $event),
+                        })
+                    "
+                />
             </div>
         </div>
 
@@ -1015,14 +1034,6 @@ onBeforeUnmount(() => {
                 'prose-hr:my-0.5',
             ]"
         />
-        <UTextarea
-            v-if="splitScreen"
-            v-model="content"
-            :rows="24"
-            autoresize
-            class="border-t-2 border-gray-500"
-            :ui="{ rounded: '' }"
-        />
 
         <div v-if="editor" class="flex w-full flex-none justify-between bg-gray-100 px-1 text-center dark:bg-gray-800">
             <div class="flex flex-1">

diff --git a/app/components/partials/TiptapEditorSourceCodeModal.vue b/app/components/partials/TiptapEditorSourceCodeModal.vue
@@ -0,0 +1,48 @@
+<script lang="ts" setup>
+const props = defineProps<{
+    content: string;
+}>();
+
+const emit = defineEmits<{
+    (e: 'update:content', val: string): void;
+}>();
+
+const { isOpen } = useModal();
+
+const content = useVModel(props, 'content', emit);
+</script>
+
+<template>
+    <UModal fullscreen>
+        <UCard
+            :ui="{
+                ring: '',
+                divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+                base: 'flex flex-1 flex-col',
+                body: { base: 'flex flex-1 flex-col' },
+            }"
+        >
+            <template #header>
+                <div class="flex items-center justify-between">
+                    <h3 class="text-2xl font-semibold leading-6">
+                        {{ $t('common.source_code') }}
+                    </h3>
+
+                    <UButton color="gray" variant="ghost" icon="i-mdi-window-close" class="-my-1" @click="isOpen = false" />
+                </div>
+            </template>
+
+            <div class="mx-auto flex w-full max-w-screen-xl flex-1 flex-col">
+                <UTextarea v-model="content" autoresize class="flex flex-1 flex-col" :ui="{ base: 'flex-1' }" />
+            </div>
+
+            <template #footer>
+                <UButtonGroup class="inline-flex w-full">
+                    <UButton block class="flex-1" color="black" @click="isOpen = false">
+                        {{ $t('common.close', 1) }}
+                    </UButton>
+                </UButtonGroup>
+            </template>
+        </UCard>
+    </UModal>
+</template>
diff --git a/app/components/qualifications/QualificationEditor.vue b/app/components/qualifications/QualificationEditor.vue
@@ -456,7 +456,7 @@ const selectedTab = computed({
                                 <TiptapEditor
                                     v-model="state.content"
                                     :disabled="!canDo.edit"
-                                    class="mx-auto max-w-screen-xl flex-1 overflow-y-hidden"
+                                    class="mx-auto w-full max-w-screen-xl flex-1 overflow-y-hidden"
                                     rounded="rounded-none"
                                 />
                             </ClientOnly>

diff --git a/app/components/qualifications/QualificationView.vue b/app/components/qualifications/QualificationView.vue
@@ -378,7 +378,7 @@ const accordionItems = computed(() =>
                                 {{ $t('common.content') }}
                             </h2>
 
-                            <div class="mx-auto max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
+                            <div class="mx-auto w-full max-w-screen-xl break-words rounded-lg bg-neutral-100 dark:bg-base-900">
                                 <HTMLContent
                                     v-if="qualification.content?.content"
                                     class="px-4 py-2"

diff --git a/app/components/wiki/PageEditor.vue b/app/components/wiki/PageEditor.vue
@@ -362,7 +362,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
                         <ClientOnly>
                             <TiptapEditor
                                 v-model="state.content"
-                                class="mx-auto max-w-screen-xl flex-1 overflow-y-hidden"
+                                class="mx-auto w-full max-w-screen-xl flex-1 overflow-y-hidden"
                                 rounded="rounded-none"
                             />
                         </ClientOnly>

diff --git a/i18n/locales/de/de.json b/i18n/locales/de/de.json
@@ -541,7 +541,9 @@
         "with_header_row": "Mit Kopfzeile",
         "url": "URL",
         "link": "Verlinken",
-        "unlink": "Auflösen"
+        "unlink": "Auflösen",
+        "editor": "Editor",
+        "source_code": "Quellcode"
     },
     "components": {
         "partials": {

diff --git a/i18n/locales/en/en.json b/i18n/locales/en/en.json
@@ -541,7 +541,9 @@
         "with_header_row": "With header row",
         "url": "URL",
         "link": "Link",
-        "unlink": "Unlink"
+        "unlink": "Unlink",
+        "editor": "Editor",
+        "source_code": "Source Code"
     },
     "components": {
         "partials": {