Changed Share style in multiple buttons (#1099)

* Issue#1088 ✨ Changed share button in multiple buttons style * added mistaken removed part in a merge conflict
alfg · Oct 7, 2021 · 50d93c3 · 50d93c3
1 parent 673840e
commit 50d93c3
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 34 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app" class="mb-4">
-    <GitHubCorner v-if="!isMobile && !isPrintPage" />
+    <GitHubCorner class="theme-bg-color" v-if="!isMobile && !isPrintPage" />
     <ThemeHandler class="mt-2 ml-2" v-if="!isMobile && !isPrintPage"></ThemeHandler>
     <div class="container mb-4 mt-4">
       <div class="mb-4 d-flex">

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -1,10 +1,14 @@
 @import './theme.css';
 @import './slider.css';
 
-svg{
+.theme-bg-color{
   color: var(--main-bg-color) !important;
 }
 
+.theme-link-color{
+  color: var(--main-link-color) !important;
+}
+
 .list-group-item {
   background-color: var(--main-bg-color);
   border: 1px solid var(--main-line-color);
@@ -55,4 +59,8 @@ a, a:hover, h5 {
 .card {
   background-color: var(--main-bg-color);
   border:1px solid var(--main-line-color);
+}
+
+.cursor-pointer {
+  cursor: pointer;
 }
diff --git a/src/components/GitHubCorner.vue b/src/components/GitHubCorner.vue
@@ -8,6 +8,7 @@
     <svg
       width="80"
       height="80"
+      class="theme-bg-color"
       viewBox="0 0 250 250"
       style="fill:#E5F578; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
       aria-hidden="true"

diff --git a/src/components/RecipeToolbar.vue b/src/components/RecipeToolbar.vue
@@ -18,44 +18,45 @@
       :isFavorited="isFavorited"
     ></FavoriteStar>
 
-    <div class="print-button" v-if="!isMobile">
+    <div class="mx-1 print-button" v-if="!isMobile">
       <b-button v-if="isPrint" variant="outline-primary" @click="print()">
         {{ $t('Print') }}
       </b-button>
       <b-button v-else variant="outline-primary" :to="`/recipe/${name}/print`" target="_blank">
         {{ $t('Print') }}
       </b-button>
     </div>
+    <ShareNetwork
+      network="facebook"
+      :url="url"
+      :title="drink.name"
+      :description="drink.description"
+      :hashtags="drink.keywords.join()"
+      class="px-1 clickable-icon-hover"
+    >
+      <BIconFacebook font-scale="2"></BIconFacebook>
+    </ShareNetwork>
+    <ShareNetwork
+      network="twitter"
+      :url="url"
+      :title="drink.name"
+      :description="drink.description"
+      :hashtags="drink.keywords.join()"
+      class="px-1 clickable-icon-hover"
+    >
+      <BIconTwitter font-scale="2"></BIconTwitter>
+    </ShareNetwork>
 
-    <div class="share-button">
-      <b-dropdown :text="$t('Share')" variant="outline-primary" right class="m-2">
-        <b-dropdown-item>
-          <ShareNetwork
-            network="facebook"
-            :url="url"
-            :title="drink.name"
-            :description="drink.description"
-            :hashtags="drink.keywords.join()"
-          >
-            {{ $t('Share on Facebook') }}
-          </ShareNetwork>
-        </b-dropdown-item>
-        <b-dropdown-item>
-          <ShareNetwork
-            network="twitter"
-            :url="url"
-            :title="drink.name"
-            :description="drink.description"
-            :hashtags="drink.keywords.join()"
-          >
-            {{ $t('Share on Twitter') }}
-          </ShareNetwork>
-        </b-dropdown-item>
-        <b-dropdown-item @click.prevent="copyUrl">
-          <a href="#">{{ $t('Copy URL') }}</a>
-        </b-dropdown-item>
-      </b-dropdown>
-    </div>
+    <BIconFiles
+      class="mx-1 theme-link-color cursor-pointer clickable-icon-hover"
+      font-scale="2"
+      @click="copyUrl"
+    >
+    </BIconFiles>
+
+    <b-toast v-model="copyToast" :title="$t('Link Copied')" :auto-hide-delay="500">
+      {{ $t('The link to this page is copied in your clipboard') }}
+    </b-toast>
   </div>
 </template>
 
@@ -77,6 +78,7 @@ export default {
     return {
       favorites: [],
       showImage: true,
+      copyToast: false,
     };
   },
   created() {
@@ -119,6 +121,7 @@ export default {
         document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
       el.select();
       document.execCommand('copy');
+      this.copyToast = true;
       document.body.removeChild(el);
       if (selected) {
         document.getSelection().removeAllRanges();
@@ -129,6 +132,16 @@ export default {
 };
 </script>
 
+<style scoped>
+.clickable-icon-hover {
+  transition: transform 0.2s;
+}
+
+.clickable-icon-hover:hover {
+  transform: scale(1.2);
+}
+</style>
+
 <i18n>
 {
   "ja": {

diff --git a/src/main.js b/src/main.js
@@ -4,7 +4,7 @@ import './assets/css/main.css';
 
 import Vue from 'vue';
 import VueMeta from 'vue-meta';
-import BoostrapVue from 'bootstrap-vue';
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
 import VueSocialSharing from 'vue-social-sharing';
 import App from './App.vue';
 import router from './router';
@@ -16,7 +16,8 @@ Vue.config.productionTip = false;
 Vue.config.ignoredElements = ['amp-ad'];
 
 Vue.use(VueMeta, { refreshOnceOnNavigation: true });
-Vue.use(BoostrapVue);
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);
 Vue.use(VueSocialSharing);
 
 Vue.mixin({