mirror of
https://github.com/go-gitea/gitea
synced 2024-09-27 14:54:05 +00:00
rework stopwatch using relative-time
This commit is contained in:
silverwind
parent
7a8bc5e59c
commit
44ac098c23
26
package-lock.json
generated
26
package-lock.json
generated
@ -42,7 +42,6 @@
|
||||
"postcss": "8.4.38",
|
||||
"postcss-loader": "8.1.1",
|
||||
"postcss-nesting": "12.1.2",
|
||||
"pretty-ms": "9.0.0",
|
||||
"sortablejs": "1.15.2",
|
||||
"swagger-ui-dist": "5.17.2",
|
||||
"tailwindcss": "3.4.3",
|
||||
@ -9170,17 +9169,6 @@
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/parse-ms": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz",
|
||||
"integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/path-exists": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
|
||||
@ -9772,20 +9760,6 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-ms": {
|
||||
"version": "9.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.0.0.tgz",
|
||||
"integrity": "sha512-E9e9HJ9R9NasGOgPaPE8VMeiPKAyWR5jcFpNnwIejslIhWqdqOrb2wShBsncMPUb+BcCd2OPYfh7p2W6oemTng==",
|
||||
"dependencies": {
|
||||
"parse-ms": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/printable-characters": {
|
||||
"version": "1.0.42",
|
||||
"resolved": "https://registry.npmjs.org/printable-characters/-/printable-characters-1.0.42.tgz",
|
||||
|
||||
@ -41,7 +41,6 @@
|
||||
"postcss": "8.4.38",
|
||||
"postcss-loader": "8.1.1",
|
||||
"postcss-nesting": "12.1.2",
|
||||
"pretty-ms": "9.0.0",
|
||||
"sortablejs": "1.15.2",
|
||||
"swagger-ui-dist": "5.17.2",
|
||||
"tailwindcss": "3.4.3",
|
||||
|
||||
@ -6,6 +6,7 @@ package repo
|
||||
import (
|
||||
"net/http"
|
||||
"strings"
|
||||
"time"
|
||||
|
||||
"code.gitea.io/gitea/models/db"
|
||||
issues_model "code.gitea.io/gitea/models/issues"
|
||||
@ -100,7 +101,7 @@ func GetActiveStopwatch(ctx *context.Context) {
|
||||
issue.Link(),
|
||||
issue.Repo.FullName(),
|
||||
issue.Index,
|
||||
sw.Seconds() + 1, // ensure time is never zero in ui
|
||||
time.Unix(time.Now().Unix() - sw.Seconds(), 0).Format(time.RFC3339),
|
||||
}
|
||||
}
|
||||
|
||||
@ -109,5 +110,5 @@ type StopwatchTmplInfo struct {
|
||||
IssueLink string
|
||||
RepoSlug string
|
||||
IssueIndex int64
|
||||
Seconds int64
|
||||
Datetime string
|
||||
}
|
||||
|
||||
@ -12,6 +12,20 @@
|
||||
|
||||
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
|
||||
<div class="ui secondary menu item navbar-mobile-right only-mobile">
|
||||
{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
|
||||
<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
|
||||
<div class="tw-relative">
|
||||
{{svg "octicon-stopwatch"}}
|
||||
<span class="header-stopwatch-dot">
|
||||
<relative-time
|
||||
format="micro"
|
||||
datetime="{{.ActiveStopwatch.Datetime}}"
|
||||
data-no-tooltip="true"
|
||||
></relative-time>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
{{if .IsSigned}}
|
||||
<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
|
||||
<div class="tw-relative">
|
||||
@ -74,43 +88,19 @@
|
||||
</div><!-- end content avatar menu -->
|
||||
</div><!-- end dropdown avatar menu -->
|
||||
{{else if .IsSigned}}
|
||||
{{if EnableTimetracking}}
|
||||
<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
|
||||
{{if and EnableTimetracking .ActiveStopwatch}}
|
||||
<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-datetime="{{.ActiveStopwatch.Datetime}}">
|
||||
<div class="tw-relative">
|
||||
{{svg "octicon-stopwatch"}}
|
||||
<span class="header-stopwatch-dot"></span>
|
||||
</div>
|
||||
<span class="only-mobile tw-ml-2">{{ctx.Locale.Tr "active_stopwatch"}}</span>
|
||||
</a>
|
||||
<div class="active-stopwatch-popup tippy-target">
|
||||
<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
|
||||
<a class="stopwatch-link tw-flex tw-items-center tw-gap-1 muted" href="{{.ActiveStopwatch.IssueLink}}">
|
||||
{{svg "octicon-issue-opened" 16}}
|
||||
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
|
||||
</a>
|
||||
<span class="ui primary label stopwatch-time" data-seconds="{{.ActiveStopwatch.Seconds}}">
|
||||
{{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}}
|
||||
<span class="header-stopwatch-dot">
|
||||
<relative-time
|
||||
format="micro"
|
||||
datetime="{{.ActiveStopwatch.Datetime}}"
|
||||
data-no-tooltip="true"
|
||||
></relative-time>
|
||||
</span>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
|
||||
{{.CsrfTokenHtml}}
|
||||
<button
|
||||
type="submit"
|
||||
class="ui button mini compact basic icon tw-mr-0"
|
||||
data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
|
||||
>{{svg "octicon-square-fill"}}</button>
|
||||
</form>
|
||||
<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
|
||||
{{.CsrfTokenHtml}}
|
||||
<button
|
||||
type="submit"
|
||||
class="ui button mini compact basic icon tw-mr-0"
|
||||
data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
|
||||
>{{svg "octicon-trash"}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{{end}}
|
||||
|
||||
<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
|
||||
@ -204,4 +194,33 @@
|
||||
</a>
|
||||
{{end}}
|
||||
</div><!-- end full right menu -->
|
||||
|
||||
{{if and .IsSigned .ActiveStopwatch}}
|
||||
<div class="active-stopwatch-popup tippy-target">
|
||||
<div class="tw-flex tw-items-center tw-gap-2 tw-p-3">
|
||||
<a class="stopwatch-link tw-flex tw-items-center tw-gap-1 muted" href="{{.ActiveStopwatch.IssueLink}}">
|
||||
{{svg "octicon-issue-opened" 16}}
|
||||
<span class="stopwatch-issue">{{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}}</span>
|
||||
</a>
|
||||
<div class="tw-flex tw-gap-1">
|
||||
<form class="stopwatch-commit" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/toggle">
|
||||
{{.CsrfTokenHtml}}
|
||||
<button
|
||||
type="submit"
|
||||
class="ui button mini compact basic icon tw-mr-0"
|
||||
data-tooltip-content="{{ctx.Locale.Tr "repo.issues.stop_tracking"}}"
|
||||
>{{svg "octicon-square-fill"}}</button>
|
||||
</form>
|
||||
<form class="stopwatch-cancel" method="post" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
|
||||
{{.CsrfTokenHtml}}
|
||||
<button
|
||||
type="submit"
|
||||
class="ui button mini compact basic icon tw-mr-0"
|
||||
data-tooltip-content="{{ctx.Locale.Tr "repo.issues.cancel_tracking"}}"
|
||||
>{{svg "octicon-trash"}}</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
</nav>
|
||||
|
||||
@ -103,19 +103,12 @@
|
||||
width: 50%;
|
||||
min-height: 48px;
|
||||
}
|
||||
#navbar #mobile-stopwatch-icon,
|
||||
#navbar #mobile-notifications-icon {
|
||||
margin-right: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navbar a.item .notification_count {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
#navbar a.item:hover .notification_count,
|
||||
#navbar a.item:hover .header-stopwatch-dot {
|
||||
border-color: var(--color-nav-hover-bg);
|
||||
@ -123,6 +116,11 @@
|
||||
|
||||
#navbar a.item .notification_count,
|
||||
#navbar a.item .header-stopwatch-dot {
|
||||
color: var(--color-nav-bg);
|
||||
padding: 0 3.75px;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
font-weight: var(--font-weight-bold);
|
||||
background: var(--color-primary);
|
||||
border: 2px solid var(--color-nav-bg);
|
||||
position: absolute;
|
||||
@ -135,6 +133,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1; /* prevent menu button background from overlaying icon */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.secondary-nav {
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
import prettyMilliseconds from 'pretty-ms';
|
||||
import {createTippy} from '../modules/tippy.js';
|
||||
import {GET} from '../modules/fetch.js';
|
||||
import {hideElem, showElem} from '../utils/dom.js';
|
||||
|
||||
const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
|
||||
|
||||
let stopwatchTippy;
|
||||
|
||||
export function initStopwatch() {
|
||||
if (!enableTimeTracking) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stopwatchEl = document.querySelector('.active-stopwatch-trigger');
|
||||
const stopwatchEls = document.querySelectorAll('.active-stopwatch');
|
||||
const stopwatchPopup = document.querySelector('.active-stopwatch-popup');
|
||||
|
||||
if (!stopwatchEl || !stopwatchPopup) {
|
||||
if (!stopwatchEls.length || !stopwatchPopup) {
|
||||
return;
|
||||
}
|
||||
|
||||
stopwatchEl.removeAttribute('href'); // intended for noscript mode only
|
||||
|
||||
stopwatchTippy = createTippy(stopwatchEl, {
|
||||
content: stopwatchPopup,
|
||||
placement: 'bottom-end',
|
||||
trigger: 'click',
|
||||
maxWidth: 'none',
|
||||
interactive: true,
|
||||
hideOnClick: true,
|
||||
theme: 'default',
|
||||
});
|
||||
|
||||
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
|
||||
const currSeconds = document.querySelector('.stopwatch-time')?.getAttribute('data-seconds');
|
||||
if (currSeconds) {
|
||||
updateStopwatchTime(currSeconds);
|
||||
const datetime = stopwatchEls[0]?.getAttribute('data-datetime');
|
||||
if (datetime) {
|
||||
updateStopwatchTime(datetime);
|
||||
}
|
||||
|
||||
for (const stopwatchEl of stopwatchEls) {
|
||||
stopwatchEl.removeAttribute('href'); // intended for noscript mode only
|
||||
|
||||
createTippy(stopwatchEl, {
|
||||
content: stopwatchPopup.cloneNode(true),
|
||||
placement: 'bottom-end',
|
||||
trigger: 'click',
|
||||
maxWidth: 'none',
|
||||
interactive: true,
|
||||
hideOnClick: true,
|
||||
theme: 'default',
|
||||
});
|
||||
}
|
||||
|
||||
let usingPeriodicPoller = false;
|
||||
@ -127,9 +126,8 @@ async function updateStopwatch() {
|
||||
|
||||
function updateStopwatchData(data) {
|
||||
const watch = data[0];
|
||||
const btnEl = document.querySelector('.active-stopwatch-trigger');
|
||||
const btnEl = document.querySelector('.active-stopwatch');
|
||||
if (!watch) {
|
||||
clearStopwatchTimer();
|
||||
hideElem(btnEl);
|
||||
} else {
|
||||
const {repo_owner_name, repo_name, issue_index, seconds} = watch;
|
||||
@ -139,37 +137,26 @@ function updateStopwatchData(data) {
|
||||
document.querySelector('.stopwatch-cancel')?.setAttribute('action', `${issueUrl}/times/stopwatch/cancel`);
|
||||
const stopwatchIssue = document.querySelector('.stopwatch-issue');
|
||||
if (stopwatchIssue) stopwatchIssue.textContent = `${repo_owner_name}/${repo_name}#${issue_index}`;
|
||||
updateStopwatchTime(seconds);
|
||||
updateStopwatchTime(secondsToDatetime(seconds));
|
||||
showElem(btnEl);
|
||||
}
|
||||
return Boolean(data.length);
|
||||
}
|
||||
|
||||
let updateTimeIntervalId = null; // holds setInterval id when active
|
||||
function clearStopwatchTimer() {
|
||||
if (updateTimeIntervalId !== null) {
|
||||
clearInterval(updateTimeIntervalId);
|
||||
updateTimeIntervalId = null;
|
||||
function secondsToDatetime(seconds) {
|
||||
return (new Date(Date.now() - seconds * 1000)).toISOString();
|
||||
}
|
||||
|
||||
function updateStopwatchTime(datetime) {
|
||||
for (const parent of document.querySelectorAll('.header-stopwatch-dot')) {
|
||||
const existing = parent.querySelector(':scope > relative-time');
|
||||
if (existing) {
|
||||
existing.setAttribute('datetime', datetime);
|
||||
} else {
|
||||
const el = document.createElement('relative-time');
|
||||
el.setAttribute('format', 'micro');
|
||||
el.setAttribute('datetime', datetime);
|
||||
parent.append(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateStopwatchTime(seconds) {
|
||||
const secs = parseInt(seconds);
|
||||
if (!Number.isFinite(secs)) return;
|
||||
|
||||
clearStopwatchTimer();
|
||||
const stopwatch = document.querySelector('.stopwatch-time');
|
||||
// TODO: replace with <relative-time> similar to how system status up time is shown
|
||||
const start = Date.now();
|
||||
const updateUi = () => {
|
||||
const delta = Date.now() - start;
|
||||
const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true});
|
||||
if (stopwatch) stopwatch.textContent = dur;
|
||||
// refresh the tippy so that the triangle updates to the correct position
|
||||
if (stopwatchTippy?.state.isShown) {
|
||||
stopwatchTippy.hide();
|
||||
stopwatchTippy.show();
|
||||
}
|
||||
};
|
||||
updateUi();
|
||||
updateTimeIntervalId = setInterval(updateUi, 1000);
|
||||
}
|
||||
|
||||
@ -96,6 +96,7 @@ function attachTooltip(target, content = null) {
|
||||
|
||||
function switchTitleToTooltip(target) {
|
||||
let title = target.getAttribute('title');
|
||||
if (target.getAttribute('data-no-tooltip')) return;
|
||||
if (title) {
|
||||
// apply custom formatting to relative-time's tooltips
|
||||
if (target.tagName.toLowerCase() === 'relative-time') {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user