Commit Graph

109 Commits

Author SHA1 Message Date
silverwind 1fd7e3d6be
Improve Actions CSS (#24864)
- Various color tweaks
- Add sticky positioning to left sidebar, right header and right step
header
- Adjust margins and border radiuses

<img width="1235" alt="Screenshot 2023-05-23 at 11 18 06"
src="https://github.com/go-gitea/gitea/assets/115237/f601b00d-c7f2-43de-89f2-3ac55f2d9cdc">
<img width="1239" alt="Screenshot 2023-05-23 at 11 18 18"
src="https://github.com/go-gitea/gitea/assets/115237/a2d24cc9-29fa-4c17-906b-84feea14b889">

![](https://github.com/go-gitea/gitea/assets/115237/643910f2-a582-405d-bc93-36f2e54b5fda)

![](https://github.com/go-gitea/gitea/assets/115237/382a8a54-f1e3-4f08-affc-ea3108c02352)

---------

Co-authored-by: yp05327 <576951401@qq.com>
2023-05-24 09:00:29 +00:00
silverwind a9d417341c
Run stylelint on .vue files (#24865)
- Run stylelint on .vue files
- Fix discovered issues
- Suppress warning spam from `declaration-strict-value` rule

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-23 13:54:21 +00:00
HesterG da461b5a08
Improvements for action detail page (#24718)
Close #24625 

Main changes:

1. For the left panel, show rerun icon only on hover, and add style when
the job is selected, and removed icon on the "rerun all" button and
modify the text on the button


https://github.com/go-gitea/gitea/assets/17645053/cc437a17-d2e9-4f1b-a8cf-f56e53962767

2. Adjust fonts, and add on hover effects to the log lines. And add
loading effect when the job is done and the job step log is expanded for
the first time. (With reference to github)


https://github.com/go-gitea/gitea/assets/17645053/2808d77d-f402-4fb0-8819-7aa0a018cf0c

3. Add `gt-ellipsis` to `step-summary-msg` and `job-brief-name`

<img width="898" alt="ellipsis"
src="https://github.com/go-gitea/gitea/assets/17645053/e2fb7049-3125-4252-970d-15b0751febc7">

4. Fixed
https://github.com/go-gitea/gitea/issues/24625#issuecomment-1541380010
by adding explicit conditions to `ActionRunStatus.vue` and `status.tmpl`

5. Adjust some css styles

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-22 12:17:24 +08:00
silverwind 19993d8814
Change `--font-weight-bold` to `--font-weight-semibold` and 600 value, introduce new font weight variables (#24827)
There was some recent discussion about this in Discord `ui-design`
channel and the conclusion was that
https://github.com/go-gitea/gitea/issues/24305 should have fixed their
OS font installation to have semibold weights.

I have now tested this 601 weight on a Windows 10 machine on Firefox
myself, and I immediately noticed that bold was excessivly bold and
rendering as 700 because browsers are biased towards bolder fonts. So
revert this back to the previous value.
2023-05-21 23:37:32 +00:00
Yarden Shoham c641a22f2a
Mute repo names in dashboard repo list (#24811)
# Before

![image](https://github.com/go-gitea/gitea/assets/20454870/24b80212-4a4d-44a7-99d5-a8c6b207225e)

# After

![image](https://github.com/go-gitea/gitea/assets/20454870/565b242a-f65d-450c-b43b-c4539a0f8b28)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-19 17:03:09 +00:00
FuXiaoHei c757765a9e
Implement actions artifacts (#22738)
Implement action artifacts server api.

This change is used for supporting
https://github.com/actions/upload-artifact and
https://github.com/actions/download-artifact in gitea actions. It can
run sample workflow from doc
https://docs.github.com/en/actions/using-workflows/storing-workflow-data-as-artifacts.
The api design is inspired by
https://github.com/nektos/act/blob/master/pkg/artifacts/server.go and
includes some changes from gitea internal structs and methods.

Actions artifacts contains two parts:

- Gitea server api and storage (this pr implement basic design without
some complex cases supports)
- Runner communicate with gitea server api (in comming)

Old pr https://github.com/go-gitea/gitea/pull/22345 is outdated after
actions merged. I create new pr from main branch.


![897f7694-3e0f-4f7c-bb4b-9936624ead45](https://user-images.githubusercontent.com/2142787/219382371-eb3cf810-e4e0-456b-a8ff-aecc2b1a1032.jpeg)

Add artifacts list in actions workflow page.
2023-05-19 21:37:57 +08:00
silverwind 040970c320
Enable two vue eslint rules (#24780)
These two rules are no longer violated, so we can enable them again.
2023-05-17 22:00:34 -04:00
Evur 29096d8ef5
Make the color of zero-contribution-squares in the activity heatmap more subtle (#24758)
The previous color had a too high contrast with the background.

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-17 10:55:34 +00:00
Yarden Shoham 53a00017bb
Fix flash of unstyled content in action view page (#24712)
# Before

![rec](https://github.com/go-gitea/gitea/assets/20454870/32f8e521-f743-4101-bd3c-923fd5abd893)

# After

![rec](https://github.com/go-gitea/gitea/assets/20454870/070721d1-6749-43c1-ac18-d8c58e5f0901)

Ref: https://github.com/go-gitea/gitea/issues/24625

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-14 14:58:59 +00:00
Yarden Shoham 4810fe55e3
Add status indicator on main home screen for each repo (#24638)
It will show the calculated commit status state of the latest commit on
the default branch for each repository in the dashboard repo list

- Closes #15620

# Before

![image](https://github.com/go-gitea/gitea/assets/20454870/aa1326c7-43c0-458a-a798-3102c766bcf9)

# After

![image](https://github.com/go-gitea/gitea/assets/20454870/8658cc03-2224-442a-b1c8-bf64126e4575)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-13 21:59:01 +00:00
silverwind a96c73f979
Remove svg.svg class, restore .rss-icon (#24667)
Fix regression from https://github.com/go-gitea/gitea/pull/24476 where
the `svg.svg` class misaligns SVG icons across the site and streched
buttons unintentionally in vertical height.

Before (button 30.3px):
<img width="157" alt="Screenshot 2023-05-11 at 22 09 42"
src="https://github.com/go-gitea/gitea/assets/115237/0fd137ab-ab52-4cf8-afca-c45776d526d0">

After (button 30px):
<img width="160" alt="Screenshot 2023-05-11 at 22 09 59"
src="https://github.com/go-gitea/gitea/assets/115237/4b741f4b-0fd2-4fae-9bee-16a7deb098e8">

[vertical-align:
middle](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
is not suitable to align icons to text because

> Aligns the middle of the element with the baseline plus half the
x-height of the parent.

Example of `vertical-align: middle` from MDN:

<img width="232" alt="Screenshot 2023-05-11 at 22 29 28"
src="https://github.com/go-gitea/gitea/assets/115237/179fb756-85a1-4cab-8219-1a4958f333e2">

So I think the
[existing](365bb77a54/web_src/css/svg.css (L3))
`vertical-align: text-top` is generally still the best bet:

<img width="241" alt="Screenshot 2023-05-11 at 22 34 24"
src="https://github.com/go-gitea/gitea/assets/115237/0cd6edf5-12c0-4bdb-8771-a900f5ba2d35">

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-12 10:23:53 +00:00
yp05327 4aec1f87a4
Remove highlight in repo list (#24675)
Before:

![image](https://github.com/go-gitea/gitea/assets/18380374/aa5e9f1f-48ff-4e9f-a693-23a34e390760)
After:

![image](https://github.com/go-gitea/gitea/assets/18380374/a4b58a6c-4ea3-4ded-80df-2e650d39a1d3)

private or internal repos have `lock` icon, no need to add highlights to
them.
2023-05-12 10:00:17 +02:00
silverwind 67db6b6976
RSS icon fixes (#24476)
Fix regression from https://github.com/go-gitea/gitea/pull/24471 where
CSS rules for `.icon.grey` were removed which were in use by the RSS
icons.

Gave them their own class instead, removed a wrapper and also fixed
vertical alignment on them. Additionally, did a few related fixes on the
org header for alignment.

Fixes: https://github.com/go-gitea/gitea/issues/24584

<img width="196" alt="Screenshot 2023-05-01 at 22 39 40"
src="https://user-images.githubusercontent.com/115237/235528228-959e2385-c1d2-4d5c-baec-e3784d459653.png">
<img width="216" alt="Screenshot 2023-05-01 at 22 44 20"
src="https://user-images.githubusercontent.com/115237/235528231-95cbff86-5672-48eb-b214-8bdcefa1612c.png">
<img width="120" alt="Screenshot 2023-05-01 at 22 56 36"
src="https://user-images.githubusercontent.com/115237/235529844-b94ab554-3259-4d0c-b040-82aed7d1a111.png">


<img width="372" alt="Screenshot 2023-05-01 at 22 54 25"
src="https://user-images.githubusercontent.com/115237/235529744-1a9c201b-5692-4122-9765-2f201a322a9e.png">
<img width="477" alt="Screenshot 2023-05-01 at 22 55 28"
src="https://user-images.githubusercontent.com/115237/235529748-62188554-9927-42ef-bc94-7052bce266e2.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-10 22:27:02 +00:00
Hester Gong ea7954f069
Modify luminance calculation and extract related functions into single files (#24586)
Close #24508

Main changes:
As discussed in the issue

1. Change luminance calculation function to use [Relative
Luminance](https://www.w3.org/WAI/GL/wiki/Relative_luminance)
2. Move the luminance related functions into color.go/color.js
3. Add tests for both the files (Not sure if test cases are too many
now)

Before (tests included by `UseLightTextOnBackground` are labels started
with `##`):
https://try.gitea.io/HesterG/testrepo/labels

After:
<img width="1307" alt="Screen Shot 2023-05-08 at 13 37 55"
src="https://user-images.githubusercontent.com/17645053/236742562-fdfc3a4d-2fab-466b-9613-96f2bf96b4bc.png">
<img width="1289" alt="Screen Shot 2023-05-08 at 13 38 06"
src="https://user-images.githubusercontent.com/17645053/236742570-022db68e-cec0-43bb-888a-fc54f5332cc3.png">
<img width="1299" alt="Screen Shot 2023-05-08 at 13 38 20"
src="https://user-images.githubusercontent.com/17645053/236742572-9af1de45-fb7f-460b-828d-ba25fae20f51.png">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-10 11:19:03 +00:00
Yarden Shoham ae9ac50072
Make the actions control button look like an actual button (#24611)
- Follows #24595

# Before

![image](https://user-images.githubusercontent.com/20454870/236889690-d1dfd74d-ad7d-4571-b712-69f0dc630c6e.png)

![image](https://user-images.githubusercontent.com/20454870/236903320-3b415619-8aff-4e5d-994e-6faa671990db.png)

![image](https://user-images.githubusercontent.com/20454870/236885823-0734216d-b450-4a43-bfe3-e88525a8822a.png)

# After

![image](https://github.com/go-gitea/gitea/assets/20454870/b0745b3f-5f7a-49d9-903a-fd2675baaa1a)

![image](https://github.com/go-gitea/gitea/assets/20454870/88789c78-2764-4be4-9a03-b080f1028c78)

![image](https://github.com/go-gitea/gitea/assets/20454870/a6e23400-4445-40c5-adbe-460c90fae36a)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-10 08:09:23 +00:00
Yarden Shoham de7dcc7cd9
Add a tooltip to the job rerun button (#24617)
This one doesn't look very good as a real button (at least not in the
ways I tried), so I've opted to simply add a tooltip for it.
# Before

![image](https://github.com/go-gitea/gitea/assets/20454870/05afe362-b914-42ce-9db3-e3471bc6ec4b)

# After

![image](https://github.com/go-gitea/gitea/assets/20454870/c99c88d4-bf43-46b0-911e-9ea17ff6977e)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2023-05-10 07:37:10 +00:00
Yarden Shoham 9a0652f0b2
Attach a tooltip to the action status icon (#24614)
To clearly communicate the current state of the action

![image](https://github.com/go-gitea/gitea/assets/20454870/5d6de6b9-f34f-417d-b08e-fcd1b99b3079)
![image](https://github.com/go-gitea/gitea/assets/20454870/b976676a-4525-43e7-866f-8933be1a5dfd)
![image](https://github.com/go-gitea/gitea/assets/20454870/2e0a55fe-658f-4242-83de-b857a8b55f31)
![image](https://github.com/go-gitea/gitea/assets/20454870/6b42bcd1-c499-41ac-8419-1c4e60085d47)
![image](https://github.com/go-gitea/gitea/assets/20454870/363fcff8-fe61-4363-a04b-2db93cfc4fa3)
![image](https://github.com/go-gitea/gitea/assets/20454870/f8f59b68-93de-4f31-b9b0-24d94990d1d0)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2023-05-09 21:39:16 +02:00
silverwind d5b2bf9044
Update JS dependencies, add new eslint rules (#24597)
- Update all JS dependencies
- Enable new eslint rules, fix issue (some via autofix)
- Fix some missed eslint rule renames from [unicorn
v25](https://github.com/sindresorhus/eslint-plugin-unicorn/releases/tag/v25.0.0)
- Tested Monaco, Katex, Swagger UI

---------

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-09 02:35:49 +00:00
Yarden Shoham 46e97986f5
Attach a tooltip to the action control button (#24595)
The first time I saw the big red X button I thought something failed but
apparently, it was just a "Cancel" button

# Before

![image](https://user-images.githubusercontent.com/20454870/236889564-3729926a-cfb3-4e47-a8ed-51389c4f193f.png)

![image](https://user-images.githubusercontent.com/20454870/236886259-b0ab0d55-28c3-41f5-8709-8cfc6819423f.png)

![image](https://user-images.githubusercontent.com/20454870/236886081-b7a97f01-6108-4c18-9adb-11cbafd8c19c.png)

# After

![image](https://user-images.githubusercontent.com/20454870/236889690-d1dfd74d-ad7d-4571-b712-69f0dc630c6e.png)

![image](https://user-images.githubusercontent.com/20454870/236885823-0734216d-b450-4a43-bfe3-e88525a8822a.png)

![image](https://user-images.githubusercontent.com/20454870/236903320-3b415619-8aff-4e5d-994e-6faa671990db.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
2023-05-08 23:59:59 +00:00
Yarden Shoham 9ad5b59cd9
Do not select line numbers when selecting text from the action run logs (#24594)
- Fixes #24578

# Before

![image](https://user-images.githubusercontent.com/20454870/236873942-26e97f28-6595-4be9-88fa-158870eda253.png)

# After

![image](https://user-images.githubusercontent.com/20454870/236874171-8f0182a5-e953-4740-b875-f3542dee8325.png)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2023-05-08 20:50:05 +02:00
Hester Gong 97b70a0cd4
Add org visibility label to non-organization's dashboard (#24558) 2023-05-07 08:33:43 +08:00
silverwind 4a722c9a45
Make Issue/PR/projects more compact, misc CSS tweaks (#24459)
- Remove various horizontal dividers on repo pages that didn't provide
visual benefit
- Remove label/milestone pills on single issue/pr page
- Remove issue-related pill buttons on projects page
- Increase contrast of color-secondary on arc-green
- Improve notifications icon, make circle bigger
- Remove some inline styles
- Fix focus in issue/pr title edit and select all text on button click

### Issue and PR before and after

<img width="1249" alt="Screenshot 2023-05-01 at 11 44 22"
src="https://user-images.githubusercontent.com/115237/235436662-a708288e-84fb-4b2e-a5a2-3a1c17d28f6c.png">
<img width="1248" alt="Screenshot 2023-05-01 at 11 58 51"
src="https://user-images.githubusercontent.com/115237/235437992-f863e483-f3cc-4cc1-8204-fd223647a0c9.png">



### Projects before and after

<img width="1255" alt="Screenshot 2023-05-01 at 11 41 02"
src="https://user-images.githubusercontent.com/115237/235436433-0deb85d6-4e7d-4e74-847f-254cc70a0cf9.png">
<img width="1267" alt="Screenshot 2023-05-01 at 11 40 03"
src="https://user-images.githubusercontent.com/115237/235436431-715b13cb-f78c-4d86-b27a-9229f9738c5b.png">


### Releases before and after

<img width="1243" alt="Screenshot 2023-05-01 at 11 41 12"
src="https://user-images.githubusercontent.com/115237/235436457-b655ee6f-03b8-4595-8d8c-b15ea469e988.png">
<img width="1240" alt="Screenshot 2023-05-01 at 11 40 10"
src="https://user-images.githubusercontent.com/115237/235436456-05a2a0dd-7cbb-4f26-b0d3-4f667df4bb95.png">

### Misc

<img width="58" alt="Screenshot 2023-05-01 at 10 49 13"
src="https://user-images.githubusercontent.com/115237/235432494-936ce995-6e22-47bc-ab2d-c9e93d31987d.png">
<img width="57" alt="Screenshot 2023-05-01 at 18 57 08"
src="https://user-images.githubusercontent.com/115237/235492430-1d32cfe0-0f2c-467c-b2fa-925b27e30e0e.png">


Issue title edit and wrap:

<img width="1238" alt="Screenshot 2023-05-01 at 12 34 40"
src="https://user-images.githubusercontent.com/115237/235441407-d5067a57-e586-4865-a652-282e5944abb4.png">
<img width="1232" alt="Screenshot 2023-05-01 at 12 06 24"
src="https://user-images.githubusercontent.com/115237/235438710-1a543dda-220f-4d87-8f93-f1710c0695f0.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-03 17:58:59 -04:00
yp05327 5987f00523
Add rerun workflow button and refactor to use SVG octicons (#24350)
Changes:
- Add rerun workflow button. Then users can rerun the whole workflow by
only one-click.
- Refactor to use SVG octicons in RepoActionView.vue

![image](https://user-images.githubusercontent.com/18380374/234736083-dea9b333-ec11-4095-a113-763f3716fba7.png)

![image](https://user-images.githubusercontent.com/18380374/234736107-d657d19c-f70a-42f4-985f-156a8c7efb7a.png)

![image](https://user-images.githubusercontent.com/18380374/234736160-9ad372df-7089-4d18-9bab-48bca3f01878.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-01 22:14:20 +08:00
wxiaoguang 59d060622d
Improve RSS (#24335)
Follow  #22719

### Major changes

1. `ServerError` doesn't do format, so remove the `%s`
2. Simplify `RenderBranchFeed` (slightly)
3. Remove unused `BranchFeedRSS`
4. Make `feed.RenderBranchFeed` respect `EnableFeed` config
5. Make `RepoBranchTagSelector.vue` respect `EnableFeed` setting,
otherwise there is always RSS icon
6. The `(branchURLPrefix + item.url).replace('src', 'rss')` doesn't seem
right for all cases, for example, the string `src` could appear in
`branchURLPrefix`, so we need a separate `rssURLPrefix`
7. The `<a>` in Vue menu needs `@click.stop`, otherwise the menu itself
would be triggered at the same time
8. Change `<a><button></button></a>` to `<a role=button>`
9. Use `{{PathEscapeSegments .TreePath}}` instead of `{{range $i, $v :=
.TreeNames}}/{{$v}}{{end}}`


Screenshot of changed parts:

<details>


![image](https://user-images.githubusercontent.com/2114189/234315538-66603694-9093-48a8-af33-83575fd7a018.png)


![image](https://user-images.githubusercontent.com/2114189/234315786-f1efa60b-012e-490b-8ce2-d448dc6fe5c9.png)


![image](https://user-images.githubusercontent.com/2114189/234334941-446941bc-1baa-4256-8850-ccc439476cda.png)

</details>


### Other thoughts

Should we remove the RSS icon from the branch dropdown list? It seems
too complex for a list UI, and users already have the chance to get the
RSS feed URL from "branches" page.

---------

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: silverwind <me@silverwind.io>
2023-04-25 22:53:44 -04:00
yp05327 5f21e0f8eb
Automatically select the org when click create repo from org dashboard (#24325)
![image](https://user-images.githubusercontent.com/18380374/234209941-d661b07f-e963-427b-a673-78c46043a792.png)

In org dashboard, the create repo link will be `repo/create?org={orgId}`
2023-04-25 22:25:29 -04:00
silverwind ee6fa8d633
Restore bold on repolist (#24337)
Looking at it again, it does look a bit "odd" without bold, so revert
the repolist change done in
https://github.com/go-gitea/gitea/pull/24307.

<img width="141" alt="image"
src="https://user-images.githubusercontent.com/115237/234331813-c6e2402f-e099-43b3-aed6-46a0e24e3899.png">
2023-04-25 17:19:22 -04:00
jladbrook 56d4893b2a
Add RSS Feeds for branches and files (#22719)
Fix #22228 adding RSS feeds for branches and files. 

RSS feeds are accessed through:

* [gitea]/src/branch/{branch}.rss
* [gitea]/src/branch/{branch}/{file_name}.rss

No changes have been made to the UI to expose the feed urls for branches
and files.
2023-04-25 22:08:29 +08:00
wxiaoguang 20a3b03fe5
Add --font-weight-bold and set previous bold to 601 (#24307)
Fix #24305

According to MDN, "bold" starts from 700, some fonts do not provide
"bolding" for weight 600

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-24 13:46:00 -04:00
Hester Gong 5e7543fcf4
Use same action status svg icons on actions list as on action page (#24178)
Close #24020 

After:

These icons are the same now:

<img width="1287" alt="截屏2023-04-18 13 52 11"
src="https://user-images.githubusercontent.com/17645053/232684252-05ddc101-dc5b-41b5-b374-132c3d853a41.png">

<img width="1141" alt="截屏2023-04-18 13 54 48"
src="https://user-images.githubusercontent.com/17645053/232684261-6ebd864a-a9aa-4982-af32-2cea91c35be8.png">


In this PR, didn't use `ActionRunStatus.vue` because the mounting of the
component will cause flash of the icons like below:

https://user-images.githubusercontent.com/17645053/232682646-713202dc-9023-4b9c-a849-c3a1ae6dd155.mov

Instead, modified and used `status.tmpl` to make it the same as
`ActionRunStatus.vue` to avoid the ui flash (Welcomed to show how to use
`ActionRunStatus.vue` without flashing if there is a way).
Added comments to both of them for reminding synchronization of these
two files.

---------

Co-authored-by: Jason Song <i@wolfogre.com>
2023-04-19 13:42:53 +08:00
Yarden Shoham f045e58cc7
Localize activity heatmap (except tooltip) (#24131)
The calculation of the total sum is moved to the backend so a full HTML
string could be sent.


![image](https://user-images.githubusercontent.com/20454870/232112381-c11d896b-ba47-40f8-b2a3-71cf4b3208de.png)

- Closes #10669
- 2nd attempt (the first was in #21570)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-17 14:26:01 -04:00
sillyguodong 3753ecd583
Update the value of the `diffEnd` when click `Show More` btn in the DiffFileTree (#24069)
In the component `DiffFileTree`,if don't update the value of the
`diffEnd` in the callback of ajax request, click `Show More` btn will
always return the same response, duplicate files are appended to the
file list.


Before:


https://user-images.githubusercontent.com/33891828/231371188-82d169af-10bb-47e2-8aca-83ced2597f2d.mov



After:


https://user-images.githubusercontent.com/33891828/231369805-39a5a4d0-662c-4f08-bc5a-7d31e8782453.mov

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-04-12 15:11:23 +02:00
sillyguodong e03e827dcb
Expand selected file when clicking file tree (#24041)
Auto expand the selected file when clicking the file item of the file
tree.
This is consistent with Github's behavior.

https://user-images.githubusercontent.com/33891828/231048124-61f180af-adba-42d7-9ffa-626e1de04aed.mov
2023-04-12 15:06:39 +08:00
wxiaoguang 6892e2b8ef
Use reactive store to share data between components (#23996)
Follow #23947

* Use reactive store to share data between components
* Remove no-op `this.hashListener = window.addEventListener()` because
`addEventListener` returns void/undefined.

Reference:


https://vuejs.org/guide/scaling-up/state-management.html#simple-state-management-with-reactivity-api


Screenshot (the same as before):

<details>

<img width="565" alt="image"
src="https://user-images.githubusercontent.com/2114189/230701282-bd61bfa3-7786-433b-9ad8-a88591112a02.png">


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-11 20:44:26 -04:00
yp05327 68aac691c1
Add job.duration in web ui (#23963)
![image](https://user-images.githubusercontent.com/18380374/230532947-271ac389-8134-4c5e-8f2f-ced4a4fd0ebe.png)

![image](https://user-images.githubusercontent.com/18380374/230532963-e76532c5-7ca1-4b01-ae77-cc1223350fe7.png)

Maybe we can change the location of it.
2023-04-07 18:20:50 -04:00
yusifeng 395c716735
Highlight selected file in the PR file tree (#23947)
before

![before](https://user-images.githubusercontent.com/36984894/230327904-6e712ca2-f777-4cad-99f3-53bc20008180.gif)

after

![after](https://user-images.githubusercontent.com/36984894/230327966-6e5dd971-f0df-427a-a80b-6a9b6db6065d.gif)
2023-04-07 14:27:10 -04:00
Jonathan Tran 8c3cee7a72
Update eslints for Vue 3 (#23935)
I found that some lint warnings in my editor are conflicting, and I
believe the root cause is using lints designed for Vue 2 instead of Vue
3. We moved to Vue 3 in #20044.

I verified that the explicitly disabled rules in the changed file are
still part of the `vue/vue3-recommended` set.

See [Available rules -
eslint-plugin-vue](https://eslint.vuejs.org/rules/) for a full list of
lints.
2023-04-05 16:59:40 -04:00
wxiaoguang aa9c920980
Improve action log display with control chars (#23820)
Close #23680

Some CLI programs use "\r" and control chars to print new content in
current line.

So, the strings in one line are actually from
`\rReading...1%\rReading...5%\rReading...100%`

This PR tries to make the output better.
2023-04-01 20:57:05 +08:00
Jason Song 964a057a76
Fix checks for `needs` in Actions (#23789)
Fix:
- https://gitea.com/gitea/act_runner/issues/77
- https://gitea.com/gitea/act_runner/issues/81

Before:
<img width="1489" alt="image"
src="https://user-images.githubusercontent.com/9418365/228501567-f752cf87-a7ed-42c6-8f3d-ba741795c1fe.png">

Highlights:
- Upgrade act to make things doable, related to
  - https://gitea.com/gitea/act/pulls/32
  - https://gitea.com/gitea/act/pulls/33
  - https://gitea.com/gitea/act/pulls/35
- Make `needs` works
- Sort jobs in the original order in the workflow files
2023-03-30 22:33:17 +08:00
silverwind aa4d1d94f7
Diff improvements (#23553)
- Avoid flash of wrong tree toggle icon on page load by setting icon
based on sync state
- Avoid "pop-in" of tree on page load by leaving space based on sync
state
- Use the same border/box-shadow combo used on comment `:target` also
for file `:target`.
- Refactor `DiffFileTree.vue` to use `toggleElem` instead of hardcoded
class name.
- Left-align inline comment boxes and make them fit the same amount of
markup content on a line as GitHub.
- Fix height of `diff-file-list`

Fixes: https://github.com/go-gitea/gitea/issues/23593

<img width="1250" alt="Screenshot 2023-03-18 at 00 52 04"
src="https://user-images.githubusercontent.com/115237/226071392-6789a644-aead-4756-a77e-aba3642150a0.png">
<img width="1246" alt="Screenshot 2023-03-18 at 00 59 43"
src="https://user-images.githubusercontent.com/115237/226071443-8bcba924-458b-48bd-b2f0-0de59cb180ac.png">
<img width="1250" alt="Screenshot 2023-03-18 at 01 27 14"
src="https://user-images.githubusercontent.com/115237/226073121-ccb99f9a-d3ac-40b7-9589-43580c4a01c9.png">
<img width="1231" alt="Screenshot 2023-03-19 at 21 44 16"
src="https://user-images.githubusercontent.com/115237/226207951-81bcae1b-6b41-4e39-83a7-0f37951df6be.png">

(Yes I'm aware the border-radius in bottom corners is suboptimal, but
this would be notorously hard to fix without relying on `overflow:
hidden`).
2023-03-30 20:06:10 +08:00
yp05327 22fec1650a
Add commit info in action page (#23210)
Add more commit info in action detail page.

![image](https://user-images.githubusercontent.com/18380374/222069905-a5ab28b1-1cea-4eec-b3b9-f1c74145cb82.png)
2023-03-27 18:34:09 +08:00
wxiaoguang 12fff36d05
Fine tune more downdrop settings, use SVG for labels, improve Repo Topic Edit form (#23626)
Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.

Diff: `+79 −84`, everything becomes much better.

### Improve the dropdown settings.

Move all fomantic-init related code into our `fomantic.js`

Fine-tune some dropdown global settings, see the comments.

Also help to fix the first problem in #23625 , cc: @yp05327 

The "language" menu has been simplified, and it works with small-height
window better.

### Use SVG instead of `<i class="delete icon">`

It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind

### Remove incorrect `tabable` CSS class

It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.

### Improve the Repo Topic Edit form

* Simplify the code
* Add a "Cancel" button
* Align elements

Before:

<details>

![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)

</details>

After:

![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
2023-03-26 19:31:26 +08:00
wxiaoguang 8d5fbeb7a2
Use data-tooltip-content for tippy tooltip (#23649)
Follow:
* #23574
* Remove all ".tooltip[data-content=...]"

Major changes:

* Remove "tooltip" class, use "[data-tooltip-content=...]" instead of
".tooltip[data-content=...]"
* Remove legacy `data-position`, it's dead code since last Fomantic
Tooltip -> Tippy Tooltip refactoring
* Rename reaction attribute from `data-content` to
`data-reaction-content`
* Add comments for some `data-content`: `{{/* used by the form */}}`
* Remove empty "ui" class
* Use "text color" for SVG icons (a few)
2023-03-24 18:35:38 +08:00
wxiaoguang 9be90a5875
Use a general approach to show tooltip, fix temporary tooltip bug (#23574)
## TLDR

* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)

## Details

### The performance

Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip

### The general approach for all tooltips

Before, dynamically generated tooltips need to be called with
`initTooltip`.

After, use MutationObserver to:

* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)

It does help a lot, eg:

1a4efa0ee9/web_src/js/components/PullRequestMergeForm.vue (L33-L36)

### Temporary tooltip re-entrance bug

To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.

After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.

### Other changes

* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
2023-03-23 17:56:15 +08:00
wxiaoguang 389e83f7eb
Improve `<SvgIcon>` to make it output `svg` node and optimize performance (#23570)
Before, the Vue `<SvgIcon>` always outputs DOM nodes like: 

```html
<span class="outer-class">
    <svg class="class-name-defined" ...></svg>
</span>
```

The `span` is redundant and I guess such layout and the inconsistent
`class/class-name` attributes would cause bugs sooner or later.

This PR makes the `<SvgIcon>` clear, and it's faster than before,
because it doesn't need to parse the whole SVG string.

Before: 

<details>

![image](https://user-images.githubusercontent.com/2114189/226156474-ce2c57cd-b869-486a-b75b-1eebdac8cdf7.png)

</details>

After:

![image](https://user-images.githubusercontent.com/2114189/226155774-108f49ed-7512-40c3-94a2-a6e8da18063d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-03-23 11:24:16 +08:00
yp05327 06c067bb0f
Remove stars in dashboard repo list (#23530)
Discussion is here: https://github.com/go-gitea/gitea/pull/22816
2023-03-17 00:43:58 -04:00
silverwind 202803fc69
Replace Less with CSS (#23481)
Ran most of the Less files through the Less compiler and Prettier and
then followed up with a round of manual fixes.

The Less compiler had unfortunately stripped all `//` style comments
that I had to restore (It did preserve `/* */` comments). Other fixes
include duplicate selector removal which were revealed after the
transpilation and which weren't caught by stylelint before but now are.

Fixes: https://github.com/go-gitea/gitea/issues/15565
2023-03-14 22:20:19 -04:00
wxiaoguang ac8d71ff07
Refactor branch/tag selector to Vue SFC (#23421)
Follow #23394

There were many bad smells in old code. This PR only moves the code into
Vue SFC, doesn't touch the unrelated logic.

update: after
5f23218c85
, there should be no usage of the vue-rumtime-compiler anymore
(hopefully), so I think this PR could close #19851

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-03-14 17:51:20 +08:00
wxiaoguang e82f1b15c7
Refactor dashboard repo list to Vue SFC (#23405)
Similar to #23394

The dashboard repo list mixes jQuery/Fomantic UI/Vue together, it's very
diffcult to maintain and causes unfixable a11y problems.

This PR uses two steps to refactor the repo list:

1. move `data-` attributes to JS object and use Vue data as much as
possible
d3adc0dcac
2. move the code into a Vue SFC
7ebe55df6e

Total: +516 −585

Screenshots:

<details>

![image](https://user-images.githubusercontent.com/2114189/224271457-a23e05be-d7d3-4247-a803-f0ee30c36f44.png)

![image](https://user-images.githubusercontent.com/2114189/224271504-76fbd3da-4d7a-4725-b0d1-fbff83caac63.png)

![image](https://user-images.githubusercontent.com/2114189/224271845-f007cadf-6c49-46bd-a65c-a3fc75bdba3b.png)

</details>

---------

Co-authored-by: John Olheiser <john.olheiser@gmail.com>
2023-03-14 12:09:06 +08:00
Hester Gong f521e88240
Fix actions frontend bugs (pagination, long name alignment) and small simplify (#23370)
1 Right now on actions page, the action list will not be aligned if
commit message is long. In this PR, the changes are:
- The branch tag is moved to bottom row
- Width percentage is given to make them aligned
- Show "..." if commit is longer than two lines.
- Align the status icon with the commit message with baseline

 Before:
<img width="1068" alt="截屏2023-03-08 12 23 22"
src="https://user-images.githubusercontent.com/17645053/223628534-6b9472cb-29f5-40a3-9714-c5152553049e.png">
  
 After:
<img width="756" alt="截屏2023-03-08 13 34 28"
src="https://user-images.githubusercontent.com/17645053/223628571-da94698b-0e0a-43e3-ae82-34d8c780e5ba.png">


2 Right now the actions list's pagination is not working properly
because Param is not passed to pagination template, in this PR Param
Strings are passed to the pager

Before:
<img width="1176" alt="截屏2023-03-08 12 23 50"
src="https://user-images.githubusercontent.com/17645053/223629207-8b67ce74-2342-4259-bc81-036e37752716.png">

After:
<img width="1343" alt="截屏2023-03-08 13 11 54"
src="https://user-images.githubusercontent.com/17645053/223629321-4f538f8a-45dc-4d6f-ae60-2c82680ae3e7.png">

3 A small simplify in `RepoActionView.vue` .

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-03-13 13:31:06 +08:00
wxiaoguang 75022f8b1a
Refactor branch/tag selector dropdown (first step) (#23394)
Follow: 
* #23345

The branch/tag selector dropdown mixes jQuery/Fomantic UI/Vue together,
it's very diffcult to maintain and causes unfixable a11y problems. It
also causes problems like #19851 #21314 #21952

This PR is the first step for the refactoring, move `data-` attributes
to JS object and use Vue data as much as possible.

The old selector `'.choose.reference .dropdown'` was also wrong, it hits
`<div class="choose reference"><svg class="dropdown icon">` and would
cause undefined behaviors.

I have done some quick tests and it works. After this PR gets merged, I
will move the code into a Vue SFC in next PR.



![image](https://user-images.githubusercontent.com/2114189/224099638-378a8a86-0865-47d1-bcba-f972506374c7.png)


![image](https://user-images.githubusercontent.com/2114189/224099690-70276cf5-b1e4-404a-b0c6-582448abf40e.png)

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2023-03-11 12:47:09 +02:00