ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

New palette

Browse Source
This commit is contained in:
Zakary Timson 2019-09-08 16:35:35 -04:00
parent 6062364f4c
commit 21414f9f1d
5 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/components/editSymbol/editSymbol.component.html
View File

@ -1,10 +1,14 @@
<div> <div class="pt-sm-2">
<div class="row"> <div class="d-flex flex-column-reverse flex-sm-row">
<mat-form-field appearance="fill" class="col-12 col-md-6"> <div class="flex-grow-1">
<mat-form-field appearance="fill" class="w-100 pr-sm-3">
<mat-label>Label</mat-label> <mat-label>Label</mat-label>
<input matInput [(ngModel)]="symbol.label"> <input matInput [(ngModel)]="symbol.label">
</mat-form-field> </mat-form-field>
<div class="ml-auto mt-1 mr-3 rounded-circle border curs-pointer" (click)="colorPicker()" style="width: 46px; height: 46px;" [style.background]="symbol.color"></div> </div>
<div class="flex-shrink-0 py-3 py-sm-1">
<palette [(selected)]="symbol.color"></palette>
</div>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field appearance="fill" class="col-12"> <mat-form-field appearance="fill" class="col-12">

4
src/app/components/palette/palette.component.html
View File

@ -1,3 +1,3 @@
<div class="py-1"> <div [ngClass]="{'d-flex-column': vertical, 'd-flex': !vertical}">
<div *ngFor="let c of colors" class="m-3 color-palette" [ngClass]="{'selected': selected == c}" [style.backgroundColor]="c" (click)="selected = c"></div> <div *ngFor="let c of colors" class="color-palette" [ngClass]="{'selected': selected == c, 'my-3 mx-auto': vertical, 'mx-2 my-auto': !vertical}" [style.backgroundColor]="c" (click)="selected = c"></div>
</div> </div>

4
src/app/components/palette/palette.component.scss
View File

@ -2,8 +2,10 @@
border-radius: 50% 50%; border-radius: 50% 50%;
width: 30px; width: 30px;
height: 30px; height: 30px;
border: 2px solid #dddddd;
&.selected { &.selected {
border: 4px solid #3b5998; width: 45px;
height: 45px;
} }
} }

3
src/app/components/palette/palette.component.ts
View File

@ -6,7 +6,8 @@ import {Component, EventEmitter, Input, OnInit, Output} from "@angular/core";
styleUrls: ['palette.component.scss'] styleUrls: ['palette.component.scss']
}) })
export class PaletteComponent implements OnInit { export class PaletteComponent implements OnInit {
@Input() colors = ['#393936', '#ffffff', '#008dd5', '#1a891d', '#ff4141']; @Input() colors = ['#1d1d1a', '#ffffff', '#008dd5', '#1a891d', '#ff4141'];
@Input() vertical = false;
@Output() selectedChange = new EventEmitter<string>(); @Output() selectedChange = new EventEmitter<string>();

2
src/app/views/map/map.component.html
View File

@ -1,7 +1,7 @@
<toolbar [(menuItems)]="menu" [status]="syncService.status" (save)="syncService.save()"></toolbar> <toolbar [(menuItems)]="menu" [status]="syncService.status" (save)="syncService.save()"></toolbar>
<div id="map"></div> <div id="map"></div>
<div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette"> <div *ngIf="showPalette" [@flyInRight] [@flyOutRight] class="palette">
<palette [(selected)]="drawColor"></palette> <palette [(selected)]="drawColor" [vertical]="true"></palette>
</div> </div>
<div *ngIf="shareDialog" class="share" [@flyInRight] [@flyOutRight]> <div *ngIf="shareDialog" class="share" [@flyInRight] [@flyOutRight]>
<div class="input-group"> <div class="input-group">