Verified Commit 389b806f authored by Agate's avatar Agate 💬

Small improvements

parent 3fc24111
......@@ -27,10 +27,17 @@
:is="getComponent(contribution.type)"
:key="contribution.key"
:contribution="contribution"
@toggle-modal="toggleModal"
v-for="contribution in contributions"></component>
<button @click="fetch(true)" v-if="next" class="button is-medium is-fullwidth">Load more</button>
</div>
</section>
<div class="modals">
<modal :show="modals['donation']" @close="modals['donation'] = false">
<template slot="title">Hello world</template>
</modal>
</div>
</div>
</template>
......@@ -40,15 +47,21 @@ import axios from "axios";
import ContributionItem from "@/components/ContributionItem";
import Issue from "@/components/Issue";
import Donation from "@/components/Donation";
import Modal from "@/components/Modal";
export default {
components: {
ContributionItem,
Donation,
Issue
Issue,
Modal
},
data() {
return {
modals: {
donation: false,
"dev:issue": false
},
contributions: [],
filters: {
type: null
......@@ -67,6 +80,9 @@ export default {
this.fetch();
},
methods: {
toggleModal(type) {
this.modals[type] = true;
},
getComponent(type) {
let mapping = {
"dev:issue": Issue,
......
......@@ -14,6 +14,7 @@
<time :datetime="contribution.creation_date">{{ contribution.creation_date | ago }}</time>
</div>
<button class="button right is-small floated is-outlined is-success" @click="$emit('toggle-modal', contribution.type)">Contribute...</button>
<div class="content"><slot></slot></div>
</div>
</div>
......@@ -28,4 +29,7 @@ export default {
.card {
text-align: left;
}
.right.floated {
float: right;
}
</style>
<template>
<contribution-item :contribution="contribution">
<contribution-item @toggle-modal="$emit('toggle-modal', $event)" :contribution="contribution">
Donated {{ contribution.metadata.amount / 100 }} {{ contribution.metadata.currency }}
on collective <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.collective }}</a>
</contribution-item>
......
<template>
<contribution-item :contribution="contribution">
<contribution-item @toggle-modal="$emit('toggle-modal', $event)" :contribution="contribution">
Opened ticket <a :title="contribution.summary" target="_blank" :href="contribution.url">#{{ contribution.metadata.id }}</a>
on repository <a target="_blank" :href="contribution.metadata.project_url">{{ contribution.metadata.project }}</a>
</contribution-item>
......
<template>
<div :class="['modal', {'is-active': show}]">
<div class="modal-background" @click="$emit('close')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title"><slot name="title"></slot></p>
<button class="delete" aria-label="Close" @click="$emit('close')"></button>
</header>
<section class="modal-card-body">
<slot></slot>
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
</div>
</template>
<script>
export default {
props: ["show"]
};
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment