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.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
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 :)
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?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
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 :)
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
SIL Open Font License is okay for us to use, provided we follow the right guidelines for notices etc: http://www.apache.org/legal/resolved.html#category-b
Font Awesome was added as part of SimpleMDE editor in [#7897], so we can just stick with it.
Related
Tickets:
#7897When 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.
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
Closed #830, #836.
ib/7924
Changed icons in Allura only. I want to get initial feedback before proceeding with SF internal stuff and extensions.
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 :)
Updated
ib/7924
(force-push)Also, SF related changes in
{forge-classic,sftheme}:ib/7924
And merge request for Pastebin extension https://sourceforge.net/p/forgepastebin/code/merge-requests/5/
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, isico-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 itsre_icon_theme
logic. Those options aren't available by default (have to run apaster
command, iirc) so probably can just remove thetitlebarcolor
option if that's easiest.Minor thing, maybe only default
href='#'
if the tag isa
? Its probably not valid for a<b>
tag to have anhref
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 couldtransform: scale(-1, 1);
the icon to make it upside down :) but that might mess up other stuff. For revert, what aboutfa-undo
same as used for undelete?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
inAllura/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 itGood 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 inSitemapEntry
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.
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.
In
Allura/allura/templates/widgets/repo/tree_widget.html
I thinkfa-file-o
would be better to use than thetable
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 hasclass=fa
then the text has different font family and font settings than normal. Thea.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 thea
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?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 :)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)