NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] reference/user_interface: 17.0 odoo ui icons

Browse Source 
closes odoo/documentation#9826

X-original-commit: d506554ed0
Signed-off-by: Samuel Lieber (sali) <sali@odoo.com>
This commit is contained in:
Sam Lieber (sali) 2024-05-09 11:18:20 -04:00
parent 4d8dd6baf5
commit cfdcd39493
4 changed files with 364 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

404
content/developer/reference/user_interface/icons.rst
View File

@ -1,5 +1,3 @@
:hide-page-toc:
.. _reference/user_interface/ui_icons:
========
@ -18,99 +16,345 @@ icon class.
<i class="oi oi-odoo"/>
Icons
=====
.. raw:: html
<section class="row">
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-apps h1 p-4"></i>
<code>oi-apps</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-odoo h1 p-4"></i>
<code>oi-odoo</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-group h1 p-4"></i>
<code>oi-group</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-view h1 p-4"></i>
<code>oi-view</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-launch h1 p-4"></i>
<code>oi-launch</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-view-kanban h1 p-4"></i>
<code>oi-view-kanban</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-odoo h1 p-4"></i>
<code>oi-odoo</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-view-list h1 p-4"></i>
<code>oi-view-list</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-panel-right h1 p-4"></i>
<code>oi-panel-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-view-cohort h1 p-4"></i>
<code>oi-view-cohort</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-search h1 p-4"></i>
<code>oi-search</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-view-pivot h1 p-4"></i>
<code>oi-view-pivot</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-settings-adjust h1 p-4"></i>
<code>oi-settings-adjust</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-text-break h1 p-4"></i>
<code>oi-text-break</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-studio h1 p-4"></i>
<code>oi-studio</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-text-inline h1 p-4"></i>
<code>oi-text-inline</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-view-cohort h1 p-4"></i>
<code>oi-view-cohort</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-text-wrap h1 p-4"></i>
<code>oi-text-wrap</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-view-kanban h1 p-4"></i>
<code>oi-view-kanban</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-text-effect h1 p-4"></i>
<code>oi-text-effect</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-view-list h1 p-4"></i>
<code>oi-view-list</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-search h1 p-4"></i>
<code>oi-search</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-view-pivot h1 p-4"></i>
<code>oi-view-pivot</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-group h1 p-4"></i>
<code>oi-group</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 col-xl-2 mb-3">
<div class="card text-center">
<i class="oi oi-voip h1 p-4"></i>
<code>oi-voip</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-settings-adjust h1 p-4"></i>
<code>oi-settings-adjust</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-panel-right h1 p-4"></i>
<code>oi-panel-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-launch h1 p-4"></i>
<code>oi-launch</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-apps h1 p-4"></i>
<code>oi-apps</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-studio h1 p-4"></i>
<code>oi-studio</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-voip h1 p-4"></i>
<code>oi-voip</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-gif-picker h1 p-4"></i>
<code>oi-gif-picker</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-close h1 p-4"></i>
<code>oi-close</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-down h1 p-4"></i>
<code>oi-chevron-down</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-left h1 p-4"></i>
<code>oi-chevron-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-right h1 p-4"></i>
<code>oi-chevron-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-up h1 p-4"></i>
<code>oi-chevron-up</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrows-h h1 p-4"></i>
<code>oi-arrows-h</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrows-v h1 p-4"></i>
<code>oi-arrows-v</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-down-left h1 p-4"></i>
<code>oi-arrow-down-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-down-right h1 p-4"></i>
<code>oi-arrow-down-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-down h1 p-4"></i>
<code>oi-arrow-down</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-left h1 p-4"></i>
<code>oi-arrow-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-right h1 p-4"></i>
<code>oi-arrow-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-up-left h1 p-4"></i>
<code>oi-arrow-up-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-up-right h1 p-4"></i>
<code>oi-arrow-up-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-up h1 p-4"></i>
<code>oi-arrow-up</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-draggable h1 p-4"></i>
<code>oi-draggable</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-archive h1 p-4"></i>
<code>oi-archive</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-unarchive h1 p-4"></i>
<code>oi-unarchive</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-smile-add h1 p-4"></i>
<code>oi-smile-add</code>
</div>
</div>
</section>
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.
.. raw:: html
<section class="row">
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-left h1 p-4"></i>
<code>oi-chevron-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-chevron-right h1 p-4"></i>
<code>oi-chevron-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-down-left h1 p-4"></i>
<code>oi-arrow-down-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-down-right h1 p-4"></i>
<code>oi-arrow-down-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-left h1 p-4"></i>
<code>oi-arrow-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-right h1 p-4"></i>
<code>oi-arrow-right</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-up-left h1 p-4"></i>
<code>oi-arrow-up-left</code>
</div>
</div>
<div class="o_icon_card col-6 col-sm-4 col-md-3 mb-3">
<div class="card text-center">
<i class="oi oi-arrow-up-right h1 p-4"></i>
<code>oi-arrow-up-right</code>
</div>
</div>
</section>

BIN
extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff
View File

Binary file not shown.

BIN
extensions/odoo_theme/static/lib/odoo_ui_icons/fonts/odoo_ui_icons.woff2
View File

Binary file not shown.

46
extensions/odoo_theme/static/lib/odoo_ui_icons/style.css
View File

@ -7,6 +7,7 @@
}
.oi {
display: inline-block;
font-family: 'odoo_ui_icons';
speak: never;
font-style: normal;
@ -20,13 +21,9 @@
-moz-osx-font-smoothing: grayscale;
}
.oi-close:before {
content: '\00d7';
font-family: sans-serif;
font-weight: bold;
}
.oi-view-pivot:before { content: '\e800'; }
.oi-text-break:before { content: '\e801'; }
.oi-text-inline:before { content: '\e802'; }
.oi-voip:before { content: '\e803'; }
.oi-odoo:before { content: '\e806'; }
.oi-search:before { content: '\e808'; }
@ -37,5 +34,42 @@
.oi-launch:before { content: '\e812'; }
.oi-studio:before { content: '\e813'; }
.oi-view-kanban:before { content: '\e814'; }
.oi-text-wrap:before { content: '\e815'; }
.oi-view-cohort:before { content: '\e816'; }
.oi-view-list:before { content: '\e817'; }
.oi-gif-picker:before { content: '\e82e'; }
.oi-chevron-down:before { content: '\e839'; }
.oi-chevron-left:before { content: '\e83a'; }
.oi-chevron-right:before { content: '\e83b'; }
.oi-chevron-up:before { content: '\e83c'; }
.oi-arrows-h:before { content: '\e83d'; }
.oi-arrows-v:before { content: '\e83e'; }
.oi-arrow-down-left:before { content: '\e83f'; }
.oi-arrow-down-right:before { content: '\e840'; }
.oi-arrow-down:before { content: '\e841'; }
.oi-arrow-left:before { content: '\e842'; }
.oi-arrow-right:before { content: '\e843'; }
.oi-arrow-up-left:before { content: '\e844'; }
.oi-arrow-up-right:before { content: '\e845'; }
.oi-arrow-up:before { content: '\e846'; }
.oi-draggable:before { content: '\e847'; }
.oi-view:before { content: '\e861'; }
.oi-archive:before { content: '\e862'; }
.oi-unarchive:before { content: '\e863'; }
.oi-text-effect:before { content: '\e827'; }
.oi-smile-add:before { content: '\e84e'; }
.oi-close:before { content: '\e852'; }
/* RTL adaptations. */
/* Flip directional icons by 180 degree. */
/* ---------------------------------------------------------------------------- */
.o_rtl .oi-chevron-left,
.o_rtl .oi-chevron-right,
.o_rtl .oi-arrow-down-left,
.o_rtl .oi-arrow-down-right,
.o_rtl .oi-arrow-left,
.o_rtl .oi-arrow-right,
.o_rtl .oi-arrow-up-left,
.o_rtl .oi-arrow-up-right {
transform: rotate(180deg);
}