From b374d2dd42ab66984b50570daed9f636cf950cfd Mon Sep 17 00:00:00 2001 From: samueljlieber Date: Thu, 15 May 2025 19:28:17 +0000 Subject: [PATCH] [ADD] UI: odoo spreadsheets svg icons closes odoo/documentation#13524 X-original-commit: a35a208995d90fd217f6a01061b43f4517c0cf99 Signed-off-by: Samuel Lieber (sali) --- .../documentation/rst_guidelines.rst | 27 +- .../reference/user_interface/icons.rst | 1087 ++++++++++++++++- extensions/odoo_theme/__init__.py | 12 +- extensions/odoo_theme/layout.html | 1 + .../odoo_theme/layout_templates/assets.html | 3 + .../static/img/odoo-spreadsheet-icons.svg | 332 +++++ extensions/odoo_theme/static/style.scss | 10 + 7 files changed, 1453 insertions(+), 19 deletions(-) create mode 100644 extensions/odoo_theme/layout_templates/assets.html create mode 100644 extensions/odoo_theme/static/img/odoo-spreadsheet-icons.svg diff --git a/content/contributing/documentation/rst_guidelines.rst b/content/contributing/documentation/rst_guidelines.rst index 3496db4ea7..c9205c0f6e 100644 --- a/content/contributing/documentation/rst_guidelines.rst +++ b/content/contributing/documentation/rst_guidelines.rst @@ -415,21 +415,28 @@ Use the `command` markup to highlight a command. Icons ----- -Use the `icon` markup to add the class name of an icon. There are two icon sets used in Odoo: -`FontAwesome4 `_ and :doc:`Odoo UI -`. Follow the icon with its name as a -:ref:`contributing/rst/guilabel` in brackets as a descriptor. +Use the `icon` markup to add the class name of an icon. There are three icon sets used in Odoo: +`FontAwesome4 `_ (`fa-*`), :ref:`Odoo UI ` +(`oi-*`) and :ref:`Odoo Spreadsheet ` (`os-*`) icons. + +Follow the icon with its name as a :ref:`contributing/rst/guilabel` in brackets as a descriptor. .. list-table:: - :class: o-showcase-table + :class: o-showcase-table - * - The graph view is represented by the :icon:`fa-area-chart` :guilabel:`(area chart)` icon. The - pivot view is represented by the :icon:`oi-view-pivot` icon. + * - The graph view is represented by the :icon:`fa-area-chart` :guilabel:`(area chart)` icon. - * - .. code-block:: text + The pivot view is represented by the :icon:`oi-view-pivot` :guilabel:`(pivot table)` icon. - The graph view is represented by the :icon:`fa-area-chart` :guilabel:`(area chart)` icon. - The pivot view is represented by the :icon:`oi-view-pivot` icon. + Use :icon:`os-global-filters` :guilabel:`(global filters)` in Odoo **Spreadsheet**. + + * - .. code-block:: text + + The graph view is represented by the :icon:`fa-area-chart` :guilabel:`(area chart)` icon. + + The pivot view is represented by the :icon:`oi-view-pivot` icon. + + Use :icon:`os-global-filters` :guilabel:`(global filters)` in Odoo **Spreadsheet**. .. _contributing/rst/lists: diff --git a/content/developer/reference/user_interface/icons.rst b/content/developer/reference/user_interface/icons.rst index 6b8b28ed57..d803ddc378 100644 --- a/content/developer/reference/user_interface/icons.rst +++ b/content/developer/reference/user_interface/icons.rst @@ -7,8 +7,16 @@ UI icons Odoo's user interface mostly relies on `FontAwesome4 icons `_. To cover FontAwesome's lack of iconography for specific functionalities, we designed our own -icon-font. These icons can be rendered using the main `oi` class in conjunction with the specific -icon class. +icons: :ref:`Odoo UI icons ` and :ref:`Odoo Spreadsheet icons +`. + +.. _ui/odoo-ui-icons: + +Odoo UI icons +============= + +The Odoo UI icons can be rendered using the main `oi` class in conjunction with the specific icon +class. .. example:: @@ -16,9 +24,6 @@ icon class. -Icons -===== - .. raw:: html
@@ -292,7 +297,7 @@ Icons
RTL adaptations -=============== +--------------- Directional icons have :abbr:`RTL (right-to-left)` adaptations which flip the icons by 180 degrees when an :abbr:`RTL (right-to-left)` language is selected. @@ -358,3 +363,1073 @@ when an :abbr:`RTL (right-to-left)` language is selected. + +.. _ui/odoo-spreadsheet-icons: + +Odoo Spreadsheet icons +====================== + +The `Odoo Spreadsheet <{GITHUB_PATH}/addons/spreadsheet/static/src/o_spreadsheet>`_ icons are +defined as `` elements and rendered using QWeb `templates +<{OWL_PATH}/doc/reference/templates.md>`_. + +.. example:: + + .. code-block:: html + + + + + + + +.. raw:: html + +
+ +
+
+
+ +
+ SEE_RECORDS +
+
+ +
+
+
+ +
+ GLOBAL_FILTERS +
+
+ +
+
+
+ +
+ CLEAR_AND_RELOAD +
+
+ +
+
+
+ +
+ EXPORT_XLSX +
+
+ +
+
+
+ +
+ OPEN_READ_ONLY +
+
+ +
+
+
+ +
+ OPEN_DASHBOARD +
+
+ +
+
+
+ +
+ OPEN_READ_WRITE +
+
+ +
+
+
+ +
+ IMPORT_XLSX +
+
+ +
+
+
+ +
+ UNDO +
+
+ +
+
+
+ +
+ REDO +
+
+ +
+
+
+ +
+ CUT +
+
+ +
+
+
+ +
+ COPY_AS_IMAGE +
+
+ +
+
+
+ +
+ PASTE +
+
+ +
+
+
+ +
+ CLEAR +
+
+ +
+
+
+ +
+ FREEZE +
+
+ +
+
+
+ +
+ UNFREEZE +
+
+ +
+
+
+ +
+ FORMULA +
+
+ +
+
+
+ +
+ HIDE_ROW +
+
+ +
+
+
+ +
+ UNHIDE_ROW +
+
+ +
+
+
+ +
+ HIDE_COL +
+
+ +
+
+
+ +
+ UNHIDE_COL +
+
+ +
+
+
+ +
+ INSERT_ROW +
+
+ +
+
+
+ +
+ INSERT_ROW_BEFORE +
+
+ +
+
+
+ +
+ INSERT_ROW_AFTER +
+
+ +
+
+
+ +
+ INSERT_COL +
+
+ +
+
+
+ +
+ INSERT_COL_AFTER +
+
+ +
+
+
+ +
+ INSERT_COL_BEFORE +
+
+ +
+
+
+ +
+ INSERT_CELL +
+
+ +
+
+
+ +
+ INSERT_CELL_SHIFT_DOWN +
+
+ +
+
+
+ +
+ INSERT_CELL_SHIFT_RIGHT +
+
+ +
+
+
+ +
+ DELETE_CELL_SHIFT_UP +
+
+ +
+
+
+ +
+ DELETE_CELL_SHIFT_LEFT +
+
+ +
+
+
+ +
+ INSERT_DROPDOWN +
+
+ +
+
+
+ +
+ INSERT_SHEET +
+
+ +
+
+
+ +
+ PAINT_FORMAT +
+
+ +
+
+
+ +
+ CONDITIONAL_FORMAT +
+
+ +
+
+
+ +
+ CLEAR_FORMAT +
+
+ +
+
+
+ +
+ BOLD +
+
+ +
+
+
+ +
+ ITALIC +
+
+ +
+
+
+ +
+ UNDERLINE +
+
+ +
+
+
+ +
+ STRIKE +
+
+ +
+
+
+ +
+ TEXT_COLOR +
+
+ +
+
+
+ +
+ FILL_COLOR +
+
+ +
+
+
+ +
+ MERGE_CELL +
+
+ +
+
+
+ +
+ ALIGN_LEFT +
+
+ +
+
+
+ +
+ ALIGN_CENTER +
+
+ +
+
+
+ +
+ ALIGN_RIGHT +
+
+ +
+
+
+ +
+ ALIGN_TOP +
+
+ +
+
+
+ +
+ ALIGN_MIDDLE +
+
+ +
+
+
+ +
+ ALIGN_BOTTOM +
+
+ +
+
+
+ +
+ WRAPPING_OVERFLOW +
+
+ +
+
+
+ +
+ WRAPPING_WRAP +
+
+ +
+
+
+ +
+ WRAPPING_CLIP +
+
+ +
+
+
+ +
+ BORDERS +
+
+ +
+
+
+ +
+ BORDER_HV +
+
+ +
+
+
+ +
+ BORDER_H +
+
+ +
+
+
+ +
+ BORDER_V +
+
+ +
+
+
+ +
+ BORDER_EXTERNAL +
+
+ +
+
+
+ +
+ BORDER_LEFT +
+
+ +
+
+
+ +
+ BORDER_TOP +
+
+ +
+
+
+ +
+ BORDER_RIGHT +
+
+ +
+
+
+ +
+ BORDER_BOTTOM +
+
+ +
+
+
+ +
+ BORDER_CLEAR +
+
+ +
+
+
+ +
+ BORDER_TYPE +
+
+ +
+
+
+ +
+ BORDER_COLOR +
+
+ +
+
+
+ +
+ BORDER_NO_COLOR +
+
+ +
+
+
+ +
+ PLUS +
+
+ +
+
+
+ +
+ MINUS +
+
+ +
+
+
+ +
+ LIST +
+
+ +
+
+
+ +
+ ARROW_DOWN +
+
+ +
+
+
+ +
+ ARROW_UP +
+
+ +
+
+
+ +
+ ARROW_RIGHT +
+
+ +
+
+
+ +
+ SMILE +
+
+ +
+
+
+ +
+ MEH +
+
+ +
+
+
+ +
+ FROWN +
+
+ +
+
+
+ +
+ GREEN_DOT +
+
+ +
+
+
+ +
+ YELLOW_DOT +
+
+ +
+
+
+ +
+ RED_DOT +
+
+ +
+
+
+ +
+ SORT_RANGE +
+
+ +
+
+
+ +
+ FILTER_ICON +
+
+ +
+
+
+ +
+ CHECK +
+
+ +
+
+
+ +
+ NUMBER_FORMATS +
+
+ +
+
+
+ +
+ FONT_SIZE +
+
+ +
+
+
+ +
+ SPLIT_TEXT +
+
+ +
+
+
+ +
+ DISPLAY_HEADER +
+
+ +
+
+
+ +
+ COG +
+
+ +
+
+
+ +
+ PLUS_IN_BOX +
+
+ +
+
+
+ +
+ GROUP_ROWS +
+
+ +
+
+
+ +
+ UNGROUP_ROWS +
+
+ +
+
+
+ +
+ GROUP_COLUMNS +
+
+ +
+
+
+ +
+ UNGROUP_COLUMNS +
+
+ +
+
+
+ +
+ DATA_VALIDATION +
+
+ +
+
+
+ +
+ THIN_DRAG_HANDLE +
+
+ +
+
+
+ +
+ SHORT_THIN_DRAG_HANDLE +
+
+ +
+
+
+ +
+ INSERT_PIVOT +
+
+ + diff --git a/extensions/odoo_theme/__init__.py b/extensions/odoo_theme/__init__.py index 94b102f406..da65ea8d5f 100644 --- a/extensions/odoo_theme/__init__.py +++ b/extensions/odoo_theme/__init__.py @@ -115,7 +115,8 @@ def resolve(old_resolve, tree, docname, *args, **kwargs): def icon_role(name, rawtext, text, lineno, inliner, options=None, content=None): """ Implement an `icon` role for Odoo and Font Awesome icons. """ for icon_class in text.split(): - if not (icon_class.startswith('fa-') or icon_class.startswith('oi-')): + if not (icon_class.startswith('fa-') or icon_class.startswith('oi-') \ + or icon_class.startswith('os-')): report_error = inliner.reporter.error( f"'{icon_class}' is not a valid icon formatting class.", lineno=lineno ) @@ -125,7 +126,12 @@ def icon_role(name, rawtext, text, lineno, inliner, options=None, content=None): icon_html = f'' elif text.startswith('fa-'): icon_html = f'' + elif text.startswith('os-'): + icon_html = ( + '' # see ../static/img/odoo-spreadsheets-icons.svg + ) else: icon_html = f'' - node = nodes.raw('', icon_html, format='html') - return [node], [] + return [nodes.raw('', icon_html, format='html')], [] diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html index 62323299db..2707e8790c 100644 --- a/extensions/odoo_theme/layout.html +++ b/extensions/odoo_theme/layout.html @@ -83,6 +83,7 @@ {%- block content %}
+ {%- include "layout_templates/assets.html" %} {%- set main_classes = [] %} {%- if pagename == master_doc %} {# The current page is the homepage #} {%- set main_classes = main_classes + ['o_index'] %} diff --git a/extensions/odoo_theme/layout_templates/assets.html b/extensions/odoo_theme/layout_templates/assets.html new file mode 100644 index 0000000000..59ac1ccedd --- /dev/null +++ b/extensions/odoo_theme/layout_templates/assets.html @@ -0,0 +1,3 @@ +{%- if ('svg class="os-icon"' in body) %} + {% include "static/img/odoo-spreadsheet-icons.svg" %} +{%- endif %} diff --git a/extensions/odoo_theme/static/img/odoo-spreadsheet-icons.svg b/extensions/odoo_theme/static/img/odoo-spreadsheet-icons.svg new file mode 100644 index 0000000000..8685e54b8a --- /dev/null +++ b/extensions/odoo_theme/static/img/odoo-spreadsheet-icons.svg @@ -0,0 +1,332 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + A + A + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss index e7793ee0a4..23e5689ee2 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -1232,6 +1232,16 @@ span.viewcode-link { } } +//------------------------------------------------------------------------------ +// Odoo Spreadsheet SVG icons +//------------------------------------------------------------------------------ + +.os-icon { + width: 18px; + height: 18px; + font-size: 18px; +} + //------------------------------------------------------------------------------ // Footer //------------------------------------------------------------------------------