use svg mat icon and drop icon dependency

pull/40/head
Florian Hartwich 2018-07-06 17:01:59 +02:00
parent 753b3ea682
commit 96163b4266
9 changed files with 75 additions and 13 deletions

20
api/package-lock.json generated
View File

@ -3687,7 +3687,8 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
@ -3698,7 +3699,8 @@
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -3815,7 +3817,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -3827,6 +3830,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "1.0.1" "number-is-nan": "1.0.1"
} }
@ -3849,12 +3853,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -3873,6 +3879,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -3953,7 +3960,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -3965,6 +3973,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -4086,6 +4095,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",

View File

@ -36,7 +36,6 @@
"jquery": "^3.1.0", "jquery": "^3.1.0",
"jquery-ui": "^1.12.0", "jquery-ui": "^1.12.0",
"jquery-ui-bundle": "^1.11.4", "jquery-ui-bundle": "^1.11.4",
"material-design-icons": "^3.0.1",
"ngx-clipboard": "^11.1.1", "ngx-clipboard": "^11.1.1",
"ngx-cookie-service": "^1.0.9", "ngx-cookie-service": "^1.0.9",
"ngx-infinite-scroll": "^0.5.2", "ngx-infinite-scroll": "^0.5.2",

View File

@ -5,6 +5,8 @@ import {PromotionService} from './services/army-management/promotion.service';
import {AwardingService} from './services/army-management/awarding.service'; import {AwardingService} from './services/army-management/awarding.service';
import {RouteConfig} from './app.config'; import {RouteConfig} from './app.config';
import {DOCUMENT} from '@angular/common'; import {DOCUMENT} from '@angular/common';
import {DomSanitizer} from "@angular/platform-browser";
import {MatIconRegistry} from "@angular/material";
declare function require(url: string); declare function require(url: string);
@ -29,7 +31,14 @@ export class AppComponent implements OnInit {
private promotionService: PromotionService, private promotionService: PromotionService,
private awardingService: AwardingService, private awardingService: AwardingService,
private router: Router, private router: Router,
private iconRegistry: MatIconRegistry,
private sanitizer: DomSanitizer,
@Inject(DOCUMENT) private document) { @Inject(DOCUMENT) private document) {
this.iconRegistry.addSvgIcon('add',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-add_circle-24px.svg'));
this.iconRegistry.addSvgIcon('add-user',
sanitizer.bypassSecurityTrustResourceUrl('../assets/icon/twotone-person_add-24px.svg'));
router.events.subscribe(event => { router.events.subscribe(event => {
if (event instanceof NavigationStart) { if (event instanceof NavigationStart) {
this.loading = true; this.loading = true;

View File

@ -24,10 +24,11 @@ import {UserStore} from './services/stores/user.store';
import {CookieService} from 'ngx-cookie-service'; import {CookieService} from 'ngx-cookie-service';
import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service';
import {MaterialComponentsModule} from './material-components.module'; import {MaterialComponentsModule} from './material-components.module';
import {HttpClientModule} from "@angular/common/http";
@NgModule({ @NgModule({
imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule, imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule,
MaterialComponentsModule], ClipboardModule, MaterialComponentsModule],
providers: [ providers: [
HttpClient, HttpClient,
LoginService, LoginService,

View File

@ -7,6 +7,7 @@
padding-bottom: 20px; padding-bottom: 20px;
} }
:host/deep/.material-icons { :host/deep/.mat-icon {
font-size: 32px; height: 42px;
width: 42px;
} }

View File

@ -11,8 +11,8 @@
Ohne Squad Ohne Squad
</mat-button-toggle> </mat-button-toggle>
</mat-button-toggle-group> </mat-button-toggle-group>
<button mat-icon-button class="pull-right" style="padding-right: 30px;"> <button mat-icon-button class="pull-right" style="margin-right: 16px;">
<mat-icon (click)="openNewUserForm()">add_circle</mat-icon> <mat-icon svgIcon="add-user" (click)="openNewUserForm()"></mat-icon>
</button> </button>
</div> </div>

View File

@ -0,0 +1,21 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_3" display="none">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy_2" display="none">
</g>
<g>
<path opacity="0.3" d="M12,4c-4.41,0-8,3.59-8,8c0,4.41,3.59,8,8,8s8-3.59,8-8C20,7.59,16.41,4,12,4z M17,13h-4v4h-2v-4H7v-2h4V7
h2v4h4V13z"/>
<polygon points="13,7 11,7 11,11 7,11 7,13 11,13 11,17 13,17 13,13 17,13 17,11 13,11 "/>
<path d="M12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10C22,6.48,17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8
c0-4.41,3.59-8,8-8s8,3.59,8,8C20,16.41,16.41,20,12,20z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1002 B

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px"
height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve">
<g id="Bounding_Boxes">
<g id="ui_x5F_spec_x5F_header_copy_2">
</g>
<path fill="none" d="M0,0h24v24H0V0z"/>
</g>
<g id="Duotone">
<g id="ui_x5F_spec_x5F_header_copy">
</g>
<g>
<path opacity="0.3" d="M15,16c-2.69,0-5.77,1.28-6,2h12C20.8,17.29,17.7,16,15,16z"/>
<circle opacity="0.3" cx="15" cy="8" r="2"/>
<path d="M15,12c2.21,0,4-1.79,4-4c0-2.21-1.79-4-4-4s-4,1.79-4,4C11,10.21,12.79,12,15,12z M15,6c1.1,0,2,0.9,2,2s-0.9,2-2,2
s-2-0.9-2-2S13.9,6,15,6z"/>
<path d="M15,14c-2.67,0-8,1.34-8,4v2h16v-2C23,15.34,17.67,14,15,14z M9,18c0.22-0.72,3.31-2,6-2c2.7,0,5.8,1.29,6,2H9z"/>
<polygon points="6,15 6,12 9,12 9,10 6,10 6,7 4,7 4,10 1,10 1,12 4,12 4,15 "/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1,5 +1,4 @@
@import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css";
@import "../node_modules/material-design-icons/iconfont/material-icons.css";
body { body {
padding-top: 50px; padding-top: 50px;