1
1
mirror of https://github.com/go-gitea/gitea synced 2024-11-09 19:54:25 +00:00
gitea/web_src/js/webcomponents
Giteabot ab344a36e3
Rework and fix stopwatch (#30732) (#30787)
Backport #30732 by @silverwind

Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.

Co-authored-by: silverwind <me@silverwind.io>
2024-04-30 21:46:45 +00:00
..
absolute-date.js Use Temporal.PlainDate for absolute dates (#29804) 2024-03-15 09:13:01 +00:00
absolute-date.test.js Use Temporal.PlainDate for absolute dates (#29804) 2024-03-15 09:13:01 +00:00
index.js Add <overflow-menu>, rename webcomponents (#29400) 2024-03-15 02:05:31 +00:00
origin-url.js Add <overflow-menu>, rename webcomponents (#29400) 2024-03-15 02:05:31 +00:00
origin-url.test.js Add <overflow-menu>, rename webcomponents (#29400) 2024-03-15 02:05:31 +00:00
overflow-menu.js Rework and fix stopwatch (#30732) (#30787) 2024-04-30 21:46:45 +00:00
polyfills.js Enforce trailing comma in JS on multiline (#30002) 2024-03-22 14:06:53 +00:00
README.md Add <overflow-menu>, rename webcomponents (#29400) 2024-03-15 02:05:31 +00:00

Web Components

This webcomponents directory contains the source code for the web components used in the Gitea Web UI.

https://developer.mozilla.org/en-US/docs/Web/Web_Components

Guidelines

  • These components are loaded in <head> (before DOM body) in a separate entry point, they need to be lightweight to not affect the page loading time too much.
  • Do not import svg.js into a web component because that file is currently not tree-shakeable, import svg files individually insteat.
  • All our components must be added to webpack.config.js so they work correctly in Vue.