fix(ui): change escaping button bg on selected lines (#7944)

* add escape part of line to the list of selectors, so it doesn't cause a hole in selected lines
* fix duplicated element ID in template
* move some CSS out of base.css to dedicated files, so it is less cluttered

Before: https://codeberg.org/attachments/0eaa277b-98e7-42de-98a2-6aca99ffcbe4

After: https://codeberg.org/attachments/124bbb86-c377-4fef-a0e3-403e8c850275

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/7944
Reviewed-by: floss4good <floss4good@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2025-05-28 05:16:19 +02:00
parent ee663c5af8
commit e2278e5a38
8 changed files with 80 additions and 42 deletions

View file

@ -1,7 +1,13 @@
// Copyright 2024 The Forgejo Authors. All rights reserved.
// SPDX-License-Identifier: GPL-3.0-or-later
// @watch start
// web_src/js/features/repo-code.js
// web_src/css/repo.css
// services/gitdiff/**
// templates/repo/view_file.tmpl
// web_src/css/repo.css
// web_src/css/repo/file-view.css
// web_src/js/features/repo-code.js
// web_src/js/features/repo-unicode-escape.js
// @watch end
import {expect, type Page} from '@playwright/test';
@ -16,7 +22,7 @@ async function assertSelectedLines(page: Page, nums: string[]) {
.toStrictEqual(nums);
// the first line selected has an action button
if (nums.length > 0) await expect(page.locator(`#L${nums[0]} .code-line-button`)).toBeVisible();
if (nums.length > 0) await expect(page.locator(`.lines-num:has(#L${nums[0]}) .code-line-button`)).toBeVisible();
};
await pageAssertions();
@ -99,3 +105,25 @@ test.describe('As authenticated user', () => {
await save_visual(page);
});
});
test('Unicode escape highlight', async ({page}) => {
const unselectedBg = 'rgba(0, 0, 0, 0)';
const selectedBg = 'rgb(255, 237, 213)';
const response = await page.goto('/user2/unicode-escaping/src/branch/main/a-file');
expect(response?.status()).toBe(200);
await expect(page.locator('.unicode-escape-prompt')).toBeVisible();
expect(await page.locator('.lines-num').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
expect(await page.locator('.lines-escape').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
expect(await page.locator('.lines-code').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(unselectedBg);
await page.locator('#L1').click();
expect(await page.locator('.lines-num').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
expect(await page.locator('.lines-escape').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
expect(await page.locator('.lines-code').evaluate((el) => getComputedStyle(el).backgroundColor)).toBe(selectedBg);
await page.locator('.code-line-button').click();
await expect(page.locator('.tippy-box .view_git_blame[href$="/a-file#L1"]')).toBeVisible();
await expect(page.locator('.tippy-box .copy-line-permalink[data-url$="/a-file#L1"]')).toBeVisible();
});