From 23e7b571548bb1d9275209978a98c287d7fbc411 Mon Sep 17 00:00:00 2001
From: axolotle <nchesnais@mailoo.org>
Date: Mon, 3 Jan 2022 16:10:55 +0100
Subject: [PATCH] add text to ButtonExpand for artwork

---
 src/components/globals/ButtonExpand.vue | 27 +++++++++++++++++++++++--
 src/pages/gallery/GalleryView.vue       |  5 ++++-
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/components/globals/ButtonExpand.vue b/src/components/globals/ButtonExpand.vue
index a26de50..93631a6 100644
--- a/src/components/globals/ButtonExpand.vue
+++ b/src/components/globals/ButtonExpand.vue
@@ -10,6 +10,8 @@
       <path v-if="expanded" d="M20,30 h10 v-10 M45,20 v10 h10 M55,40 h-10 v10 M30,50 v-10 h-10" />
       <path v-else d="M20,30 v-10 h10 M45,20 h10 v10 M55,40 v10 h-10 M30,50 h-10 v-10" />
     </svg>
+
+    <span v-if="artwork" class="btn-artwork">Voir l'œuvre</span>
   </b-button>
 </template>
 
@@ -18,12 +20,15 @@ export default {
   name: 'ButtonExpand',
 
   props: {
-    expanded: { type: Boolean, default: false }
+    expanded: { type: Boolean, default: false },
+    artwork: { type: Boolean, default: false }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+$light-black: lighten($black, 20%);
+
 .btn-expand {
   padding: 0;
   width: 75px;
@@ -37,6 +42,11 @@ export default {
     path {
       stroke: $black;
     }
+
+    .btn-artwork {
+      border-color: $black;
+      box-shadow: 3px 5px 0 $black;
+    }
   }
 
   svg {
@@ -47,10 +57,23 @@ export default {
 
   path {
     fill: none;
-    stroke: lighten($black, 20%);
+    stroke: $light-black;
     stroke-width: 4px;
     stroke-linejoin: round;
     stroke-linecap: round;
   }
+
+  .btn-artwork {
+    position: absolute;
+    bottom: -35px;
+    left: -22.5px;
+    width: 120px;
+    height: 30px;
+    line-height: 1.5;
+    background-color: $white;
+    border: 2px solid $light-black;
+    border-radius: 50em;
+    box-shadow: 3px 5px 0 $light-black;
+  }
 }
 </style>
diff --git a/src/pages/gallery/GalleryView.vue b/src/pages/gallery/GalleryView.vue
index 4e3e1e9..5d030b2 100644
--- a/src/pages/gallery/GalleryView.vue
+++ b/src/pages/gallery/GalleryView.vue
@@ -7,7 +7,10 @@
         <div class="node-view-img-wrapper">
           <img :src="node.image.url" :alt="node.image.alt">
 
-          <button-expand v-if="node.iframeUrl" v-b-modal="'modal-creation' + node.id" class="center" />
+          <button-expand
+            v-if="node.iframeUrl" artwork
+            v-b-modal="'modal-creation' + node.id" class="center"
+          />
 
           <div class="btns-artwork">
             <b-button variant="depart" class="btn-shadow btn-artwork mr-2" @click="$emit('view-origin')">