saltyming/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-02-07 09:29:49 +00:00
Code Activity

ui: update language stats layout and click behavior (#6700)

Browse source 
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6700
Reviewed-by: Michael Kriese <michael.kriese@gmx.de>
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-01-29 16:55:10 +00:00
parent fd285bfc4e
commit 4cc0320ed0
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}}
</div>
{{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}}
<div class="item">
<i class="color-icon" style="background-color: {{.Color}}"></i>
@ -35,11 +40,6 @@
</div>
{{end}}
</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}}
</div>
{{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

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