From 7a457eb16162b2b90fa7d9b46e658b132316140e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 7 Sep 2022 22:37:32 +0200
Subject: [PATCH] feat(link shares): cleanup link share table

---
 src/components/sharing/linkSharing.vue | 66 ++++++++++++++------------
 src/i18n/lang/en.json                  |  6 +--
 2 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/src/components/sharing/linkSharing.vue b/src/components/sharing/linkSharing.vue
index 15517de7b..958e3ece5 100644
--- a/src/components/sharing/linkSharing.vue
+++ b/src/components/sharing/linkSharing.vue
@@ -80,9 +80,7 @@
 				<thead>
 				<tr>
 					<th>{{ $t('list.share.attributes.link') }}</th>
-					<th>{{ $t('list.share.attributes.name') }}</th>
-					<th>{{ $t('list.share.attributes.sharedBy') }}</th>
-					<th>{{ $t('list.share.attributes.right') }}</th>
+					<th>&nbsp;</th>
 					<th>{{ $t('list.share.links.view') }}</th>
 					<th>{{ $t('list.share.attributes.delete') }}</th>
 				</tr>
@@ -112,34 +110,37 @@
 							</div>
 						</div>
 					</td>
-					<td>
-						<template v-if="s.name !== ''">
-							{{ s.name }}
-						</template>
-						<i v-else>{{ $t('list.share.links.noName') }}</i>
-					</td>
-					<td>
-						{{ s.sharedBy.getDisplayName() }}
-					</td>
 					<td class="type">
-						<template v-if="s.right === RIGHTS.ADMIN">
-							<span class="icon is-small">
-								<icon icon="lock"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.admin') }}
-						</template>
-						<template v-else-if="s.right === RIGHTS.READ_WRITE">
-							<span class="icon is-small">
-								<icon icon="pen"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.readWrite') }}
-						</template>
-						<template v-else>
-							<span class="icon is-small">
-								<icon icon="users"/>
-							</span>&nbsp;
-							{{ $t('list.share.right.read') }}
-						</template>
+						<p class="mb-2" v-if="s.name !== ''">
+							{{ s.name }}
+						</p>
+
+						<p class="mb-2">
+							<i18n-t keypath="list.share.links.sharedBy">
+								<strong>{{ s.sharedBy.getDisplayName() }}</strong>
+							</i18n-t>
+						</p>
+
+						<p class="rights-item">
+							<template v-if="s.right === RIGHTS.ADMIN">
+								<span class="icon is-small">
+									<icon icon="lock"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.admin') }}
+							</template>
+							<template v-else-if="s.right === RIGHTS.READ_WRITE">
+								<span class="icon is-small">
+									<icon icon="pen"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.readWrite') }}
+							</template>
+							<template v-else>
+								<span class="icon is-small">
+									<icon icon="users"/>
+								</span>&nbsp;
+								{{ $t('list.share.right.read') }}
+							</template>
+						</p>
 					</td>
 					<td>
 						<div class="select">
@@ -229,6 +230,7 @@ const showNewForm = ref(false)
 interface SelectedViewMapper {
 	[listId: number]: string,
 }
+
 const selectedView = ref<SelectedViewMapper>({})
 
 const copy = useCopyToClipboard()
@@ -294,5 +296,9 @@ function getShareLink(hash: string, view: string = 'list') {
 	overflow-y: auto
 }
 
+.rights-item {
+	white-space: nowrap;
+}
+
 @include modal-transition();
 </style>
\ No newline at end of file
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index d7a376fc7..d484aed03 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -243,7 +243,8 @@
         "removeText": "Are you sure you want to remove this link share? It will no longer be possible to access this list with this link share. This cannot be undone!",
         "createSuccess": "The link share was successfully created.",
         "deleteSuccess": "The link share was successfully deleted",
-        "view": "View"
+        "view": "View",
+        "sharedBy": "Shared by {0}"
       },
       "userTeam": {
         "typeUser": "user | users",
@@ -265,9 +266,6 @@
       },
       "attributes": {
         "link": "Link",
-        "name": "Name",
-        "sharedBy": "Shared by",
-        "right": "Right",
         "delete": "Delete"
       }
     },