[#34725] - [4.0] Component menu image to be styled as component font-icon
- Closed
- 10 Jul 2021
- Medium
- Build: 4.0-dev
- # 34725
- Diff
- sakiss:component-icon
User tests: Successful: Unsuccessful:
Summary of Changes
If you try to use an image file in the component menu, this is shown differently than the icons used in Joomla components.
It does not have the same spacing.
Testing Instructions
For the shake of testing i created a very simple component that can be downloaded from github.
It is just an empty component that uses an svg icon in it's menu.
Install it and click the components dashboard icon.
Actual result BEFORE applying this Pull Request
Icon stuck to the component name
Expected result AFTER applying this Pull Request
Icon having the same spacing as the other component icons.
Documentation Changes Required
No
Votes
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Modules Administration |
@ChristineWk You have to visit the components dashboard. To do that either press the square button right to the Components menu (see my 1st screenshot) or visit: index.php?option=com_cpanel&view=cpanel&dashboard=components
@sakiss I'm afraid:
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34725.
/administrator/index.php?option=com_cpanel&view=cpanel&dashboard=components
@ChristineWk This is related with your admin modules and how they are configured. By default loads the components there.
| Title |
|
||||||
@sakiss Thanks for the screenshot. Found it. Tried also some other things, but unfortunately now a mess, e.g.
Notice: Undefined property: Joomla\CMS\Menu\AdministratorMenuItem::$element in /mysite/administrator/modules/mod_menu/src/Menu/CssMenu.php on line 314
Hv to repair :-) Sorry about.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34725.
OK. Repaired it :-) and got:
Before Patch:
With Patch:
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34725.
I have tested this item
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34725.
I don't think this PR is correct. Using the class icon- just as a means to get some spacing is certainly wrong and could have unintended sideeffects. A better approach would be to add specific CSS rules for that img tag,
@Bakual Agree but a solution should meet the following requirements:
- The same class should be used both for the component's icon fonts and the image, to set their basic styling (e.g. margins, display).
- Both the icon and the img basic styling should depend on the template. Cannot 1 depend on a font l(e.g. fontawesome) and the other on the template.
For the time being this PR provides at least a solution, but if you wish to solve it in a better way, please commit or create a PR.
I am not a front-end dev, hence i am not familiar with things like scss.
I'm not a frontend dev either, but there are some here who could help.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-07-10 20:00:18 |
| Closed_By | ⇒ | sakiss | |
| Labels |
Added:
?
|
||
Don't see an Icon:
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/34725.
<a class="no-dropdown" href="index.php?option=com_icontest" aria-label="Icon Test"><span class="sidebar-item-title">Icon Test</span></a>