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