From bba29e5cdaf3181f74b89d7d7006acf380aaf1a7 Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Fri, 22 Sep 2017 02:19:46 +0200 Subject: [PATCH] Clean Home view, beginning of ManualBarcode design --- package.json | 5 +- src/App.vue | 18 +++--- src/assets/barcode.svg | 29 +++++++++ src/components/BarcodeIcon.vue | 25 ++++++++ src/components/NavigationDrawer.vue | 18 +++++- src/constants.js | 4 ++ src/store/actions.js | 3 + src/store/getters.js | 2 +- src/store/mutations-types.js | 1 + src/store/mutations.js | 11 +++- src/views/Home.vue | 76 ++++++++++++++++++----- src/views/ManualBarcode.vue | 79 ++++++++++++++++++++---- src/views/Preferences.vue | 4 +- src/views/Product.vue | 96 ++++++++++++++++------------- src/views/Scan.vue | 4 +- 15 files changed, 286 insertions(+), 89 deletions(-) create mode 100644 src/assets/barcode.svg create mode 100644 src/components/BarcodeIcon.vue create mode 100644 src/constants.js diff --git a/package.json b/package.json index 23b9b43..be32f2c 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "dependencies": { "es6-promise": "^4.1.1", "isomorphic-fetch": "^2.2.1", - "vue": "^2.4.2", + "vue": "^2.4.4", "vue-router": "^2.7.0", "vuetify": "^0.15.7", "vuex": "^2.4.0" @@ -84,7 +84,8 @@ "webpack": "^2.6.1", "webpack-dev-middleware": "^1.10.0", "webpack-hot-middleware": "^2.18.0", - "webpack-merge": "^4.1.0" + "webpack-merge": "^4.1.0", + "svg-inline-loader": "^0.8.0" }, "engines": { "node": ">= 4.0.0", diff --git a/src/App.vue b/src/App.vue index 95efe48..e7a83d7 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,14 +1,12 @@ @@ -22,7 +20,10 @@ export default { }, computed: { title() { - return this.$store.getters.title; + return this.$store.getters.layout.title; + }, + backgroundColor() { + return this.$store.getters.layout.backgroundColor; }, }, data() { @@ -37,6 +38,3 @@ export default { }, }; - - diff --git a/src/assets/barcode.svg b/src/assets/barcode.svg new file mode 100644 index 0000000..23405f4 --- /dev/null +++ b/src/assets/barcode.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/BarcodeIcon.vue b/src/components/BarcodeIcon.vue new file mode 100644 index 0000000..7b350c9 --- /dev/null +++ b/src/components/BarcodeIcon.vue @@ -0,0 +1,25 @@ + + + + + diff --git a/src/components/NavigationDrawer.vue b/src/components/NavigationDrawer.vue index 2309a36..4ee8996 100644 --- a/src/components/NavigationDrawer.vue +++ b/src/components/NavigationDrawer.vue @@ -3,7 +3,7 @@ persistent clipped enable-resize-watcher - v-model="isDrawerVisible" + v-model="isActive" > @@ -43,9 +43,23 @@ diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..5dae171 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,4 @@ +export default { + APP_NAME: 'InFood', + APP_DEFAULT_BACKGROUND_COLOR: '#FFCA28', +}; diff --git a/src/store/actions.js b/src/store/actions.js index 60e81b2..2bace7d 100644 --- a/src/store/actions.js +++ b/src/store/actions.js @@ -14,4 +14,7 @@ export default { setTitle({ commit }, { title }) { commit(types.SET_TITLE, { title }); }, + setBackgroundColor({ commit }, { backgroundColor }) { + commit(types.SET_BACKGROUND_COLOR, { backgroundColor }); + }, }; diff --git a/src/store/getters.js b/src/store/getters.js index 33238b2..5f58f6b 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,5 +1,5 @@ export default { product: state => state.product, isLoading: state => state.isLoading, - title: state => state.title, + layout: state => state.layout, }; diff --git a/src/store/mutations-types.js b/src/store/mutations-types.js index e2deb81..e7f1e69 100644 --- a/src/store/mutations-types.js +++ b/src/store/mutations-types.js @@ -1,3 +1,4 @@ export const IS_LOADING = 'IS_LOADING'; export const STORE_PRODUCT = 'STORE_PRODUCT'; export const SET_TITLE = 'SET_TITLE'; +export const SET_BACKGROUND_COLOR = 'SET_BACKGROUND_COLOR'; diff --git a/src/store/mutations.js b/src/store/mutations.js index 12276e4..e1dbc32 100644 --- a/src/store/mutations.js +++ b/src/store/mutations.js @@ -1,9 +1,13 @@ +import constants from '@/constants'; import * as types from './mutations-types'; export const initialState = { product: null, isLoading: false, - title: 'Food scanning', + layout: { + title: constants.APP_NAME, + backgroundColor: constants.APP_DEFAULT_BACKGROUND_COLOR, + }, }; export const mutations = { @@ -15,6 +19,9 @@ export const mutations = { state.isLoading = true; }, [types.SET_TITLE](state, { title }) { - state.title = title; + state.layout.title = title; + }, + [types.SET_BACKGROUND_COLOR](state, { backgroundColor }) { + state.layout.backgroundColor = backgroundColor; }, }; diff --git a/src/views/Home.vue b/src/views/Home.vue index 6e52d76..a9a7ea7 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -1,23 +1,71 @@ + + diff --git a/src/views/ManualBarcode.vue b/src/views/ManualBarcode.vue index a37fc28..7ff67d2 100644 --- a/src/views/ManualBarcode.vue +++ b/src/views/ManualBarcode.vue @@ -1,23 +1,61 @@ + + diff --git a/src/views/Preferences.vue b/src/views/Preferences.vue index 366d038..d597a7e 100644 --- a/src/views/Preferences.vue +++ b/src/views/Preferences.vue @@ -1,5 +1,7 @@