Revamp icons

[afh]

Add support for highlighted icons
Add non-retina versions for all icons
Add new icons for tag, fetch, pull, push, detail and tree
Add icons for collapsed and expanded folder items
Refine colors for file icons
Rename Images.pxm to Icons.pxm

Here is another revamp of the Gitx icons.

Along with it I've added support for custom images for highlighted items, this allows to use different colors to greatly improve the visibility, by taking the selected background color into account and adding a subtle drop-shadow.

This required some changes to how icon images are loaded. I removed the class static variable in the specific PBSourceViewItem classes (e.g. PBGitSVFolderItem) and replaced that with a generic implementation of icon: and highlightedIcon: in the PBSourceViewItem base class. Loaded icon images are configured to be always cached and from my point of view this should have the same effect as the class static variable.

With this a PBSourceViewItem subclass simply returns the "base name" of its icon (e.g. Folder) in the newly added iconName method and the PBSourceViewItem takes care of adding the Highlighted icon name suffix if needed and loading the image.

I took extra care to fine-tune the colors to the best of my knowledge to make the icons easily recognisable, while providing a common look and feel.

As requested in #182 I've added a revamped version of the detail and tree view icons, and took the liberty of updating the add remote, fetch, pull and push icons.

As a little extra folder items also get a custom icon whether they are expanded or collapsed.

All icons should be available for retina (see attached screenshot below) and non-retina displays, if not let me know and I'll correct that.

Hope everyone likes the new look.

[rowanj]

Looks good to me! I like the contrast on the selected state, and the new 'closed' folders.

I doubt there will be any problems with the image caching changes.

I'm not really familiar with it myself (I still don't have a Retina Mac display), but have you seen Apple's High Resolution Guidelines? I think the Xcode option to "Combine High Resolution Artwork" may actually be the right way to go, but I'm happy to leave that to the people that actually deal with the graphics resources.

[afh]

I agree combining high resolution artwork is the right way to go. I would love to automate creating the icons somehow, but in order to get high quality pixel aligned icons (as mentioned and rightfully requested by @nanoant in #182) manual work is required.

[rowanj]

I haven't even seen the process in action, I just wondered if you had any thoughts on it.

[rowanj]

I've juxtaposed the newest (dd27293), the previous (current build), and original (0.14.81) here as seen on a non-retina screen for comparison.

For the details, I'm happy to merge this as-is for the next build (it's still a great improvement), but It seems like there's substantially less sharpness to the more detailed icons than you probably intend:

For design, I'm also not completely sold on the fetch/push/pull icons; I think there should be at least as much visual correlation between fetch and pull as there is between pull and push; since pull = fetch + merge.

Again though, the changes are great, and I'm very glad to have somebody actually addressing the visual issues 👍

[nanoant]

Frankly, I don't like new icons. Why? Because they bring totally new design that doesn't line up with other dev tools like TextMate or Xcode - take a look how the folders look like there, neither the Lion flat mono look.

Why change something that is working well? Because Retina? If so why no just provide Retina version for existing icons. Many of them are system ones like Folders, Remote places that have already retina versions provided by Cocoa. Others that are relative to Git are rather simple, so it is like few hours of work to make up Retina versions or ever PDF scale independent versions out of old low resolution (but nicely pixel aligned) ones.

I can do that for you if you want :)

@afh I am sorry for putting my negative opinion there, but this is how I feel about GitX, which UI was almost perfect as it was, while @rowanj was making its internals even better.

[pipelineoptika]

I disagree, @nanoant. I think the new icons, once they're pixel-aligned for non-retina devices, will be crisp, obvious and clean. I also think it's a fantastic differentiator for this branch.

Luckily, with this being a completely open source tool, you can pop a tag on the last iteration with the icon design that you prefer, and build your own up-to-date copy with no dramas. :)

So, I'm a very strong 👍 for the new icons. I vote they be kept. Nice work, @afh.

[pipelineoptika]

Also, I commend to all of you the revised design for Xcode 5, if you get an opportunity to look at it. It makes @afh's icon changes look prescient!

[nanoant]

Just to be clear to all you guys, my biggest complaint is in fact against the folder and remote icons. These were system icons, same across all apps, now they're custom (web-alike). So IMHO fair trade would be just to keep folders and remote places same as they're in other apps (Xcode, TextMate) & finder.

@pipelineoptika I know someone's taste (like mine) is not a subject of discussion, that's why I wrote the @afh's icons doesn't really line up with Xcode and TextMate (most popular dev tools). You say they do with Xcode 5, so let me show you Xcode 5 sidebar (you're mentioning) (we are free to discuss WWDC stuff this year!)

Again, I complain about folders and remote (globe) icon on sidebar. Everything else doesn't change much (except it could be pixel-aligned) in my opinion, and may bring some "refreshment" the the users.

Finally take a look what's Apple doing with OSX, they're dropping (back) custom app design in 10.9 in favor of unified design as in <=10.6.

[pipelineoptika]

@nanoant, can I just say that I appreciate the level-headed nature of this discussion. It's great to see.

I can see your point with regards to the folder icons, and it may be that using a system default may be the right way to jump. I'm certainly open to being convinced.

With regards to the globe, I think it's never been a good representation of a remote anything, and I was really pleased to see something new there. While I'm not necessarily certain that it's a cloud, I'm leaning toward it. I think it's fun, and has a good look.

@afh, @rowanj: thoughts?

[rowanj]

I think the points in favour of using the system icons for folders are winning in my mind. As for remotes, I'm not really strongly Pro-globe or Pro-cloud - many of my 'remotes' are still on the same machine, or at least the same network, which I don't really associate strongly with being cloud-ey. I guess for remotes I'd prefer to see something more Git-ish or abstract, like GitHub's

I should emphasise that I like both options; and I think the real problem is the actual interface layout and design seems to have never gone through a major iteration since Luallon's sidebar was added. Adding/fetching a remote should be done from the remotes section in the sidebar, the toolbar should be full width, the sidebar colour doesn't quite match any other OS X app, stage view should be a selector in the toolbar (like Xcode's normal/assistant/versioning toggles), diff/tree view should be tab or something in the lower half of the window, the app icon itself sucks, the sidebar needs a filter box, the search box should always match filenames, ⌘F, ⌘G, ⌘↑G don't work... but I'm getting off-topic.

[afh]

@rowanj: Please refrain from merging this commit for the non-retina icons aren't pixel aligned.
I'll present my work in a separate branch for review and will answer to the comments above in the next couple of days (I have some work related tasks, which demand much time at the moment).

[joegrist]

Hi GitX people. @pipelineoptika asked me to chime in with an opinion. I'm the UI guy from AsdeqDocs, amongst other things. I've reviewed the commit. It's a curly one.

I'd say this is heading in the right direction. Open folder icons is a good usability win. The push/pull icons are no longer cryptic. I'd say the cloud icon is generally a strong idea. It's always had a meaning of 'some place out in cyberspace and you don't need to understand exactly where', even before the whole cloud computing thing hijacked the symbol. I think it works great for a remote, and is easier to get than a globe that looks a bit too much like the network settings icon.

GitX has always had a 'we just found some default icons' kind of look about it. It looks like the programmers don't care about the UI to much, which is very much not the case at all, but that's the message the old look put out there. The new look gives the product a little more of a 'cared about', finished kind of look.

I think you can still improve on the new icon set. Here's my suggestions. Firstly, the new icons don't seem to fill the available space as well as the old ones did. They seem a bit poky. I'd just try and use all those 16 points to good effect. Secondly, they lack delineation and contrast. A bit more use of colour could make it easy to understand at a glance. I'd be considering using even a white for the cloud to separate it from the folders. Thirdly, the branch icon lacks contrast in the highlighted state.

This last paragraph is my opinion only, take it or leave it.

Subjectively, while the 'flat look' is very faddish right now, and in some circumstances it rocks (like magazine style layouts), I have always found it challenging to make an interactive UI that people really connect with if it is fully flat. Most people really respond to a bit of subtle craft, making things look really well resolved and finished. As we all interact with 3d objects every day, concepts of relief, stacking, etc. will always make things look friendly and easy to use, like the real world. With these icons I'd be really tempted to add some subtle outlining or embossing, and just a few details that you hardly even see. Just to make it subtly bright and friendly.

Sorry if this is a bit disjointed, kids running riot, jumping on me, etc. better go put some of them to bed. Thanks for the great software guys, using it heaps.

[afh]

Hi all,
I have created an overview of the work on the icons in the wiki. The hires icons are now all pixel-aligned and some of the icons (such as the fetch button and the remote branch icon) have been redesigned, taking the aforementioned ideas into account.

The work is not yet finished, since the non-hires icons need to be pixel-aligned too (never thought it was that much work ;) and source list could be refactored to use views instead of cell, in order to use template images, which are highlighted automatically.

I greatly appreciate and encourage further comments, it's been very helpful and inspiring so far.

[nanoant]

@afh Dunno why, but many of the icons show here as non-existent, but I guess this is intended, especially there're no old-retina stuff.

I understand Icon IconHighligted & IconTemplate are temporary until all icons will be migrated to single template files?

source list could be refactored to use views instead of cell, in order to use template images, which are highlighted

@afh This is not true, template images work just fine with cell based NSOutlineView. I use them across several projects since long while. Migrating to view-based solution won't bring any improvement, but will bump minimum requirements to 10.7.

[afh]

@nanoant thanks for your comments.
Correct the non-existent icons in the overview are intended.

Yes, Icon IconHighlighted & IconTemplate are temporary and will be migrated to single template files.

If template images work just fine with cell based NSOutlineView, then I'm ok to work with that, for it would
required smaller changes. Currently the icon image is drawn directly in PBIconAndTextCell.m -drawWithFrame:inView: how could single file template images be drawn using a cell based NSOutlineView?

Last time I checked Gitx's deployment target was 10.7…

[nanoant]

how could single file template images be drawn using a cell based NSOutlineView?

You need set up two columns in XIB. One with NSImageCell with fixed size (min == max ~ 30), 2nd with NSTextFieldCell variable size (min = ~30, max = large value).

Then set outline view column sizing to last column only, set highlight style to Source List.

Then in NSOutlineView delegate - outlineView:objectValueForTableColumn:byItem: for your icon column (determined by id) you return NSImage (with has isTemplate == YES) and for title column you return NSString title.

If your outline NSOutlineView has NSTableViewSelectionHighlightStyleSourceList selection highlight style then your icon will have all the effect applied as it should.

Finally for root group items (these without triangle disclosure sign, shown with capital letters, and bold gray font) you need to return NSTextFieldCell instance, i.e. your title column cell on - outlineView:dataCellForTableColumn:item: for nil table column. This makes certain row (in this case root group item) to use single cell for whole row, rather than separate columns.

This altogether makes whole Finder, Mail.app sidebar look without any extra styling work on your side.

See also apple doc about sidebar icon design:
https://developer.apple.com/library/mac/#documentation/userexperience/conceptual/applehiguidelines/IconsImages/IconsImages.html%23//apple_ref/doc/uid/20000967-SW3

[nanoant]

Just wanted to add, the reason PBGitSidebarView doesn't work like above since very beginning is probably because the code was started more less when 10.5 Leopard was released, so probably using 10.4 API, while template images API was introduced in 10.5 :) I've no clue why no icon & text columns instead PBIconAndTextCell subclass though.

[rowanj]

I think this is looking pretty snazzy!

@afh thanks for the shiny graphics, and the great writeup on the wiki.

In review, I'd like to see a bit more weight to the down-arrow glyph in the fetch icon in non-retina:

But everything else is looking much crisper, bolder, rounder. I like it.

[nriley]

Everything looks pretty good except the new file icons.

First, they're not properly vertically centered with the text; they're aligned with the top of the text rather than its middle.

Second, the page corners are translucent — they turn blue when highlighted.

Finally, the file icons have an odd aspect ratio — neither that of US Letter (~1.3:1) nor A4 paper (~1.4:1). Non-retina, they are 14×12 (~1.17:1), whereas Apple's (and the original GitX’s) are 16×12 (~1.33:1).

Here's an old GitX screenshot for comparison, which I think looks much better: