From 96163b4266ec436de628ea56f7c0147fd6f8565d Mon Sep 17 00:00:00 2001 From: Florian Hartwich Date: Fri, 6 Jul 2018 17:01:59 +0200 Subject: [PATCH] use svg mat icon and drop icon dependency --- api/package-lock.json | 20 ++++++++++++----- static/package.json | 1 - static/src/app/app.component.ts | 9 ++++++++ static/src/app/app.module.ts | 5 +++-- static/src/app/style/select-list.css | 5 +++-- .../users/user-list/user-list.component.html | 4 ++-- .../assets/icon/twotone-add_circle-24px.svg | 21 ++++++++++++++++++ .../assets/icon/twotone-person_add-24px.svg | 22 +++++++++++++++++++ static/src/styles.css | 1 - 9 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 static/src/assets/icon/twotone-add_circle-24px.svg create mode 100644 static/src/assets/icon/twotone-person_add-24px.svg diff --git a/api/package-lock.json b/api/package-lock.json index d60d759..15fae1e 100644 --- a/api/package-lock.json +++ b/api/package-lock.json @@ -3687,7 +3687,8 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", @@ -3698,7 +3699,8 @@ "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3815,7 +3817,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3827,6 +3830,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "1.0.1" } @@ -3849,12 +3853,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -3873,6 +3879,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3953,7 +3960,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3965,6 +3973,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4086,6 +4095,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", diff --git a/static/package.json b/static/package.json index 53f8645..2b19f03 100644 --- a/static/package.json +++ b/static/package.json @@ -36,7 +36,6 @@ "jquery": "^3.1.0", "jquery-ui": "^1.12.0", "jquery-ui-bundle": "^1.11.4", - "material-design-icons": "^3.0.1", "ngx-clipboard": "^11.1.1", "ngx-cookie-service": "^1.0.9", "ngx-infinite-scroll": "^0.5.2", diff --git a/static/src/app/app.component.ts b/static/src/app/app.component.ts index efc736c..27ed7d3 100644 --- a/static/src/app/app.component.ts +++ b/static/src/app/app.component.ts @@ -5,6 +5,8 @@ import {PromotionService} from './services/army-management/promotion.service'; import {AwardingService} from './services/army-management/awarding.service'; import {RouteConfig} from './app.config'; import {DOCUMENT} from '@angular/common'; +import {DomSanitizer} from "@angular/platform-browser"; +import {MatIconRegistry} from "@angular/material"; declare function require(url: string); @@ -29,7 +31,14 @@ export class AppComponent implements OnInit { private promotionService: PromotionService, private awardingService: AwardingService, private router: Router, + private iconRegistry: MatIconRegistry, + private sanitizer: DomSanitizer, @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 => { if (event instanceof NavigationStart) { this.loading = true; diff --git a/static/src/app/app.module.ts b/static/src/app/app.module.ts index 4f58c5c..b698153 100644 --- a/static/src/app/app.module.ts +++ b/static/src/app/app.module.ts @@ -24,10 +24,11 @@ import {UserStore} from './services/stores/user.store'; import {CookieService} from 'ngx-cookie-service'; import {SnackBarService} from './services/user-interface/snack-bar/snack-bar.service'; import {MaterialComponentsModule} from './material-components.module'; +import {HttpClientModule} from "@angular/common/http"; @NgModule({ - imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, ClipboardModule, - MaterialComponentsModule], + imports: [SharedModule, BrowserModule, BrowserAnimationsModule, appRouting, HttpModule, HttpClientModule, + ClipboardModule, MaterialComponentsModule], providers: [ HttpClient, LoginService, diff --git a/static/src/app/style/select-list.css b/static/src/app/style/select-list.css index e848870..15c703c 100644 --- a/static/src/app/style/select-list.css +++ b/static/src/app/style/select-list.css @@ -7,6 +7,7 @@ padding-bottom: 20px; } -:host/deep/.material-icons { - font-size: 32px; +:host/deep/.mat-icon { + height: 42px; + width: 42px; } diff --git a/static/src/app/users/user-list/user-list.component.html b/static/src/app/users/user-list/user-list.component.html index fe6511e..35cf599 100644 --- a/static/src/app/users/user-list/user-list.component.html +++ b/static/src/app/users/user-list/user-list.component.html @@ -11,8 +11,8 @@ Ohne Squad - diff --git a/static/src/assets/icon/twotone-add_circle-24px.svg b/static/src/assets/icon/twotone-add_circle-24px.svg new file mode 100644 index 0000000..9be3b95 --- /dev/null +++ b/static/src/assets/icon/twotone-add_circle-24px.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + diff --git a/static/src/assets/icon/twotone-person_add-24px.svg b/static/src/assets/icon/twotone-person_add-24px.svg new file mode 100644 index 0000000..6393ce0 --- /dev/null +++ b/static/src/assets/icon/twotone-person_add-24px.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/src/styles.css b/static/src/styles.css index 5c3e4e6..84d5dc1 100644 --- a/static/src/styles.css +++ b/static/src/styles.css @@ -1,5 +1,4 @@ @import "../node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"; -@import "../node_modules/material-design-icons/iconfont/material-icons.css"; body { padding-top: 50px;