fix

Author: wxiaoguang

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

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>

templates/repo/issue/sidebar/stopwatch_timetracker.tmpl

@@ -2,34 +2,29 @@
 	{{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">
+			<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="flex-text-block tw-justify-between tw-my-2">
+				<div class="ui buttons tw-flex-1">
+				{{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"}}
-					</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">
+					</button>
+					<button class="ui icon button tw-flex-0 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"}}
-					</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}}
+					</button>
+					<button class="ui icon button w-flex-0 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>
 			</div>
 

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