Refactor time tracker UI (#34983)

Although we decided to "reduce the button amount" on the side bar, not
only one user reported that the "time tracker dropdown" is not easy to
use.

So the best we can do at the moment is: move the buttons to the sidebar
again.

Fix #34979

6 files changed, 54 insertions, 58 deletions

diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index 838c6893a4..8e769790b2 100644
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -2,13 +2,15 @@
 <div class="page-content devtest ui container">
 	{{template "base/alert" .}}
 	<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
-	<script type="module">
-		for (const el of $('.ui.modal:not([data-skip-button])')) {
-			const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
-				$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
-			});
-			$('.modal-buttons').append($btn);
-		}
+	<script>
+		document.addEventListener('gitea:index-ready', () => {
+			for (const el of $('.ui.modal:not([data-skip-button])')) {
+				const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
+					$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
+				});
+				$('.modal-buttons').append($btn);
+			}
+		});
 	</script>
 
 	<div id="test-modal-form-1" class="ui mini modal">
diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
index 7a435cc433..cb5aad7b0c 100644
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -45,14 +45,16 @@
 					</div>
 				</li>
 			</ul>
-			<script type="module">
-				const $buttons = $('#devtest-button-samples').find('button.ui');
+			<script>
+				document.addEventListener('gitea:index-ready', () => {
+					const $buttons = $('#devtest-button-samples').find('button.ui');
 
-				const $buttonStyles = $('input[name*="button-style"]');
-				$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
+					const $buttonStyles = $('input[name*="button-style"]');
+					$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
 
-				const $buttonStates = $('input[name*="button-state"]');
-				$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
+					const $buttonStates = $('input[name*="button-state"]');
+					$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
+				});
 			</script>
 		</div>
 	</div>
diff --git a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
index ab8600b068..6168b06e17 100644
--- a/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
+++ b/templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
@@ -2,35 +2,28 @@
 	{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
 		<div class="divider"></div>
 		<div>
-			<div class="ui dropdown full-width jump">
-				<a class="fixed-text muted">
-					<div>
-						<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
-						{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
-					</div>
-					{{svg "octicon-gear"}}
-				</a>
-				<div class="menu">
-					<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">
-						{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.time_estimate_set"}}
-					</a>
-					<div class="divider"></div>
-					{{if $.IsStopwatchRunning}}
-					<a class="item issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
-						{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
-					</a>
-					<a class="item issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel">
-						{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}
-					</a>
-					{{else}}
-					<a class="item issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
-						{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
-					</a>
-					<a class="item issue-add-time show-modal" data-modal="#issue-time-manually-add-modal">
-						{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}
-					</a>
-					{{end}}
-				</div>
+			<div class="flex-text-block">
+				<strong class="tw-flex-1">{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
+				<button class="btn interact-fg show-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.time_estimate_set"}}" data-modal="#issue-time-set-estimate-modal">
+					{{svg "octicon-pencil"}}
+				</button>
+			</div>
+			<div class="ui buttons tw-mt-2 tw-w-full">
+			{{if $.IsStopwatchRunning}}
+				<button class="ui button tw-flex-1 issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
+					{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
+				</button>
+				<button class="ui icon button issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}">
+					{{svg "octicon-trash"}}
+				</button>
+			{{else}}
+				<button class="ui button tw-flex-1 issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
+					{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
+				</button>
+				<button class="ui icon button issue-add-time show-modal" data-modal="#issue-time-manually-add-modal" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}">
+					{{svg "octicon-plus"}}
+				</button>
+			{{end}}
 			</div>
 
 			{{if and (not $.IsStopwatchRunning) .HasUserStopwatch}}
@@ -74,23 +67,19 @@
 		</div>
 	{{end}}
 	{{if .WorkingUsers}}
-		<div class="ui comments tw-mt-2">
+		<div class="tw-mt-2">
 			{{ctx.Locale.Tr "repo.issues.time_spent_from_all_authors" ($.Issue.TotalTrackedTime | Sec2Hour)}}
-			<div>
-				{{range $user, $trackedtime := .WorkingUsers}}
-					<div class="comment tw-mt-2">
-						<a class="avatar">
-							{{ctx.AvatarUtils.Avatar $user}}
-						</a>
-						<div class="content">
-							{{template "shared/user/authorlink" $user}}
-							<div class="text">
-								{{$trackedtime|Sec2Hour}}
-							</div>
-						</div>
+		</div>
+		<div class="ui list flex-items-block">
+			{{range $user, $trackedtime := .WorkingUsers}}
+				<div class="item tw-gap-3">
+					{{template "shared/user/avatarlink" dict "user" $user}}
+					<div>
+						{{template "shared/user/authorlink" $user}}
+						<div class="text">{{$trackedtime|Sec2Hour}}</div>
 					</div>
-				{{end}}
-			</div>
+				</div>
+			{{end}}
 		</div>
 	{{end}}
 {{end}}
diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
index b105bb5de2..8e3309474b 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -366,8 +366,8 @@ It needs some tricks to tweak the left/right borders with active state */
 
 .ui.buttons .button {
   border-right: none;
-  flex: 1 0 auto;
   border-radius: 0;
+  flex-shrink: 0;
   margin: 0;
 }
 .ui.buttons .button:first-child {
diff --git a/web_src/js/index-domready.ts b/web_src/js/index-domready.ts
index 4d7ab98db0..ca18d1e828 100644
--- a/web_src/js/index-domready.ts
+++ b/web_src/js/index-domready.ts
@@ -175,3 +175,5 @@ const initDur = performance.now() - initStartTime;
 if (initDur > 500) {
   console.error(`slow init functions took ${initDur.toFixed(3)}ms`);
 }
+
+document.dispatchEvent(new CustomEvent('gitea:index-ready'));
diff --git a/web_src/js/standalone/devtest.ts b/web_src/js/standalone/devtest.ts
index e6baf6c9ce..faa38dc467 100644
--- a/web_src/js/standalone/devtest.ts
+++ b/web_src/js/standalone/devtest.ts
@@ -11,4 +11,5 @@ function initDevtestToast() {
   }
 }
 
+// NOTICE: keep in mind that this file is not in "index.js", they do not share the same module system.
 initDevtestToast();