Fix various UI problems (#34243)

Also fix #34242

Author: wxiaoguang

templates/repo/diff/conversation.tmpl

@@ -8,9 +8,9 @@
 	{{$referenceUrl := printf "%s#%s" $.Issue.Link $comment.HashTag}}
 	<div class="conversation-holder" data-path="{{$comment.TreePath}}" data-side="{{if lt $comment.Line 0}}left{{else}}right{{end}}" data-idx="{{$comment.UnsignedLine}}">
 		{{if $resolved}}
-			<div class="ui attached header resolved-placeholder tw-flex tw-items-center tw-justify-between">
-				<div class="ui grey text tw-flex tw-items-center tw-flex-wrap tw-gap-1">
-					{{svg "octicon-check" 16 "icon tw-mr-1"}}
+			<div class="resolved-placeholder">
+				<div class="flex-text-block tw-flex-wrap grey text">
+					{{svg "octicon-check"}}
 					<b>{{$resolveDoer.Name}}</b> {{ctx.Locale.Tr "repo.issues.review.resolved_by"}}
 					{{if $invalid}}
 						<!--
@@ -22,14 +22,12 @@
 						</a>
 					{{end}}
 				</div>
-				<div class="tw-flex tw-items-center tw-gap-2">
-					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="ui tiny labeled button show-outdated tw-flex tw-items-center">
-						{{svg "octicon-unfold" 16 "tw-mr-2"}}
-						{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
+				<div class="flex-text-block">
+					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="btn tiny show-outdated">
+						{{svg "octicon-unfold" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
 					</button>
-					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="ui tiny labeled button hide-outdated tw-flex tw-items-center tw-hidden">
-						{{svg "octicon-fold" 16 "tw-mr-2"}}
-						{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
+					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="btn tiny hide-outdated tw-hidden">
+						{{svg "octicon-fold" 16 "tw-mr-2"}}{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
 					</button>
 				</div>
 			</div>

templates/repo/issue/view_content/conversation.tmpl

@@ -17,15 +17,15 @@
 			</div>
 			<div>
 				{{if or $invalid $resolved}}
-					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if not $resolved}}tw-hidden {{end}}ui compact labeled button show-outdated tw-flex tw-items-center">
+					<button id="show-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if not $resolved}}tw-hidden{{end}} btn tiny show-outdated">
 						{{svg "octicon-unfold" 16 "tw-mr-2"}}
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
 						{{else}}
 							{{ctx.Locale.Tr "repo.issues.review.show_outdated"}}
 						{{end}}
 					</button>
-					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if $resolved}}tw-hidden {{end}}ui compact labeled button hide-outdated tw-flex tw-items-center">
+					<button id="hide-outdated-{{$comment.ID}}" data-comment="{{$comment.ID}}" class="{{if $resolved}}tw-hidden {{end}} btn tiny hide-outdated">
 						{{svg "octicon-fold" 16 "tw-mr-2"}}
 						{{if $resolved}}
 							{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}

templates/repo/wiki/revision.tmpl

@@ -3,18 +3,18 @@
 	{{template "repo/header" .}}
 	{{$title := .title}}
 	<div class="ui container">
-		<div class="ui stackable grid">
-			<div class="ui eight wide column">
-				<div class="ui header">
-					<a class="file-revisions-btn ui basic button" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}">{{if .revision}}<span>{{.revision}}</span> {{end}}{{svg "octicon-home"}}</a>
+		<div class="ui dividing header flex-text-block tw-flex-wrap tw-justify-between">
+			<div class="flex-text-block">
+				<a class="ui basic button tw-px-3" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}">{{svg "octicon-home"}}</a>
+				<div class="tw-flex-1 gt-ellipsis">
 					{{$title}}
-					<div class="ui sub header tw-break-anywhere">
+					<div class="ui sub header gt-ellipsis">
 						{{$timeSince := DateUtils.TimeSince .Author.When}}
 						{{ctx.Locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince}}
 					</div>
 				</div>
 			</div>
-			<div class="ui eight wide column tw-text-right">
+			<div>
 				{{template "repo/clone_panel" .}}
 			</div>
 		</div>

templates/repo/wiki/view.tmpl

@@ -33,7 +33,7 @@
 		<div class="ui dividing header">
 			<div class="flex-text-block tw-flex-wrap tw-justify-end">
 				<div class="flex-text-block tw-flex-1 tw-min-w-[300px]">
-					<a class="file-revisions-btn ui basic button" title="{{ctx.Locale.Tr "repo.wiki.file_revision"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}?action=_revision" >{{if .CommitCount}}<span>{{.CommitCount}}</span> {{end}}{{svg "octicon-history"}}</a>
+					<a class="ui basic button tw-px-3 tw-gap-3" title="{{ctx.Locale.Tr "repo.wiki.file_revision"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}?action=_revision" >{{if .CommitCount}}<span>{{.CommitCount}}</span> {{end}}{{svg "octicon-history"}}</a>
 					<div class="tw-flex-1 gt-ellipsis">
 						{{$title}}
 						<div class="ui sub header gt-ellipsis">

web_src/css/base.css

@@ -224,6 +224,7 @@ progress::-moz-progress-bar {
 }
 
 .unselectable,
+.btn,
 .button,
 .lines-num,
 .lines-commit,

web_src/css/markup/content.css

@@ -529,20 +529,6 @@
   margin: 0 0.25em;
 }
 
-.file-revisions-btn {
-  display: block;
-  float: left;
-  margin-bottom: 2px !important;
-  padding: 11px !important;
-  margin-right: 10px !important;
-}
-
-.file-revisions-btn i {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
 .markup-content-iframe {
   display: block;
   border: none;

web_src/css/modules/button.css

@@ -352,6 +352,14 @@ a.btn:hover {
   color: inherit;
 }
 
+.btn.tiny {
+  font-size: 12px;
+}
+
+.btn.small {
+  font-size: 13px;
+}
+
 /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it.
 And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above).
 It needs some tricks to tweak the left/right borders with active state */

web_src/css/modules/tippy.css

@@ -92,6 +92,10 @@
 }
 
 .tippy-box[data-theme="menu"] .item:focus {
+  background: var(--color-hover);
+}
+
+.tippy-box[data-theme="menu"] .item.active {
   background: var(--color-active);
 }
 

web_src/css/repo.css

@@ -1784,12 +1784,12 @@ tbody.commit-list {
 .resolved-placeholder {
   display: flex;
   align-items: center;
-  font-size: 14px !important;
-  padding: 8px !important;
-  font-weight: var(--font-weight-normal) !important;
-  border: 1px solid var(--color-secondary) !important;
-  border-radius: var(--border-radius) !important;
-  margin: 4px !important;
+  justify-content: space-between;
+  margin: 4px;
+  padding: 8px;
+  border: 1px solid var(--color-secondary);
+  border-radius: var(--border-radius);
+  background: var(--color-box-header);
 }
 
 .resolved-placeholder + .comment-code-cloud {

web_src/css/review.css

@@ -1,11 +1,3 @@
-.show-outdated,
-.hide-outdated {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  user-select: none;
-  margin-right: 0 !important;
-}
-
 .ui.button.add-code-comment {
   padding: 2px;
   position: absolute;
@@ -59,11 +51,6 @@
   margin-bottom: 0.5em;
 }
 
-.show-outdated:hover,
-.hide-outdated:hover {
-  text-decoration: underline;
-}
-
 .comment-code-cloud {
   padding: 0.5rem 1rem !important;
   position: relative;

web_src/js/features/repo-code.ts

@@ -1,6 +1,5 @@
 import {svg} from '../svg.ts';
 import {createTippy} from '../modules/tippy.ts';
-import {clippie} from 'clippie';
 import {toAbsoluteUrl} from '../utils.ts';
 import {addDelegatedEventListener} from '../utils/dom.ts';
 
@@ -43,7 +42,8 @@ function selectRange(range: string): Element {
     if (!copyPermalink) return;
     let link = copyPermalink.getAttribute('data-url');
     link = `${link.replace(/#L\d+$|#L\d+-L\d+$/, '')}#${anchor}`;
-    copyPermalink.setAttribute('data-url', link);
+    copyPermalink.setAttribute('data-clipboard-text', link);
+    copyPermalink.setAttribute('data-clipboard-text-type', 'url');
   };
 
   const rangeFields = range ? range.split('-') : [];
@@ -138,8 +138,4 @@ export function initRepoCodeView() {
   };
   onHashChange();
   window.addEventListener('hashchange', onHashChange);
-
-  addDelegatedEventListener(document, 'click', '.copy-line-permalink', (el) => {
-    clippie(toAbsoluteUrl(el.getAttribute('data-url')));
-  });
 }

web_src/js/utils/dom.ts

@@ -360,7 +360,11 @@ export function querySingleVisibleElem<T extends HTMLElement>(parent: Element, s
 export function addDelegatedEventListener<T extends HTMLElement, E extends Event>(parent: Node, type: string, selector: string, listener: (elem: T, e: E) => Promisable<void>, options?: boolean | AddEventListenerOptions) {
   parent.addEventListener(type, (e: Event) => {
     const elem = (e.target as HTMLElement).closest(selector);
-    if (!elem || !parent.contains(elem)) return;
+    // It strictly checks "parent contains the target elem" to avoid side effects of selector running on outside the parent.
+    // Keep in mind that the elem could have been removed from parent by other event handlers before this event handler is called.
+    // For example: tippy popup item, the tippy popup could be hidden and removed from DOM before this.
+    // It is caller's responsibility make sure the elem is still in parent's DOM when this event handler is called.
+    if (!elem || (parent !== document && !parent.contains(elem))) return;
     listener(elem as T, e as E);
   }, options);
 }