Xefir/nextcloud-app-radio
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

further table styling

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-19 21:23:26 +02:00
parent e41e359865
commit 86fd0eb3a3
1 changed files with 25 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/Table.vue
View File

@ -1,5 +1,5 @@
<template>
<table id="table">
<table v-if="stationData" id="table">
<thead>
<tr>
<th />
@ -9,14 +9,16 @@
<th />
</tr>
</thead>
<tbody v-if="stationData">
<tbody>
<tr
v-for="(station, idx) in stationData"
:key="idx"
:class="{ selected: idx === activeItem}">
<td @click="doPlay">
<div class="stationIcon"
:style="{ backgroundImage: `url('${ station.favicon }')` }" />
:style="{ backgroundImage: `url('${ station.favicon }')` }">
<span class="icon-starred" />
</div>
</td>
<td class="filenameColumn" @click="doPlay(idx, station)">
<span class="innernametext">
@ -25,7 +27,7 @@
</td>
<td class="actionColumn">
<Actions>
<ActionButton icon="icon-star" :close-after-click="true">
<ActionButton icon="icon-star" :close-after-click="true" @click="doFavor(idx, station)">
{{ t('radio', 'Add to favorites') }}
</ActionButton>
<ActionButton icon="icon-info" :close-after-click="true">
@ -64,6 +66,9 @@ export default {
this.activeItem = idx
this.$emit('doPlay', station)
},
doFavor(idx, station) {
this.$emit('doFavor', station)
},
},
}
</script>
@ -105,6 +110,7 @@ table {
background-position: 8px center;
background-repeat: no-repeat;
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
tr {
@ -114,10 +120,10 @@ table {
tr:hover, tr:focus, tr.mouseOver td {
background-color: var(--color-background-hover);
}
}
tr.selected {
background-color: var(--color-primary-light);
tr.selected {
background-color: var(--color-primary-light);
}
}
tr td:first-child {
@ -133,6 +139,7 @@ table {
position: relative;
vertical-align: top;
user-select: none;
cursor: pointer;
}
.stationIcon {
@ -143,6 +150,17 @@ table {
background-position: center;
}
.icon-starred {
background-image: var(--icon-star-dark-fc0);
vertical-align: middle;
background-size: 16px 16px;
display: inline-block;
background-repeat: no-repeat;
background-position: center;
min-width: 16px;
min-height: 16px;
}
.actionColumn {
width: auto;
padding-right: 40px;