Added initial inbox (#8852)

* Added initial inbox

* Minor styles

* Added more styles, selected conversations, sending messages

* Added translations and colors
This commit is contained in:
Keith Holliday
2017-07-10 21:09:31 -06:00
committed by GitHub
parent 3aa7b4b631
commit 052c653cd3
4 changed files with 282 additions and 52 deletions

View File

@@ -1,54 +1,56 @@
<template lang="pug">
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
.navbar-header
.logo.svg-icon(v-html="icons.logo")
.collapse.navbar-collapse
ul.navbar-nav.mr-auto
router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
a.nav-link(v-once) {{ $t('tasks') }}
router-link.nav-item.dropdown(tag="li", :to="{name: 'items'}", :class="{'active': $route.path.startsWith('/inventory')}")
a.nav-link(v-once) {{ $t('inventory') }}
.dropdown-menu
router-link.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
a.nav-link(v-once) {{ $t('shops') }}
router-link.nav-item(tag="li", :to="{name: 'party'}")
a.nav-link(v-once) {{ $t('party') }}
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
a.nav-link(v-once) {{ $t('guilds') }}
.dropdown-menu
router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
a.nav-link(v-once) {{ $t('challenges') }}
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
a.nav-link(v-once) {{ $t('help') }}
.dropdown-menu
router-link.dropdown-item(to="/help/faq") {{ $t('faq') }}
router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
.item-with-icon
.svg-icon(v-html="icons.gem")
span {{userGems | roundBigNumber}}
.item-with-icon
.svg-icon(v-html="icons.gold")
span {{user.stats.gp | roundBigNumber}}
.item-with-icon.item-notifications
.svg-icon(v-html="icons.notifications")
router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
.svg-icon(v-html="icons.user")
.dropdown-menu.dropdown-menu-right.user-dropdown
router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
h3 {{ user.profile.name }}
span.small-text {{ $t('editAvatar') }}
router-link.dropdown-item(:to="{name: 'inbox'}") {{ $t('inbox') }}
router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
div
inbox-modal
nav.navbar.navbar-inverse.fixed-top.navbar-toggleable-sm
.navbar-header
.logo.svg-icon(v-html="icons.logo")
.collapse.navbar-collapse
ul.navbar-nav.mr-auto
router-link.nav-item(tag="li", :to="{name: 'tasks'}", exact)
a.nav-link(v-once) {{ $t('tasks') }}
router-link.nav-item.dropdown(tag="li", :to="{name: 'items'}", :class="{'active': $route.path.startsWith('/inventory')}")
a.nav-link(v-once) {{ $t('inventory') }}
.dropdown-menu
router-link.dropdown-item(:to="{name: 'items'}", exact) {{ $t('items') }}
router-link.dropdown-item(:to="{name: 'equipment'}") {{ $t('equipment') }}
router-link.dropdown-item(:to="{name: 'stable'}") {{ $t('stable') }}
router-link.nav-item(tag="li", :to="{name: 'shops'}", exact)
a.nav-link(v-once) {{ $t('shops') }}
router-link.nav-item(tag="li", :to="{name: 'party'}")
a.nav-link(v-once) {{ $t('party') }}
router-link.nav-item.dropdown(tag="li", :to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/guilds')}")
a.nav-link(v-once) {{ $t('guilds') }}
.dropdown-menu
router-link.dropdown-item(:to="{name: 'tavern'}") {{ $t('tavern') }}
router-link.dropdown-item(:to="{name: 'myGuilds'}") {{ $t('myGuilds') }}
router-link.dropdown-item(:to="{name: 'guildsDiscovery'}") {{ $t('guildsDiscovery') }}
router-link.nav-item(tag="li", :to="{name: 'challenges'}", exact)
a.nav-link(v-once) {{ $t('challenges') }}
router-link.nav-item.dropdown(tag="li", to="/help", :class="{'active': $route.path.startsWith('/help')}")
a.nav-link(v-once) {{ $t('help') }}
.dropdown-menu
router-link.dropdown-item(to="/help/faq") {{ $t('faq') }}
router-link.dropdown-item(to="/help/report-bug") {{ $t('reportBug') }}
router-link.dropdown-item(to="/help/request-feature") {{ $t('requestAF') }}
.item-with-icon
.svg-icon(v-html="icons.gem")
span {{userGems | roundBigNumber}}
.item-with-icon
.svg-icon(v-html="icons.gold")
span {{user.stats.gp | roundBigNumber}}
.item-with-icon.item-notifications
.svg-icon(v-html="icons.notifications")
router-link.dropdown.item-with-icon.item-user(:to="{name: 'avatar'}")
.svg-icon(v-html="icons.user")
.dropdown-menu.dropdown-menu-right.user-dropdown
router-link.dropdown-item.edit-avatar(:to="{name: 'avatar'}")
h3 {{ user.profile.name }}
span.small-text {{ $t('editAvatar') }}
a.nav-link.dropdown-item(@click.prevent='showInbox()') {{ $t('inbox') }}
router-link.dropdown-item(:to="{name: 'stats'}") {{ $t('stats') }}
router-link.dropdown-item(:to="{name: 'achievements'}") {{ $t('achievements') }}
router-link.dropdown-item(:to="{name: 'settings'}") {{ $t('settings') }}
a.nav-link.dropdown-item(to="/", @click.prevent='logout()') {{ $t('logout') }}
</template>
<style lang="scss" scoped>
@@ -198,8 +200,12 @@ import goldIcon from 'assets/svg/gold.svg';
import notificationsIcon from 'assets/svg/notifications.svg';
import userIcon from 'assets/svg/user.svg';
import logo from 'assets/svg/logo.svg';
import InboxModal from './userMenu/inbox.vue';
export default {
components: {
InboxModal,
},
data () {
return {
icons: Object.freeze({
@@ -222,6 +228,9 @@ export default {
localStorage.removeItem('habit-mobile-settings');
this.$router.go('/');
},
showInbox () {
this.$root.$emit('show::modal', 'inbox-modal');
},
},
};
</script>