use @nc/vue button in dashboard widget, use material icon inside

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
This commit is contained in:
Julien Veyssier
2022-09-06 20:30:49 +02:00
parent 7dba89a03a
commit e29ac75f3d

View File

@@ -48,21 +48,26 @@
</template> </template>
</NcDashboardWidget> </NcDashboardWidget>
<div class="center-button"> <div class="center-button">
<button @click="toggleAddCardModel"> <NcButton @click="toggleAddCardModel">
<template #icon>
<PlusIcon :size="20" />
</template>
{{ t('deck', 'Add card') }} {{ t('deck', 'Add card') }}
</button> </NcButton>
<CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" /> <CardCreateDialog v-if="showAddCardModal" @close="toggleAddCardModel" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import PlusIcon from 'vue-material-design-icons/Plus.vue'
import { NcDashboardWidget } from '@nextcloud/vue' import { NcDashboardWidget } from '@nextcloud/vue'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import labelStyle from './../mixins/labelStyle.js' import labelStyle from './../mixins/labelStyle.js'
import DueDate from '../components/cards/badges/DueDate.vue' import DueDate from '../components/cards/badges/DueDate.vue'
import { generateUrl } from '@nextcloud/router' import { generateUrl } from '@nextcloud/router'
import CardCreateDialog from '../CardCreateDialog.vue' import CardCreateDialog from '../CardCreateDialog.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
export default { export default {
name: 'Dashboard', name: 'Dashboard',
@@ -70,6 +75,8 @@ export default {
DueDate, DueDate,
NcDashboardWidget, NcDashboardWidget,
CardCreateDialog, CardCreateDialog,
NcButton,
PlusIcon,
}, },
mixins: [labelStyle], mixins: [labelStyle],
data() { data() {
@@ -120,7 +127,10 @@ export default {
@import './../css/labels'; @import './../css/labels';
.center-button { .center-button {
text-align: center; display: flex;
align-items: center;
justify-content: center;
margin-top: 8px;
} }
#deck-widget-empty-content { #deck-widget-empty-content {