hardi
/
opt-cc
1
0
Fork 0
Code Pull Requests Releases 47 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
api/package-lock.json generated
View File

@ -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",

1
static/package.json
View File

@ -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",

9
static/src/app/app.component.ts
View File

@ -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;

5
static/src/app/app.module.ts
View File

@ -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,

5
static/src/app/style/select-list.css
View File

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

4
static/src/app/users/user-list/user-list.component.html
View File

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

21
static/src/assets/icon/twotone-add_circle-24px.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1002 B

22
static/src/assets/icon/twotone-person_add-24px.svg Normal file
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>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
static/src/styles.css
View File

@ -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;