Commit 0f0dbd94 authored by FORESTIER Fabien's avatar FORESTIER Fabien
Browse files

Update to angular 7 + Remove switch layer button on map

parent 7d6d06e1
This diff is collapsed.
......@@ -19,16 +19,16 @@
},
"private": true,
"dependencies": {
"@angular/animations": "6.1.0",
"@angular/cdk": "^5.2.5",
"@angular/common": "6.1.0",
"@angular/compiler": "6.1.0",
"@angular/core": "6.1.0",
"@angular/forms": "6.1.0",
"@angular/http": "6.1.0",
"@angular/platform-browser": "6.1.0",
"@angular/platform-browser-dynamic": "6.1.0",
"@angular/router": "6.1.0",
"@angular/animations": "7.2.4",
"@angular/cdk": "^7.3.1",
"@angular/common": "7.2.4",
"@angular/compiler": "7.2.4",
"@angular/core": "7.2.4",
"@angular/forms": "7.2.4",
"@angular/http": "7.2.4",
"@angular/platform-browser": "7.2.4",
"@angular/platform-browser-dynamic": "7.2.4",
"@angular/router": "7.2.4",
"@turf/centroid": "^5.1.5",
"@turf/helpers": "^6.1.4",
"angulartics2": "^6.3.1",
......@@ -40,31 +40,29 @@
"font-awesome": "^4.7.0",
"hamburgers": "^1.1.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.11",
"lodash.clonedeep": "^4.5.0",
"mapbox-gl": "^0.47.0",
"ng-inline-svg": "^8.2.1",
"ngx-infinite-scroll": "^6.0.1",
"node-rsa": "^1.0.3",
"rxjs": "^6.3.3",
"rxjs": "^6.4.0",
"xml2js": "^0.4.19",
"zone.js": "^0.8.26"
"zone.js": "^0.8.29"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.2.8",
"@angular/compiler-cli": "6.1.0",
"@angular/language-service": "6.1.0",
"@angular-devkit/build-angular": "^0.13.1",
"@angular/cli": "^7.3.1",
"@angular/compiler-cli": "7.2.4",
"@angular/language-service": "7.2.4",
"@types/jasmine": "^2.8.12",
"@types/jasminewd2": "^2.0.6",
"@types/jwt-decode": "^2.2.1",
"@types/lodash.clonedeep": "^4.5.4",
"@types/mapbox-gl": "^0.47.0",
"@types/node": "^6.14.2",
"codelyzer": "^4.5.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.5",
"karma": "^4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-htmlfile-reporter": "^0.3.7",
......@@ -75,8 +73,8 @@
"rxjs-tslint": "^0.1.6",
"sass-recursive-map-merge": "^1.0.1",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"tslint": "^5.12.1",
"tslint-config-airbnb": "^5.11.1",
"typescript": "2.9.2"
"typescript": "3.2.4"
}
}
<div>
<div id="map" class="" [ngClass]="{'fullscreen': fullscreen===true, 'display-details': selectedData !== null && displayDataDetails === true, 'hide-details': displayDataDetails === false && selectedData !== null}">
<div id="map" class=""
[ngClass]="{'fullscreen': fullscreen===true, 'display-details': selectedData !== null && displayDataDetails === true, 'hide-details': displayDataDetails === false && selectedData !== null}">
<div id="menu" *ngIf="displayControls">
<div class="columns is-mobile is-gapless">
<div class="columns is-mobile is-marginless">
<div class="column is-narrow">
<div class="mapboxgl-ctrl-group column-content" (click)="displayLayersMenu = !displayLayersMenu">
<button class="mapboxgl-ctrl-icon btn-layers" type="button"></button>
</div>
</div>
<div class="column is-narrow" *ngIf="displayLayersMenu">
<div class="buttons has-addons layers-options column-content">
<div class="buttons has-addons column-content">
<ng-container *ngFor="let l of settings.baseLayers">
<button class="button" [disabled]="l.id === selectedBaseLayer.id"
[ngClass]="{'is-selected': l.id === selectedBaseLayer.id, 'is-danger': l.id === selectedBaseLayer.id}"
<button class="button" [disabled]="l.id === selectedBaseLayer.id"
[ngClass]="{'is-selected': l.id === selectedBaseLayer.id, 'is-danger': l.id === selectedBaseLayer.id}"
(click)="switchLayer(l)" type="button">
{{ l.labels[lang] }}
</button>
......@@ -20,26 +16,26 @@
</div>
</div>
<div class="columns is-mobile is-gapless">
<div class="column is-narrow">
<div class="columns is-mobile is-marginless">
<div class="column">
<div class="mapboxgl-ctrl-group column-content">
<button class="mapboxgl-ctrl-icon" [ngClass]="{'btn-exit-fullscreen': fullscreen === true, 'btn-fullscreen': fullscreen === false}"
<button class="mapboxgl-ctrl-icon"
[ngClass]="{'btn-exit-fullscreen': fullscreen === true, 'btn-fullscreen': fullscreen === false}"
type="button" (click)="toogleFullscreen()">
</button>
</div>
</div>
</div>
<div class="columns is-mobile is-gapless is-hidden-tablet">
<div class="column is-narrow">
<div class="columns is-mobile is-hidden-tablet is-marginless">
<div class="column">
<div class="mapboxgl-ctrl-group column-content" (click)="displayPitchSlider = !displayPitchSlider">
<button class="mapboxgl-ctrl-icon btn-pitch" type="button"></button>
</div>
</div>
<div class="column" *ngIf="displayPitchSlider">
<div class="pitch-input-container column-content">
<input class="slider is-success pitch-input" step="1" min="0" max="60" [value]="map.getPitch()" type="range"
<input class="slider is-danger pitch-input" step="1" min="0" max="60" [value]="map.getPitch()" type="range"
(input)="changeMapPitchValue($event.target.value)">
</div>
</div>
......@@ -72,8 +68,9 @@
</div>
</div>
<div class="data-details-wrapper" *ngIf="selectedData !== null" [ngClass]="{'data-details-opened': selectedData !== null && displayDataDetails === true, 'data-details-closed': displayDataDetails === false}">
<div class="data-details-wrapper" *ngIf="selectedData !== null"
[ngClass]="{'data-details-opened': selectedData !== null && displayDataDetails === true, 'data-details-closed': displayDataDetails === false}">
<app-data-details (close)="closeDataDetails()" [properties]="selectedData"></app-data-details>
</div>
</div>
</div>
</div>
\ No newline at end of file
......@@ -63,44 +63,29 @@
#menu {
z-index: 1;
position: absolute;
.columns:first-of-type {
.column {
.column-content {
margin-top: 0.625rem;
}
}
}
margin: 10px 0 0 10px;
.columns {
margin-bottom: 0;
.column {
.column-content {
margin: 0.312rem 0.312rem 0rem 0.312rem;
}
}
.column:first-of-type {
.column-content {
margin-left: 0.625rem;
}
display: flex;
padding: 0 0 0.625rem 0;
}
.column:last-of-type {
.column-content {
margin-right: 0.625rem;
}
.column:not(:first-of-type) {
padding-left: 0.625rem;
}
.buttons {
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
border-radius: 0.25rem;
margin-bottom: 0;
.button {
margin-bottom: 0;
}
}
button {
margin-bottom: 0rem;
&:disabled {
opacity: 1;
}
......@@ -127,11 +112,6 @@
background-position: center;
}
.btn-layers {
background-image: url('../../../assets/img/layers-icon.png');
background-size: 2.5rem 2.5rem;
}
.btn-pitch {
background-image: url('../../../assets/img/angle.png');
background-size: 1.25rem 1.25rem;
......
......@@ -24,7 +24,6 @@ export class MapComponent implements OnInit, OnDestroy {
// Key of the lay to be displayed from baseLayers in environment files
selectedBaseLayer = this.settings.baseLayers[this.settings.defaultBaseLayer];
displayLayersMenu = false; // Boolean used to hide or display the Layers menu
displayPitchSlider = false;
displayDataDetails = false; // Wether the data details should be displayed or not
display3d = false;
......
......@@ -12,7 +12,7 @@ import { Minimap } from '../components/minimap-control';
import { DatasetDetailService } from '../../geosource/services';
import { settings } from '../settings';
import { cloneDeep } from 'lodash';
import * as cloneDeep from 'lodash.clonedeep';
import { linkFormats } from '../../geosource/models/metadata.model';
@Injectable()
......
Supports Markdown
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