gradido/frontend/src/components/ClipboardCopy.vue
2022-07-28 14:48:08 +02:00

35 lines
1.1 KiB
Vue

<template>
<div class="clipboard-copy">
<b-input-group v-if="canCopyLink" size="lg" class="mb-3" prepend="Link">
<b-form-input :value="link" type="text" readonly></b-form-input>
<b-input-group-append>
<b-button size="sm" text="Button" variant="primary" @click="copyLinkWithText">
{{ $t('gdd_per_link.copy-link-with-text') }}
</b-button>
<b-button size="sm" text="Button" variant="primary" @click="copyLink">
{{ $t('gdd_per_link.copy-link') }}
</b-button>
<b-button variant="primary" class="text-light" @click="$emit('show-qr-code-button')">
<b-img src="img/svg/qr-code.svg" width="19" class="svg"></b-img>
</b-button>
</b-input-group-append>
</b-input-group>
<div v-else>
<div class="alert-danger p-3">{{ $t('gdd_per_link.not-copied') }}</div>
<div class="alert-muted h3 p-3">{{ link }}</div>
</div>
</div>
</template>
<script>
import { copyLinks } from '../mixins/copyLinks'
export default {
name: 'ClipboardCopy',
mixins: [copyLinks],
}
</script>
<style>
.svg {
filter: brightness(0) invert(1);
}
</style>