enable image action menu; add popup

src/components/ImageGrid.vue

@@ -20,7 +20,7 @@
         </div>
         <div class="thumb-image-header">
           <div class="left-align">
-            <!-- <ImagesActionMenu v-bind:element="item"></ImagesActionMenu> -->
+            <ImagesActionMenu v-bind:element="item"></ImagesActionMenu>
             <div
               v-if="item.geoLocations != undefined && item.geoLocations.length > 0"
               class="header-item"
@@ -36,7 +36,7 @@
                 <i class="wikiglyph wikiglyph-new-window thumb-image-glyph"></i>
               </a>
             </div>
-            <!--ImagesRemoveMenu></ImagesRemoveMenu-->
+            <ImagesRemoveMenu></ImagesRemoveMenu>
           </div>
         </div>
       </div>
@@ -48,8 +48,8 @@
 
 <script>
 import ImageViewer from "@/components/image_viewer/ImageViewer";
-// import ImagesActionMenu from '@/components/menu/ImagesActionMenu'
-// import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu'
+import ImagesActionMenu from '@/components/menu/ImagesActionMenu';
+import ImagesRemoveMenu from '@/components/menu/ImagesRemoveMenu';
 
 export default {
   name: "ImageGrid",
@@ -62,9 +62,9 @@ export default {
     }
   },
   components: {
-    ImageViewer
-    // ImagesActionMenu,
-    // ImagesRemoveMenu,
+    ImageViewer,
+    ImagesActionMenu,
+    ImagesRemoveMenu,
   },
   methods: {
     getCredits(item) {

src/components/image_viewer/ImageViewer.vue

@@ -35,9 +35,11 @@
                       :tooltip="$t('general.menus.actionMenuTitle')"
                       :items="toolbarActionMenuItems"
                       @doMenuItemAction="onDoMenuItemAction"
+                      @click="showPopUp()"
                     >
                     <div slot="menu-title">{{ $t('general.menus.actionMenuTitle') }}</div>
                     </ToolbarMenu>
+                    <PopUp ref="popup"></PopUp>
                     <HeaderLink
                       v-if="element.infoURL"
                       class="toolbar-item neg"
@@ -472,6 +474,7 @@
 import HeaderLink from "@/components/HeaderLink";
 import Dataselect from "@/components/Dataselect";
 import ToolbarMenu from "@/components/menu/ToolbarMenu";
+import PopUp from "@/components/upload/Popup";
 
 const MENU_ACTIONS = {
   SELECT_HEADER: 0
@@ -500,14 +503,21 @@ export default {
         {
           id: MENU_ACTIONS.GEOLOCATE,
           text: "topic_page.TopicImages.imagesActionMenu.doGeolocatingText"
+        },
+        {
+          id: MENU_ACTIONS.UPLOAD,
+          text: "topic_page.TopicImages.imagesActionMenu.upload"
         }
-      ]
+      ],
+      clickPopUp: false,
     };
+  
   },
   components: {
     HeaderLink,
     Dataselect,
     ToolbarMenu,
+    PopUp,
   },
   props: {
     shouldShowDialog: Boolean
@@ -581,9 +591,17 @@ export default {
         // case MENU_ACTIONS.GEOLOCATE:
         //     ;
         //     break;
-        case MENU_ACTIONS.SELECT_HEADER:
+        // case MENU_ACTIONS.SELECT_HEADER:
+        case MENU_ACTIONS.UPLOAD:
+          console.log("I click upload");
+          this.showPopUp();
+          break;
       }
     },
+    showPopUp() {
+      console.log("hahaha");
+      this.$refs.popup.show();
+    },
     createMap() {
       var ol = this.$ol;
 

src/components/upload/Popup.vue

@@ -0,0 +1,48 @@
+<template>
+<div v-if="showModal" class="popup" >
+    <div class="popup-inner">
+        <slot></slot>
+        <button class="popup-close" @click.prevent="hide">
+        Close
+        </button>
+    </div>
+
+</div>
+</template>
+<script>
+export default{
+    name: 'PopUp',  data() {
+    return {
+      showModal: false,}},
+    methods: {
+        show(){
+            this.showModal = true;
+        },
+        hide() {
+      this.showModal = false;
+    },
+
+    }
+}
+</script>
+<style scoped>
+.popup{
+    position: fixed;
+    top: 0;
+    left:0;
+    right:0;
+    bottom:0;
+    z-index:99;
+    background: rgba(0,0,0,0.5);
+    display:flex;
+    align-items: center;
+    justify-content: center;
+
+
+}
+.popup-inner{
+    background: #FFF;
+    padding:32px;
+    }
+
+</style>

src/store/translation/en.json

@@ -274,7 +274,8 @@
                 "menuTooltip": "Actions",
                 "doGeolocatingText": "Set the location...",
                 "showImageText": "Show image",
-                "selectFeatured": "Choose as a header image"
+                "selectFeatured": "Choose as a header image",
+                "upload" : "upload"
             },
             "imagesRemoveMenu": {
                 "menuTitle": "Remove the image because...",