Remove row clicking from notification table (#22695) (#23706)

Backport #22695 by @jolheiser

Resolves #22692

Signed-off-by: jolheiser <[email protected]>
Co-authored-by: John Olheiser <[email protected]>
Co-authored-by: wxiaoguang <[email protected]>

Author: 3 people

templates/user/notification/notification_div.tmpl

@@ -35,7 +35,7 @@
 							{{$issue := .Issue}}
 							{{$repo := .Repository}}
 							<tr id="notification_{{.ID}}">
-								<td class="collapsing gt-pl-4" data-href="{{.Link}}">
+								<td class="collapsing gt-pl-4">
 									{{if eq .Status 3}}
 										{{svg "octicon-pin" 16 "text blue"}}
 									{{else if not $issue}}
@@ -58,7 +58,7 @@
 										{{end}}
 									{{end}}
 								</td>
-								<td class="eleven wide" data-href="{{.Link}}">
+								<td class="eleven wide">
 									<a class="item" href="{{.Link}}">
 										{{if $issue}}
 											#{{$issue.Index}} - {{$issue.Title}}
@@ -67,7 +67,7 @@
 										{{end}}
 									</a>
 								</td>
-								<td data-href="{{$repo.Link}}">
+								<td>
 									<a class="item" href="{{$repo.Link}}">{{$repo.FullName}}</a>
 								</td>
 								<td class="collapsing">

web_src/css/user.css

@@ -85,23 +85,6 @@
   padding: 8px 15px;
 }
 
-.user.notification .content {
-  float: left;
-  margin-left: 7px;
-}
-
-.user.notification table form {
-  display: inline-block;
-}
-
-.user.notification table button {
-  padding: 3px 3px 3px 5px;
-}
-
-.user.notification table tr {
-  cursor: pointer;
-}
-
 .user .button.adopt,
 .user .button.delete {
   margin-top: -15px;
@@ -147,15 +130,27 @@
   object-fit: contain;
 }
 
+.user.notification table button {
+  padding: 3px 3px 3px 5px;
+}
+
 #notification_div .tab.segment {
   overflow-x: auto;
-  padding: 0;
 }
 
-#notification_div .menu .active.item {
+#notification_div .tabular.menu .active.item {
   background: var(--color-box-body);
 }
 
 #notification_table {
   border: none;
 }
+
+#notification_table tr {
+  cursor: default;
+}
+
+#notification_table td a {
+  width: 100%;
+  display: inline-block;
+}

web_src/js/features/common-global.js

@@ -134,21 +134,6 @@ export function initGlobalCommon() {
     toggleElem($($(this).data('target')));
   });
 
-  // make table <tr> and <td> elements clickable like a link
-  $('tr[data-href], td[data-href]').on('click', function (e) {
-    const href = $(this).data('href');
-    if (e.target.nodeName === 'A') {
-      // if a user clicks on <a>, then the <tr> or <td> should not act as a link.
-      return;
-    }
-    if (e.ctrlKey || e.metaKey) {
-      // ctrl+click or meta+click opens a new window in modern browsers
-      window.open(href);
-    } else {
-      window.location = href;
-    }
-  });
-
   // prevent multiple form submissions on forms containing .loading-button
   document.addEventListener('submit', (e) => {
     const btn = e.target.querySelector('.loading-button');