projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts

@@ -19,20 +19,10 @@ export class SelectedItemContainerComponent {
   @ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective; 
 
   loadComponent() {
-    let componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
-    let firstComponentWithTypeAndTask = this.selectedItemComponents
-      .find(value => value['forSourceTask'] == this.item.sourceTask &&
-        value['forItemType'] == this.item.itemType
-      );
-
-    if (firstComponentWithTypeAndTask) {
-      componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithTypeAndTask['constructor'] as any);
-    } else {
-      let firstComponentWithType = this.selectedItemComponents
-        .find(value => value['forItemType'] == this.item.itemType);
-
-      if (firstComponentWithType) {
-        componentFactory = this.componentFactoryResolver.resolveComponentFactory(firstComponentWithType['constructor'] as any);
+    var componentFactory: ComponentFactory<AbstractSelectedItemComponent> = this.componentFactoryResolver.resolveComponentFactory(SelectedItemComponent); // default
+    for (var i = 0; i < this.selectedItemComponents.length; i++) {
+      if (this.selectedItemComponents[i]['forItemType'] == this.item.itemType) {
+        componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.selectedItemComponents[i]['constructor'] as any);
       }
     }    
     const viewContainerRef = this.widgetHost.viewContainerRef;

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html

@@ -3,15 +3,11 @@
   <div class="card border-0">
     <div class="card-body">
       <div><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <div class="card menu-card">
-        <h1>Cropfield</h1>
-        <h4>{{item.name}}</h4>
-        <div>{{item.data.cropTypeName}}</div>
-        <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
-        <ul class="p-0 mt-2">
-          <li><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-        </ul>
-      </div>
+      <h4>Cropfield</h4>
+      <h1>{{item.name}}</h1>
+      <div>{{item.data.cropTypeName}}</div>
+      <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
+      <div class="mt-1"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></div>
     </div>
     <fm-map-item-list [items]="(items|async)"></fm-map-item-list>
     <fm-map-item-widget-list [item]="item"></fm-map-item-widget-list>

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.scss

@@ -1,7 +1,5 @@
-@import "../../../app/theme.scss";
-@import "node_modules/bootstrap/scss/functions";
-@import "node_modules/bootstrap/scss/variables";
-@import "node_modules/bootstrap/scss/mixins";
+@import "../../_theme.scss";
+@import "~bootstrap/scss/bootstrap.scss";
 
 .big-icon {
   width: 100%;
@@ -15,10 +13,6 @@
   font-size: 1rem;
 }
 
-.card-body {
-  padding-bottom: unset;
-}
-
 .spacer {
   display: none;
   height: 4rem;
@@ -29,11 +23,3 @@
     display: block;
   }
 }
-
-.menu-card {
-  margin-left: -7px;
-  padding-left: 7px;
-  margin-right: -7px;
-  padding-right: 7px;
-  margin-bottom: 7px;
-}

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.html

@@ -3,26 +3,20 @@
   <div class="card border-0">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
-      <div class="card menu-card">
-        <h1>{{item.name}}</h1>
-      </div>
+      <h1>{{item.name}}</h1>
       <div class="legend-container" *ngIf="item?.data.layers;let layers">
-        <div class="card menu-card">
-          <div *ngIf="layers.length>1">
-            <select (change)="onLayerChanged($event.target.value)">
-              <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
-            </select>
-          </div>
-          <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
+        <div *ngIf="layers.length>1">
+          <select (change)="onLayerChanged($event.target.value)">
+            <option *ngFor="let l of layers;" [value]="l.index">{{l.name}}</option>
+          </select>
         </div>
+        <fm-map-layer-legend [showTitle]="layers.length==1" [layer]="layers[selectedLayer]" [histogramenabled]="false" histogramunit="ha"></fm-map-layer-legend>
       </div>
-      <div class="card menu-card">
-        <ul class="p-0 mt-2">
-          <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
-          <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
-          <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
-        </ul>
-      </div>
+      <ul class="p-0 mt-2">
+        <!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
+        <li><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
+        <li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item,selectedLayer)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
+      </ul>      
     </div>   
   </div>
-</div>
+ </div>

projects/common-map/src/fm-map/components/selected-item-shape/selected-item-shape.component.scss

@@ -39,11 +39,3 @@ li {
     display: block;
   }
 }
-
-.menu-card {
-  margin-left: -7px;
-  padding-left: 7px;
-  margin-right: -7px;
-  padding-right: 7px;
-  margin-bottom: 7px;
-}

projects/common-map/src/fm-map/components/selected-item/selected-item.component.html

@@ -4,8 +4,6 @@
     <div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
       <i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
     </div>
-  </div>
-  <div class="card">
     <div class="card-body">
       <div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
       <h1 class="card-title">{{item.name}}</h1>
@@ -15,4 +13,4 @@
       <a *ngIf="itemTypeService.isLayer(item)" href="#" (click)="handleAddAsLayer(item)" class="btn btn-outline-secondary" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a>
     </div>
   </div>
-</div>
+ </div>