Add full screen modal for images

client/src/App.vue

@@ -17,6 +17,7 @@
   import NewObjectiveGroupWizard from '@/components/objective-groups/NewObjectiveGroupWizard';
   import EditObjectiveGroupWizard from '@/components/objective-groups/EditObjectiveGroupWizard';
   import NewProjectEntryWizard from '@/components/portfolio/NewProjectEntryWizard';
+  import FullscreenImage from '@/components/FullscreenImage';
 
   export default {
     name: 'App',
@@ -32,7 +33,8 @@
       EditRoomEntryWizard,
       NewObjectiveGroupWizard,
       EditObjectiveGroupWizard,
-      NewProjectEntryWizard
+      NewProjectEntryWizard,
+      FullscreenImage
     },
 
     computed: {

client/src/components/FullscreenImage.vue

@@ -0,0 +1,34 @@
+<template>
+  <modal class="fullscreen-image" :hide-header="true" :fullscreen="true">
+    <img class="fullscreen-image__image" :src="imageUrl">
+  </modal>
+
+</template>
+
+<script>
+  import Modal from '@/components/Modal';
+
+  export default {
+    components: {
+      Modal
+    },
+
+    computed: {
+      imageUrl() {
+        return this.$store.state.imageUrl;
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  .fullscreen-image {
+    &__image {
+      max-width: 100%;
+      width: 100%;
+      height: auto;
+      max-height: 95vh;
+      vertical-align: bottom;
+    }
+  }
+</style>

client/src/components/Modal.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="modal__backdrop">
-    <div class="modal" :class="{'modal--hide-header': hideHeader}">
+    <div class="modal" :class="{'modal--hide-header': hideHeader, 'modal--fullscreen': fullscreen}">
       <div class="modal__header">
         <slot name="header"></slot>
       </div>
       <div class="modal__body">
+        <div class="modal__close-button" @click="hideModal">
+          <cross class="modal__close-icon"></cross>
+        </div>
         <slot></slot>
       </div>
       <div class="modal__footer">
@@ -18,14 +21,24 @@
 </template>
 
 <script>
+  import Cross from '@/components/icons/Cross';
+
   export default {
     props: {
       hideHeader: {
         type: Boolean,
         default: false
+      },
+      fullscreen: {
+        type: Boolean,
+        default: false
       }
     },
 
+    components: {
+      Cross
+    },
+
     methods: {
       hideModal() {
         this.$store.dispatch('hideModal');
@@ -64,6 +77,27 @@
       padding: $default-padding;
     }
 
+    &--fullscreen {
+      width: 95vw;
+      height: auto;
+      grid-template-rows: 1fr;
+      grid-template-areas: "body";
+      overflow: hidden;
+    }
+
+    &--fullscreen &__footer {
+      display: none;
+    }
+
+    &--fullscreen &__body {
+      padding: 0;
+      overflow-y: hidden;
+    }
+
+    &--fullscreen &__close-button {
+      display: flex;
+    }
+
     &__backdrop {
       display: grid;
       position: fixed;
@@ -88,6 +122,23 @@
       box-sizing: border-box;
     }
 
+    &__close-button {
+      display: none;
+      cursor: pointer;
+      position: absolute;
+      right: 15px;
+      top: 15px;
+      background: rgba($color-white, 0.5);
+      border-radius: 40px;
+      padding: 10px;
+      align-content: center;
+    }
+
+    &__close-icon {
+      width: 40px;
+      height: 40px;
+    }
+
     &__footer {
       grid-area: footer;
       border-top: 1px solid $color-lightgrey;

client/src/components/content-blocks/ImageUrlBlock.vue

@@ -1,10 +1,16 @@
 <template>
-    <img :src="value.url" alt="" class="image-block">
+  <img :src="value.url" alt="" class="image-block" @click="openFullscreen">
 </template>
 
 <script>
   export default {
-    props: ['value']
+    props: ['value'],
+    methods: {
+      openFullscreen() {
+        this.$store.dispatch('showFullscreenImage', this.value.url);
+      }
+    }
+
   }
 </script>
 

client/src/components/icons/Cross.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><title>cross</title>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
     <path
       d="M53.91,50,87.19,16.73a2.77,2.77,0,1,0-3.91-3.91L50,46.09,16.73,12.81a2.77,2.77,0,1,0-3.91,3.91L46.09,50,12.81,83.27a2.77,2.77,0,1,0,3.91,3.91L50,53.91,83.27,87.19a2.77,2.77,0,0,0,3.91-3.91Z"/>
   </svg>

client/src/store/index.js

@@ -18,7 +18,8 @@ export default new Vuex.Store({
     parentModule: '',
     objectiveGroupType: '',
     currentObjectiveGroup: '',
-    parentProject: null
+    parentProject: null,
+    imageUrl: ''
   },
 
   getters: {},
@@ -41,6 +42,7 @@ export default new Vuex.Store({
       commit('setObjectiveGroupType', '');
       commit('setCurrentObjectiveGroup', '');
       commit('setParentProject', null);
+      commit('setImageUrl', '');
     },
     resetContentBlockPosition({commit}) {
       commit('setContentBlockPosition', {});
@@ -84,6 +86,10 @@ export default new Vuex.Store({
       commit('setParentProject', payload);
       dispatch('showModal', 'new-project-entry-wizard');
     },
+    showFullscreenImage({commit, dispatch}, payload) {
+      commit('setImageUrl', payload);
+      dispatch('showModal', 'fullscreen-image');
+    },
   },
 
   mutations: {
@@ -125,6 +131,9 @@ export default new Vuex.Store({
     },
     setParentProject(state, payload) {
       state.parentProject = payload;
+    },
+    setImageUrl(state, payload) {
+      state.imageUrl = payload;
     }
   }
 })