147 lines
2.5 KiB
Vue
147 lines
2.5 KiB
Vue
<template>
|
|
<table id="table">
|
|
<thead>
|
|
<tr>
|
|
<th />
|
|
<th class="nameColumn">
|
|
{{ t('radio', 'Name') }}
|
|
</th>
|
|
<th />
|
|
</tr>
|
|
</thead>
|
|
<tbody v-if="stationData">
|
|
<tr v-for="(station, idx) in stationData" :key="idx">
|
|
<td @click="doPlay">
|
|
<div class="stationIcon"
|
|
:style="{ backgroundImage: `url('${ station.favicon }')` }" />
|
|
</td>
|
|
<td class="filenameColumn" @click="doPlay(station)">
|
|
<span class="innernametext">
|
|
{{ station.name }}
|
|
</span>
|
|
</td>
|
|
<td class="actionColumn">
|
|
<Actions>
|
|
<ActionButton icon="icon-star" :close-after-click="true">
|
|
{{ t('radio', 'Add to favorites') }}
|
|
</ActionButton>
|
|
<ActionButton icon="icon-info" :close-after-click="true">
|
|
{{ t('radio', 'Details') }}
|
|
</ActionButton>
|
|
</Actions>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import Actions from '@nextcloud/vue/dist/Components/Actions'
|
|
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
|
|
|
|
export default {
|
|
name: 'Table',
|
|
components: {
|
|
Actions,
|
|
ActionButton,
|
|
},
|
|
props: {
|
|
stationData: {
|
|
type: Array,
|
|
default() { return [] },
|
|
},
|
|
},
|
|
methods: {
|
|
doPlay(station) {
|
|
this.$emit('doPlay', station)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
table {
|
|
width: 100%;
|
|
min-width: 250px;
|
|
|
|
thead {
|
|
background-color: var(--color-main-background-translucent);
|
|
z-index: 60;
|
|
position: sticky;
|
|
position: -webkit-sticky;
|
|
top: 99px;
|
|
|
|
th {
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 15px;
|
|
height: 50px;
|
|
}
|
|
|
|
th, th a {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
|
|
th.nameColumn {
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
tbody {
|
|
|
|
td {
|
|
padding: 0 15px;
|
|
font-style: normal;
|
|
background-position: 8px center;
|
|
background-repeat: no-repeat;
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
tr {
|
|
height: 51px;
|
|
background-color: var(--color-background-light);
|
|
|
|
tr:hover, tr:focus, tr.mouseOver td {
|
|
background-color: var(--color-background-hover);
|
|
}
|
|
}
|
|
|
|
tr td:first-child {
|
|
padding-left: 40px;
|
|
width: 32px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
td.filenameColumn .innernametext {
|
|
color: var(--color-main-text);
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
position: relative;
|
|
vertical-align: top;
|
|
user-select: none;
|
|
}
|
|
|
|
.stationIcon {
|
|
width: 32px;
|
|
height: 32px;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
background-position: center;
|
|
}
|
|
|
|
.actionColumn {
|
|
width: auto;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
.filenameColumn {
|
|
width: 100%;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|