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

28
src/components/Table.vue
View File

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