Merge pull request #10 from callumflack/post-export

Display restart modal after exporting

Author: callumflack

package-lock.json

@@ -38,4 +38,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

@@ -10,6 +10,7 @@ import './assets/css/tailwind.css';
 
 Vue.config.productionTip = false;
 
+Vue.use(PortalVue);
 Vue.use(VuePageTransition);
 
 Vue.use(PortalVue);

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

@@ -69,22 +69,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: {
@@ -97,6 +115,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() {
       if (!this.$store.state.selections.length) {
@@ -236,6 +266,20 @@ export default {
   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;
+
 /*
   Draggable
 */