diff --git a/public/_includes/_head-include.jade b/public/_includes/_head-include.jade index 1ed9a2b002..43df9aab7d 100644 --- a/public/_includes/_head-include.jade +++ b/public/_includes/_head-include.jade @@ -36,9 +36,11 @@ meta(itemprop="image" content="https://angular.io/resources/images/logos/standar link(rel="icon" type="image/x-icon" href="/resources/images/icons/favicon.ico") link(rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.8.3/angular-material.min.css") link(href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,400italic,700' rel='stylesheet' type='text/css') +link(href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css') link(rel="stylesheet" href="/resources/css/vendor/icomoon/style.css") link(rel="stylesheet" href="/resources/css/vendor/animate.css") link(rel="stylesheet" href="/resources/css/main.css") +link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons") @@ -56,4 +58,4 @@ link(rel="stylesheet" href="/resources/css/main.css") - \ No newline at end of file + diff --git a/public/_includes/_scripts-include.jade b/public/_includes/_scripts-include.jade index 647214a014..c0b2805a44 100644 --- a/public/_includes/_scripts-include.jade +++ b/public/_includes/_scripts-include.jade @@ -42,4 +42,20 @@ if current.path[0] == "docs" e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e); })(window,document,'script','//s.swiftypecdn.com/install/v1/st.js','_st'); - _st('install','VsuU7kH5Hnnj9tfyNvfK'); \ No newline at end of file + _st('install','VsuU7kH5Hnnj9tfyNvfK'); + + +script(src="//www.gstatic.com/feedback/api.js" type="text/javascript") + +script. + var btn = document.getElementById("feedback-btn"); + var submitFeedback = function() { + var dropdown = document.getElementById("feedback-dropdown"); + var configuration = { + 'productId': 'Angular', + 'authuser': '1', + 'bucket': dropdown.options[dropdown.selectedIndex].value + } + userfeedback.api.startFeedback(configuration); + } + btn.addEventListener("click", submitFeedback); diff --git a/public/docs/ts/latest/api/common/NgSwitch-directive.jade b/public/docs/ts/latest/api/common/NgSwitch-directive.jade new file mode 100644 index 0000000000..ba9126d52c --- /dev/null +++ b/public/docs/ts/latest/api/common/NgSwitch-directive.jade @@ -0,0 +1,93 @@ + +include ../../_util-fns + +.grid-fluid.api-content + .c2 + h2 What It Does + .c10 + p The NgSwitch directive is used to conditionally swap DOM structure on your template and on a scope expression. Elements within NgSwitch but without NgSwitchWhen or NgSwitchDefault directives will be preserved at the location as specified in the template. + .c2 + h2 How To Use + .c10 + p + code-example(language="typescript"). + <p>Value = {{value}}</p> + <button (click)="inc()">Increment</button> + + <div [ng-switch]="value"> + <p *ng-switch-when="'init'">increment to start</p> + .c2 + h2 Selectors help + .c10 + p + code [ng-switch] + .c2 + h2 Outputs help + .c10 + p + ng-model-change bound to NgFormControl.update + .c2 + h2 Inputs help + .c10 + p + ng-switch bound to NgSwitch.ngSwitch + .c2 + h2 Exported As help + .c10 + p form + .c2 + h2 Class Description help + .c10 + p + :marked + NgSwitch simply inserts nested elements based on which match expression matches the value + obtained from the evaluated switch expression. In other words, you define a container element + (where you place the directive with a switch expression on the + **`[ng-switch]="..."` attribute**), define any inner elements inside of the directive and + place a `[ng-switch-when]` attribute per element. + The `ng-switch-when` property is used to inform `NgSwitch` which element to display when the + expression is evaluated. If a matching expression is not found via a `ng-switch-when` property + then an element with the `ng-switch-default` attribute is displayed. + + Example ([live demo](#)) + + + code-example(language="typescript"). + + <div [ng-switch]="value"> + <p *ng-switch-when="'init'">increment to start</p> + <p *ng-switch-when="0">0, increment again</p> + <p *ng-switch-when="1">1, increment again</p> + <p *ng-switch-when="2">2, stop incrementing</p> + <p *ng-switch-default>&gt; 2, STOP!</p> + </div> + + <!-- alternate syntax --> + + <p [ng-switch]="value"> + <template ng-switch-when="init">increment to start</template> + <template [ng-switch-when]="0">0, increment again</template> + <template [ng-switch-when]="1">1, increment again</template> + <template [ng-switch-when]="2">2, stop incrementing</template> + <template ng-switch-default>&gt; 2, STOP!</template> + </p> + + .c2 + h2 Class Details help + .c10 + h3 NgSwitch + hr + h3 constructor(_validators:) + p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + hr + h3 form : Control + p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + hr + h3 model : any + p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + hr + h3 viewModel : any + p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + hr + h3 path : string[] + p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. diff --git a/public/docs/ts/latest/help-new.jade b/public/docs/ts/latest/help-new.jade new file mode 100644 index 0000000000..1034233e75 --- /dev/null +++ b/public/docs/ts/latest/help-new.jade @@ -0,0 +1,8 @@ +div(flex) + p. + What's your question about? + select#feedback-dropdown(name="Angular Version") + option(value="Angular2") Angular2 + option(value="AngularJS") AngularJS + button#feedback-btn. + Submit diff --git a/public/resources/css/_options.scss b/public/resources/css/_options.scss index 2a1489612a..2ec1b43450 100644 --- a/public/resources/css/_options.scss +++ b/public/resources/css/_options.scss @@ -50,6 +50,7 @@ $cactus: #8BC34A; // YELLOW $sunshine: #FFF59D; +$olive: #9E9D24; // ORANGE $sand: #FFF8E1; @@ -60,6 +61,7 @@ $peach: #ffebee; $squid: #EF3872; $cardinal: #E23237; $ruby: #B52E31; +$pink: #D43669; // BLUE COLORS $light: #E3F2FD; @@ -78,9 +80,15 @@ $silver: #36474F; $platinum: #445A64; $metal: #536E7A; $tin: #8FA4AE; +$darkgrey: #5C707A; +$bismark: #90A4AE; +$grey: #B0BEC5; // LIGHT GRAY COLORS $cloud: #AFBEC5; $fog: #CFD8DC; $mist: #ECEFF1; -$snow: #FFFFFF; \ No newline at end of file +$snow: #FFFFFF; +$heather: #546E7A; +$lightgrey: #F5F6F7; +$storm: #E0E0E0; diff --git a/public/resources/css/base/_type.scss b/public/resources/css/base/_type.scss index e1e6d36a91..a740ba7266 100644 --- a/public/resources/css/base/_type.scss +++ b/public/resources/css/base/_type.scss @@ -15,10 +15,10 @@ a { } code { - background: $mist; + background: $lightgrey; border-radius: 2px; font-family: $mono-font; - color: $metal; + color: $darkgrey; padding: 0px 4px; font-size: 90%; } @@ -203,4 +203,60 @@ table td { > div:last-child > .card { margin-right: 0; } -} \ No newline at end of file +} + +.api-content { + h2 { + margin: 4px 0px; + text-transform: uppercase; + font-size: 16px; + color: #78909C; + } + h2:before { + content: '.'; + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; + } + h3 { + font-size: 18px; + color: #546E7A; + font-weight: 500; + font-family: 'Roboto Mono', sans-serif; + } + hr { + border: 0; + color: #ECEFF1; + background-color: #ECEFF1; + height: 1px; + } + a { + text-decoration: none; + border-bottom: 1px dotted #1976D2; + background: #EEF1F2; + border-radius: 2px; + color: #1976D2; + font-weight: 500; + font-family: 'Roboto Mono', sans-serif; + } + a:hover { + border-bottom: 1px solid #1976D2; + } + p { + margin: 10px 0px; + } + .prettyprint { + background: #FFF; + color: #546E7A; + margin: 0 0 26px 0; + padding: 0; + } + .material-icons { + font-size: 14px; + } +} diff --git a/public/resources/css/layout/_grids.scss b/public/resources/css/layout/_grids.scss index 8bf6930084..91cc4c31bc 100644 --- a/public/resources/css/layout/_grids.scss +++ b/public/resources/css/layout/_grids.scss @@ -566,4 +566,11 @@ limitations under the License. .grid-fixed .phone-c12, .grid-fluid .phone-c12 { width: 97.91667%; } -} \ No newline at end of file +} + +.api-content { + margin-bottom: 26px; + .c2, .c10 { + margin: 0; + } +} diff --git a/public/resources/css/module/_code-box.scss b/public/resources/css/module/_code-box.scss index 00784634a6..6cb8c2bc59 100644 --- a/public/resources/css/module/_code-box.scss +++ b/public/resources/css/module/_code-box.scss @@ -1,33 +1,34 @@ .code-box { border-radius: 4px; - background: $steel; - box-shadow: 0px 2px 5px rgba($coal, .3); + background: $lightgrey; + // box-shadow: 0px 2px 5px rgba($coal, .3); margin-bottom: $unit * 2; header { - background: darken($steel, 5%); + background: $fog; color: $snow; - padding: $unit; + padding: $unit $unit 0px $unit; border-radius: 4px 4px 0px 0px; } nav { button { - line-height: $unit * 3; - height: $unit * 3; + line-height: $unit * 3.5; + height: $unit * 3.5; padding: 0px ($unit * 3); margin-right: $unit; font-size: 13px; - background: lighten($steel, 3%); - color: $tin; - font-weight: 500; + background: $grey; + color: $snow; + border-radius: 4px 4px 0px 0px; + // font-weight: 500; text-transform: none; &.is-selected, &.selected { - background: $blueberry; - color: $snow; + background: $lightgrey; + color: $darkgrey; } } } @@ -36,4 +37,4 @@ box-shadow: none; margin: 0px; } -} \ No newline at end of file +} diff --git a/public/resources/css/module/_code.scss b/public/resources/css/module/_code.scss index 489f114a45..c0cbef0c43 100644 --- a/public/resources/css/module/_code.scss +++ b/public/resources/css/module/_code.scss @@ -23,19 +23,19 @@ */ .prettyprint { - background: $steel; + background: $lightgrey; font-family: $mono-font; - color: $snow; + color: $darkgrey; width: auto; overflow: auto; position: relative; padding: 0px; font-size: 15px; - font-weight: 600; + // font-weight: 600; line-height: 24px; margin-bottom: $unit * 3; - border-radius: 4px; - box-shadow: 0px 2px 5px rgba($coal, .3); + // box-shadow: 0px 2px 5px rgba($coal, .3); + border-radius: 0px 0px 4px 4px; padding: ($unit * 2) ($unit * 4); &.linenums, @@ -55,16 +55,15 @@ } ol { - background: $steel; + background: $lightgrey; padding: ($unit * 2) ($unit * 4) ($unit * 2) ($unit * 7); margin: 0px; overflow: auto; - border-radius: 3px; - font-weight: 600; + // font-weight: 600; font-size: 15px; li { - color: $metal; + color: $bismark; background: none; margin-bottom: 5px; line-height: normal; @@ -90,47 +89,47 @@ .pnk, .blk { - border-radius: 2px; + border-radius: 4px; padding: 2px 4px; } .pnk { - background: $squid; - color: $snow; + background: $fog; + color: $darkgrey; } .blk { - background: $coal; + background: $storm; } .otl { - outline: 1px solid rgba(snow, .56); + outline: 1px solid rgba(darkgrey, .56); } .kwd { - color: $mist; + color: $pink; } .typ, .tag { - color: $squid; + color: $pink; } .str, .atv { - color: darken($sunshine, 10%); + color: $olive; } .atn { - color: darken($cactus, 10%); + color: $olive; } .com { - color: $tin; + color: $olive; } .lit { - color: darken($sunshine, 10%); + color: $olive; } .pun { - color: $snow; + color: $bismark; } .pln { - color: $snow; + color: $darkgrey; } .dec { - color: $grape; + color: $olive; } @@ -140,42 +139,42 @@ */ @media print { - background: $snow; + background: $lightgrey; border: none; box-shadow: none; ol { - background: $snow; + background: $lightgrey; } .kwd { - color: $steel; + color: $pink; } .typ, .tag { - color: $ruby; + color: $pink; } .str, .atv { - color: darken($sunshine, 10%); + color: $olive; } .atn { - color: darken($cactus, 10%); + color: $olive; } .com { - color: $cloud; + color: $olive; } .lit { - color: darken($sunshine, 10%); + color: $olive; } .pun { - color: $coal; + color: $bismark; } .pln { - color: $coal; + color: $darkgrey; } .dec { - color: darken($grape, 5%); + color: $olive; } } -} \ No newline at end of file +} diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss index b605c8c4c4..112c591964 100644 --- a/public/resources/css/module/_example-title.scss +++ b/public/resources/css/module/_example-title.scss @@ -1,12 +1,13 @@ .example-title { @extend .alert; - color: $snow; + color: $heather; padding: 0 ($unit * 2); font-size: 14px; - font-weight: 500; - border-color: $blueberry; - background: $blueberry; + // font-weight: 500; + border-color: $fog; + background: $fog; + box-shadow: none; // temporary hack to remove space between example title and code-example margin-bottom: -18px; -} \ No newline at end of file +}