From a6e746adb3b8471a32a73b97c17192252a58c99e Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 Apr 2024 17:06:32 +0200 Subject: [PATCH] Fix stopwatch and introduce default tippy theme --- templates/base/head_navbar.tmpl | 48 ++++++++++++----------- web_src/css/modules/tippy.css | 5 +-- web_src/js/features/contextpopup.js | 2 + web_src/js/features/repo-code.js | 1 + web_src/js/features/repo-issue.js | 1 + web_src/js/features/stopwatch.js | 8 +++- web_src/js/modules/tippy.js | 6 ++- web_src/js/webcomponents/overflow-menu.js | 1 + 8 files changed, 43 insertions(+), 29 deletions(-) diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index addff22c49..828b08e0d0 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -82,31 +82,33 @@ {{ctx.Locale.Tr "active_stopwatch"}} -
-
- - {{svg "octicon-issue-opened" 16 "tw-mr-2"}} +
+
+ {{svg "octicon-issue-opened" 16}} + {{.ActiveStopwatch.RepoSlug}}#{{.ActiveStopwatch.IssueIndex}} - - {{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}} - -
- {{.CsrfTokenHtml}} - -
-
- {{.CsrfTokenHtml}} - -
+ + {{if .ActiveStopwatch}}{{Sec2Time .ActiveStopwatch.Seconds}}{{end}} + +
+
+ {{.CsrfTokenHtml}} + +
+
+ {{.CsrfTokenHtml}} + +
+
{{end}} diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 6ac7c37d93..c9b6f1d9a5 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -16,8 +16,8 @@ .tippy-box { position: relative; - background-color: var(--color-body); - color: var(--color-secondary-dark-6); + background-color: var(--color-menu); + color: var(--color-text); border: 1px solid var(--color-secondary); border-radius: var(--border-radius); font-size: 1rem; @@ -25,7 +25,6 @@ .tippy-content { position: relative; - padding: 1rem; /* if you need different padding, use different data-theme */ z-index: 1; } diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js index ce90f3e505..6a9325ed1c 100644 --- a/web_src/js/features/contextpopup.js +++ b/web_src/js/features/contextpopup.js @@ -18,6 +18,7 @@ export function attachRefIssueContextPopup(refIssues) { if (!owner) return; const el = document.createElement('div'); + el.classList.add('tw-p-3'); refIssue.parentNode.insertBefore(el, refIssue.nextSibling); const view = createApp(ContextPopup); @@ -30,6 +31,7 @@ export function attachRefIssueContextPopup(refIssues) { } createTippy(refIssue, { + theme: 'default', content: el, placement: 'top-start', interactive: true, diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 63da5f2039..7c74c253a2 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -113,6 +113,7 @@ function showLineButton() { btn.closest('.code-view').append(menu.cloneNode(true)); createTippy(btn, { + theme: 'menu', trigger: 'click', hideOnClick: true, content: menu, diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 2b2eed58bb..c4e14c62c4 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -502,6 +502,7 @@ export function initRepoPullRequestReview() { if ($reviewBtn.length && $panel.length) { const tippy = createTippy($reviewBtn[0], { content: $panel[0], + theme: 'default', placement: 'bottom', trigger: 'click', maxWidth: 'none', diff --git a/web_src/js/features/stopwatch.js b/web_src/js/features/stopwatch.js index 2ec74344fc..fa357b67b8 100644 --- a/web_src/js/features/stopwatch.js +++ b/web_src/js/features/stopwatch.js @@ -5,6 +5,8 @@ import {hideElem, showElem} from '../utils/dom.js'; const {appSubUrl, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config; +let stopwatchTippy; + export function initStopwatch() { if (!enableTimeTracking) { return; @@ -19,13 +21,14 @@ export function initStopwatch() { stopwatchEl.removeAttribute('href'); // intended for noscript mode only - createTippy(stopwatchEl, { + 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. @@ -161,6 +164,9 @@ function updateStopwatchTime(seconds) { 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 + stopwatchTippy.hide(); + stopwatchTippy.show(); }; updateUi(); updateTimeIntervalId = setInterval(updateUi, 1000); diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 83b28e5745..a18c94cafb 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -37,8 +37,10 @@ export function createTippy(target, opts = {}) { return onShow?.(instance); }, arrow: arrow || (theme === 'bare' ? false : arrowSvg), - role: role || 'menu', // HTML role attribute - theme: theme || role || 'menu', // CSS theme, either "tooltip", "menu", "box-with-header" or "bare" + // HTML role attribute, ideally the default role would be "popover" but it does not exist + role: role || 'menu', + // CSS theme, either "default", "tooltip", "menu", "box-with-header" or "bare" + theme: theme || role || 'default', plugins: [followCursor], ...other, }); diff --git a/web_src/js/webcomponents/overflow-menu.js b/web_src/js/webcomponents/overflow-menu.js index 604fce7d4b..1efa64ed3b 100644 --- a/web_src/js/webcomponents/overflow-menu.js +++ b/web_src/js/webcomponents/overflow-menu.js @@ -117,6 +117,7 @@ window.customElements.define('overflow-menu', class extends HTMLElement { interactive: true, placement: 'bottom-end', role: 'menu', + theme: 'menu', content: this.tippyContent, onShow: () => { // FIXME: onShown doesn't work (never be called) setTimeout(() => {