diff options
Diffstat (limited to 'packages/frontend/src/components/MkCode.vue')
| -rw-r--r-- | packages/frontend/src/components/MkCode.vue | 70 |
1 files changed, 42 insertions, 28 deletions
diff --git a/packages/frontend/src/components/MkCode.vue b/packages/frontend/src/components/MkCode.vue index e0973b676a..acd2ea6f97 100644 --- a/packages/frontend/src/components/MkCode.vue +++ b/packages/frontend/src/components/MkCode.vue @@ -1,58 +1,72 @@ <!-- -SPDX-FileCopyrightText: syuilo and other misskey contributors +SPDX-FileCopyrightText: syuilo and misskey-project 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-if="show && lang" :code="code" :lang="lang"/> - <pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre> - <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> - <div :class="$style.codePlaceholderContainer"> - <div><i class="ph-code ph-bold ph-lg"></i> {{ i18n.ts.code }}</div> - <div>{{ i18n.ts.clickToShow }}</div> - </div> +<div :class="$style.codeBlockRoot"> + <button :class="$style.codeBlockCopyButton" class="_button" @click="copy"> + <i class="ph-copy ph-bold ph-lg"></i> </button> -</Suspense> + <Suspense> + <template #fallback> + <MkLoading /> + </template> + <XCode v-if="show && lang" :code="code" :lang="lang"/> + <pre v-else-if="show" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre> + <button v-else :class="$style.codePlaceholderRoot" @click="show = true"> + <div :class="$style.codePlaceholderContainer"> + <div><i class="ph-code ph-bold ph-lg"></i> {{ i18n.ts.code }}</div> + <div>{{ i18n.ts.clickToShow }}</div> + </div> + </button> + </Suspense> +</div> </template> <script lang="ts" setup> import { defineAsyncComponent, ref } from 'vue'; +import * as os from '@/os.js'; import MkLoading from '@/components/global/MkLoading.vue'; import { defaultStore } from '@/store.js'; import { i18n } from '@/i18n.js'; +import copyToClipboard from '@/scripts/copy-to-clipboard.js'; -defineProps<{ +const props = defineProps<{ code: string; lang?: string; - inline?: boolean; }>(); const show = ref(!defaultStore.state.dataSaver.code); const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')); + +function copy() { + copyToClipboard(props.code); + os.success(); +} </script> <style module lang="scss"> -.codeInlineRoot { - display: inline-block; - font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace; - overflow-wrap: anywhere; - color: #D4D4D4; - background: #1E1E1E; - padding: .1em; - border-radius: .3em; +.codeBlockRoot { + position: relative; +} + +.codeBlockCopyButton { + position: absolute; + top: 8px; + right: 8px; + opacity: 0.5; + + &:hover { + opacity: 0.8; + } } .codeBlockFallbackRoot { display: block; overflow-wrap: anywhere; - color: #D4D4D4; - background: #1E1E1E; + background: var(--bg); padding: 1em; margin: .5em 0; overflow: auto; @@ -77,8 +91,8 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue')) border-radius: var(--radius-sm); padding: 24px; margin-top: 4px; - color: #D4D4D4; - background: #1E1E1E; + color: var(--fg); + background: var(--bg); } .codePlaceholderContainer { |