Update the icons used for contacts

[garethbowen]

The district, health centre, clinic, and person icons need to be updated from font-awesome to custom svgs to be provided by @amandacilek everywhere they are used.

[garethbowen]

Icons: personicons.zip

[amandacilek-zz]

[amandacilek-zz]

The icons are displayed at 60 x 60 px on profile detail pages (RHS) and on targets widgets (if applicable). In all other cases they are displayed at 30 x 30 px.

[garethbowen]

This makes the action bar quite colourful but I think it's ok... I'll leave it up to AT to decide.

[garethbowen]

Two PRs to review please @alxndrsn

This change also makes the icons configurable which is a bonus feature...

[amandacilek-zz]

This makes the action bar quite colourful

Can you use the lovely features of SVG to color the icons white when they're in the action bar?

[garethbowen]

@amandacilek Yes but I think it'll need changes made to the svg. Is that a requirement for 2.14.0 in your opinion or something we can do in the future?

[amandacilek-zz]

Yes but I think it'll need changes made to the svg. Is that a requirement for 2.14.0 in your opinion or something we can do in the future?

I never imagined them being colored in the bar. The icons should change color in certain circumstances and in the case of the bottom bars it makes sense for them to be white. It's something we'll have to solve with the nav update anyway, because there I'm proposing white icons inside blue buttons for actions. The point remains that we should be able to change the color in the code.

What do you mean by "changes made to the svg"? Maybe it's something simple I can tweak with the export settings? Let's see if we can solve this easily before pushing it off.

[garethbowen]

I've done this recently with a site where the svgs change colour on hover. The svg itself then has no colour and the colour is specified in css only. I think we also have to change how we include the svg which may change things. The other alternative is to have a white one and a colourful one, but that would be a shame.

I'll have a look next week.

[sglangevin]

Tested this on alpha.dev. We had a few issues that were configuration issues - this caused the icons to appear strangely on the RHS [action bar]. The new area and new person icons especially, but could have been others too. They looked too big (I think they were showing up as 60px). I was able to fix this by adjusting the resources though. It had to do with the fact that I already had an icon called clinic and an icon called person so we should look out for that situation and consider replacing those icons on upgrade.

Other than that, I think the only thing needed here is to fix up the icons in the action bars so that they are white. Looks nice with matching icons on the RHS and LHS!

[garethbowen]

Code review please @SCdF

[garethbowen]

@amandacilek To get the supplied csvs to be able to be styled I had to make some changes to them.

1. Firstly I minified the csvs which removed whitespace, unused elements, etc which reduced the file size by about half.
2. I removed all the IDs. When the svgs were inlined in the page the IDs collided and we ended up with the same icon for every contact in the list regardless of type. This mean the fill attribute had to be included directly on the path element.

For example, the person svg:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title>icon/people/icon-personcrop</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M24.9761429,22.8241469 C24.9761429,25.187902 23.4437619,26.6034122 21.1880476,26.6034122 L8.78804762,26.6034122 C6.53233333,26.6034122 4.99995238,25.187902 4.99995238,22.8241469 C4.99995238,19.5258612 5.75185714,14.462351 9.909,14.462351 C10.349,14.462351 12.2075714,16.4905959 14.9880476,16.4905959 C17.769,16.4905959 19.6275714,14.462351 20.0670952,14.462351 C24.2242381,14.462351 24.9761429,19.5258612 24.9761429,22.8241469 M20.4361429,8.60390204 C20.4361429,11.6974531 17.9956667,14.2071673 14.9880476,14.2071673 C11.9804286,14.2071673 9.53995238,11.6974531 9.53995238,8.60390204 C9.53995238,5.50986122 11.9804286,2.99965714 14.9880476,2.99965714 C17.9956667,2.99965714 20.4361429,5.50986122 20.4361429,8.60390204" id="path-1"></path>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icon/people/icon-personcrop">
            <mask id="mask-2" fill="white">
                <use xlink:href="#path-1"></use>
            </mask>
            <use id="personcrop" fill="#F47963" xlink:href="#path-1"></use>
            <g id="color/03-rose" mask="url(#mask-2)">
                <g transform="translate(-5.000000, -5.000000)"></g>
            </g>
        </g>
    </g>
</svg>

becomes...

<svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M25 22.8C25 25.2 23.4 26.6 21.2 26.6L8.8 26.6C6.5 26.6 5 25.2 5 22.8 5 19.5 5.8 14.5 9.9 14.5 10.3 14.5 12.2 16.5 15 16.5 17.8 16.5 19.6 14.5 20.1 14.5 24.2 14.5 25 19.5 25 22.8M20.4 8.6C20.4 11.7 18 14.2 15 14.2 12 14.2 9.5 11.7 9.5 8.6 9.5 5.5 12 3 15 3 18 3 20.4 5.5 20.4 8.6" fill="#F47963"/></svg>

These rules will need to be followed for all future svgs you wish to include in the app.

For AT: on servers that have already run the migration (eg: alpha.dev) this will not work. After upgrade please go to Configuration > Icons and upload the updated icons.

[SCdF]

LGTM, merged

[sglangevin]

Working well on alpha.dev. I'm seeing some weirdness with one of the other configurable icons, but we'll have to come back and re-test this during release testing to make sure everything works as expected on upgrade from 2.13 to 2.14.