online
online copied to clipboard
CollaboraOnline
Unify icons between toolbar and sidebar
This is an Easy Hack. Potential mentors: @eszkadev @pedropintosilva
Detailed description and rationale
We want to unify icons used in toolbar and sidebar. So for the same UNO command / action we will use the same .svg.
Use browser's inspector to look at icons used in the sidebar. They are <img> elements. src attribute of sidebar's button should match background: url(...) for toolbar's icon for the same action. If it doesn't please change css rule for toolbar's element [1]. Toolbar elements have defined special CSS class which defines icon by background property (see [1]).
IMPORTANT: please do not change css class name. if it is .w2ui-icon.deleteformat it should stay .w2ui-icon.deleteformat. Please change only image's URL.
When we changed css rule, old image probably is not needed so we can also remove file from loleaflet/images directory. But first be sure it is not used anywhere by searching in this repository or using git grep.
Code pointers
List of toolbar icons: https://github.com/CollaboraOnline/online/blob/master/loleaflet/src/control/Control.TopToolbar.js#L135 [1] CSS rules for toolbar icons: https://github.com/CollaboraOnline/online/blob/master/loleaflet/css/toolbar.css#L757
I would like to work on this issue if it could be assigned to me - thanks!
@pedropintosilva - I've only just been able to start. I moved recently and had some problems getting my internet back up - thanks for your patience :)
No problem @bettyspurgeon, did you manage to get everything sorted out? Let me know if you still want to work on this :)
For icons that have a different id than the existing icon we have iconURLAliases so we don't need to duplicate svg: https://github.com/CollaboraOnline/online/commit/142097b3402e0d9aa3221a6e326c6db20137e34a