fix(Web-UI): Fixed the hover and click not working on TVshow links to…

… display the details page
PlexRipper · May 14, 2023 · 34eadc1 · 34eadc1
1 parent 7f74ea4
commit 34eadc1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/WebAPI/ClientAppV2/src/components/MediaOverview/MediaTable/MediaTable.vue b/src/WebAPI/ClientAppV2/src/components/MediaOverview/MediaTable/MediaTable.vue
@@ -13,7 +13,7 @@
 					:columns="mediaTableColumns"
 					:row="row"
 					selectable
-					@action="onRowAction" />
+					:disable-hover-click="disableHoverClick" />
 			</q-intersection>
 		</div>
 	</div>

diff --git a/src/WebAPI/ClientAppV2/src/components/MediaOverview/MediaTable/MediaTableRow.vue b/src/WebAPI/ClientAppV2/src/components/MediaOverview/MediaTable/MediaTableRow.vue
@@ -14,8 +14,16 @@
 				</template>
 				<!-- Title -->
 				<template v-else-if="column['type'] === 'title'">
-					<q-col class="media-table-row--column media-table-row--title">
-						<span>{{ row[column.field] }} </span>
+					<q-col
+						:class="[
+							'media-table-row--column',
+							'media-table-row--title',
+							!disableHoverClick ? 'media-table-row--title--hover' : '',
+						]"
+						@click.stop="!disableHoverClick ? onRowAction({ command: 'open-details' }) : () => {}">
+						<span>
+							{{ row[column.field] }}
+						</span>
 					</q-col>
 				</template>
 				<!-- Duration format -->
@@ -73,6 +81,7 @@ defineProps<{
 	row: PlexMediaSlimDTO;
 	columns: QTreeViewTableHeader[];
 	index: number;
+	disableHoverClick?: boolean;
 }>();
 
 defineEmits<{
@@ -105,6 +114,14 @@ defineEmits<{
 		text-overflow: ellipsis;
 		white-space: nowrap;
 		overflow: hidden;
+
+		&--hover {
+			cursor: pointer;
+
+			&:hover {
+				color: $primary;
+			}
+		}
 	}
 }