diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue index c91f46bb9043c77abb645762b000186583193767..e3732e35ac7031c449dec868f18061ecd92acadf 100644 --- a/src/components/ArticleFooter.vue +++ b/src/components/ArticleFooter.vue @@ -1,13 +1,32 @@ <template> <div class="article_footer"> - <v-btn v-if="!webShareApiSupported" x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link"> - <v-icon small>link</v-icon> <span class = "button-text">Kopier lenke</span> + <v-snackbar center left light + tile + v-model='copy_popup' + timeout="2000"> + + <span class="text-center">{{what_copied}} er kopiert til utklippstavla</span> + <template v-slot:action="{ attrs }"> + <v-btn + color="primary" + text + v-bind="attrs" + @click="copy_popup = false" + > + <v-icon>close</v-icon> + </v-btn> + </template> + </v-snackbar> + + <v-btn v-if="showLinkCopy" + x-small depressed class="toolbar-button" rounded tabindex="0" @click="copy_link"> + <v-icon small>link</v-icon><span class = "button-text">Kopier lenke</span> </v-btn> <v-btn v-if="webShareApiSupported" depressed x-small class="toolbar-button" rounded tabindex="0" @click="shareViaWebShare"> <v-icon x-small>share</v-icon><span class = "button-text">Del ordet</span> </v-btn> - <v-dialog max-width="600px" rounded="0" v-model="citation_dialog"> + <v-dialog max-width="600px" v-model="citation_dialog"> <template v-slot:activator="{ on, attrs }"> <v-btn depressed x-small class="toolbar-button" rounded tabindex="0" v-on="on" v-bind="attrs"> <v-icon x-small>format_quote</v-icon> <span class = "button-text">Siter</span> @@ -15,7 +34,7 @@ </template> - <v-card rounded="0" class="info-card"> + <v-card class="info-card"> {{{"nn": "Ønskjer du å sitere denne artikkelen i Nynorskordboka, rår vi deg til å gje opp når artikkelen vart henta (lesen), t.d. slik:", "bm": "Ønsker du å sitere denne artikkelen i Bokmålsordboka, anbefaler vi å oppgi når artikkelen ble hentet (lest), f.eks. slik:"}[this.article.dictionary]}}<br/> <div id = "citation" v-html="this.create_citation()"/> @@ -34,8 +53,6 @@ </template> <script> -const host = window.location.hostname === 'localhost'? 'https://dev.ordbok.uib.no/' : window.location.href - export default { name: 'ArticleFooter', props: { @@ -45,13 +62,18 @@ export default { webShareApiSupported() { return navigator.share }, + showLinkCopy() { + return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard + }, hasPointer() { return window.matchMedia('(hover: hover) and (pointer: fine)').matches }, }, data: function() { return { - citation_dialog: false + copy_popup: false, + citation_dialog: false, + what_copied: null } }, @@ -64,7 +86,7 @@ export default { }) }, create_link() { - return host + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) + return 'https://ordbokene.no/' + this.article.dictionary + '/' + this.article.article_id + '/' + encodeURIComponent(this.article.lemmas[0].lemma) }, get_citation_info() { let date = new Date(); @@ -83,13 +105,23 @@ export default { return citation }, copy_link() { - navigator.clipboard.writeText(this.create_link()); + let link = this.create_link() + let self = this + navigator.clipboard.writeText(link).then(() => { + self.what_copied = "Lenka" + self.copy_popup = true + }).catch(err => { + console.log("ERROR COPYING:",err) + }) }, copy_citation() { + let citation = document.getElementById("citation").textContent; navigator.clipboard.writeText(citation) this.citation_dialog = false + this.what_copied = "Sitatet" + this.copy_popup = true }, close_citation_dialog() { diff --git a/src/components/Header.vue b/src/components/Header.vue index 961544b78dec56b3f5343555446a481356397179..457446ed8bfd4e73bc92d6c2ba48cdfaf4e69b50 100644 --- a/src/components/Header.vue +++ b/src/components/Header.vue @@ -7,13 +7,13 @@ <span class="header_group_list" v-if="group_list.length" tabindex="0">{{group_list}}</span> <span v-if="split_inf" tabindex="0"> (kløyvd infinitiv: <i>-a</i> - <v-menu rounded="0" v-model="menu" offset-x max-width="200px"> + <v-menu tile v-model="menu" offset-x max-width="200px"> <template v-slot:activator="{ on, attrs }"> <v-btn aria-label="Mer informasjon om kløyvd infinitiv" x-small icon v-on="on" v-bind="attrs" class="info-button"> <v-icon color="primary" size="14px">$vuetify.icons.value.info</v-icon> </v-btn> </template> - <v-card rounded="0" class="info-card"> + <v-card tile class="info-card"> Dersom du bruker kløyvd infinitiv, skal dette verbet ha <i>-a</i> i infinitiv. Les meir <a target="_blank" href="https://www.sprakradet.no/svardatabase/sporsmal-og-svar/kloyvd-infinitiv-/">her</a>. </v-card>