docs(indexPage.template.html): Highlight current navItem

[kentcdodds]

I think it would be useful to know which navItem you're on, especially on the guide pages. I'm no designer, but something like this could be useful..

How it is now

What I propose

It's much easier to identify what your current position is.

Changes required:

• <i class="glyphicon glyphicon-arrow-right"></i> the navItem repeat in indexPage.template.html
• The addition of current: this.currentPage.path === navItem.href in the navClass function in docs.js
• The addition of .current docs.css to .nav-index-group .nav-index-listing which will set the color and display or hide of the icon. The color I'm using is #B52E31 which is equal the dark part of the angular logo, and the arrow has a padding of 8px.

As a side, I noticed that there's an active class in the navClass function that appears to always resolve to true for every nav item leading to that class being added to every nav item... I'm not sure what it's purpose is, but if it's not in use, then we could change the expression and css properties to match what I propose for the current class to accomplish this as well...

I'm happy to submit a PR to do this, but I thought I'd check whether something like this would be acceptable first.

[pkozlowski-opensource]

I'm not a designer either but highlighting a currently selected item sounds like a good idea. I'm terrible at design so take everything I'm saying with a grain of salt, but IMO an arrow isn't necessary - a different color would do, IMO.

PR welcomed - the smaller it is the bigger chance of merging.

[kentcdodds]

Perhaps you could help me with this @pkozlowski-opensource... I just did a clean clone with an npm i && bower i then ran grunt test:docs and I get this:

~/dev/angular.js (docs-current-highlight)
🍰  $ grunt test:docs
Running "bower" task

Running "clean:build" (clean) task
>> 1 path cleaned.

Running "clean:tmp" (clean) task
>> 1 path cleaned.

Running "buildall" task
>> File build/angular-scenario.js created.
>> File build/angular.js created.
>> File build/angular-loader.js created.
>> File build/angular-touch.js created.
>> File build/angular-mocks.js created.
>> File build/angular-sanitize.js created.
>> File build/angular-resource.js created.
>> File build/angular-messages.js created.
>> File build/angular-animate.js created.
>> File build/angular-route.js created.
>> File build/angular-cookies.js created.
>> File build/angular-aria.js created.
>> File tmp/promises-aplus-adapter++.js created.

Running "minall" task
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/google/javascript/jscomp/CommandLineRunner : Unsupported major.minor version 51.0
    at java.lang.ClassLoader.defineClass1(Native Method)
    at java.lang.ClassLoader.defineClassCond(ClassLoader.java:637)
    at java.lang.ClassLoader.defineClass(ClassLoader.java:621)
    at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:141)
    at java.net.URLClassLoader.defineClass(URLClassLoader.java:283)
    at java.net.URLClassLoader.access$000(URLClassLoader.java:58)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:197)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:190)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
    at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:301)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
    at java.lang.ClassLoader.defineClass1(Native Method)
    at java.lang.ClassLoader.defineClassCond(ClassLoader.java:637)
    at java.lang.ClassLoader.defineClass(ClassLoader.java:621)
    at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:141)
    at java.net.URLClassLoader.defineClass(URLClassLoader.java:283)
    at java.net.URLClassLoader.access$000(URLClassLoader.java:58)
    at java.net.URLClassLoader$1.run(URLClassLoader.java:197)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(URLClassLoader.java:190)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:306)
    at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:301)
    at java.lang.ClassLoader.loadClass(ClassLoader.java:247)
Exception in thread "main" java.lang.UnsupportedClassVersionError: com/google/javascript/jscomp/CommandLineRunner : Unsupported major.minor version 51.0

Any idea what this error could mean? I was hoping to write a test for the functionality I'm adding... Or at least to make sure that no tests are breaking...

[caitp]

closure is reallly !@#$ing frustrating, seriously. What platform are you using?

[kentcdodds]

I'm on OS X Yosemite.

[caitp]

Me too --- I recall I updated to JRE8 at some point, java -version yields 1.8.0_20. Maybe you need an upgrade?

[kentcdodds]

This is a new computer, so I'm not totally surprised when the output is:

~/dev/angular.js/docs (docs-current-highlight)
🍰  $ java --version
Unrecognized option: --version
Could not create the Java virtual machine.

I'll try to install the JRE8 and see if that fixes it.

[caitp]

single hyphen for the -version argument, it caught me too :p

[kentcdodds]

Lol, that's better...

~/dev/angular.js (docs-current-highlight)
🍰  $ java -version
java version "1.6.0_65"
Java(TM) SE Runtime Environment (build 1.6.0_65-b14-466.1-11M4716)
Java HotSpot(TM) 64-Bit Server VM (build 20.65-b04-466.1, mixed mode)

Downloading 8 now.

[kentcdodds]

That did the trick. We may want to add this to the contributor guidelines :-)

[kentcdodds]

Having trouble running the docs site locally. Don't know which task to run and can't seem to find docs on it. Any tips?

[pkozlowski-opensource]

grunt --help

[kentcdodds]

I must seem so incompetent, but all I see there is grunt docs and grunt test:docs. There's the webserver, but that just serves up the file system and there's no index.html or anything to load. I've also run gulp in the docs directory and it generated the docs (presumably), but I still don't see where I'm supposed to run the docs :-/