You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
82 lines
2.5 KiB
82 lines
2.5 KiB
<template>
|
|
<tr class="">
|
|
<td class="pl-5 py-3 w-1 h-16 handle cursor-move text-gray-500 hover:text-white">
|
|
<div class="text-center">
|
|
<i class="fas fa-bars transitions transition-colors"></i>
|
|
</div>
|
|
</td>
|
|
<td class="pl-5 py-3 w-16 h-16">
|
|
<progress-ring :ring-width="8" class="w-10 h-10" :is-paused="isPaused" @toggle-state="toggleState" :progress="progress"/>
|
|
</td>
|
|
<td class="p-5 py-3 h-16 overflow-ellipsis overflow-hidden whitespace-nowrap">
|
|
{{ name }}
|
|
</td>
|
|
<td class="p-5 py-3 h-16 w-32 hidden md:table-cell">1.21GB</td>
|
|
<td class="p-5 py-3 h-16 w-32 hidden md:table-cell">5 Minutes</td>
|
|
<td class="p-5 py-3 h-16 w-16 hidden md:table-cell">29</td>
|
|
<td class="p-5 py-3 h-16 w-1 hidden md:table-cell">
|
|
<div class="dropdown" :class="{'active': showMenu}">
|
|
<button class="w-9 h-9 rounded-full hover:bg-indigo-500 hover:text-white transitions transition-colors" id="actions-menu" aria-expanded="true" aria-haspopup="true"><i class="fas fa-ellipsis-v"></i></button>
|
|
<div class="dropdown-menu origin-top-right absolute right: 0 mt-8 w-56" role="menu" aria-orientation="vertical" aria-labelledby="actions-menu">
|
|
<div class="py-1" role="none">
|
|
<a href="#" class="block px-4 py-2 text-sm text-gray-300">Thing</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import ProgressRing from "./ProgressRing.vue";
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
ProgressRing
|
|
},
|
|
data() {
|
|
return {
|
|
showMenu: false
|
|
}
|
|
},
|
|
methods: {
|
|
toggleState() {
|
|
// this.isPaused = !this.isPaused;
|
|
},
|
|
},
|
|
mounted() {
|
|
},
|
|
props: {
|
|
id: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
name: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
infoHash: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
progress: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
isPaused: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style class="css">
|
|
.dropdown .dropdown-menu {
|
|
display: none;
|
|
}
|
|
.dropdown.active .dropdown-menu {
|
|
display: initial;
|
|
}
|
|
</style>
|