Commit 6ce4429b authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Dark mode map and some other stuff

parent b1c6b3c4
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
...@@ -24,9 +24,8 @@ ...@@ -24,9 +24,8 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"./node_modules/leaflet/dist/leaflet.css", "./node_modules/leaflet/dist/leaflet.css",
"src/styles.scss" "src/sass/app-styles.scss"
], ],
"scripts": [] "scripts": []
}, },
...@@ -90,7 +89,6 @@ ...@@ -90,7 +89,6 @@
"src/assets" "src/assets"
], ],
"styles": [ "styles": [
"./node_modules/@angular/material/prebuilt-themes/purple-green.css",
"src/styles.css" "src/styles.css"
], ],
"scripts": [] "scripts": []
......
<mat-toolbar> <mat-toolbar>
<span>Where</span> <button mat-icon-button (click)="sidenav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<h1>Where</h1>
</mat-toolbar> </mat-toolbar>
<mat-drawer-container> <mat-sidenav-container>
<mat-drawer [mode]="'side'" [opened]="true"> <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [fixedInViewport]="isMobile" [fixedTopGap]="56">
Drawyer Content <app-search></app-search>
</mat-drawer> </mat-sidenav>
<mat-drawer-content> <mat-sidenav-content>
<app-map></app-map> <app-map></app-map>
</mat-drawer-content> </mat-sidenav-content>
</mat-drawer-container> </mat-sidenav-container>
\ No newline at end of file \ No newline at end of file
import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy, Input, OnChanges } from '@angular/core'; import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
templateUrl: './app.component.html', templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'], styleUrls: ['./app.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class AppComponent { export class AppComponent implements OnDestroy {
private mobileQuery: MediaQueryList;
private mobileQueryListener;
constructor(cd: ChangeDetectorRef, media: MediaMatcher) {
this.mobileQuery = media.matchMedia('(max-width: 600px)');
this.mobileQueryListener = () => cd.detectChanges();
this.mobileQuery.addListener(this.mobileQueryListener);
}
get isMobile(): boolean {
return this.mobileQuery.matches;
}
ngOnDestroy() {
this.mobileQuery.removeListener(this.mobileQueryListener);
}
} }
...@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser'; ...@@ -2,6 +2,11 @@ import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule, MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
import { LeafletModule } from '@asymmetrik/ngx-leaflet'; import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { StoreModule } from '@ngrx/store'; import { StoreModule } from '@ngrx/store';
...@@ -9,21 +14,37 @@ import { AppComponent } from './app.component'; ...@@ -9,21 +14,37 @@ import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MapComponent } from './map/map.component'; import { MapComponent } from './map/map.component';
import { reducers } from './store/app.reducer'; import { reducers } from './store/app.reducer';
import { SearchComponent } from './search/search.component';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({ @NgModule({
declarations: [ declarations: [
AppComponent, AppComponent,
MapComponent MapComponent,
], SearchComponent
imports: [ ],
BrowserModule, imports: [
BrowserAnimationsModule, BrowserModule,
MatToolbarModule, BrowserAnimationsModule,
MatSidenavModule, ReactiveFormsModule,
LeafletModule.forRoot(), MatToolbarModule,
StoreModule.forRoot(reducers), MatSidenavModule,
], MatIconModule,
providers: [], MatButtonModule,
bootstrap: [AppComponent] MatFormFieldModule,
MatAutocompleteModule,
MatInputModule,
LeafletModule.forRoot(),
StoreModule.forRoot(reducers),
],
providers: [
{
provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
useValue: {
appearance: 'outline'
}
}
],
bootstrap: [AppComponent]
}) })
export class AppModule { } export class AppModule { }
<div class="map-root" leaflet [leafletOptions]="options"> <div class="map-root" leaflet [leafletOptions]="mapOptions" [leafletLayers]="mapLayers">
</div> </div>
\ No newline at end of file
.map-root { .map-root {
height: 650px; // TODO: Don't hardcode appbar height
height: calc(100vh - 64px);
@media (max-width: 599px) {
height: calc(100vh - 56px);
}
} }
\ No newline at end of file
import { Component } from '@angular/core'; import { Component, ChangeDetectorRef, OnDestroy, ChangeDetectionStrategy } from '@angular/core';
import { latLng, tileLayer } from 'leaflet'; import { latLng, tileLayer, MapOptions, TileLayer } from 'leaflet';
import { MediaMatcher } from '@angular/cdk/layout';
const createLayer = (map) => tileLayer(
map,
{
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
}
);
const LIGHT_MODE_LAYER = createLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png');
const DARK_MODE_LAYER = createLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png');
@Component({ @Component({
selector: 'app-map', selector: 'app-map',
templateUrl: './map.component.html', templateUrl: './map.component.html',
styleUrls: ['./map.component.scss'] styleUrls: ['./map.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class MapComponent { export class MapComponent implements OnDestroy {
options = {
layers: [ mapOptions: MapOptions = {
tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '...' }) zoom: 17,
], center: latLng(38.831493, -77.311485)
zoom: 17,
center: latLng(38.831493, -77.311485)
}; };
private darkModeQuery: MediaQueryList;
private darkModeQueryListener;
constructor(private cd: ChangeDetectorRef, media: MediaMatcher) {
this.darkModeQuery = media.matchMedia('(prefers-color-scheme: dark)');
this.darkModeQueryListener = () => cd.detectChanges();
this.darkModeQuery.addListener(this.darkModeQueryListener);
}
get isDarkMode(): boolean {
return this.darkModeQuery.matches;
}
get mapLayers(): TileLayer[] {
return this.isDarkMode ? [DARK_MODE_LAYER] : [LIGHT_MODE_LAYER];
}
ngOnDestroy() {
this.darkModeQuery.removeListener(this.darkModeQueryListener);
}
} }
...@@ -6,4 +6,4 @@ export interface PointOfInterest { ...@@ -6,4 +6,4 @@ export interface PointOfInterest {
parent: number; parent: number;
lat: number; lat: number;
lon: number; lon: number;
}; }
<form [formGroup]="form" class="search-container">
<mat-form-field>
<mat-label>Search</mat-label>
<input type="text" matInput [formControlName]="'search'" [matAutocomplete]="search"/>
</mat-form-field>
<mat-autocomplete #search="matAutocomplete">
<mat-option *ngFor="let option of autocompleteOptions" [value]="option">{{option}}</mat-option>
</mat-autocomplete>
</form>
.search-container {
margin: 15px;
}
\ No newline at end of file
import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['./search.component.scss']
})
export class SearchComponent {
form: FormGroup;
// TODO: Make dynamic
autocompleteOptions: string[] = ['Water Fountain', 'Johnson Center'];
constructor(fb: FormBuilder) {
this.form = fb.group({
search: ''
});
// TODO: Actually do stuff when user searches
}
}
import { createFeatureSelector } from '@ngrx/store'; import { createFeatureSelector } from '@ngrx/store';
import { PoiState } from './poi.reducer'; import { PoiState } from './poi.reducer';
const getPoiState = createFeatureSelector<PoiState>('poi'); const getPoiState = createFeatureSelector<PoiState>('poi');
\ No newline at end of file
export const get
\ No newline at end of file
@import "theming";
html, body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
@import '~@angular/material/theming';
@include mat-core();
@import '~@angular/material/theming';
$where-light-primary: mat-palette($mat-indigo);
$where-light-accent: mat-palette($mat-amber, A200, A100, A400);
$where-light-warn: mat-palette($mat-red);
$where-light-theme: mat-light-theme($where-light-primary, $where-light-accent, $where-light-warn);
$where-dark-primary: mat-palette($mat-blue-grey);
$where-dark-accent: mat-palette($mat-amber, A200, A100, A400);
$where-dark-warn: mat-palette($mat-red);
$where-dark-theme: mat-dark-theme($where-dark-primary, $where-dark-accent, $where-dark-warn);
@media (prefers-color-scheme: light) {
@include angular-material-theme($where-light-theme);
}
@media (prefers-color-scheme: dark) {
@include angular-material-theme($where-dark-theme);
}
\ No newline at end of file
/* You can add global styles to this file, and also import other style files */
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
...@@ -28,8 +28,7 @@ ...@@ -28,8 +28,7 @@
"interface-name": false, "interface-name": false,
"max-classes-per-file": false, "max-classes-per-file": false,
"max-line-length": [ "max-line-length": [
true, false
140
], ],
"member-access": false, "member-access": false,
"member-ordering": [ "member-ordering": [
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment