Skip to content

Commit 3763c2a

Browse files
wxiaoguangwxiaoguang
authored
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
1 parent 0868221 commit 3763c2a

File tree

6 files changed

+54
-58
lines changed

6 files changed

+54
-58
lines changed

‎templates/devtest/fomantic-modal.tmpl

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
<div class="page-content devtest ui container">
33
{{template "base/alert" .}}
44
<div class="modal-buttons flex-text-block tw-flex-wrap"></div>
5-
<script type="module">
6-
for (const el of $('.ui.modal:not([data-skip-button])')) {
7-
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
8-
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
9-
});
10-
$('.modal-buttons').append($btn);
11-
}
5+
<script>
6+
document.addEventListener('gitea:index-ready', () => {
7+
for (const el of $('.ui.modal:not([data-skip-button])')) {
8+
const $btn = $('<button class="ui button">').text(`${el.id}`).on('click', () => {
9+
$(el).modal({onApprove() {alert('confirmed')}}).modal('show');
10+
});
11+
$('.modal-buttons').append($btn);
12+
}
13+
});
1214
</script>
1315

1416
<div id="test-modal-form-1" class="ui mini modal">

‎templates/devtest/gitea-ui.tmpl

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -45,14 +45,16 @@
4545
</div>
4646
</li>
4747
</ul>
48-
<script type="module">
49-
const $buttons = $('#devtest-button-samples').find('button.ui');
48+
<script>
49+
document.addEventListener('gitea:index-ready', () => {
50+
const $buttons = $('#devtest-button-samples').find('button.ui');
5051

51-
const $buttonStyles = $('input[name*="button-style"]');
52-
$buttonStyles.on('click', () => $buttonStyles.map((_ ,el) => $buttons.toggleClass(el.value, el.checked)));
52+
const $buttonStyles = $('input[name*="button-style"]');
53+
$buttonStyles.on('click', () => $buttonStyles.map((_, el) => $buttons.toggleClass(el.value, el.checked)));
5354

54-
const $buttonStates = $('input[name*="button-state"]');
55-
$buttonStates.on('click', () => $buttonStates.map((_ ,el) => $buttons.prop(el.value, el.checked)));
55+
const $buttonStates = $('input[name*="button-state"]');
56+
$buttonStates.on('click', () => $buttonStates.map((_, el) => $buttons.prop(el.value, el.checked)));
57+
});
5658
</script>
5759
</div>
5860
</div>

‎templates/repo/issue/sidebar/stopwatch_timetracker.tmpl

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,35 +2,28 @@
22
{{if and .CanUseTimetracker (not .Repository.IsArchived)}}
33
<div class="divider"></div>
44
<div>
5-
<div class="ui dropdown full-width jump">
6-
<a class="fixed-text muted">
7-
<div>
8-
<strong>{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
9-
{{if $.IsStopwatchRunning}}{{svg "octicon-stopwatch"}}{{end}}
10-
</div>
11-
{{svg "octicon-gear"}}
12-
</a>
13-
<div class="menu">
14-
<a class="item issue-set-time-estimate show-modal" data-modal="#issue-time-set-estimate-modal">
15-
{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.time_estimate_set"}}
16-
</a>
17-
<div class="divider"></div>
18-
{{if $.IsStopwatchRunning}}
19-
<a class="item issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
20-
{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
21-
</a>
22-
<a class="item issue-cancel-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/cancel">
23-
{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_discard"}}
24-
</a>
25-
{{else}}
26-
<a class="item issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
27-
{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
28-
</a>
29-
<a class="item issue-add-time show-modal" data-modal="#issue-time-manually-add-modal">
30-
{{svg "octicon-plus"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_manually_add"}}
31-
</a>
32-
{{end}}
33-
</div>
5+
<div class="flex-text-block">
6+
<strong class="tw-flex-1">{{ctx.Locale.Tr "repo.issues.tracker"}}</strong>
7+
<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">
8+
{{svg "octicon-pencil"}}
9+
</button>
10+
</div>
11+
<div class="ui buttons tw-mt-2 tw-w-full">
12+
{{if $.IsStopwatchRunning}}
13+
<button class="ui button tw-flex-1 issue-stop-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/stop">
14+
{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_stop"}}
15+
</button>
16+
<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"}}">
17+
{{svg "octicon-trash"}}
18+
</button>
19+
{{else}}
20+
<button class="ui button tw-flex-1 issue-start-time link-action" data-url="{{.Issue.Link}}/times/stopwatch/start">
21+
{{svg "octicon-stopwatch"}} {{ctx.Locale.Tr "repo.issues.timetracker_timer_start"}}
22+
</button>
23+
<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"}}">
24+
{{svg "octicon-plus"}}
25+
</button>
26+
{{end}}
3427
</div>
3528

3629
{{if and (not $.IsStopwatchRunning) .HasUserStopwatch}}
@@ -74,23 +67,19 @@
7467
</div>
7568
{{end}}
7669
{{if .WorkingUsers}}
77-
<div class="ui comments tw-mt-2">
70+
<div class="tw-mt-2">
7871
{{ctx.Locale.Tr "repo.issues.time_spent_from_all_authors" ($.Issue.TotalTrackedTime | Sec2Hour)}}
79-
<div>
80-
{{range $user, $trackedtime := .WorkingUsers}}
81-
<div class="comment tw-mt-2">
82-
<a class="avatar">
83-
{{ctx.AvatarUtils.Avatar $user}}
84-
</a>
85-
<div class="content">
86-
{{template "shared/user/authorlink" $user}}
87-
<div class="text">
88-
{{$trackedtime|Sec2Hour}}
89-
</div>
90-
</div>
72+
</div>
73+
<div class="ui list flex-items-block">
74+
{{range $user, $trackedtime := .WorkingUsers}}
75+
<div class="item tw-gap-3">
76+
{{template "shared/user/avatarlink" dict "user" $user}}
77+
<div>
78+
{{template "shared/user/authorlink" $user}}
79+
<div class="text">{{$trackedtime|Sec2Hour}}</div>
9180
</div>
92-
{{end}}
93-
</div>
81+
</div>
82+
{{end}}
9483
</div>
9584
{{end}}
9685
{{end}}

‎web_src/css/modules/button.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -366,8 +366,8 @@ It needs some tricks to tweak the left/right borders with active state */
366366

367367
.ui.buttons .button {
368368
border-right: none;
369-
flex: 1 0 auto;
370369
border-radius: 0;
370+
flex-shrink: 0;
371371
margin: 0;
372372
}
373373
.ui.buttons .button:first-child {

‎web_src/js/index-domready.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,3 +175,5 @@ const initDur = performance.now() - initStartTime;
175175
if (initDur > 500) {
176176
console.error(`slow init functions took ${initDur.toFixed(3)}ms`);
177177
}
178+
179+
document.dispatchEvent(new CustomEvent('gitea:index-ready'));

‎web_src/js/standalone/devtest.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@ function initDevtestToast() {
1111
}
1212
}
1313

14+
// NOTICE: keep in mind that this file is not in "index.js", they do not share the same module system.
1415
initDevtestToast();

0 commit comments

Comments
 (0)