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

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">
+	<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">

templates/devtest/gitea-ui.tmpl

@@ -45,7 +45,8 @@
 					</div>
 				</li>
 			</ul>
-			<script type="module">
+			<script>
+				document.addEventListener('gitea:index-ready', () => {
 					const $buttons = $('#devtest-button-samples').find('button.ui');
 
 					const $buttonStyles = $('input[name*="button-style"]');
@@ -53,6 +54,7 @@
 
 					const $buttonStates = $('input[name*="button-state"]');
 					$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
+				});
 			</script>
 		</div>
 	</div>

templates/repo/issue/sidebar/stopwatch_timetracker.tmpl

@@ -2,36 +2,29 @@
 	{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
 		<div class="divider"></div>
 		<div>
-			<div class="ui dropdown full-width jump">
+			<div class="flex-text-block">
-				<a class="fixed-text muted">
+				<strong class="tw-flex-1">{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
-					<div>
+				<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">
-						<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
+					{{svg "octicon-pencil"}}
-						{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
+				</button>
 			</div>
-					{{svg "octicon-gear"}}
+			<div class="ui buttons tw-mt-2 tw-w-full">
-				</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">
+				<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"}}
-					</a>
+				</button>
-					<a class="item issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel">
+				<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"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}
+					{{svg "octicon-trash"}}
-					</a>
+				</button>
 			{{else}}
-					<a class="item issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
+				<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"}}
-					</a>
+				</button>
-					<a class="item issue-add-time show-modal" data-modal="#issue-time-manually-add-modal">
+				<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"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}
+					{{svg "octicon-plus"}}
-					</a>
+				</button>
 			{{end}}
 			</div>
-			</div>
 
 			{{if and (not $.IsStopwatchRunning) .HasUserStopwatch}}
 				<div class="ui warning message">{{ctx.Locale.Tr "repo.issues.tracking_already_started" .OtherStopwatchURL}}</div>
@@ -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>
+		</div>
+		<div class="ui list flex-items-block">
 			{{range $user, $trackedtime := .WorkingUsers}}
-					<div class="comment tw-mt-2">
+				<div class="item tw-gap-3">
-						<a class="avatar">
+					{{template "shared/user/avatarlink" dict "user" $user}}
-							{{ctx.AvatarUtils.Avatar $user}}
+					<div>
-						</a>
-						<div class="content">
 						{{template "shared/user/authorlink" $user}}
-							<div class="text">
+						<div class="text">{{$trackedtime|Sec2Hour}}</div>
-								{{$trackedtime|Sec2Hour}}
-							</div>
-						</div>
-					</div>
-				{{end}}
 					</div>
 				</div>
 			{{end}}
+		</div>
+	{{end}}
 {{end}}

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 {

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'));

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();