#7924 Update icons

v1.3.2
closed
General
2015-11-02
2015-07-13
No

Our icons should be updated and support hidpi screens. Font awesome might be a good choice or possibly fontello.

Licenses need to be taken into consideration and included in the appropriate places.

Related

Tickets: #7685

Discussion

1 2 > >> (Page 1 of 2)
  • Igor Bondarenko

    Igor Bondarenko - 2015-07-17

    Font Awesome was added as part of SimpleMDE editor in [#7897], so we can just stick with it.

     

    Related

    Tickets: #7897

  • Dave Brondsema

    Dave Brondsema - 2015-07-17

    When we change, we'll also want to make sure we have good consistency of icon choices everywhere. Our limited icon sprite right now means we have some less-than-ideal choices. For example, we have an "X" for delete but "X" often means "close". A trash icon or something like that would be better.

    We also have mixed usage of pencil (should be just edit) for emailing (e.g. on forum page). I'm not sure what is best since mail has 2 directions (sending, receiving) so we need to consider icons for sending (which is rare) as well as subscribing for notifications.

    There may be other cases to update too, those are just a few that came to mind.

     
  • Dave Brondsema

    Dave Brondsema - 2015-07-27
    • labels: new-admin --> new-admin, sf-current, sf-4
     
  • Igor Bondarenko

    Igor Bondarenko - 2015-07-28
    • labels: new-admin, sf-current, sf-4 --> new-admin, sf-current, sf-4, 42cc
    • assigned_to: Igor Bondarenko
     
  • Dave Brondsema

    Dave Brondsema - 2015-07-28

    I remembered ForgeHg and ForgePastebin packages probably should be updated too. Our other [Extensions] either aren't maintained or don't have icons I think.

     

    Related

    Wiki: Extensions

  • Igor Bondarenko

    Igor Bondarenko - 2015-08-13

    Closed #830, #836. ib/7924

    Changed icons in Allura only. I want to get initial feedback before proceeding with SF internal stuff and extensions.

     
  • Igor Bondarenko

    Igor Bondarenko - 2015-08-13
    • status: open --> review
     
  • Heith Seewald

    Heith Seewald - 2015-08-18
    • Reviewer: Heith Seewald
     
  • Heith Seewald

    Heith Seewald - 2015-08-18

    This is looking really good! It's so much nicer on my retina display...

    I think I slightly perfer the fa-pencil over the fa-edit for the 'edit' icon on the action bar -- but thats probably just because I'm used to it. Honestly I could go either way.

    Looking forward to seeing the other extentions with these icons :)

     
  • Heith Seewald

    Heith Seewald - 2015-08-18
    • status: review --> in-progress
     
  • Igor Bondarenko

    Igor Bondarenko - 2015-10-19
    • status: in-progress --> review
     
  • Dave Brondsema

    Dave Brondsema - 2015-10-20
    • status: review --> in-progress
     
  • Dave Brondsema

    Dave Brondsema - 2015-10-20

    There are some icons on the old set still. First ones I found were the Icon and Project Status fields on the project admin metadata page. You can grep for ico- and find some more too. One place where the old one doesn't even work, is ico-mail on the discussion thread list column header.

    There's some crufty corners referencing the icon sprite too. Neighborhood.get_css_for_picker for example with its re_icon_theme logic. Those options aren't available by default (have to run a paster command, iirc) so probably can just remove the titlebarcolor option if that's easiest.

    Minor thing, maybe only default href='#' if the tag is a? Its probably not valid for a <b> tag to have an href for example.

    The big fa-user on profile pages (for users without an email address set) isn't lined up quite right inside its box. text-align: center; does the trick. That might be useful other places too?

    On code repos, the download snapshot and History icons aren't visible.

    I like the choice of icons, good to see the "send" email as a flying paper airplane :) A hand for moderate is good, etc. Nice work :) Only one I've found that I'm not so sure about is code-fork for forking, merging, and reverting wiki pages. For merge, you could transform: scale(-1, 1); the icon to make it upside down :) but that might mess up other stuff. For revert, what about fa-undo same as used for undelete?

     
    • Dave Brondsema

      Dave Brondsema - 2015-10-21

      fa-history is even better for reverting wiki pages to previous versions.

      fa-list could be good for the Browse Commits (instead of a folder)

      fa-table in Allura/allura/templates/repo/file.html doesn't seem to do anything useful. I looked through the commit history and it used to be a jquery ui "document" icon long ago. I don't think we need it

       
      • Igor Bondarenko

        Igor Bondarenko - 2015-10-22

        Good suggestions, thanks!

        transform: scale does indeed makes things messy, since it's also transforming text on a button. Because 'span' with a text is a child of an 'a' with an icon we can't revert this transformation for text. I guess we can render span not as a child, but as a sibling, but it would be an edge case which we will need to handle in SitemapEntry rendering code and that's just ad-hoc and messy.

        fa-stumbleupon looks like two things merging to me, kind of... but that's a company logo...

        I'm still working on some of your suggestions, but most of them are done.

         
  • Igor Bondarenko

    Igor Bondarenko - 2015-10-23
    • status: in-progress --> review
     
  • Igor Bondarenko

    Igor Bondarenko - 2015-10-23

    Closed #853.

    Force-pushed allura, forge-classic and sftheme branches.

    For titlebarcolor option I've removed only additional option to choose between white/dark icon theme (see comment for the corresponding commit). To enable this options on 'Projects' neighborhood run: docker-compose run taskd paster set-neighborhood-features docker-dev.ini Projects css picker

    I've left merge icon as is for now.

     
  • Dave Brondsema

    Dave Brondsema - 2015-10-26
    • status: review --> in-progress
     
  • Dave Brondsema

    Dave Brondsema - 2015-10-26

    In Allura/allura/templates/widgets/repo/tree_widget.html I think fa-file-o would be better to use than the table icon.

    And possibly a bigger issue here - I wish we had noticed this earlier. When we have text inside the <a> (or whichever tag) that has class=fa then the text has different font family and font settings than normal. The a.fa > span could be changed to .fa > span which would help match more items. However its still not perfect because there are other font settings. On OSX/FF, -moz-osx-font-smoothing: initial is necessary to get that setting back to normal. However, the similar -webkit-font-smoothing does not necessarily need to be overridden since we already set it in our site style. I haven't noticed differences with any of the other kerning or spacing or streching rules, but its possible they would pop up in different situations. So.... it seems the best solution would be to not have text inside the tag with .fa so it doesn't get any style changes. But that might be a little tedious to change Icon.render output, cases where closing tags are handled separately, plus all the padding & spacing rules for the a and other tags (I did a quick test and saw too much space showing up between the icon and the text. What do you think?

     
    • Igor Bondarenko

      Igor Bondarenko - 2015-10-27

      Yeah, I wish I thought of that earlier. I think we should do it properly, meaning changing Icon.render output and fixing styles. It might be a bit tedious, but not very much, I think. Closing tag is handled separately in one place only, so it's not a problem. Spacing issues might take some time, though. Anyway, I'll give it a try.

      And as a bonus we will be able to apply scale to fork/merge icon and don't mess up anything else :)

       
  • Igor Bondarenko

    Igor Bondarenko - 2015-10-27
    • status: in-progress --> review
     
  • Igor Bondarenko

    Igor Bondarenko - 2015-10-27

    Closed #858.

    It was not so scary. I was even able to remove some ad-hoc styles, which was necessary with previous approach :)

    Force pushed:
    - allura
    - sftheme
    - forge-classic (no new changes, just rebase)

     
  • Dave Brondsema

    Dave Brondsema - 2015-10-28
    • labels: new-admin, sf-current, sf-4, 42cc --> new-admin, sf-current, sf-4, 42cc, ux
    • status: review --> closed
    • Reviewer: Heith Seewald --> Dave Brondsema
     
1 2 > >> (Page 1 of 2)

Log in to post a comment.