Commit Graph

14 Commits

Author SHA1 Message Date
silverwind 99d7ef5091
Prevent layout shift in `<overflow-menu>` items (#29831)
There is a small layout shift in when active tab changes. Notice how the
actions SVG is unstable:


![](https://github.com/go-gitea/gitea/assets/115237/a6928e89-5d47-4a91-8f36-1fa22fddbce7)

This is because the active item with bold text is wider then the
inactive one. I have applied [this
trick](https://stackoverflow.com/a/32570813/808699) to prevent this
layout shift. It's only active inside `<overflow-menu>` because I wanted
to avoid changing HTML and doing it in regular JS would cause a flicker.
I don't expect us to introduce other similar menus without
`<overflow-menu>`, so that place is likely fine.


![after](https://github.com/go-gitea/gitea/assets/115237/d6089924-8de6-4ee0-8db4-15f16069a131)

I also changed the weight from 500 to 600, slightly reduced horizontal
padding, merged some tab-bar related CSS rules and a added a small
margin below repo-header so it does not look so crammed against the
buttons on top.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-20 17:00:35 +00:00
silverwind 0d3ec8e2ad
Use `Temporal.PlainDate` for absolute dates (#29804)
Use the upcoming
[Temporal.PlainDate](https://tc39.es/proposal-temporal/docs/plaindate.html)
via polyfill. If there is any remaining bugs in `<absolute-date>` this
will iron them out. I opted for the lightweight polyfill because both
seem to achieve our goal of localizeable absolute dates.

- With
[`@js-temporal/polyfill`](https://www.npmjs.com/package/@js-temporal/polyfill)
chunk size goes from 81.4 KiB to 274 KiB
- With
[`temporal-polyfill`](https://www.npmjs.com/package/temporal-polyfill)
chunk size goes from 81.4 KiB to 142 KiB

Also see [this
table](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#comparison-with-js-temporalpolyfill)
for more comparisons of these polyfills. Soon there will be
[treeshakable
API](https://github.com/fullcalendar/temporal-polyfill?tab=readme-ov-file#tree-shakable-api)
as well which will further reduce size.
2024-03-15 09:13:01 +00:00
silverwind 256a1eeb9a
Add `<overflow-menu>`, rename webcomponents (#29400)
1. Add `<overflow-menu>` web component
2. Rename `<gitea-origin-url>` to `<origin-url>` and make filenames
match.

<img width="439" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/2fbe4ca4-110b-4ad2-8e17-c1e116ccbd74">

<img width="444" alt="Screenshot 2024-03-02 at 21 36 52"
src="https://github.com/go-gitea/gitea/assets/115237/aa8f786e-dc8c-4030-b12d-7cfb74bdfd6e">

<img width="537" alt="Screenshot 2024-03-03 at 03 05 06"
src="https://github.com/go-gitea/gitea/assets/115237/fddd50aa-adf1-4b4b-bd7f-caf30c7b2245">


![image](https://github.com/go-gitea/gitea/assets/115237/0f43770c-834c-4a05-8e3d-d30eb8653786)


![image](https://github.com/go-gitea/gitea/assets/115237/4b4c6bd7-843f-4f49-808f-6b3aed5e9f9a)

TODO:

- [x] Check if removal of `requestAnimationFrame` is possible to avoid
flash of content. Likely needs a `MutationObserver`.
- [x] Hide tippy when button is removed from DOM.
- [x] ~~Implement right-aligned items
(https://github.com/go-gitea/gitea/pull/28976)~~. Not going to do it.
- [x] Clean up CSS so base element has no background and add background
via tailwind instead.
- [x] Use it for org and user page.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-15 02:05:31 +00:00
silverwind 857243bed7
Fix date rendering by adding `<gitea-absolute-date>` (#29725)
Alternative to: https://github.com/go-gitea/gitea/pull/29698
Fixes: https://github.com/go-gitea/gitea/issues/29034

<img width="278" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/12ecd967-2723-410d-8a28-a1b0f41b7bba">

It also fixes a secondary issue that we were showing timestamp tooltips
over date, which makes no sense, so these are now gone as well:

<img width="284" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/a70432f3-97b6-41e6-b202-b53b76924a66">
2024-03-12 22:37:02 +00:00
silverwind 82405f808d
Fix URL calculation in clone input box (#29470)
Ported the function as-is and added comments so we don't forget about
this in the future.

Fixes: https://github.com/go-gitea/gitea/issues/29462
2024-02-28 15:04:04 +00:00
silverwind b6bf8041d8
Fix gitea-origin-url with default ports (#29085)
When setting `url.host` on a URL object with no port specified (like is
the case of default port), the resulting URL's port will not change.
Workaround this quirk in the URL standard by explicitely setting port
for the http and https protocols.

Extracted the logic to a function for the purpose of testing. Initially
I wanted to have the function in utils.js, but it turns out esbuild can
not treeshake the unused functions which would result in the
webcomponents chunk having all 2kB utils.js inlined, so it seemed not
worth.

Fixes: https://github.com/go-gitea/gitea/issues/29084
2024-02-08 02:37:09 +00:00
wxiaoguang 6632d1497c
Polyfill SubmitEvent for PaleMoon (#28441) 2023-12-15 07:26:36 +08:00
wxiaoguang e5b3f53d36
Add minimum polyfill to support "relative-time-element" in PaleMoon (#26575)
Close #26525
2023-08-18 17:27:11 +08:00
wxiaoguang 7681d582cd
Refactor locale number (#24134)
Before, the `GiteaLocaleNumber.js` was just written as a a drop-in
replacement for old `js-pretty-number`.

Actually, we can use Golang's `text` package to format.

This PR partially completes the TODOs in `GiteaLocaleNumber.js`:

> if we have complete backend locale support (eg: Golang "x/text"
package), we can drop this component.
> tooltip: only 2 usages of this, we can replace it with Golang's
"x/text/number" package in the future.

This PR also helps #24131

Screenshots:

<details>

![image](https://user-images.githubusercontent.com/2114189/232179420-b1b9974b-9d96-4408-b209-b80182c8b359.png)


![image](https://user-images.githubusercontent.com/2114189/232179416-14f36aa0-3f3e-4ac9-b366-7bd3a4464a11.png)

</details>
2023-04-17 11:37:23 +08:00
Yarden Shoham b7b5834831
Use auto-updating, natively hoverable, localized time elements (#23988)
- Added [GitHub's `relative-time` element](https://github.com/github/relative-time-element)
- Converted all formatted timestamps to use this element
- No more flashes of unstyled content around time elements
- These elements are localized using the `lang` property of the HTML file
- Relative (e.g. the activities in the dashboard) and duration (e.g.
server uptime in the admin page) time elements are auto-updated to keep
up with the current time without refreshing the page
- Code that is not needed anymore such as `formatting.js` and parts of `since.go` have been deleted

Replaces #21440
Follows #22861

## Screenshots

### Localized

![image](https://user-images.githubusercontent.com/20454870/230775041-f0af4fda-8f6b-46d3-b8e3-d340c791a50c.png)

![image](https://user-images.githubusercontent.com/20454870/230673393-931415a9-5729-4ac3-9a89-c0fb5fbeeeb7.png)

### Tooltips

#### Native for dates

![image](https://user-images.githubusercontent.com/20454870/230797525-1fa0a854-83e3-484c-9da5-9425ab6528a3.png)

#### Interactive for relative

![image](https://user-images.githubusercontent.com/115237/230796860-51e1d640-c820-4a34-ba2e-39087020626a.png)

### Auto-update

![rec](https://user-images.githubusercontent.com/20454870/230672159-37480d8f-435a-43e9-a2b0-44073351c805.gif)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
2023-04-11 01:01:20 +02:00
wxiaoguang 19de52e0f4
Introduce GiteaLocaleNumber custom element to handle number localization on pages. (#23861)
Follow #21429 & #22861

Use `<gitea-locale-number>` instead of backend `PrettyNumber`. All old
`PrettyNumber` related functions are removed. A lot of code could be
simplified.

And some functions haven't been used for long time (dead code), so they
are also removed by the way (eg: `SplitStringAtRuneN`, `Dedent`)

This PR only tries to improve the `PrettyNumber` rendering problem, it
doesn't touch the "plural" problem.

Screenshot:


![image](https://user-images.githubusercontent.com/2114189/229290804-1f63db65-1e34-4a54-84ba-e00b44331b17.png)


![image](https://user-images.githubusercontent.com/2114189/229290911-c88dea00-b11d-48dd-accb-9f52edd73ce4.png)
2023-04-03 12:58:09 -04:00
wxiaoguang 529bac1950
Polyfill the window.customElements (#23592)
Related: #23590

Reference:
https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs

It seems that there are some users using old browsers, so the
`window.customElements` need polyfill.

The Custom Elements would help a lot for Gitea's UI problems, including:

* `<span class="js-pretty-number">`
* `<time data-format>`

So it's worth get polyfill.

---------

Co-authored-by: delvh <dev.lh@web.de>
2023-03-20 23:17:56 +08:00
wxiaoguang 0bfcbcc5e7
Add document for `webcomponents` (#23261) 2023-03-03 17:45:19 +08:00
wxiaoguang e7ef94e00f
Introduce customized HTML elements, fix incorrect AppUrl usages in templates (#22861)
This PR follows:
* #21986
* #22831

This PR also introduce customized HTML elements, which would also help
problems like:
* #17760
* #21429
* #21440

With customized HTML elements, there won't be any load-search-replace
operations, and it can avoid page flicking (which @silverwind cares a
lot).

Browser support:
https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

# FAQ

## Why the component has the prefix?

As usual, I would strongly suggest to add prefixes for our own/private
names. The dedicated prefix will avoid conflicts in the future, and it
makes it easier to introduce various 3rd components, like GitHub's
`relative-time` component. If there is no prefix, it's impossible to
introduce another public component with the same name in the future.

## Why the `custcomp.js` is loaded before HTML body? The `index.js` is
after HTML body.

Customized components must be registered before the content loading.
Otherwise there would be still some flicking.

`custcomp.js` should have its own dependencies and should be very light,
so it won't affect the page loading time too much.

## Why use `data-url` attribute but not use the `textContent`?

According to the standard, the `connectedCallback` occurs on the
tag-opening moment. The element's children are not ready yet.

## Why not use `{{.GuessCurrentOrigin $.ctx ...}}` to let backend decide
the absolute URL?

It's difficult for backend to guess the correct protocol(scheme)
correctly with zero configuration. Generating the absolute URL from
frontend can guarantee that the URL is 100% correct -- since the user is
visiting it.

# Screenshot

<details>

![image](https://user-images.githubusercontent.com/2114189/218256757-a267c8ba-3108-4755-9ae5-329f1b08f615.png)

</details>
2023-02-17 22:02:20 +08:00