124 lines
2.4 KiB
Vue
124 lines
2.4 KiB
Vue
<template>
|
|
<a :href="urlToDetail">
|
|
<texture-item>
|
|
<div class="item-body">
|
|
<img :src="urlToPreview">
|
|
</div>
|
|
|
|
<template #footer>
|
|
<p class="texture-name">
|
|
<span :title="name">{{ name }}
|
|
<small>{{ $t('skinlib.filter.' + type) }}</small>
|
|
</span>
|
|
</p>
|
|
|
|
<a
|
|
:title="likeActionText"
|
|
class="more like"
|
|
:class="{ liked, anonymous }"
|
|
href="#"
|
|
@click.stop="toggleLiked"
|
|
>
|
|
<i class="fas fa-heart" />
|
|
<span>{{ likes }}</span>
|
|
</a>
|
|
|
|
<small v-if="!isPublic" class="more private-label">
|
|
{{ $t('skinlib.private') }}
|
|
</small>
|
|
</template>
|
|
</texture-item>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
import TextureItem from './TextureItem.vue'
|
|
import addClosetItem from './mixins/addClosetItem'
|
|
import removeClosetItem from './mixins/removeClosetItem'
|
|
|
|
export default {
|
|
name: 'SkinLibItem',
|
|
components: {
|
|
TextureItem,
|
|
},
|
|
mixins: [
|
|
addClosetItem,
|
|
removeClosetItem,
|
|
],
|
|
props: {
|
|
tid: Number,
|
|
name: String,
|
|
type: {
|
|
validator: value => ['steve', 'alex', 'cape'].includes(value),
|
|
},
|
|
liked: Boolean,
|
|
likes: Number,
|
|
anonymous: Boolean,
|
|
isPublic: Boolean, // `public` is a reserved keyword
|
|
},
|
|
computed: {
|
|
urlToDetail() {
|
|
return `${blessing.base_url}/skinlib/show/${this.tid}`
|
|
},
|
|
urlToPreview() {
|
|
return `${blessing.base_url}/preview/${this.tid}.png`
|
|
},
|
|
likeActionText() {
|
|
if (this.anonymous) {
|
|
return this.$t('skinlib.anonymous')
|
|
}
|
|
|
|
return this.liked
|
|
? this.$t('skinlib.removeFromCloset')
|
|
: this.$t('skinlib.addToCloset')
|
|
},
|
|
},
|
|
methods: {
|
|
toggleLiked() {
|
|
if (this.anonymous) {
|
|
return
|
|
}
|
|
|
|
if (this.liked) {
|
|
this.removeFromCloset()
|
|
} else {
|
|
this.addClosetItem()
|
|
}
|
|
},
|
|
async removeFromCloset() {
|
|
this.$once('item-removed', () => this.$emit('like-toggled', false))
|
|
await this.removeClosetItem()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="stylus">
|
|
.texture-name
|
|
width 65%
|
|
display inline-block
|
|
overflow hidden
|
|
text-overflow ellipsis
|
|
white-space nowrap
|
|
|
|
@media (min-width: 1200px)
|
|
.item
|
|
width 250px
|
|
|
|
.item-body > img
|
|
margin-left 50px
|
|
|
|
.texture-name
|
|
width 65%
|
|
|
|
.item-footer
|
|
a
|
|
color #fff
|
|
|
|
.like:hover, .liked
|
|
color #e0353b
|
|
|
|
.private-label
|
|
margin-top 2px
|
|
</style>
|