Followup https://github.com/go-gitea/gitea/pull/26478
## Archived labels UI
Changed:
* Enhanced the Filtered UI page to seamlessly incorporate a list of
archived labels.
Outsourced:
* Defer the implementation of specialized handling for archived labels
to upcoming pull requests. This step will be undertaken subsequent to
the successful merge of this pull request.
Screenshots
---
Part of https://github.com/go-gitea/gitea/issues/25237
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Co-authored-by: silverwind <me@silverwind.io>
Removed CSS helper classes (some of them are not useful while some of
them are abused often)
* `gt-db`: in most cases it could be replaced by `gt-df` and the flex
layout should be encouraged. Other cases: either it does need the
`gt-df` (eg: by using `div` directly) or it is an abuse (eg: the warning
message in a form)
* `gt-di`: it doesn't seem useful, or it could be replaced by `gt-dib`
in most cases.
* `gt-dif`: not useful, it could be replaced by `flex-text-inline` or
`gt-df`
* `gt-js`: never used
* All `<i class="icon gt-df gt-ac gt-jc">` could be written as `<i
class="icon">`
## Some UI samples
### Admin Notice
### Admin Stacktrace
### Org Home
### Org Team Repo
### Release List
### User Setting Application Token Scope
Co-authored-by: Giteabot <teabot@gitea.io>
Replace Fomantic `loader` CSS module with our existing `is-loading`
spinner. Only three places in the UI used this module, which are
pictured here:
imagediff:
<img width="1237" alt="Screenshot 2023-08-22 at 22 18 01"
src="b0d82531-f05e-43c6-9e5b-1bfc268c056d">
webauthn:
<img width="894" alt="Screenshot 2023-08-22 at 22 05 05"
src="7b583425-d944-474a-a57a-22a65bbd8b29">
heatmap (I removed the previous loading text, it was unreadable because
it was tiny and on fast machines only visible for a fraction of a
second):
<img width="764" alt="Screenshot 2023-08-22 at 22 18 44"
src="1c7472d6-3e17-4224-a992-d8c0b380cc73">
Also, heatmap container does not resize any more after loading now and
previous duplicate id `user-heatmap` is gone.
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
The "btn-octicon is-loading" was introduced by #21842 , it is only used
by the "Copy Content" button, but the "btn-octicon" selector would
affect too many uncertain elements.
Now there is a general "small-loading-icon" class, so the "btn-octicon
is-loading" could be removed.
1. Use `is-loading` instead of `ui loader`
2. Introduce class name `image-diff-tabs`, instead of searching `gt-hidden`, which is fragile
3. Align the UI elements, see the screenshots.
Fix#26617
1. Separate the "flex-list" examples into a dedicated template, and add some more examples
2. Use `flex-basis` instead of `flex-shrink` for `flex-item-trailing`, to avoid wrapping the texts too aggressively
3. Some `flex-wrap: wrap;` are removed
Add `box-shadow` replacement to the `floating` dropdown variant as well,
which was missed in https://github.com/go-gitea/gitea/pull/26469. The
Fomantic style has `!important`, so this has to have too. Also made a
tiny adjustment to shadow color on dark theme.
<img width="305" alt="Screenshot 2023-08-18 at 16 40 34"
src="a0aac9cb-6393-4d69-b0b3-00eaac5ccf9f">
<img width="202" alt="Screenshot 2023-08-18 at 16 40 22"
src="0a5fa3aa-7452-4dbd-86ed-ccbc1c872ebb">
Co-authored-by: Giteabot <teabot@gitea.io>
Fix#26537
Use the same default line-height as "normalize.css" instead of "1". "1"
is not right because it doesn't work with descent part and causes
overflow problems.
---------
Co-authored-by: silverwind <me@silverwind.io>
Removes all dropdown and dimmer animations. Works everywhere as far as I
can tell, but need to give this thorough testing. Removes around 70kb
JS/CSS.
Note, I'm not 100% sure regarding the various callbacks, those will need
more investigation, but it appears to work nonetheless.
Fixes: https://github.com/go-gitea/gitea/issues/15709
The color is taken from "Name"
Before:
After:
Co-authored-by: Giteabot <teabot@gitea.io>
As title, that's simmilar with github.
---------
Signed-off-by: a1012112796 <1012112796@qq.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Jason Song <i@wolfogre.com>
This PR refactors a bunch of projects-related code, mostly the
templates.
The following things were done:
- rename boards to columns in frontend code
- use the new `ctx.Locale.Tr` method
- cleanup template, remove useless newlines, classes, comments
- merge org-/user and repo level project template together
- move "new column" button into project toolbar
- move issue card (shared by projects and pinned issues) to shared
template, remove useless duplicated styles
- add search function to projects (to make the layout more similar to
milestones list where it is inherited from 😆)
- maybe more changes I forgot I've done 😆Closes#24893
After:
---------
Co-authored-by: silverwind <me@silverwind.io>
Before:
After:
In #26214, we changed each row's display into `flex` which caused this
problem.
In old version:
Maybe we can add paddings here?
In old version;
This PR introduces a new UI element type for Gitea called `flex-item`.
It consists of a horizontal card with a leading, main and trailing part:
The idea behind it is that in Gitea UI, we have many cases where we use
this kind of layout, but it is achieved in many different ways:
- grid layout
- `.ui.list` with additional hacky flexbox
- `.ui.key.list` - looks to me like a style set originally created for
ssh/gpg key list, was used in many other places
- `.issue.list` - created for issue cards, used in many other places
- ...
This new style is based on `.issue.list`, specifically the refactoring
of it done in #25750.
In this PR, the new element is introduced and lots of templates are
being refactored to use that style. This allows to remove a lot of
page-specific css, makes many of the elements responsive or simply
provides a cleaner/better-looking way to present information.
A devtest section with the new style is also available.
<details>
<summary>Screenshots (left: before, right: after)</summary>
</details>
---------
Co-authored-by: Giteabot <teabot@gitea.io>
Not too important, but I think that it'd be a pretty neat touch.
Also fixes some layout bugs introduced by a previous PR.
---------
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-authored-by: Caesar Schinas <caesar@caesarschinas.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Same as https://github.com/go-gitea/gitea/pull/26026 but for the user
settings page. It introduces a new `flex-container` class and shares it
across both pages.
Before and After:
<img width="1264" alt="Screenshot 2023-07-21 at 19 35 57"
src="1358dab4-55c0-40ce-a4d5-673099304f3d">
<img width="1269" alt="Screenshot 2023-07-21 at 19 35 42"
src="34812f6d-dc65-4009-b977-90e03efdc6d1">
This PR adds a new dropdown to select a commit or a commit range
(shift-click like github) of a Pull Request.
After selection of a commit only the changes of this commit will be shown.
When selecting a range of commits the diff of this range is shown.
This allows to review a PR commit by commit or by viewing only commit ranges.
The "Show changes since your last review" mechanism github uses is implemented, too.
When reviewing a single commit or a commit range the "Viewed" functionality is disabled.
## Screenshots
### The commit dropdown
### Selecting a commit range
### Show changes of a single commit only
### Show changes of a commit range
Fixes https://github.com/go-gitea/gitea/issues/20989
Fixes https://github.com/go-gitea/gitea/issues/19263
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: KN4CK3R <admin@oldschoolhack.me>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: delvh <dev.lh@web.de>
It was caused by updating `asciinema-player`, the upstream changed the
CSS class prefix:
`40505e479e`
<details>
<summary>Before:</summary>
<img width="1320" alt="image"
src="b91a2cf5-c1da-43d6-bac2-bc278728b11e">
</details>
<details>
<summary>After:</summary>
<img width="1311" alt="image"
src="c9872d25-e0bb-43d4-8b1e-d87c6b03c0a2">
</details>
This PR includes #26007 's changes but have a UI to prompt administrator
about the deprecated settings as well as the log or console warning.
Then users will have enough time to notice the problem and don't have
surprise like before.
<img width="1293" alt="图片"
src="c33355f0-1ea7-4fb3-ad43-cd23cd15391d">
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Extract from https://github.com/go-gitea/gitea/pull/26043, just the
padding increase.
Before and After (hard to notice, but it's there):
<img width="427" alt="Screenshot 2023-07-25 at 19 37 12"
src="9543dcda-eccb-4739-b7dd-06b076108ab4">
<img width="420" alt="Screenshot 2023-07-25 at 19 37 26"
src="0a9c3724-81a1-4c67-a13b-4b728a51fc3a">
Co-authored-by: Giteabot <teabot@gitea.io>
Agenda:
This PR contains UI fixes for release tag page / wiki page /
subscription page.
Here is the list of changes made in this PR.
1. Release tag page
a. In the New Release page the whole ui got change. Now it is covering
in full page page with mobile view port. Description about the release
the editor preview now has a min-height. and the check boxes for
`Prerelease` and option are left aligned. Couple of divider are added.
2. Subscription page:
a. In the subscription page the ui was distorted in mobile view. Now its
fix. Couple of unused styles were removed.
3. Create Wiki page:-
a. In the page the preview of markdown is now contains a fix min-height
so this it will not distorted in desktop view and a divider is added
before action buttons. Couple of unused styles were removed.
# Before
## Release page
<img width="1391" alt="image"
src="319dec2e-08cf-40c5-920a-d651930ee28e">
<img width="494" alt="image"
src="03249f40-2d36-4552-bb93-43832aac2f8b">
<img width="1390" alt="image"
src="bf8b2d31-4857-480b-abd9-66a3ae6e24d8">
<img width="484" alt="image"
src="c3a58210-a337-4c8e-89a6-edb3975986bb">
Editor
<img width="958" alt="image"
src="3bdd299d-d12b-4774-ace9-7184b1a57b18">
Editor preview
<img width="1293" alt="image"
src="2b61c528-c018-4800-ab86-07aae56adecd">
<img width="484" alt="image"
src="ff7bc5ee-9dc0-4f78-a0b1-94277ab27700">
#### After
<img width="1439" alt="image"
src="94f7e073-5977-40bd-98ef-0711ed0815cc">
<img width="1384" alt="image"
src="83e3105f-c1ee-4329-b90f-8bb724dac50f">
<img width="1440" alt="image"
src="05f024a5-52eb-4072-8599-d6ca12f6fad1">
<img width="1387" alt="image"
src="c73f069b-572a-4a13-aaa9-fc5b4dd3420d">
<img width="1440" alt="image"
src="2f98f012-8e64-4a12-9595-5acdef18f85c">
Markdown preview change
<img width="1368" alt="image"
src="31e583ec-48f6-4f1a-8b56-0164fcb127a5">
Wiki page
Before
<img width="1393" alt="image"
src="9c9cfdf6-3c2a-4f47-883b-76624d96f9a0">
<img width="499" alt="image"
src="522ad573-1ad2-4fa2-8bf7-48a3dded14e7">
Preview of mark down.
<img width="488" alt="image"
src="998f3c25-9fca-43c8-b1ff-648aab291727">
Footer
<img width="490" alt="image"
src="89c6cf4e-4599-4403-bac8-285efdd9361a">
After
<img width="1389" alt="image"
src="1ee0fc72-f864-44c0-b2e4-e0e8a8470204">
<img width="498" alt="image"
src="b35b9a5d-8e26-4869-a6ed-6cef1f4a87a6">
<img width="499" alt="image"
src="b40bcbaa-fca6-42ab-9556-f950811b565d">
Preview tab block has min-height
<img width="1392" alt="image"
src="4a53d6c2-596c-423a-91b1-533cef734f93">
Mobile view
<img width="496" alt="image"
src="c5ffc4c9-3c21-4cad-bc32-2ea3f0644a08">
<img width="497" alt="image"
src="08dd560f-4333-41ec-95b9-8154910d2254">
<img width="496" alt="image"
src="9fba8f55-727b-4756-a4a6-2070c719b15b">
## Subscription page
### Before
<img width="1393" alt="image"
src="0a7d561b-f56c-4ebe-93bd-952abecd437f">
<img width="492" alt="image"
src="4dc44d0c-ea81-4130-8afb-8f271c029e8a">
After
<img width="1394" alt="image"
src="a3567e30-2b5b-49d6-9ecb-2ab481ea4d36">
<img width="494" alt="image"
src="024da9e2-dfc4-4672-95cc-a6ac034d9712">
<img width="508" alt="image"
src="b748ecea-427c-4f8b-a1bf-08f82f9a42e6">
Resolves#25057
This adds a E-Mail field to Organisations. The E-Mail is just shown on
the Profile when it is visited by a logged in User. The E-mail is not
used for something else.
**Screenshots:**
---------
Co-authored-by: Denys Konovalov <kontakt@denyskon.de>
Co-authored-by: Denys Konovalov <privat@denyskon.de>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
Some "text truncate email" code were just copied&pasted, they are not
suitable for most admin tables.
For the table layouts, some "max-width" helpers could be very helpful.
At least, we can get rid of the confusing "email" CSS class.
- Send request to get branch/tag list, use loading icon when waiting for
response.
- Only fetch when the first time branch/tag list shows.
- For backend, removed assignment to `ctx.Data["Branches"]` and
`ctx.Data["Tags"]` from `context/repo.go` and passed these data wherever
needed.
- Changed some `v-if` to `v-show` and used native `svg` as mentioned in
https://github.com/go-gitea/gitea/pull/25719#issuecomment-1631712757 to
improve perfomance when there are a lot of branches.
- Places Used the dropdown component:
Repo Home Page
<img width="1429" alt="Screen Shot 2023-07-06 at 12 17 51"
src="6accc7b6-8d37-4e88-ae1a-bd2b3b927ea0">
Commits Page
<img width="1431" alt="Screen Shot 2023-07-06 at 12 18 34"
src="2d0bf306-d1e2-45a8-a784-bc424879f537">
Specific commit -> operations -> cherry-pick
<img width="758" alt="Screen Shot 2023-07-06 at 12 23 28"
src="1e557948-3881-4e45-a625-8ef36d45ae2d">
Release Page
<img width="1433" alt="Screen Shot 2023-07-06 at 12 25 05"
src="3ec82af1-15a4-4162-a50b-04a9502161bb">
- Demo
d45d266b-3eb0-465a-82f9-57f78dc5f9f3
- Note:
UI of dropdown menu could be improved in another PR as it should apply
to more dropdown menus.
Fix#14180
---------
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Reduce margins around admin boxes and reduce sidebar size from 275px to
240px. This is the same 16px margin we use on issue pages.
Before and After:
<img width="1270" alt="Screenshot 2023-07-21 at 00 28 11"
src="f9b0dcb0-8f7e-49b4-b130-54bf31c142fd">
<img width="1271" alt="Screenshot 2023-07-21 at 00 30 51"
src="ddd75d59-9ab9-4061-8989-852e89727560">
- Tell the renderer to use the `document` mode, so it's consistent with
other renderers.
- Use the same padding as `.file-view.markup`, so it's consistent with
other containers that contain markup rendering.
- Resolves https://codeberg.org/forgejo/forgejo/issues/833
Co-authored-by: Gusted <postmaster@gusted.xyz>
This commit removes the hard-coded height of 500px, using that as a
max-height instead. The height of items in the dropdown menu, assuming a
default font size of 16px, is 36px, so the old CSS would cause overly
large dropdown menus in instances where less than 14 languages are
offered.
Refs: https://codeberg.org/forgejo/forgejo/pulls/1000
Co-authored-by: rome-user <rome-user@noreply.codeberg.org>
Co-authored-by: Giteabot <teabot@gitea.io>
Use a real button and add an aria-label.
Additionally, show the button whenever it is focused.
See https://codeberg.org/forgejo/forgejo/issues/998 for explanation.
Our handling of this button is now equal to that of GitHub.
Nothing has changed visually.
the stacking takes up screen space - display the tabs as the navigation
bar. github uses the same layout.
Screenshots (left before, right after):
Large screen:
Issue filters are being used on repo list page and on milestone issues
page, and the code is mostly duplicated.
This PR does the following changes:
- move issue filters into a shared template
- allow filtering milestone issues by project, so no need to hide this
filter on milestone issues page
- remove some dead code (e. g. issue actions in milestone issues
template)
- fix label filter dropdown width
---------
Co-authored-by: 6543 <6543@obermui.de>
Replace #25580Fix#19453
The problem was: when users set "GITEA__XXX__YYY" , the "install page"
doesn't respect it.
So, to make the result consistent and avoid surprising end users, now
the "install page" also writes the environment variables to the config
file.
And, to make things clear, there are enough messages on the UI to tell
users what will happen.
There are some necessary/related changes to `environment-to-ini.go`:
* The "--clear" flag is removed and it was incorrectly written there.
The "clear" operation should be done if INSTALL_LOCK=true
* The "--prefix" flag is removed because it's never used, never
documented and it only causes inconsistent behavior.
This PR does various modifications on the issue list shared template:
- restructure layout to achieve better responsiveness
- fix various style issues
- restructure styles (better result with less code :)
- remove numerous `gt-*` patches and other unneeded classes -> use
existing css classes
<details>
<summary>Before:</summary>
</details>
<details>
<summary>After:</summary>
</details>
---------
Co-authored-by: silverwind <me@silverwind.io>
Minor tweaks to repo topics:
- Use gap instead of margin to align "Manage Topics" when no topics
present
- Add margin to description instead
Before:
<img width="1232" alt="Screenshot 2023-07-08 at 13 08 15"
src="a5d3586c-6cbf-4b74-8137-11d91f2cbb45">
<img width="1233" alt="Screenshot 2023-07-08 at 13 08 05"
src="59b18d93-e4cb-4f2b-9bc2-d6aa63f93827">
After:
<img width="1232" alt="Screenshot 2023-07-08 at 13 08 42"
src="470d42ad-3f7e-40f9-b0a1-203b4af77eb9">
<img width="1231" alt="Screenshot 2023-07-08 at 13 08 32"
src="42d18048-748c-4a3f-ab89-3403866cef34">
---------
Changes:
* Rename gt-tl/gt-tc/gt-tr to gt-text-left/gt-text-center/gt-text-right
* The gt-ab and gt-br-0 are removed because they are not needed anymore
* Fix the clone dropdown button padding by ":not(.icon)"
Before:
<details>
</details>
After:
<details>
</details>
Fixes#25758
Co-authored-by: Giteabot <teabot@gitea.io>
