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

TableItem component further styling

Browse Source
This commit is contained in:
Jonas Heinrich 2020-10-15 12:00:23 +02:00
parent 3b302b45d3
commit 579947a942
3 changed files with 75 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.js
View File

@ -1,5 +1,5 @@
module.exports = {
extends: [
'@nextcloud'
]
};
'@nextcloud',
],
}

55
src/components/Table/Table.vue
View File

@ -2,13 +2,11 @@
<table id="table">
<thead>
<tr>
<th>Icon</th>
<th id="headerName" class="hidden column-name">
<div id="headerName-container">
<a class="name sort columntitle" data-sort="name">
<span>Name</span>
<span class="sort-indicator" />
</a>
<span id="selectedActionsList" class="selectedActions">
<a href="" class="actions-selected">
@ -22,51 +20,22 @@
</tr>
</thead>
<tbody>
<tr>
<td>
Icon
</td>
<td class="filename ui-draggable ui-draggable-handle">
<a class="name" href="/index.php/apps/files?dir=/&amp;openfile=24">
<div class="thumbnail-wrapper">
<div class="thumbnail" style="background-image:url(/apps/theming/img/core/filetypes/application-pdf.svg?v=0);">
<div class="favorite-mark ">
<span class="icon icon-star" />
<span class="hidden-visually">Not favorited</span>
</div>
</div>
</div>
<span class="nametext">
<span class="innernametext">Reasons to use Nextcloud</span>
</span>
<span class="fileactions">
<a class="action action-share permanent"
href="#"
data-action="Share"
data-original-title=""
title="">
<span class="icon icon-shared" />
<span> Share</span>
</a>
<a class="action action-menu permanent"
href="#"
data-action="menu"
data-original-title=""
title="">
<span class="icon icon-more" />
<span class="hidden-visually">Actions</span>
</a>
</span>
</a>
</td>
<td>
Options
</td>
</tr>
<TableItem />
</tbody>
</table>
</template>
<script>
import TableItem from '../TableItem/TableItem.vue'
export default {
name: 'Table',
components: {
TableItem,
},
}
</script>
<style lang="scss">
table {
position: relative;

60
src/components/TableItem/TableItem.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<tr>
<td>
<div class="stationIcon" />
</td>
<td class="filenameColumn">
<span class="innernametext">
SRF Virus
</span>
</td>
<td class="actionColumn">
<Actions>
<ActionButton icon="icon-star" :close-after-click="true" @click="onFavorite">
Add to favorites
</ActionButton>
<ActionButton icon="icon-info" :close-after-click="true" @click="onDetails">
Details
</ActionButton>
</Actions>
</td>
</tr>
</template>
<script>
import Actions from '@nextcloud/vue/dist/Components/Actions'
import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
export default {
name: 'TableItem',
components: {
Actions,
ActionButton,
},
}
</script>
<style>
tr td:first-child {
margin-left: 20px;
width: 32px;
padding-right: 0px;
}
.stationIcon {
width: 32px;
height: 32px;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/ad/Radio_SRF_Virus.svg/205px-Radio_SRF_Virus.svg.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.actionColumn {
width: auto;
}
.filenameColumn {
width: 100%;
}
</style>