add new station modal
This commit is contained in:
parent
d83868600f
commit
9a5e3520d3
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user