feat: Add download screen

src/App.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="layout">
-    <welcome-screen v-if="!welcomed"/>
-    <capture-screen v-else/>
+    <welcome-screen v-if="!welcomed && !downloading.status"/>
+    <capture-screen v-if="welcomed && !downloading.status"/>
+    <download-screen v-if="downloading.status"/>
   </div>
 </template>
 
@@ -9,6 +10,7 @@
 
 import welcomeScreen from '@/views/welcome'
 import captureScreen from '@/views/capture'
+import downloadScreen from '@/views/download'
 
 import { mapState } from 'vuex'
 
@@ -16,11 +18,13 @@ export default {
   name: 'souvenir',
   components: {
     welcomeScreen,
-    captureScreen
+    captureScreen,
+    downloadScreen
   },
   computed: {
     ...mapState([
-      'welcomed'
+      'welcomed',
+      'downloading'
     ])
   }
 }

src/assets/css/4-modules/options.css

@@ -0,0 +1,43 @@
+/* ----------------------------------------------------------- */
+/* == Options bar module */
+/* ----------------------------------------------------------- */
+
+
+/* Options
+-------------------------------------------------------------- */
+
+.options {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2.2rem 0;
+}
+
+.options__select,
+.options__btn {
+  padding: 2rem;
+  border: .1rem solid transparent;
+  border-radius: .3rem;
+  background: transparent;
+  color: #fff;
+  line-height: 2.2rem;
+  cursor: pointer;
+
+  appearance: none;
+}
+
+.options__select:focus,
+.options__btn:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.options__select {
+  padding-right: 4.4rem;
+  background: url("/img/ico-arrow.svg") no-repeat;
+  background-position: calc(100% - 2rem) center;
+}
+
+.options__btn svg {
+  margin-right: 1.5rem;
+}

src/assets/css/4-modules/preview.css

@@ -4,21 +4,23 @@
 
 .preview {
   position: relative;
+  overflow: hidden;
   margin-bottom: 2rem;
+  border-radius: .5rem;
+  background-color: rgba(0, 0, 0, .5);
+  box-shadow: 0 .4rem 5rem rgba(0, 0, 0, .5);
 }
 
 .preview-visual {
   position: relative;
   width: 100%;
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, .5);
-  box-shadow: 0px 4px 50px rgba(0, 0, 0, .5);
 }
 
 .preview::after {
   position: absolute;
   top: calc(50% - (3em / 2));
   left: calc(50% - (3em / 2));
+  z-index: -1;
   display: block;
   width: 3em;
   height: 3em;

src/assets/css/5-screens/capture.css

@@ -7,44 +7,6 @@
   flex-direction: column;
   flex-grow: 1;
 }
-/* Options
--------------------------------------------------------------- */
-
-.capture-options {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2.2rem 0;
-}
-
-.capture-options__select,
-.capture-options__switch {
-  padding: 2rem;
-  border: .1rem solid transparent;
-  border-radius: .3rem;
-  background: transparent;
-  color: #fff;
-  line-height: 2.2rem;
-  cursor: pointer;
-
-  appearance: none;
-}
-
-.capture-options__select:focus,
-.capture-options__switch:focus {
-  outline: none;
-  box-shadow: var(--focus-ring);
-}
-
-.capture-options__select {
-  padding-right: 4.4rem;
-  background: url("/img/ico-arrow.svg") no-repeat;
-  background-position: calc(100% - 2rem) center;
-}
-
-.capture-options__switch svg {
-  margin-right: 1.5rem;
-}
 
 /* Progress bar
 -------------------------------------------------------------- */

src/assets/css/5-screens/download.css

@@ -0,0 +1,15 @@
+/* ----------------------------------------------------------- */
+/* == Download screen */
+/* ----------------------------------------------------------- */
+
+.download {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.download-btn,
+.download-btn:visited {
+  margin-top: auto;
+  margin-bottom: 4rem;
+}

src/assets/css/style.css

@@ -30,6 +30,7 @@
 /* == modules */
 /* ----------------------------------------------------------- */
 
+@import "4-modules/options.css";
 @import "4-modules/preview.css";
 @import "4-modules/progress-bar.css";
 @import "4-modules/encoding.css";
@@ -40,6 +41,7 @@
 
 @import "5-screens/welcome.css";
 @import "5-screens/capture.css";
+@import "5-screens/download.css";
 
 /* ----------------------------------------------------------- */
 /* == helpers */

src/components/capture-options.vue

@@ -1,11 +1,11 @@
 <template lang="html">
-  <div class="capture-options">
-    <select class="capture-options__select" v-model="timer.selected" @change="updateTimer(timer.selected)" :disabled="encoding.status">
+  <div class="options">
+    <select class="options__select" v-model="timer.selected" @change="updateTimer(timer.selected)" :disabled="encoding.status">
       <option v-for="time in timer.list" :key="time" :value="time">
         {{ timeLabel(time) }}
       </option>
     </select>
-    <button class="capture-options__switch" @click="back" :disabled="encoding.status"><icon-switch/>switch</button>
+    <button class="options__btn" @click="back" :disabled="encoding.status"><icon-switch/>switch</button>
   </div>
 </template>
 

src/components/encoding.vue

@@ -29,6 +29,7 @@ export default {
     this.makeLoading()
     window.setTimeout(() => {
       this.$store.commit('stopEncoding')
+      this.$store.commit('startDownloading')
     }, 2000)
   },
   destroyed: function () {

src/store.js

@@ -16,6 +16,9 @@ export default new Vuex.Store({
     },
     encoding: {
       status: false
+    },
+    downloading: {
+      status: false
     }
   },
   mutations: {
@@ -39,6 +42,12 @@ export default new Vuex.Store({
     },
     stopEncoding (store) {
       store.encoding.status = false
+    },
+    startDownloading (store) {
+      store.downloading.status = true
+    },
+    stopDownloading (store) {
+      store.downloading.status = false
     }
   },
   actions: {

src/views/download.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="download">
+    <div class="options">
+      <span></span>
+      <button class="options__btn" @click="back">← back</button>
+    </div>
+
+    <div class="preview">
+      <img class="preview-visual" src="https://unsplash.it/320/320" alt="">
+    </div>
+
+    <button class="download-btn btn btn--primary w100">Download GIF</button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'download',
+  methods: {
+    back () {
+      this.$store.commit('stopDownloading')
+    }
+  }
+}
+</script>