[xwiki-devs] [Standars][Components] Icons

There are many ways implemented in XWiki for the case when you want to attach an icon to a html element. You can see a small study for the "Delete" icon at http://incubator.myxwiki.org/xwiki/bin/view/Standards/IconsStudyDelete. You can either use CSS to assign a background-image to a <span>, <div>, <input>, <li>, <a>, etc element or you can integrate the icon in the code with <img> element. Using the icons as background images we remove the extra/unnecessarily img code in the HTML and layout problems. The main problem is that consistency of UX and development. We currently have three icons for the "Edit" action ((BlogStyle/edit.png; js/xwiki/usersandgroups/img/clear.png;) silk/pencil.gif; images/black-edit.png )). For the delete example we write the same Css code for the background-image in attachments.css, livetable.css, dataeditors.css, comments.css, etc. Everytime we add an icon, we need to see what is the icon's name and this way is very easy make a mistake in the "standard". I want to propose an *Icons Component* in * platform\web\standard\src\main\webapp\resources\icons\icons.css* . You can read more about it at http://incubator.myxwiki.org/xwiki/bin/view/Standards/CssIcons . This is just a skeleton and doesn't meet all the needs for icons usage (left-aligned icons, right-aligned icons, gifs, pngs, etc). - One problem that can be is the separation in Css files that are dependent one from the other, instead of having them in just one big file (like toucan.css that can be cached by clients). The thing is that the UI components are not dependant of the skin, so putting them in both toucan and albatross (so both benefit from the change) would be wrong. - Having them in separated files, we load them only when needed. The problem is that the files needs to be very well documented and the developers know about their existence. - Another solution (if the cached version is preferred) would be to have a general CSS that imports all the components. This way we serve in one go the CSS files, but still preserve the modularization. - The main advantage is the consistency of the icons usage and the independence of file names. - In the webapp\resources\icons\silk we have many icons that we don't use, but we serve the full silk package. Having a general CSS file, we could know what types of icons we use. This could be a valuable information if we ever would like to change the icons in XWiki. Having them linked in a special place solves the changeability problems. Thanks, Caty