iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(class overview): list instance and static members with in-page hyperlinks. Also link constructor when present. Focus member on click. Badges look better in viewports of 600px or less

This commit is contained in:
Eric Jimenez 2016-04-19 13:18:38 -04:00 committed by Naomi Black
parent 9b9e6ddf0f
commit 3dd114d0df
8 changed files with 129 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/_includes/_hero.jade
View File

@ -8,7 +8,7 @@ if current.path[4] && current.path[3] == 'api'
- var textFormat = 'is-standard-case'
header(class="hero background-sky")
span(class="hero-title-with-badges" layout="row" layout-align="start center")
span(class="hero-title-with-badges" layout="row" layout-xs="column" layout-align="start center" layout-align-xs="start start")
h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle}
if useBadges
span(class="badges")

4
public/resources/css/base/_type.scss
View File

@ -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;

54
public/resources/css/module/_api.scss
View File

@ -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;

17
public/resources/css/module/_hero.scss
View File

@ -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;
}
}

7
public/resources/js/controllers/app-controller.js
View File

@ -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
*

56
tools/api-builder/angular.io-package/templates/class.template.html
View File

@ -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) $}

8
tools/api-builder/angular.io-package/templates/directive.template.html
View File

@ -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 $}

2
tools/api-builder/angular.io-package/templates/var.template.html
View File

@ -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.