Commit graph

21 commits

Author SHA1 Message Date
0ko 64462a6980 ui: improve button gap consistency in repos (#4365)
Improve UI in a few areas in a similar way to dc0d3a40ab. Ensure consistent 0.5em gaps in button rows, make buttons have more consistent horizontal paddings for better clickability.

Preview:
https://codeberg.org/attachments/cfca200a-3b68-4ba8-9876-75cea7822a00
https://codeberg.org/attachments/aaa5d387-919b-45af-8854-6d0f5273125f
https://codeberg.org/attachments/989225b7-b1dd-491d-bf76-7e4a962ea54e

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4365
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
(cherry picked from commit c19222b22f)
2024-07-07 15:29:50 +00:00
silverwind 5016bc5d5c
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>
(cherry picked from commit ec3d467f15a683b305ac165c3eba6683628dcb25)

Conflicts:
	templates/install.tmpl
	templates/repo/diff/conversation.tmpl
	templates/repo/issue/view_content/conversation.tmpl
	templates/repo/issue/view_content/sidebar.tmpl
	templates/repo/issue/view_title.tmpl

	resolved by prefering Forgejo version and applying the
	commands to all files
2024-03-30 07:17:29 +01:00
silverwind c82bef515e
Migrate margin and padding helpers to tailwind (#30043)
This will conclude the refactor of 1:1 class replacements to tailwind,
except `gt-hidden`. Commands ran:

```bash
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-0#tw-$1$2-0#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-1#tw-$1$2-0.5#g' {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-2#tw-$1$2-1#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-3#tw-$1$2-2#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-4#tw-$1$2-4#g'   {web_src/js,templates,routers,services}/**/*
perl -p -i -e 's#gt-(p|m)([lrtbxy])?-5#tw-$1$2-8#g'   {web_src/js,templates,routers,services}/**/*
```

(cherry picked from commit 68ec9b48592fe88765bcc3a73093d43c98b315de)

Conflicts:
	routers/web/repo/view.go
	templates/base/head_navbar.tmpl
	templates/repo/code/recently_pushed_new_branches.tmpl
	templates/repo/diff/box.tmpl
	templates/repo/diff/compare.tmpl
	templates/repo/diff/conversation.tmpl
	templates/repo/header.tmpl
	templates/repo/issue/filter_list.tmpl
	templates/repo/issue/view_content/conversation.tmpl
	templates/repo/issue/view_content/sidebar.tmpl
	templates/repo/settings/options.tmpl
	templates/repo/view_file.tmpl
	templates/shared/user/blocked_users.tmpl
	templates/status/500.tmpl
	web_src/js/components/DashboardRepoList.vue
	resolved by prefering Forgejo version and applying the
	commands to all files
2024-03-30 07:17:29 +01:00
silverwind 5940dc17fd
Migrate gap helpers to tailwind (#30034)
Commands ran:

```sh
perl -p -i -e 's#gt-gap-0#tw-gap-0#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-1#tw-gap-0.5#g' web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-2#tw-gap-1#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-3#tw-gap-2#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-4#tw-gap-4#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-5#tw-gap-8#g'   web_src/js/**/* templates/**/*

perl -p -i -e 's#gt-gap-x-0#tw-gap-x-0#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-x-1#tw-gap-x-0.5#g' web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-x-2#tw-gap-x-1#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-x-3#tw-gap-x-2#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-x-4#tw-gap-x-4#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-x-5#tw-gap-x-8#g'   web_src/js/**/* templates/**/*

perl -p -i -e 's#gt-gap-y-0#tw-gap-y-0#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-y-1#tw-gap-y-0.5#g' web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-y-2#tw-gap-y-1#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-y-3#tw-gap-y-2#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-y-4#tw-gap-y-4#g'   web_src/js/**/* templates/**/*
perl -p -i -e 's#gt-gap-y-5#tw-gap-y-8#g'   web_src/js/**/* templates/**/*

(cherry picked from commit 90a4f9a49eecc4b672df0c29f5034be25244191c)

Conflicts:
	templates/repo/diff/box.tmpl
	templates/repo/diff/conversation.tmpl
	prefered Forgejo files & re-ran the commands to ensure all are applied
2024-03-26 19:04:28 +01:00
silverwind 3ea7437fa6
Fix incorrect tailwind migration (#30007)
Fixes https://github.com/go-gitea/gitea/issues/30005. Regression from
https://github.com/go-gitea/gitea/pull/29945.

There was only once instance of `tw-content-center` before that PR, so I
just ran below command and reverted that one instance.

```sh
perl -p -i -e 's#tw-content-center#tw-items-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
```

(cherry picked from commit 04f9ad056882fc3f21b247b16f84437adf0f36d8)

Conflicts:
	templates/repo/diff/conversation.tmpl
	templates/repo/header.tmpl
	templates/repo/issue/filter_list.tmpl
	templates/repo/issue/view_content/conversation.tmpl
	templates/repo/wiki/view.tmpl
	web_src/js/components/DashboardRepoList.vue
	re-ran the command after discarding the Gitea changes to
	ensure all Forgejo files are also covered
2024-03-26 19:04:27 +01:00
Earl Warren 9c9f40f6d3
Replace 10 more gt- classes with tw- (#29945) (step 2)
Same operation ran to cover all Forgejo specific files as well.

---

Likely the biggest change of the tailwind refactors. Only thing of note
is that `tw-flex-1` resolves to `flex: 1 1 0%` while our `gt-f1` was
`flex: 1 1 0`, I don't think it will make any difference. Commands I've
ran:

```sh
perl -p -i -e 's#gt-vm#tw-align-middle#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-fw#tw-flex-wrap#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-f1#tw-flex-1#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-fc#tw-flex-col#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-sb#tw-justify-between#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-je#tw-justify-end#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-jc#tw-justify-center#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-ac#tw-content-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
perl -p -i -e 's#gt-df#tw-flex#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
perl -p -i -e 's#gt-dib#tw-inline-block#g' web_src/js/**/* templates/**/* models/**/* tests/**/*

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit f88ad5424f381bf2a45fd863b551c5a72891bb68)
2024-03-26 19:04:27 +01:00
delvh 7960ba7e2b
Always use ctx.Locale.Tr inside templates (#27231) 2023-09-25 08:56:50 +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
wxiaoguang ee9e83b230
Remove incorrect CSS helper classes (#26712) 2023-08-25 06:47:59 +00:00
sebastian-sauer 25455bc670
Show outdated comments in files changed tab (#24936)
If enabled show a clickable label in the comment. A click on the label
opens the Conversation tab with the comment focussed - there you're able
to view the old diff (or original diff the comment was created on).

**Screenshots**


![image](https://github.com/go-gitea/gitea/assets/1135157/63ab9571-a9ee-4900-9f02-94ab0095f9e7)

![image](https://github.com/go-gitea/gitea/assets/1135157/78f7c225-8d76-46f5-acfd-9b8aab988a6c)



When resolved and outdated:

![image](https://github.com/go-gitea/gitea/assets/1135157/6ece9ebd-c792-4aa5-9c35-628694e9d093)

Option to enable/disable this (stored in user settings - default is
disabled):

![image](https://github.com/go-gitea/gitea/assets/1135157/ed99dfe4-76dc-4c12-bd96-e7e62da50ab5)

![image](https://github.com/go-gitea/gitea/assets/1135157/e837a052-e92e-4a28-906d-9db5bacf93a6)



fixes #24913

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-06-21 16:08:12 +00: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
wxiaoguang d32af84a10
Refactor hiding-methods, remove jQuery show/hide, remove .hide class, remove inline style=display:none (#22950)
Close #22847

This PR:

* introduce Gitea's own `showElem` and related functions
* remove jQuery show/hide
* remove .hide class
* remove inline style=display:none 

From now on:

do not use:
* "[hidden]" attribute: it's too weak, can not be applied to an element
with "display: flex"
* ".hidden" class: it has been polluted by Fomantic UI in many cases
* inline style="display: none": it's difficult to tweak
* jQuery's show/hide/toggle: it can not show/hide elements with
"display: xxx !important"

only use:
* this ".gt-hidden" class
* showElem/hideElem/toggleElem functions in "utils/dom.js"

cc: @silverwind , this is the all-in-one PR
2023-02-19 12:06:14 +08:00
zeripath 51383ec084
Move helpers to be prefixed with gt- (#22879)
As discussed in #22847 the helpers in helpers.less need to have a
separate prefix as they are causing conflicts with fomantic styles

This will allow us to have the `.gt-hidden { display:none !important; }`
style that is needed to for the reverted PR.

Of note in doing this I have noticed that there was already a conflict
with at least one chroma style which this PR now avoids.

I've also added in the `gt-hidden` style that matches the tailwind one
and switched the code that needed it to use that.

Signed-off-by: Andrew Thornton <art27@cantab.net>

---------

Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2023-02-13 17:59:59 +00:00
Gusted 29c00eb1ed
Improve code comment review on mobile (#21461)
- Fix placement of avatar image, this was not placed in the
`comment-header-left` and add CSS to cover the limiting of width+height
of avatar for code-review comment on "Files changed" page. This fixes
the big noticeable avatar issue.
- Apply `margin-bottom` to the "next" button, so it's consistent with
the "previous" button.
- Make sure the "next"/"previous" start at `flex-start` on mobile and
not off-screen at `flex-end`. As well force them to have `flex: 1` so
they won't overflow on x-asis. This also requires the `width: 100%` for
the `.ui.buttons` div.
- Resolves #20074


### Before
<details><img width="512"
src="https://user-images.githubusercontent.com/25481501/195952930-09560cad-419f-43a3-a8a4-a4166c117994.jpg"></details>

### After
<details><img width="512"
src="https://user-images.githubusercontent.com/25481501/197340081-0365dfa8-4344-46b4-8702-a40c778c073f.jpg"></details>

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
2022-10-25 19:11:49 +08:00
Gusted d55a0b7238
Refactor i18n to locale (#20153)
* Refactor `i18n` to `locale`

- Currently we're using the `i18n` variable naming for the `locale`
struct. This contains locale's specific information and cannot be used
for general i18n purpose, therefore refactoring it to `locale` makes
more sense.
- Ref: https://github.com/go-gitea/gitea/pull/20096#discussion_r906699200

* Update routers/install/install.go
2022-06-27 15:58:46 -05:00
Jimmy Praet f424862cbb
Fix previous/next button size (#16284) 2021-06-28 21:36:09 +02:00
Jimmy Praet fe66b612b5
Add previous/next buttons to review comments (#16273)
Co-authored-by: Norwin <noerw@users.noreply.github.com>
Signed-off-by: Andrew Thornton <art27@cantab.net>
Co-authored-by: zeripath <art27@cantab.net>
2021-06-27 20:57:01 +01:00
silverwind 2a9b8d173a
Code comments improvements (#15722)
- Right-align the Reply and Resolve buttons
- Center Resolved text and add some padding
- Add padding to inline comments
- Indent the comment content to align with author name
- Re-parent form to allow better button layout space.

Co-authored-by: zeripath <art27@cantab.net>
2021-05-08 18:28:25 +03:00
silverwind aee5ef0051
Diff box fixes (#15214)
- Fix misaligned "Show Outdated" buttons via flexbox
- Add hover effect to "Show Outdated" buttons
- Remove overreaching margin from selector .diff-file-box and handle
  cases individually.

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

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2021-03-31 18:19:53 -04:00
Jimmy Praet bcb7f35221
Do not reload page after adding comments in Pull Request reviews (#13877)
Fixed #8861 
* use ajax on PR review page

* handle review comments

* extract duplicate code

FetchCodeCommentsByLine was initially more or less copied from fetchCodeCommentsByReview. Now they both use a common findCodeComments function instead

* use the Engine that was passed into the method

Co-authored-by: 6543 <6543@obermui.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: Lauris BH <lauris@nix.lv>
2021-01-08 23:49:55 +02:00
Jimmy Praet 47e4d1a4e2
Reply button is not removed when deleting a code review comment (#13774)
Co-authored-by: mrsdizzie <info@mrsdizzie.com>
2020-12-03 17:05:27 +02:00