mirror of
1
Fork 0
Commit Graph

169 Commits

Author SHA1 Message Date
silverwind 79a4c80f8d
Rework button coloring, add focus and active colors (#24507)
We were missing overrides for `:focus` and `:active` styles which I've
added here along with two new color variants `dark-1` and `dark-2` for
them. Fomantic UI has 4 different colors but I think 3 are sufficient. I
also changed it on arc-green so button goes darker when pressed.

<img width="129" alt="Screenshot 2023-05-04 at 01 21 43"
src="https://user-images.githubusercontent.com/115237/236072060-7389276a-275b-4d3e-aa52-20b37c6e6d92.png">
<img width="130" alt="Screenshot 2023-05-04 at 01 17 59"
src="https://user-images.githubusercontent.com/115237/236071818-0e46414a-33db-4bb2-a3bd-35b514a8a2d0.png">
<img width="129" alt="Screenshot 2023-05-04 at 01 18 07"
src="https://user-images.githubusercontent.com/115237/236071819-562b1e38-541f-432b-b3b6-48e6d7594d00.png">
<img width="131" alt="Screenshot 2023-05-04 at 01 18 13"
src="https://user-images.githubusercontent.com/115237/236071820-89b7dba9-ce6c-48e5-a075-9053063e6ad3.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 30"
src="https://user-images.githubusercontent.com/115237/236071823-b6fe2df4-b3f0-4dc8-97a8-f90ba6d19bec.png">
<img width="133" alt="Screenshot 2023-05-04 at 01 18 40"
src="https://user-images.githubusercontent.com/115237/236071824-b02ce61a-2367-4c29-8a25-45f231f5e5ee.png">

One misc change includes some fixes to editor and slightly darker
selection.

<img width="1245" alt="Screenshot 2023-05-28 at 19 16 19"
src="https://github.com/go-gitea/gitea/assets/115237/1ea4a4b6-26ba-45af-9cbc-5b8c476c2338">
2023-05-29 12:45:22 +00:00
silverwind e4e98979ff
Add PDF rendering via PDFObject (#24086)
Use [PDFObject](https://pdfobject.com/) to embed PDFs, replacing our
outdated PDF.js copy we vendor (the last non-webpack vendoring).

[Commit
1](673e0263da)
is the PDFObject integration
[Commit
2](9336f5769d)
is the removal of PDF.js

<img width="1251" alt="Screenshot 2023-05-27 at 09 57 52"
src="https://github.com/go-gitea/gitea/assets/115237/169ce50c-bd1d-4bb0-86e5-1710bd0400a9">
<img width="1257" alt="Screenshot 2023-05-27 at 10 12 50"
src="https://github.com/go-gitea/gitea/assets/115237/318f7ee9-fb11-4093-83e7-17475aa70629">


Fallback for unsupporting browsers (most mobile ones, except Firefox
Mobile):

<img width="358" alt="Screenshot 2023-05-27 at 09 43 34"
src="https://github.com/go-gitea/gitea/assets/115237/8c12d7ba-57d6-4228-89a0-5fef9fad0cbb">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-29 12:10:00 +00:00
silverwind a70d853d06
Consolidate the two review boxes into one (#24738)
View diff:
https://github.com/go-gitea/gitea/pull/24738/files?diff=unified&w=1

Improve layout and functionality in review area:

<img width="439" alt="Screenshot 2023-05-15 at 20 10 01"
src="https://github.com/go-gitea/gitea/assets/115237/be10452b-5829-4927-8801-7b26a57b3dbd">

Remove the "Reviewers" timeline box that appears before the merge box.
it's a duplicate of the top-right review area and all functionality of
it has been moved to the other box:

<img width="868" alt="Screenshot 2023-05-15 at 19 39 31"
src="https://github.com/go-gitea/gitea/assets/115237/35489445-e54b-40d3-b3cf-38d029478f96">

Increase timeline item vertical padding from 12px to 16px:

<img width="449" alt="Screenshot 2023-05-15 at 19 43 50"
src="https://github.com/go-gitea/gitea/assets/115237/919c4f9d-a485-4f51-b08c-2c0fc714a413">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-29 12:44:03 +02:00
silverwind 245f2c08db
Repo list improvements, fix bold helper classes (#24935)
- Fix bold helper classes that were broken because of CSS syntax error
- Refined the repo list CSS and layout
- Removing bold
- Downsize the mirror icon to fit
- Fix icon positions
- Adapted the org list to match
- Center the '+' icon and mute it

<img width="385" alt="Screenshot 2023-05-25 at 18 38 31"
src="https://github.com/go-gitea/gitea/assets/115237/ac8d6efb-5751-4845-a4ab-db1ddaf36ec3">
<img width="384" alt="Screenshot 2023-05-25 at 18 30 29"
src="https://github.com/go-gitea/gitea/assets/115237/bbd39ae7-da9d-4c6f-bfe3-42f28b7a74c3">
2023-05-29 16:55:23 +08:00
silverwind faf8557b4c
Add dark mode to API Docs (#24971)
Add a dark mode to Swagger UI via CSS `invert`. No toggle or anything,
but I think it's better than nothing. Users can toggle via their OS.

Also includes a few misc CSS cleanups on the page.

<img width="1264" alt="Screenshot 2023-05-28 at 20 25 06"
src="https://github.com/go-gitea/gitea/assets/115237/de761b85-ca0c-4220-bee4-73798a4360a0">
<img width="1260" alt="Screenshot 2023-05-28 at 20 02 54"
src="https://github.com/go-gitea/gitea/assets/115237/29188ed2-c167-47f5-bf28-46193d1da22c">
2023-05-28 21:37:34 +00:00
silverwind a2e5c3c963
Replace Fomantic reset module with our own (#24948)
Replace the `reset` module with a modern version based on
[modern-normalize](https://github.com/sindresorhus/modern-normalize).
The only things I removed from that module are the `font-family` rules
we don't need. Otherwise, it's similar to Fomantic's reset, but with the
legacy IE stuff removed.

I documented every change done to the module.

Also this introduces a new `--tab-size` variable but it has no real
effect on code yet.
2023-05-28 18:04:35 +00:00
silverwind 595e8abd68
Improve and fix bugs surrounding reactions (#24760)
- Slightly decrease size of reaction buttons
- Remove tooltip inside menu, it's obvious by the picture alone
- Fix top menu triangle
- Use `display: grid` to align icons in menu
- Use regular tooltip for reaction users
- Fix bug that deleted the reaction bar on clicking already reacted
reaction in dropdown

<img width="490" alt="Screenshot 2023-05-17 at 00 03 42"
src="https://github.com/go-gitea/gitea/assets/115237/61588b37-facb-4829-b75b-e1cb5dda8ca4">

<img width="67" alt="Screenshot 2023-05-17 at 00 11 14"
src="https://github.com/go-gitea/gitea/assets/115237/29605589-3b5f-40c6-8ad4-09923094bb8e">

<img width="211" alt="Screenshot 2023-05-17 at 00 29 30"
src="https://github.com/go-gitea/gitea/assets/115237/7d2725da-6a3d-4e42-a351-53647f79f762">
<img width="210" alt="Screenshot 2023-05-17 at 00 29 54"
src="https://github.com/go-gitea/gitea/assets/115237/b50f8364-033c-4445-ba25-61a814bb2d92">


<img width="892" alt="Screenshot 2023-05-17 at 00 12 20"
src="https://github.com/go-gitea/gitea/assets/115237/30a46424-406a-46e5-b4de-47172eb8679d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-28 01:34:18 +00:00
JakobDev aaa1094663
Add the ability to pin Issues (#24406)
This adds the ability to pin important Issues and Pull Requests. You can
also move pinned Issues around to change their Position. Resolves #2175.

## Screenshots

![grafik](https://user-images.githubusercontent.com/15185051/235123207-0aa39869-bb48-45c3-abe2-ba1e836046ec.png)

![grafik](https://user-images.githubusercontent.com/15185051/235123297-152a16ea-a857-451d-9a42-61f2cd54dd75.png)

![grafik](https://user-images.githubusercontent.com/15185051/235640782-cbfe25ec-6254-479a-a3de-133e585d7a2d.png)

The Design was mostly copied from the Projects Board.

## Implementation
This uses a new `pin_order` Column in the `issue` table. If the value is
set to 0, the Issue is not pinned. If it's set to a bigger value, the
value is the Position. 1 means it's the first pinned Issue, 2 means it's
the second one etc. This is dived into Issues and Pull requests for each
Repo.

## TODO
- [x] You can currently pin as many Issues as you want. Maybe we should
add a Limit, which is configurable. GitHub uses 3, but I prefer 6, as
this is better for bigger Projects, but I'm open for suggestions.
- [x] Pin and Unpin events need to be added to the Issue history.
- [x] Tests
- [x] Migration

**The feature itself is currently fully working, so tester who may find
weird edge cases are very welcome!**

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-25 15:17:19 +02:00
silverwind 27c221aa5d
Rework notifications list (#24812)
- Replace `<table>` with flexbox
- Add issue modification time and issue number
- Remove big title
- Replace tabs with menu items
- Add clicked item deletion on back button cache restoration

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-25 02:31:26 +00:00
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 64e0672e3b
Fix `@font-face` overrides (#24855)
Fixes: https://github.com/go-gitea/gitea/issues/24850

Not sure how to do it for asian fonts only, so let's revert to previous
value for now.

### Before
<img width="414" alt="Screenshot 2023-05-22 at 10 34 10"
src="https://github.com/go-gitea/gitea/assets/115237/749f1556-a5cf-48fe-8b10-8dc447221657">

### After
<img width="416" alt="Screenshot 2023-05-22 at 10 34 04"
src="https://github.com/go-gitea/gitea/assets/115237/a0a315bb-d95f-4d03-863e-0534f665ca71">
2023-05-24 01:48:51 +00:00
wxiaoguang bb9e20e434
Fix document and improve comment (#24844)
* Fix broken doc link:
https://github.com/go-gitea/gitea/actions/runs/5041309438/jobs/9040887385
* Improve comments about how font weight works:
https://github.com/go-gitea/gitea/pull/24827#pullrequestreview-1435584800

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-22 08:47:33 +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
Brecht Van Lommel 268d121f4b
Fix video width overflow in markdown, and other changes to match img (#24834)
This change makes the CSS for `<video>` in markup match that of `<img>`,
and also allows additional attributes to be used. This way the width,
padding, alignment should work equally well for both.
2023-05-21 21:19:37 +00:00
delvh e95b42e187
Improve accessibility when (re-)viewing files (#24817)
Visually, nothing should have changed.
Changes include
- Convert most `<a [no href]>` to `<button>` when (re-)viewing files:
- `<a [no href]>` are, by HTML definition, not a link and hence cannot
be focused
- `<a class="ui button">` can now be clicked (again?) using
<kbd>Enter</kbd>
- Previously, the installed keypress handler on `.ui.button` elements
disabled it for links somehow
- The `(un)escape file`, the `expand section` and the `expand/collapse
file` buttons can now be focused (and subsequently clicked using only
the keyboard)
- You can now press <kbd>Space</kbd> on a focused `View file` checkbox
to mark the file as viewed.
- previously, this was impossible as this checkbox listened on the wrong
event listener

The `add code comment` button has been left inaccessible for now as it
requires quite a bit of extra logic so that it is unhidden when it is
focused (you can otherwise focus it without seeing it as you are not
hovering on the corresponding line).

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-21 20:47:41 +00:00
silverwind 32d9c47ec7
Add RTL rendering support to Markdown (#24816)
Support RTL content in Markdown:


![image](https://github.com/go-gitea/gitea/assets/115237/dedb1b0c-2f05-40dc-931a-0d9dc81f7c97)

Example document:
https://try.gitea.io/silverwind/symlink-test/src/branch/master/bidi-text.md
Same on GitHub:
https://github.com/silverwind/symlink-test/blob/master/bidi-text.md

`dir=auto` enables a browser heuristic that sets the text direction
automatically. It is the only way to get automatic text direction.

Ref: https://codeberg.org/Codeberg/Community/issues/1021

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-20 23:02:52 +02:00
silverwind a103b79f60
Rework label colors (#24790)
Introduce `--color-label-fg`, `--color-label-bg` and
`--color-label-hover-bg`, decoupling the label styles from other color
variables. I've set the colors so that non-interactive labels like on
tabs are dark-on-light on light theme, which imho looks better than
previous light-on-dark.

In the screenshot below, the leftmost label has hover, the second one
has active.

<img width="786" alt="Screenshot 2023-05-18 at 12 48 26"
src="https://github.com/go-gitea/gitea/assets/115237/d989bb68-504a-4406-b5f6-419ed9609f90">
<img width="789" alt="Screenshot 2023-05-18 at 13 04 07"
src="https://github.com/go-gitea/gitea/assets/115237/689a281a-a2b7-45e8-a5ee-dafb7a35e105">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-19 16:30:24 +00:00
HesterG acde12a8a2
Fix max width and margin of comment box on conversation page (#24809)
Fix regression from #23937

The changes should only be limited to `.conversation-holder
.comment-code-cloud`, otherwise it will affect the `.comment-code-cloud`
in conversation tab

Before:

<img width="962" alt="Screen Shot 2023-05-19 at 18 22 25"
src="https://github.com/go-gitea/gitea/assets/17645053/0db01d04-2581-48f9-b46c-497836b1f12b">

After:

<img width="997" alt="Screen Shot 2023-05-19 at 18 35 01"
src="https://github.com/go-gitea/gitea/assets/17645053/5d14b67b-88c1-46c6-b859-fd41752b3ebb">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-19 16:02:34 +00:00
silverwind 1e1e8b5d43
Fix OAuth loading state (#24788)
Fix regression from https://github.com/go-gitea/gitea/pull/24740 where
the loading state was not showing because the `oauth-login-image` class
was removed. Replaced the Fomantic loader with a pure CSS loader and
cleaned up the HTML.

Diff:
https://github.com/go-gitea/gitea/pull/24788/files?diff=unified&w=1


![](https://github.com/go-gitea/gitea/assets/115237/b5b4137f-9821-464b-9777-858fe85d9e03)

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-18 11:50:11 +00:00
silverwind 6a3a54cf48
Remove background on user dashboard filter bar (#24779)
Was only an issue on arc-green:

### Before
<img width="313" alt="Screenshot 2023-05-17 at 23 33 15"
src="https://github.com/go-gitea/gitea/assets/115237/0f6916c6-c6c3-43c8-84cc-24b0a9800a43">

### After
<img width="310" alt="Screenshot 2023-05-17 at 23 32 52"
src="https://github.com/go-gitea/gitea/assets/115237/207d3d7f-ce6f-4170-b426-e743be760185">

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-18 09:27:29 +02:00
Zettat123 e7c2231dee
Support for status check pattern (#24633)
This PR is to allow users to specify status checks by patterns. Users
can enter patterns in the "Status Check Pattern" `textarea` to match
status checks and each line specifies a pattern. If "Status Check" is
enabled, patterns cannot be empty and user must enter at least one
pattern.
Users will no longer be able to choose status checks from the table. But
a __*`Matched`*__ mark will be added to the matched checks to help users
enter patterns.

Benefits:
- Even if no status checks have been completed, users can specify
necessary status checks in advance.
- More flexible. Users can specify a series of status checks by one
pattern.

Before:

![image](https://github.com/go-gitea/gitea/assets/15528715/635738ad-580c-49cd-941d-c721e5b99be4)

After:

![image](https://github.com/go-gitea/gitea/assets/15528715/16aa7b1b-abf1-4170-9bfa-ae6fc9803a82)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-17 16:11:13 +08:00
silverwind b926f96da7
Reorganize CSS files (#24739)
Reorganize various CSS files for clarity, group together by subdirectory
in `index.css`. This reorders some of the rules, but I don't think it
should introduce any issues because of that.
2023-05-16 00:13:30 -04:00
silverwind a7e18b9fb7
Rework Oauth login buttons, swap github logo to monocolor (#24740)
Diff without whitespace:
https://github.com/go-gitea/gitea/pull/24740/files?diff=unified&w=1

- Use SVGs for GitHub and GitLab oauth providers
- Replace section wrapping with a divider
- Rework icon rendering, increase size from 32px to 40px

Before:

<img width="853" alt="Screenshot 2023-05-15 at 21 54 23"
src="https://github.com/go-gitea/gitea/assets/115237/6ab5cfb4-46ff-469a-bd1f-06780d4a6a0b">

After (more providers):

<img width="849" alt="Screenshot 2023-05-15 at 21 51 21"
src="https://github.com/go-gitea/gitea/assets/115237/fa84f92f-98e0-4aed-9357-5d62ddd98195">

<img width="856" alt="Screenshot 2023-05-15 at 21 56 45"
src="https://github.com/go-gitea/gitea/assets/115237/d3edd7ed-dadd-4302-aca7-08f20adc220e">


Ref: https://codeberg.org/Codeberg/Community/issues/1023

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-15 22:46:51 +00:00
silverwind b92c142c97
Clean up various avatar dimensions (#24701)
Clean up a few cases where avatar dimensions were overwritten via CSS,
which were no longer needed or were possible to set via HTML width.

Also included are two small fixes:

- Fix one more case of incorrect avatar offset on review timeline
- Vertically center avatars in review sidebar

There is more to be done here, but some of the work depends on Fomantic
`comment` module removal, or in the case of org member lists, a refactor
of the `avatarlink` template to accept a size.

<img width="371" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/9c5902fb-2b89-4a7d-a152-60e74c3b2c56">
<img width="306" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/c8d92e2a-91c9-4f4a-a7de-6ae1a6bc0479">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-14 14:15:59 +00:00
silverwind 11552a779f
Remove Fomantic comment module (#24703)
Remove the comment module and put the styles that we still need into a
separate file, eliminating about 2/3 of the CSS in line count.
2023-05-14 04:21:24 +00:00
wxiaoguang 8a8b753647
Improve button-ghost, remove tertiary button (#24692)
<img width="474" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/7fd231f9-71c3-4769-ba96-37a5b77cf224">

<img width="557" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/c9945f61-39b4-4711-aea8-c34ef1d714c5">

<img width="641" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/691be76e-74fd-420d-9b9e-ba1f3b08e0b4">

And a page to test buttons:

<details>

<img width="451" alt="image"
src="https://github.com/go-gitea/gitea/assets/2114189/5f61da24-2f36-40ad-a9bb-2205da5f5f04">

</details>

---------

Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
2023-05-13 20:38:22 +00:00
wxiaoguang 82224c54e0
Improve avatar uploading / resizing / compressing, remove Fomantic card module (#24653)
Fixes: #8972
Fixes: #24263

And I think it also (partially) fix #24263 (no need to convert) ,
because users could upload any supported image format if it isn't larger
than AVATAR_MAX_ORIGIN_SIZE


The main idea: 

* if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE,
use the origin
* if the resized size is larger than the origin, use the origin

Screenshots:

JPG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/70e98bb0-ecb9-4c4e-a89f-4a37d4e37f8e)

</details>

APNG:

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/9055135b-5e2d-4152-bd72-596fcb7c6671)


![image](https://github.com/go-gitea/gitea/assets/2114189/50364caf-f7f6-4241-a289-e485fe4cd582)

</details>

WebP (animated)

<details>


![image](https://github.com/go-gitea/gitea/assets/2114189/f642eb85-498a-49a5-86bf-0a7b04089ae0)

</details>

The only exception: if a WebP image is larger than MaxOriginSize and it
is animated, then current `webp` package can't decode it, so only in
this case it isn't supported. IMO no need to support such case: why a
user would upload a 1MB animated webp as avatar? crazy .....

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-05-13 20:59:11 +02:00
wxiaoguang ec8ea58dbe
Rename ".button-link" to ".button-ghost" (#24670)
Mainstream frameworks:

* https://getbootstrap.com/docs/5.0/components/buttons/
* https://primer.style/css/components/buttons#link-button
* https://nextui.org/docs/components/button#light
* https://coreui.io/react/docs/components/button/
* https://design-system.hpe.design/components/button
* https://chakra-ui.com/docs/components/button/usage#button-variants
* https://mui.com/material-ui/react-button/

All (at least most?) of them make "link" button have "underline" when
hovering.

So, a "link" is a "link", when it's hovered, it should have the
underline by default. To be strict, Gitea's "button-link" is not
link-style, so it needs a better name.

Actually, for the "plain" button, there are some different approaches:

* Some frameworks just make "default" button as no style (not feasible
in Gitea/Fomantic UI)
* Primer uses "btn-invisible", which is not a proper word
* NextUI uses "light", which is not a proper word, either ...
* CoreUI / ChakraUI uses "ghost", I think this name is acceptable.


Welcome to suggest better name for such button.

Or, we just call it ".button-plain" or ".button-simple", in fact I
prefer such simple and clear name.
2023-05-12 14:58:44 +00:00
yp05327 b5c26fa825
Add markdown preview to Submit Review Textarea (#24672)
Before:

![image](https://github.com/go-gitea/gitea/assets/18380374/2909352c-b2ab-4d77-b410-9f08c2f5a154)

After:

![image](https://github.com/go-gitea/gitea/assets/18380374/9448fa75-e29b-4f95-a30f-03c73c083a83)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-12 10:53:41 +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
silverwind f7ede92f82
Notification list enhancements, fix striped tables on dark theme (#24639)
- Make code block rendering via backticks work
- Remove link color unless hovered
- Remove table stripes and fix stripes rendering on dark theme for other
tables
- Introduce new `button-link` class discussed previously for buttons
that look and act like links and apply it to the two right-side buttons
- Reduce box padding by 8px on each side
- Fix "Mark all read" button margin-right
- brighten `--color-markup-code-block` on arc-green

### Before
<img width="1216" alt="Screenshot 2023-05-10 at 20 00 30"
src="https://github.com/go-gitea/gitea/assets/115237/66da9ec2-dd09-4ef0-8f1d-1822a18b6b43">
<img width="1211" alt="Screenshot 2023-05-10 at 20 00 48"
src="https://github.com/go-gitea/gitea/assets/115237/f48e30a2-9a00-4723-93aa-79b97ca0ba0c">

### After
<img width="1222" alt="Screenshot 2023-05-10 at 20 09 59"
src="https://github.com/go-gitea/gitea/assets/115237/c956e0d0-b3d9-42a4-a3ed-f0431c22bf3f">
<img width="1218" alt="Screenshot 2023-05-10 at 20 05 34"
src="https://github.com/go-gitea/gitea/assets/115237/f72c1628-3961-4c28-9263-07cdf7531316">
2023-05-10 21:59:58 +00:00
silverwind ae0fa64ef6
Review fixes and enhancements (#24526)
- Fix regression with icons wrapping from
https://github.com/go-gitea/gitea/pull/24459
- Fix box misalignment on small screen
- Fix avatar misalignment on review comment
- Fix incorrect underline hover effect on review icons
- Move status icon to left side in review box
- Enhance review icon colors, add helper function for it
- Add missing inline avatars in review comments
- Tweak icon sizes because some octicons have inconsistent sizing

### Before
<img width="655" alt="Screenshot 2023-05-04 at 20 50 28"
src="https://user-images.githubusercontent.com/115237/236301230-92325507-6e03-47ac-bfb4-c9ddde310571.png">
<img width="260" alt="Screenshot 2023-05-04 at 20 50 42"
src="https://user-images.githubusercontent.com/115237/236301236-0dfa50e7-b8fc-4179-ae68-d872bc90f1f3.png">

### After
<img width="498" alt="Screenshot 2023-05-04 at 20 55 08"
src="https://user-images.githubusercontent.com/115237/236301810-23862c2c-c0a9-43a4-a3eb-ee611c14a7f4.png">
<img width="219" alt="Screenshot 2023-05-04 at 20 55 16"
src="https://user-images.githubusercontent.com/115237/236301817-d0de02ea-6ab5-43e1-9183-6b3848b72995.png">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-10 09:16:44 +00:00
Nicholas Pease c090f87a8d
Add Gitea Profile Readmes (#23260)
Implements displaying a README.md file present in a users ```.profile```
repository on the users profile page. If no such repository/file is
present, the user's profile page remains unchanged.

Example of user with ```.profile/README.md```

![image](https://user-images.githubusercontent.com/34464552/222757202-5d53ac62-60d9-432f-b9e3-2537ffa91041.png)

Example of user without ```.profile/README.md```

![image](https://user-images.githubusercontent.com/34464552/222759972-576e058b-acd4-47ac-be33-38a7cb58cc81.png)

This pull request closes the feature request in #12233 

Special thanks to @techknowlogick for the help in the Gitea discord!

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Yarden Shoham <hrsi88@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: yp05327 <576951401@qq.com>
Co-authored-by: Yarden Shoham <git@yardenshoham.com>
2023-05-09 05:57:24 +00:00
yp05327 2ee72d011f
Add permission check for moving issue action in project view page (#24589)
Fix #22954
Only users who have write permission can move issues in the project view page.
2023-05-09 00:50:16 -04: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
wxiaoguang 48e3e38ee0
Clean up polluted styles and remove dead CSS code (#24497)
Follow #24393


The funny history:

* At the beginning, `.ui.message` was polluted by `text-align: center`
* Then people do `<div class="ui ... message text left">`
* But `.ui.left` is polluted by `float: left`
* Then people do `#xxx .ui.message { width: 100% !important;}`

The code just becomes more and more hacky.

After removing the pollution,  everything becomes clear and straight.


And, this PR also does:

1. Remove the `package.css`, its styles could be provided by `top
aligned`
2. Remove `#avatar-arrow`, dead code



Screenshot:


![image](https://user-images.githubusercontent.com/2114189/235862130-a9eb5d8f-7d01-457c-99f7-21d0abc3075e.png)


![image](https://user-images.githubusercontent.com/2114189/235862222-139709a7-95c2-4f89-a40f-100b2d76d9bb.png)

Co-authored-by: Giteabot <teabot@gitea.io>
2023-05-03 14:32:10 -04:00
silverwind 3ae997614a
Enhance stylelint rule config, remove dead CSS (#24472)
Make this stylelint rule match on more properties.

The dead CSS relates to the navbar, which currently has classes:

```
ui top secondary stackable main menu following bar light
```

Which means `.following.bar .top.menu` can never match, so remove this
dead CSS as well as inactive `z-index` and `left` on it.

Commits table striping becomes more visible on dark theme, but I don't
think it's worth introducing a new color until
https://github.com/go-gitea/gitea/pull/24423 is ready, which would have
to remove it again:

<img width="668" alt="Screenshot 2023-05-01 at 18 41 49"
src="https://user-images.githubusercontent.com/115237/235489873-6b272899-1d78-443a-872c-ee7731c269f9.png">
<img width="680" alt="Screenshot 2023-05-01 at 18 41 41"
src="https://user-images.githubusercontent.com/115237/235489878-1b9468af-c74f-48a6-a469-9eba57cfcb4d.png">
2023-05-02 23:15:52 -04:00
silverwind fa506cd571
Remove `font-awesome` and fomantic `icon` module (#24471)
Fixes https://github.com/go-gitea/gitea/issues/10410.
This PR removes around 120kB of CSS.
2023-05-01 13:25:54 -04:00
wxiaoguang 3e7101dd64
Improve "new-menu" (#24465)
I am not sure what "new-menu" means, but I think we need to fix these
problems:

1. it shouldn't have "stackable", which makes the items stacked when
width is small. the `new-menu` already has `overflow: auto`
2. `justify-content: center` doesn't work with `overflow: auto` (for
small width), so use `margin: auto`
*
https://bhch.github.io/posts/2021/04/centring-flex-items-and-allowing-overflow-scroll/
3. `runner-new-menu` is dead code (copying & pasting ?)
2023-05-01 12:08:37 -04:00
silverwind 5adf32b48e
Remove fomantic breadcrumb module (#24463)
### File path before/after

<img width="522" alt="Screenshot 2023-05-01 at 13 23 33"
src="https://user-images.githubusercontent.com/115237/235445636-57776038-c98e-4cab-8abe-045138a76958.png">
<img width="522" alt="Screenshot 2023-05-01 at 13 24 08"
src="https://user-images.githubusercontent.com/115237/235445638-70bef62a-1b70-41f8-ba51-728db4d54402.png">


### File edit before/after

<img width="499" alt="Screenshot 2023-05-01 at 13 24 46"
src="https://user-images.githubusercontent.com/115237/235445676-7b3cc23e-289b-40a6-8d4f-0d7fb2efb55e.png">
<img width="497" alt="Screenshot 2023-05-01 at 13 24 52"
src="https://user-images.githubusercontent.com/115237/235445677-db9f3974-8456-46de-a32b-9198110c0540.png">

### Cherry-pick before/after

<img width="590" alt="Screenshot 2023-05-01 at 13 25 30"
src="https://user-images.githubusercontent.com/115237/235445717-99445024-1bb2-46d4-9bd8-8086bad57d34.png">
<img width="582" alt="Screenshot 2023-05-01 at 13 25 37"
src="https://user-images.githubusercontent.com/115237/235445720-9c1dc497-eb23-4e10-a727-27f4d6df69e6.png">
2023-05-01 11:40:02 -04:00
wxiaoguang ce16ff6219
Remove unnecessary g-menu-stackable-scrollable (#24462)
Fix #24460

That's a mistake but ..... no idea why I wrote so ... remove it.
2023-05-01 12:51:14 +02:00
silverwind 1bd2772235
Replace remaining fontawesome dropdown icons with SVG (#24455)
- Replace leftover dropdown triangles with SVG
- Replace remove icon with SVG and add styling for it:

<img width="817" alt="Screenshot 2023-05-01 at 00 40 05"
src="https://user-images.githubusercontent.com/115237/235379271-4674d4f7-b11e-4d6d-90f9-1478325443ca.png">
<img width="816" alt="Screenshot 2023-05-01 at 00 46 56"
src="https://user-images.githubusercontent.com/115237/235379451-b515afb3-9773-4f6f-a259-e7048235bcba.png">
2023-05-01 05:35:02 -04:00
silverwind 6981885303
Add `ui-monospace` and `SF Mono` to `--fonts-monospace` (#24442)
- Add `ui-monospace` to support Safari 13.4+.
- Add `SF Mono` variant to support the font on non-mac.
- Quote fonts as per [W3C
recommendation](https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family).

> it is recommended to quote font family names that contain white space,
digits, or punctuation characters other than hyphens

Fixes: https://github.com/go-gitea/gitea/issues/22125
2023-04-30 14:58:32 -04:00
silverwind f7cf7e6848
Fix config list overflow and layout (#24312)
Fixes: https://github.com/go-gitea/gitea/issues/24299

<img width="531" alt="Screenshot 2023-04-24 at 21 05 40"
src="https://user-images.githubusercontent.com/115237/234091905-9db42697-87b3-40a0-bd18-9e910ad8a2ae.png">
2023-04-30 13:32:07 -04:00
wxiaoguang 14c142b0bc
Improve issue list filter (#24425)
Partial regression of #24393, not only regression, but broken for long
time, 24393 didn't really improve it but used wrong `overflow: scroll`.

Actually, that "ui secondary filter menu labels" shouldn't be set as
scrollable (I missed that at that time), the problem is: if a "ui menu"
has "dropdown" items, then it should not be scrollable. Otherwise the
dropdown menu can't be shown correctly.

And there are more problems:

* The "issue-filters" shouldn't be used anywhere else (copying&pasting
problem again ....)
* There is also an "issue-actions" container, it should also be fixed.
* There are similar problems on the milestone page.
* The old comment in code: "grid column" doesn't work well.

The major changes of this PR are: use "flex: 1" instead of "ui grid
column".

After this PR, not 100% perfect but much better than before.
2023-04-30 11:51:20 -04:00
sillyguodong e8173c2c33
Move `Rename branch` from repo settings page to the page of branches list (#24380)
Co-Author: @wxiaoguang

It is more convenient that user just need to enter a new branch name after he selects the branch which he want to rename.
So this PR move the function of renaming branch to the page of branches list.

This PR also restyle the button of `new branch`, `download`, `delete`....

https://user-images.githubusercontent.com/33891828/235277997-413060bb-759f-430a-b5c4-df5e40ffcd28.mov

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-30 23:08:51 +08:00
silverwind 8f4dafcd4e
Rework header bar on issue, pull requests and milestone (#24420)
- Make search bar dynamic full width via flexbox
- Make all buttons `small` so font size is the same for all elements in
the header
- Remove primary color from search field, add SVG icon like on Code tab
- Fix button vertical padding being enlarged by SVG icons

[View diff without
whitespace](https://github.com/go-gitea/gitea/pull/24420/files?diff=unified&w=1)

<img width="1226" alt="Screenshot 2023-04-29 at 11 58 53"
src="https://user-images.githubusercontent.com/115237/235296851-74848267-664f-4c1f-b94c-a1b94196ff75.png">
<img width="1219" alt="Screenshot 2023-04-29 at 11 59 39"
src="https://user-images.githubusercontent.com/115237/235296852-bcfde5ed-8658-43c2-b7e5-3ad84611e76f.png">

Mobile:
<img width="437" alt="Screenshot 2023-04-29 at 11 59 52"
src="https://user-images.githubusercontent.com/115237/235296860-99263373-7b27-4540-868c-a93e70f281ca.png">
<img width="433" alt="Screenshot 2023-04-29 at 12 00 00"
src="https://user-images.githubusercontent.com/115237/235296862-6cf64317-a864-405a-a00f-b5ab620349f5.png">
2023-04-29 23:33:25 -04:00
wxiaoguang 5a5ab8ef5a
Start cleaning the messy ".ui.left / .ui.right", improve label list page, fix stackable menu (#24393)
Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right".

Fomantic UI doesn't work this way, it just conflicts with many Fomantic
definitions.

This PR starts the cleaning work of such techinical debts.

And, the "label list" page has been quite messy for long time, for
example, why "li" appears in "div" ......

And fix #24296

<details>


![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png)


![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png)


![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png)


![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png)


![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png)

</details>
2023-04-29 07:35:59 -04:00
Hester Gong 72e956b79a
Improve protected branch setting page (#24379)
Main changes:

1. Change html structure of protected branch page, use [`grouped
fields`](https://fomantic-ui.com/collections/form.html#grouped-fields)
instead of `fields` for better margin, and wrap `grouped fields` around
related `field`s, remove unnecessary `<div id="protection_box"
class="fields">` outer div

2. Changed some order of field to make them more categorized, used `ui
dividing header` for categorization and fine tune css.

Before:

<img width="1907" alt="Screen Shot 2023-04-27 at 14 56 19"
src="https://user-images.githubusercontent.com/17645053/234783731-bce8a7ce-dfc9-4d47-a3a8-b962ebea9467.png">
<img width="1849" alt="Screen Shot 2023-04-27 at 14 56 30"
src="https://user-images.githubusercontent.com/17645053/234783740-c47d314e-5e2d-4854-98fd-c88f85ef3584.png">
<img width="1872" alt="Screen Shot 2023-04-27 at 14 56 36"
src="https://user-images.githubusercontent.com/17645053/234783745-18e35a75-07e8-451d-b001-f9bcf16fcab5.png">

After:


https://user-images.githubusercontent.com/17645053/235114568-da010aad-7654-4410-ab8c-5d0fce7edadb.mov



3. Changed "Enable Merge Whitelist" to radio checkbox, and added "Enable
Merge" radio checkbox, which are exclusive

Before:

<img width="926" alt="Screen Shot 2023-04-28 at 13 08 29"
src="https://user-images.githubusercontent.com/17645053/235059233-75790f7a-e5ea-4e1c-82c6-509fef8b84b3.png">

After:

<img width="942" alt="Screen Shot 2023-04-28 at 13 09 28"
src="https://user-images.githubusercontent.com/17645053/235059367-852d1f61-8407-4126-8c79-315b9c1ffada.png">


4. Add a link to set default branch on branch list page (with reference
to github)


https://user-images.githubusercontent.com/17645053/234787404-61c1c7b6-aabf-429f-a109-5b690e4e0b5a.mov

5. Removed dead codes.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-29 06:44:52 -04:00
wxiaoguang 83022013c8
Fix layouts of admin table / adapt repo / email test (#24370)
Ref:
https://github.com/go-gitea/gitea/pull/24315#pullrequestreview-1403034993

And fix the incorrect layout for "dasbboard", the "form" shouldn't
follow `<h4 class="ui top attached header">`, so move it to inner.

Diff with ignoring spaces:
https://github.com/go-gitea/gitea/pull/24370/files?diff=unified&w=1

A known bug: the adapt/delete button doesn't work due to a historical
messy logic, will fix it in next PR (#24374)

![image](https://user-images.githubusercontent.com/2114189/234754656-d160b098-b8d4-4783-962a-27d5c764863c.png)

![image](https://user-images.githubusercontent.com/2114189/234762327-3e77e2e4-a156-4498-8a8b-092e14cf9204.png)

![image](https://user-images.githubusercontent.com/2114189/234767811-74b7272c-e40c-4850-8e3c-499e3b53b827.png)

![image](https://user-images.githubusercontent.com/2114189/234761247-e6aad889-dcad-443c-948f-2d44df68725b.png)
2023-04-28 09:48:41 +08:00
Hester Gong 63a401ac40
Move secrets and runners settings to actions settings (#24200)
This PR moves the secrets and runners settings to actions settings on
all settings(repo,org,user,admin) levels.

After this PR, if
[ENABLED](5e7543fcf4/custom/conf/app.example.ini (L2604))
inside `app.ini` under `[actions]` is set to `false`, the "Actions" tab
(including runners management and secrets management) will not be shown.

After, the settings under actions settings for each level:

1. Admin Level
"Runners Management"
<img width="1437" alt="Screen Shot 2023-04-26 at 14 34 20"
src="https://user-images.githubusercontent.com/17645053/234489731-15822d21-38e1-4560-8bbe-69f122376abc.png">

2. User Level
"Secrets Management"
<img width="1427" alt="Screen Shot 2023-04-26 at 14 34 30"
src="https://user-images.githubusercontent.com/17645053/234489795-68c9c0cb-24f8-4f09-95c6-458ab914c313.png">

3. Repo and Organization Levels
"Runners Management" and "Secrets Management" 
   Org:
<img width="1437" alt="Screen Shot 2023-04-26 at 14 35 07"
src="https://user-images.githubusercontent.com/17645053/234489996-f3af5ebb-d354-46ca-9087-a0b586845281.png">

<img width="1433" alt="Screen Shot 2023-04-26 at 14 35 14"
src="https://user-images.githubusercontent.com/17645053/234490004-3abf8fed-81fd-4ce2-837a-935dade1793d.png">

    Repo:
<img width="1419" alt="Screen Shot 2023-04-26 at 14 34 50"
src="https://user-images.githubusercontent.com/17645053/234489904-80c11038-4b58-462c-9d0b-8b7cf70bc2b3.png">
    
<img width="1430" alt="Screen Shot 2023-04-26 at 14 34 57"
src="https://user-images.githubusercontent.com/17645053/234489918-4e8d1fe2-9bcd-4d8a-96c1-238a8088d92e.png">

It also finished these tasks :

- [x] rename routers function "runners" to "actions", and refactor
related file names
- [x] check and modify part of the runners related functions to match
their name
- [x] Fix backend check caused by fmt check

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-27 20:08:47 -04:00
Hester Gong f1a4330306
Modify width of ui container, fine tune css for settings pages and org header (#24315)
Close #24302 
Part of #24229, Follows #24246
This PR focused on CSS style fine-tune, main changes:

1. Give `.ui.ui.ui.container` a width of `1280px` with a max-width of
`calc(100vw - 64px)`, so the main contents looks better on large
devices.

2. Share styles for table elements in all levels settings pages to fix
overflow of runners table on mobile and for consistency (The headers on
mobile can be further improved, but haven't found a proper way yet).

3. Use [stackable
grid](https://fomantic-ui.com/collections/grid.html#stackable) and
[device column width](https://fomantic-ui.com/examples/responsive.html)
for responsiveness for some pages (repo/org collaborators settings
pages, org teams related page)

4. Fixed #24302 by sharing label related CSS in reporg.css

5. Fine tune repo tags settings page

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-26 11:59:08 -04:00
silverwind 4d5c803f8b
Fix Monaco IOS keyboard button (#24341)
Fix https://github.com/go-gitea/gitea/issues/16188. Turns out the
element was completely misaligned by fomantic styles. Add most of the
original styles in `!important` form to fix.

Tapping the button doesn't do anything useful in Simulator.app, but I
guess it's still better to not outright hide it in case it has a
possiblity to work.

<img width="121" alt="image"
src="https://user-images.githubusercontent.com/115237/234379685-4e67f8cd-7e91-4bcc-8e17-9d5b2ebed6cd.png">

Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-26 01:31:50 -04:00
silverwind 75e35fb03a
Fix runner button height (#24338)
Fixes https://github.com/go-gitea/gitea/issues/24326.

Set size class and downsize any such buttons that have a dropdown icon
because the dropdown icon increases button height artificially.

[`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) is not
supported in Firefox yet, but works fine with the experimental pref
enabled. I see this as a graceful degradation in unsupporting browsers.
2023-04-26 00:09:29 -04:00
wxiaoguang 0e8045d8ea
Fix template function DateTime (#24317)
Before, 500 error


![image](https://user-images.githubusercontent.com/2114189/234170176-403ffd1b-ec27-42be-bff9-86184dc8d74d.png)
2023-04-25 15:48:30 -04:00
Zettat123 30c1cd9775
Add tags list for repos whose release setting is disabled (#23465)
Close #23427 

Co-Author: @wxiaoguang 

If a repo's release setting is enabled, the logic has't changed.
Clicking the "Tags" button will jump to `/{user}/{repo}/tags` and
`templates/repo/release/list.tmpl` template will be used.

<img
src="https://user-images.githubusercontent.com/15528715/224939362-bd8974fd-08b0-4f79-a114-3389d15847ca.png"
width="600px" />

If the release setting is disabled, clicking the "Tags" button will
still jump to `/{user}/{repo}/tags` but a new template
`templates/repo/tag/list.tmpl` will be used.

<img
src="https://user-images.githubusercontent.com/15528715/233834564-74741e49-f4e9-47c8-ac12-e306642798dc.png"
width="600px" />

Since both templates above need to render the tags list, I moved the
tags list to a shared template located in
`templates/repo/tag/table.tmpl`.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-25 18:29:00 +02:00
wxiaoguang f16b668980
Make SVG in dropdown menu have the same margin-right as IMG (#24316)
Fix #24226



![image](https://user-images.githubusercontent.com/2114189/234167393-0fe36a0d-29c9-46b6-b71d-52436f2b27f3.png)

Co-authored-by: silverwind <me@silverwind.io>
2023-04-25 07:34:37 -04: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
wxiaoguang 75c62054a6
Improve some modal action buttons (#24289)
Follow #24097 and #24285

And add a devtest page for modal action button testing.
http://localhost:3000/devtest/fomantic-modal

Now the `modal_actions_confirm.tmpl` could support: green / blue /
yellow positive buttons, the negative button is "secondary".

ps: this PR is only a small improvement, there are still a lot of
buttons not having proper colors. In the future these buttons could be
improved by this approach.

These buttons could also be improved according to the conclusion of
#24285 in the future.



![image](https://user-images.githubusercontent.com/2114189/233847773-a6d6b29b-7b5c-490e-8425-40dfd0ad2529.png)


And add GitHub-like single danger button (context:
https://github.com/go-gitea/gitea/issues/24285#issuecomment-1519100312)


![image](https://user-images.githubusercontent.com/2114189/233891566-055d7611-894d-4d5a-baf5-f6369180bf8d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-24 07:08:59 -04:00
silverwind 774d1a0fbd
Tweak pull request branch delete ui (#23951)
- Move delete button to right and remove red color on it.
- Remove CLI instructions when PR has been merged.

Before:

<img width="855" alt="Screenshot 2023-04-06 at 20 21 47"
src="https://user-images.githubusercontent.com/115237/230463178-95735fc0-9632-4d51-bbd5-2131c40186c4.png">

After:

<img width="865" alt="Screenshot 2023-04-06 at 20 23 17"
src="https://user-images.githubusercontent.com/115237/230463347-8155cbf9-4e58-421a-93a8-56ce6188dab8.png">

After (deleted):

<img width="860" alt="Screenshot 2023-04-06 at 20 19 30"
src="https://user-images.githubusercontent.com/115237/230463442-f53d7500-191d-4d75-a097-d100a461672a.png">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-23 14:12:36 -04:00
Hester Gong 476a043a5f
Refactor delete_modal_actions template and use it for project column related actions (#24097)
Co-Author: @wxiaoguang 

This PR is to fix
https://github.com/go-gitea/gitea/issues/23318#issuecomment-1506275446 .
The way to fix this in this PR is to use `delete_modal_actions.tmpl`
here both to fix this issue and keep ui consistency (as suggested by
[TODO
here](4299c3b7db/templates/projects/view.tmpl (L161)))

And this PR also refactors `delete_modal_actions.tmpl` and its related
styles, and use the template for more modal actions:

1. Added template attributes:
* locale
* ModalButtonStyle: "yes" (default) or "confirm"
* ModalButtonCancelText
* ModalButtonOkText

2. Rename `delete_modal_actions.tmpl` template to
`modal_actions_confirm.tmpl` because it is not only used for action
modals deletion now.

3. Refactored css related to modals into `web_src/css/modules/modal.css`
and improved the styles.

4. Also use the template for PR deletion modal and remove issue
dependency modal.

5. Some modals should also use the template, but not sure how to open
them, so mark these modal actions by `{{/* TODO: Convert to
base/modal_actions_confirm */}}`

After (Also tested on arc green):

Hovering on the left buttons

<img width="711" alt="Screen Shot 2023-04-23 at 15 17 12"
src="https://user-images.githubusercontent.com/17645053/233825650-76307e65-9255-44bb-80e8-7062f58ead1b.png">

<img width="786" alt="Screen Shot 2023-04-23 at 15 17 21"
src="https://user-images.githubusercontent.com/17645053/233825652-4dc6f7d1-a180-49fb-a468-d60950eaee0d.png">

Test for functionalities:

https://user-images.githubusercontent.com/17645053/233826857-76376fda-022c-42d0-b0f3-339c17ca4e59.mov

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-04-23 17:24:19 +08:00
wxiaoguang 7447b39de7
Fix footer display (#24251)
Fix #24249

Diff with ignoring spaces:
https://github.com/go-gitea/gitea/pull/24251/files?diff=split&w=1

Screenshots:

<details>

<img width="1440" alt="image"
src="https://user-images.githubusercontent.com/2114189/233592840-d9ef7296-64eb-4e48-a598-300807a7c2f9.png">

<img width="923" alt="image"
src="https://user-images.githubusercontent.com/2114189/233593015-16edc531-43c2-4ff0-b27e-ca75dbadce0c.png">

</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-22 01:58:59 -04:00
silverwind 948a9ee5e8
Fix label color, fix divider in dropdown (#24215)
Two small CSS fixes:

1. Fix basic primary label hover
2. Fix border color of divider in dropdown and remove margin so it looks
better with hover effect, as discussed in
https://github.com/go-gitea/gitea/pull/24143:
2023-04-20 21:53:17 -04:00
Hester Gong 6793ef0069
Use secondary pointing menu for tabs on user/organization home page (#24162)
Close #24108

Use secondary pointing menu for tabs on user/organization home page so
the tabs look the same.
Main changes:
1. modified a part of dom structure in
`templates/user/overview/header.tmpl` to make it the same as
`templates/org/header.tmpl` in order to produce the same ui.
2. Move some css to `web_src/css/shared/repoorgshared.css` to make them
shareable between `templates/user/overview/header.tmpl` and
`templates/org/header.tmpl`

After:


https://user-images.githubusercontent.com/17645053/232400617-2add5bec-d483-4ab1-b48d-eaee157f7b09.mov

For further improvements. Need some thoughts: 

For [this
TODO](729ad294cb/templates/user/overview/header.tmpl (L1)),
it is viable to make it a shared template for [this
part](729ad294cb/templates/user/overview/header.tmpl (L2-L17))
and [this
part](729ad294cb/templates/org/header.tmpl (L1-L16))
because they are the same except for the variable. But for the menu
parts, they are quite different so might not be suitable to use a shared
template. So need some thoughts and advice about extracting the shared
template from these two headers.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-20 04:58:26 -04:00
wxiaoguang de2268ffab
Fix issue attachment handling (#24202)
Close #24195

Some of the changes are taken from my another fix
f07b0de997
in #20147 (although that PR was discarded ....)


The bug is:

1. The old code doesn't handle `removedfile` event correctly
2. The old code doesn't provide attachments for type=CommentTypeReview


This PR doesn't intend to refactor the "upload" code to a perfect state
(to avoid making the review difficult), so some legacy styles are kept.

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-20 02:39:44 -04:00
wxiaoguang b39a5bbbd6
Make wiki title supports dashes and improve wiki name related features (#24143)
Close #7570


1. Clearly define the wiki path behaviors, see
`services/wiki/wiki_path.go` and tests
2. Keep compatibility with old contents
3. Allow to use dashes in titles, eg: "2000-01-02 Meeting record"
4. Add a "Pages" link in the dropdown, otherwise users can't go to the
Pages page easily.
5. Add a "View original git file" link in the Pages list, even if some
file names are broken, users still have a chance to edit or remove it,
without cloning the wiki repo to local.
6. Fix 500 error when the name contains prefix spaces.


This PR also introduces the ability to support sub-directories, but it
can't be done at the moment due to there are a lot of legacy wiki data,
which use "%2F" in file names.



![image](https://user-images.githubusercontent.com/2114189/232239004-3359d7b9-7bf3-4ff3-8446-bfb0e79645dd.png)


![image](https://user-images.githubusercontent.com/2114189/232239020-74b92c72-bf73-4377-a319-1c85609f82b1.png)

Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-19 13:50:10 -04:00
Krzysztof Jeziorny fcad9fd19f
Vertical widths of containers removed (#24184)
A vertical overflow appears in Firefox 112/MacOS 12.6 when the system
setting for scrollbars is to "Always" show them.
--- 
Here, the fixed 100vw container widths are removed, which removes the
overflow. It is, however, only simulated in Developer Tools in latest
Firefox and Chromium, so please test on a Gitea installation.
2023-04-19 12:13:00 -04:00
wxiaoguang e422342eeb
Allow adding new files to an empty repo (#24164)
![image](https://user-images.githubusercontent.com/2114189/232561612-2bfcfd0a-fc04-47ba-965f-5d0bcea46c54.png)
2023-04-19 21:40:42 +08:00
wxiaoguang 1ab16e48cc
Improve Wiki TOC (#24137)
The old code has a lot of technical debts, eg: `repo/wiki/view.tmpl` /
`Iterate`

This PR improves the Wiki TOC display and improves the code.

---------

Co-authored-by: delvh <dev.lh@web.de>
2023-04-17 15:05:19 -04:00
silverwind dcde4701a5
Fix math and mermaid rendering bugs (#24049)
1. Fix multiple error display for math and mermaid:


![err](https://user-images.githubusercontent.com/115237/231126411-8a21a777-cd53-4b7e-ac67-5332623106e8.gif)

2. Fix height calculation of certain mermaid diagrams by reading the
iframe inner height from it's document instead of parsing it from SVG:

Before:
<img width="866" alt="Screenshot 2023-04-11 at 11 56 27"
src="https://user-images.githubusercontent.com/115237/231126480-b194e02b-ea8c-4ddf-8c79-50c525815d92.png">

After:
<img width="855" alt="Screenshot 2023-04-11 at 11 56 35"
src="https://user-images.githubusercontent.com/115237/231126494-5fe86a48-8d21-455a-8b95-79b6ee27a16f.png">

3. Refactor error handling to a common function
4. Rename to `renderAsciicast` for consistency
5. Improve mermaid loading sequence

Note: I did try `securityLevel: 'sandbox'` to make mermaid output a
iframe directly, but that showed a bug in mermaid where the iframe style
height was set incorrectly. Opened
https://github.com/mermaid-js/mermaid/issues/4289 for this.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-04-17 12:10:22 +02:00
wxiaoguang 0e05984667
Set EasyMDE heading font-size to the same size as the resulting markdown (#24151)
Fix #23816

According to my personal experience, the EasyMDE is still useful when
writing a lot of contents, eg: the wiki page.

It's not difficult to improve its heading styles, so let's make it.

Before:

<img width="815" alt="image"
src="https://user-images.githubusercontent.com/2114189/232280943-9177f0bc-e380-426f-8588-20ff8d8e5293.png">

After:

<img width="538" alt="image"
src="https://user-images.githubusercontent.com/2114189/232280903-e8c476ee-f5b1-48fe-8a93-86fcd79680c3.png">
2023-04-16 20:01:08 +08:00
wxiaoguang 1c8bc4081a
Show friendly 500 error page to users and developers (#24110)
Close #24104

This also introduces many tests to cover many complex error handling
functions.

### Before

The details are never shown in production.

<details>

![image](https://user-images.githubusercontent.com/2114189/231805004-13214579-4fbe-465a-821c-be75c2749097.png)

</details>

### After

The details could be shown to site admin users. It is safe.

![image](https://user-images.githubusercontent.com/2114189/231803912-d5660994-416f-4b27-a4f1-a4cc962091d4.png)
2023-04-14 13:19:11 +08:00
silverwind 469dc4459b
Add monospace toggle button to textarea (#24034)
- Add new button to textarea to switch font. State is persisted in
localStorage.
- Change markdown-switch-easymde button from `<span>` to `<button>`
- Slightly increased monospace font globally by 5% as I think it fits
better.

For hover effect on these buttons I'm deferring to
https://github.com/go-gitea/gitea/pull/23896.


![](https://user-images.githubusercontent.com/115237/230948526-ecf8d730-0c69-4a8e-a1a5-1e5e079c754d.gif)

---------

Co-authored-by: delvh <dev.lh@web.de>
2023-04-13 15:05:06 -04:00
wxiaoguang 704f3aa91c
Fine tune markdown editor toolbar (#24046)
1. Remove unnecessary `btn-link` `muted` classes
* Link is link, button is button, I can't see a real requirement to make
a button like a link.
* If anyone insists, please help to show me real example from modern
frameworks / websites, how and why they do so.
    * No need to duplicate a lot of class names on similar elements
* Declare styles clearly, for example, `markdown-toolbar` itself should
have `display: flex`, but not use `gt-df` to overwrite the `display:
block`.
2. Remove unnecessary `role` attribute
    * https://github.com/github/markdown-toolbar-element/issues/70
* The `markdown-toolbar-element` does want to add `role=button`, but
there is a bug.
* So we do the similar thing as upstream does (add the role by JS),
until they fix their bugs.
3. Indent `markdown-switch-easymde` (before it doesn't have a proper
indent)

Screenshot:

![image](https://user-images.githubusercontent.com/2114189/231090912-f6ba01cb-d0eb-40ad-bf8c-ffc597d9a778.png)
2023-04-11 16:36:18 +08:00
delvh 91c8261e2c
Add tooltips for MD editor buttons and add `muted` class for buttons (#23896)
Followup of #23876 according to my unreleased review demanding tooltips.
Additionally
- add a `muted` equivalent for buttons
- convert `switch to legacy` to an actual button
- enroll `switch to legacy` in the builtin pseudo focus cycle
- remove spaces between the buttons

The effect of the `muted` class is what you would expect: The button
loses all of its normal styling, and is defined only by its content instead.
This will help reduce a11y infractions in the future, as that was one of
the major points why people didn't use `<button>` tags and decided on a
bad fix (i.e. through `<div>`s) instead.

## Appearance

![image](https://user-images.githubusercontent.com/51889757/229510842-337378e5-faa5-4886-a910-08614c0c233d.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-11 15:26:18 +08:00
silverwind 9f6bc7c6f4
Replace tribute with text-expander-element for textarea (#23985)
The completion popup now behaves now much more as expected than before
for the raw textarea:
- You can press <kbd>Tab</kbd> or <kbd>Enter</kbd> once the completion
popup is open to accept the selected item
- The menu does not close automatically when moving the cursor
- When you delete text, previously correct suggestions are shown again
- If you delete all text until the opening char (`@` or `:`) after
applying a suggestion, the popup reappears again
- Menu UI has been improved

<img width="278" alt="Screenshot 2023-04-07 at 19 43 42"
src="https://user-images.githubusercontent.com/115237/230653601-d6517b9f-0988-445e-aa57-5ebfaf5039f3.png">
2023-04-09 12:18:45 -04:00
sillyguodong bedad23f9e
Expand/Collapse all changed files (#23639)
close #23628 

Now in `...` dropdown, you can expand or collapse all diff files that
have loaded.

https://user-images.githubusercontent.com/33891828/227749688-2d406916-3347-49f6-93a5-4092a00e8809.mov

Co-authored-by: silverwind <me@silverwind.io>
2023-04-09 21:11:02 +08:00
silverwind f2b98d8259
Show errors for KaTeX and mermaid on the preview tab (#24009)
There is a conflicting fomantic rule that hid the error messages inside
the markdown preview tab for things like mermaid or katex.
Overruled it to always show these errors.

<img width="774" alt="image"
src="https://user-images.githubusercontent.com/115237/230738528-322814c1-8994-495e-b901-bbb79b924ccb.png">
2023-04-09 08:07:43 -04:00
Hester Gong a519aac6d5
Show protected branch rule names again (#23907)
`!important`s for one of the primary label selectors are removed by
#23774, so the repository branch protection settings ui will not have
the demanding css. This PR modifies `.ui.primary.label` to fix it.

Before:
<img width="1408" alt="飞书20230404-115410"
src="https://user-images.githubusercontent.com/17645053/229683221-ef9c7d5c-68a8-42b0-ba19-ef2d5dfce5f9.png">

After:
<img width="1419" alt="截屏2023-04-04 11 56 32"
src="https://user-images.githubusercontent.com/17645053/229683469-70cfc92d-d7ef-4323-a7f5-2247810fabce.png">

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2023-04-09 06:15:43 -04:00
silverwind cf5a281fdc
Adjust sticky pr header to cover background (#23956)
Very minor CSS tweak: Adjust sticky PR header to cover the box-shadow of
selected files.

Before:
<img width="1250" alt="Screenshot 2023-04-06 at 22 54 59"
src="https://user-images.githubusercontent.com/115237/230492218-4d71da48-a362-4c52-a7f7-01daf4ffa458.png">

After:
<img width="1255" alt="Screenshot 2023-04-06 at 22 54 46"
src="https://user-images.githubusercontent.com/115237/230492227-c7142210-e535-4da8-b610-37d33dcbb549.png">
2023-04-08 20:43:15 +08:00
silverwind c0246677a6
Fix markup background, improve wiki rendering (#23750)
Fix regression from https://github.com/go-gitea/gitea/pull/23578. Only
visible on arc-green.

Before:
<img width="997" alt="Screenshot 2023-03-27 at 19 14 21"
src="https://user-images.githubusercontent.com/115237/228016589-e7cabfb9-bfd0-45fd-9407-6b76c665ed1a.png">

After:
<img width="1000" alt="Screenshot 2023-03-27 at 19 14 05"
src="https://user-images.githubusercontent.com/115237/228016600-db2e6002-4e2c-4d18-8393-9d7e1f525acb.png">

Fixes: https://github.com/go-gitea/gitea/issues/20625
Fixes: https://github.com/go-gitea/gitea/issues/23718
2023-04-07 17:30:04 -04:00
wxiaoguang 93eb914438
Improve markdown editor: width, height, preferred (#23895)
Follow #23876


1. Fine tune the heights of the editors (like before)
    * Auto expand the editor (increase/decrease the height) when editing
2. Remember user's last used editor (textarea/easymde) in LocalStorage,
then next time the editor will be switched automatically
* No need to introduce extra config option, it satisfies all users,
including who prefer EasyMDE
3. Also fix the width problem of Review Panel

Screenshot:

<details>


![image](https://user-images.githubusercontent.com/2114189/229518585-2e05827e-8355-48f3-a20c-2c8b9e60ce74.png)


![image](https://user-images.githubusercontent.com/2114189/229518173-4caa6da7-6ad9-40e9-bf1a-ceddfcd4b37f.png)


![image](https://user-images.githubusercontent.com/2114189/229507886-148e9b84-9b58-46d1-ba3f-727e1396f476.png)


![image](https://user-images.githubusercontent.com/2114189/229518258-9f522294-1e64-4b06-91ab-ab43b0353aaa.png)


![image](https://user-images.githubusercontent.com/2114189/229507752-6d540ac7-7748-4bb6-bc09-28acab32d31b.png)


![image](https://user-images.githubusercontent.com/2114189/229510899-de322af5-57e8-4dc5-9a61-771a3b1bee79.png)


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-07 13:03:29 -04:00
Hester Gong 6eb678374b
Refactor authors dropdown (send get request from frontend to avoid long wait time) (#23890)
Right now the authors search dropdown might take a long time to load if
amount of authors is huge.
Example: (In the video below, there are about 10000 authors, and it
takes about 10 seconds to open the author dropdown)

https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov

Possible improvements can be made, which will take 2 steps (Thanks to
@wolfogre for advice):

Step 1:
Backend: Add a new api, which returns a limit of 30 posters with matched
prefix.
Frontend: Change the search behavior from frontend search(fomantic
search) to backend search(when input is changed, send a request to get
authors matching the current search prefix)

Step 2:
Backend: Optimize the api in step 1 using indexer to support fuzzy
search.

This PR is implements the first step. The main changes:
1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit
of 30 users with matched prefix (prefix sent as query). If
`DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will
also include fullnames fuzzy search.
2. Added a tooltip saying "Shows a maximum of 30 users" to the author
search dropdown
3. Change the search behavior from frontend search to backend search

After:

https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov

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

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
2023-04-07 08:11:02 +08:00
Yoan Blanc 9b416b2e36
Use graceful editorconfig loader to reduce errors when loading malformed editorconfigs (#21257)
The _graceful_ should fail less when the `.editorconfig` file isn't
properly written, e.g. boolean values from YAML or unparseable numbers
(when a number is expected). As is... information is lost as the
_warning_ (a go-multierror.Error) is ignored. If anybody knows how to
send them to the UI as warning; any help is appreciated.

Closes #20694

Signed-off-by: Yoan Blanc <yoan@dosimple.ch>
2023-04-06 16:01:20 -04:00
wxiaoguang 376396a088
Fix image border-radius (#23886)
1. Instead of polluting the `border-radius` style globally, each "img"
usage should declare their own styles.
2. There were some bugs in code, I believe the `.img` selector was done
by mistake.

After:


![image](https://user-images.githubusercontent.com/2114189/229415742-161b018f-14c3-471d-bcf7-34f83e5c2d89.png)


![image](https://user-images.githubusercontent.com/2114189/229415789-829d364a-76da-47a5-8c61-398cc990873c.png)
2023-04-05 02:44:52 +02:00
Jimmy Praet 54197b67f9
Scroll collapsed file into view (#23702) 2023-04-05 07:51:42 +08:00
wxiaoguang d149093ce3
Fix code view (diff) broken layout (#23096)
Close #22911

I think it's ready for review now, feel free to test it, welcome to help
to improve.

### Before


![image](https://user-images.githubusercontent.com/2114189/220958734-06871615-b498-4143-8449-3d443f08ffaa.png)

### After


![image](https://user-images.githubusercontent.com/2114189/220958621-0dce2728-57b8-4a1f-ac5d-48c7c2d42f5c.png)
2023-04-04 19:05:07 +08:00
silverwind 62a9052075
Org pages style fixes (#23901)
Few fixes/enhancements around org pages:

Use flexbox for member and repo lists and tweak rendering of tabs and
list:

<img width="765" alt="Screenshot 2023-04-03 at 22 54 24"
src="https://user-images.githubusercontent.com/115237/229625716-92a834c3-9121-4729-8b9b-3a3973cf9a91.png">
<img width="771" alt="Screenshot 2023-04-03 at 22 55 15"
src="https://user-images.githubusercontent.com/115237/229625719-acc08ce8-4489-44a6-a9b9-e36755c55b1d.png">

Vertically center remove/leave buttons, add link to avatar:

<img width="1223" alt="Screenshot 2023-04-03 at 21 51 20"
src="https://user-images.githubusercontent.com/115237/229612616-b662b795-e754-41a1-a77a-381c267e6104.png">
2023-04-04 06:49:09 +02:00
wxiaoguang 5115ffa90c
Remove fomantic ".link" selector and styles (#23888)
It's difficult to play with Fomantic's ".link" selector&styles, and it
doesn't bring any real benefit.

Instead, it sometimes introduces regressions (because of the `:not`
selector, really difficult to fine-tune).

Regression:

<details>


![image](https://user-images.githubusercontent.com/2114189/229421849-b48fbcf6-2ae2-4264-b06b-2a06c12e1a4b.png)

</details>

After this PR, there is no ".link" in code anymore. We do not need to
play the overwriting and `:not()` game anymore.


![image](https://user-images.githubusercontent.com/2114189/229422058-476aa5e2-53db-402d-b507-a6063824f835.png)


![image](https://user-images.githubusercontent.com/2114189/229422435-34fde1bc-b2ec-48ec-8c4a-6d8c2610b249.png)


![image](https://user-images.githubusercontent.com/2114189/229422014-cb38c8c7-828f-4a49-a761-95ea824d46a7.png)


![image](https://user-images.githubusercontent.com/2114189/229422031-10f6b4a5-af76-40ee-8fa1-692112a9274f.png)
2023-04-03 20:47:23 -04:00
wxiaoguang 5ab1c7acec
Fix user profile description rendering (#23882)
The `ul li` styles were polluted.

Before:

![image](https://user-images.githubusercontent.com/2114189/229409756-22438268-ee36-4e4a-a20b-04ee8ee4a79d.png)

After:

![image](https://user-images.githubusercontent.com/2114189/229409809-25cea715-b6f1-4346-9bb4-3fbb58fcca65.png)
2023-04-03 16:11:16 -04:00
silverwind d0c406a86f
Fix review box viewport overflow issue (#23800)
Fix regression that came likely from
https://github.com/go-gitea/gitea/pull/23271:

Long lines of text currently cause the review box's CodeMirror element
to resize which apparently is not recognized by [popper's resize
detection](https://popper.js.org/docs/v2/modifiers/event-listeners/) and
which causes the element to go partially out of viewport until a reflow
happens:


![wrap](https://user-images.githubusercontent.com/115237/228673260-f8ffe89e-5724-4fb9-b93f-30b146c4c436.gif)

Fix this by setting the element to a static width derived from viewport
width and remove the previously clumsy media queries.
2023-04-03 11:11:34 -04:00
wxiaoguang 5cc0801de9
Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)
The first step of the plan

* #23290

Thanks to @silverwind for the first try in #15394 . Close #10729 and a
lot of related issues.

The EasyMDE is not removed, now it works as a fallback, users can switch
between these two editors.

Editor list:

* Issue / PR comment
* Issue / PR comment edit
* Issue / PR comment quote reply
* PR diff view, inline comment
* PR diff view, inline comment edit
* PR diff view, inline comment quote reply
* Release editor
* Wiki editor

Some editors have attached dropzone

Screenshots:

<details>


![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png)


![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png)


![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png)


![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png)

</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-03 18:06:57 +08:00
silverwind ca03ca9e6e
CSS color tweaks (#23828)
Change grey shades in arc-green to match the theme more:

<img width="661" alt="Screenshot 2023-03-30 at 21 42 34"
src="https://user-images.githubusercontent.com/115237/228957952-8e099e56-6923-4aa6-8ce9-3c1cd898b73e.png">

Adjusted grey shade in light theme:

<img width="652" alt="image"
src="https://user-images.githubusercontent.com/115237/228963876-3bde6181-8397-4dc2-be72-33982e6c7acb.png">

Increase contrast in arc-green, change background to slightly darker
shade, change forgeground to slightly brighter colors:

<img width="283" alt="Screenshot 2023-03-30 at 22 33 20"
src="https://user-images.githubusercontent.com/115237/228957957-272c24a5-dd0b-427a-b6b7-e62836bdd73c.png">

Increase contrast of grey text in light theme as well by making them
darker:

<img width="273" alt="Screenshot 2023-03-30 at 22 33 35"
src="https://user-images.githubusercontent.com/115237/228957959-283139c7-6fa7-4b68-9fdd-16c668ad1301.png">

Add color rule for border multiple select items:

<img width="183" alt="Screenshot 2023-03-30 at 22 29 31"
src="https://user-images.githubusercontent.com/115237/228957954-6b5a752d-bbb0-4519-ab35-d02c0804d955.png">
<img width="181" alt="Screenshot 2023-03-30 at 22 29 46"
src="https://user-images.githubusercontent.com/115237/228957956-fca9790a-d6c9-4f31-8d1b-d183ab3ac669.png">

Added color rule for red `*` on required form fields:

<img width="97" alt="image"
src="https://user-images.githubusercontent.com/115237/228958760-517ad9ef-565d-4349-b734-9b559ab42429.png">
2023-03-31 16:24:47 +08:00
silverwind 525b7382d3
Convert issue list checkboxes to native (#23596)
Use native instead of fomantic checkboxes in issue list. Benefits
include no more JS pop-in on load and perfect a11y.

Before, with JS pop-in:

<img width="92" alt="Screenshot 2023-03-20 at 17 02 02"
src="https://user-images.githubusercontent.com/115237/226398955-99029a1c-1150-449c-821b-e4165e7446a8.png">

After, Firefox on macOS:

<img width="126" alt="Screenshot 2023-03-20 at 17 01 26"
src="https://user-images.githubusercontent.com/115237/226399018-58df2c32-c2b2-4c78-b7df-7b76523abe21.png">

After, Chrome on macOS:

<img width="79" alt="Screenshot 2023-03-20 at 17 01 42"
src="https://user-images.githubusercontent.com/115237/226399074-947e6279-8dc3-42c2-90b5-b106c471b23d.png">

I opted to not do styling yet but I see that the inconsistency between
browsers may already be reason enough on doing it. I think if we style
them, there should be one global style, including markdown ones which
currently have custom styling.
2023-03-30 11:02:47 -04: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
silverwind 79e7a6ec1e
Add CSS rules for basic colored labels (#23774)
Before:

<img width="164" alt="Screenshot 2023-03-28 at 23 35 46"
src="https://user-images.githubusercontent.com/115237/228372437-663111b9-7285-4fa2-9125-fb5e1cad21d7.png">

After:
<img width="166" alt="Screenshot 2023-03-28 at 23 35 54"
src="https://user-images.githubusercontent.com/115237/228372441-49430517-6b2d-4389-b11c-c30a724f6de7.png">

Also I removed the `!important` on the primary label as it's very likely
unnecessary with the amount of specificity the selector already has.
2023-03-28 22:58:31 -04: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