From b8d1cf530ac5968929f562a736d7834ec4395bd5 Mon Sep 17 00:00:00 2001
From: "Henrik.Askjer" <henrik.askjer@uib.no>
Date: Wed, 28 Jul 2021 09:30:14 +0200
Subject: [PATCH] Add share button
---
src/components/ArticleFooter.vue | 11 ++++++++---
src/main.js | 8 --------
src/plugins/vuetify.js | 28 ++++++++++++++++++++++++++++
3 files changed, 36 insertions(+), 11 deletions(-)
diff --git a/src/components/ArticleFooter.vue b/src/components/ArticleFooter.vue
index c48598d4..91aa8c9b 100644
--- a/src/components/ArticleFooter.vue
+++ b/src/components/ArticleFooter.vue
@@ -3,14 +3,15 @@
<span v-if="webShareApiSupported">
<button class="share_button" @click="shareViaWebShare">
<span class = "share_text">Del ordet</span>
- <font-awesome-icon icon="share-alt-square" size = "lg"/>
+ <v-icon dense>$vuetify.icons.share</v-icon>
</button>
</span>
<span v-else>
<button class="share_button">
<ShareNetwork network="facebook"
+ title=""
:url="share_link">
- <font-awesome-icon :icon="['fab', 'facebook-square']" size="lg" />
+ <v-icon dense>$vuetify.icons.facebook</v-icon>
</ShareNetwork>
</button>
<button class="share_button">
@@ -19,7 +20,7 @@
:url="share_link"
:title="dict_label"
hashtags="#ordbøkene">
- <font-awesome-icon :icon="['fab', 'twitter-square']" size="lg" />
+ <v-icon dense>$vuetify.icons.twitter</v-icon>
</ShareNetwork>
</button>
</span>
@@ -67,6 +68,10 @@ export default {
padding-right: 10px;
}
+.v-icon {
+ color: var(--v-primary-base) !important;
+}
+
.share_button {
padding-right: 4px;
font-weight: bold;
diff --git a/src/main.js b/src/main.js
index fd6606f4..3c9f9b19 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,14 +11,6 @@ import VueSocialSharing from 'vue-social-sharing'
Vue.use(VueSocialSharing);
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
-import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
-Vue.component('font-awesome-icon', FontAwesomeIcon);
-
-
Vue.config.productionTip = false
Vue.use(VueRouter)
Vue.use(VuePlausible, {
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index a31b69f3..5b2e8de6 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,9 +1,36 @@
import Vue from 'vue';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import Vuetify from 'vuetify/lib/framework';
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faShareAltSquare } from '@fortawesome/free-solid-svg-icons'
+import { faFacebookSquare, faTwitterSquare } from '@fortawesome/free-brands-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+library.add(faFacebookSquare, faTwitterSquare, faShareAltSquare)
+Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.use(Vuetify);
+const FONTAWESOME_ICONS = {
+ facebook: {
+ component: FontAwesomeIcon,
+ props: {
+ icon: ["fab", "facebook-square"]
+ }
+ },
+ twitter: {
+ component: FontAwesomeIcon,
+ props: {
+ icon: ["fab", "twitter-square"]
+ }
+ },
+ share: {
+ component: FontAwesomeIcon,
+ props: {
+ icon: "share-alt-square"
+ }
+ }
+}
+
export default new Vuetify({
breakpoint: {
thresholds: {
@@ -34,5 +61,6 @@ export default new Vuetify({
},
icons: {
iconfont: 'md',
+ values: FONTAWESOME_ICONS,
}
});
--
GitLab