Display restart modal after exporting

Author: barryph

package-lock.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "core-js": "^2.6.5",
+    "portal-vue": "2.1.6",
     "postcss-import": "12.0.1",
     "prosemirror-example-setup": "1.0.1",
     "prosemirror-model": "1.7.2",

package.json

@@ -7,6 +7,8 @@
     <vue-page-transition :name="transitionName">
       <router-view />
     </vue-page-transition>
+
+    <portal-target name="modals" multiple />
   </div>
 </template>
 
@@ -40,4 +42,12 @@ export default {
   .fade-in-left .fade-in-left-leave-active {
     /* transition: all 10s ease !important; */
   }
+
+  .vue-slick-popover__overlay {
+    /* Stop overlay creating horizontal scroll from "width: 100vw" */
+    height: auto;
+    width: auto;
+    bottom: 0;
+    right: 0;
+  }
 </style>

src/App.vue

@@ -196,7 +196,7 @@ textarea.Input {
 .ButtonComplex .Button--outline,
 .Button--outline,
 .Button--invisible {
-  --button-color: theme(colors.text);
+  --button-color: var(--button-invert-color);
   --button-bg-color: transparent;
   --button-bg-color-hover: transparent;
 }

src/assets/css/element/element-button.css

@@ -107,6 +107,8 @@ export default {
 
       focused.focus();
       this.$refs.popover.close();
+
+      this.$emit('onExport');
     },
     exportGmail() {
       return this.exportReply(GmailFormatter);

src/components/ButtonExport.vue

@@ -0,0 +1,130 @@
+<template>
+  <transition name="Modal">
+    <div class="Modal-backdrop z-100" v-show="show" @click="dismiss">
+      <div class="Modal" @click="stopPropagation">
+        <slot />
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+// import IconBase from "@/components/IconBase";
+// import IconUIClose from "@/components/icons/IconUIClose";
+
+/* https://learn.adamwathan.com/advanced-vue/encapsulating-external-behavior-background-scrolling */
+
+export default {
+  components: {},
+  props: {
+    show: { required: true },
+    preventBackgroundScrolling: { default: true },
+  },
+  watch: {
+    show: {
+      // this watcher will run when first instaniated
+      immediate: true,
+      handler(show) {
+        if (this.preventBackgroundScrolling) {
+          if (show) {
+            document.body.style.setProperty('overflow', 'hidden');
+          } else {
+            document.body.style.removeProperty('overflow');
+          }
+        }
+      },
+    },
+  },
+  created() {
+    const escapeHandler = (e) => {
+      if (e.key === 'Escape' && this.show) {
+        this.dismiss();
+      }
+    };
+    document.addEventListener('keydown', escapeHandler);
+    this.$once('hook:destroyed', () => {
+      document.removeEventListener('keydown', escapeHandler);
+    });
+  },
+  methods: {
+    stopPropagation(event) {
+      event.stopPropagation();
+    },
+    dismiss() {
+      this.$emit('close');
+      document.body.style.removeProperty('overflow');
+    },
+  },
+};
+</script>
+
+<style scoped>
+.Modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: auto;
+}
+
+@keyframes headerIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.Modal {
+  @apply py-5 px-7;
+  animation: headerIn 750ms cubic-bezier(0.19, 1, 0.22, 1);
+  background-color: #fff;
+
+  @media (max-width: 768px) and (orientation: landscape) {
+    height: auto;
+  }
+}
+
+.Modal-close {
+  cursor: pointer;
+  padding: calc(1.75 * var(--rs-space));
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+
+  &:focus,
+  &:active {
+    outline: none;
+  }
+
+  & >>> svg {
+    height: 2.5em;
+    width: 2.5em;
+
+    @media (--sm) {
+      height: 3em;
+      width: 3em;
+    }
+  }
+}
+
+/*
+ * Transitions auto-applied to elements with
+ * transition="modal" when their visibility is toggled by Vue.
+ */
+
+.Modal-enter-active, .Modal-leave-active {
+  transition: opacity .2s;
+}
+
+.Modal-enter, .Modal-leave-to /* .Modal-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
+</style>

src/components/Modal.vue

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VuePageTransition from 'vue-page-transition';
+import PortalVue from 'portal-vue';
 import SvgIcon from 'vue-svgicon';
 import App from './App.vue';
 import router from './router';
@@ -9,6 +10,7 @@ import './assets/css/tailwind.css';
 
 Vue.config.productionTip = false;
 
+Vue.use(PortalVue);
 Vue.use(VuePageTransition);
 
 Vue.use(SvgIcon, {

src/main.js

@@ -3,17 +3,19 @@ import Vuex from 'vuex';
 
 Vue.use(Vuex);
 
+const defaultState = {
+  timestamp: null,
+  editorState: null,
+  selections: [],
+  // Keyed by selection ids
+  orders: {},
+  replies: {},
+  repliesIntro: '',
+  repliesOutro: '',
+};
+
 export default new Vuex.Store({
-  state: {
-    timestamp: null,
-    editorState: null,
-    selections: [],
-    // Keyed by selection ids
-    orders: {},
-    replies: {},
-    repliesIntro: '',
-    repliesOutro: '',
-  },
+  state: Object.assign({}, defaultState),
   mutations: {
     setEditorState(state, editorState) {
       state.editorState = editorState;
@@ -63,6 +65,11 @@ export default new Vuex.Store({
     setRepliesOutro(state, text) {
       state.repliesOutro = text;
     },
+    // eslint-disable-next-line no-unused-vars
+    resetState(state) {
+      // eslint-disable-next-line no-param-reassign
+      state = Object.assign(state, defaultState);
+    },
   },
   actions: {
   },

src/store.js

@@ -73,22 +73,40 @@
         @input="handleOutroInput"
       >{{ $store.state.repliesOutro }}</textarea>
 
-      <ButtonExport :groupedSelections="groupedSelections" />
+      <ButtonExport @onExport="handleExport" :groupedSelections="groupedSelections" />
     </div>
+    <portal to="modals">
+      <Modal :show="isResetModalOpen" @close="isResetModalOpen = false" ref="resetModal">
+        <div class="max-w-xl">
+          <p class="s-p">Successfully copied to your clipboard!</p>
+          <div class="flex">
+            <button class="mr-2 w-1/2 Button" @click="resetState">Start again</button>
+            <button class="ml-2 w-1/2 Button Button--outline" @click="dismiss">Keep Editing</button>
+          </div>
+        </div>
+      </Modal>
+    </portal>
   </div>
 </template>
 
 <script>
 import draggable from 'vuedraggable';
 import ButtonExport from '@/components/ButtonExport.vue';
 import Tooltip from '@/components/Tooltip.vue';
+import Modal from '@/components/Modal.vue';
 
 export default {
   name: 'reply',
   components: {
     draggable,
     ButtonExport,
     Tooltip,
+    Modal,
+  },
+  data() {
+    return {
+      isResetModalOpen: false,
+    };
   },
   computed: {
     groupedSelections: {
@@ -101,6 +119,18 @@ export default {
     },
   },
   methods: {
+    dismiss() {
+      this.$refs.resetModal.dismiss();
+    },
+    async resetState() {
+      await this.$store.commit('resetState');
+      this.$refs.resetModal.dismiss();
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+      this.$router.push('/');
+    },
+    handleExport() {
+      this.isResetModalOpen = true;
+    },
     handleDragEnd() {
     },
     goBackIfSelectionsEmpty() {
@@ -229,4 +259,21 @@ export default {
   min-width: 150px;
   transform: translate(-50%, 100%);
 } */
+
+
+/*
+ * Modal
+ */
+
+.Modal-backdrop {
+  background: rgba(255, 255, 255, 0.7);
+}
+
+>>> .Modal {
+  box-shadow: 0 0 6px 4px #eaeaea;
+}
+
+>>> .Modal .Button {
+  white-space: nowrap;
+}
 </style>