stuffs

src/views/Dashboard.vue

@@ -3,9 +3,17 @@
 
     <md-dialog :md-active.sync="showNewElementChooser">
       <md-dialog-title>Select the type of the new element</md-dialog-title>
-      <md-button @click="newElement('ingest')">Ingest</md-button>
-      <md-button @click="newElement('encoder')">Encoder</md-button>
-      <md-button @click="newElement('restreamer')">Restreamer</md-button>
+
+
+      <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>
 
@@ -44,13 +52,28 @@
     </md-drawer>
 
     <md-content id="diagram-container">
-
       <simple-flowchart :scene.sync="diagram"></simple-flowchart>
-      <div id="fab-holder">
-        <md-button class="md-fab" @click="performAddElement">
+
+      <md-speed-dial class="md-bottom-right">
+        <md-speed-dial-target @click="performAddElement">
           <md-icon>add</md-icon>
-        </md-button>
-      </div>
+        </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>
 
     </md-content>
 
@@ -69,37 +92,35 @@ export default {
     showNavigation: false,
     showNewElementChooser: false,
     diagram: {
-      centerX: 1024,
-      centerY: 140,
+      centerX: 0,
+      centerY: 0,
       scale: 1,
       nodes: [
         {
           id: 2,
-          x: -700,
-          y: -69,
-          type: 'Action',
-          data: {"text" : "lofasz"},
-          haveInput: false,
+          x: 100,
+          y: 110,
+          type: 'ingest',
+          data: {"text": "as"},
         },
         {
           id: 4,
-          x: -357,
+          x: 357,
           y: 80,
-          type: 'Script',
-          label: 'test2',
-          haveOutput: false
+          type: 'restreamer',
+          data: {"text": "asd"},
         },
         {
           id: 6,
-          x: -557,
+          x: 557,
           y: 80,
-          type: 'Rule',
-          label: 'test3',
+          type: 'encoder',
+          data: {"text": "asdasd"}
         }
       ],
       links: [
         {
-          id: 3,
+          id: 1,
           from: 2, // node id the link start
           to: 4,  // node id the link end
         }