Merge develop into master

src/App.vue

@@ -4,6 +4,24 @@
   </v-app>
 </template>
 
+<script lang="ts">
+import Component from 'vue-class-component'
+import Vue from 'vue'
+import { Action } from 'vuex-class'
+import { RoomAction, Game, Locale } from '@/store/modules/room'
+
+@Component({
+  name: 'TheApp'
+})
+export default class TheApp extends Vue {
+    @Action(`room/${RoomAction.SET_GAME}`) setGame!: (game: Game) => void
+    @Action(`room/${RoomAction.SET_LOCALE}`) setLocale!: (locale: Locale) => void
+    created () {
+      this.setGame(Game['WOT'])
+      this.setLocale(Locale['ENUK'])
+    }
+}
+</script>
 <style lang="scss">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;

src/assets/scss/_variables.scss

@@ -2,6 +2,6 @@
 $app-fontsize: 16px;
 
 // Room colours
-$room-background: #6d8398;
-$room-navbar: #364246;
+$room-background: #f1f2f2;
+$room-navbar: #255bd6;
 $room-navbar-text: white;

src/components/TheEntityPanel.vue

@@ -1,27 +1,171 @@
 <template>
-  <v-sheet
-    class="the-entity-panel-sheet"
+  <v-card
+    :class="`custom-card-minimised ${show ? 'custom-card-expanded' : ''}`"
     :elevation="5"
   >
-    Entity Settings go here!
-  </v-sheet>
+    <v-row>
+      <v-card
+        tile
+        flat
+      >
+        <div>
+          Content
+        </div>
+      </v-card>
+      <v-navigation-drawer
+        class="custom-navigation-drawer"
+        mini-variant
+        mini-variant-width="56"
+        permanent
+      >
+        <div>
+          <v-list-item class="px-2">
+            <v-list-item-avatar>
+              <v-img :src="images[roomState.game]"></v-img>
+            </v-list-item-avatar>
+          </v-list-item>
+
+          <v-divider></v-divider>
+          <div>
+            <v-list
+              dense
+              nav
+            >
+              <v-list-item
+                v-for="item in items"
+                class="custom-list-item-center"
+                :key="item.title"
+                :title="item.title"
+                @click="onItemClickHandler"
+              >
+                <v-list-item-action>
+                  <v-icon :color="item.color">{{ item.icon }}</v-icon>
+                </v-list-item-action>
+
+                <v-list-item-content>
+                  <v-list-item-title>{{ item.title }}</v-list-item-title>
+                </v-list-item-content>
+              </v-list-item>
+            </v-list>
+            <v-btn
+              small
+              icon
+              tile
+              @click="show = !show"
+            >
+              <v-icon>{{ show ? 'fa-chevron-right' : 'fa-chevron-left' }}</v-icon>
+            </v-btn>
+          </div>
+        </div>
+      </v-navigation-drawer>
+    </v-row>
+  </v-card>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator'
+import { RoomGetters, RoomState } from '@/store/modules/room'
+import { Getter } from 'vuex-class'
 
 @Component({
   name: 'TheEntityPanel'
 })
 export default class MapButtons extends Vue {
   @Prop() private id!: string;
+  @Getter(`room/${RoomGetters.ROOM_STATE}`) roomState!: RoomState
+
+  show = false
+
+  items = [
+    { title: 'Add', icon: 'fa-plus' },
+    { title: 'Team 1', icon: 'fa-users', color: 'green' },
+    { title: 'Team 2', icon: 'fa-users', color: 'red' }
+  ]
+
+  images = {
+    wows: require('@/assets/wows-icon.png'),
+    wot: require('@/assets/wot-icon.png')
+  }
+
+  onItemClickHandler () {
+    this.show = true
+  }
 }
 </script>
 <style scoped lang="scss">
-.the-entity-panel-sheet {
-  right: 0.25rem;
-  margin: 0.25rem;
-  height: 75%;
+.custom-card-minimised {
+  right: 0;
+  height: 500px;
+  margin-top: 0.25rem;
   position: fixed;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  transition: width 1s;
+
+  >div {
+    margin: 0;
+
+    >div {
+      display: none;
+      margin: 0;
+      flex-grow: 1;
+      flex-direction: column;
+
+      >div:first-child {
+        flex-grow: 1;
+        margin: 0.5rem;
+      }
+
+      >div {
+        margin: 0;
+      }
+    }
+  }
+
+  button {
+    color: $room-navbar-text !important;
+    margin: 0.5rem;
+  }
+}
+
+.custom-card-expanded > div > div {
+  display: flex;
+  max-width: 300px;
+}
+
+.custom-navigation-drawer {
+  background-color: $room-navbar;
+
+  i {
+    color: $room-navbar-text;
+  }
+
+  >div >div {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+
+    >div:first-child {
+      flex: 1 1 30px;
+    }
+
+    >div:last-child {
+      display: flex;
+      flex-direction: column;
+      flex: 1 1 80%;
+      justify-content: space-between;
+      align-items: center;
+    }
+  }
+}
+
+.custom-list-item-center {
+  padding: 0px;
+  justify-content: center;
+
+  &:hover::before {
+    background-color: white;
+  }
 }
 </style>

src/components/TheToolPanel.vue

@@ -28,7 +28,7 @@ export default class TheToolPanel extends Vue {
 </script>
 <style scoped lang="scss">
 .btn-toggle-box{
-  margin: 0.25rem;
+  margin-top: 0.25rem;
   position: fixed;
 }
 </style>

src/components/canvas-tools/ToolContainer.vue

@@ -7,14 +7,28 @@
     offset-x
   >
     <template v-slot:activator="{ on }">
-      <v-btn
-        icon
-        elevation="2"
-        v-on="on"
-        @click="onButtonClickHandler"
-      >
-        <v-icon dense>{{icon}}</v-icon>
-      </v-btn>
+      <div>
+        <v-btn
+          icon
+          tile
+          elevation="2"
+          @click="onButtonClickHandler"
+        >
+          <v-icon dense>{{icon}}</v-icon>
+        </v-btn>
+        <v-btn
+          x-small
+          class="tools-caret-down"
+          icon
+          elevation="0"
+          tile
+          absolute
+          v-on="on"
+          @click="onButtonClickHandler"
+        >
+          <v-icon small>{{ 'fa-caret-down' }}</v-icon>
+        </v-btn>
+      </div>
     </template>
     <v-sheet>
       <slot>Default Content For Slot</slot>
@@ -63,4 +77,12 @@ export default class ToolContainer extends Vue {
     margin-left: 5px;
     box-shadow: 0px 4px 4px -3px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
   }
+  .tools-caret-down {
+    right:2px;
+    transition:0.2s ease-in-out;
+    margin-top:28px;
+  }
+  .rotate90 {
+    transform: rotate(-90deg);
+  }
 </style>

src/components/navigation/TheNavExtraLarge.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row class="child-flex navbar-row">
+  <v-row class="navbar-row">
     <v-col xl="2" lg="2" md="3" sm="6" cols="12" order-md="1" order="1">
       <v-toolbar dense class="navbar-toolbar-left">
         <v-icon color="#FFFFFF">fa-anchor</v-icon>
@@ -72,7 +72,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
   color: black;
 }
 
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
   background-color: $room-navbar;
   color: $room-navbar-text;
   position: relative;

src/components/navigation/TheNavExtraSmall.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row class="child-flex navbar-row">
+  <v-row class="navbar-row">
     <v-col cols="12">
       <v-toolbar dense class="navbar-toolbar-left">
         <v-icon color="#FFFFFF">fa-anchor</v-icon>
@@ -66,7 +66,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
   color: black;
 }
 
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
   background-color: $room-navbar;
   color: $room-navbar-text;
   position: relative;

src/components/navigation/TheNavSmall.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-row class="child-flex navbar-row">
+  <v-row class="navbar-row">
     <v-col cols="12">
       <v-toolbar dense class="navbar-toolbar-left">
         <v-icon color="#FFFFFF">fa-anchor</v-icon>
@@ -66,7 +66,7 @@ header.navbar-toolbar-left.navbar-toolbar-left.navbar-toolbar-left {
   color: black;
 }
 
-.navbar-toolbar-right {
+.navbar-toolbar-right.navbar-toolbar-right.navbar-toolbar-right {
   background-color: $room-navbar;
   color: $room-navbar-text;
   position: relative;

src/components/toolbars/index.ts

@@ -1,2 +1 @@
-export { default as MapButtons } from './MapButtons.vue'
 export { default as SideToolbar } from './SideToolbar.vue'