diff --git a/src/App.vue b/src/App.vue index 5d26afd..76893ab 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,7 +1,8 @@ @@ -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' ]) } } diff --git a/src/assets/css/4-modules/options.css b/src/assets/css/4-modules/options.css new file mode 100644 index 0000000..f7c6c80 --- /dev/null +++ b/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; +} diff --git a/src/assets/css/4-modules/preview.css b/src/assets/css/4-modules/preview.css index be1e642..871545f 100644 --- a/src/assets/css/4-modules/preview.css +++ b/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; diff --git a/src/assets/css/5-screens/capture.css b/src/assets/css/5-screens/capture.css index 7272a1b..c0612e8 100644 --- a/src/assets/css/5-screens/capture.css +++ b/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 -------------------------------------------------------------- */ diff --git a/src/assets/css/5-screens/download.css b/src/assets/css/5-screens/download.css new file mode 100644 index 0000000..029c3c9 --- /dev/null +++ b/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; +} diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 8fff050..3fb43a1 100644 --- a/src/assets/css/style.css +++ b/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 */ diff --git a/src/components/capture-options.vue b/src/components/capture-options.vue index 82f295c..f99657e 100644 --- a/src/components/capture-options.vue +++ b/src/components/capture-options.vue @@ -1,11 +1,11 @@ diff --git a/src/components/encoding.vue b/src/components/encoding.vue index bfd61fb..3889001 100644 --- a/src/components/encoding.vue +++ b/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 () { diff --git a/src/store.js b/src/store.js index 483babf..ab8c16a 100644 --- a/src/store.js +++ b/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: { diff --git a/src/views/download.vue b/src/views/download.vue new file mode 100644 index 0000000..91f2942 --- /dev/null +++ b/src/views/download.vue @@ -0,0 +1,25 @@ + + +