From 563f40e4b7c2bff862ec259fc2fae302df3c214c Mon Sep 17 00:00:00 2001 From: Matteo Pagliazzi Date: Tue, 17 Jan 2017 19:45:27 +0100 Subject: [PATCH] client: reorganize files, router and add inventory skeleton --- website/client/components/SocialPage.vue | 37 -------------- website/client/components/appMenu.vue | 34 ++++++------- website/client/components/emptyView.vue | 4 ++ website/client/components/inventory/index.vue | 19 +++++++ .../client/components/inventory/stable.vue | 8 +++ .../inbox/conversationPage.vue} | 0 .../InboxPage.vue => social/inbox/index.vue} | 2 +- website/client/components/social/index.vue | 17 +++++++ .../TavernPage.vue => social/tavern.vue} | 0 website/client/router.js | 50 +++++++++++-------- 10 files changed, 95 insertions(+), 76 deletions(-) delete mode 100644 website/client/components/SocialPage.vue create mode 100644 website/client/components/emptyView.vue create mode 100644 website/client/components/inventory/index.vue create mode 100644 website/client/components/inventory/stable.vue rename website/client/components/{Inbox/InboxConversationPage.vue => social/inbox/conversationPage.vue} (100%) rename website/client/components/{Inbox/InboxPage.vue => social/inbox/index.vue} (94%) create mode 100644 website/client/components/social/index.vue rename website/client/components/{Social/TavernPage.vue => social/tavern.vue} (100%) diff --git a/website/client/components/SocialPage.vue b/website/client/components/SocialPage.vue deleted file mode 100644 index 4ca63f0eeb..0000000000 --- a/website/client/components/SocialPage.vue +++ /dev/null @@ -1,37 +0,0 @@ - - - diff --git a/website/client/components/appMenu.vue b/website/client/components/appMenu.vue index 664362e550..289791dc5e 100644 --- a/website/client/components/appMenu.vue +++ b/website/client/components/appMenu.vue @@ -3,34 +3,34 @@ #app-menu.ui.top.fixed.menu .header.item img(src="~assets/header/png/logo@3x.png") - router-link.item(to="/", exact) + router-link.item(:to="{name: 'tasks'}", exact) span(v-once) {{ $t('tasks') }} // .simple makes it possible to have a dropdown without JS .ui.simple.dropdown - router-link.item(to="/inventory", :class="{'active': $route.path.startsWith('/inventory')}") + router-link.item(:to="{name: 'inventory'}", :class="{'active': $route.path.startsWith('/inventory')}") span(v-once) {{ $t('inventory') }} .menu - router-link.item(to="/inventory") + router-link.item(:to="{name: 'inventory'}") span(v-once) {{ $t('inventory') }} - router-link.item(to="/inventory/stable") - span(v-once) {{ $t('stable') }} - router-link.item(to="/inventory/equipment") + router-link.item(:to="{name: 'equipment'}") span(v-once) {{ $t('equipment') }} - router-link.item(to="/market") + router-link.item(:to="{name: 'stable'}") + span(v-once) {{ $t('stable') }} + router-link.item(:to="{name: 'market'}") span(v-once) {{ $t('market') }} .ui.simple.dropdown - router-link.item(to="/social/tavern", :class="{'active': $route.path.startsWith('/social')}") + router-link.item(:to="{name: 'tavern'}", :class="{'active': $route.path.startsWith('/social')}") span(v-once) {{ $t('social') }} .menu - router-link.item(to="/social/tavern") + router-link.item(:to="{name: 'tavern'}") span(v-once) {{ $t('tavern') }} - router-link.item(to="/social/inbox") + router-link.item(:to="{name: 'inbox'}") span(v-once) {{ $t('inbox') }} - router-link.item(to="/social/challenges") + router-link.item(:to="{name: 'challenges'}") span(v-once) {{ $t('challenges') }} - router-link.item(to="/social/party") + router-link.item(:to="{name: 'party'}") span(v-once) {{ $t('party') }} - router-link.item(to="/social/guilds") + router-link.item(:to="{name: 'guilds'}") span(v-once) {{ $t('guilds') }} .ui.simple.dropdown router-link.item(to="/help", :class="{'active': $route.path.startsWith('/help')}") @@ -52,7 +52,7 @@ a.item.with-img.notifications-dropdown img(src="~assets/header/png/notifications@3x.png") .ui.simple.dropdown.pointing - router-link.item.with-img.user-dropdown(to="/user/avatar") + router-link.item.with-img.user-dropdown(:to="{name: 'avatar'}") // TODO icons should be white when active img(src="~assets/header/png/user@3x.png") .menu @@ -60,12 +60,12 @@ strong {{user.profile.name}} a(v-once) {{ $t('editAvatar') }} .divider - router-link.item(to="/user/stats") + router-link.item(:to="{name: 'stats'}") span(v-once) {{ $t('stats') }} - router-link.item(to="/user/achievements") + router-link.item(:to="{name: 'achievements'}") span(v-once) {{ $t('achievements') }} .divider - router-link.item(to="/user/settings") + router-link.item(:to="{name: 'settings'}") span(v-once) {{ $t('settings') }} .divider router-link.item(to="/logout") diff --git a/website/client/components/emptyView.vue b/website/client/components/emptyView.vue new file mode 100644 index 0000000000..01274826f4 --- /dev/null +++ b/website/client/components/emptyView.vue @@ -0,0 +1,4 @@ + \ No newline at end of file diff --git a/website/client/components/inventory/index.vue b/website/client/components/inventory/index.vue new file mode 100644 index 0000000000..0058b3d8fd --- /dev/null +++ b/website/client/components/inventory/index.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/website/client/components/inventory/stable.vue b/website/client/components/inventory/stable.vue new file mode 100644 index 0000000000..ce6743c585 --- /dev/null +++ b/website/client/components/inventory/stable.vue @@ -0,0 +1,8 @@ + + + diff --git a/website/client/components/Inbox/InboxConversationPage.vue b/website/client/components/social/inbox/conversationPage.vue similarity index 100% rename from website/client/components/Inbox/InboxConversationPage.vue rename to website/client/components/social/inbox/conversationPage.vue diff --git a/website/client/components/Inbox/InboxPage.vue b/website/client/components/social/inbox/index.vue similarity index 94% rename from website/client/components/Inbox/InboxPage.vue rename to website/client/components/social/inbox/index.vue index 30ebb6fa5b..bf4ef57149 100644 --- a/website/client/components/Inbox/InboxPage.vue +++ b/website/client/components/social/inbox/index.vue @@ -2,7 +2,7 @@ .ui.internally.celled.grid .row .sixteen.wide.colum - h2.ui.dividing.header Inbox + h2.ui.dividing.header(v-once) {{ $t('inbox') }} .ui.middle.aligned.selection.list .item(v-for="conversation in conversations") img.ui.avatar.image(src='http://semantic-ui.com/images/avatar/small/daniel.jpg') diff --git a/website/client/components/social/index.vue b/website/client/components/social/index.vue new file mode 100644 index 0000000000..86375c32fd --- /dev/null +++ b/website/client/components/social/index.vue @@ -0,0 +1,17 @@ + + + \ No newline at end of file diff --git a/website/client/components/Social/TavernPage.vue b/website/client/components/social/tavern.vue similarity index 100% rename from website/client/components/Social/TavernPage.vue rename to website/client/components/social/tavern.vue diff --git a/website/client/router.js b/website/client/router.js index 1302b9673e..8e6400c553 100644 --- a/website/client/router.js +++ b/website/client/router.js @@ -1,15 +1,23 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; -import UserTasks from './components/userTasks'; + +import EmptyView from './components/emptyView'; +// TODO Dummy elements used as placeholder until real components are implemented import ParentPage from './components/parentPage'; import Page from './components/page'; -// Social -import SocialPage from './components/SocialPage'; -import TavernPage from './components/Social/TavernPage'; -import InboxPage from './components/Inbox/InboxPage'; -import InboxConversationPage from './components/Inbox/InboxConversationPage'; +// Tasks +import UserTasks from './components/userTasks'; +// Inventory +import InventoryContainer from './components/inventory/index'; +import StablePage from './components/inventory/stable'; + +// Social +import SocialContainer from './components/social/index'; +import TavernPage from './components/social/tavern'; +import InboxPage from './components/social/inbox/index'; +import InboxConversationPage from './components/social/inbox/conversationPage'; Vue.use(VueRouter); @@ -18,25 +26,25 @@ export default new VueRouter({ base: process.env.NODE_ENV === 'production' ? '/new-app' : __dirname, // eslint-disable-line no-process-env linkActiveClass: 'active', routes: [ - { path: '/', component: UserTasks }, + { name: 'tasks', path: '/', component: UserTasks }, { path: '/inventory', - component: ParentPage, + component: InventoryContainer, children: [ - {path: '', component: Page}, - {path: 'equipment', component: Page}, - {path: 'stable', component: Page}, + { name: 'inventory', path: '', component: Page }, + { name: 'equipment', path: 'equipment', component: Page }, + { name: 'stable', path: 'stable', component: StablePage }, ], }, - { path: '/market', component: Page }, + { name: 'market', path: '/market', component: Page }, { path: '/social', - component: SocialPage, + component: SocialContainer, children: [ { name: 'tavern', path: 'tavern', component: TavernPage }, { path: 'inbox', - component: ParentPage, + component: EmptyView, children: [ { name: 'inbox', @@ -50,19 +58,19 @@ export default new VueRouter({ }, ], }, - {path: 'challenges', component: Page}, - {path: 'party', component: Page}, - {path: 'guilds', component: Page}, + { name: 'challenges', path: 'challenges', component: Page }, + { name: 'party', path: 'party', component: Page }, + { name: 'guilds', path: 'guilds', component: Page }, ], }, { path: '/user', component: ParentPage, children: [ - {path: 'avatar', component: Page}, - {path: 'stats', component: Page}, - {path: 'achievements', component: Page}, - {path: 'settings', component: Page}, + { name: 'avatar', path: 'avatar', component: Page }, + { name: 'stats', path: 'stats', component: Page }, + { name: 'achievements', path: 'achievements', component: Page }, + { name: 'settings', path: 'settings', component: Page }, ], }, ],