vincent/chainetv_web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

modal implementation #12

Merged
vincent merged 10 commits from dev into master 2019-05-11 14:21:09 +00:00
Conversation 0 Commits 10 Files Changed 6 +20 -14
3 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 314d787fda - Show all commits

4
client/src/components/chainetv.vue
View File

@ -73,8 +73,8 @@
</div> </div>
</div> </div>
</div> </div>
<modalLogin v-bind:class="{'is-active': showModalLogin}" @close="showModalLogin = false"/> <modalLogin v-bind:show="showModalLogin" @close="showModalLogin = false" />
<modal v-bind:class="{'is-active': showModal}" @close="showModal = false">{{modalmessage}}</modal> <modal v-bind:show="showModal" @close="showModal = false">{{modalmessage}}</modal>
</div> </div>
</template> </template>

8
client/src/components/modal.vue
View File

@ -1,16 +1,20 @@
<template> <template>
<div class="modal"> <div>
<div v-bind:class="{'is-active':show}" class="modal">
<div class="modal-background"></div> <div class="modal-background"></div>
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button> <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
<div class="modal-content box"> <div class="modal-content box">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
export default { export default {
props:{
show:false,
},
}; };
</script> </script>

22
client/src/components/modalLogin.vue
View File

@ -1,11 +1,8 @@
<!-- components/Login.vue --> <!-- components/Login.vue -->
<template> <template>
<div class="modal"> <modal v-bind:show="show" @close="$emit('close')">
<div class="modal-background"></div> <div class="hero is-success">
<button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button> <div class="hero-body has-text-centered">
<div class="modal-content box">
<div class="section is-success">
<div class="has-text-centered">
<h2 class="title">Login</h2> <h2 class="title">Login</h2>
<p class="subtitle error-msg">{{ errorMsg }}</p> <p class="subtitle error-msg">{{ errorMsg }}</p>
</div> </div>
@ -28,14 +25,16 @@
<a class="button is-success is-large" @click="authenticate">Login</a> <a class="button is-success is-large" @click="authenticate">Login</a>
</div> </div>
</section> </section>
</div> </modal>
</div>
</template> </template>
<script> <script>
import { EventBus } from "../utils"; import { EventBus } from '../utils';
import modal from './modal'
export default { export default {
props:{
show:false,
},
data() { data() {
return { return {
name: "", name: "",
@ -43,6 +42,9 @@ export default {
errorMsg: "" errorMsg: ""
}; };
}, },
components: {
modal
},
methods: { methods: {
authenticate() { authenticate() {
this.$store this.$store