564102ce89
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. |
||
---|---|---|
.. | ||
absolute-date.js | ||
absolute-date.test.js | ||
index.js | ||
origin-url.js | ||
origin-url.test.js | ||
overflow-menu.js | ||
polyfills.js | ||
README.md |
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.