Add layerswitcher
This commit is contained in:
Willem Dantuma
@@ -1,33 +1,36 @@
|
||||
<ng-template #rt let-r="result" let-t="term">
|
||||
<i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
|
||||
<ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight>
|
||||
</ng-template>
|
||||
|
||||
<div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
|
||||
<div class="card p-2">
|
||||
<form class="form" (ngSubmit)="handleSearch($event)">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
|
||||
<button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fa fa-remove"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
|
||||
<label class="form-check-label" for="filtercheck1">from <a (click)="handleOpenSelectPeriodModal($event)" href="#">{{startEndCaption}}</a></label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" (ngModelChange)="handleChangeEnableBBOXFilter($event)" [ngModel]="filterOptionsLocal.bboxFilter" name="bboxfilterEnabled" type="checkbox" value="" id="filtercheck2">
|
||||
<label class="form-check-label" for="filtercheck2">Restrict to visible area</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>
|
||||
<ng-template #rt let-r="result" let-t="term">
|
||||
<i class="fa fa-search" aria-hidden="true" style="width:2rem"></i>
|
||||
<ngb-highlight [result]="formatter(r)" [term]="t"></ngb-highlight>
|
||||
</ng-template>
|
||||
|
||||
<div class="map-search collapsed" [ngClass]="{'collapsed':collapsedLocal,searchcollapsed:searchMinifiedLocal}" (click)="$event.stopPropagation()">
|
||||
<div class="card p-2">
|
||||
<form class="form" (ngSubmit)="handleSearch($event)">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
|
||||
</div>
|
||||
<input #searchText class="form-control" type="text" (focus)="handleFocus($event)" [ngModel]="searchTextLocal" name="searchTextLocal" (ngModelChange)="handleChange($event)" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter" (selectItem)="handleSelect($event)" placeholder="Search" i18n-placeholder />
|
||||
<div class="input-group-append">
|
||||
<button type="submit" class="btn btn-outline-secondary" [disabled]="disabled"><i class="fa fa-search"></i></button>
|
||||
<button type="button" class="clear btn btn-outline-secondary" [disabled]="!clearEnabled" (click)="handleClearClick($event)"><i class="fa fa-remove"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="options">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" (ngModelChange)="handleChangeEnableDateFilter($event)" [ngModel]="dateFilter" name="datefilterEnabled" type="checkbox" value="" id="filtercheck1">
|
||||
<label class="form-check-label" for="filtercheck1">from <a (click)="handleOpenSelectPeriodModal($event)" href="#">{{startEndCaption}}</a></label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" (ngModelChange)="handleChangeEnableBBOXFilter($event)" [ngModel]="filterOptionsLocal.bboxFilter" name="bboxfilterEnabled" type="checkbox" value="" id="filtercheck2">
|
||||
<label class="form-check-label" for="filtercheck2">Restrict to visible area</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shortcuts">
|
||||
<router-outlet name="map-search"></router-outlet>
|
||||
</div>
|
||||
</form>
|
||||
<ng-content></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
<fm-map-select-period-modal [modalState]="openedModalName" (onCloseModal)="handleCloseModal()" (onSelect)="handleSelectPeriod($event)" [startDate]="startDate" [endDate]="endDate"></fm-map-select-period-modal>
|
||||
|
||||
@@ -1,94 +1,114 @@
|
||||
div.map-search {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
transition: opacity 0.5s ease-out, left 0.3s,max-height 0.3s ease-out,max-width 0.3s ease-out;
|
||||
max-height: 10rem;
|
||||
width: 21rem;
|
||||
max-width: 21rem;
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color:lighten(#000000,80%);
|
||||
}
|
||||
|
||||
:host ::ng-deep ngb-typeahead-window.dropdown-menu {
|
||||
width: 20rem;
|
||||
left:-2.5rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep button.dropdown-item {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
div.map-search input[type=text] {
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
div.map-search button {
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
div.map-search.collapsed {
|
||||
max-height:3.5rem;
|
||||
max-width:10rem;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed {
|
||||
max-height: 3.5rem;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
div.map-search div.options {
|
||||
padding-top: 0.5rem;
|
||||
line-height: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
max-height:4.5rem;
|
||||
}
|
||||
|
||||
div.map-search.collapsed div.options, div.map-search.searchcollapsed div.options {
|
||||
max-height: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
div.map-search button {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.map-search.collapsed input[type=text] {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed input[type=text] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.map-search.collapsed button.clear, div.map-search.collapsed button[type="submit"] {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed button[type="submit"] {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.options label {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
div.map-search {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
left: 0.5rem;
|
||||
transition: opacity 0.5s ease-out, left 0.3s,max-height 0.3s ease-out,max-width 0.3s ease-out;
|
||||
max-height: 10rem;
|
||||
min-width: calc(100vw - 1rem);
|
||||
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
|
||||
z-index:3;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
color:lighten(#000000,80%);
|
||||
}
|
||||
|
||||
:host ::ng-deep ngb-typeahead-window.dropdown-menu {
|
||||
width: 20rem;
|
||||
left:-2.5rem !important;
|
||||
}
|
||||
|
||||
:host ::ng-deep button.dropdown-item {
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
div.map-search input[type=text] {
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
div.map-search button {
|
||||
transition: width 0.3s ease-out;
|
||||
}
|
||||
|
||||
div.map-search.collapsed {
|
||||
max-height:3.5rem;
|
||||
max-width:10rem;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed {
|
||||
max-height: 3.5rem;
|
||||
max-width: 6rem;
|
||||
}
|
||||
|
||||
div.map-search div.options {
|
||||
padding-top: 0.5rem;
|
||||
line-height: 1.5rem;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
max-height:4.5rem;
|
||||
}
|
||||
|
||||
div.map-search div.shortcuts {
|
||||
padding-top: 0.5rem;
|
||||
line-height: 1.5rem;
|
||||
overflow: hidden;
|
||||
max-height: 50vh;
|
||||
transition: max-height 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
div.map-search.collapsed div.options, div.map-search.searchcollapsed div.options {
|
||||
max-height: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
div.map-search.collapsed div.shortcuts, div.map-search.searchcollapsed div.shortcuts {
|
||||
max-height: 0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
div.map-search button {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div.map-search.collapsed input[type=text] {
|
||||
border-top-right-radius: 0.25rem;
|
||||
border-bottom-right-radius: 0.25rem;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed input[type=text] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.map-search.collapsed button.clear, div.map-search.collapsed button[type="submit"] {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
border-color:transparent;
|
||||
}
|
||||
|
||||
div.map-search.searchcollapsed button[type="submit"] {
|
||||
width: 0;
|
||||
padding: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.options label {
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
@media screen and (min-width:44rem) {
|
||||
div.map-search {
|
||||
width: 21rem;
|
||||
max-width: 21rem;
|
||||
min-width:0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user