From ddf667009aa7aa50bb7fef47bfa088f55069af30 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 8 Jun 2021 15:09:10 +0200
Subject: [PATCH] Fully clickable notification items

---
 com.woltlab.wcf/templates/notificationList.tpl   |  7 ++++---
 wcfsetup/install/files/js/WCF.User.js            |  7 -------
 wcfsetup/install/files/style/ui/userProfile.scss | 14 ++++++++++++++
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/com.woltlab.wcf/templates/notificationList.tpl b/com.woltlab.wcf/templates/notificationList.tpl
index 33338e7f13..5a3a5202d3 100644
--- a/com.woltlab.wcf/templates/notificationList.tpl
+++ b/com.woltlab.wcf/templates/notificationList.tpl
@@ -51,7 +51,8 @@
 			
 				<ul class="containerList userNotificationItemList">
 		{/if}
-				<li class="jsNotificationItem notificationItem{if $notification[authors] > 1} groupedNotificationItem{/if}{if !$notification[event]->isConfirmed()} notificationUnconfirmed{/if}" data-link="{if $notification[event]->isConfirmed()}{$notification[event]->getLink()}{else}{link controller='NotificationConfirm' id=$notification[notificationID]}{/link}{/if}" data-link-replace-all="{if $notification[event]->isConfirmed()}false{else}true{/if}" data-object-id="{@$notification[notificationID]}" data-is-read="{if $notification[event]->isConfirmed()}true{else}false{/if}" data-is-grouped="{if $notification[authors] > 1}true{else}false{/if}">
+				{capture assign='__notificationLink'}{if $notification[event]->isConfirmed()}{$notification[event]->getLink()}{else}{link controller='NotificationConfirm' id=$notification[notificationID]}{/link}{/if}{/capture}
+				<li class="jsNotificationItem notificationItem{if $notification[authors] > 1} groupedNotificationItem{/if}{if !$notification[event]->isConfirmed()} notificationUnconfirmed{/if}" data-link="{@$__notificationLink}" data-link-replace-all="{if $notification[event]->isConfirmed()}false{else}true{/if}" data-object-id="{@$notification[notificationID]}" data-is-read="{if $notification[event]->isConfirmed()}true{else}false{/if}" data-is-grouped="{if $notification[authors] > 1}true{else}false{/if}">
 					<div class="box32">
 						{if $notification[authors] < 2}
 							<div class="jsTooltip" title="{$notification[event]->getAuthor()->username}">
@@ -61,7 +62,7 @@
 							<div class="details">
 								<p>
 									{if !$notification[confirmed]}<span class="badge label newContentBadge">{lang}wcf.message.new{/lang}</span>{/if}
-									{@$notification[event]->getMessage()}
+									<a href="{@$__notificationLink}" class="userNotificationItemLink">{@$notification[event]->getMessage()}</a>
 								</p>
 								<p><small>{@$notification[time]|time}</small></p>
 							</div>
@@ -73,7 +74,7 @@
 							<div class="details">
 								<p>
 									{if !$notification[confirmed]}<span class="badge label newContentBadge">{lang}wcf.message.new{/lang}</span>{/if}
-									{@$notification[event]->getMessage()}
+									<a href="{@$__notificationLink}" class="userNotificationItemLink">{@$notification[event]->getMessage()}</a>
 								</p>
 								<p><small>{@$notification[time]|time}</small></p>
 								
diff --git a/wcfsetup/install/files/js/WCF.User.js b/wcfsetup/install/files/js/WCF.User.js
index 174694e1a5..b6dc5fdbfd 100644
--- a/wcfsetup/install/files/js/WCF.User.js
+++ b/wcfsetup/install/files/js/WCF.User.js
@@ -1800,13 +1800,6 @@ if (COMPILER_TARGET_DEFAULT) {
 					var $markAsConfirmed = $('<a href="#" class="icon icon24 fa-check notificationItemMarkAsConfirmed jsTooltip" title="' + WCF.Language.get('wcf.user.notification.markAsConfirmed') + '" />').appendTo($item);
 					$markAsConfirmed.click($.proxy(this._markAsConfirmed, this));
 				}
-				
-				// work-around for legacy notifications
-				var details = item.querySelector('.details > p:first-child');
-				details.classList.add("pointer");
-				details.addEventListener('click', function(event) {
-					window.location.href = $item.data('link');
-				});
 			}).bind(this));
 			
 			WCF.DOMNodeInsertedHandler.execute();
diff --git a/wcfsetup/install/files/style/ui/userProfile.scss b/wcfsetup/install/files/style/ui/userProfile.scss
index e16d7d0262..3891dca182 100644
--- a/wcfsetup/install/files/style/ui/userProfile.scss
+++ b/wcfsetup/install/files/style/ui/userProfile.scss
@@ -320,6 +320,7 @@
 		
 		> .box32 {
 			flex: 1 1 auto;
+			position: relative;
 		}
 		
 		> .notificationItemMarkAsConfirmed {
@@ -328,6 +329,19 @@
 	}
 }
 
+.userNotificationItemList .userNotificationItemLink {
+	color: inherit;
+
+	&::before {
+		bottom: 0;
+		content: "";
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+}
+
 .userProfilePreviewAvatar {
 	align-self: flex-start;
 	display: block;
-- 
2.20.1