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

build(docs-infra): remove dependency on FontAwesome (#27250) 

We were only using two FontAwesome icons (`link` and `twitter`). The
twitter icon is already available as an SVG (used in the topbar) and a
similar link icon is available via 'Material Icons', which we are
already brining in.

This commit removes the dependency on FontAwesome and uses the available
icons instead.

_Before:_
![contributor-info-before](https://user-images.githubusercontent.com/8604205/49089076-61b90680-f263-11e8-8c5f-c52d332e6e64.png)

_After:_
![contributor-info-after](https://user-images.githubusercontent.com/8604205/49089075-61b90680-f263-11e8-9785-b8df15aaacd3.png)

PR Close #27250
This commit is contained in:
George Kalpakas 2018-11-27 16:26:24 +02:00 committed by Igor Minar
parent 271fcb0f3e
commit fa0c65efe5
5 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
aio/ngsw-config.json
View File

@ -18,8 +18,7 @@
], ],
"urls": [ "urls": [
"https://fonts.googleapis.com/**", "https://fonts.googleapis.com/**",
"https://fonts.gstatic.com/s/**", "https://fonts.gstatic.com/s/**"
"https://maxcdn.bootstrapcdn.com/**"
] ]
} }
}, { }, {

3
aio/src/app/custom-elements/contributor/contributor-list.module.ts
View File

@ -1,12 +1,13 @@
import { NgModule, Type } from '@angular/core'; import { NgModule, Type } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { ContributorListComponent } from './contributor-list.component'; import { ContributorListComponent } from './contributor-list.component';
import { ContributorService } from './contributor.service'; import { ContributorService } from './contributor.service';
import { ContributorComponent } from './contributor.component'; import { ContributorComponent } from './contributor.component';
import { WithCustomElementComponent } from '../element-registry'; import { WithCustomElementComponent } from '../element-registry';
@NgModule({ @NgModule({
imports: [ CommonModule ], imports: [ CommonModule, MatIconModule ],
declarations: [ ContributorListComponent, ContributorComponent ], declarations: [ ContributorListComponent, ContributorComponent ],
entryComponents: [ ContributorListComponent ], entryComponents: [ ContributorListComponent ],
providers: [ ContributorService ] providers: [ ContributorService ]

10
aio/src/app/custom-elements/contributor/contributor.component.ts
View File

@ -13,16 +13,16 @@ import { CONTENT_URL_PREFIX } from 'app/documents/document.service';
<div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'"> <div class="contributor-image" [style.background-image]="'url('+pictureBase+(person.picture || noPicture)+')'">
<div class="contributor-info"> <div class="contributor-info">
<a *ngIf="person.bio" mat-button> <a *ngIf="person.bio" mat-button class="info-item">
View Bio View Bio
</a> </a>
<a *ngIf="person.twitter" mat-button class="icon" <a *ngIf="person.twitter" mat-icon-button class="info-item icon"
href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()"> href="https://twitter.com/{{person.twitter}}" target="_blank" (click)="$event.stopPropagation()">
<span class="fa fa-twitter fa-2x"></span> <mat-icon svgIcon="logos:twitter"></mat-icon>
</a> </a>
<a *ngIf="person.website" mat-button class="icon" <a *ngIf="person.website" mat-icon-button class="info-item icon"
href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()"> href="{{person.website}}" target="_blank" (click)="$event.stopPropagation()">
<span class="fa fa-link fa-2x"></span> <mat-icon class="link-icon">link</mat-icon>
</a> </a>
</div> </div>
</div> </div>

1
aio/src/index.html
View File

@ -24,7 +24,6 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- --> <!-- -->
<link rel="manifest" href="pwa-manifest.json"> <link rel="manifest" href="pwa-manifest.json">

12
aio/src/styles/2-modules/_contributor.scss
View File

@ -70,7 +70,7 @@ aio-contributor {
@media (hover) { opacity: 0; } @media (hover) { opacity: 0; }
border-radius: 50%; border-radius: 50%;
[mat-button] { .info-item {
color: $white; color: $white;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
@ -85,8 +85,14 @@ aio-contributor {
min-width: 20px; min-width: 20px;
width: 20px; width: 20px;
.fa-2x { mat-icon {
font-size: 20px; height: 20px;
width: 20px;
&.link-icon {
margin-top: -7px;
transform: rotateZ(45deg);
}
} }
} }
} }