From adf1211966dbc271c236630d4e284b1d1fee7570 Mon Sep 17 00:00:00 2001 From: ztimson Date: Sun, 8 Sep 2019 19:50:00 -0400 Subject: [PATCH] Updated colors --- .../components/editSymbol/editSymbol.component.ts | 13 ++----------- src/app/components/palette/palette.component.html | 1 + src/app/components/palette/palette.component.scss | 4 ++++ src/app/components/palette/palette.component.ts | 11 +++++++++-- src/app/services/map.service.ts | 12 ++++++------ src/app/views/map/map.component.ts | 8 ++++---- 6 files changed, 26 insertions(+), 23 deletions(-) diff --git a/src/app/components/editSymbol/editSymbol.component.ts b/src/app/components/editSymbol/editSymbol.component.ts index e279e82..f877d14 100644 --- a/src/app/components/editSymbol/editSymbol.component.ts +++ b/src/app/components/editSymbol/editSymbol.component.ts @@ -1,8 +1,6 @@ import {Component, Inject} from "@angular/core"; -import {MatDialog} from "@angular/material/dialog"; import {MapSymbol} from "../../models/mapSymbol"; import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from "@angular/material/bottom-sheet"; -import {ColorPickerDialogComponent} from "../colorPickerDialog/colorPickerDialog.component"; @Component({ selector: 'edit-symbol', @@ -12,8 +10,8 @@ export class EditSymbolComponent { symbol: MapSymbol; mapItem; - constructor(private dialog: MatDialog, private ref: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) data) { - this.symbol = Object.assign({color: '#ff4141'}, data.symbol); + constructor(private ref: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) data) { + this.symbol = Object.assign({color: '#e9403d'}, data.symbol); this.mapItem = data.item; this.mapItem.enableEdit(); @@ -39,11 +37,4 @@ export class EditSymbolComponent { this.ref.dismiss(this.symbol); } - - colorPicker() { - this.dialog.open(ColorPickerDialogComponent, {data: this.symbol.color, hasBackdrop: false, panelClass: 'p-0'}).afterClosed() - .subscribe(color => { - this.symbol.color = color - }); - } } diff --git a/src/app/components/palette/palette.component.html b/src/app/components/palette/palette.component.html index e0d99de..b407a83 100644 --- a/src/app/components/palette/palette.component.html +++ b/src/app/components/palette/palette.component.html @@ -1,3 +1,4 @@
+
diff --git a/src/app/components/palette/palette.component.scss b/src/app/components/palette/palette.component.scss index a33159e..6653b1d 100644 --- a/src/app/components/palette/palette.component.scss +++ b/src/app/components/palette/palette.component.scss @@ -9,3 +9,7 @@ height: 45px; } } + +.rainbow { + background: linear-gradient(-45deg, red, red, orange, yellow, green, cyan, blue, violet, violet); +} diff --git a/src/app/components/palette/palette.component.ts b/src/app/components/palette/palette.component.ts index 3b42c26..53e637f 100644 --- a/src/app/components/palette/palette.component.ts +++ b/src/app/components/palette/palette.component.ts @@ -1,4 +1,6 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; +import {ColorPickerDialogComponent} from "../colorPickerDialog/colorPickerDialog.component"; +import {MatDialog} from "@angular/material/dialog"; @Component({ selector: 'palette', @@ -6,7 +8,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core"; styleUrls: ['palette.component.scss'] }) export class PaletteComponent implements OnInit { - @Input() colors = ['#1d1d1a', '#ffffff', '#008dd5', '#1a891d', '#ff4141']; + @Input() colors = ['#1d1d1a', '#ffffff', '#f4f554', '#33abe3', '#5fd75a', '#e9403d']; @Input() vertical = false; @Output() selectedChange = new EventEmitter(); @@ -18,9 +20,14 @@ export class PaletteComponent implements OnInit { this.selectedChange.emit(this._selected); }; - constructor() { } + constructor(private dialog: MatDialog) { } ngOnInit() { if(!this.selected) this.selected = this.colors[0]; } + + colorPicker() { + this.dialog.open(ColorPickerDialogComponent, {data: this.selected, hasBackdrop: false, panelClass: 'p-0'}).afterClosed() + .subscribe(color => this.selected = color); + } } diff --git a/src/app/services/map.service.ts b/src/app/services/map.service.ts index 7b77db7..8a7634b 100644 --- a/src/app/services/map.service.ts +++ b/src/app/services/map.service.ts @@ -26,7 +26,7 @@ export enum WeatherLayers { function buildMarker(color?: string) { const markerHtmlStyles = ` - background-color: ${color || '#ff4141'}; + background-color: ${color || '#e9403d'}; width: 3rem; height: 3rem; display: block; @@ -120,7 +120,7 @@ export class MapService { } newCircle(c: Circle) { - let circle = L.circle(c.latlng, Object.assign({color: '#ff4141', autoPan: false}, c)).addTo(this.map); + let circle = L.circle(c.latlng, Object.assign({color: '#e9403d', autoPan: false}, c)).addTo(this.map); if(c.label) circle.bindTooltip(c.label, {permanent: true, direction: 'center'}); circle.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: c, item: circle})); if(!c.noDelete) this.circles.push(circle); @@ -137,7 +137,7 @@ export class MapService { } newMeasurement(m: Measurement) { - let line = L.polyline([m.latlng, m.latlng2], Object.assign({color: '#ff4141', autoPan: false, weight: 8, lineCap: "square", dashArray: '10, 20'}, m)).addTo(this.map); + let line = L.polyline([m.latlng, m.latlng2], Object.assign({color: '#e9403d', autoPan: false, weight: 8, lineCap: "square", dashArray: '10, 20'}, m)).addTo(this.map); if(!m.noDelete) this.measurements.push(line); let distance = latLngDistance(m.latlng, m.latlng2); line.bindPopup(`${distance > 1000 ? Math.round(distance / 100) / 10 : Math.round(distance)} ${distance > 1000 ? 'k' : ''}m`, {autoPan: false, autoClose: false, closeOnClick: false}).openPopup(); @@ -146,7 +146,7 @@ export class MapService { } newPolygon(p: Polygon) { - let polygon = new L.Polygon(p.latlng, Object.assign({color: '#ff4141', autoPan: false}, p)).addTo(this.map); + let polygon = new L.Polygon(p.latlng, Object.assign({color: '#e9403d', autoPan: false}, p)).addTo(this.map); if(p.label) polygon.bindTooltip(p.label, {permanent: true}); polygon.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polygon})); if(!p.noDelete) this.polygons.push(polygon); @@ -154,14 +154,14 @@ export class MapService { } newPolyline(p: Polyline) { - let polyline = new L.Polyline(p.latlng, Object.assign({color: '#ff4141', autoPan: false, weight: 10}, p)).addTo(this.map); + let polyline = new L.Polyline(p.latlng, Object.assign({color: '#e9403d', autoPan: false, weight: 10}, p)).addTo(this.map); polyline.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: p, item: polyline})); if(!p.noDelete) this.polylines.push(polyline); return polyline; } newRectangle(r: Rectangle) { - let rect = new L.Rectangle([r.latlng, r.latlng2], Object.assign({color: '#ff4141', autoPan: false}, r)).addTo(this.map); + let rect = new L.Rectangle([r.latlng, r.latlng2], Object.assign({color: '#e9403d', autoPan: false}, r)).addTo(this.map); if(r.label) rect.bindTooltip(r.label, {permanent: true, direction: 'center'}); rect.on('click', e => this.click.next({latlng: {lat: e.latlng.lat, lng: e.latlng.lng}, symbol: r, item: rect})); if(!r.noDelete) this.rectangles.push(rect); diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index e34faf8..110457a 100644 --- a/src/app/views/map/map.component.ts +++ b/src/app/views/map/map.component.ts @@ -29,7 +29,7 @@ export class MapComponent implements OnDestroy, OnInit { private calibration; code: string; - drawColor = '#ff4141'; + drawColor = '#e9403d'; map: MapService; name: string; polygon: any; @@ -159,7 +159,7 @@ export class MapComponent implements OnDestroy, OnInit { this.dialog.open(DimensionsDialogComponent, {data: ['Distance (m)', 'Baring'], panelClass: 'pb-0'}).afterClosed().subscribe(dimensions => { if(!dimensions) return; let latlng = relativeLatLng({lat: this.position.latitude, lng: this.position.longitude}, dimensions[0], dimensions[1]); - let marker: Marker = {latlng: latlng, color: '#ff4141'}; + let marker: Marker = {latlng: latlng, color: '#e9403d'}; this.syncService.addMarker(marker); }) }; @@ -242,7 +242,7 @@ export class MapComponent implements OnDestroy, OnInit { this.syncService.addMeasurement(measurement); this.map.delete(lastPoint); } - lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'}); + lastPoint = this.map.newMarker({latlng: e.latlng, color: '#e9403d'}); }) }; @@ -270,7 +270,7 @@ export class MapComponent implements OnDestroy, OnInit { this.syncService.addRectangle(rect); return this.map.delete(lastPoint); } - lastPoint = this.map.newMarker({latlng: e.latlng, color: '#ff4141'}); + lastPoint = this.map.newMarker({latlng: e.latlng, color: '#e9403d'}); }) };