From 579947a942d4cf917a32e62daa0775e48eb34fc0 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Thu, 15 Oct 2020 12:00:23 +0200
Subject: [PATCH] TableItem component further styling

---
 .eslintrc.js                           |  6 +--
 src/components/Table/Table.vue         | 55 ++++++-----------------
 src/components/TableItem/TableItem.vue | 60 ++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 46 deletions(-)
 create mode 100644 src/components/TableItem/TableItem.vue

diff --git a/.eslintrc.js b/.eslintrc.js
index 00e437c..3a01220 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
 	extends: [
-		'@nextcloud'
-	]
-};
+		'@nextcloud',
+	],
+}
diff --git a/src/components/Table/Table.vue b/src/components/Table/Table.vue
index 1b46366..6871e6c 100644
--- a/src/components/Table/Table.vue
+++ b/src/components/Table/Table.vue
@@ -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;
diff --git a/src/components/TableItem/TableItem.vue b/src/components/TableItem/TableItem.vue
new file mode 100644
index 0000000..564931d
--- /dev/null
+++ b/src/components/TableItem/TableItem.vue
@@ -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>