diff --git a/changes/changelog.d/embed-wizard.enhancement b/changes/changelog.d/embed-wizard.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..7c34913229866a89f5e3219345cfdd378769de27 --- /dev/null +++ b/changes/changelog.d/embed-wizard.enhancement @@ -0,0 +1 @@ +Enhanced the design of the embed wizard. (!619) diff --git a/front/src/components/audio/EmbedWizard.vue b/front/src/components/audio/EmbedWizard.vue index f919ec5cd9a9c87ab3f8eeed97f0dea1ab617e63..a5311d106e819ed21232bb90722af14e41600f67 100644 --- a/front/src/components/audio/EmbedWizard.vue +++ b/front/src/components/audio/EmbedWizard.vue @@ -17,12 +17,14 @@ </template> </div> <div class="field"> - <button @click="copy" class="ui right floated button"><translate :translate-context="'Popup/*/Button.Label/Verb'">Copy</translate></button> + <button @click="copy" class="ui right teal labeled icon floated button"><i class="copy icon"></i><translate :translate-context="'Popup/*/Button.Label/Verb'">Copy</translate></button> <label for="embed-width"><translate :translate-context="'Popup/Embed/Input.Label/Noun'">Embed code</translate></label> <p><translate :translate-context="'Popup/Embed/Paragraph'">Copy/paste this code in your website HTML</translate></p> - <div class="ui hidden divider"></div> - <textarea ref="textarea":value="embedCode" rows="3" readonly> + <textarea ref="textarea":value="embedCode" rows="5" readonly> </textarea> + <div class="ui right"> + <p class="message" v-if=copied><translate :translate-context="'Content/*/Paragraph'">Text copied to clipboard!</translate></p> + </div> </div> </div> </div> @@ -41,7 +43,8 @@ export default { let d = { width: null, height: 150, - minHeight: 100 + minHeight: 100, + copied: false } if (this.type === 'album') { d.height = 330 @@ -70,6 +73,11 @@ export default { copy () { this.$refs.textarea.select() document.execCommand("Copy") + let self = this + self.copied = true + this.timeout = setTimeout(() => { + self.copied = false + }, 5000) } } } @@ -77,4 +85,9 @@ export default { <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> +.message { + position: absolute; + right: 0; + bottom: -2em; +} </style>