Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update the icons used for contacts #3945

Closed
garethbowen opened this issue Oct 4, 2017 · 14 comments
Closed

Update the icons used for contacts #3945

garethbowen opened this issue Oct 4, 2017 · 14 comments
Labels
Contacts Affects the Contacts page Priority: 2 - Medium Normal priority Type: Feature Add something new UI/UX Site design and usability improvements.

Comments

@garethbowen
Copy link
Member

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 garethbowen added Contacts Affects the Contacts page Priority: 2 - Medium Normal priority Status: 1 - Triaged Type: Feature Add something new UI/UX Site design and usability improvements. labels Oct 4, 2017
@garethbowen garethbowen self-assigned this Oct 4, 2017
@garethbowen
Copy link
Member Author

Icons: personicons.zip

@garethbowen garethbowen removed their assignment Oct 4, 2017
@amandacilek-zz
Copy link

screen shot 2017-10-04 at 2 19 49 pm

@amandacilek-zz
Copy link

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 garethbowen self-assigned this Oct 5, 2017
garethbowen added a commit to medic/medic-api that referenced this issue Oct 5, 2017
@garethbowen
Creates a migration to install the default icons
76533fb 
Modifies the 'resources' doc with the default icons for clinic,
health_center, district_hospital, and person so we're not limited
to the font-awesome icons.

medic/cht-core#3945
garethbowen added a commit that referenced this issue Oct 5, 2017
@garethbowen
Loads contact icons from resources not font awesome
9ca8f7e 
Uses the static resources doc rather than the font awesome fonts
which means we have more flexibility and also makes the icons
configurable.

#3945
@garethbowen
Copy link
Member Author

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

rainbow

This was referenced Oct 5, 2017
Merged
Merged
@garethbowen
Copy link
Member Author

Two PRs to review please @alxndrsn

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

@garethbowen garethbowen assigned alxndrsn and unassigned garethbowen Oct 5, 2017
garethbowen added a commit to medic/medic-api that referenced this issue Oct 5, 2017
@garethbowen
Creates a migration to install the default icons
f3cd20e 
Modifies the 'resources' doc with the default icons for clinic,
health_center, district_hospital, and person so we're not limited
to the font-awesome icons.

medic/cht-core#3945
garethbowen added a commit that referenced this issue Oct 5, 2017
@garethbowen
Loads contact icons from resources not font awesome
53bb364 
Uses the static resources doc rather than the font awesome fonts
which means we have more flexibility and also makes the icons
configurable.

#3945
garethbowen added a commit to medic/medic-api that referenced this issue Oct 5, 2017
@garethbowen
Patch migration to handle null _attachments
e8b5e39 
medic/cht-core#3945
garethbowen added a commit to medic/medic-api that referenced this issue Oct 5, 2017
@garethbowen
Patch migration to handle null _attachments
bdf0fea 
medic/cht-core#3945
@sglangevin sglangevin removed their assignment Oct 6, 2017
garethbowen added a commit to medic/medic-api that referenced this issue Oct 10, 2017
@garethbowen
Minify resource icons
45ba838 
Strip out all the unnecessary code. Also remove the IDs which
had duplicates and caused ID collisions when included together on
the page.

medic/cht-core#3945
garethbowen added a commit that referenced this issue Oct 10, 2017
@garethbowen
Update resource icons to inline svgs
fa46867 
The ResourceIcons service and resourceIcons filter now detect if
the icon is an svg and inline the xml if it is. This means we can
now apply css styles to the svg which is important, for example,
when we want to use a coloured icon for clinic in the list and the
same icon in white in the action bar.

#3945
garethbowen added a commit that referenced this issue Oct 10, 2017
@garethbowen
Update api to latest
159f470 
#3945
@garethbowen garethbowen mentioned this issue Oct 10, 2017
Merged
5 tasks
@garethbowen
Copy link
Member Author

Code review please @SCdF

@garethbowen garethbowen assigned SCdF and unassigned garethbowen Oct 10, 2017
@garethbowen
Copy link
Member Author

@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 pushed a commit that referenced this issue Oct 10, 2017
@garethbowen @SCdF
Update resource icons to inline svgs
81c0740 
The ResourceIcons service and resourceIcons filter now detect if
the icon is an svg and inline the xml if it is. This means we can
now apply css styles to the svg which is important, for example,
when we want to use a coloured icon for clinic in the list and the
same icon in white in the action bar.

#3945
@SCdF SCdF removed their assignment Oct 10, 2017
@SCdF
Copy link
Contributor

SCdF commented Oct 10, 2017

LGTM, merged

@sglangevin sglangevin self-assigned this Oct 10, 2017
@sglangevin
Copy link

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.

@sglangevin sglangevin removed their assignment Nov 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Contacts Affects the Contacts page Priority: 2 - Medium Normal priority Type: Feature Add something new UI/UX Site design and usability improvements.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@alxndrsn @SCdF @sglangevin @garethbowen @amandacilek-zz