chore(front): replace components in embed modal
This commit is contained in:
parent
d0819c9ffa
commit
aa6b0ad325
|
@ -5,6 +5,11 @@ import { useStore } from '~/store'
|
||||||
import { useClipboard } from '@vueuse/core'
|
import { useClipboard } from '@vueuse/core'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
import Button from '~/components/ui/Button.vue'
|
||||||
|
import Alert from '~/components/ui/Alert.vue'
|
||||||
|
import Input from '~/components/ui/Input.vue'
|
||||||
|
import Spacer from '~/components/ui/Spacer.vue'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
type: string
|
type: string
|
||||||
id: number
|
id: number
|
||||||
|
@ -69,54 +74,55 @@ const { copy, copied } = useClipboard({ source: embedCode })
|
||||||
<p>
|
<p>
|
||||||
{{ t('components.audio.EmbedWizard.help.width') }}
|
{{ t('components.audio.EmbedWizard.help.width') }}
|
||||||
</p>
|
</p>
|
||||||
<input
|
<Input
|
||||||
id="embed-width"
|
id="embed-width"
|
||||||
v-model.number="width"
|
v-model.number="width"
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
step="10"
|
step="10"
|
||||||
>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<template v-if="type != 'track'">
|
<template v-if="type != 'track'">
|
||||||
<br>
|
<br>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
|
<label for="embed-height">{{ t('components.audio.EmbedWizard.label.height') }}</label>
|
||||||
<input
|
<Input
|
||||||
id="embed-height"
|
id="embed-height"
|
||||||
v-model="height"
|
v-model="height"
|
||||||
type="number"
|
type="number"
|
||||||
:min="minHeight"
|
:min="minHeight"
|
||||||
max="1000"
|
max="1000"
|
||||||
step="10"
|
step="10"
|
||||||
>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
<Spacer />
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<button
|
<Button
|
||||||
class="ui right accent labeled icon floated button"
|
class="right floated"
|
||||||
@click="copy()"
|
@click="copy()"
|
||||||
|
icon="bi-copy"
|
||||||
|
secondary
|
||||||
>
|
>
|
||||||
<i class="copy icon" />
|
|
||||||
{{ t('components.audio.EmbedWizard.button.copy') }}
|
{{ t('components.audio.EmbedWizard.button.copy') }}
|
||||||
</button>
|
</Button>
|
||||||
<label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
|
<label for="embed-width">{{ t('components.audio.EmbedWizard.label.embed') }}</label>
|
||||||
<p>
|
<p>
|
||||||
{{ t('components.audio.EmbedWizard.help.embed') }}
|
{{ t('components.audio.EmbedWizard.help.embed') }}
|
||||||
</p>
|
</p>
|
||||||
<textarea
|
<textarea
|
||||||
v-model="embedCode"
|
v-model="embedCode"
|
||||||
rows="5"
|
rows="3"
|
||||||
readonly
|
readonly
|
||||||
|
style="width: 100%;"
|
||||||
/>
|
/>
|
||||||
<div class="ui right">
|
<Alert
|
||||||
<p
|
v-if="copied"
|
||||||
v-if="copied"
|
green
|
||||||
class="message"
|
>
|
||||||
>
|
{{ t('components.audio.EmbedWizard.message.copy') }}
|
||||||
{{ t('components.audio.EmbedWizard.message.copy') }}
|
</Alert>
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue