pooted stuff into components

src/views/Dashboard.vue

@@ -1,88 +1,18 @@
 <template>
   <div class="page-container md-layout-column" id="dashboard-container">
 
-    <md-dialog :md-active.sync="showNewElementChooser">
-      <md-dialog-title>Select the type of the new element</md-dialog-title>
-
-
-      <md-button @click="newElement('ingest')">
-        <md-icon>vertical_align_bottom</md-icon>
-        Ingest
-      </md-button>
-      <i></i> <!-- This is to prevent margin collapse -->
-
-      <md-button @click="newElement('encoder')">
-        <md-icon>gradient</md-icon>
-        Encoder
-      </md-button>
-      <i></i>
-
-      <md-button @click="newElement('restreamer')">
-        <md-icon>publish</md-icon>
-        Restreamer
-      </md-button>
-
-
-    </md-dialog>
-
-    <md-toolbar class="md-primary">
-
-      <md-button class="md-icon-button" @click="showNavigation = true">
-        <md-icon>menu</md-icon>
-      </md-button>
-      <span class="md-title">VideON</span>
-
-      <div class="md-toolbar-section-end">
-        <md-button class="md-raised" :disabled="true">Apply</md-button>
-      </div>
-
-    </md-toolbar>
-
-    <md-drawer :md-active.sync="showNavigation" md-swipeable>
-      <md-toolbar class="md-transparent" md-elevation="0">
-        <span class="md-title">VideON</span>
-
-
-      </md-toolbar>
-
-      <md-list>
-        <md-list-item>
-          <md-avatar class="md-avatar-icon">J</md-avatar>
-          <span class="md-list-item-text">Joska</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-button class="md-raised md-accent">Logout</md-button>
-        </md-list-item>
-
-      </md-list>
+    <!-- toolbar -->
+    <toolbar @showDrawerClicked="showDrawer = true"/>
 
+    <!-- drawer -->
+    <md-drawer :md-active.sync="showDrawer" md-swipeable>
+      <workspace-drawer-content/>
     </md-drawer>
 
+    <!-- workspace -->
     <md-content id="diagram-container">
       <simple-flowchart :scene.sync="diagram"></simple-flowchart>
-
-      <md-speed-dial class="md-bottom-right">
-        <md-speed-dial-target @click="performAddElement">
-          <md-icon>add</md-icon>
-        </md-speed-dial-target>
-
-        <md-speed-dial-content>
-          <md-button @click="newElement('restreamer')" class="md-icon-button">
-            <md-icon>publish</md-icon>
-          </md-button>
-
-          <md-button @click="newElement('encoder')" class="md-icon-button">
-            <md-icon>gradient</md-icon>
-          </md-button>
-
-          <md-button @click="newElement('ingest')" class="md-icon-button">
-            <md-icon>vertical_align_bottom</md-icon>
-          </md-button>
-
-        </md-speed-dial-content>
-      </md-speed-dial>
-
+      <element-adder @addElement="newElement"/>
     </md-content>
 
   </div>
@@ -91,14 +21,21 @@
 <script>
 
 import SimpleFlowchart from '@/simple-flowchart';
+import ElementAdder from "@/components/ElementAdder";
+import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
+import Toolbar from "@/components/Toolbar";
 import {maxBy} from 'lodash';
 
 export default {
   name: 'Dashboard',
-  components: {SimpleFlowchart},
+  components: {
+    SimpleFlowchart,
+    ElementAdder,
+    WorkspaceDrawerContent,
+    Toolbar
+  },
   data: () => ({
-    showNavigation: false,
-    showNewElementChooser: false,
+    showDrawer: false,
     diagram: {
       centerX: 0,
       centerY: 0,
@@ -136,9 +73,6 @@ export default {
     }
   }),
   methods: {
-    performAddElement() {
-      this.showNewElementChooser = true;
-    },
     newElement(type) {
       this.showNewElementChooser = false;