diff options
Diffstat (limited to 'packages/frontend/src/components/MkCode.vue')
| -rw-r--r-- | packages/frontend/src/components/MkCode.vue | 49 |
1 files changed, 41 insertions, 8 deletions
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index b39e6ff23c..cb0eef0549 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -4,18 +4,26 @@ SPDX-License-Identifier: AGPL-3.0-only --> <template> - <Suspense> - <template #fallback> - <MkLoading v-if="!inline ?? true" /> - </template> - <code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> - <XCode v-else :code="code" :lang="lang"/> - </Suspense> +<Suspense> + <template #fallback> + <MkLoading v-if="!inline ?? true"/> + </template> + <code v-if="inline" :class="$style.codeInlineRoot">{{ code }}</code> + <XCode v-else-if="show" :code="code" :lang="lang"/> + <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> + <div :class="$style.codePlaceholderContainer"> + <div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div> + <div>{{ i18n.ts.clickToShow }}</div> + </div> + </button> +</Suspense> </template> <script lang="ts" setup> -import { defineAsyncComponent } from 'vue'; +import { defineAsyncComponent, ref } from 'vue'; import MkLoading from '@/components/global/MkLoading.vue'; +import { defaultStore } from '@/store.js'; +import { i18n } from '@/i18n.js'; defineProps<{ code: string; @@ -23,6 +31,8 @@ defineProps<{ inline?: boolean; }>(); +const show = ref(!defaultStore.state.dataSaver.code); + const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')); </script> @@ -36,4 +46,27 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')) padding: .1em; border-radius: .3em; } + +.codePlaceholderRoot { + display: block; + width: 100%; + background: none; + border: none; + outline: none; + font: inherit; + color: inherit; + cursor: pointer; + + box-sizing: border-box; + border-radius: 8px; + padding: 24px; + margin-top: 4px; + color: #D4D4D4; + background: #1E1E1E; +} + +.codePlaceholderContainer { + text-align: center; + font-size: 0.8em; +} </style> |