Improve and fix bugs surrounding reactions (#24760)

- Slightly decrease size of reaction buttons
- Remove tooltip inside menu, it's obvious by the picture alone
- Fix top menu triangle
- Use `display: grid` to align icons in menu
- Use regular tooltip for reaction users
- Fix bug that deleted the reaction bar on clicking already reacted
reaction in dropdown

<img width="490" alt="Screenshot 2023-05-17 at 00 03 42"
src="https://github.com/go-gitea/gitea/assets/115237/61588b37-facb-4829-b75b-e1cb5dda8ca4">

<img width="67" alt="Screenshot 2023-05-17 at 00 11 14"
src="https://github.com/go-gitea/gitea/assets/115237/29605589-3b5f-40c6-8ad4-09923094bb8e">

<img width="211" alt="Screenshot 2023-05-17 at 00 29 30"
src="https://github.com/go-gitea/gitea/assets/115237/7d2725da-6a3d-4e42-a351-53647f79f762">
<img width="210" alt="Screenshot 2023-05-17 at 00 29 54"
src="https://github.com/go-gitea/gitea/assets/115237/b50f8364-033c-4445-ba25-61a814bb2d92">


<img width="892" alt="Screenshot 2023-05-17 at 00 12 20"
src="https://github.com/go-gitea/gitea/assets/115237/30a46424-406a-46e5-b4de-47172eb8679d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>

options/locale/locale_en-US.ini

@@ -965,7 +965,6 @@ mirror_password_help = Change the username to erase a stored password.
 watchers = Watchers
 stargazers = Stargazers
 forks = Forks
-pick_reaction = Pick your reaction
 reactions_more = and %d more
 unit_disabled = The site administrator has disabled this repository section.
 language_other = Other

templates/repo/diff/comments.tmpl

@@ -15,7 +15,7 @@
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
 						{{.OriginalAuthor}}
 					</span>
-					<span class="text grey">
+					<span class="text grey muted-links">
 						{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
 					</span>
 					<span class="text migrate">
@@ -24,7 +24,7 @@
 						{{end}}
 					</span>
 				{{else}}
-					<span class="text grey">
+					<span class="text grey muted-links">
 						{{template "shared/user/namelink" .Poster}}
 						{{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}}
 					</span>
@@ -59,9 +59,7 @@
 		</div>
 		{{$reactions := .Reactions.GroupByType}}
 		{{if $reactions}}
-			<div class="ui attached segment reactions">
 			{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}}
-			</div>
 		{{end}}
 	</div>
 </div>

templates/repo/issue/view_content.tmpl

@@ -27,7 +27,7 @@
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
 									{{.Issue.OriginalAuthor}}
 								</span>
-								<span class="text grey">
+								<span class="text grey muted-links">
 									{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
 								</span>
 								<span class="text migrate">
@@ -37,7 +37,7 @@
 								<a class="inline-timeline-avatar" href="{{.Issue.Poster.HomeLink}}">
 									{{avatar $.Context .Issue.Poster 24}}
 								</a>
-								<span class="text grey">
+								<span class="text grey muted-links">
 									{{template "shared/user/authorlink" .Issue.Poster}}
 									{{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}}
 								</span>
@@ -78,9 +78,7 @@
 					</div>
 					{{$reactions := .Issue.Reactions.GroupByType}}
 					{{if $reactions}}
-						<div class="ui attached segment reactions" role="note">
+						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
-							{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}}
-						</div>
 					{{end}}
 				</div>
 			</div>

templates/repo/issue/view_content/add_reaction.tmpl

@@ -1,13 +1,11 @@
 {{if .ctxData.IsSigned}}
 <div class="item action ui dropdown jump pointing top right select-reaction" data-action-url="{{.ActionURL}}">
-	<a class="add-reaction">
+	<a class="add-reaction muted">
 		{{svg "octicon-smiley"}}
 	</a>
-	<div class="menu">
+	<div class="menu reactions-menu">
-		<div class="header">{{.ctxData.locale.Tr "repo.pick_reaction"}}</div>
-		<div class="divider"></div>
 		{{range $value := AllowedReactions}}
-			<a class="item reaction" data-tooltip-content="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
+			<a class="item reaction" data-tooltip-content="{{$value}}" aria-label="{{$value}}" data-reaction-content="{{$value}}">{{ReactionToEmoji $value}}</a>
 		{{end}}
 	</div>
 </div>

templates/repo/issue/view_content/comments.tmpl

@@ -87,9 +87,7 @@
 					</div>
 					{{$reactions := .Reactions.GroupByType}}
 					{{if $reactions}}
-						<div class="ui attached segment reactions" role="note">
+						{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-							{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-						</div>
 					{{end}}
 				</div>
 			</div>
@@ -471,9 +469,7 @@
 						</div>
 						{{$reactions := .Reactions.GroupByType}}
 						{{if $reactions}}
-							<div class="ui attached segment reactions">
+							{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-									{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-							</div>
 						{{end}}
 					</div>
 				</div>
@@ -595,9 +591,7 @@
 														</div>
 														{{$reactions := .Reactions.GroupByType}}
 														{{if $reactions}}
-															<div class="ui attached segment reactions">
+															{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-																{{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}}
-															</div>
 														{{end}}
 													</div>
 												</div>

templates/repo/issue/view_content/context_menu.tmpl

@@ -1,6 +1,6 @@
 {{if .ctxData.IsSigned}}
 <div class="item action ui dropdown jump pointing top right context-dropdown">
-	<a class="context-menu">
+	<a class="context-menu muted">
 		{{svg "octicon-kebab-horizontal"}}
 	</a>
 	<div class="menu">

templates/repo/issue/view_content/reactions.tmpl

@@ -1,5 +1,10 @@
+<div class="ui attached segment reactions" data-action-url="{{$.ActionURL}}">
 {{range $key, $value := .Reactions}}
-	<a class="ui label basic{{if $value.HasUser $.ctxData.SignedUserID}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}}" data-title="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{$.ctxData.locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}" data-reaction-content="{{$key}}" data-action-url="{{$.ActionURL}}">
+	{{$hasReacted := $value.HasUser $.ctxData.SignedUserID}}
+	<a role="button" class="ui label basic{{if $hasReacted}} primary{{end}}{{if not $.ctxData.IsSigned}} disabled{{end}} comment-reaction-button"
+		data-tooltip-content="{{$value.GetFirstUsers}}{{if gt ($value.GetMoreUserCount) 0}} {{$.ctxData.locale.Tr "repo.reactions_more" $value.GetMoreUserCount}}{{end}}"
+		data-tooltip-placement="bottom-start"
+		data-reaction-content="{{$key}}" data-has-reacted="{{$hasReacted}}">
 		<span class="reaction">{{ReactionToEmoji $key}}</span>
 		<span class="reaction-count">{{len $value}}</span>
 	</a>
@@ -7,3 +12,4 @@
 {{if AllowedReactions}}
 	{{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}}
 {{end}}
+</div>

web_src/css/base.css

@@ -165,8 +165,8 @@
   --color-light: #00000006;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #0000001d;
-  --color-hover: #0000000c;
+  --color-hover: #00000014;
-  --color-active: #00000014;
+  --color-active: #0000001e;
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markup-table-row: #00000008;
@@ -184,7 +184,8 @@
   --color-project-board-light-label: #a6aab5;
   --color-caret: var(--color-text-dark);
   --color-reaction-bg: #0000000a;
-  --color-reaction-active-bg: var(--color-primary-alpha-20);
+  --color-reaction-hover-bg: var(--color-primary-light-5);
+  --color-reaction-active-bg: var(--color-primary-light-6);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
   --color-header-bar: #ffffff;
@@ -894,6 +895,11 @@ a.label,
   background: var(--color-hover);
 }
 
+.ui.dropdown .menu > .item:active {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
 .ui.dropdown .menu .active.item {
   color: var(--color-text);
   background: var(--color-active);
@@ -1059,10 +1065,15 @@ a.label,
 }
 
 .ui.pointing.dropdown > .menu:not(.hidden)::after {
-  background: var(--color-box-body);
+  background: var(--color-menu);
   box-shadow: -1px -1px 0 0 var(--color-secondary);
 }
 
+.ui.pointing.upward.dropdown .menu::after,
+.ui.top.pointing.upward.dropdown .menu::after {
+  box-shadow: 1px 1px 0 0 var(--color-secondary);
+}
+
 .ui.comments .comment .text {
   margin: 0;
 }

web_src/css/repo.css

@@ -1085,7 +1085,7 @@
 
 .repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
   border: 1px solid;
-  padding: 6px 10px !important;
+  padding: 5px 8px !important;
   margin: 0 2px;
   border-radius: var(--border-radius);
   border-color: var(--color-secondary-dark-1) !important;
@@ -1096,6 +1096,11 @@
   border-color: var(--color-primary-alpha-80) !important;
 }
 
+.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
+  background-color: var(--color-reaction-hover-bg) !important;
+  border-color: var(--color-primary-alpha-80) !important;
+}
+
 .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
   margin: 0;
 }
@@ -2133,7 +2138,7 @@
 .repository .select-reaction.dropdown .menu {
   right: 0 !important;
   left: auto !important;
-  min-width: 15em;
+  min-width: 170px;
 }
 
 .repository .segment.reactions.dropdown .menu > .header,
@@ -2144,25 +2149,15 @@
 .repository .segment.reactions.dropdown .menu > .item,
 .repository .select-reaction.dropdown .menu > .item {
   float: left;
-  padding: 0.25rem !important;
+  margin: 4px;
-  margin: 0.25rem;
+  font-size: 20px;
-  font-size: 1.5em;
+  width: 34px;
-  width: 39px;
+  height: 34px;
-  left: 13px;
+  min-height: 0 !important;
   border-radius: 6px;
-  display: flex;
+  display: flex !important;
-  justify-content: center;
   align-items: center;
-}
+  justify-content: center;
-
-.repository .segment.reactions.dropdown .menu > .item img.emoji,
-.repository .select-reaction.dropdown .menu > .item img.emoji {
-  margin-right: 0;
-}
-
-.repository .segment.reactions.dropdown .menu > .item:hover,
-.repository .select-reaction.dropdown .menu > .item:hover {
-  background: var(--color-primary);
 }
 
 .repository .segment.reactions {
@@ -2173,35 +2168,41 @@
   width: 100% !important;
   max-width: 100% !important;
   margin: 0 !important;
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
 }
 
 .repository .segment.reactions .ui.label {
   max-height: 40px;
-  padding: 10px 18px !important;
+  padding: 8px 16px !important;
   display: flex !important;
   align-items: center;
   border: 0;
   border-right: 1px solid;
   border-radius: 0;
   margin: 0;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: var(--font-weight-normal);
   border-color: var(--color-secondary) !important;
   background: var(--color-reaction-bg);
 }
 
+.repository .segment.reactions .ui.label:first-of-type {
+  border-bottom-left-radius: 3px;
+}
+
 .repository .segment.reactions .ui.label.disabled {
   cursor: default;
   opacity: 1;
 }
 
-.repository .segment.reactions .ui.label.basic {
+.repository .segment.reactions .ui.label.basic.primary {
   color: var(--color-primary) !important;
+  background-color: var(--color-reaction-active-bg) !important;
+  border-color: var(--color-secondary-dark-1) !important;
 }
 
-.repository .segment.reactions .ui.label.basic.primary {
+.repository .segment.reactions .ui.label.basic:hover {
-  background-color: var(--color-reaction-active-bg) !important;
+  background-color: var(--color-reaction-hover-bg) !important;
-  border-color: var(--color-secondary) !important;
 }
 
 .repository .segment.reactions .reaction-count {
@@ -2211,6 +2212,9 @@
 .repository .segment.reactions .select-reaction {
   display: flex;
   align-items: center;
+}
+
+.repository .segment.reactions .select-reaction a {
   padding: 0 14px;
 }
 
@@ -2469,7 +2473,7 @@
   padding: 0.5rem 1rem;
   margin: 0 !important;
   position: relative;
-  color: var(--color-text-light-2);
+  color: var(--color-text);
   min-height: 41px;
   background-color: var(--color-box-header);
   display: flex;
@@ -2516,14 +2520,6 @@
   left: 7px;
 }
 
-.comment-header a {
-  color: var(--color-text);
-}
-
-.comment-header a:hover {
-  color: var(--color-primary);
-}
-
 .comment-header .actions a {
   margin-right: 0 !important;
   padding: 0.5rem !important;
@@ -2534,6 +2530,11 @@
   margin-left: 0.25rem;
 }
 
+.content-history-menu .octicon-triangle-down {
+  position: relative;
+  top: 1.5px;
+}
+
 .comment-body {
   background: var(--color-box-body);
   border: none !important;

web_src/css/themes/theme-arc-green.css

@@ -152,8 +152,8 @@
   --color-light: #00000028;
   --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
   --color-light-border: #ffffff28;
-  --color-hover: #ffffff10;
+  --color-hover: #ffffff19;
-  --color-active: #ffffff16;
+  --color-active: #ffffff24;
   --color-menu: #2e323e;
   --color-card: #2e323e;
   --color-markup-table-row: #ffffff06;
@@ -170,7 +170,8 @@
   --color-project-board-bg: var(--color-secondary-light-2);
   --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */
   --color-reaction-bg: #ffffff12;
-  --color-reaction-active-bg: var(--color-primary-alpha-40);
+  --color-reaction-hover-bg: var(--color-primary-light-4);
+  --color-reaction-active-bg: var(--color-primary-light-5);
   --color-tooltip-text: #ffffff;
   --color-tooltip-bg: #000000f0;
   --color-header-bar: #2e323e;

web_src/js/features/comp/ReactionSelector.js

@@ -1,53 +1,46 @@
 import $ from 'jquery';
-import {createTippy} from '../../modules/tippy.js';
 
 const {csrfToken} = window.config;
 
-export function initCompReactionSelector(parent) {
+export function initCompReactionSelector($parent) {
-  let selector = 'a.label';
+  $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) {
-  if (!parent) {
-    parent = $(document);
-    selector = `.reactions ${selector}`;
-  }
-
-  for (const el of parent[0].querySelectorAll(selector)) {
-    createTippy(el, {placement: 'bottom-start', content: el.getAttribute('data-title')});
-  }
-
-  parent.find(`.select-reaction > .menu > .item, ${selector}`).on('click', function (e) {
     e.preventDefault();
 
     if ($(this).hasClass('disabled')) return;
 
-    const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url');
+    const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url');
-    const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`;
+    const reactionContent = $(this).attr('data-reaction-content');
-    $.ajax({
+    const hasReacted = $(this).closest('.ui.segment.reactions').find(`a[data-reaction-content="${reactionContent}"]`).attr('data-has-reacted') === 'true';
-      type: 'POST',
+
-      url,
+    const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
-      data: {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/x-www-form-urlencoded',
+      },
+      body: new URLSearchParams({
         _csrf: csrfToken,
-        content: $(this).attr('data-reaction-content'),
+        content: reactionContent,
-      }
+      }),
-    }).done((resp) => {
-      if (resp && (resp.html || resp.empty)) {
-        const content = $(this).closest('.content');
-        let react = content.find('.segment.reactions');
-        if ((!resp.empty || resp.html === '') && react.length > 0) {
-          react.remove();
-        }
-        if (!resp.empty) {
-          react = $('<div class="ui attached segment reactions"></div>');
-          const attachments = content.find('.segment.bottom:first');
-          if (attachments.length > 0) {
-            react.insertBefore(attachments);
-          } else {
-            react.appendTo(content);
-          }
-          react.html(resp.html);
-          react.find('.dropdown').dropdown();
-          initCompReactionSelector(react);
-        }
-      }
     });
+
+    const data = await res.json();
+    if (data && (data.html || data.empty)) {
+      const content = $(this).closest('.content');
+      let react = content.find('.segment.reactions');
+      if ((!data.empty || data.html === '') && react.length > 0) {
+        react.remove();
+      }
+      if (!data.empty) {
+        const attachments = content.find('.segment.bottom:first');
+        react = $(data.html);
+        if (attachments.length > 0) {
+          react.insertBefore(attachments);
+        } else {
+          react.appendTo(content);
+        }
+        react.find('.dropdown').dropdown();
+        initCompReactionSelector(react);
+      }
+    }
   });
 }

web_src/js/features/repo-code.js

@@ -190,8 +190,6 @@ export function initRepoCodeView() {
     currentTarget.closest('tr').outerHTML = blob;
   });
   $(document).on('click', '.copy-line-permalink', async (e) => {
-    const success = await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url')));
+    await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url')));
-    if (!success) return;
-    document.querySelector('.code-line-button')?._tippy?.hide();
   });
 }

web_src/js/features/repo-issue-content.js

@@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
   const $headerLeft = $item.find('.comment-header-left');
   const menuHtml = `
   <div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
-    &bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
+    &bull; <a class="muted">${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}</a>
     <div class="menu">
     </div>
   </div>`;

web_src/js/features/repo-legacy.js

@@ -544,7 +544,7 @@ export function initRepository() {
     initRepoIssueDependencyDelete();
     initRepoIssueCodeCommentCancel();
     initRepoPullRequestUpdate();
-    initCompReactionSelector();
+    initCompReactionSelector($(document));
 
     initRepoPullRequestMergeForm();
   }

web_src/js/modules/tippy.js

@@ -58,10 +58,17 @@ function attachTooltip(target, content = null) {
   content = content ?? target.getAttribute('data-tooltip-content');
   if (!content) return null;
 
+  // when element has a clipboard target, we update the tooltip after copy
+  // in which case it is undesirable to automatically hide it on click as
+  // it would momentarily flash the tooltip out and in.
+  const hasClipboardTarget = target.hasAttribute('data-clipboard-target');
+  const hideOnClick = !hasClipboardTarget;
+
   const props = {
     content,
     delay: 100,
     role: 'tooltip',
+    hideOnClick,
     placement: target.getAttribute('data-tooltip-placement') || 'top-start',
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
   };