From 072126edacdc1c85b2b9681a2f6bc054a69409f4 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Fri, 22 Sep 2017 14:33:24 -0400
Subject: [PATCH] Beginning of rework of Product view

---
 src/i18n/en/index.js   |  1 +
 src/store/mutations.js |  1 +
 src/views/Loading.vue  | 14 ++++++++++++
 src/views/Product.vue  | 50 ++++++++++++++++++++++++++++--------------
 4 files changed, 49 insertions(+), 17 deletions(-)
 create mode 100644 src/views/Loading.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 680aa0e..7e42723 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -7,6 +7,7 @@ export default {
         OpenDatabaseLicense: 'Open Database License',
     },
     misc: {
+        loading: 'Loading…',
         or: 'or',
         there: 'there',
     },
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 39d7cec..72f1e79 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -14,6 +14,7 @@ export const mutations = {
     [types.STORE_PRODUCT](state, { product }) {
         state.product = product;
         state.isLoading = false;
+        state.ui.title = product.product_name;  // Set UI title
     },
     [types.IS_LOADING](state) {
         state.isLoading = true;
diff --git a/src/views/Loading.vue b/src/views/Loading.vue
new file mode 100644
index 0000000..bfc2e4b
--- /dev/null
+++ b/src/views/Loading.vue
@@ -0,0 +1,14 @@
+<template>
+    <v-container fluid class="product-panel">
+        <v-layout row>
+            <v-flex xs12 class="text-xs-center">
+                <p>{{ $t('misc.loading') }}</p>
+            </v-flex>
+        </v-layout>
+    </v-container>
+</template>
+
+<script>
+export default {
+};
+</script>
diff --git a/src/views/Product.vue b/src/views/Product.vue
index e9f84d6..3bbc4a9 100644
--- a/src/views/Product.vue
+++ b/src/views/Product.vue
@@ -1,11 +1,15 @@
 <template>
-    <v-container fluid class="product-panel">
-        <v-flex class="text-xs-center">
-            <template v-if="isLoading">
-                <p>Loading…</p>
-            </template>
-            <template v-else>
-                <p><img :src="this.product.image_front_small_url"></p>
+    <div>
+        <Loading v-if="isLoading"/>
+        <v-container fluid v-else>
+            <v-layout row align-baseline>
+                <v-flex xs3 class="text-xs-center">
+                    <v-avatar size="100%">
+                      <img :src="this.product.image_front_small_url" :alt="product.product_name">
+                    </v-avatar>
+                </v-flex>
+            </v-layout>
+            <v-layout row>
                 <v-tabs centered>
                     <v-tabs-items>
                         <v-tabs-content id="tab-overview">
@@ -34,10 +38,9 @@
                         </v-tabs-content>
                     </v-tabs-items>
                 </v-tabs>
-            </template>
-        </v-flex>
-        <!-- TODO: Should be pushed to left -->
-        <v-bottom-nav absolute :value="true" class="transparent">
+            </v-layout>
+        </v-container>
+        <v-bottom-nav v-if="!isLoading" absolute :value="true" class="transparent">
             <v-btn flat class="teal--text" value="recent">
                 <span>Overview</span>
                 <v-icon>view_list</v-icon>
@@ -51,14 +54,19 @@
                 <v-icon>info_outline</v-icon>
             </v-btn>
         </v-bottom-nav>
-    </v-container>
+    </div>
 </template>
 
 <script>
+import Loading from '@/views/Loading';
+
 export default {
+    components: {
+        Loading,
+    },
     created() {
-        this.$store.dispatch('setTitle', { title: 'Loading' });
-        this.$store.dispatch('setBackgroundColor', { backgroundColor: '#00d400' });
+        this.$store.dispatch('setTitle', { title: '' });
+        this.$store.dispatch('setBackgroundColor', { backgroundColor: '#9CCC65' });
         this.fetchData();
     },
     watch: {
@@ -67,9 +75,7 @@ export default {
     },
     computed: {
         product() {
-            const product = this.$store.state.product;
-            this.$store.dispatch('setTitle', { title: product.product_name });
-            return product;
+            return this.$store.state.product;
         },
         isLoading() {
             return this.$store.state.isLoading;
@@ -82,3 +88,13 @@ export default {
     },
 };
 </script>
+
+<style scoped>
+.product-icon {
+    background-color: white;
+    border-radius: 100%;
+}
+.product-icon >>> img {
+    vertical-align: middle;
+}
+</style>