Commit Graph

82 Commits

Author SHA1 Message Date
silverwind
4b1063f3db
Rewrite and restyle reaction selector and enable no-sizzle eslint rule (#30453)
Enable `no-sizzle` lint rule, there was only one use in `initCompReactionSelector` and:

- Remove all jQuery except the necessary fomantic dropdown init
- Remove the recursion, instead bind event listeners to common parent container nodes

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-14 18:44:11 +08:00
silverwind
dd8dde2be8
replace jquery-minicolors with coloris (#30055)
Get rid of one more jQuery dependant and have a nicer color picker as
well.

Now there is only a single global color picker init because that is all
that's necessary because the elements are present on the page when the
init code runs. The init is slightly weird because the module only takes
a selector instead of DOM elements directly.

The label modals now also perform form validation because previously it
was possible to trigger a 500 error `Color cannot be empty.` by clearing
out the color value on labels.

<img width="867" alt="Screenshot 2024-03-25 at 00 21 05"
src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb">
<img width="860" alt="Screenshot 2024-03-25 at 00 20 48"
src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e">
2024-03-29 04:00:07 +01:00
silverwind
226a82a939
Migrate font-family to tailwind (#30118)
Enable us to use tailwind's
[`font-family`](https://tailwindcss.com/docs/font-family) classes as
well as remove `gt-mono` in favor of `tw-font-mono`. I also merged the
"compensation" to one selector, previously this was two different values
0.9em and 0.95em. I did not declare a `serif` font because I don't think
there will ever be a use case for those. Command ran:

```sh
perl -p -i -e 's#gt-mono#tw-font-mono#g' web_src/js/**/* templates/**/*
2024-03-28 08:31:07 +00:00
Yarden Shoham
1a71dbfb78
Remove jQuery class from the reaction selector (#30138)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the reaction selector and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-27 17:09:34 +01:00
silverwind
8fe26fb314
Refactor all .length === 0 patterns in JS (#30045)
This pattern comes of often during review, so let's fix it once and for
all. Did not test, but changes are trivial enough imho.
2024-03-25 18:37:55 +00:00
Yarden Shoham
2e31a2800e
Remove jQuery .attr from the reaction selector (#30052)
- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the reaction selector and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-03-25 04:30:38 +00:00
Yarden Shoham
428e05662f
Remove jQuery .attr from the ComboMarkdownEditor (#30051)
- Switched from jQuery `attr` to plain javascript `getAttribute` and
`setAttribute`
- Tested the markdown editor and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-03-25 00:00:54 +00:00
Yarden Shoham
a7d0c5de4c
Remove jQuery .attr from the label edit exclusive checkbox (#30053)
- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the label edit exclusive checkbox and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-03-24 23:50:39 +00:00
silverwind
ec3d467f15
Migrate gt-hidden to tw-hidden (#30046)
We have to define this one in helpers.css because tailwind only
generates a single class but certain things rely on this being
double-class. Command ran:

```sh
perl -p -i -e 's#gt-hidden#tw-hidden#g' web_src/js/**/* templates/**/* models/**/* web_src/css/**/*

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-24 18:23:38 +00:00
silverwind
3d751b6ec1
Enforce trailing comma in JS on multiline (#30002)
To keep blame info accurate and to avoid [changes like
this](https://github.com/go-gitea/gitea/pull/29977/files#diff-c3422631a14edbe1e508c4b22f0c718db318be08a6e889427802f9b6165d88d6R359),
it's good to always have a trailing comma, so let's enforce it in JS.

This rule is completely automatically fixable with `make lint-js-fix`
and that's what I did here.
2024-03-22 14:06:53 +00:00
silverwind
d6fed9ab88
Fix various loading states, remove .loading class (#29920)
Various code was using fomantic `loading` class which I think got broken
a while ago and rendered only a full circle. Fix those to use
`is-loading`.

Before:
<img width="295" alt="Screenshot 2024-03-19 at 22 56 26"
src="https://github.com/go-gitea/gitea/assets/115237/dbe83395-5db4-4868-90bc-3613866a35f0">

After:
<img width="60" alt="Screenshot 2024-03-19 at 22 54 35"
src="https://github.com/go-gitea/gitea/assets/115237/8ac19b7e-035a-4c6d-850b-53a234ef69c2">
<img width="294" alt="Screenshot 2024-03-19 at 22 54 56"
src="https://github.com/go-gitea/gitea/assets/115237/34e819d7-25f7-43a1-9d48-4a68dcd2b6ad">
<img width="320" alt="Screenshot 2024-03-19 at 22 55 16"
src="https://github.com/go-gitea/gitea/assets/115237/05127544-47ff-4e18-9fd8-c84e44c374f8">
<img width="153" alt="Screenshot 2024-03-19 at 23 01 43"
src="https://github.com/go-gitea/gitea/assets/115237/a33248c6-b11d-40ff-82d8-f5a3d85b55aa">
<img width="1300" alt="Screenshot 2024-03-19 at 23 56 25"
src="https://github.com/go-gitea/gitea/assets/115237/562ca876-b5d5-4295-961e-9d2cdab31ab0">
<img width="136" alt="Screenshot 2024-03-20 at 00 00 38"
src="https://github.com/go-gitea/gitea/assets/115237/44838ac4-67f3-4fec-a8e3-978cc5dbdb72">
2024-03-21 16:31:15 +00:00
Yarden Shoham
adc61c5d71
Remove jQuery .attr from the user search box (#29919)
- Switched from jQuery `.attr` to plain javascript `.getAttribute`
- Tested the user search box and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-03-20 00:09:52 +00:00
silverwind
fa100618c4
Forbid jQuery .css and refactor all usage (#29852)
Tested all functionality. There is a [pre-existing
bug](https://github.com/go-gitea/gitea/issues/29853) when moving a
project panels which is not caused by this refactoring.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-19 16:28:46 +00:00
silverwind
21fe512aac
Forbid jQuery .prop and fix related issues (#29832)
The issue checkbox code received a few more cleanups and I specifically
tested it. The other changes are trivial. Also, I checked the cases for
how many elements match the jQuery selection to determine querySelector
vs. querySelectorAll.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-03-16 15:08:10 +00:00
Yarden Shoham
3cd64949ae
Forbid variables containing jQuery collections not having the $ prefix (#29839)
See
https://github.com/wikimedia/eslint-plugin-no-jquery/blob/master/docs/rules/variable-pattern.md

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
2024-03-16 12:22:16 +00:00
Yarden Shoham
1dc7f53386
Fix WebHookEditor regression from jQuery removal (#29692)
Make these calls optional

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-09 19:59:16 +08:00
silverwind
a3cfe6f39b
Support pasting URLs over markdown text (#29566)
Support pasting URLs over selection text in the textarea editor. Does
not work in EasyMDE and I don't intend to support it. Image paste works
as usual in both Textarea and EasyMDE.

The new `replaceTextareaSelection` function changes textarea content via
[`insertText`](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand#using_inserttext)
command, which preserves history, e.g. `CTRL-Z` works and is also
demostrated below. We should later refactor the image paste code to use
the same function because it currently destroys history.

Overriding the formatting via `Shift` key is supported as well, e.g.
`Ctrl+Shift+V` will insert the URL as-is, like on GitHub.


![urlpaste](https://github.com/go-gitea/gitea/assets/115237/522b1023-6797-401c-9e4a-498570adfc88)
2024-03-08 15:15:58 +00:00
Yarden Shoham
1f6de13897
Remove jQuery AJAX from the markdown editor preview (#29384)
- Removed all jQuery AJAX calls and replaced with our fetch wrapper
- Tested the markdown editor preview button functionality and it works
as before

# Demo using `fetch` instead of jQuery AJAX

![action](https://github.com/go-gitea/gitea/assets/20454870/3fc7abb8-4fdc-46e9-95f6-087d9526bb52)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-02-25 04:42:29 +00:00
Yarden Shoham
f390d5eb4f
Remove jQuery from the image pasting functionality (#29324)
- Switched to plain JavaScript
- Tested the image pasting functionality and it works as before

# Demo using JavaScript without jQuery

![demo](https://github.com/go-gitea/gitea/assets/20454870/018993ff-7b09-4d5f-88e0-f276368bacd6)

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-02-22 17:35:58 +01:00
Yarden Shoham
ade1110e8b
Remove jQuery from repo wiki creation page (#29271)
- Switched to plain JavaScript
- Tested the wiki creation form functionality and it works as before

# Demo using JavaScript without jQuery

![action](https://github.com/go-gitea/gitea/assets/20454870/2dfc95fd-40cc-4ffb-9ae6-50f798fddd67)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
2024-02-20 11:37:37 +01:00
silverwind
5e72526da4
Downscale pasted PNG images based on metadata (#29123)
Some images like MacOS screenshots contain
[pHYs](http://www.libpng.org/pub/png/book/chapter11.html#png.ch11.div.8)
data which we can use to downscale uploaded images so they render in the
same dppx ratio in which they were taken.

Before:

<img width="584" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/50979e3a-5d5a-40dc-a0a4-36eb6e28f14a">

After:

<img width="329" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/0690902a-f2fe-4c6b-97b3-6fdd67c21bad">
2024-02-19 02:23:06 +00:00
Yarden Shoham
27192bc321
Remove jQuery from the webhook editor (#29211)
- Switched to plain JavaScript
- Tested the webhook editing functionality and it works as before

# Demo using JavaScript without jQuery

![action](https://github.com/go-gitea/gitea/assets/20454870/b24c264d-d5e5-4954-8789-e72564a99027)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-02-17 13:17:04 +00:00
Yarden Shoham
d8d4b33b31
Remove jQuery from the "quick submit" handler (#29200)
- Switched to plain JavaScript
- Tested the quick submit functionality and it works as before

# Demo using JavaScript without jQuery

![action](https://github.com/go-gitea/gitea/assets/20454870/abbd6c49-ad0f-4f95-b4ba-e969b85a46e8)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2024-02-16 21:03:50 +01:00
KN4CK3R
c3e462921e
Improve user search display name (#29002)
I tripped over this strange method and I don't think we need that
workaround to fix the value.

old:

![grafik](https://github.com/go-gitea/gitea/assets/1666336/c8b6797b-eb45-4dec-99db-1b0649a34ec5)

new:

![grafik](https://github.com/go-gitea/gitea/assets/1666336/ab1a65ae-de5b-4ce4-9813-3b8b39c7922e)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-02-01 17:10:16 +00:00
silverwind
abd79ddebf
Update JS dependencies (#27922)
- Update all JS dependencies minus @mcaptcha/vanilla-glue (unsolved
error, see https://github.com/mCaptcha/glue/issues/65)
- Migrate deprecated eslint rules to `@stylistic/eslint-plugin-js`
- Enable and autofix `@stylistic/js/no-multiple-empty-lines`
- Regenerate poetry.lock with latest poetry
- Tested Mermaid, Swagger, Citation, Vue
2023-11-06 21:14:32 +00:00
silverwind
ae8e8f055e
Use fetch helpers instead of fetch (#27026)
WIP because:

- [x] Some calls set a `content-type` but send no body, can likely
remove the header
- [x] Need to check whether `charset=utf-8` has any significance on the
webauthn calls, I assume not as it is the default for json content.
- [x] Maybe `no-restricted-globals` is better for eslint, but will
require a lot of duplication in the yaml or moving eslint config to a
`.js` extension.
- [x] Maybe export `request` as `fetch`, shadowing the global.
2023-09-19 00:50:30 +00:00
silverwind
8099238618
Change green buttons to primary color (#27099)
I think it's better if the primary actions have primary color instead of
green which fits better into the overall single-color UI design. This PR
currently replaces every green button with primary:

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

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

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

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

<img width="442" alt="Screenshot 2023-09-16 at 14 33 53"
src="https://github.com/go-gitea/gitea/assets/115237/993ac1a5-c94d-4895-b76c-0d872181a70b">
2023-09-18 22:05:31 +00:00
silverwind
636b6eaf2a
Focus editor on "Write" tab click (#26714)
Focus the editor when clicking the "Write" tab. Works for both Textarea
and EasyMDE. Does for some reason not work without the
`requestAnimationFrame`.
2023-08-25 13:26:32 +08:00
wxiaoguang
d317c983bc
Set "type=button" for editor's toolbar buttons (#26510)
The editor usually is in a form, so the buttons should have
"type=button", avoid conflicting with the form's submit.
2023-08-15 19:31:48 +08:00
puni9869
cafce3b4b5
Allow to archive labels (#26478)
## Archived labels 

This adds the structure to allow for archived labels.
Archived labels are, just like closed milestones or projects, a medium to hide information without deleting it.
It is especially useful if there are outdated labels that should no longer be used without deleting the label entirely.

## Changes

1. UI and API have been equipped with the support to mark a label as archived
2. The time when a label has been archived will be stored in the DB

## Outsourced for the future

There's no special handling for archived labels at the moment.
This will be done in the future.

## Screenshots

![image](https://github.com/go-gitea/gitea/assets/80308335/208f95cd-42e4-4ed7-9a1f-cd2050a645d4)

![image](https://github.com/go-gitea/gitea/assets/80308335/746428e0-40bb-45b3-b992-85602feb371d)

Part of https://github.com/go-gitea/gitea/issues/25237

---------

Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-08-14 11:56:14 +02:00
silverwind
aa723dea9b
Don't autosize textarea in diff view (#26233)
Resizing the comment editor can be a very expensive operation because it
triggers page reflows, which on large PRs can take upwards of seconds to
complete. Disable this mechanism on the diff page only where we know
that the page can get large.

Fixes https://github.com/go-gitea/gitea/issues/26201 for the textarea
editor.

I don't think this can be fixed for EasyMDE because as far as I can
tell, it exposes no option to disable this resizing.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-07-31 00:11:15 +02:00
silverwind
c71e8abbc3
Add toasts to UI (#25449)
Fixes https://github.com/go-gitea/gitea/issues/24353

In some case like async success/error, it is useful to show toasts in UI.
2023-06-27 02:45:24 +00:00
wxiaoguang
a1c5057fe8
Batch delete issue and improve tippy opts (#25253)
1. Add "batch delete" button for selected issues, close #22273
2. Address the review in
https://github.com/go-gitea/gitea/pull/25219#discussion_r1229266083
2023-06-19 15:46:50 +08:00
silverwind
f47744c3f1
Update JS dependencies, remove space after emoji completion (#25266)
- Update all JS dependencies
- Enable stylint
[`media-feature-name-value-no-unknown`](https://stylelint.io/user-guide/rules/media-feature-name-value-no-unknown)
- Make use of new features in webpack and text-expander-element
- Tested Swagger and Mermaid

To explain the `text-expander-element` change: Before this version, the
element added a unavoidable space after emoji completion. Now that
https://github.com/github/text-expander-element/pull/36 is in, we gain
control over this space and I opted to remove it for emoji completion
and retain it for `@` mentions.

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2023-06-18 08:38:47 +00:00
HesterG
a43ea22479
Change form actions to fetch for submit review box (#25219)
Co-author: @wxiaoguang 

Close #25096 

The way to fix it in this PR is to change form submit to fetch using
formData, and add flags to avoid post repeatedly.
Should be able to apply to more forms that have the same issue after
this PR.

In the demo below, 'approve' is clicked several times, and then
'comment' is clicked several time after 'request changes' clicked.

After:


https://github.com/go-gitea/gitea/assets/17645053/beabeb1d-fe66-4b76-b048-4f022b4e83a0


Update: screenshots from /devtest

>
![image](https://user-images.githubusercontent.com/2114189/245680011-ee4231e0-a53d-4c2a-a9c2-71ccd98005cc.png)
> 
>
![image](https://user-images.githubusercontent.com/2114189/245680057-9215d348-63d8-406d-8828-17e171163aaa.png)
> 
>
![image](https://user-images.githubusercontent.com/2114189/245680148-89d7b3d1-d7b6-442f-b69e-eadaee112482.png)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-06-14 16:01:37 +08: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
yp05327
c4303efc23
Support markdown editor for issue template (#24400)
Fixes #24398

Task:
- [x] Reusing "textarea" like GitHub seems more friendly to users.
- [x] ^V image pasting and file uploading handling.

<details><summary>screenshots</summary>


![image](https://user-images.githubusercontent.com/18380374/235418877-00090552-ebda-411c-8e39-b47246bc8746.png)

![image](https://user-images.githubusercontent.com/18380374/235419073-dc33cad7-7626-4bce-9161-eb205c7384b5.png)
Display only one markdown editor:

![image](https://user-images.githubusercontent.com/18380374/235419098-ee21386d-2b2d-432e-bdb2-18646cc031e7.png)
Support file upload and ^V image pasting

![image](https://user-images.githubusercontent.com/18380374/235419364-7b390fa4-da56-437d-b55e-3847fbc049e7.png)

</details>

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
2023-05-08 22:22:52 +00:00
silverwind
a9ed87ce4a
Fix EasyMDE toolbar (#24489)
Fixes https://github.com/go-gitea/gitea/issues/24486

The "clean block" button is gone because I could not find a matching
octicon. Order of buttons is roughly equal to textarea.

<img width="824" alt="Screenshot 2023-05-02 at 21 10 00"
src="https://user-images.githubusercontent.com/115237/235762593-ceccb260-e665-4932-ac8a-ef6fe8406a3c.png">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-05-03 01:23:39 -04:00
Yarden Shoham
97991596bd
Remove all direct references to font-awesome (#24448)
- Related #10410
- I had to add an SVG for an empty checkbox
https://github.com/primer/octicons/issues/942

# Before

![image](https://user-images.githubusercontent.com/20454870/235374683-13f355c3-1245-40db-adda-4c710fc80288.png)

# After

![image](https://user-images.githubusercontent.com/20454870/235374655-cc637132-f314-424d-9243-13d45b8915d5.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
2023-05-01 00:02:56 +02:00
Yarden Shoham
3cc87370c3
Improve emoji and mention matching (#24255)
Prioritize matches that start with the given text, then matches that
contain the given text.

I wanted to add a heart emoji on a pull request comment so I started
writing `:`, `h`, `e`, `a`, `r` (at this point I still couldn't find the
heart), `t`... The heart was not on the list, that's weird - it feels
like I made a typo or a mistake. This fixes that.

This also feels more like GitHub's emoji auto-complete.

# Before

![image](https://user-images.githubusercontent.com/20454870/233630750-bd0a1b76-33d0-41d4-9218-a37b670c42b0.png)

# After

![image](https://user-images.githubusercontent.com/20454870/233775128-05e67fc1-e092-4025-b6f7-1fd8e5f71e87.png)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
2023-04-22 11:32:34 -04:00
Brecht Van Lommel
e541a8c654
Make mention autocomplete case insensitive in new markdown editor (#24190)
This matches EasyMDE, and makes it easier to find the right user without
having to remember the exact name.

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-18 13:25:11 -04:00
Tyrone Yeh
ed81b608cb
Add option to search for users is active join a team (#24093)
Adding a user in a team to enter a username gives a list of no active
users

---------

Co-authored-by: Jason Song <i@wolfogre.com>
2023-04-14 14:48:36 -04: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
Hester Gong
b43ad51a3d
Add popup to hashed comments/pull requests/issues in file editing/adding preview tab (#24040)
#23734 didn't add popups(tippy) to ref issues for the preview tab when
adding/editing a file

The location of the preview tab:
<img width="1214" alt="截屏2023-04-10 13 55 38"
src="https://user-images.githubusercontent.com/17645053/230836213-a73f0cee-378c-4a21-93db-583ba2c72f77.png">

This PR resues the logic in `ComboMarkdownEditor.js` to also add popup
to hashed comments/pull requests/issues in file editing/adding preview
tab.

After - On hover:
<img width="1222" alt="截屏2023-04-10 13 55 42"
src="https://user-images.githubusercontent.com/17645053/230836250-527ca7d0-6ec4-4c68-89ab-4f1b57b09239.png">

---------

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
2023-04-11 23:03:23 -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
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
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
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
Hester Gong
ca905b82df
Append (comment) when a link points at a comment rather than the whole issue (#23734)
Close #23671 

For the feature mentioned above, this PR append ' (comment)' to the
rendered html if it is a hashcomment.
After the PR, type in the following

```
pull request from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2

pull request from this repo:
http://localhost:3000/aaa/testA/pulls/2

issue comment from this repo:
http://localhost:3000/aaa/testA/issues/1#issuecomment-18

http://localhost:3000/aaa/testA/pulls/2#issue-9

issue comment from other repo:
http://localhost:3000/testOrg/testOrgRepo/pulls/2#issuecomment-24

http://localhost:3000/testOrg/testOrgRepo/pulls/2#issue
```
Gives:
<img width="687" alt="截屏2023-03-27 13 53 06"
src="https://user-images.githubusercontent.com/17645053/227852387-2b218e0d-3468-4d90-ad81-d702ddd17fd2.png">



Other than the above feature, this PR also includes two other changes:

1 Right now, the render of links from file changed tab in pull request
might not be very proper, for example, if type in the following. (not
sure if this is an issue or design, if not an issue, I will revert the
changes). example on
[try.gitea.io](https://try.gitea.io/HesterG/testrepo/pulls/1)
```
https://try.gitea.io/HesterG/testrepo/pulls/1/files#issuecomment-162725
https://try.gitea.io/HesterG/testrepo/pulls/1/files
```
it will render the following 
<img width="899" alt="截屏2023-03-24 15 41 37"
src="https://user-images.githubusercontent.com/17645053/227456117-5eccedb7-9118-4540-929d-aee9a76de852.png">

In this PR, skip processing the link into a ref issue if it is a link
from files changed tab in pull request

After:
type in following
```
hash comment on files changed tab:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files#issuecomment-24

files changed link:
http://localhost:3000/testOrg/testOrgRepo/pulls/2/files
```
Gives

<img width="708" alt="截屏2023-03-27 22 09 02"
src="https://user-images.githubusercontent.com/17645053/227964273-5dc06c50-3713-489c-b05d-d95367d0ab0f.png">

2 Right now, after editing the comment area, there will not be tippys
attached to `ref-issue`; and no tippy attached on preview as well.
example:

https://user-images.githubusercontent.com/17645053/227850540-5ae34e2d-b1d7-4d0d-9726-7701bf825d1f.mov

In this PR, in frontend, make sure tippy is added after editing the
comment, and to the comment on preview tab
After:

https://user-images.githubusercontent.com/17645053/227853777-06f56b4c-1148-467c-b6f7-f79418e67504.mov
2023-04-03 16:02:57 +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