add new station modal

This commit is contained in:
Jonas Heinrich 2021-03-08 15:53:12 +01:00
parent d83868600f
commit 9a5e3520d3

View File

@ -31,10 +31,16 @@
<Breadcrumb title="Favorites" href="#/favorites" />
</Breadcrumbs>
<Actions>
<ActionButton icon="icon-add" @click="alert('Add')">
<ActionButton
icon="icon-add"
:close-after-click="true"
@click="showModal()">
Add station
</ActionButton>
<ActionButton icon="icon-download" @click="alert('Export')">
<ActionButton
icon="icon-download"
:close-after-click="true"
@click="alert('Export')">
Export favorites
</ActionButton>
</Actions>
@ -57,6 +63,11 @@
{{ emptyContentDesc }}
</template>
</EmptyContent>
<Modal v-if="modal" @close="closeModal">
<div class="modal__content">
Hello world
</div>
</Modal>
</AppContent>
<Sidebar
:show-sidebar="showSidebar"
@ -73,6 +84,7 @@ import Breadcrumbs from '@nextcloud/vue/dist/Components/Breadcrumbs'
import Breadcrumb from '@nextcloud/vue/dist/Components/Breadcrumb'
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
import Modal from '@nextcloud/vue/dist/Components/Modal'
import Navigation from './../components/Navigation'
import Table from './../components/Table'
import Sidebar from './../components/Sidebar'
@ -94,6 +106,7 @@ export default {
Actions,
ActionButton,
Sidebar,
Modal,
},
data: () => ({
pageLoading: false,
@ -101,6 +114,7 @@ export default {
showSidebar: false,
sidebarStation: {},
tableData: [],
modal: false,
}),
computed: {
...mapGetters([
@ -190,6 +204,14 @@ export default {
}
},
showModal() {
this.modal = true
},
closeModal() {
this.modal = false
},
},
}
</script>
@ -215,6 +237,12 @@ export default {
display: none;
}
.modal__content {
width: 50vw;
text-align: center;
margin: 10vw 0;
}
@media only screen and (max-width: 1024px) {
.app-navigation-toggle {
display: block;