Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-12-19 15:53:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

update tags ui

Browse source
This commit is contained in:
Gamebrary 2020-10-14 14:53:08 -07:00
parent 2c36254f4d
commit 1de7f2c403
1 changed files with 52 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
src/pages/Tags.vue
View file

@ -61,7 +61,7 @@
@click="submit" @click="submit"
> >
<b-spinner small v-if="saving" /> <b-spinner small v-if="saving" />
<span v-else>Add tag</span> <span v-else>{{ $t('tags.form.addTag')}}</span>
</b-button> </b-button>
<b-alert <b-alert
@ -78,21 +78,30 @@
<b-col cols="12" lg="6" v-if="gameTags && localTags"> <b-col cols="12" lg="6" v-if="gameTags && localTags">
<h6>{{ $t('tags.list.title') }}</h6> <h6>{{ $t('tags.list.title') }}</h6>
<b-list-group> <b-card
<b-list-group-item class="mb-3"
class="d-flex justify-content-between align-items-center p-2" :bg-variant="nightMode ? 'dark' : null"
v-for="({ games, hex, tagTextColor }, name) in localTags" :text-variant="nightMode ? 'white' : null"
:key="name" no-body
> v-for="({ games, hex, tagTextColor }, name) in localTags"
<b-badge :key="name"
pill >
tag="small" <b-form-row class="p-3 d-flex align-items-center">
:style="`background-color: ${hex}; color: ${tagTextColor}`" <b-col cols="8" md="9">
> <b-badge
{{ name }} pill
</b-badge> tag="small"
:style="`background-color: ${hex}; color: ${tagTextColor}`"
>
{{ name }}
</b-badge>
<div> <small class="text-muted pl-2">
{{ games.length }} {{ $t('global.games') }}
</small>
</b-col>
<b-col cols="4" md="3" class="text-right">
<b-button <b-button
variant="primary" variant="primary"
@click="editTag(name)" @click="editTag(name)"
@ -102,13 +111,13 @@
<b-button <b-button
variant="danger" variant="danger"
@click="deleteTag(name)" @click="promptDeleteTag(name)"
> >
<icon name="trash" white /> <icon name="trash" white />
</b-button> </b-button>
</div> </b-col>
</b-list-group-item> </b-form-row>
</b-list-group> </b-card>
<!-- TODO: move to component --> <!-- TODO: move to component -->
<b-modal <b-modal
@ -119,19 +128,13 @@
:body-text-variant="nightMode ? 'white' : null" :body-text-variant="nightMode ? 'white' : null"
:footer-bg-variant="nightMode ? 'dark' : null" :footer-bg-variant="nightMode ? 'dark' : null"
:footer-text-variant="nightMode ? 'white' : null" :footer-text-variant="nightMode ? 'white' : null"
footer-class="d-flex justify-content-between"
> >
<template v-slot:modal-header="{ close }"> <template v-slot:modal-header="{ close }">
<modal-header <modal-header
:title="`Edit ${editingOriginalTagName} tag`" :title="$t('tags.edit.title')"
> @close="close"
<b-button />
variant="light"
size="sm"
@click="close"
>
<icon name="x" />
</b-button>
</modal-header>
</template> </template>
<form <form
@ -178,7 +181,10 @@
</form> </form>
<template v-slot:modal-footer="{ cancel }"> <template v-slot:modal-footer="{ cancel }">
<b-button @click="cancel"> <b-button
variant="light"
@click="cancel"
>
Cancel Cancel
</b-button> </b-button>
@ -317,6 +323,22 @@ export default {
this.saveTags(); this.saveTags();
}, },
promptDeleteTag(tagName) {
this.$bvModal.msgBoxConfirm(this.$t('tags.delete.message'), {
title: this.$t('tags.delete.title'),
okVariant: 'danger',
okTitle: this.$t('tags.delete.buttonLabel'),
cancelTitle: this.$t('global.cancel'),
headerClass: 'pb-0 border-0',
footerClass: 'pt-0 border-0',
})
.then((value) => {
if (value) {
this.deleteTag(tagName);
}
});
},
deleteTag(tagName) { deleteTag(tagName) {
this.$delete(this.localTags, tagName); this.$delete(this.localTags, tagName);
this.saveTags(true); this.saveTags(true);