github-forks
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Projects Releases Activity
gitea/web_src/js/webcomponents
History
silverwind 564102ce89
Rework and fix stopwatch () 
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.
..
README.md Add `<overflow-menu>`, rename webcomponents ()
absolute-date.js Use `Temporal.PlainDate` for absolute dates ()
absolute-date.test.js Use `Temporal.PlainDate` for absolute dates ()
index.js Add `<overflow-menu>`, rename webcomponents ()
origin-url.js Add `<overflow-menu>`, rename webcomponents ()
origin-url.test.js Add `<overflow-menu>`, rename webcomponents ()
overflow-menu.js Rework and fix stopwatch ()
polyfills.js Enforce trailing comma in JS on multiline ()

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.