fLotte-meets-HWR-DB
/
frontend
mirror of https://github.com/fLotte-meets-HWR-DB/frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

changed svg icon in table overview

Browse Source
master
FlayInAHook 4 years ago
parent bc1d1d4cae
commit 3a5fb44d67
5 changed files with 108 additions and 4 deletions
Show Stats Download Patch File Download Diff File

10
src/app/app.component.ts
Unescape Escape View File

@ -6,6 +6,8 @@ import { ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { NavService } from './components/menu-list-item/nav.service';
import { tableLinks } from 'src/app/tableLinks';
import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-root',
@ -28,12 +30,18 @@ export class AppComponent {
private themeService: ColorThemeService,
private authService: AuthService,
private router: Router,
private navService: NavService
private navService: NavService,
private matIconRegistry: MatIconRegistry,
private domSanitizer: DomSanitizer
) {
this.renderer.addClass(document.body, 'mat-app-background'); //so the background color changes dependent on current theme
this.themeService.load();
this.darkThemeIsActive = this.themeService.currentActive() === 'dark-theme';
this.authService.loggedIn.subscribe((value) => (this.loggedIn = value));
this.matIconRegistry.addSvgIcon(
"cargobike",
this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/cargobike.svg")
);
}
changeTheme(event) {

3
src/app/pages/table-overview/table-overview.component.html
Unescape Escape View File

@ -5,7 +5,8 @@
<mat-list>
<mat-list-item *ngFor="let link of tableLinks">
<a mat-button color="primary" [routerLink]="link.route">
<mat-icon>{{ link.iconName }}</mat-icon>
<mat-icon [svgIcon]="link.svgIconName" *ngIf="!link.iconName"></mat-icon>
<mat-icon *ngIf="link.iconName">{{ link.iconName }}</mat-icon>
{{ link.displayName }}
</a>
</mat-list-item>

5
src/app/tableLinks.ts
Unescape Escape View File

@ -2,8 +2,9 @@
export const tableLinks = [
{
displayName: 'Lastenräder',
iconName: 'directions_bike',
route: '/table/bikes'
route: '/table/bikes',
svgIconName: 'cargobike'
},
{
displayName: 'Aktive',

47
src/assets/cargobike.svg
Unescape Escape View File

@ -0,0 +1,47 @@
<?xml version="1.0"?>
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:ns1="http://sozi.baierouge.fr"
id="Layer_1"
version="1.1"
xml:space="preserve"
viewBox="0 0 508.204 277.561"
enable-background="new 0 0 508.204 277.561"
y="0px"
x="0px"
>
<metadata>image/svg+xmlOpenclipartCargo Bike (Tricycle)2013-06-20T10:33:47Cargo-Tricycle\nOwn work, released under public domainhttps://openclipart.org/detail/179432/cargo-bike-tricycle-by-joky-179432jokybicyclecargo bicyclecargobikecycle logisticcyclelogisticlastenfahrradlastenradlogistic</metadata>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<circle id="svg_1" r="69.094" stroke-miterlimit="10" cx="76.181" cy="200.55" stroke="#7fc600" stroke-width="14.173"/>
<circle id="svg_2" r="7.81" cx="76.181" cy="200.55"/>
<line id="svg_3" x1="117.99" x2="190.99" stroke-miterlimit="10" stroke="#7fc600" y1="54.31" y2="200.55" stroke-width="11.339"/>
<line id="svg_4" x1="81.344" x2="393.84" stroke-miterlimit="10" stroke-linecap="round" stroke="#7fc600" y1="200.55" y2="200.55" stroke-width="11.339"/>
<line id="svg_5" x1="152.02" x2="77.606" stroke-miterlimit="10" stroke="#7fc600" y1="131.46" y2="200.55" stroke-width="11.339"/>
<path id="svg_6" d="m185.28,209.81" stroke-miterlimit="10" stroke-width="11.339" stroke="#7fc600"/>
<path id="svg_7" d="m210.28,171.86" stroke-miterlimit="10" stroke-width="11.339" stroke="#7fc600"/>
<g id="svg_8" stroke-miterlimit="10" stroke-width="11.339" stroke="#7fc600">
<line id="svg_9" y2="162.9" x1="166.27" y1="238.2" x2="215.88"/>
<line id="svg_10" stroke-linecap="round" y2="162.9" x1="203.77" y1="162.9" x2="227.66"/>
<line id="svg_11" stroke-linecap="round" y2="238.2" x1="154.32" y1="238.2" x2="178.22"/>
</g>
<line id="svg_12" x1="100.78" x2="141.05" stroke-miterlimit="10" stroke-linecap="round" stroke="#7fc600" y1="54.31" y2="54.31" stroke-width="17.008"/>
<path id="svg_13" d="m502.54,195.81001l-240,-0.919c4.875,0 4.331,-1.619 4.331,-4.75l0,-140.00001c0,-1.565 0.647,-3.062 1.788,-4.133c1.142,-1.071 2.665,-1.625 4.237,-1.525l230,14.5c2.987,0.188 5.313,2.666 5.313,5.658l0,125.50001c-0.01,3.13 -2.54,5.67 -5.67,5.67l0.001,-0.001z"/>
<circle id="svg_14" r="62.505" stroke-miterlimit="10" cx="394.62" cy="207.97" stroke="#7fc600" stroke-width="14.173"/>
<circle id="svg_15" r="11.31" cx="394.62" cy="207.97"/>
<polyline id="svg_16" stroke-width="8.5039" stroke-miterlimit="10" points="271.28 50.31 260.42 27.81 228.28 6.31" stroke="#7fc600" stroke-linecap="round" stroke-linejoin="round"/>
<circle id="svg_17" r="6.31" cx="228.28" cy="6.31"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

47
src/assets/cargobike2.svg
Unescape Escape View File

@ -0,0 +1,47 @@
<?xml version="1.0"?>
<svg
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://web.resource.org/cc/"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:ns1="http://sozi.baierouge.fr"
id="Layer_1"
version="1.1"
xml:space="preserve"
viewBox="0 0 508.204 277.561"
enable-background="new 0 0 508.204 277.561"
y="0px"
x="0px"
>
<metadata>image/svg+xmlOpenclipartCargo Bike (Tricycle)2013-06-20T10:33:47Cargo-Tricycle\nOwn work, released under public domainhttps://openclipart.org/detail/179432/cargo-bike-tricycle-by-joky-179432jokybicyclecargo bicyclecargobikecycle logisticcyclelogisticlastenfahrradlastenradlogistic</metadata>
<g>
<title>background</title>
<rect fill="none" id="canvas_background" height="602" width="802" y="-1" x="-1"/>
</g>
<g>
<title>Layer 1</title>
<circle id="svg_1" fill="none" r="69.094" stroke-miterlimit="10" cx="76.181" cy="200.55" stroke="#000" stroke-width="14.173"/>
<circle id="svg_2" r="7.81" cx="76.181" cy="200.55"/>
<line id="svg_3" fill="none" x1="117.99" x2="190.99" stroke-miterlimit="10" stroke="#000" y1="54.31" y2="200.55" stroke-width="11.339"/>
<line id="svg_4" fill="none" x1="81.344" x2="393.84" stroke-miterlimit="10" stroke-linecap="round" stroke="#000" y1="200.55" y2="200.55" stroke-width="11.339"/>
<line id="svg_5" fill="none" x1="152.02" x2="77.606" stroke-miterlimit="10" stroke="#000" y1="131.46" y2="200.55" stroke-width="11.339"/>
<path id="svg_6" fill="none" d="m185.28,209.81" stroke-miterlimit="10" stroke-width="11.339" stroke="#000"/>
<path id="svg_7" fill="none" d="m210.28,171.86" stroke-miterlimit="10" stroke-width="11.339" stroke="#000"/>
<g id="svg_8" fill="none" stroke-miterlimit="10" stroke-width="11.339" stroke="#000">
<line id="svg_9" y2="162.9" x1="166.27" y1="238.2" x2="215.88"/>
<line id="svg_10" stroke-linecap="round" y2="162.9" x1="203.77" y1="162.9" x2="227.66"/>
<line id="svg_11" stroke-linecap="round" y2="238.2" x1="154.32" y1="238.2" x2="178.22"/>
</g>
<line id="svg_12" fill="none" x1="100.78" x2="141.05" stroke-miterlimit="10" stroke-linecap="round" stroke="#000" y1="54.31" y2="54.31" stroke-width="17.008"/>
<path id="svg_13" d="m502.54,195.81001l-240,-0.919c4.875,0 4.331,-1.619 4.331,-4.75l0,-140.00001c0,-1.565 0.647,-3.062 1.788,-4.133c1.142,-1.071 2.665,-1.625 4.237,-1.525l230,14.5c2.987,0.188 5.313,2.666 5.313,5.658l0,125.50001c-0.01,3.13 -2.54,5.67 -5.67,5.67l0.001,-0.001z"/>
<circle id="svg_14" fill="none" r="62.505" stroke-miterlimit="10" cx="394.62" cy="207.97" stroke="#000" stroke-width="14.173"/>
<circle id="svg_15" r="11.31" cx="394.62" cy="207.97"/>
<polyline id="svg_16" fill="none" stroke-width="8.5039" stroke-miterlimit="10" points="271.28 50.31 260.42 27.81 228.28 6.31" stroke="#000" stroke-linecap="round" stroke-linejoin="round"/>
<circle id="svg_17" r="6.31" cx="228.28" cy="6.31"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

Write Preview
Loading…
Cancel
Save