Fixed icons

This commit is contained in:
Zakary Timson 2019-08-27 20:23:47 -04:00
parent 4abf684072
commit 4547720f0e
4 changed files with 8 additions and 12 deletions

View File

@ -28,6 +28,7 @@
"src/manifest.webmanifest"
],
"styles": [
"./node_modules/bootstrap-scss/bootstrap.scss",
"./node_modules/leaflet/dist/leaflet.css",
"src/material-theme.scss",
"src/styles.scss"

View File

@ -25,17 +25,17 @@
<ng-template #menuItem let-item let-menu="menu" let-mode="mode">
<ng-container *ngIf="mode == 'icon' && !item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button>
</ng-container>
<ng-container *ngIf="mode == 'menu' && !item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button>
</ng-container>
<ng-container *ngIf="mode == 'icon' && item.subMenu">
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px"></span>
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">
@ -45,7 +45,7 @@
</ng-container>
<ng-container *ngIf="mode == 'menu' && item.subMenu">
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matMenuTriggerFor]="subMenu">
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon><span *ngIf="item.faicon" [class]="item.faicon" style="height: 18px; width: 18px; font-size: 18px; margin-left: 4px; margin-right: 16px"></span> {{item?.name}}
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
</button>
<mat-menu #subMenu="matMenu">
<ng-container *ngFor="let child of item.subMenu">

View File

@ -7,11 +7,9 @@ import {ToolbarItem} from "../../models/toolbarItem";
import {flyInRight, flyOutRight} from "../../animations";
import {ARROW, MapLayers, MapService, MEASURE, WeatherLayers} from "../../services/map.service";
import {Subscription} from "rxjs";
import {MarkerComponent} from "../../components/marker/marker.component";
import {MatBottomSheetRef} from "@angular/material/bottom-sheet";
import {copyToClipboard} from "../../utils";
import {ActivatedRoute} from "@angular/router";
import {CircleComponent} from "../../components/circle/circle.component";
declare const L;
@ -37,9 +35,9 @@ export class MapComponent implements OnInit {
menu: ToolbarItem[] = [
{name: 'Marker', icon: 'room', toggle: true, click: () => { this.addMarker(); }},
{name: 'Draw', icon: 'create', toggle: true, onEnabled: () => this.startDrawing(), onDisabled: () => this.stopDrawing()},
{name: 'Circle', faicon: 'far fa-circle', toggle: true, click: () => { this.addCircle(); }},
{name: 'Square', faicon: 'far fa-square', toggle: true},
{name: 'Polygon', faicon: 'fas fa-draw-polygon', toggle: true},
{name: 'Circle', icon: 'panorama_fish_eye', toggle: true, click: () => { this.addCircle(); }},
{name: 'Square', icon: 'crop_square', toggle: true},
{name: 'Polygon', icon: 'details', toggle: true},
{name: 'Measure', icon: 'straighten', toggle: true, onEnabled: () => this.startMeasuring(), onDisabled: () => this.stopMeasuring()},
{name: 'Delete', icon: 'delete', toggle: true},
{name: 'Map Style', icon: 'terrain', subMenu: [

View File

@ -1,6 +1,3 @@
@import url('https://use.fontawesome.com/releases/v5.8.1/css/all.css');
@import '~bootstrap-scss/bootstrap.scss';
:focus {
outline: none !important;
}