online.git: 2 commits - browser/css browser/src

["Rashesh Padia (via github)"]

browser/css/aichat-sidebar.css | 7 +++----
browser/src/control/Control.AIChatSidebar.ts | 18 ++++++++++++++++++
2 files changed, 21 insertions(+), 4 deletions(-)

New commits:
commit 2a8a065204b15e42c3ca6bdf971d8794849864ff
Author: Rashesh Padia <rashes...@collabora.com>
AuthorDate: Sun Apr 19 00:50:57 2026 +0530
Commit: Rashesh Padia <rashesh...@gmail.com>
CommitDate: Mon Apr 20 16:43:57 2026 +0530

browser: css: make the EU directive warning more clear visually

Signed-off-by: Rashesh Padia <rashes...@collabora.com>
Change-Id: Ic053cf8dd982e12e6d64f119c9f0c6e75b9f5a42

diff --git a/browser/css/aichat-sidebar.css b/browser/css/aichat-sidebar.css
index c9d90acc24..ec1d764d34 100644
--- a/browser/css/aichat-sidebar.css
+++ b/browser/css/aichat-sidebar.css
@@ -206,10 +206,9 @@
#aichat-eu-notice {
color: var(--color-text-lighter);
text-align: center;
- padding: 4px 0 0;
- font-size: 8px;
- line-height: 1.2;
- opacity: 0.5;
+ padding: 6px 8px 4px;
+ font-size: 11px;
+ line-height: 1.4;
letter-spacing: 0.01em;
}

commit 8fad91f8bfdeec47e021dba6b0e4bbf2e5babb5b
Author: Rashesh Padia <rashes...@collabora.com>
AuthorDate: Mon Apr 20 15:02:35 2026 +0530
Commit: Rashesh Padia <rashesh...@gmail.com>
CommitDate: Mon Apr 20 16:43:57 2026 +0530

browser: aichat: add "Create slides" prompt chip

Signed-off-by: Rashesh Padia <rashes...@collabora.com>
Change-Id: I1ed879536b49a5b6a53e67472ba01baee94606d9

diff --git a/browser/src/control/Control.AIChatSidebar.ts b/browser/src/control/Control.AIChatSidebar.ts
index 5a73328f1f..7d3a18673d 100644
--- a/browser/src/control/Control.AIChatSidebar.ts
+++ b/browser/src/control/Control.AIChatSidebar.ts
@@ -697,6 +697,13 @@ namespace cool {
text: _('Create a formula'),
enabled: true,
});
+ } else if (app.map.getDocType() === 'presentation') {
+ cardChildren.push({
+ id: 'aichat-chip-create-slides',
+ type: 'pushbutton',
+ text: _('Create slides'),
+ enabled: true,
+ });
}

// Count doc-specific chips toward the initial limit so
@@ -764,6 +771,7 @@ namespace cool {
'aichat-chip-formula-diagnosis': () => this.diagnoseFormulaError(),
'aichat-chip-sanity-check': () => this.sanityCheckData(),
'aichat-chip-create-formula': () => this.createFormula(),
+ 'aichat-chip-create-slides': () => this.createSlides(),
'aichat-see-more': () => {
this.showAllCards = !this.showAllCards;
this.builder.updateWidget(this.container, this.getMessagesListJSON());
@@ -1814,6 +1822,16 @@ namespace cool {
this.dispatchRequest();
}

+ private createSlides(): void {
+ if (this.isProcessing) return;
+
+ this.hintText = _(
+ 'Describe the slides you want to create. For example: "A 5-slide overview of renewable energy" or "An introduction to our team".',
+ );
+ this.updateHint();
+ this.focusInput();
+ }
+
private async createFormula(): Promise<void> {
if (this.isProcessing) return;

["Dennis Francis (via cogithub)"]

browser/css/jsdialogs.css | 6 ++++++
browser/src/app/LOUtil.ts | 9 +++++++--
browser/src/control/jsdialog/Widget.Combobox.js | 5 ++++-
3 files changed, 17 insertions(+), 3 deletions(-)

New commits:
commit da2b9b3f3bc747eebdfc779b1da5ca62dcda1c3f
Author: Dennis Francis <dennis....@collabora.com>
AuthorDate: Fri Apr 17 23:05:10 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Tue Apr 21 07:57:51 2026 +0200

browser: submenu entries need extra space for icon in grid

Signed-off-by: Dennis Francis <dennis....@collabora.com>
Change-Id: I018eafda7aa335167ff5796d193f98211b3fa705

diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index 368e7a6b1e..35a3b555cb 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -1516,6 +1516,12 @@ img.context-menu-icon {
grid-template-columns: 1fr 25px;
align-items: center;
}
+
+/* add extra column space for the icon. */
+.ui-combobox-entry.ui-has-menu.ui-has-img {
+ grid-template-columns: 25px 1fr 25px;
+}
+
/* Arrow/chevron */
.ui-combobox-entry.ui-has-menu::after {
content: '';
diff --git a/browser/src/control/jsdialog/Widget.Combobox.js b/browser/src/control/jsdialog/Widget.Combobox.js
index 8e8c8097d7..16b4a56b0d 100644
--- a/browser/src/control/jsdialog/Widget.Combobox.js
+++ b/browser/src/control/jsdialog/Widget.Combobox.js
@@ -45,6 +45,9 @@ JSDialog.comboboxEntry = function (parentContainer, data, builder) {
var icon = window.L.DomUtil.create('img', 'ui-combobox-icon', entry);
icon.alt = '';
builder._isStringCloseToURL(data.icon) ? icon.src = data.icon : app.LOUtil.setImage(icon, app.LOUtil.getIconNameOfCommand(data.icon), builder.map, true);
+ if (data.hasSubMenu) {
+ window.L.DomUtil.addClass(entry, 'ui-has-img');
+ }
}

if (data.hint) {
commit fa2c843e387fedae6f37b2c0532788114e5814b8
Author: Dennis Francis <dennis....@collabora.com>
AuthorDate: Fri Apr 17 22:58:20 2026 +0530
Commit: Szymon Kłos <eszk...@gmail.com>
CommitDate: Tue Apr 21 07:57:51 2026 +0200

browser: context-menu: incorrect layout when no icon

Issue:
Open any calc document and right-click on a cell.
Note that the entry `Paste Special` and `Sparkline` does not align with
the rest of the items in the context menu which have icons.

Solution:
Add placeholder image for the entries without an icon.

Signed-off-by: Dennis Francis <dennis....@collabora.com>
Change-Id: I3aca2193e2e088426234e408ba74febcba4d5199

diff --git a/browser/src/app/LOUtil.ts b/browser/src/app/LOUtil.ts
index 6dbfe833b9..b5cee8949f 100644
--- a/browser/src/app/LOUtil.ts
+++ b/browser/src/app/LOUtil.ts
@@ -324,10 +324,15 @@ class LOUtil {
return url;
}

- public static setImage(img: HTMLImageElement, name: string, map: any): void {
+ public static setImage(
+ img: HTMLImageElement,
+ name: string,
+ map: any,
+ imageIsLayoutCritical?: boolean,
+ ): void {
const setupIcon = function () {
img.src = LOUtil.getImageURL(name);
- LOUtil.checkIfImageExists(img);
+ LOUtil.checkIfImageExists(img, imageIsLayoutCritical);
};
setupIcon();

diff --git a/browser/src/control/jsdialog/Widget.Combobox.js b/browser/src/control/jsdialog/Widget.Combobox.js
index c58a18b9e5..8e8c8097d7 100644
--- a/browser/src/control/jsdialog/Widget.Combobox.js
+++ b/browser/src/control/jsdialog/Widget.Combobox.js
@@ -44,7 +44,7 @@ JSDialog.comboboxEntry = function (parentContainer, data, builder) {
if (data.icon) {
var icon = window.L.DomUtil.create('img', 'ui-combobox-icon', entry);
icon.alt = '';
- builder._isStringCloseToURL(data.icon) ? icon.src = data.icon : app.LOUtil.setImage(icon, app.LOUtil.getIconNameOfCommand(data.icon), builder.map);
+ builder._isStringCloseToURL(data.icon) ? icon.src = data.icon : app.LOUtil.setImage(icon, app.LOUtil.getIconNameOfCommand(data.icon), builder.map, true);
}

if (data.hint) {

["Parth Raiyani (via cogerrit)"]

browser/css/helpdialog.css | 6 +++---
browser/src/control/Toolbar.js | 23 ++++++++++++++++-------
2 files changed, 19 insertions(+), 10 deletions(-)

New commits:
commit 9b5e5a9d6dfb96383747b0e0643216cc74e92963
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:43:28 2026 +0530
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Mon Apr 27 21:15:45 2026 +0000

help: add visible keyboard focus indicator to TOC jump links

The TOC jump-link styling explicitly removed the focus outline with "outline: none" and provided no replacement. Keyboard users got no visible cue when stepping through the TOC, breaking WCAG 2.4.7 (Focus Visible).

Replace the suppression with "outline: 2px solid var(--color-primary)" plus a 2px outline-offset, matching the focus style used elsewhere in the dialog framework. The CSS variable adapts to light/dark theme.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: I393477a4391bfe3ff3dda4662fb3d52d6e37118d
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1746
Tested-by: Jenkins CPCI <rel...@collaboraoffice.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/css/helpdialog.css b/browser/css/helpdialog.css
index c20fb36e8b1d..40c469a419de 100644
--- a/browser/css/helpdialog.css
+++ b/browser/css/helpdialog.css
@@ -67,11 +67,11 @@
/* Darker text color when clicked */
}

- /* Style for toc-h2 and toc-h3 button text when focused */
+ /* Visible keyboard focus indicator for TOC jump links */
.toc-h2 a:focus,
.toc-h3 a:focus {
- outline: none;
- /* Remove outline when focused */
+ outline: 2px solid var(--color-primary);
+ outline-offset: 2px;
}

/* Add margin to the paragraph to separate each item */
commit c3edc794dd88534dc80dffb6f3bf34f1e3521cb3
Author: Parth Raiyani <parth....@collabora.com>
AuthorDate: Mon Apr 27 21:38:13 2026 +0530
Commit: Caolán McNamara <caolan....@collabora.com>
CommitDate: Mon Apr 27 21:15:35 2026 +0000

help: keep close button visible after clicking a TOC jump link

Clicking a jump link in the help TOC made the dialog's close button disappear. The .scroll-button click handler tried to read button.dataset.target, but the HTML uses href="#nnn" - so the handler was a silent no-op and the browser performed its default anchor navigation. That scroll walks every scrollable ancestor, including the modal popup itself (which has overflow:auto in jsdialogs.css), so the dialog's titlebar - and the close button it contains - scrolled off the top.

Read href instead, preventDefault, and adjust scrollTop on the .ui-dialog-content container only. The modal stays put, only the help body scrolls, and the close button remains visible.

Signed-off-by: Parth Raiyani <parth....@collabora.com>
Change-Id: Ia6c0d85631c90b241f12aacaf7b64aa29d7f0672
Reviewed-on: https://gerrit.collaboraoffice.com/c/online/+/1745
Tested-by: Caolán McNamara <caolan....@collabora.com>
Reviewed-by: Caolán McNamara <caolan....@collabora.com>

diff --git a/browser/src/control/Toolbar.js b/browser/src/control/Toolbar.js
index 2a36c3a77975..fe735c930fef 100644
--- a/browser/src/control/Toolbar.js
+++ b/browser/src/control/Toolbar.js
@@ -550,13 +550,22 @@ window.L.Map.include({
const buttons = onlineHelpContent.querySelectorAll('.scroll-button');

buttons.forEach((button) => {
- button.addEventListener('click', () => {
- const targetId = button.dataset.target;
- if (targetId) {
- const targetElement = document.getElementById(`${targetId}`);
- if (targetElement) {
- targetElement.scrollIntoView();
- }
+ button.addEventListener('click', (e) => {
+ const href = button.getAttribute('href');
+ if (!href || !href.startsWith('#')) return;
+ const targetElement = document.getElementById(href.substring(1));
+ if (!targetElement) return;
+ // Scroll only the help content area. The browser's default anchor
+ // navigation can scroll the modal popup itself, pushing the
+ // titlebar (and its close button) out of view.
+ e.preventDefault();
+ const scrollContainer = targetElement.closest('.ui-dialog-content');
+ if (scrollContainer) {
+ const containerRect = scrollContainer.getBoundingClientRect();
+ const targetRect = targetElement.getBoundingClientRect();
+ scrollContainer.scrollTop += targetRect.top - containerRect.top;
+ } else {
+ targetElement.scrollIntoView({ block: 'start' });
}
});
});