tdsds.com/gitea
1
1
Fork 0
mirror of https://github.com/go-gitea/gitea synced 2025-07-14 14:37:20 +00:00
Code Releases Activity

Refactor time tracker UI (#34983)

Browse Source 
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
This commit is contained in:
wxiaoguang
2025-07-08 16:59:31 +08:00
committed by GitHub
parent 08682212ab
commit 3763c2ae28
6 changed files with 54 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/devtest/fomantic-modal.tmpl
View File

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

8
templates/devtest/gitea-ui.tmpl
View File

@ -45,14 +45,16 @@
</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"]');
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
$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)));
$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
});
</script>
</div>
</div>

59
templates/repo/issue/sidebar/stopwatch_timetracker.tmpl
View File

@ -2,36 +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 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>
{{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>
<div class="ui buttons tw-mt-2 tw-w-full">
{{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>
<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>
</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}}
<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>
<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>
</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>
</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>
{{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 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>
</div>
{{end}}
</div>
</div>
{{end}}
{{end}}

2
web_src/css/modules/button.css
View File

@ -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 {

2
web_src/js/index-domready.ts
View File

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

1
web_src/js/standalone/devtest.ts
View File

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