[ADD] UI: odoo spreadsheets svg icons #13386

samueljlieber · 2025-05-15T20:10:17Z

Task: #4792034

This PR proposes introducing the o-spreadsheet icons into the Odoo documentation.

How this works

The Spreadsheet library in Odoo contains two QWeb template files for SVG icons:

These were used to generate an SVG sprite file (extensions/odoo_theme/static/img/odoo-spreadsheet-icons.svg), which can then be utilized by the SVG <use>element to call nodes by ID in the sprite.

This SVG sprite file is then included in the main page layout (extensions/odoo_theme/layout.html)

The RST :icon: role was updated to accomodate an os-* icon specifier.

The SVG sprite file can be generated automatically via a simple script outlined in this gist:
https://gist.github.com/samueljlieber/5ae7648a5ca08e0bfc8455861825e2ff

Why?

This PR attempts to scale an earlier method I used, the RST raw-html(raw) role includes the <svg> markup directly in the Global Filters doc (see this diff).

This was/is not scalable, is not usable throughout multiple docs, and will decay over time as the o-spreadsheet library is updated. This PR attempts to find a solution for using o-spreadsheet icons in documentation.

Example

With this implementation, o-spreadsheet icons can be used like so:

This is the :icon:`os-global-filters` :guilabel:`(global filters)` icon!

robodoo · 2025-05-15T20:10:21Z

rugo-odoo

2 little details and we should be good to go 😎

rugo-odoo · 2025-05-21T12:41:59Z

extensions/odoo_theme/__init__.py

@@ -125,7 +126,12 @@ def icon_role(name, rawtext, text, lineno, inliner, options=None, content=None):
        icon_html = f'<i class="oi {text}"></i>'
    elif text.startswith('fa-'):
        icon_html = f'<i class="fa {text}"></i>'
+    elif text.startswith('os-'):
+        icon_html = (
+            f'<svg class="os-icon" aria-hidden="true" role="img">'


Suggested change

f'<svg class="os-icon" aria-hidden="true" role="img">'

'<svg class="os-icon" aria-hidden="true" role="img">'

rugo-odoo · 2025-05-21T12:42:46Z

extensions/odoo_theme/__init__.py

+    elif text.startswith('os-'):
+        icon_html = (
+            f'<svg class="os-icon" aria-hidden="true" role="img">'
+            f'  <use href="#{text[3:]}" />'


A little comment about why text[3:] and not just text will be nice.

samueljlieber · 2025-05-21T19:39:21Z

Hi @rugo-odoo! Thank you for your review 😄 I implemented your helpful suggestions and opened this PR up from draft.

I figured I could manually backport to 18.0 once merged, WDYT? :)

AntoineVDV

I figured I could manually backport to 18.0 once merged, WDYT? :)

You should rather re-target this PR and let the automatic forward-port handle master after.

AntoineVDV · 2025-05-22T08:41:54Z

content/contributing/documentation/rst_guidelines.rst

+
+Follow the icon with its name as a :ref:`contributing/rst/guilabel` in brackets as a descriptor.
+
+.. spoiler:: View supported Odoo Spreadsheets icons


Shouldn't this be hosted at the same place as Odoo UI icons?

I suppose it can be, I wasn't sure of the best place to list the Odoo Spreadsheet (os-*) icons, since they are not part of the Odoo UI (oi-*) font-family.

Adding them to the developer/reference/user_interface/icons page in the same format would be a convenient and logical place. I'll add a header for Odoo Spreadsheet icons :)

AntoineVDV · 2025-05-22T08:45:11Z

extensions/odoo_theme/layout.html

@@ -113,6 +113,7 @@
            {%- else %}
                <article id="o_content" class="doc-body">
                    <div role="main"> {# Beacon used by the Sphinx search to know where to look for a string #}
+                        {% include "static/img/odoo-spreadsheets-icons.svg" %}


Why here in particular? Shouldn't this go in another, assets-dedicated block?

I included the svg sprite file here because I wanted it to be contained within main document body, however, looking at it again there is a better spot– as well the opportunity to create an "assets.html" layout_template to include this and future assets as well :)

samueljlieber · 2025-05-22T20:49:02Z

Thank you @AntoineVDV for your helpful comments!

Changes in 9f9eea4:

re-targeted this PR to 18.0 in prep for FWP to master
Updated the odoo-spreadsheet-icons.svg sprite to 18.0 Odoo Spreadsheet
Created an assets-specific block in extensions/odoo_theme/layout.html to conditionally include the sprite file to address this comment
Added the Spreadsheet icons to the Developer UI icons doc to addresses this comment
- Used this gist to generate the HTML and SVG sprite
Updated the RST guidelines :icon: markup to include these changes

Ready for another look, thanks all! :)

AntoineVDV

@robodoo delegate+

samueljlieber · 2025-05-23T12:30:20Z

@robodoo r+

samueljlieber self-assigned this May 15, 2025

samueljlieber added the technical improvement Technically improve the documentation site label May 15, 2025

AntoineVDV requested a review from rugo-odoo May 19, 2025 08:58

rugo-odoo requested changes May 21, 2025

View reviewed changes

samueljlieber force-pushed the master-ui-icons-spreadsheet-sali branch from 5447d56 to a682396 Compare May 21, 2025 19:20

samueljlieber marked this pull request as ready for review May 21, 2025 19:22

C3POdoo requested review from a team May 21, 2025 19:24

samueljlieber requested a review from rugo-odoo May 21, 2025 19:39

AntoineVDV reviewed May 22, 2025

View reviewed changes

[ADD] UI: odoo spreadsheets svg icons

9f9eea4

samueljlieber force-pushed the master-ui-icons-spreadsheet-sali branch from a682396 to 9f9eea4 Compare May 22, 2025 20:37

samueljlieber changed the base branch from master to 18.0 May 22, 2025 20:37

C3POdoo requested a review from a team May 22, 2025 20:39

AntoineVDV approved these changes May 23, 2025

View reviewed changes

robodoo closed this in a35a208 May 23, 2025

robodoo temporarily deployed to merge May 23, 2025 14:16 Inactive

This was referenced May 23, 2025

[FW][ADD] UI: odoo spreadsheets svg icons #13520

Closed

[FW][ADD] UI: odoo spreadsheets svg icons #13522

Closed

[FW][ADD] UI: odoo spreadsheets svg icons #13523

Closed

[FW][ADD] UI: odoo spreadsheets svg icons #13524

Closed

xpl-odoo mentioned this pull request May 26, 2025

[IMP] spreadsheet: expanding functional documentation #12915

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ADD] UI: odoo spreadsheets svg icons #13386

[ADD] UI: odoo spreadsheets svg icons #13386

Uh oh!

samueljlieber commented May 15, 2025 •

edited

Loading

Uh oh!

robodoo commented May 15, 2025

Uh oh!

rugo-odoo left a comment

Uh oh!

rugo-odoo May 21, 2025

Uh oh!

rugo-odoo May 21, 2025

Uh oh!

samueljlieber commented May 21, 2025

Uh oh!

AntoineVDV left a comment

Uh oh!

AntoineVDV May 22, 2025

Uh oh!

samueljlieber May 22, 2025

Uh oh!

AntoineVDV May 22, 2025

Uh oh!

samueljlieber May 22, 2025

Uh oh!

samueljlieber commented May 22, 2025

Uh oh!

AntoineVDV left a comment

Uh oh!

samueljlieber commented May 23, 2025

Uh oh!

Uh oh!

	f'<svg class="os-icon" aria-hidden="true" role="img">'
	'<svg class="os-icon" aria-hidden="true" role="img">'


		Follow the icon with its name as a :ref:`contributing/rst/guilabel` in brackets as a descriptor.

		.. spoiler:: View supported Odoo Spreadsheets icons

[ADD] UI: odoo spreadsheets svg icons #13386

[ADD] UI: odoo spreadsheets svg icons #13386

Uh oh!

Conversation

samueljlieber commented May 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

How this works

Why?

Example

Uh oh!

robodoo commented May 15, 2025

Uh oh!

rugo-odoo left a comment

Choose a reason for hiding this comment

Uh oh!

rugo-odoo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

rugo-odoo May 21, 2025

Choose a reason for hiding this comment

Uh oh!

samueljlieber commented May 21, 2025

Uh oh!

AntoineVDV left a comment

Choose a reason for hiding this comment

Uh oh!

AntoineVDV May 22, 2025

Choose a reason for hiding this comment

Uh oh!

samueljlieber May 22, 2025

Choose a reason for hiding this comment

Uh oh!

AntoineVDV May 22, 2025

Choose a reason for hiding this comment

Uh oh!

samueljlieber May 22, 2025

Choose a reason for hiding this comment

Uh oh!

samueljlieber commented May 22, 2025

Uh oh!

AntoineVDV left a comment

Choose a reason for hiding this comment

Uh oh!

samueljlieber commented May 23, 2025

Uh oh!

Uh oh!

samueljlieber commented May 15, 2025 •

edited

Loading