beenull/photoprism
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Create dialog component in 3 versions

Browse source
This commit is contained in:
Theresa Gresch 2019-06-27 10:15:52 +02:00
parent b19c73e315
commit c754545f6b
1 changed files with 77 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
frontend/src/component/p-dialog.vue Normal file
View file

@ -0,0 +1,77 @@
<template>
<v-layout row justify-center>
<!--<v-dialog v-model="dialog" color="blue-grey lighten-5" persistent max-width="350" transition="dialog-right-transition">
<v-card raised>
<v-toolbar flat color="blue-grey lighten-4">
<v-icon>delete</v-icon>
<v-toolbar-title>Delete Photos</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>You want to delete the {{ count }} selected items? You can't undo this action.</v-card-text>
<v-card-actions>
<v-layout row align-center justify-center fill-height>
<v-btn @click.stop="close" depressed color="teal accent-4">Keep</v-btn>
<v-btn color="delete" @click.stop="agree">Delete<v-icon right dark>delete</v-icon></v-btn>
<v-btn @click.stop="close" depressed color="teal accent-4"><v-icon left dark>clear</v-icon>Cancel</v-btn>
<v-btn color="delete" @click.stop="agree"><v-icon left dark>done</v-icon> Confirm</v-btn>
</v-layout>
</v-card-actions>
</v-card>-->
<v-dialog v-model="dialog" persistent max-width="350" transition="dialog-right-transition" class="p-photo-dialog">
<v-card raised elevation="24">
<v-layout column align-center justify-center>
<v-icon size="80" color="grey lighten-1" class="ma-3">error_outline</v-icon>
</v-layout>
<v-layout column align-center justify-center fill-height class="ma-3">
<div class="headline">Are you sure?</div>
<span class="text-align-center p-photo-dialog-text">You want to delete the {{ count }} selected items? You can't undo this action.</span>
<v-spacer></v-spacer>
</v-layout>
<v-card-actions>
<v-layout row align-center justify-center fill-height class="pb-2">
<v-btn @click.stop="close" depressed color="grey lighten-1" class="p-photo-dialog-cancel">Cancel</v-btn>
<v-btn color="delete" @click.stop="agree" class="p-photo-dialog-confirm">Delete</v-btn>
</v-layout>
</v-card-actions>
</v-card>
<!--<v-dialog v-model="dialog" persistent max-width="450" transition="dialog-right-transition">
<v-card raised elevation="24">
<v-layout row align-center justify-center fill-height>
<v-icon size="80" color="grey lighten-1" class="ma-3">error_outline</v-icon>
<v-layout column fill-height class="pa-3">
<div class="headline">Are you sure?</div>
<span>You want to delete the {{ count }} selected items? You can't undo this action.</span>
<v-spacer></v-spacer>
</v-layout>
</v-layout>
<v-card-actions>
<v-layout row align-center justify-center class="pb-2 ma-2">
<v-btn @click.stop="close" depressed color="grey lighten-1">Cancel</v-btn>
<v-btn color="delete" @click.stop="agree">Delete</v-btn>
</v-layout>
</v-card-actions>
</v-card>-->
</v-dialog>
</v-layout>
</template>
<script>
export default {
name: 'p-dialog',
props: {
dialog: Boolean,
count: String,
},
data () {
return {
}
},
methods: {
close() {
this.$emit('close');
},
agree() {
this.$emit('agree');
},
}
}
</script>