mirror of
https://github.com/inventree/InvenTree.git
synced 2025-06-13 10:35:40 +00:00
Migrate Icons to Tabler icons and integrate into PUI (#7684)
* add icon backend implementation * implement pui icon picker * integrate icons in PUI * Bump API version * PUI: add icon to detail pages top header * CUI: explain icon format and change link to tabler icons site * CUI: use new icon packs * move default icon implementation to backend * add icon template tag to use in report printing * add missing migrations * fit to previous schema with part category icon * fit to previous schema with part category icon * add icon pack plugin integration * Add custom command to migrate icons * add docs * fix: tests * fix: tests * add tests * fix: tests * fix: tests * fix: tests * fix tests * fix sonarcloud issues * add logging * remove unneded pass * significantly improve performance of icon picker component
This commit is contained in:
19
docs/docs/extend/plugins/icon.md
Normal file
19
docs/docs/extend/plugins/icon.md
Normal file
@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Icon Pack Mixin
|
||||
---
|
||||
|
||||
## IconPackMixin
|
||||
|
||||
The IconPackMixin class provides basic functionality for letting plugins expose custom icon packs that are available in the InvenTree UI. This is especially useful to provide a custom crafted icon pack with icons for different location types, e.g. different sizes and styles of drawers, bags, ESD bags, ... which are not available in the standard tabler icons library.
|
||||
|
||||
### Sample Plugin
|
||||
|
||||
The following example demonstrates how to use the `IconPackMixin` class to add a custom icon pack:
|
||||
|
||||
::: plugin.samples.icons.icon_sample.SampleIconPlugin
|
||||
options:
|
||||
show_bases: False
|
||||
show_root_heading: False
|
||||
show_root_toc_entry: False
|
||||
show_source: True
|
||||
members: []
|
@ -259,6 +259,31 @@ A shortcut function is provided for rendering an image associated with a Company
|
||||
|
||||
*Preview* and *thumbnail* image variations can be rendered for the `company_image` tag, in a similar manner to [part image variations](#image-variations)
|
||||
|
||||
## Icons
|
||||
|
||||
Some models (e.g. part categories and locations) allow to specify a custom icon. To render these icons in a report, there is a `{% raw %}{% icon location.icon %}{% endraw %}` template tag from the report template library available.
|
||||
|
||||
This tag renders the required html for the icon.
|
||||
|
||||
!!! info "Loading fonts"
|
||||
Additionally the icon fonts need to be loaded into the template. This can be done using the `{% raw %}{% include_icon_fonts %}{% endraw %}` template tag inside of a style block
|
||||
|
||||
!!! tip "Custom classes for styling the icon further"
|
||||
The icon template tag accepts an optional `class` argument which can be used to apply a custom class to the rendered icon used to style the icon further e.g. positioning it, changing it's size, ... `{% raw %}{% icon location.icon class="my-class" %}{% endraw %}`.
|
||||
|
||||
```html
|
||||
{% raw %}
|
||||
{% load report %}
|
||||
|
||||
{% block style %}
|
||||
{% include_icon_fonts %}
|
||||
{% endblock style %}
|
||||
|
||||
{% icon location.icon %}
|
||||
|
||||
{% endraw %}
|
||||
```
|
||||
|
||||
## InvenTree Logo
|
||||
|
||||
A template tag is provided to load the InvenTree logo image into a report. You can render the logo using the `{% raw %}{% logo_image %}{% endraw %}` tag:
|
||||
|
@ -6,6 +6,14 @@ title: Stock
|
||||
|
||||
A stock location represents a physical real-world location where *Stock Items* are stored. Locations are arranged in a cascading manner and each location may contain multiple sub-locations, or stock, or both.
|
||||
|
||||
### Icons
|
||||
|
||||
Stock locations can be assigned custom icons (either directly or through [Stock Location Types](#stock-location-type)). When using PUI there is a custom icon picker component available that can help to select the right icon. However in CUI the icon needs to be entered manually.
|
||||
|
||||
By default, the tabler icons package (with prefix: `ti`) is available. To manually select an item, search on the [tabler icons](https://tabler.io/icons) page for an icon and copy its name e.g. `bookmark`. Some icons have a filled and an outline version (if no variants are specified, it's an outline variant). Now these values can be put into the format: `<package-prefix>:<icon-name>:<variant>`. E.g. `ti:bookmark:outline` or `ti:bookmark:filled`.
|
||||
|
||||
If there are some icons missing in the tabler icons package, users can even install their own custom icon packs through a plugin. See [`IconPackMixin`](../extend/plugins/icon.md).
|
||||
|
||||
## Stock Location Type
|
||||
|
||||
A stock location type represents a specific type of location (e.g. one specific size of drawer, shelf, ... or box) which can be assigned to multiple stock locations. In the first place, it is used to specify an icon and having the icon in sync for all locations that use this location type, but it also serves as a data field to quickly see what type of location this is. It is planned to add e.g. drawer dimension information to the location type to add a "find a matching, empty stock location" tool.
|
||||
|
@ -203,6 +203,7 @@ nav:
|
||||
- Barcode Mixin: extend/plugins/barcode.md
|
||||
- Currency Mixin: extend/plugins/currency.md
|
||||
- Event Mixin: extend/plugins/event.md
|
||||
- Icon Pack Mixin: extend/plugins/icon.md
|
||||
- Label Printing Mixin: extend/plugins/label.md
|
||||
- Locate Mixin: extend/plugins/locate.md
|
||||
- Navigation Mixin: extend/plugins/navigation.md
|
||||
|
Reference in New Issue
Block a user