pooted stuff into components

src/components/ElementAdder.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <md-dialog :md-active.sync="showNewElementChooser">
+      <md-dialog-title>Select the type of the new element</md-dialog-title>
+
+
+      <md-button @click="addElement('ingest')">
+        <md-icon>vertical_align_bottom</md-icon>
+        Ingest
+      </md-button>
+      <i></i> <!-- This is to prevent margin collapse -->
+
+      <md-button @click="addElement('encoder')">
+        <md-icon>gradient</md-icon>
+        Encoder
+      </md-button>
+      <i></i>
+
+      <md-button @click="addElement('restreamer')">
+        <md-icon>publish</md-icon>
+        Restreamer
+      </md-button>
+
+
+    </md-dialog>
+
+
+    <md-speed-dial class="md-bottom-right">
+      <md-speed-dial-target @click="showNewElementChooser = true">
+        <md-icon>add</md-icon>
+      </md-speed-dial-target>
+
+      <md-speed-dial-content>
+        <md-button @click="addElement('restreamer')" class="md-icon-button">
+          <md-icon>publish</md-icon>
+        </md-button>
+
+        <md-button @click="addElement('encoder')" class="md-icon-button">
+          <md-icon>gradient</md-icon>
+        </md-button>
+
+        <md-button @click="addElement('ingest')" class="md-icon-button">
+          <md-icon>vertical_align_bottom</md-icon>
+        </md-button>
+
+      </md-speed-dial-content>
+    </md-speed-dial>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElementAdder",
+  data() {
+    return {
+      showNewElementChooser: false
+    }
+  },
+  methods: {
+    addElement(type) {
+      this.showNewElementChooser = false;
+      this.$emit("addElement", type)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>