- annoying tooltip in mobile view
- renamed copy_hash to copy and updated the functioning $commitLink
- renamed commit-ui-redesign to commit-timeline in web_src/css/repo.css
- added condition to show total commit count in repective pages; 2 rows of commit count was displayed instead of 1, so I added an if condition to fix the issue
- added ellipsis under div tag and moved Copy Sha & Browse History of repo into the ellipsis dropdown
- added a separate div tag for this ellipsis, but it's hidden in desktop but visible only on mobile view
Followup to https://codeberg.org/forgejo/forgejo/pulls/7822
* Fix signaturebox's background breaking out of hashbox and thus breaking it's rounded corners
* Fix a bug where an extra right margin was applied to signbox's avatar on pull request overview by unrelated rule
* Untangle hashbox's CSS from .label - it was not a good partnership between them. Some extra properties, some that we had to override
* Move CSS out of "repo.css" to a separate file - it's clearly not only related to repos
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8721
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
After seeing #8111 use a webcomponent, I think that they are a neat usecase for Forgejo where most of the frontend is backend-generated, with some "island of enhancements".
I am considering using a webcomponent for the CITATION management (last occurrence of [`Blob.GetBlobContent`](https://codeberg.org/forgejo/forgejo/issues/8222)), however I noticed that the developer experience wasn't ideal.
With this PR it would be very easy to declare a webcomponent, which will be loaded only if needed (I converted `model-viewer` and `pdf-object` to this technique).
Some cleanup in the neighbor webcomponents.
## Testing
1) Create a new repository or use an existing one.
2) Upload a `.pdf` or `.glb` file (such as https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/testdata/data/viewer/Unicode%E2%9D%A4%E2%99%BBTest.glb)
3) Open the Network inspector and view the file in the repository.
- After a short loading spinner, the PDF or 3D model should be rendered in a viewer
- the related JS should have been loaded (e.g. http://localhost:3000/assets/js/model-viewer.494bf0cd.js)
- visiting another page and check that this JS file isn't loaded
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8510
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: oliverpool <git@olivier.pfad.fr>
Co-committed-by: oliverpool <git@olivier.pfad.fr>
Related: https://codeberg.org/forgejo/forgejo/pulls/6977/files#diff-fd05eba523810d46c7763db938ad5839372a074a, https://codeberg.org/forgejo/forgejo/pulls/3949, https://codeberg.org/forgejo/forgejo/pulls/7906
* use the new noJS dropdown for extra actions in org view (currently only includes report button)
* this required some refactoring of the area because the said dropdown was not built to be placed in an area where `font-size:36px` is forced onto everything
* this greatly improves consistently with user profiles which now use this type of dropdown
* I decided against making the opener button mimicrate an actual button because it looks ok as is and is consitent with menu in user profiles and because I don't think this is a good design language to make a kebab menu opener look this way
* add icon to the entry
* add atom entry
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8572
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
In similar vein of forgejo/forgejo#7416
- Fomantic's tab module is responsible for showing the right content when a tab is clicked upon. Most notably the Write/Preview tabs on the comment editor.
- Remove it and replace the javascript with our own function that is able to provide everything Forgejo needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8587
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
Related: https://codeberg.org/forgejo/forgejo/pulls/3950#issue-785253, https://codeberg.org/forgejo/forgejo/pulls/3950#issuecomment-1998551.
## Links in dropdown
* move _admin only_ User details link here, give it always-visible text
* add new _self only_ Edit profile link here
* move RSS feed link here
* add new Atom feed link here, previously unadvertised
* add new SSH keys link here (`.keys`), previously unadvertised
* add new GPG keys link here (`.gpg`), previously unadvertised
* move Block/Unblock button here
* move Report abuse link here
If primary action is available (Follow/Unfollow), dropdown with more actions goes after it. If not, it is in line with followers, in place where RSS feed button used to be.
## New dropdown
Related: https://codeberg.org/forgejo/design/issues/23, https://codeberg.org/forgejo/forgejo/issues/3853, https://codeberg.org/0ko/forgejo/issues/2.
Implemented a new dropdown: noJS-usable, JS-enhanced for better keyboard navigation and a11y.
Styling is mostly same as the existing ones have, but row density depends on `@media` pointer type.
My choice of CSS properties have been influenced of these:
* 72a3adb16b
* 51dd2293ca
Inspired-by: KiranMantha <kiranv.mantha@gmail.com>
Inspired-by: Lucas Larroche <lucas@larroche.com>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7906
Reviewed-by: Otto <otto@codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
## Motivation
The GLTF (`.gltf`, `.glb`) 3D model format is very popular for game development and visual productions.
For an indie game studio, it would be convenient for a team to view textured 3D models directly from the Forgejo interface (otherwise they need to be downloaded and opened). [Perforce](https://www.perforce.com/products/helix-dam), [Diversion](https://www.diversion.dev/), and GitHub all have this capability to differing extents.
Some discussion on 3D file support here: https://codeberg.org/forgejo/forgejo/issues/5188
## Changes
Adds a model viewer similar to [GitHub STL viewer](https://github.com/assimp/assimp/blob/master/test/models/STL/Spider_ascii.stl) for `.glb` model files, and lays some groundwork to support future files. Uses the [model-viewer](https://modelviewer.dev/) library by Google and three.js. The model viewer is interactive and can be rotated and scaled.
## How to Test
1) Create a new repository or use an existing one.
2) Upload a `.glb` file such as `tests/testdata/data/viewer/Unicode❤♻Test.glb` (CC0 1.0 Universal)
3) View the file in the repository.
- Similar to image files, the 3D model should be rendered in a viewer.
- Use mouse clicks to turn and zoom.
## Licenses
Libraries used for this change include three.js and @google/model-viewer, which are MIT and Apache-2.0 licenses respectively. Both of these are compatible with Forgejo's GPL3.0 license.
## Future Plans
1) `.gltf` was not attempted because it is a multiple file format, referencing other files in the same directory. Still need to experiment with this to see if it can work. `.glb` is a single file containing a `.gltf` and all of its other file/texture dependencies so was easier to implement.
2) The PR diff still shows the model as an unviewable bin file, but clicking the "View File" button takes you to a view screen where this model viewer is used. It would be nice to view the before and after of the model in two side-by-side model viewers, akin to reviewing a change in an image.
3) Also inserted stubs for adding contexts for GLTF, STL, OBJ, and 3MF. These ultimately don't do anything yet as only `.glb` files can be detected by the type sniffer of all of these.
## Checklist
The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).
### Tests
- I added test coverage for checking GLB file content using the first few bytes.
- [x] in their respective `typesniffer_test.go` for unit tests.
### Documentation
- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.
### Release notes
- [ ] I do not want this change to show in the release notes.
- [ ] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.
<!--start release-notes-assistant-->
## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
- [PR](https://codeberg.org/forgejo/forgejo/pulls/8111): <!--number 8111 --><!--line 0 --><!--description YWRkIG1vZGVsIHZpZXdlciBmb3IgYC5nbGJgIChHTFRGKSBtb2RlbCBpbiBmaWxlIHZpZXc=-->add model viewer for `.glb` (GLTF) model in file view<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8111
Reviewed-by: oliverpool <oliverpool@noreply.codeberg.org>
Co-authored-by: Alex Smith <amsmith.pro@pm.me>
Co-committed-by: Alex Smith <amsmith.pro@pm.me>
This implements the UI controls and information displays necessary to allow reviewing pull requests by stepping through commits individually.
Notable changes:
- Within the PR page, commit links now stay in the PR context by navigating to `{owner}/{repo}/pulls/{id}/commits/{sha}`
- When showing a single commit in the "Files changed" tab, the commit header containing commit message and metadata is displayed
- I dropped the existing buttons, since they make less sense to me in the PR context
- The SHA links to the separate, dedicated commit view
- "Previous"/"Next" buttons have been added to that header to allow stepping through commits
- Reviews can be submitted in "single commit" view
Talking points:
- The "Showing only changes from" banner made sense when that view was limited (e.g. review submit was disabled). Now that it's on par with the "all commits" view, and visually distinct due to the commit header, this banner could potentially be dropped.
Closes: #5670#5126#5671#2281#8084
## Checklist
The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).
### Tests
- I added test coverage for Go changes...
- [ ] in their respective `*_test.go` for unit tests.
- [ ] in the `tests/integration` directory if it involves interactions with a live Forgejo server.
- I added test coverage for JavaScript changes...
- [ ] in `web_src/js/*.test.js` if it can be unit tested.
- [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).
### Documentation
- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.
### Release notes
- [ ] I do not want this change to show in the release notes.
- [x] I want the title to show in the release notes with a link to this pull request.
- [ ] I want the content of the `release-notes/<pull request number>.md` to be be used for the release notes instead of the title.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7155
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Co-authored-by: Lucas Schwiderski <lucas@lschwiderski.de>
Co-committed-by: Lucas Schwiderski <lucas@lschwiderski.de>
- Before #6813, there were no `kbd`s in the UI, but now we have a few. Currently they do not have any special styling other than font family+size. But markup did have pretty good styling.
- This PR makes that styling used globally.
- The only concerning property is `background-color`, which uses a variable with `-markup-` in it, but I do not find this as a significant scope violation. We have many CSS variables but seemingly not enough generic ones.
Co-authored-by: floss4good <floss4good@disroot.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7958
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Followup to https://codeberg.org/forgejo/forgejo/pulls/4760
* some refactoring
* move rules out of repo.css to a new module
* simplify selectors by omitting .list: it is now only used to style the list itself, they're still precise enough in scope of .user-cards
* apply wrap/ellipsis to cards' content. Done via CSS to avoid spamming gt-ellipsis in the template
* prevent cards with long content from taking horizontal space from other cards
* prevent such cards from causing horizontal overflow on mobile
* prevent varying card height, it doesn't look good even with text wrapping
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6799
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This has been introduced in the cherry-picked commit from https://github.com/go-gitea/gitea/pull/34072
To me, adding this seems to be a bug as it forces a hard stop to any overflow nested within a markup div.
Why should it be removed again?
Because otherwise (wide) markdown tables might look super odd because the column breaking/wrapping logic is strange (likely related to the "anywhere" strategy being used).
- [Example of current state with `overflow-wrap`](https://codefloe.com/devxy/helm-rdepot/src/branch/main/charts/rdepot)
- [Example with `overflow-wrap` being removed](https://codefloe.com/devxy/helm-rdepot/src/branch/main/charts/rdepot)
| Current | Patched |
|---------|---------|
|  |  |
The initial change in Gitea was motivated to resolve issues of content overflow caused by the expandable file list tree view they introduced lately. However, this seem to have caused the whole README to overflow in their case, which doesn't apply to Forgejo.
When removing this in Forgejo, only large markdown content (i.e. tables) are allowed to overflow. The whole README div will not overflow (I tested this with an extreme markdown table case).
These tables are then horizontally scrollable, similar to how GitHub handles this.
If the expandable tree view is going to be added to Forgejo, this should then be handled entirely differently. This specific change is not a solution.
I've also checked other value settings to `overflow-wrap` but none had any or any desirable effect.
I did not check all other possible CSS-related options for overflow*, but this might as well be a different task per se.
For the reasons outlined above, I am quite certain this change should be reverted (again).
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7945
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: pat-s <patrick.schratz@gmail.com>
Co-committed-by: pat-s <patrick.schratz@gmail.com>
Careful removal of unused classes and rules from editable CSS. One class was used once in the UI and could have been easily replaced, others were only used in a devtest page.
Removed completely:
* pink
* olive
* violet
* background
Removed partially:
* blue
Some of them are also present in generated Fomantic code, but it's not possible to remove them easily here.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7898
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
On large screens, use grid to force right position of the button.
On small screens, just left it hang out wherever it fits. It's not possible to not make it hide behind mergebox while keeping `float`, and with grid it would overflow too much.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7746
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
Old activities are shown like before, new commits are displayed like commits in e.g. the commits list. _(Second commit)_
| New signed commits | Old (signed) commits |
|:--:|:--:|
|  |  |
Additionally the sha box was moved in an own component to unify the usage. _(First commit)_
Closes#1824
<!--start release-notes-assistant-->
## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface features
- [PR](https://codeberg.org/forgejo/forgejo/pulls/6933): <!--number 6933 --><!--line 0 --><!--description U2hvdyBpZiBjb21taXQgaXMgdmVyaWZpZWQgaW4gYWN0aXZpdHkgZmVlZCBvZiBhbiB1c2VyIG9yIGFuIG9yZ2FuaXphdGlvbiBmb3IgbmV3IGFjdGl2aXR5-->Show if commit is verified in activity feed of an user or an organization for new activity<!--description-->
<!--end release-notes-assistant-->
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6933
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Beowulf <beowulf@beocode.eu>
Co-committed-by: Beowulf <beowulf@beocode.eu>
- The pagination labels 'First', 'Previous', 'Next' and 'Last' are
hidden away when the screen width becomes smaller. However this also
hides them from the screen reader. Instead of using `display: none`, use
some well-known tricks to still make them visible to the screen reader.
- Add E2E test.
- ResolvesCodeberg/Community#1858
Followup to https://codeberg.org/forgejo/forgejo/pulls/7481.
Fix a bug reported by @Gusted where the switch would jump ~1px up when switched to preview mode.
It was because the switch is always center-aligning to the largest element in the toolbar. With toolbar buttons disappearing, the largest element was the switch itself. By placing it in a box with same height as the buttons we can ensure it can always stay in the same position.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7492
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
- Fomantic's dimmer module is responsible for dimming the page and make some element the primary focus on the page (e.g. modal). This module is only used by Fomantic's modal module.
- Remove it and replace the javascript with our own `Dimmer` class that is able to provide Fomantic's modal module with everything it needs.
- Replace the CSS with our own bare minimum CSS.
- No functionality or visual is affected by this replacement.
- E2E test added.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7416
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
- Follow up for #7314. Turns out this impacted the positioning of icons in tabs negatively, like the "Conversation"/"Commits"/"Files changed".
- Limit the change to the `overflow-menu` element.
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7356
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: Simon Ochsenreither <simon@ochsenreither.de>
Co-committed-by: Simon Ochsenreither <simon@ochsenreither.de>
- Add `vertical-align: baseline` to the svg class.
- Improves the vertical alignment of the icons that contain text in the overflow menu, and possibly in other places.
Co-authored-by: Simon Ochsenreither <simon@ochsenreither.de>
Co-committed-by: Simon Ochsenreither <simon@ochsenreither.de>
* home buttons: use `button-sequence` for consistency of gaps with other ui
* folder-actions: use `button-sequence` for better overflowing and so gap actually works instead of relying on whitespace, because currently it doesn't due to lack of flex
* introduce variable `--button-spacing` for `button-row` and `button-sequence`
* it's `0.33rem` on desktop for more pleasant hovering over button rows
* it's `0.5rem` on touchscreens for worrying less about misstapping
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7271
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
