70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<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> |