Merge pull request #140 from Adamant-im/bug/fix_f5_and_styles

Toolbar has been placed from App.vue to components

src/App.vue

@@ -1,47 +1,30 @@
 <template>
   <div id="app">
-      <md-theme md-name="grey">
-          <md-toolbar v-if="isTopPanelShown">
-              <md-button class="md-icon-button" v-on:click="gotochats">
-                  <md-icon >keyboard_backspace</md-icon>
-              </md-button>
-            <h1 class="md-title">
-                <md-input-container>
-                    <label>{{ partnerName }}</label>
-                    <md-input :value="userDisplayName" @change="setUserName"></md-input>
-                </md-input-container>
-                </h1>
-          </md-toolbar>
-          <md-toolbar v-if="isTransferBackShown">
-              <md-button class="md-icon-button" v-on:click="backOneStep">
-                  <md-icon >keyboard_backspace</md-icon>
-              </md-button>
-            <h1 class="md-title">
-              {{ $t('home.send_btn') }}
-            </h1>
-          </md-toolbar>
-    <main>
+    <md-theme md-name="grey">
+      <main>
         <router-view></router-view>
-    </main>
+      </main>
       <footer :style="footerCss">
-          <div class="bottom-fixed">
-              <md-bottom-bar v-if="logged && isBottomPanelShown && !isTransferBackShown" md-theme="bottomBar">
-                  <md-bottom-bar-item md-icon="account_balance_wallet" v-on:click="$router.push('/home/')" :md-active="!!$router.currentRoute.path.match(/\/home\//) || !!$router.currentRoute.path.match(/\/transactions\//) || !!$router.currentRoute.path.match(/\/transfer\//)">{{$t('bottom.wallet_button')}}</md-bottom-bar-item>
-                  <md-bottom-bar-item md-icon="forum" v-on:click="$router.push('/chats/')" :md-active="chatsPage">{{$t('bottom.chats_button')}}<div class="new-icon" v-if="totalNew">{{ totalNew }}</div></md-bottom-bar-item>
-                  <md-bottom-bar-item md-icon="settings" v-on:click="$router.push('/options/')" :md-active="!!$router.currentRoute.path.match(/\/options\//)">{{$t('bottom.settings_button')}}</md-bottom-bar-item>
-                  <md-bottom-bar-item md-icon="exit_to_app" v-on:click="exitme" :title="$t('bottom.exit_button_tooltip')">{{$t('bottom.exit_button')}}</md-bottom-bar-item>
-              </md-bottom-bar>
-          </div>
+        <div class="bottom-fixed">
+          <md-bottom-bar v-if="logged && isBottomPanelShown && !isTransferBackShown" md-theme="bottomBar">
+            <md-bottom-bar-item md-icon="account_balance_wallet" v-on:click="$router.push('/home/')" :md-active="!!$router.currentRoute.path.match(/\/home\//) || !!$router.currentRoute.path.match(/\/transactions\//) || !!$router.currentRoute.path.match(/\/transfer\//)">{{$t('bottom.wallet_button')}}</md-bottom-bar-item>
+            <md-bottom-bar-item md-icon="forum" v-on:click="$router.push('/chats/')" :md-active="chatsPage">{{$t('bottom.chats_button')}}<div class="new-icon" v-if="totalNew">{{ totalNew }}</div></md-bottom-bar-item>
+            <md-bottom-bar-item md-icon="settings" v-on:click="$router.push('/options/')" :md-active="!!$router.currentRoute.path.match(/\/options\//)">{{$t('bottom.settings_button')}}</md-bottom-bar-item>
+            <md-bottom-bar-item md-icon="exit_to_app" v-on:click="exitme" :title="$t('bottom.exit_button_tooltip')">{{$t('bottom.exit_button')}}</md-bottom-bar-item>
+          </md-bottom-bar>
+        </div>
       </footer>
-          <a name="bottom"></a>
-      </md-theme>
-      <div class="forbid" v-if="disabled" style="display: table;"><div style="display: table-cell; vertical-align: middle;">{{ $t('login.device_unsupported') }}</div></div>
-      <audio ref="messageSound" class="newMessageNotification" id="messageSound" src="/sound/bbpro_link.mp3"></audio>
+      <a name="bottom"></a>
+    </md-theme>
+    <div class="forbid" v-if="disabled" style="display: table;"><div style="display: table-cell; vertical-align: middle;">{{ $t('login.device_unsupported') }}</div></div>
+    <audio ref="messageSound" class="newMessageNotification" id="messageSound" src="/sound/bbpro_link.mp3"></audio>
 
   </div>
 </template>
 
 <script>
+import i18n from './i18n'
+
 export default {
   name: 'app',
   mounted: function () {
@@ -58,15 +41,15 @@ export default {
               window.notify_amount = self.$store.state.totalNewChats
               window.notify_interval = setInterval(function () {
                 if (window.notify_toggle) {
-                  document.title = self.$i18n.t('app_title')
+                  document.title = i18n.t('app_title')
                 } else {
                   var newTitle = ''
                   if (window.notify_amount % 10 === 1 && window.notify_amount % 100 !== 11) {
-                    newTitle = window.notify_amount + ' ' + self.$i18n.t('new_messages_1')
+                    newTitle = window.notify_amount + ' ' + i18n.t('new_messages_1')
                   } else if (window.notify_amount % 10 >= 2 && window.notify_amount % 10 <= 4 && (window.notify_amount % 100 < 10 || window.notify_amount % 100 >= 20)) {
-                    newTitle = window.notify_amount + ' ' + self.$i18n.t('new_messages_2')
+                    newTitle = window.notify_amount + ' ' + i18n.t('new_messages_2')
                   } else {
-                    newTitle = window.notify_amount + ' ' + self.$i18n.t('new_messages_5')
+                    newTitle = window.notify_amount + ' ' + i18n.t('new_messages_5')
                   }
                   document.title = newTitle
                 }
@@ -77,13 +60,13 @@ export default {
             if (window.notify_interval) {
               clearInterval(window.notify_interval)
               setTimeout(function () {
-                document.title = self.$i18n.t('app_title')
+                document.title = i18n.t('app_title')
               }, 200)
             }
 
-            if (document.title !== self.$i18n.t('app_title')) {
+            if (document.title !== i18n.t('app_title')) {
               setTimeout(function () {
-                document.title = self.$i18n.t('app_title')
+                document.title = i18n.t('app_title')
               }, 200)
             }
           }
@@ -92,29 +75,14 @@ export default {
       })(this),
       3000
     )
+
     window.audio = require('simple-audio')
 
     if (!this.$store.getters.getPassPhrase && this.$route.path !== '/') {
       this.$router.push('/')
     }
   },
   methods: {
-    setUserName (val) {
-      // this.$store.commit('change_partner_name', val)
-      const partner = this.$store.state.partnerName
-      this.$store.commit('partners/displayName', { partner, displayName: val })
-    },
-    backOneStep () {
-      if (history.length > 2) {
-        this.$router.back()
-      } else {
-        this.$router.push('/home/')
-      }
-    },
-    gotochats () {
-      this.$store.commit('leave_chat')
-      this.$router.push({ name: 'Chats' })
-    },
     exitme () {
       this.$store.commit('logout')
       this.$store.dispatch('reset')
@@ -137,18 +105,10 @@ export default {
     disabled () {
       return this.$store.state.disabled
     },
-    userDisplayName () {
-      return this.$store.getters['partners/displayName'](this.$store.state.partnerName)
-    },
-    partnerName () {
-      return this.$store.state.partnerName
-    },
+
     isTransferBackShown () {
       return this.transferBackShown
     },
-    isTopPanelShown () {
-      return this.$store.state.showPanel
-    },
     isBottomPanelShown () {
       return this.$store.state.showBottom
     },

src/store/index.js

@@ -15,6 +15,7 @@ import * as admApi from '../lib/adamant-api'
 import {base64regex, WelcomeMessage, Cryptos} from '../lib/constants'
 import Queue from 'promise-queue'
 import utils from '../lib/adamant'
+import i18n from '../i18n'
 
 var maxConcurrent = 1
 var maxQueue = Infinity
@@ -54,13 +55,13 @@ function createMockMessage (state, newAccount, partner, message) {
       readOnly: true,
       messages: {
         0: {
-          message: window.ep.$i18n.t('chats.' + message),
+          message: i18n.t('chats.' + message),
           timestamp: 0,
           direction: 'to'
         }
       },
       last_message: {
-        message: window.ep.$i18n.t('chats.' + message),
+        message: i18n.t('chats.' + message),
         timestamp: 0,
         direction: 'to'
       }
@@ -150,7 +151,7 @@ const store = {
   },
   actions: {
     add_chat_i18n_message ({commit}, payload) {
-      payload.message = window.ep.$i18n.t(payload.message)
+      payload.message = i18n.t(payload.message)
       commit('add_chat_message', payload)
     },
     afterLogin ({ commit }, passPhrase) {

src/views/Chat.vue

@@ -1,6 +1,17 @@
 <template>
   <!--TODO: Move all non-static content to @/assets/-->
   <div class="chat">
+    <md-toolbar>
+      <md-button class="md-icon-button" @click="gotochats">
+        <md-icon >keyboard_backspace</md-icon>
+      </md-button>
+      <h1 class="md-title">
+        <md-input-container>
+          <label>{{ partnerName }}</label>
+          <md-input :value="userDisplayName" @change="setUserName"></md-input>
+        </md-input-container>
+      </h1>
+    </md-toolbar>
       <md-layout id="msgContainer" md-align="start" md-gutter="16" class="chat_messages">
           <md-layout v-for="message in messages" :key="message.id" md-flex="100" style="padding-left: 0px;">
             <chat-entry :readOnly="readOnly" :message="message"></chat-entry>
@@ -69,6 +80,10 @@ export default {
   name: 'chats',
   components: { ChatEntry },
   methods: {
+    setUserName (val) {
+      const partner = this.$store.state.partnerName
+      this.$store.commit('partners/displayName', { partner, displayName: val })
+    },
     blurHandler: function (event) {
       if (/iP(hone|od|ad)/.test(navigator.platform)) {
         var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/)
@@ -128,6 +143,10 @@ export default {
         element.scrollTop = element.scrollHeight + 1000
       }, 12)
     },
+    gotochats () {
+      this.$store.commit('leave_chat')
+      this.$router.push({ name: 'Chats' })
+    },
     send () {
       this.$refs.messageField.$el.focus()
       if (this.$store.state.balance < 0.001) {
@@ -192,6 +211,12 @@ export default {
     10)
   },
   computed: {
+    userDisplayName () {
+      return this.$store.getters['partners/displayName'](this.$store.state.partnerName)
+    },
+    partnerName () {
+      return this.$store.state.partnerName
+    },
     messages: function () {
       function compare (a, b) {
         if (a.timestamp < b.timestamp) {

src/views/Transfer.vue

@@ -1,5 +1,11 @@
 <template>
   <div class="transfer">
+    <md-toolbar>
+      <md-button class="md-icon-button" @click="backOneStep">
+        <md-icon >keyboard_backspace</md-icon>
+      </md-button>
+      <h1 class="md-title">{{ $t('home.send_btn') }}</h1>
+    </md-toolbar>
       <spinner v-if="isWaiting" />
       <form novalidate @submit.stop.prevent="submit">
         <md-input-container>
@@ -69,6 +75,13 @@ export default {
   name: 'home',
   components: { Spinner },
   methods: {
+    backOneStep () {
+      if (history.length > 2) {
+        this.$router.back()
+      } else {
+        this.$router.push('/home/')
+      }
+    },
     errorMessage (message, opts) {
       this.formErrorMessage = this.$t('transfer.' + message, opts)
       this.$refs.transferSnackbar.open()
@@ -267,6 +280,9 @@ export default {
     max-width: 95%;
     margin: auto;
   }
+  .md-toolbar .md-title {
+    text-align: left;
+  }
   @media (max-width: 800px) {
     .transfer {
       padding-left: 1rem;