mirror of https://github.com/Kylart/KawAnime.git
132 lines
2.7 KiB
Vue
132 lines
2.7 KiB
Vue
<template lang="pug">
|
|
v-flex(
|
|
xs12 sm6 md4
|
|
:class="item.split(' ').join('-')"
|
|
).elem
|
|
v-card(v-ripple="true").elevation-3.elem-content
|
|
v-layout(row wrap)
|
|
v-flex(xs2 @click.capture="select(item, index)").box
|
|
v-checkbox(
|
|
label=""
|
|
accent
|
|
v-model="selected[index]"
|
|
disabled
|
|
:value="item"
|
|
dark
|
|
)
|
|
v-flex(xs8 v-tooltip:top="{ html: item }", @click.capture="select(item, index)")
|
|
h6.ellipsis.elem-title.white--text {{ item }}
|
|
v-flex(xs2)
|
|
v-menu(bottom right)
|
|
v-btn(icon slot="activator" dark)
|
|
v-icon more_vert
|
|
v-list.dark
|
|
template(v-for="(button, i) in buttons")
|
|
v-list-tile(@click="button.method(item, i, index)")
|
|
v-list-tile-action
|
|
v-icon {{ button.action }}
|
|
v-list-tile-title.white--text {{ button.text }}
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
props: {
|
|
item: String,
|
|
deleteEntry: Function,
|
|
select: Function,
|
|
selected: Object,
|
|
index: Number
|
|
},
|
|
data () {
|
|
const vm = this
|
|
return {
|
|
buttons: [
|
|
{
|
|
action: 'file_download',
|
|
text: 'Download',
|
|
method: (item) => vm.download(item)
|
|
}, {
|
|
action: 'info_outline',
|
|
text: 'Information',
|
|
method: (item) => vm.$store.dispatch('searchInfoFromName', item)
|
|
}, {
|
|
action: 'delete_sweep',
|
|
text: 'Delete this entry',
|
|
method: (item, i, index) => vm.deleteEntry(item, index)
|
|
}
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
download (name) {
|
|
this.$store.dispatch('download', {
|
|
name,
|
|
isDownloader: false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.card__text
|
|
{
|
|
padding-top: 0;
|
|
}
|
|
|
|
.ellipsis
|
|
{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.elem-content
|
|
{
|
|
margin-left: 5px;
|
|
position: relative;
|
|
background-color: rgb(60, 60, 60);
|
|
height: 45px !important;
|
|
}
|
|
|
|
.elem-content:hover
|
|
{
|
|
transition: all 0.25s;
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
|
|
0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
|
0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elem
|
|
{
|
|
padding: 5px 5px 5px 5px;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
|
|
.elem .input-group
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.box
|
|
{
|
|
padding-top: 7px;
|
|
padding-left: 13px;
|
|
}
|
|
|
|
.elem-title
|
|
{
|
|
line-height: 24px;
|
|
font-size: 20px;
|
|
padding-top: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.selected
|
|
{
|
|
background-color: #2E7D32;
|
|
}
|
|
</style>
|