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

feat(docs-infra): Add GitHub and Twitter external icon links to topnav toolbar (#24542) 

PR Close #24542
This commit is contained in:
Stefanie Fluin 2018-06-15 14:07:52 -07:00 committed by Miško Hevery
parent def354de16
commit a26965812b
4 changed files with 61 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
aio/src/app/app.component.html
View File

@ -27,6 +27,12 @@
</a>
<aio-top-menu *ngIf="isSideBySide" [nodes]="topMenuNodes"></aio-top-menu>
<aio-search-box class="search-container" #searchBox (onSearch)="doSearch($event)" (onFocus)="doSearch($event)"></aio-search-box>
<div class="toolbar-external-icons-container">
<a href="https://twitter.com/angular" title="Twitter">
<img src="assets/images/logos/twitter-icon.svg"></a>
<a href="https://github.com/angular/angular" title="GitHub">
<img src="assets/images/logos/github-icon.svg"></a>
</div>
</mat-toolbar-row>
</mat-toolbar>

14
aio/src/assets/images/logos/github-icon.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 51.8 50.4" style="enable-background:new 0 0 51.8 50.4;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8
c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1
c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6
c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9
c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3
C51.5,11.7,40.1,0.2,25.9,0.2z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

13
aio/src/assets/images/logos/twitter-icon.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 50 49.7" style="enable-background:new 0 0 50 49.7;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<path class="st0" d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2
c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5
C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2
c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2
c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 937 B

42
aio/src/styles/1-layouts/_top-menu.scss
View File

@ -2,7 +2,6 @@
$hamburgerShownMargin: 0 8px 0 0;
$hamburgerHiddenMargin: 0 16px 0 -88px;
// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED
mat-toolbar.mat-toolbar {
position: fixed;
@ -10,7 +9,7 @@ mat-toolbar.mat-toolbar {
right: 0;
left: 0;
z-index: 10;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.30);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);
mat-toolbar-row {
padding: 0 16px 0 0;
@ -21,7 +20,6 @@ mat-toolbar.mat-toolbar {
}
}
// HOME PAGE OVERRIDE: TOPNAV TOOLBAR
aio-shell.page-home mat-toolbar.mat-toolbar {
background-color: $blue;
@ -29,12 +27,11 @@ aio-shell.page-home mat-toolbar.mat-toolbar {
@media (min-width: 481px) {
&:not(.transitioning) {
background-color: transparent;
transition: background-color .2s linear;
transition: background-color 0.2s linear;
}
}
}
// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER
aio-shell.page-home mat-toolbar.mat-toolbar,
aio-shell.page-features mat-toolbar.mat-toolbar,
@ -48,7 +45,6 @@ aio-shell.page-resources mat-toolbar.mat-toolbar {
}
}
// DOCS PAGES OVERRIDE: HAMBURGER
aio-shell.folder-api mat-toolbar.mat-toolbar,
aio-shell.folder-docs mat-toolbar.mat-toolbar,
@ -62,7 +58,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
// HAMBURGER BUTTON
.hamburger.mat-button {
height: 100%;
@ -70,9 +65,9 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
padding: 0;
&:not(.starting) {
transition-duration: .4s;
transition-duration: 0.4s;
transition-property: color, margin;
transition-timing-function: cubic-bezier(.25, .8, .25, 1);
transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
@media (min-width: 992px) {
@ -91,7 +86,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
// HOME NAV-LINK
.nav-link.home {
cursor: pointer;
@ -104,7 +98,7 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
top: 12px;
height: 40px;
@media(max-width: 992px) {
@media (max-width: 992px) {
&:hover {
transform: scale(1.1);
}
@ -112,7 +106,6 @@ aio-shell.folder-tutorial mat-toolbar.mat-toolbar {
}
}
// TOP MENU
aio-top-menu {
display: flex;
@ -158,7 +151,6 @@ aio-top-menu {
}
}
// SEARCH BOX
aio-search-box.search-container {
display: flex;
@ -181,7 +173,7 @@ aio-search-box.search-container {
-webkit-appearance: none;
&:focus {
outline: none;
outline: none;
}
@include bp(big) {
@ -196,3 +188,25 @@ aio-search-box.search-container {
}
}
}
// EXTERNAL LINK ICONS
.app-toolbar {
.toolbar-external-icons-container {
display: flex;
flex-direction: row;
a {
display: flex;
align-items: center;
margin-left: 16px;
&:hover {
opacity: 0.8;
}
img {
height: 24px;
}
}
}
}