mirrors/forgejo
2
0
Fork 1
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-06-22 10:02:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ui): absolute-date: wrong selection color (#13107)

Browse source 
### Screenshots
**Before**:
![image](https://codeberg.org/attachments/5254320a-c2d5-4a7a-b390-81e7bec0b0f5)
**After**:
![image](https://codeberg.org/attachments/e3c05d39-5ba2-42ac-85b1-94d4994b24b1)

fixes #12899

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/13107
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Yashwanth Rathakrishnan 2026-06-16 14:00:32 +02:00 • committed by 0ko
commit 7ce7630939
3 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web_src/css/base.css
View file

@ -255,7 +255,8 @@ h1.error-code {
}
::selection,
relative-time::part(relative-time)::selection {
relative-time::part(relative-time)::selection,
absolute-date::part(absolute-date)::selection {
background: var(--color-selection-bg);
color: var(--color-selection-fg);
}

10
web_src/js/webcomponents/absolute-date.js
View file

@ -13,6 +13,7 @@ window.customElements.define('absolute-date', class extends HTMLElement {
static observedAttributes = ['date', 'year', 'month', 'weekday', 'day'];
initialized = false;
contentSpan = null;
update = () => {
const opt = {};
@ -22,8 +23,13 @@ window.customElements.define('absolute-date', class extends HTMLElement {
const lang = this.closest('[lang]')?.getAttribute('lang') ||
this.ownerDocument.documentElement.getAttribute('lang') || '';
if (!this.shadowRoot) this.attachShadow({mode: 'open'});
this.shadowRoot.textContent = toAbsoluteLocaleDate(this.getAttribute('date'), lang, opt);
if (!this.shadowRoot) {
this.attachShadow({mode: 'open'});
this.contentSpan = document.createElement('span');
this.contentSpan.setAttribute('part', 'absolute-date');
this.shadowRoot.append(this.contentSpan);
}
this.contentSpan.textContent = toAbsoluteLocaleDate(this.getAttribute('date'), lang, opt);
};
attributeChangedCallback(_name, oldValue, newValue) {

18
web_src/js/webcomponents/absolute-date.test.js
View file

@ -22,3 +22,21 @@ test('toAbsoluteLocaleDate', () => {
expect(new Date('2024-03-15').toLocaleString('en-US')).toEqual('3/14/2024, 8:00:00 PM');
expect(toAbsoluteLocaleDate('2024-03-15', 'en-US')).toEqual('3/15/2024, 12:00:00 AM');
});
test('absolute-date structure', () => {
const element = document.createElement('absolute-date');
element.setAttribute('date', '2026-06-16T00:00:00Z');
element.setAttribute('year', 'numeric');
document.body.append(element);
const shadowRoot = element.shadowRoot;
const childSpan = shadowRoot.querySelector('span');
expect(shadowRoot).toBeTruthy(); // verifies if isolated open shadow root exists
expect(childSpan).toBeTruthy(); // verifies that a clean <span> tag was spawned
expect(childSpan.getAttribute('part')).toBe('absolute-date'); // verifies the CSS styling hook bridge
expect(childSpan.textContent).toContain('2026'); // verifies that the date string outputs
element.remove();// clean up DOM env
});