2
0
Commit Graph

143 Commits

Author SHA1 Message Date
6543
383047184b Fix notification count positioning for variable-width elements (#34597)
The notification count is currently positioned using top/left
coordinates from its container's top/left corner. This works fine for
fixed-size containers like the bell icon.

This PR changes the positioning to use bottom/left coordinates from the
container's top/right corner instead. This improvement is needed when
placing notification counts on text that can vary in size due to
different languages or fonts.

The bell and stopwatch should look the same after this change.

---
*Sponsored by Kithara Software GmbH*

Co-authored-by: Marcel Haß <m.hass@kithara.com>
2025-06-05 19:02:07 +00:00
Brecht Van Lommel
43d0e0a859 Option to delay conflict checking of old pull requests until page view (#27779)
`[repository.pull-request] DELAY_CHECK_FOR_INACTIVE_DAYS` is a new
setting to delay the mergeable check for pull requests that have been
inactive for the specified number of days.

This avoids potentially long delays for big repositories with many pull
requests. and reduces system load overall when there are many
repositories or pull requests.

When viewing the PR, checking will start immediately and the PR merge
box will automatically reload when complete. Accessing the PR through
the API will also start checking immediately.

The default value of `7` provides a balance between system load, and
keeping behavior similar to what it was before both for users and API
access. With `0` all conflict checking will be delayed, while `-1`
always checks immediately to restore the previous behavior.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-04-24 19:26:57 +00:00
Kerwin Bryant
0a7abce8d9 Add fullscreen mode as a more efficient operation way to view projects (#34081)
Maybe fix #33482, maybe fix #34015

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-04-23 13:42:22 +08:00
wxiaoguang
ad2c51508c Fix various UI problems (#34243)
Also fix #34242
2025-04-19 08:43:22 +00:00
Kerwin Bryant
2e4923265e Fix button alignments and remove unnecessary styles (#34206)
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-04-16 08:14:10 +00:00
Kerwin Bryant
9c9f3ff45b Fix vertical centering of file tree icons and use entryIcon for submodules/symlinks (#34137)
In the file tree, the icons are not vertically centered, which affects
the overall visual consistency.
Currently, the icons of submodules and symlinks do not adopt the value
of entryIcon, resulting in inconsistent icon display.

before:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(3)](https://github.com/user-attachments/assets/d521b89f-909a-43f9-8f39-787b0243b159)

after:
![3000-gogitea-gitea-y4ulxr46c4k ws-us118 gitpod io_test_test
gitea_src_branch_main_README md
(2)](https://github.com/user-attachments/assets/4866807f-c890-4709-b595-7086011e5231)

---------

Co-authored-by: silverwind <me@silverwind.io>
2025-04-09 18:10:16 -07:00
wxiaoguang
a6fe7c04a3 Remove unused or abused styles (#33918)
* `top aligned` => `tw-align-top`
* label list: it was broken, this PR fixes it
* reference link: simplified
* settings/repos: not affected
2025-03-17 22:11:24 +08:00
silverwind
516eecdd39 Replace text-align classes with tailwind (#33905)
Small refactor to remove these CSS classes in favor of tailwind.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-03-16 12:08:16 +00:00
wxiaoguang
082ecea4e5 Add old svg class name to git entry icon (#33884)
Fix https://github.com/go-gitea/gitea/pull/33837#discussion_r1995521288
2025-03-14 23:11:29 +08:00
wxiaoguang
aee8949c10 Drop fomantic build (#33845)
We would never update or build fomantic again, we have forked it as a
private library long time ago.

So just put the JS and CSS files in "fomantic/build" into git. And use
"import" to use them.

Remove "form.js", rewrite "tab" component.

All source code is from official Fomantic UI build. Will apply patches
in separate PRs.
2025-03-11 12:44:52 +08:00
wxiaoguang
6733fda930 Add material icons for file list (#33837) 2025-03-10 15:57:17 +08:00
Guillaume
4c7c18a96c Improve "generate new access token" form (#33730)
Fix: https://github.com/go-gitea/gitea/issues/33519

As discussed in [PR
#33614](https://github.com/go-gitea/gitea/pull/33614), the
ScopedAccessTokenSelector Vue component is not particularly useful.

This PR removes the component and reverts to using HTML templates. It
also introduces some (hopefully) useful refactoring.

The Vue component was causing the UX bug reported in the linked issue.
Required form fields are now properly working, as expected (see
screenshot).

![Screenshot from 2025-02-25
22-00-28](https://github.com/user-attachments/assets/41167854-0718-48b0-a3ee-75ca3a7b8b20)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-02-27 19:40:12 +00:00
silverwind
478c8cc396 Clone button enhancements (#33362)
- Add box-shadow to default tippy theme
- Make colors for tabs match the ones from `.ui.tabular.menu`
- Remove tippy arrow and slightly offset tooltip closer to the button
- Fix setting of `aria-haspopup` when default role is used with tippy

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2025-01-27 02:07:29 +08:00
wxiaoguang
bc0dc2708b Fix form width (#33151)
Fix #33150
2025-01-08 23:57:18 +08:00
wxiaoguang
1e1b32e90e Fix dropdown menu header and mobile view (#33108)
![image](https://github.com/user-attachments/assets/3f831c8c-ef87-4282-880a-c2738f3e1d17)

----

![image](https://github.com/user-attachments/assets/c4c0519b-cfa6-42b4-bd28-205ee514eb34)

----

![image](https://github.com/user-attachments/assets/8624a605-9f2b-4905-9cbc-0af073972874)
2025-01-05 21:20:22 +00:00
wxiaoguang
d121e4c9a8 Fix and/or comment some legacy CSS problems (#33015) 2024-12-28 11:51:38 +00:00
wxiaoguang
797989c529 Improve navbar: add "admin" tip, add "active" style (#32927)
By the way, remove all "tw-" patches and unused styles.
2024-12-20 16:38:56 +00:00
wxiaoguang
a9c5e9d9a6 Remove all "floated" CSS styles (#32691)
flex but don't float

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

related pages:

### admin users

![image](https://github.com/user-attachments/assets/40dd4c46-3f5b-4a68-89b0-d0a9a806f1fc)

### milestone

![image](https://github.com/user-attachments/assets/e3efb630-f07c-4c9d-b877-71e28cddcdce)

### user account setting

![image](https://github.com/user-attachments/assets/d15609ee-016d-4aee-999a-b5455fe6185c)
2024-12-03 03:54:33 +08:00
Kerwin Bryant
0053b1ecf2 Fixed Issue of Review Menu Shown Behind (#32631)
Fixed #31144 

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-11-26 09:24:56 +08:00
charles
1bfa2c8af1 Fix large image overflow in comment page (#31740)
Close #31709 

52px is calculate by avatar size in
templates\repo\issue\view_content\comments.tmpl
```html
<img src="{{.Poster.AvatarLink $.Context}}" width="40" height="40">
```
+
```css
.ui.comments .comment > .avatar ~ .content {
  margin-left: 12px;
}
```


![圖片](https://github.com/user-attachments/assets/bf15f4d4-1574-46f6-9f5e-1fbdbf1a98b0)

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-11-15 18:34:54 +00:00
wxiaoguang
fd92eecf2f Add some handy markdown editor features (#32400)
There were some missing features from EasyMDE:

1. H1 - H3 style
2. Auto add task list
3. Insert a table

And added some tests
2024-11-04 10:14:36 +00:00
silverwind
8d011a1fbb Add :focus-visible style to buttons (#31799)
Buttons now show a focus style via
[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
when the browser deems the focus to be important, like for example when
the button is focused via keyboard navigation.

<img width="492" alt="Screenshot 2024-08-07 at 22 12 51"
src="https://github.com/user-attachments/assets/060568b1-1599-4c56-bafb-b36ebb1bec35">
<img width="479" alt="image"
src="https://github.com/user-attachments/assets/885f4e10-f496-47f0-8ae5-45827ded09f8">
2024-08-12 00:40:18 +00:00
silverwind
25db34e2e0 Always use HTML attributes for avatar size (#31509)
Many avatars were rendered in HTML with certain width/height but then
resized again in CSS. This was pointless so I removed all these cases
and made the HTML size match the previous render size.

Also did a few CSS cleanups in the tribute rendering:

<img width="648" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/cb2fafb3-5e20-46e9-814f-07df20038beb">
2024-06-28 21:29:15 +00:00
wxiaoguang
714ea1b892 Make toast support preventDuplicates (#31501)
make preventDuplicates default to true, users get a clear UI feedback
and know that "a new message appears".

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

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-06-27 13:58:38 +00:00
silverwind
7aec263cd8 Fix navbar + menu flashing on page load (#31281)
Fixes
https://github.com/go-gitea/gitea/pull/31273#issuecomment-2153771331.
Same method as used in https://github.com/go-gitea/gitea/pull/30215. All
left-opening dropdowns need to use it method.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-06-12 14:58:03 +00:00
silverwind
38862baf26 Improve mobile review ui (#31091)
Fixes: https://github.com/go-gitea/gitea/issues/31071

Not perfect but much better than before.

Before: Overflows, sticky not working, filename unreadable:

<img width="506" alt="Screenshot 2024-05-27 at 02 02 40"
src="https://github.com/go-gitea/gitea/assets/115237/a06b1edf-dece-4402-98c2-68670fca265f">

After:
<img width="457" alt="Screenshot 2024-05-27 at 01 59 06"
src="https://github.com/go-gitea/gitea/assets/115237/2a282c96-e719-4554-b418-81963ae6269c">
2024-05-28 13:41:37 +00:00
silverwind
bf22dbf6d1 Prevent tab shifting, remove extra margin on fluid pages (#31090)
1. Extend concept of https://github.com/go-gitea/gitea/pull/29831 to all
tabular menus, there were only three left that weren't already
`<overflow-menu>`.

<img width="634" alt="Screenshot 2024-05-27 at 00 42 16"
src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd">
<img width="965" alt="Screenshot 2024-05-27 at 00 29 32"
src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff">

2. Remove extra padding on `fluid padded` container like for example PR
diff view. The page margin is already correctly sized via
`.ui.container`, so this was just extraneous padding that looked ugly.

Before:
<img width="1351" alt="Screenshot 2024-05-27 at 00 45 11"
src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472">

After:
<img width="1344" alt="Screenshot 2024-05-27 at 00 45 22"
src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b">

3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title,
fixing overflow.

Before:
<img width="1333" alt="Screenshot 2024-05-27 at 00 50 14"
src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb">

After:
<img width="1316" alt="Screenshot 2024-05-27 at 00 50 26"
src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8">
2024-05-27 06:45:16 +00:00
silverwind
9fadbd9c8e Fix border radius on hovered secondary menu (#31089)
Presumably a regression from
https://github.com/go-gitea/gitea/pull/30325, these menus were showing a
border radius on hover, which is fixed with this change.

<img width="154" alt="image"
src="https://github.com/go-gitea/gitea/assets/115237/eafdc1c5-3cf5-48d1-86c4-21c58f92cfaf">
2024-05-27 04:48:41 +00:00
silverwind
b8f0c05925 Change --border-radius-circle to --border-radius-full (#30936)
Percentage-based `border-radius` [creates undesirable
ellipse](https://jsfiddle.net/silverwind/j9ko5wnt/4/) on non-square
content. Instead, use pixel value and use same wording `full` like
tailwind does, but increast to 99999px over their 9999px.
2024-05-25 14:33:34 +00:00
silverwind
986fa43118 Enable declaration-block-no-redundant-longhand-properties (#30950)
Enable
[`declaration-block-no-redundant-longhand-properties`](https://stylelint.io/user-guide/rules/declaration-block-no-redundant-longhand-properties/)
and autofix issues. The exclusions are because I find these two
shorthands to be harder to read.
2024-05-12 02:33:05 +00:00
silverwind
a585d3449a Use CSS inset shorthand (#30939)
Use [inset](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
shorthand instead of longhands. There may be more cases but these ones I
was able to definitely identify.
2024-05-11 14:28:56 +00:00
wxiaoguang
845bfa5338 Add missing menu active item background back (#30897)
Fix #30578
2024-05-08 23:01:25 +00:00
wxiaoguang
6ec56ad698 Fix some UI problems (dropdown/container) (#30849)
Follow #30345
Follow #30547

`ellipsis` / `white-space` shouldn't be put on the general dropdown components.
2024-05-06 07:17:22 +00:00
wxiaoguang
9e03890cad Fix some UI problems (install/checkbox) (#30854)
Fix the space between the box and label for checkboxes, and fix incorrect usages in "repo-issue.js"
2024-05-06 06:32:05 +00:00
silverwind
ff50beff1b Improve repo button row layout (#30668)
Since there is now a second `<input>` in the repo buttons, we can make a
better-looking layout with no empty space, except on mobile.

Also I fixed one bug with focus border on clone panel.

## Large

<img width="1163" alt="Screenshot 2024-04-23 at 22 25 22"
src="https://github.com/go-gitea/gitea/assets/115237/8135a572-aa67-4672-ad49-b76b06890b52">

## Medium
<img width="870" alt="Screenshot 2024-04-23 at 22 25 34"
src="https://github.com/go-gitea/gitea/assets/115237/9e93f61c-3315-4a78-8328-8cefad5b50fa">

## Mobile
<img width="416" alt="Screenshot 2024-04-23 at 22 25 52"
src="https://github.com/go-gitea/gitea/assets/115237/859e341f-807a-48e6-8bcf-31715963216c">
2024-05-02 19:10:49 +00:00
silverwind
feefd211bd Fix rounded border for segment followed by pagination (#30809)
Fixes https://github.com/go-gitea/gitea/issues/30673, specifically
https://github.com/go-gitea/gitea/issues/30673#issuecomment-2085329812.
2024-05-02 09:25:55 +00:00
silverwind
b4a84d5cba Rework and fix stopwatch (#30732)
Fixes https://github.com/go-gitea/gitea/issues/30721 and overhauls the
stopwatch. Time is now shown inside the "dot" icon and on both mobile
and desktop. All rendering is now done by `<relative-time>`, the
`pretty-ms` dependency is dropped.

Desktop:
<img width="557" alt="Screenshot 2024-04-29 at 22 33 27"
src="https://github.com/go-gitea/gitea/assets/115237/3a46cdbf-6af2-4bf9-b07f-021348badaac">

Mobile:
<img width="640" alt="Screenshot 2024-04-29 at 22 34 19"
src="https://github.com/go-gitea/gitea/assets/115237/8a2beea7-bd5d-473f-8fff-66f63fd50877">

Note for tippy:
Previously, tippy instances defaulted to "menu" theme, but that theme is
really only meant for `.ui.menu`, so it was not optimal for the
stopwatch popover.

This introduces a unopinionated `default` theme that has no padding and
should be suitable for all content. I reviewed all existing uses and
explicitely set the desired `theme` on all of them.
2024-04-30 14:52:46 +00:00
wxiaoguang
52d52a556a Right align the "Settings" menu item in overflow-menu (#30764)
I guess there could be enough people liking to make the Settings menu
item right aligned. As a site admin, I found it's easier to find the
right-aligned Settings menu item.

Tested with various sizes:

![image](https://github.com/go-gitea/gitea/assets/2114189/92836527-2cb2-4531-9296-233c5bd698f4)

![image](https://github.com/go-gitea/gitea/assets/2114189/3a0729fc-5e33-44b5-9fb4-3a4e787405b5)

![image](https://github.com/go-gitea/gitea/assets/2114189/9845ab6b-88e3-4e5a-8d6d-2b8af259d593)
2024-04-30 04:26:13 +00:00
silverwind
a4783c7977 Fix all rounded borders, change affected tab menus to pills (#30707)
Fixes https://github.com/go-gitea/gitea/issues/30673, all 23 issues.
Notes:

- Tab bar menus had to change to pills because of unsolvable issue with
the border-radius as tab bar renders a overlapping border onto the box
below. And I think pills look better.
- Added padding to code editor empty preview message
- Hide monaco's built-in blue focus border, we don't need it and it
never showed before either.
- Label add menu is simplified, removing the nested segment.

<img width="1322" alt="Screenshot 2024-04-25 at 22 26 19"
src="https://github.com/go-gitea/gitea/assets/115237/7e394e0c-b7ad-417d-8e9f-12f1dea93ed1">
<img width="1326" alt="Screenshot 2024-04-25 at 22 28 00"
src="https://github.com/go-gitea/gitea/assets/115237/66c8499f-aa9f-4d95-8cca-ef13dfa82c65">
<img width="997" alt="Screenshot 2024-04-25 at 22 36 53"
src="https://github.com/go-gitea/gitea/assets/115237/07896102-c71d-4246-8173-c2bc2e1d3cae">
<img width="832" alt="Screenshot 2024-04-25 at 22 56 09"
src="https://github.com/go-gitea/gitea/assets/115237/d83afc96-08ca-4adc-baf4-3d02804be57c">
<img width="361" alt="Screenshot 2024-04-25 at 22 57 12"
src="https://github.com/go-gitea/gitea/assets/115237/c7371a68-00b5-47d8-84d0-ddc5268b2b2c">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-29 20:53:15 +00:00
silverwind
0d13291464 Remove fomantic dimmer module (#30723)
Tested extensively using modal which is the only dependant.
2024-04-29 14:49:50 +00:00
silverwind
1b1fbe701c Fix active item in tab menu (#30690)
Before, item would also resize on hover because of font weight:
<img width="381" alt="Screenshot 2024-04-25 at 01 28 53"
src="https://github.com/go-gitea/gitea/assets/115237/4f3291fc-90be-4d66-ae8b-3c2f763cb956">

After:
<img width="381" alt="Screenshot 2024-04-25 at 01 28 40"
src="https://github.com/go-gitea/gitea/assets/115237/06145bf2-1ddd-4171-9217-d92c100ea405">

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-25 12:53:39 +02:00
silverwind
50167dbdfa Fix border-radius of header+segment boxes (#30667)
This is a very old bug with the bottom border-radiuses not being there
and the `:has` selector now makes it possible to cleanly solve it. It
affects all header+segment boxes, which there are many throughout the
UI:

<img width="1017" alt="Screenshot 2024-04-23 at 20 47 21"
src="https://github.com/go-gitea/gitea/assets/115237/870fe352-cc38-4bd6-bfe6-9fe8c3066f92">
2024-04-24 13:11:52 +00:00
silverwind
f75be58c8f Tweak and fix toggle checkboxes (#30527)
Fixes: https://github.com/go-gitea/gitea/issues/30524. Slightly restyled
them so that the "knob" is contained inside the background.

<img width="179" alt="Screenshot 2024-04-16 at 21 58 09"
src="https://github.com/go-gitea/gitea/assets/115237/be94517b-9cb7-46e2-ae96-fcf6767ce4ba">
<img width="187" alt="Screenshot 2024-04-16 at 21 58 50"
src="https://github.com/go-gitea/gitea/assets/115237/c13a1959-5c5a-4e88-9225-e5f6fb72e3e0">
2024-04-17 00:39:19 +02:00
silverwind
5f403832fc Tweak repo buttons on mobile and labeled button border-radius (#30503)
Fixes: https://github.com/go-gitea/gitea/issues/30514
Fixes:
https://github.com/go-gitea/gitea/pull/30288#issuecomment-2057466623

- Fix border-radius regression from
https://github.com/go-gitea/gitea/pull/30475
- Fix and simplify hover state
- Move the modal HTML so it does not interfere with the CSS
- Make the star and unwatch text show on mobile. There is still plenty
of space, below is iPhone 12 viewport size

<img width="696" alt="Screenshot 2024-04-15 at 20 34 03"
src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d">
<img width="230" alt="Screenshot 2024-04-15 at 20 31 42"
src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84">
<img width="233" alt="Screenshot 2024-04-15 at 20 31 47"
src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-16 17:46:12 +02:00
silverwind
d585d1b8c7 Remove active border on pointing menu (#30486)
It looks better when these menus don't flash a border-bottom on click.
2024-04-15 18:22:53 +00:00
silverwind
704879eab6 Fix button color on red and green buttons (#30500)
Previously these colors were provided by fomantic css. I missed them.

Fixes: https://github.com/go-gitea/gitea/issues/30499
Regressed by: https://github.com/go-gitea/gitea/pull/30475
2024-04-15 17:20:32 +00:00
silverwind
0b3ab3abb6 Revert 100% label max-width (#30481)
Partial revert of https://github.com/go-gitea/gitea/pull/30479

It's causing problems at least here:
https://github.com/go-gitea/gitea/pull/30344#discussion_r1564895591

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-04-15 01:04:02 +00:00
wxiaoguang
498ad7f404 Improve flex ellipsis (#30479)
![image](https://github.com/go-gitea/gitea/assets/2114189/857794d8-2170-42be-a5bf-47ebacbafebd)

---------

Co-authored-by: silverwind <me@silverwind.io>
2024-04-14 21:43:30 +02:00
silverwind
dee8d3f24b Remove fomantic button module (#30475)
CSS-only module. Button colors are reduced to this:

<img width="639" alt="Screenshot 2024-04-14 at 15 36 07"
src="https://github.com/go-gitea/gitea/assets/115237/882d6c02-d1de-44f2-b707-db02a9f5070d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-04-14 17:53:52 +00:00
silverwind
3ff1863bce Remove fomantic menu module (#30325)
A lot of variants are in use, so the diff stat isn't so great.

Co-authored-by: Giteabot <teabot@gitea.io>
2024-04-14 11:43:46 +00:00