mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-08 08:04:21 +00:00
[FEAT] Adds x-mode-only anchor styles to display images based if the theme is light or dark mode. (#3985)
Adds a feature similar to this https://github.blog/changelog/2021-11-24-specify-theme-context-for-images-in-markdown/ , by adding styles to elements which `src` or `href` attribute ends with `#light-mode-only` or `#dark-mode-only`. To improve compability, the github variants with the `gh-` prefix are also contained. Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/3985 Reviewed-by: 0ko <0ko@noreply.codeberg.org> Co-authored-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org> Co-committed-by: Mai-Lapyst <mai-lapyst@noreply.codeberg.org>
This commit is contained in:
parent
96f661e821
commit
0a7767eaaa
|
@ -83,3 +83,12 @@
|
|||
issue_id: 2 # in repo_id 1
|
||||
review_id: 20
|
||||
created_unix: 946684810
|
||||
|
||||
-
|
||||
id: 10
|
||||
type: 0
|
||||
poster_id: 1
|
||||
issue_id: 1 # in repo_id 1
|
||||
content: "test markup light/dark-mode-only ![GitHub-Mark-Light](https://user-images.githubusercontent.com/3369400/139447912-e0f43f33-6d9f-45f8-be46-2df5bbc91289.png#gh-dark-mode-only)![GitHub-Mark-Dark](https://user-images.githubusercontent.com/3369400/139448065-39a229ba-4b06-434b-bc67-616e2ed80c8f.png#gh-light-mode-only)"
|
||||
created_unix: 946684813
|
||||
updated_unix: 946684813
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
priority: 0
|
||||
is_closed: false
|
||||
is_pull: false
|
||||
num_comments: 2
|
||||
num_comments: 3
|
||||
created_unix: 946684800
|
||||
updated_unix: 978307200
|
||||
is_locked: false
|
||||
|
|
1
release-notes/8.0.0/feat/3985.md
Normal file
1
release-notes/8.0.0/feat/3985.md
Normal file
|
@ -0,0 +1 @@
|
|||
Added support for displaying images based on the users current color code by using an anchor of `#dark-mode-only` or `#light-mode-only` respectively. Also supporting the github variants (e.g. `#gh-dark-mode-only`).
|
13
tests/e2e/markup.test.e2e.js
Normal file
13
tests/e2e/markup.test.e2e.js
Normal file
|
@ -0,0 +1,13 @@
|
|||
// @ts-check
|
||||
import {test, expect} from '@playwright/test';
|
||||
|
||||
test('Test markup with #xyz-mode-only', async ({page}) => {
|
||||
const response = await page.goto('/user2/repo1/issues/1');
|
||||
await expect(response?.status()).toBe(200);
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
const comment = page.locator('.comment-body>.markup', {hasText: 'test markup light/dark-mode-only'});
|
||||
await expect(comment).toBeVisible();
|
||||
await expect(comment.locator('[src$="#gh-light-mode-only"]')).toBeVisible();
|
||||
await expect(comment.locator('[src$="#gh-dark-mode-only"]')).not.toBeVisible();
|
||||
});
|
|
@ -39,7 +39,7 @@ func TestAPIListRepoComments(t *testing.T) {
|
|||
|
||||
var apiComments []*api.Comment
|
||||
DecodeJSON(t, resp, &apiComments)
|
||||
assert.Len(t, apiComments, 2)
|
||||
assert.Len(t, apiComments, 3)
|
||||
for _, apiComment := range apiComments {
|
||||
c := &issues_model.Comment{ID: apiComment.ID}
|
||||
unittest.AssertExistsAndLoadBean(t, c,
|
||||
|
@ -65,7 +65,7 @@ func TestAPIListRepoComments(t *testing.T) {
|
|||
req = NewRequest(t, "GET", link.String())
|
||||
resp = MakeRequest(t, req, http.StatusOK)
|
||||
DecodeJSON(t, resp, &apiComments)
|
||||
assert.Len(t, apiComments, 1)
|
||||
assert.Len(t, apiComments, 2)
|
||||
assert.EqualValues(t, 3, apiComments[0].ID)
|
||||
}
|
||||
|
||||
|
|
|
@ -34,6 +34,6 @@ func TestNodeinfo(t *testing.T) {
|
|||
assert.Equal(t, "forgejo", nodeinfo.Software.Name)
|
||||
assert.Equal(t, 29, nodeinfo.Usage.Users.Total)
|
||||
assert.Equal(t, 22, nodeinfo.Usage.LocalPosts)
|
||||
assert.Equal(t, 3, nodeinfo.Usage.LocalComments)
|
||||
assert.Equal(t, 4, nodeinfo.Usage.LocalComments)
|
||||
})
|
||||
}
|
||||
|
|
13
web_src/css/markup/dark.css
Normal file
13
web_src/css/markup/dark.css
Normal file
|
@ -0,0 +1,13 @@
|
|||
.markup [src$="#gh-light-mode-only"],
|
||||
.markup [src$="#light-mode-only"],
|
||||
.markup [href$="#gh-light-mode-only"],
|
||||
.markup [href$="#light-mode-only"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.markup [src$="#gh-dark-mode-only"],
|
||||
.markup [src$="#dark-mode-only"],
|
||||
.markup [href$="#gh-dark-mode-only"],
|
||||
.markup [href$="#dark-mode-only"] {
|
||||
display: unset;
|
||||
}
|
6
web_src/css/markup/light.css
Normal file
6
web_src/css/markup/light.css
Normal file
|
@ -0,0 +1,6 @@
|
|||
.markup [src$="#gh-dark-mode-only"],
|
||||
.markup [src$="#dark-mode-only"],
|
||||
.markup [href$="#gh-dark-mode-only"],
|
||||
.markup [href$="#dark-mode-only"] {
|
||||
display: none;
|
||||
}
|
|
@ -1,5 +1,7 @@
|
|||
@import "../chroma/dark.css";
|
||||
@import "../codemirror/dark.css";
|
||||
@import "../markup/dark.css";
|
||||
|
||||
:root {
|
||||
--steel-900: #10161d;
|
||||
--steel-850: #131a21;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
@import "../chroma/light.css";
|
||||
@import "../codemirror/light.css";
|
||||
@import "../markup/light.css";
|
||||
|
||||
:root {
|
||||
--steel-900: #10161d;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
@import "../chroma/dark.css";
|
||||
@import "../codemirror/dark.css";
|
||||
@import "../markup/dark.css";
|
||||
|
||||
:root {
|
||||
--is-dark-theme: true;
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
@import "../chroma/light.css";
|
||||
@import "../codemirror/light.css";
|
||||
@import "../markup/light.css";
|
||||
|
||||
:root {
|
||||
--is-dark-theme: false;
|
||||
|
|
Loading…
Reference in a new issue