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

Merge remote-tracking branch 'origin/master' 

# Conflicts:
#	public/_includes/_hero-home.jade
#	public/docs/ts/latest/_data.json
#	public/docs/ts/latest/guide/style-guide.jade
This commit is contained in:
Zhicheng Wang 2016-09-17 12:01:41 +08:00
parent 1c869074bb 7c3c5d0cc4
commit ba3152bb88
25 changed files with 241 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/_includes/_scripts-include.jade
View File

@ -29,6 +29,7 @@ script(src="/resources/js/directives/cheatsheet.js")
script(src="/resources/js/directives/api-list.js")
script(src="/resources/js/directives/bio.js")
script(src="/resources/js/directives/bold.js")
script(src="/resources/js/directives/announcement-bar.js")
script(src="/resources/js/directives/code.js")
script(src="/resources/js/directives/copy.js")
script(src="/resources/js/directives/code-tabs.js")

7
public/docs/_examples/ngmodule/ts/app/contact/contact.component.3.ts
View File

@ -5,9 +5,10 @@ import { Contact, ContactService } from './contact.service';
import { UserService } from '../user.service';
@Component({
moduleId: module.id,
selector: 'app-contact',
templateUrl: 'app/contact/contact.component.html',
styleUrls: ['app/contact/contact.component.css']
templateUrl: 'contact.component.html',
styleUrls: ['contact.component.css']
})
export class ContactComponent implements OnInit {
contact: Contact;
@ -35,7 +36,7 @@ export class ContactComponent implements OnInit {
}
onSubmit() {
// TODO: do something like save it
// POST-DEMO TODO: do something like save it
this.displayMessage('Saved ' + this.contact.name);
}

7
public/docs/_examples/ngmodule/ts/app/contact/contact.component.ts
View File

@ -6,9 +6,10 @@ import { Contact, ContactService } from './contact.service';
import { UserService } from '../core/user.service';
@Component({
moduleId: module.id,
selector: 'app-contact',
templateUrl: 'app/contact/contact.component.html',
styleUrls: ['app/contact/contact.component.css']
templateUrl: 'contact.component.html',
styleUrls: ['contact.component.css']
})
export class ContactComponent implements OnInit {
contact: Contact;
@ -36,7 +37,7 @@ export class ContactComponent implements OnInit {
}
onSubmit() {
// TODO: do something like save it
// POST-DEMO TODO: do something like save it
this.displayMessage('Saved ' + this.contact.name);
}

3
public/docs/_examples/ngmodule/ts/app/core/title.component.ts
View File

@ -3,8 +3,9 @@ import { Component, Input } from '@angular/core';
import { UserService } from '../core/user.service';
@Component({
moduleId: module.id,
selector: 'app-title',
templateUrl: 'app/core/title.component.html',
templateUrl: 'title.component.html',
})
export class TitleComponent {
@Input() subtitle = '';

5
public/docs/_examples/ngmodule/ts/app/hero/hero.module.3.ts
View File

@ -8,14 +8,9 @@ import { HeroListComponent } from './hero-list.component';
import { HighlightDirective } from './highlight.directive';
import { routing } from './hero.routing.3';
// TODO: Remove in RC 6
import { HeroService } from './hero.service';
// #docregion class
@NgModule({
imports: [ CommonModule, FormsModule, routing ],
// TODO: Remove in RC 6
providers: [ HeroService ],
declarations: [
HeroComponent, HeroDetailComponent, HeroListComponent,
HighlightDirective

5
public/docs/_examples/ngmodule/ts/app/hero/hero.module.ts
View File

@ -7,13 +7,8 @@ import { HeroDetailComponent } from './hero-detail.component';
import { HeroListComponent } from './hero-list.component';
import { routing } from './hero.routing';
// TODO: Remove THE HeroService class in RC 6
import { HeroService } from './hero.service';
@NgModule({
imports: [ SharedModule, routing ],
// TODO: Remove in RC 6
providers: [ HeroService ],
declarations: [
HeroComponent, HeroDetailComponent, HeroListComponent,
]

3
public/docs/_examples/ngmodule/ts/app/title.component.ts
View File

@ -7,8 +7,9 @@ import { UserService } from './user.service';
// #docregion v1
@Component({
moduleId: module.id,
selector: 'app-title',
templateUrl: 'app/title.component.html',
templateUrl: 'title.component.html',
})
export class TitleComponent {
@Input() subtitle = '';

2
public/docs/dart/latest/_data.json
View File

@ -4,7 +4,7 @@
"title": "Angular Docs",
"subtitle": "Dart",
"menuTitle": "Docs Home",
"banner": "Current release is <strong>beta.21</strong>. Consult the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>Change Log</a> about recent enhancements, fixes, and breaking changes."
"banner": "Current release is <strong>beta.21</strong>. View the <a href='https://github.com/dart-lang/angular2/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
},
"quickstart": {

2
public/docs/js/latest/_data.json
View File

@ -4,7 +4,7 @@
"title": "Angular Docs",
"subtitle": "JavaScript",
"menuTitle": "Docs Home",
"banner": "The current release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'> Change Log</a> for enhancements, fixes, and breaking changes."
"banner": "Angular 2 release is <b>2.0.0</b>. View the <a href='https://github.com/angular/angular/blob/master/CHANGELOG.md' target='_blank'>change Log</a> to see enhancements, fixes, and breaking changes."
},
"quickstart": {

4
public/docs/ts/latest/guide/style-guide.jade
View File

@ -2701,8 +2701,8 @@ a(href="#toc") 回到顶部
**考虑**使用[Visual Studio Code](https://code.visualstudio.com/)的[代码片段](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2)来实施本风格指南。
<a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
<img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif", width="80%", alt="Use Extension">
</a>
<img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="80%" alt="Use Extension">
</a>
a(href="#toc") Back to top

2
public/docs/ts/latest/guide/testing.jade
View File

@ -917,7 +917,7 @@ a#component-with-inputs-outputs
at low cost and without resorting to much slower and more complicated end-to-end tests.
:marked
The second test verifies click behavior. Clicking the hero should rais a `selected` event that the
The second test verifies click behavior. Clicking the hero should raise a `selected` event that the
host component (`DashboardComponent` presumably) can hear:
+makeExample('testing/ts/app/dashboard/dashboard-hero.component.spec.ts', 'click-test', 'app/dashboard/dashboard-hero.component.spec.ts (click test)')(format='.')
:marked

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

@ -8,6 +8,7 @@ body {
font-family: $brand-font;
font-size: 14px;
color: $blue-grey-600;
&.ng-cloak {
display: none;
}
@ -25,7 +26,7 @@ body {
}
a {
color: $blue-600;
color: $blue-700;
text-decoration: none;
&:hover {
@ -35,10 +36,10 @@ a {
}
code {
background: $blue-grey-50;
background: rgba($blue-grey-50, .56);
border-radius: 2px;
font-family: $mono-font;
color: $teal-500;
color: $teal-700;
padding: 0px 4px;
font-size: 90%;
}
@ -76,7 +77,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 112px;
font-weight: 300;
opacity: .54;
line-height: 118px;
}
@ -84,7 +84,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 56px;
font-weight: 400;
opacity: .54;
line-height: 118px;
}
@ -93,7 +92,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 45px;
font-weight: 400;
opacity: .54;
line-height: 48px;
}
@ -102,7 +100,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 34px;
font-weight: 400;
opacity: .87;
line-height: 40px;
}
@ -111,7 +108,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 24px;
font-weight: 400;
opacity: .87;
line-height: 32px;
}
@ -120,7 +116,6 @@ code {
margin: 0px 0px ($unit * 2) 0px;
font-size: 20px;
font-weight: 500;
opacity: .87;
line-height: 32px;
}
@ -129,7 +124,6 @@ code {
font-size: 34px;
line-height: 40px;
margin: ($unit * 6) 0 ($unit * 3) 0;
opacity: 0.87;
&:first-of-type {
margin-top: 0;
@ -169,7 +163,6 @@ table th,
margin: 0px 0px ($unit * 3) 0px;
font-size: 16px;
font-weight: 400;
opacity: .87;
line-height: 28px;
padding: 0;
@ -187,7 +180,6 @@ table th,
table td {
font-size: 14px;
font-weight: 400;
opacity: .87;
line-height: 24px;
}
@ -195,20 +187,18 @@ table td {
margin: 0px 0px ($unit * 2) 0px;
font-size: 12px;
font-weight: 400;
opacity: .54;
line-height: 20px;
}
.text-aside,
.docs-content aside {
@extend .text-caption;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
background: rgba($blue-grey-50, .24);
color: $blue-grey-700;
font-weight: 400;
font-size: 13px;
line-height: 24px;
opacity: 1;
background: rgba($blue-grey-50, .56);
border-radius: 2px;
padding: $unit * 3;
margin-bottom: $unit * 2;

139
public/resources/css/module/_announcement-bar.scss
View File

@ -10,6 +10,7 @@
* Variables
*/
$announcement-bar: '.announcement-bar';
$announcement-bar-height: 104px;
$announcement-bar-width: 752px;
@ -18,22 +19,74 @@ $announcement-bar-width: 752px;
* Class
*/
.announcement-bar {
background: $white;
#{$announcement-bar} {
bottom: 0;
box-sizing: border-box;
color: $blue-grey-500;
height: $announcement-bar-height;
left: 50%;
margin-bottom: -($announcement-bar-height / 2);
margin-left: -($announcement-bar-width / 2);
overflow: hidden;
padding: $unit * 4;
position: absolute;
width: $announcement-bar-width;
@include respond-to('mobile') {
height: auto;
margin: 0;
position: static;
text-align: center;
width: auto;
}
}
// SLIDES CONTAINER
#{$announcement-bar}-slides {
background: $white;
box-shadow: 0 4px 4px rgba($black, 0.24), 0 0 4px rgba($black, 0.12);
box-sizing: border-box;
color: $blue-grey-500;
height: $announcement-bar-height;
overflow: hidden;
position: relative;
width: $announcement-bar-width;
@include respond-to('mobile') {
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
height: 240px;
margin: 0;
padding: ($unit * 4) ($unit * 6);
text-align: center;
width: auto;
}
}
// INDIVIDUAL SLIDE
#{$announcement-bar}-slide {
bottom: 0;
box-sizing: border-box;
height: $announcement-bar-height;
left: 0;
margin-bottom: -$announcement-bar-height;
opacity: 0;
padding: $unit * 4;
position: absolute;
right: 0;
transition: all .8s;
width: $announcement-bar-width;
z-index: $layer-1;
@include respond-to('mobile') {
height: auto;
margin: 0;
padding:0;
width: auto;
transition: opacity .8s;
visibility: hidden;
}
img, p {
float: left;
@include respond-to('mobile') {
float: none;
}
}
img {
@ -65,33 +118,57 @@ $announcement-bar-width: 752px;
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
color: $blue-500;
}
}
/*
* Mobile Styles
*
*/
@include respond-to('mobile') {
height: auto;
margin: 0;
padding: ($unit * 4) ($unit * 6);
position: static;
text-align: center;
width: auto;
&.shadow-2 {
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
}
img, p {
float: none;
}
.button {
@include respond-to('mobile') {
float: none;
display: block;
margin-top: $unit * 2;
}
}
}
&.is-visible {
margin-bottom: 0;
opacity: 1;
z-index: $layer-2;
@include respond-to('mobile') {
position: static;
visibility: visible;
}
}
}
// NAV BAR
#{$announcement-bar} nav {
bottom: -($unit * 5);
color: $blue-grey-500;
left: 0;
position: absolute;
right: 0;
text-align: center;
z-index: $layer-1;
button {
background: $blue-grey-50;
border: none;
border-radius: 100px;
height: $unit + 4;
margin: 0 ($unit / 2);
outline: none;
overflow: hidden;
text-indent: -3000px;
width: $unit + 4;
&.is-selected,
&.selected {
background: $blue-grey-100;
}
}
}

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

@ -63,7 +63,8 @@
}
}
.docs-content .h2-api-docs {
.docs-content .h2-api-docs,
.docs-content .h2-api-docs:first-of-type {
font-size: 18px;
line-height: 24px;
margin-top: 0;

2
public/resources/css/module/_banner.scss
View File

@ -27,5 +27,7 @@
p, .text-body {
color: $blue-grey-500;
font-size: 18px;
line-height: 32px;
margin: 0;
}
}

10
public/resources/css/module/_card.scss
View File

@ -1,3 +1,11 @@
/*
* Hover Cards
*
* Hover cards used to display important sections with
* additional information and allow for users to click
* on the entire card to initiate action.
*/
.card {
background: $white;
border-radius: 4px;
@ -34,7 +42,7 @@
h2 {
color: $blue-grey-600;
color: $blue-grey-500;
font-size: 20px;
font-weight: 400;
line-height: $unit * 3;

5
public/resources/css/module/_code-box.scss
View File

@ -11,7 +11,7 @@
*/
$codebox-anti-pattern-color: $red-700;
$codebox-primary-color: $blue-600;
$codebox-primary-color: $blue-700;
$codebox-selected: $white;
@ -48,12 +48,13 @@ $codebox-selected: $white;
line-height: $unit * 3;
margin: 0;
outline: none;
opacity: 1;
padding: 0 0 $unit $unit;
text-transform: none;
}
nav button {
background: $blue-400;
background: $blue-600;
border-radius: 2px 2px 0 0;
color: $white;
font-size: 13px;

20
public/resources/css/module/_code.scss
View File

@ -149,16 +149,16 @@ $prettyprint-color: $blue-grey-700;
}
.str,
.atv {
color: $teal-600;
color: $teal-700;
}
.atn {
color: $teal-600;
color: $teal-700;
}
.com {
color: $teal-600;
color: $teal-700;
}
.lit {
color: $teal-600;
color: $teal-700;
}
.pun {
color: $blue-grey-700;
@ -167,7 +167,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700;
}
.dec {
color: $teal-600;
color: $teal-700;
}
@ -193,16 +193,16 @@ $prettyprint-color: $blue-grey-700;
}
.str,
.atv {
color: $teal-600;
color: $teal-700;
}
.atn {
color: $teal-600;
color: $teal-700;
}
.com {
color: $teal-600;
color: $teal-700;
}
.lit {
color: $teal-600;
color: $teal-700;
}
.pun {
color: $blue-grey-700;
@ -211,7 +211,7 @@ $prettyprint-color: $blue-grey-700;
color: $blue-grey-700;
}
.dec {
color: $teal-600;
color: $teal-700;
}
}
}

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

@ -30,7 +30,6 @@
float: left;
line-height: 48px;
margin: 0 $unit 0 0;
opacity: .87;
text-transform: uppercase;
&.is-standard-case {
@ -43,7 +42,6 @@
font-weight: 400;
line-height: $unit * 3;
margin: 0;
opacity: .87;
text-transform: uppercase;
}
@ -113,73 +111,4 @@
}
}
}
/*
* Badges
*/
.hero-title-with-badges {
margin-bottom: $unit;
}
.status-circle {
margin-right: 4px;
border-radius: 50%;
width: 10px;
height: 10px;
display: inline-block;
}
// status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade
.status-deprecated {
background: #E53935;
}
.status-stable {
background: #558b2f;
}
.status-experimental {
background: #9575cd;
}
.badges {
display: flex;
justify-content: flex-start;
align-content: space-around;
align-items: center;
margin-top: 4px;
.status-badge {
color: #0143A3;
margin-left: 4px;
padding-left: 8px;
padding-right: 8px;
background-color: rgba(255,255,255,0.5);
border-radius: 2px;
line-height: 20px;
display: inline-block;
&:first-child {
margin-left: 0;
}
}
.security-risk-badge {
background-color: #FFF59D;
}
}
@media screen and (max-width: 599px) {
/* three items */
.badges .status-badge:nth-child(3) {
margin-left: 0;
margin-top: 4px;
}
.hero-title-with-badges {
margin-bottom: $unit * 2;
}
}
}
}

1
public/resources/css/module/_home-promos.scss
View File

@ -12,7 +12,6 @@
h3.text-headline {
font-size: 28px;
margin-top: 10px;
color: #37474F;
}
.promo-image-container, .text-container {

2
public/resources/css/module/_lists.scss
View File

@ -15,7 +15,7 @@
margin-top: $unit * 6;
h4 {
color: $blue-grey-400;
color: $blue-grey-500;
font-size: 14px;
font-weight: 400;
line-height: $unit * 4;

8
public/resources/css/module/_side-nav.scss
View File

@ -10,10 +10,10 @@
*/
$sidenav: '.sidenav'; // Classname
$sidenav-background: $blue-grey-50;
$sidenav-background: rgba($blue-grey-50, .56);
$sidenav-background-dark: $blue-grey-200;
$sidenav-color: $blue-grey-400;
$sidenav-color-selected: $blue-600;
$sidenav-color: $blue-grey-500;
$sidenav-color-selected: $blue-700;
$sidenav-width: 240px;
@ -191,7 +191,7 @@ $sidenav-width: 240px;
position: relative;
&.is-selected {
background: rgba($blue-grey-100, .56);
background: rgba($blue-grey-100, .24);
color: $sidenav-color-selected;
font-weight: 600;
}

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

@ -1,6 +1,6 @@
table {
margin-bottom: $unit * 4;
box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);
box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);
border-radius: 2px;
background: $snow;
@ -10,8 +10,8 @@ table {
thead {
th {
background: $mist;
border-bottom: 1px solid $mist;
background: rgba($blue-grey-50, .24);
border-bottom: 1px solid $blue-grey-50;
color: $metal;
font-size: 12px;
font-weight: 600;
@ -24,21 +24,16 @@ table {
tbody {
th,
td {
border-bottom: 1px solid $mist;
color: $platinum;
border-bottom: 1px solid $blue-grey-50;
padding: ($unit * 2) ($unit * 4);
text-align: left;
}
th {
background: rgba($mist, .24);
border-right: 1px solid $mist;
background: rgba($blue-grey-50, .24);
border-right: 1px solid $blue-grey-50;
font-weight: 600;
max-width: 100px;
a {
color: $blueberry;
}
}
tr:last-child td {

BIN
public/resources/images/logos/angular2/angular-logo-banner.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

72
public/resources/js/directives/announcement-bar.js Normal file
View File

@ -0,0 +1,72 @@
/*eslint no-unused-vars: "angularIO" */
/*
* Announcement Bar Banner Directive
*
* A rotating announcement banners used to display
* important updates and news.
*/
angularIO.directive('announcementBar', ['$interval', function($interval) {
return {
restrict: 'E',
scope: {},
transclude: true,
replace: true,
template:
'<div class="announcement-bar">' +
'<div class="announcement-bar-slides" ng-transclude></div>' +
'<nav class="announcement-bar-nav">'+
'<button ng-class="{ selected: currentSlide === key }" ng-repeat="(key, slide) in slides" ng-click="changeSlide($event, key)">{{key}}</button>' +
'</nav>' +
'</div>',
link: function(scope, element, attrs) {
// REGISTER ELEMENTS
scope.slides = angular.element(element[0].getElementsByClassName('announcement-bar-slide'));
var slideLenth = scope.slides.length;
// SHOW FIRST SLIDE
scope.currentSlide = 0;
angular.element(scope.slides[0]).addClass('is-visible');
/*
* Change Slide Using Nav
*
*/
scope.changeSlide = function(event, slideNum) {
// CANCEL TIMEOUT AND CHANGE SLIDE
$interval.cancel(scope.timeoutId)
scope.slides.removeClass('is-visible');
angular.element(scope.slides[slideNum]).addClass('is-visible');
scope.currentSlide = slideNum;
};
/*
* Start Slideshow Cyle
*
*/
scope.timeoutId = $interval(function() {
// INCREMENT
scope.currentSlide = scope.currentSlide + 1;
// HIDE ALL SLIDES
scope.slides.removeClass('is-visible');
// RESET ON LAST SLIDE
if((scope.currentSlide) > (slideLenth - 1)) {
scope.currentSlide = 0;
}
// SHOW SLIDE
angular.element(scope.slides[scope.currentSlide]).addClass('is-visible');
}, 5000);
}
};
}]);