mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

[v10.0/forgejo] ui: update language stats layout and click behavior (#6854) 

**Backport:** https://codeberg.org/forgejo/forgejo/pulls/6700

Fix regression of https://codeberg.org/forgejo/forgejo/pulls/6344. It was reported by @Beowulf.

JS toggle [used](49c5102b40/templates/repo/sub_menu.tmpl (L38)) a selector which was broken by that PR, which caused the legend to appear separately instead of replacing the primary repo info.

## Changes

* use clear IDs `language-stats-bar` and `language-stats-legend`
* add simple e2e test

Instead of restoring the previous behavior, I moved the legend under the stats bar. To me it didn't make a lot of sense in the first place to replace the information in the primary bar with with completely different information. It did not save much space either.

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6854
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
This commit is contained in:
forgejo-backport-action 2025-02-08 13:52:03 +00:00 committed by Gusted
parent 6ef900899e
commit bdb78d42b6
3 changed files with 28 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
templates/repo/sub_menu.tmpl
View File

@ -20,7 +20,12 @@
{{end}} {{end}}
</div> </div>
{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}} {{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
<div class="ui segment sub-menu language-stats-details tw-hidden"> <a class="ui segment show-panel toggle" id="language-stats-bar" data-panel="#language-stats-legend">
{{range .LanguageStats}}
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{end}}
</a>
<div class="ui segment sub-menu tw-hidden" id="language-stats-legend">
{{range .LanguageStats}} {{range .LanguageStats}}
<div class="item"> <div class="item">
<i class="color-icon" style="background-color: {{.Color}}"></i> <i class="color-icon" style="background-color: {{.Color}}"></i>
@ -35,11 +40,6 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<a class="ui segment language-stats show-panel toggle" data-panel=".repository-summary > .sub-menu">
{{range .LanguageStats}}
<div class="bar" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}} data-tooltip-follow-cursor="horizontal"></div>
{{end}}
</a>
{{end}} {{end}}
</div> </div>
{{end}} {{end}}

19
tests/e2e/repo-home.e2e.ts Normal file
View File

@ -0,0 +1,19 @@
// @watch start
// web_src/js/features/common-global.js
// web_src/css/repo.css
// @watch end
import {expect} from '@playwright/test';
import {save_visual, test} from './utils_e2e.ts';
test('Language stats bar', async ({page}) => {
const response = await page.goto('/user2/repo1');
expect(response?.status()).toBe(200);
await expect(page.locator('#language-stats-legend')).toBeVisible();
await save_visual(page);
await page.click('#language-stats-bar');
await expect(page.locator('#language-stats-legend')).toBeHidden();
await save_visual(page);
});

5
web_src/css/repo.css
View File

@ -2046,13 +2046,14 @@ details.repo-search-result summary::marker {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
.repository .repository-summary .segment.language-stats { .repository .repository-summary #language-stats-bar {
display: flex; display: flex;
gap: 2px; gap: 2px;
padding: 0; padding: 0;
height: 10px; height: 10px;
white-space: nowrap; white-space: nowrap;
border-radius: 0 0 3px 3px !important; border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
overflow: hidden; overflow: hidden;
} }