Commit Graph

18 Commits (8e12ba34bab7e728ac93ccfaecbe91e053ef1c89)

Author SHA1 Message Date
wxiaoguang e71eb8930a
Refactor some Str2html code ()
This PR touches the most interesting part of the "template refactoring".

1. Unclear variable type. Especially for "web/feed/convert.go":
sometimes it uses text, sometimes it uses HTML.
2. Assign text content to "RenderedContent" field, for example: `
project.RenderedContent = project.Description` in web/org/projects.go
3. Assign rendered content to text field, for example: `r.Note =
rendered content` in web/repo/release.go
4. (possible) Incorrectly calling `{{Str2html
.PackageDescriptor.Metadata.ReleaseNotes}}` in
package/content/nuget.tmpl, I guess the name Str2html misleads
developers to use it to "render string to html", but it only sanitizes.
if ReleaseNotes really contains HTML, then this is not a problem.
wxiaoguang 7a1557d2cc
Remove unnecessary "Safe" modifier from templates ()
Follow 
wxiaoguang 31bb9f3247
Refactor more code in templates ()
Follow . 

* Introduce JSONTemplate to help to render JSON templates
* Introduce JSEscapeSafe for templates. Now only use `{{ ... |
JSEscape}}` instead of `{{ ... | JSEscape | Safe}}`
* Simplify "UserLocationMapURL" useage
Yarden Shoham 3e8414179c
Introduce htmx and use it to avoid full page load on `Subscribe` and `Follow` ()
- Closes https://github.com/go-gitea/gitea/issues/28880

This change introduces htmx with the hope we could use it to make Gitea
more reactive while keeping our "HTML rendered on the server" approach.

- Add `htmx.js` that imports `htmx.org` and initializes error toasts
- Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the
`<body>` tag so every request that htmx sends is authenticated
- Place `hx-swap="outerHTML"` on the `<body>` tag so the response of
each htmx request replaces the tag it targets (as opposed to its inner
content)
- Place `hx-push-url="false"` on the `<body>` tag so no changes to the
URL happen in `<form>` tags
- Add the `is-loading` class during request

### Error toasts in action


![errors](https://github.com/go-gitea/gitea/assets/20454870/181a1beb-1cb8-4858-abe8-fa1fc3f5b8f3)

## Don't do a full page load when clicking the subscribe button
- Refactor the form around the subscribe button into its own template
- Use htmx to perform the form submission
- `hx-boost="true"` to prevent the default form submission behavior of a
full page load
- `hx-sync="this:replace"` to replace the current request (in case the
button is clicked again before the response is returned)
  - `hx-target="this"` to replace the form tag with the new form tag
- Change the backend response to return a `<form>` tag instead of a
redirect to the issue page

### Before


![subscribe_before](https://github.com/go-gitea/gitea/assets/20454870/cb2439a2-c3c0-425c-8d3c-5d646b1cdc28)

### After


![subscribe_after](https://github.com/go-gitea/gitea/assets/20454870/6fcd77d8-7b11-40b0-af4f-b152aaad787c)

## Don't do a full page load when clicking the follow button
- Use htmx to perform the button request
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-indicator="#profile-avatar-card"` to place the loading indicator
on the card
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page

### Before


![follow_before](https://github.com/go-gitea/gitea/assets/20454870/a210b643-6e74-4ff9-8e61-d658c62edf1f)

### After


![follow_after](https://github.com/go-gitea/gitea/assets/20454870/5bb19ae9-0d59-4ae3-b538-4c83334e4722)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: 6543 <m.huber@kithara.com>
Co-authored-by: Giteabot <teabot@gitea.io>
6543 49d7663929
Revert adding htmx until we finaly decide to add it ()
Yarden Shoham 1df06e3f39
Don't do a full page load when clicking the follow button ()
- Use htmx to perform the button request
- `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` to authenticate (we
should probably learn to reuse this)
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-swap="outerHTML"` to replace the card (as opposed to its inner
content) with the new card that shows the new follower count and button
color
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page

# Before

![before](https://github.com/go-gitea/gitea/assets/20454870/86899d15-41c9-42ed-bd85-253b9caac7f8)

# After

![after](https://github.com/go-gitea/gitea/assets/20454870/59455d96-548c-4a81-a5b0-fab1dc1e87ef)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
techknowlogick e96e440b8b
add a shortcut to user's profile page to admin user details ()
delvh 112f37c546
Fix yet another `ctx` template bug ()
Fixes 
wxiaoguang 93bd4351bf
Fix more "locale" usages ()
delvh 7960ba7e2b
Always use `ctx.Locale.Tr` inside templates ()
silverwind 8099238618
Change green buttons to primary color ()
I think it's better if the primary actions have primary color instead of
green which fits better into the overall single-color UI design. This PR
currently replaces every green button with primary:

<img width="141" alt="Screenshot 2023-09-16 at 14 07 59"
src="https://github.com/go-gitea/gitea/assets/115237/843c1e50-4fb2-4ec6-84ba-0efb9472dcbe">
<img width="161" alt="Screenshot 2023-09-16 at 14 07 51"
src="https://github.com/go-gitea/gitea/assets/115237/9442195a-a3b2-4a42-b262-8377d6f5c0d1">

Modal actions now use uncolored/primary instead of previous green/red
colors. I also removed the box-shadow on all basic buttons:

<img width="259" alt="Screenshot 2023-09-16 at 14 16 39"
src="https://github.com/go-gitea/gitea/assets/115237/5beea529-127a-44b0-8d4c-afa7b034a490">
<img width="261" alt="Screenshot 2023-09-16 at 14 17 42"
src="https://github.com/go-gitea/gitea/assets/115237/4757f7b2-4d46-49bc-a797-38bb28437b88">

The change currently includes the "Merge PR" button, for which we might
want to make an exception to match the icon color there:

<img width="442" alt="Screenshot 2023-09-16 at 14 33 53"
src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
BeYonme 918accaafa
Relocate the `RSS user feed` button ()
before:

![before](https://github.com/go-gitea/gitea/assets/38558065/e33e0809-91cd-451a-9c36-ab20b9296038)

after:

![after](https://github.com/go-gitea/gitea/assets/38558065/9dbfb0ce-1d0e-4bc8-8502-6b4af0fba220)

Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
Panagiotis "Ivory" Vasilopoulos 73f6535406
Fix URL of padlock icon in profile ()
wxiaoguang a370efc13f
Use template context function for avatar rendering ()
Introduce `AvatarUtils`, no need to pass `$.Context` to every
sub-template, and simplify the template helper functions.
Panagiotis "Ivory" Vasilopoulos d58c542579
Add 'Show on a map' button to Location in profile, fix layout ()
Not too important, but I think that it'd be a pretty neat touch.

Also fixes some layout bugs introduced by a previous PR.

---------

Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-authored-by: Caesar Schinas <caesar@caesarschinas.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Panagiotis "Ivory" Vasilopoulos 1c89f15f42
Use calendar icon for `Joined on...` in profiles ()
wxiaoguang 128d77a3a0
Following up fixes for "Fix inconsistent user profile layout across tabs" ()
Follow
https://github.com/go-gitea/gitea/pull/25625#issuecomment-1621577816

1. Fix the incorrect "project view" layout
2. Fix the "follow/unfollow" link on "packages" and "projects" tab


Before:


![image](https://github.com/go-gitea/gitea/assets/2114189/3b071235-c186-4097-8a19-dd90dcb2a344)


After:


![image](https://github.com/go-gitea/gitea/assets/2114189/d1d23cd7-28d8-43e3-9f68-03e8a34a9b97)

---------

Co-authored-by: Giteabot <teabot@gitea.io>
puni9869 2af30f715e
Fix inconsistent user profile layout across tabs ()
Fix ::User Profile Page  Project Tab Have Inconsistent Layout and Style
Added the big_avator for consistency in the all header_items tabs.
Fixes: 
> ### Description
> in the user profile page the `Packages` and `Projects` tab have small
icons for user but other tabs have bigger profile picture with user
info:
> 
> ### Screenshots
> ### **For Packages And Projects:**
>
![image](https://user-images.githubusercontent.com/25511175/240148601-2420d77b-ba25-4718-9ccb-c5d0d95e3079.png)
> 
> ### **For Other Tabs:**
>
![image](https://user-images.githubusercontent.com/25511175/240148461-ce9636b3-fe11-4c46-a230-30d83eee5947.png)
> 

## Before

![image](https://github.com/go-gitea/gitea/assets/80308335/975ad038-07ca-4b10-b75d-ccf259be7b9d)


 ## After changes
Project View 
<img width="1394" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/95d181d7-8e61-496d-9899-7b825c91ad56">


Packages View
<img width="1378" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/7f5fd60f-6b18-4fa8-8c56-7b0d45d1a610">


## Org view for projects page
<img width="1385" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/6400dc89-a5ae-4f0a-831b-5b6efa020d89">

## Org view for packages page
<img width="1387" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/4e1e9ffe-1e4b-4334-8657-de11b5fd31d0">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>