github/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-07-11 23:19:40 +00:00
Code Issues Packages Projects Releases Wiki 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 54 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

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