Skip to content
GitLab
Commit 0addde18 authored by Justine's avatar Justine
Browse files

corrections légende

parent 845c02bb
Hide whitespace changes
Inline Side-by-side
projects/visualiseur-core/src/lib/layers-legend/layers-legend/layers-legend.component.html
View file @ 0addde18
......@@ -66,10 +66,19 @@
<ng-container *ngTemplateOutlet="share"></ng-container>
</div>
<div *ngIf="rootLayerGroup && (!!filterValue || mode === 'Légende')" class="list-group panel flex-grow-1">
<ng-container *ngTemplateOutlet="treeLayerGroup"></ng-container>
<div *ngIf="rootLayerGroup && mode === 'Légende'" class="list-group panel flex-grow-1">
<alk-legend-side [rootLayerGroup]="rootLayerGroup" [filterValue]="filterValue" [screenMode]="screenMode">
</alk-legend-side>
</div>
<!-- <div *ngIf="rootLayerGroup && mode === 'Couches'" class="list-group panel flex-grow-1">
<alk-layers-side></alk-layers-side>
</div> -->
<!-- <div *ngIf="rootLayerGroup && (!!filterValue || mode === 'Légende')" class="list-group panel flex-grow-1">
<ng-container *ngTemplateOutlet="treeLayerGroup"></ng-container>
</div> -->
<div *ngIf="rootLayerGroup && (!filterValue && mode === 'Couches')" class="list-group panel flex-grow-1"
[dragula]="dragulaLayersGroup.name ? dragulaLayersGroup.name : 'BaseLayers_desktop'"
[dragulaModel]="rootLayerGroup.getLayers().getArray()"
......@@ -165,7 +174,6 @@
</ng-template>
<ng-template #treeLayerGroup>
<ng-container *ngFor="let baseLayer of rootLayerGroup.getLayers().getArray(); index as lG ">
<ng-container *ngIf="!!(baseLayer.getProdigeType() === 'LayerGroup')" [ngTemplateOutlet]="tLayerGroup"
[ngTemplateOutletContext]="{layerGroup: baseLayer, idx: lG, level: 1, path: '-0-'+lG+'-', parent: 'sidebar'}">
......@@ -180,8 +188,8 @@
<ng-template #tLayerGroup let-layerGroup="layerGroup" let-idx="idx" let-level="level" let-path="path"
let-parent="parent">
<div class="layergroupbox"
*ngIf="layerGroup.get('filterVisibility') !== false && ( mode !== 'Légende' || !layerGroup.get('isEmpty') ) "
<!-- *ngIf="layerGroup.get('filterVisibility') !== false && ( mode !== 'Légende' || !layerGroup.get('isEmpty') ) " -->
<div class="layergroupbox" *ngIf="layerGroup.getLayers().getArray().length > 0 "
(mouseenter)="layerGroup.set('dragHover', true);"
(mouseleave)="layerGroup.set('dragHover', {read: null, static: true});">
<!-- <a href="#menu-{{ level }}-{{ idx }}" class="list-group-item d-flex" data-toggle="collapse" [attr.data-parent]="'#'+parent" [attr.aria-expanded]="layerGroup.get('open')" (click)="layerGroup.set('open', !!layerGroup.get('open') )">
......@@ -203,10 +211,12 @@
</div>
</label>
</div>
<span *ngIf="mode === 'Légende' && !layerGroup.get('isEmpty')" class="flex-grow-1 layergroupName"
[title]="layerGroup.get('name')">{{ layerGroup.get('name') }}</span>
<span
*ngIf="mode === 'Légende' && layerGroup.getLayers().getArray().length > 0 && layerGroup.get('visibleChecked')"
class="flex-grow-1 layergroupName" [title]="layerGroup.get('name')">{{ layerGroup.get('name') }}</span>
<div *ngIf="!!filterValue || mode === 'Légende'" class="layergroupbox-content" [ngbCollapse]="false">
<div *ngIf="(!!filterValue || mode === 'Légende') && layerGroup.get('visibleChecked')"
class="layergroupbox-content" [ngbCollapse]="false">
<ng-container *ngTemplateOutlet="subTreeLayerGroup"></ng-container>
</div>
......
projects/visualiseur-core/src/lib/layers-legend/layers-legend/layers-side/layers-side.component.spec.ts 0 → 100644
View file @ 0addde18
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LayersSideComponent } from './layers-side.component';
describe('LayersSideComponent', () => {
let component: LayersSideComponent;
let fixture: ComponentFixture<LayersSideComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LayersSideComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LayersSideComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
projects/visualiseur-core/src/lib/layers-legend/layers-legend/layers-side/layers-side.component.ts 0 → 100644
View file @ 0addde18
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'alk-layers-side',
templateUrl: './layers-side.component.html',
styleUrls: ['./layers-side.component.scss']
})
export class LayersSideComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
projects/visualiseur-core/src/lib/layers-legend/layers-legend/legend-side/legend-side.component.html 0 → 100644
View file @ 0addde18
<ng-container *ngFor="let baseLayer of rootLayerGroup.getLayers().getArray(); index as lG ">
<ng-container *ngIf="!!(baseLayer.getProdigeType() === 'LayerGroup')" [ngTemplateOutlet]="tLayerGroup"
[ngTemplateOutletContext]="{layerGroup: baseLayer, idx: lG, level: 1, path: '-0-'+lG+'-', parent: 'sidebar'}">
</ng-container>
<ng-container
*ngIf="!!( ['ImageLayer', 'TileLayer', 'VectorLayer', 'Cluster','VectorTileLayer' ].indexOf(baseLayer.getProdigeType()) !== -1 ) && !(baseLayer.get('baseLayer') === true) "
[ngTemplateOutlet]="tBaseLayer"
[ngTemplateOutletContext]="{baseLayer: baseLayer, idx: lG, level: 1, path: '-0-'+lG+'-', parent: 'sidebar', layerGroup: rootLayerGroup}">
</ng-container>
</ng-container>
<ng-template #tLayerGroup let-layerGroup="layerGroup" let-idx="idx" let-level="level" let-path="path"
let-parent="parent">
<!-- *ngIf="layerGroup.get('filterVisibility') !== false && ( mode !== 'Légende' || !layerGroup.get('isEmpty') ) " -->
<div class="layergroupbox" *ngIf="layerGroup.getLayers().getArray().length > 0 "
(mouseenter)="layerGroup.set('dragHover', true);"
(mouseleave)="layerGroup.set('dragHover', {read: null, static: true});">
<span *ngIf="layerGroup.getLayers().getArray().length > 0 && layerGroup.get('visibleChecked')"
class="flex-grow-1 layergroupName" [title]="layerGroup.get('name')">{{ layerGroup.get('name') }}</span>
<div *ngIf="layerGroup.get('visibleChecked')" class="layergroupbox-content" [ngbCollapse]="false">
<ng-container *ngTemplateOutlet="subTreeLayerGroup"></ng-container>
</div>
<ng-template #subTreeLayerGroup>
<ng-container *ngFor="let baseLayer of layerGroup.getLayers().getArray(); index as bL ">
<ng-container *ngIf="baseLayer.getProdigeType() === 'LayerGroup'" [ngTemplateOutlet]="tLayerGroup"
[ngTemplateOutletContext]="{layerGroup: baseLayer, idx: bL, level: level+1, path: path+bL+'-', parent: 'menu_'+path}">
</ng-container>
<ng-container
*ngIf="['ImageLayer', 'TileLayer', 'VectorLayer', 'Cluster', 'VectorTileLayer'].indexOf(baseLayer.getProdigeType()) !== -1 && !(baseLayer.get('baseLayer') === true)"
[ngTemplateOutlet]="tBaseLayer"
[ngTemplateOutletContext]="{baseLayer: baseLayer, idx: bL, level: level+1, path: path+bL+'-', parent: 'menu_'+path, layerGroup: layerGroup}">
</ng-container>
</ng-container>
</ng-template>
</div>
</ng-template>
<ng-template #tBaseLayer let-baseLayer="baseLayer" let-idx="idx" let-level="level" let-path="path" let-parent="parent"
let-layerGroup="layerGroup" let-imageLegend="">
<div *ngIf="baseLayer.get('legends') &&
baseLayer.get('visibleChecked') &&
baseLayer.get('visibleAtScale') &&
baseLayer.get('visibleAtExtent') &&
baseLayer.get('displayClass')" class="list-group-item showlegend d-flex justify-content-between"
[attr.data-parent]="'#'+ parent">
<ng-container *ngIf="baseLayer.get('legends') && baseLayer.get('legends').length">
<div class="w-100 d-flex">
<ng-container
*ngIf="baseLayer.get('legends') && baseLayer.get('legends').length == 1; then tOneClassOnly; else tMultiClass">
</ng-container>
<ng-template #tOneClassOnly>
<div class="legendItem">
<!-- Image légende placé avant le label pour les couches vecteurs -->
<img class="legendddd legendImg" alt="{{ baseLayer.get('legends')[0].label }}"
[src]="baseLayer.get('legends')[0].icon" />
<!-- Label de la couche -->
<span class="flex-grow-1" [title]="baseLayer.get('legends')[0].label">{{
baseLayer.get('legends')[0].label
}}</span>
</div>
</ng-template>
<ng-template #tMultiClass>
<div>
<!-- Label de la couche -->
<div class="flex-grow-1 mb-2">{{ baseLayer.get('name') }}</div>
<ng-container *ngFor="let legend of baseLayer.get('legends'); index as idxLegend">
<!-- Label de la couche -->
<div class="d-flex legendItem pl-2 mt-1">
<!-- Image légende placé avant le label pour les couches vecteurs -->
<img class="legendddd legendImg" [src]="legend.icon" alt="{{ legend.label }}" />
<span class="flex-grow-1" [title]="legend.label">
{{ legend.label }}
</span>
</div>
</ng-container>
</div>
</ng-template>
</div>
</ng-container>
</div>
</ng-template>
\ No newline at end of file
projects/visualiseur-core/src/lib/layers-legend/layers-legend/legend-side/legend-side.component.scss 0 → 100644
View file @ 0addde18
.list-group-item {
border-radius: 0;
background-color: #fff;
border: none;
/* white-space: nowrap; */
padding: 0.65rem 0.35rem 0.65rem 0.55rem;
font-size: 0.9rem;
.dropup .dropdown-toggle::after {
display: none !important;
}
.legendImg {
float: left;
margin-right: 7px;
max-height: 20px;
max-width: 30px;
}
.hidelegend {
display: none;
}
.legend {
height: 25px;
width: 45px;
margin-right: 9px;
}
.layer {
height: 25px;
width: 25px;
margin-right: 9px;
}
.form-check {
width: 100%;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
.form-check-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
label {
max-width: 100%;
overflow: visible;
// width: 0;
// white-space: nowrap;
}
}
.sidebar-dd-layer.dropdown {
position: absolute;
right: 0;
a.dropdown-toggle.dropdown-toggle {
background-color: rgba(255, 255, 255, 0.8);
padding: 5px;
border-radius: 100%;
}
}
.legendItem {
clear: both;
display: flex;
width: 95% !important;
span {
display: flex;
}
}
}
.list-group-item[aria-expanded="true"]::before,
.list-group-item[aria-expanded="false"]::before {
font-family: "font-ars";
display: inline;
text-align: left;
padding-right: 10px;
font-weight: bold;
text-align: center;
}
.list-group-item[aria-expanded="false"]::before {
content: "\e912";
}
.list-group-item[aria-expanded="true"]::before {
content: "\e922";
}
projects/visualiseur-core/src/lib/layers-legend/layers-legend/legend-side/legend-side.component.spec.ts 0 → 100644
View file @ 0addde18
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LegendSideComponent } from './legend-side.component';
describe('LegendSideComponent', () => {
let component: LegendSideComponent;
let fixture: ComponentFixture<LegendSideComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ LegendSideComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(LegendSideComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
projects/visualiseur-core/src/lib/layers-legend/layers-legend/legend-side/legend-side.component.ts 0 → 100644
View file @ 0addde18
import { Component, Input, OnInit } from "@angular/core";
import LayerGroup from "ol/layer/Group";
import { VisualiseurCoreService } from "../../../visualiseur-core.service";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Geometry } from "ol/geom";
@Component({
selector: "alk-legend-side",
templateUrl: "./legend-side.component.html",
styleUrls: ["./legend-side.component.scss"],
})
export class LegendSideComponent implements OnInit {
@Input() rootLayerGroup: LayerGroup;
@Input() filterValue: string;
@Input() screenMode: "mobile" | "desktop" = "desktop";
isLegendVisible = this.coreService.isApplicationInLiteMode;
constructor(public coreService: VisualiseurCoreService) {}
ngOnInit(): void {}
changeOpacity(
layer: VectorLayer<VectorSource<Geometry>>,
opacity: number
): void {
layer.setOpacity(opacity);
layer.changed();
}
}
projects/visualiseur-core/src/lib/visualiseur-core.module.ts
View file @ 0addde18
......@@ -91,6 +91,8 @@ import { ResultModalFicheComponent } from "./interrogating-results/result-modal-
import { ModalConfirmComponent } from "./modals/alert-confirm-prompt-modal/alert-confirm-prompt-modal.component";
import { SearchMpaModalComponent } from "./modals/search-mpa-modal/search-mpa-modal.component";
import { InterrogatingMailingModalComponent } from "./modals/interrogating-mailing-modal/interrogating-mailing-modal.component";
import { LayersSideComponent } from "./layers-legend/layers-legend/layers-side/layers-side.component";
import { LegendSideComponent } from "./layers-legend/layers-legend/legend-side/legend-side.component";
/* ========================= Other modules =========================*/
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
......@@ -193,6 +195,8 @@ import { NgMultiSelectDropDownModule } from "ng-multiselect-dropdown";
ResearchComponent,
InterrogatingMailingModalComponent,
GeolocationButtonComponent,
LayersSideComponent,
LegendSideComponent,
],
providers: [NgbActiveModal],
exports: [
......@@ -266,6 +270,8 @@ import { NgMultiSelectDropDownModule } from "ng-multiselect-dropdown";
ResearchComponent,
InterrogatingMailingModalComponent,
GeolocationButtonComponent,
LayersSideComponent,
LegendSideComponent,
],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
......
projects/visualiseur-core/src/public-api.ts
View file @ 0addde18
......@@ -79,6 +79,8 @@ export { PresetZoneSelectorComponent } from "./lib/modals/locating-preset-zones-
export { PresetZoneFirstSelectorComponent } from "./lib/modals/locating-preset-zones-modal/preset-zones-container/preset-zone-first-selector/preset-zone-first-selector.component";
export { ChoseServerComponent } from "./lib/modals/add-layer-modal/chose-server/chose-server.component";
export { GeolocationButtonComponent } from "./lib/map-tools/geolocation-button/geolocation-button.component";
export { LayersSideComponent } from "./lib/layers-legend/layers-legend/layers-side/layers-side.component";
export { LegendSideComponent } from "./lib/layers-legend/layers-legend/legend-side/legend-side.component";
export { Parser } from "./lib/parser-requetes-attributaires";
......
src/app/app.module.ts
View file @ 0addde18
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule, registerLocaleData } from '@angular/common';
import { RouterModule } from '@angular/router';
import { BrowserModule } from "@angular/platform-browser";
import {
CUSTOM_ELEMENTS_SCHEMA,
NgModule,
NO_ERRORS_SCHEMA,
} from "@angular/core";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { CommonModule, registerLocaleData } from "@angular/common";
import { RouterModule } from "@angular/router";
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeFr from "@angular/common/locales/fr";
import localeFrExtra from "@angular/common/locales/extra/fr";
// the second parameter 'fr' is optional
registerLocaleData(localeFr, 'fr-FR', localeFrExtra);
registerLocaleData(localeFr, "fr-FR", localeFrExtra);
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BootstrapComponent } from './bootstrap/bootstrap.component';
import { HttpClientModule, HttpClientJsonpModule } from '@angular/common/http';
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { BootstrapComponent } from "./bootstrap/bootstrap.component";
import { HttpClientModule, HttpClientJsonpModule } from "@angular/common/http";
import { DragulaModule } from 'ng2-dragula';
import { VisualiseurCoreModule } from '../../projects/visualiseur-core/src/lib/visualiseur-core.module';
import { MapModule } from '../../projects/visualiseur-core/src/lib/map/map.module';
import { DragulaModule } from "ng2-dragula";
import { VisualiseurCoreModule } from "../../projects/visualiseur-core/src/lib/visualiseur-core.module";
import { MapModule } from "../../projects/visualiseur-core/src/lib/map/map.module";
import { NavToolsService } from '../../projects/visualiseur-core/src/lib/services/nav-tools.service';
import { NavToolsService } from "../../projects/visualiseur-core/src/lib/services/nav-tools.service";
// Jquery
import { NotFoundComponent } from './not-found/not-found.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { UnauthorizedDisconnectedComponent } from './unauthorized-disconnected/unauthorized-disconnected.component';
import { EnvServiceProvider } from './env.service.provider';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NotFoundComponent } from "./not-found/not-found.component";
import { UnauthorizedComponent } from "./unauthorized/unauthorized.component";
import { UnauthorizedDisconnectedComponent } from "./unauthorized-disconnected/unauthorized-disconnected.component";
import { EnvServiceProvider } from "./env.service.provider";
import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
@NgModule({
declarations: [
......@@ -34,7 +38,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
BootstrapComponent,
NotFoundComponent,
UnauthorizedComponent,
UnauthorizedDisconnectedComponent
UnauthorizedDisconnectedComponent,
],
imports: [
BrowserModule,
......@@ -50,14 +54,8 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
CommonModule,
RouterModule,
],
providers: [
NavToolsService,
EnvServiceProvider
],
providers: [NavToolsService, EnvServiceProvider],
bootstrap: [BootstrapComponent],
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
]
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
export class AppModule { }
export class AppModule {}
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