Note: "Bad curly" should be smaller but isn't, due to + issue #6901.
diff --git a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts index 31cb07858c..0ed5f9f8a7 100644 --- a/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/toh-5/ts/app/hero-detail.component.ts @@ -2,7 +2,7 @@ // #docregion // #docregion v2 // #docregion import-oninit -import { Component, Input, OnInit } from 'angular2/core'; +import { Component, OnInit } from 'angular2/core'; // #enddocregion import-oninit // #docregion import-route-params import { RouteParams } from 'angular2/router'; @@ -27,7 +27,7 @@ import { HeroService } from './hero.service'; // #docregion implement export class HeroDetailComponent implements OnInit { // #enddocregion implement - @Input() hero: Hero; + hero: Hero; // #docregion ctor constructor( diff --git a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts index 22f2e5222e..4c5b08c5b3 100644 --- a/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts +++ b/public/docs/_examples/tutorial/ts/app/hero-detail.component.ts @@ -1,4 +1,4 @@ -import {Component, Input, OnInit} from 'angular2/core'; +import {Component, OnInit} from 'angular2/core'; import {RouteParams} from 'angular2/router'; import {Hero} from './hero'; @@ -10,7 +10,7 @@ import {HeroService} from './hero.service'; styleUrls: ['app/hero-detail.component.css'] }) export class HeroDetailComponent implements OnInit { - @Input() hero: Hero; + hero: Hero; constructor(private _heroService: HeroService, private _routeParams: RouteParams) { diff --git a/public/docs/ts/latest/guide/component-styles.jade b/public/docs/ts/latest/guide/component-styles.jade index af41817a0e..a4a6ac6c38 100644 --- a/public/docs/ts/latest/guide/component-styles.jade +++ b/public/docs/ts/latest/guide/component-styles.jade @@ -8,7 +8,7 @@ include ../_util-fns On top of this, Angular has the ability to bundle *component styles* with our components enabling a more modular design than regular stylesheets. - In this chapter we how to load and apply these *component styles*. + In this chapter we learn how to load and apply these *component styles*. # Table Of Contents @@ -176,7 +176,7 @@ a(id='loading-styles') `styles: [require('my.component.css')]` We set the `styles` property, **not** `styleUrls` property! The module bundler is loading the CSS strings, not Angular. - Angular only sees the CSS strings *after* the bundler loaded them. To Angular it is as if + Angular only sees the CSS strings *after* the bundler loads them. To Angular it is as if we wrote the `styles` array by hand. Refer to the module bundler's documentation for information on loading CSS in this manner. diff --git a/public/docs/ts/latest/guide/upgrade.jade b/public/docs/ts/latest/guide/upgrade.jade index f6b9c9501f..74903240a7 100644 --- a/public/docs/ts/latest/guide/upgrade.jade +++ b/public/docs/ts/latest/guide/upgrade.jade @@ -974,7 +974,7 @@ code-example(format=""). +makeExample('upgrade-phonecat/ts/typescript-conversion/app/js/phone_list/phone_list.module.ts', null, 'app/js/phone_list/phone_list.module.ts') :marked - Finally, we can now pull everything together in `app.module.ts`. It here we'll + Finally, we can now pull everything together in `app.module.ts`. We'll import each of the three submodule files and register them as dependencies of the main application module: diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index 9991b9c76e..460e32c3f6 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -110,9 +110,7 @@ p code { opacity: 0.87; } h2 { - font-size: 15px; - text-transform: uppercase; - color: #78909C; + font-size: 20px; } h3 { font-size: 16px; diff --git a/public/resources/css/module/_api.scss b/public/resources/css/module/_api.scss index 558dd70812..2c8c9c3b9e 100644 --- a/public/resources/css/module/_api.scss +++ b/public/resources/css/module/_api.scss @@ -76,6 +76,32 @@ input.api-filter { } .docs-content { + .anchor-offset { + display: block; + position: relative; + top: -250px; + visibility: hidden; + } + + .anchor-focused { + background-color: transparent !important; + + -moz-animation: fade 1s linear; /* Firefox */ + -webkit-animation: fade 1s linear; /* Safari and Chrome */ + -o-animation: fade 1s linear; /* Opera */ + animation: fade 1s linear; + } + + @keyframes fade { + 0% { background-color: $sunshine } + } + + .h2-api-docs { + font-size: 15px !important; + text-transform: uppercase !important; + color: #78909C !important; + } + .api-list { list-style: none; padding: 0 0 ($unit * 4); @@ -113,7 +139,7 @@ input.api-filter { color: #1a2326; &.selector { - margin: 0 0 8px 0; + margin: 0; } &.location-badge { @@ -155,6 +181,32 @@ input.api-filter { padding: 0; } + .no-bg-with-indent { + padding-top: 0; + padding-bottom: 0; + padding-left: 16px; + margin-top: 6px; + margin-bottom: 0; + background: none; + } + + .code-background { + padding: 0 5px 0; + + span.pln { + color: #1E88E5 !important; + } + } + + .code-anchor { + cursor: pointer; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + code { font-size: 14px; color: #1a2326; diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index 73906acd3f..8e0fd6ff07 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -37,7 +37,7 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); padding-top: 40px; .badges { - margin-top: 48px; + margin-top: $unit * 6; } } @@ -65,6 +65,21 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); border-radius: 2px; line-height: 20px; display: inline-block; + + &:first-child { + margin-left: 0; + } + } + } + + @media screen and (max-width: 599px) { + .badges { + margin-top: $unit; + padding-left: 0; + } + + .hero-title-with-badges { + margin-bottom: $unit * 2; } } diff --git a/public/resources/js/controllers/app-controller.js b/public/resources/js/controllers/app-controller.js index 4b1e77b8b2..c8f4e15bdc 100644 --- a/public/resources/js/controllers/app-controller.js +++ b/public/resources/js/controllers/app-controller.js @@ -34,6 +34,13 @@ angularIO.controller('AppCtrl', ['$mdDialog', '$timeout', '$http', '$sce', funct userfeedback.api.startFeedback(configuration); }; + // URL hash keeps track of which method the user wants to view in the API doc. + // Refer to _api.scss (.anchor-focused) and class.template.html (where ng-class is used) for details. + vm.isApiDocMemberFocused = function(memberName) { + var apiDocFocusedMember = window.location.hash.replace('#!#', '').replace('-anchor', ''); + return apiDocFocusedMember === memberName; + }; + /* * Prettify Code * diff --git a/tools/api-builder/angular.io-package/templates/class.template.html b/tools/api-builder/angular.io-package/templates/class.template.html index aa753281dc..ad3b99d2ef 100644 --- a/tools/api-builder/angular.io-package/templates/class.template.html +++ b/tools/api-builder/angular.io-package/templates/class.template.html @@ -7,7 +7,7 @@ include {$ relativePath(doc.path, '_util-fns') $} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 What it does + h2(class="h2-api-docs") What it does div(flex="80" flex-xs="100") :marked {%- if doc.whatItDoes %} @@ -18,7 +18,7 @@ include {$ relativePath(doc.path, '_util-fns') $} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 How to use + h2(class="h2-api-docs") How to use div(flex="80" flex-xs="100") :marked {%- if doc.howToUse %} @@ -27,12 +27,46 @@ include {$ relativePath(doc.path, '_util-fns') $} *Not yet documented* {% endif %} +.div(class="row-margin" layout="row" layout-xs="column") + div(flex="20" flex-xs="100") + h2(class="h2-api-docs") Class Overview + div(flex="80" flex-xs="100") + code.no-bg class {$ doc.name $} { + + {% if doc.statics.length %} + .div(layout="column") + {% for member in doc.statics %}{% if not member.internal %} + pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }") + a(class="code-anchor" href="#{$ member.name $}-anchor") + code(class="code-background") {$ member.name | indent(6, false) | trim $} + code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $} + {% endif %}{% endfor %} + {% endif %} + {% if doc.constructorDoc.name %} + .div(layout="column") + pre(class="prettyprint no-bg-with-indent") + a(class="code-anchor" href="#constructor") + code(class="code-background") {$ doc.constructorDoc.name $} + code {$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $} + {% endif %} + {% if doc.members.length %} + .div(layout="column") + {% for member in doc.members %}{% if not member.internal %} + pre(class="prettyprint no-bg-with-indent") + a(class="code-anchor" href="#{$ member.name $}-anchor") + code(class="code-background") {$ member.name | indent(6, false) | trim $} + code {$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $} + {% endif %}{% endfor %} + {% endif %} + p.selector + code.no-bg } + {% block additional %} {% endblock %} .div(class="row-margin" layout="row" layout-xs="column") div(flex="20" flex-xs="100") - h2 Class Description + h2(class="h2-api-docs") Class Description div(class="class-description-content" flex="80" flex-xs="100") :marked {%- if doc.description.length > 2 %} @@ -43,7 +77,7 @@ include {$ relativePath(doc.path, '_util-fns') $} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Class Export + h2(class="h2-api-docs") Class Export div(flex="80" flex-xs="100") pre.prettyprint.no-bg code.no-pln. @@ -53,7 +87,7 @@ include {$ relativePath(doc.path, '_util-fns') $} {% block annotations %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Annotations + h2(class="h2-api-docs") Annotations div(flex="80" flex-xs="100") {%- for decorator in doc.decorators %} pre.prettyprint.no-bg @@ -72,9 +106,10 @@ include {$ relativePath(doc.path, '_util-fns') $} {%- if doc.constructorDoc and not doc.constructorDoc.internal %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Constructor + h2(class="h2-api-docs") Constructor div(flex="80" flex-xs="100") - pre.prettyprint.no-bg + a(name="constructor" class="anchor-offset") + pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ doc.constructorDoc.name $}') }") code. {$ doc.constructorDoc.name $}{$ paramList(doc.constructorDoc.parameters) | indent(8, false) | trim $} :marked @@ -88,7 +123,7 @@ include {$ relativePath(doc.path, '_util-fns') $} {% if doc.statics.length %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Static Members + h2(class="h2-api-docs") Static Members div(flex="80" flex-xs="100") {% for member in doc.statics %}{% if not member.internal %} pre.prettyprint.no-bg @@ -111,10 +146,11 @@ include {$ relativePath(doc.path, '_util-fns') $} {% if doc.members.length %} .div(layout="row" layout-xs="column" class="instance-members" class="row-margin") div(flex="20" flex-xs="100") - h2 Instance Members + h2(class="h2-api-docs") Class Details div(flex="80" flex-xs="100") {% for member in doc.members %}{% if not member.internal %} - pre.prettyprint.no-bg + a(name="{$ member.name $}-anchor" class="anchor-offset") + pre(class="prettyprint no-bg" ng-class="{ 'anchor-focused': appCtrl.isApiDocMemberFocused('{$ member.name $}') }") code. {$ member.name $}{$ paramList(member.parameters) | indent(8, false) | trim $}{$ returnType(member.returnType) $} diff --git a/tools/api-builder/angular.io-package/templates/directive.template.html b/tools/api-builder/angular.io-package/templates/directive.template.html index 4689381431..3602a50e54 100644 --- a/tools/api-builder/angular.io-package/templates/directive.template.html +++ b/tools/api-builder/angular.io-package/templates/directive.template.html @@ -10,7 +10,7 @@ {%- if doc.directiveOptions.selector.split(',').length %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Selectors + h2(class="h2-api-docs") Selectors div(flex="80" flex-xs="100") {% for selector in doc.directiveOptions.selector.split(',') %} p.selector @@ -21,7 +21,7 @@ {% if doc.outputs %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Outputs + h2(class="h2-api-docs") Outputs div(flex="80" flex-xs="100") {% for binding, property in doc.outputs %} div(class="code-margin") @@ -36,7 +36,7 @@ {% if doc.inputs %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Inputs + h2(class="h2-api-docs") Inputs div(flex="80" flex-xs="100") {% for binding, property in doc.inputs %} div(class="code-margin") @@ -51,7 +51,7 @@ {%- if doc.directiveOptions.exportAs %} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Exported as + h2(class="h2-api-docs") Exported as div(flex="80" flex-xs="100") p.input code {$ doc.directiveOptions.exportAs $} diff --git a/tools/api-builder/angular.io-package/templates/var.template.html b/tools/api-builder/angular.io-package/templates/var.template.html index ed1351c40e..19c1b8789a 100644 --- a/tools/api-builder/angular.io-package/templates/var.template.html +++ b/tools/api-builder/angular.io-package/templates/var.template.html @@ -7,7 +7,7 @@ include {$ relativePath(doc.path, '_util-fns') $} .div(layout="row" layout-xs="column" class="row-margin") div(flex="20" flex-xs="100") - h2 Variable Export + h2(class="h2-api-docs") Variable Export div(flex="80" flex-xs="100") pre.prettyprint.no-bg code.