[plugins-functionality | WIP ] Plugins change background when preview in admin

claims/claim-utils/displayClaims/displayClaims.component.html

@@ -56,57 +56,76 @@
           <div *ngIf="claims && claims.length == 0"  class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
             <div>No links found</div>
           </div>
-          <ul class="uk-margin-small-top uk-list uk-list-xlarge">
-            <li *ngFor="let claim of claims;  let i=index" class="uk-card uk-card-default">
-              <div class="uk-card-body">
-                <div class="uk-grid uk-grid-small" uk-grid>
-                  <div class="uk-width-expand">
-                    <div class="uk-margin-bottom">
-                      <claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
-                                    [externalPortalUrl]=externalPortalUrl [source]="true" [linkAvailable]="isClaimAvailable(claim)"></claim-entity>
-                    </div>
-                    <div class="uk-margin-bottom">
-                      <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-success"
-                            [attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
-                      <ng-template #notAvailable>
-                        <span class="uk-label uk-label-danger"
-                            [attr.uk-tooltip]="'title:The link information  will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
-                      </ng-template>
-                    </div>
-                    <div class="uk-text-small">
-                      <div *ngIf="showUserEmail" class="uk-margin-small-bottom">
-                        <span class="uk-text-meta">Claimed by:</span>
-                        <span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
+          <ng-container *ngIf="claims && claims.length > 0">
+
+            <div class="uk-flex uk-flex-middle uk-margin-top uk-margin-small-bottom uk-padding-small uk-padding-remove-horizontal">
+              <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                <label>
+                  <input id="checkAll" type="checkbox" (click)="selectAll($event)" class="uk-checkbox" title="Select All"
+                    [ngModel]="selected.length == claims.length"/>
+                </label>
+              </div>
+              <button class="uk-button uk-button-link" [class.uk-disabled]="selected.length == 0" [disabled]="selected.length == 0"
+                (click)="deleteOpen()">
+                <span>Delete ({{selected.length}})</span>
+              </button>
+            </div>
+
+            <ul class="uk-margin-small-top uk-list uk-list-striped">
+              <li *ngFor="let claim of claims;  let i=index" class="uk-flex uk-flex-middle uk-padding-small uk-padding-remove-horizontal">
+                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                  <input type="checkbox" class="uk-checkbox"
+                    [id]="claim.id" (click)="selectClaim(claim, $event)" [ngModel]="isSelectedClaim(claim.id)">
+                </div>
+                <div class="uk-width-expand">
+                  <div class="uk-grid uk-grid-small uk-flex-middle" uk-grid>
+                    <div class="uk-width-expand">
+                      <div class="uk-margin-small-bottom">
+                        <claim-entity [entity]="claim.target" [type]="claim.targetType" [properties]=properties
+                                      [externalPortalUrl]=externalPortalUrl [source]="true" [linkAvailable]="isClaimAvailable(claim)"></claim-entity>
                       </div>
-                      <div>
-                        <span class="uk-text-meta">Claimed date:</span>
-                        <span class="uk-margin-xsmall-left">{{claim.date}}</span>
+                      <div class="uk-margin-small-bottom">
+                        <span *ngIf="isClaimAvailable(claim) else notAvailable" class="uk-label uk-label-small uk-label-success"
+                              [attr.uk-tooltip]="'title: The link information is available in the portal and the APIs.'">available</span>
+                        <ng-template #notAvailable>
+                          <span class="uk-label uk-label-small uk-label-danger"
+                              [attr.uk-tooltip]="'title:The link information  will be added in the portal and the APIs in the next content provision workflow.'">pending</span>
+                        </ng-template>
+                      </div>
+                      <div class="uk-text-small">
+                        <div *ngIf="showUserEmail" class="uk-margin-xsmall-bottom">
+                          <span class="uk-text-meta">Claimed by:</span>
+                          <span class="uk-margin-xsmall-left">{{claim.userMail}}</span>
+                        </div>
+                        <div>
+                          <span class="uk-text-meta">Claimed date:</span>
+                          <span class="uk-margin-xsmall-left">{{claim.date}}</span>
+                        </div>
                       </div>
                     </div>
-                  </div>
-                  <div class="uk-visible@m">
-                    <div class="claim-divider">
-                      <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
+                    <div class="uk-visible@m">
+                      <div class="claim-divider">
+                        <icon class="uk-position-center" name="link" customClass="uk-text-primary" ratio="2" [flex]="true"></icon>
+                      </div>
+                    </div>
+                    <div class="uk-width-1-2@m uk-width-1-1">
+                      <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
+                                    [externalPortalUrl]=externalPortalUrl></claim-entity>
                     </div>
-                  </div>
-                  <div class="uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-column uk-flex-center">
-                    <claim-entity [entity]="claim.source" [type]="claim.sourceType" [source]="false" [properties]=properties
-                                  [externalPortalUrl]=externalPortalUrl></claim-entity>
                   </div>
                 </div>
-              </div>
-              <div class="uk-card-footer uk-flex uk-flex-right">
-                <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
-                  <icon name="delete" [flex]="true"></icon>
-                  <span class="uk-margin-xsmall-left">Delete</span>
-                </button>
-              </div>
-            </li>
-          </ul>
-          <div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
-            <paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
-                            (pageChange)="pageChange($event)"></paging-no-load>
-          </div>
+                <div class="uk-width-xsmall uk-flex uk-flex-center uk-flex-middle">
+                  <button class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="deleteOpen(i)">
+                    <icon name="delete" [flex]="true"></icon>
+                  </button>
+                </div>
+              </li>
+            </ul>
+            <div class="uk-margin-medium-top uk-flex uk-flex-center uk-flex-right@m">
+              <paging-no-load *ngIf="resultsNum" [currentPage]="page" [totalResults]="resultsNum" [size]="size"
+                              (pageChange)="pageChange($event)"></paging-no-load>
+            </div>
+          </ng-container>
         </div>
       </div>
     </div>

claims/claim-utils/displayClaims/displayClaims.component.less

@@ -4,14 +4,4 @@
   position: relative;
   padding: 0 20px;
   height: 100%;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    right: 0;
-    bottom: 0;
-    border-left: @global-border-width solid @global-border;
-  }
 }

claims/claim-utils/displayClaims/displayClaims.component.ts

@@ -52,6 +52,7 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   lastIndexDate = null;
   public filterForm: FormGroup;
   public entities: string[] = [];
+  selected = [];
   
   allOptions: Option[] = [
     {label: OpenaireEntities.PUBLICATIONS, value: "publication"},
@@ -310,23 +311,34 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
   }
   
   isSelected(value: string) {
-    return this.filterForm && this.filterForm.get('entities').value.find(entity => entity === value)
+    return this.filterForm && this.filterForm.get('entities').value.find(entity => entity === value);
   }
   
-  deleteOpen(index: number) {
+  deleteOpen(index: number = null) {
     this.index = index;
     this.deleteModal.alertTitle = 'Delete Confirmation';
-    this.deleteModal.message = 'Are you sure you want to delete this link?';
+    this.deleteModal.message = 'Are you sure you want to delete ' + (this.index != null ? '1' : this.selected.length) + ' link(s)?';
     this.deleteModal.okButtonText = 'Yes';
     this.deleteModal.open();
   }
   
   delete() {
-    this.subscriptions.push(this._claimService.deleteBulk([this.claims[this.index].id], this.properties.claimsAPIURL).subscribe(
+    let claimsToBeDeleted = ((this.index != null) ? [this.claims[this.index].id] : this.selected.map(claim => claim.id));
+    console.log(claimsToBeDeleted);
+    this.subscriptions.push(this._claimService.deleteBulk(claimsToBeDeleted, this.properties.claimsAPIURL).subscribe(
       res => {
-        this.claims.splice(this.index, 1);
-        this.resultsNum = this.resultsNum - 1;
-        NotificationHandler.rise('Link has been deleted successfully');
+        if (this.index != null) {
+          this.claims.splice(this.index, 1);
+          this.resultsNum = this.resultsNum - 1;
+          NotificationHandler.rise('Link has been deleted successfully');
+        } else {
+          claimsToBeDeleted.forEach(claimId => {
+            this.claims.splice(this.claims.findIndex((id) => id == claimId), 1);
+          });
+          this.resultsNum = this.resultsNum - claimsToBeDeleted.length;
+          NotificationHandler.rise(claimsToBeDeleted.length + ' links have been deleted successfully');
+        }
+        this.selected = [];
         let goToPage = this.page;
         if (this.totalPages(this.resultsNum) < this.page && this.page > 0) {
           goToPage = this.page - 1;
@@ -334,7 +346,8 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
         this.goTo(goToPage);
       }, err => {
         this.handleErrors(err, "Error deleting claim with id: " + this.claims[this.index].id);
-      }));
+      }
+    ));
   }
   
   pageChange($event) {
@@ -362,7 +375,44 @@ export class DisplayClaimsComponent implements OnInit, OnDestroy {
     }
     return totalPages;
   }
-  
+
+  selectClaim(item: any, event) {
+    let value = event.currentTarget.checked;
+    if (value) {
+      this.selected.push(item);
+    } else {
+      for (var _i = 0; _i < this.selected.length; _i++) {
+        let claim = this.selected[_i];
+        if (claim['id'] == item.id) {
+          this.selected.splice(_i, 1);
+        }
+      }
+    }
+  }
+
+  selectAll(event) {
+    let value = event.currentTarget.checked;
+    if (value) {
+      this.selected = [];
+      for (let _i = 0; _i < this.claims.length; _i++) {
+        let claim = this.claims[_i];
+        this.selected.push(claim);
+      }
+    } else {
+      this.selected = [];
+    }
+  }
+
+  isSelectedClaim(id: string) {
+    for (let _i = 0; _i < this.selected.length; _i++) {
+      let claim = this.selected[_i];
+      if (claim['id'] == id) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   private updateDescription(description: string) {
     this._meta.updateTag({content: description}, "name='description'");
     this._meta.updateTag({content: description}, "property='og:description'");

claims/claim-utils/entityFormatter/claimEntityFormatter.component.ts

@@ -15,21 +15,22 @@ import {StringUtils} from "../../../utils/string-utils.class";
       <div *ngIf="source" class="uk-text-small">
         {{getEntityName(type)}}
       </div>
-      <div class="uk-flex">
-        <span *ngIf="!source" class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
+      <div>
+        <span *ngIf="!source" class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
         <publication-title [entity]="entity" param="id"
                            path="/search/result" [externalPortalUrl]=externalPortalUrl [linkAvailable]="linkAvailable"></publication-title>
       </div>
     </div>
-    <div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)"
-         class="uk-flex">
-      <span class="uk-text-meta uk-margin-small-right uk-text-large uk-text-nowrap">Link to:</span>
+    <div *ngIf="type == 'project'" [attr.uk-tooptip]="getEntityName(type)">
+      <span class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
       <project-title [project]="entity" [searchLink]=properties.searchLinkToProject
                      [externalPortalUrl]=externalPortalUrl></project-title>
     </div>
-    <div *ngIf="type == 'context'" class="uk-flex uk-text-large">
-      <span class="uk-text-meta uk-margin-small-right uk-text-nowrap">Link to:</span>
-      <span class="uk-text-truncate" uk-tooltip="Concept">{{entity.title}}</span>
+    <div *ngIf="type == 'context'">
+      <span class="uk-text-meta uk-text-small uk-margin-small-right uk-text-nowrap">Link to:</span>
+      <h6 class="uk-h6 uk-margin-remove">
+        <span class="uk-text-truncate" uk-tooltip="Concept">{{entity.title}}</span>
+      </h6>
     </div>
   `
 })

claims/claim-utils/entityFormatter/projectTitleFormatter.component.ts

@@ -20,7 +20,7 @@ import {properties} from "../../../../../environments/environment";
       </h6>
     </ng-container>
     <span *ngIf="project['funderName']" class="uk-margin-small-top">
-      <span class="uk-text-muted">Funder: </span>{{project['funderName']}}
+      <span class="uk-text-meta">Funder: </span>{{project['funderName']}}
     </span>
   `
 })

dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html

@@ -1,4 +1,4 @@
-<div *ngIf="!community " class="uk-text-muted uk-text-center">
+<div *ngIf="!community " class="uk-text-meta uk-text-center">
   No community info available
 </div>
 <div class="uk-section uk-container ">
@@ -64,8 +64,9 @@
 
     </div>
     <div>
-      <div class="heroBackground generalSearchForm  uk-border-rounded uk-padding uk-margin-medium-bottom">
-        <!--      <img class="plugin-background" src="assets/common-assets/connect_image_faded.png">-->
+      <div class="heroBackground generalSearchForm  uk-border-rounded uk-padding uk-margin-medium-bottom"
+           [class.uk-light]="!this.fontsDarkMode"
+      [style]="style">
         <div class="plugin-content">
           <div class="uk-text-lead uk-text-large uk-text-bold uk-margin-bottom">
             {{  pluginObject.title}}
@@ -96,7 +97,7 @@
                [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
               <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
-                    [customClass]="'uk-text-muted'"></icon>
+                    [customClass]="'uk-text-meta'"></icon>
             </a>
           </span>
                 </div>
@@ -115,7 +116,7 @@
                [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
               <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
-                    [customClass]="'uk-text-muted'"></icon>
+                    [customClass]="'uk-text-meta'"></icon>
             </a>
           </span>
                 </div>
@@ -134,7 +135,7 @@
                [attr.uk-tooltip]="'pos: bottom-right; delay: 10;'"
                class="uk-link-reset uk-margin-xsmall-left" [class.uk-disabled] =previewInAdmin>
               <icon [name]="'help_outline'" [type]="'outlined'" [ratio]="0.8" [flex]="true"
-                    [customClass]="'uk-text-muted'"></icon>
+                    [customClass]="'uk-text-meta'"></icon>
             </a>
           </span>
                 </div>

dashboard/plugins/components/gateway-information/plugin-gateway-information.component.ts

@@ -12,7 +12,7 @@ import {HttpClient} from "@angular/common/http";
 import {Filter} from "../../../../searchPages/searchUtils/searchHelperClasses.class";
 import {Router} from "@angular/router";
 import {SearchResearchResultsService} from "../../../../services/searchResearchResults.service";
-import {properties} from "../../../../../../environments/environment";
+import {CustomizationService} from "../../../../services/customization.service";
 
 export class PluginGatewayInformation extends PluginBaseInfo{
   showTitle:boolean = true;
@@ -36,7 +36,6 @@ export class PluginGatewayInformation extends PluginBaseInfo{
 
   compare(oldObject): any {
     let newObj=   super.compare(oldObject);
-    console.log("PluginGatewayInformation", oldObject, newObj)
     return newObj;
   }
 }
@@ -103,8 +102,8 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
               private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
               private zenodoCommunitiesService: ZenodoCommunitiesService, private _router: Router,
               private _searchResearchResultsService: SearchResearchResultsService,
-              private cdr: ChangeDetectorRef) {
-  super();
+              private cdr: ChangeDetectorRef, protected layoutService: CustomizationService) {
+    super();
     this.searchLinkToResults = this.properties.searchLinkToResults;
     this.searchLinkToProjects = this.properties.searchLinkToProjects;
     this.searchLinkToDataProviders = this.properties.searchLinkToDataProviders;
@@ -182,7 +181,11 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
 
   }
 
-
+  ngOnInit() {
+    if (this.community) {
+      this.getLayout(this.community.communityId);
+    }
+  }
   isEntityEnabled(entity: string) {
     return this.portal.entities.some(x => x['pid'] == entity && x['isEnabled'] === true);
   }

dashboard/plugins/components/gateway-information/plugin-gateway-information.form.component.ts

@@ -15,7 +15,7 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
       <div class="uk-margin-top uk-text-meta uk-text-xsmall ">
         Community info
       </div>
-      <div class="uk-alert uk-alert-warning uk-text-small"> Manage community info  <a routerLink="../../info/profile" target="_blank">here</a>.</div>
+      
       <div class="uk-grid uk-child-width-1-1 uk-text-small  uk-hr ">
         <div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
           <plugin-field-edit [value]=" pluginObject.showTitle"
@@ -89,6 +89,7 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
           </plugin-field-edit>
           Subjects
         </div>
+        <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall  uk-margin-medium-left "> Manage community info  <a routerLink="../../info/profile" target="_blank">here</a>.</div>
         <div class="uk-margin-top uk-text-meta uk-text-xsmall">
           Pages & menus
         </div>
@@ -146,8 +147,12 @@ import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
         </div>
       </div>
       
-      <div class="uk-alert uk-alert-warning uk-text-small"> If some information is enabled here, 
-        but still not visible, please check related <a routerLink="../entities" target="_blank">entity</a> or <a routerLink="../pages" target="_blank">page</a>.</div>
+      <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall"> If some information is enabled here, 
+        but still not visible, please check related <a routerLink="../entities" target="_blank">entity</a> or <a routerLink="../pages" target="_blank">page</a>.
+      </div>
+      <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall">
+        Change the custom section background options  <a routerLink="../../customize-layout" target="_blank"> here.</a>
+      </div>
     </div>
   `,
 

dashboard/plugins/components/gateway-information/plugin-gateway-information.module.ts

@@ -17,11 +17,12 @@ import {AdvancedSearchInputModule} from "../../../../sharedComponents/advanced-s
 import {EntitiesSelectionModule} from "../../../../searchPages/searchUtils/entitiesSelection.module";
 import {QuickSelectionsModule} from "../../../../searchPages/searchUtils/quick-selections.module";
 import {InputModule} from "../../../../sharedComponents/input/input.module";
+import {CustomizationServiceModule} from "../../../../services/customizationService.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule,
-    CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule
+    CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule, CustomizationServiceModule
   ],
   providers: [
     PluginsService, SearchCommunityProjectsService, SearchCommunityDataprovidersService, ZenodoCommunitiesService

dashboard/plugins/components/graph-info/plugin-graph-info.component.html

@@ -6,9 +6,7 @@
           <div>
             <div style="max-width: 550px;">
               <h2>{{pluginObject.title}}</h2>
-              <div class="">
-                {{pluginObject.paragraph1}}
-
+              <div class="" [innerHTML]="pluginObject.paragraph1">
               </div>
             </div>
           </div>
@@ -22,9 +20,7 @@
   <div class="uk-section uk-padding-remove-top">
     <div class="uk-container">
       <div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
-        <div>
-          {{pluginObject.paragraph2}}
-        </div>
+        <div [innerHTML]="pluginObject.paragraph2"></div>
 
         <div class="uk-margin-top">
           <a [href]="pluginObject.url.url" [target]="pluginObject.url.target"

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm  ">
+<div *ngIf="pluginObject" #parent class="heroBackground generalSearchForm  " [class.uk-light]="!this.fontsDarkMode"
+     [style]="style">
   <div class="uk-section uk-container  ">
     <div class="uk-width-1-1 uk-margin-medium-bottom">
       <h2 class="uk-margin-remove-top uk-text-center ">

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts

@@ -2,6 +2,8 @@ import {Component} from '@angular/core';
 import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
 import {OpenaireEntities} from "../../../../utils/properties/searchFields";
 import {properties} from "../../../../../../environments/environment";
+import {CustomizationService} from "../../../../services/customization.service";
+import {CommunityService} from "../../../../connect/community/community.service";
 export class PluginSearchDepositLink extends PluginBaseInfo{
   title:string ="Search, link and deposit your research in one place";
   cardInfoArray: PluginInfoCards[] = [
@@ -22,7 +24,6 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
 
   compare(oldObject): any {
     let newObj=   super.compare(oldObject);
-    console.log("PluginSearchDepositLink", oldObject, newObj)
     return newObj;
   }
 }
@@ -34,9 +35,16 @@ export class PluginSearchDepositLink extends PluginBaseInfo{
 export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{
   entities= OpenaireEntities;
 
-  constructor() {
+  constructor(private communityService: CommunityService,  protected layoutService: CustomizationService) {
     super()
   }
+  ngOnInit() {
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+      community => {
+        this.getLayout(community.communityId);
+
+      }));
+  }
 
   get activeCards(){
     return this.pluginObject.cardInfoArray.filter( card => card.show);

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts

@@ -32,6 +32,9 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
           </div>
 
         </ng-container>
+        <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall">
+          Change the custom section background options  <a routerLink="../../customize-layout" target="_blank"> here.</a>
+        </div>
       </ng-container>
       <ng-container *ngIf="selectedIndex > -1">
         <div *ngIf="editTemplate" class="back uk-margin-bottom">

dashboard/plugins/utils/base-plugin.component.ts

@@ -4,20 +4,24 @@ import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
 import {EnvProperties} from "../../../utils/properties/env-properties";
 import {properties} from 'src/environments/environment';
 import {Subscriber} from "rxjs";
+import {CustomizationOptions, Layout} from "../../../connect/community/CustomizationOptions";
+import {CustomizationService} from "../../../services/customization.service";
 
 export class PluginBaseInfo {
   title: string = "Lorem ipsum";
+
   constructor() {
   }
-  compare(oldObject){
-    if(!oldObject) {
+
+  compare(oldObject) {
+    if (!oldObject) {
       oldObject = Object.assign(this)
-    }else{
+    } else {
       for (let attrKey of Object.keys(this)) {
         if (!oldObject[attrKey] && oldObject[attrKey] != false) {
-          if(typeof this[attrKey] === "string" || typeof this[attrKey] === "boolean"  ){
+          if (typeof this[attrKey] === "string" || typeof this[attrKey] === "boolean") {
             oldObject[attrKey] = this[attrKey];
-          }else {
+          } else {
             oldObject[attrKey] = Object.assign(this[attrKey])
           }
         }
@@ -26,12 +30,14 @@ export class PluginBaseInfo {
     return oldObject;
   }
 }
+
 export class PluginURL {
-  url:string;
+  url: string;
   linkText: string;
-  target:string;
-  route:boolean;
-  constructor(url,linkText, target = "_blank",route = false) {
+  target: string;
+  route: boolean;
+
+  constructor(url, linkText, target = "_blank", route = false) {
     this.url = url;
     this.linkText = linkText;
     this.target = target;
@@ -40,29 +46,35 @@ export class PluginURL {
 
 }
 
-export class PluginInfoCards{
-  tag?:string;
-  title:string;
-  description:string;
-  urlsArray:PluginURL[];
-  image?:string;
-  show:boolean;
+export class PluginInfoCards {
+  tag?: string;
+  title: string;
+  description: string;
+  urlsArray: PluginURL[];
+  image?: string;
+  show: boolean;
 }
-@Directive()
- export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements  OnDestroy {
-  public properties: EnvProperties = properties;
-  @Input() plugin:Plugin;
-  @Input() pluginTemplate:PluginTemplate;
-  @Input() pluginObject:T;
-  @Input() previewInAdmin:boolean = false;
-  subscriptions = [];
-  constructor() {
 
+@Directive()
+export abstract class PluginBaseComponent<T extends PluginBaseInfo> implements OnDestroy {
+  public properties: EnvProperties = properties;
+  @Input() plugin: Plugin;
+  @Input() pluginTemplate: PluginTemplate;
+  @Input() pluginObject: T;
+  @Input() previewInAdmin: boolean = false;
+  subscriptions = [];
+
+  customizationOptions: CustomizationOptions;
+  style:string ='';
+  fontsDarkMode:boolean = true;
+  protected layoutService: CustomizationService
+  constructor( ) {
   }
+
   ngOnInit(): void {
   }
 
-    ngOnDestroy() {
+  ngOnDestroy() {
     this.subscriptions.forEach(subscription => {
       if (subscription instanceof Subscriber) {
         subscription.unsubscribe()
@@ -76,9 +88,30 @@ export class PluginInfoCards{
     });
   }
 
-  isVisible(field){
+  isVisible(field) {
     return (this.plugin && this.pluginObject && this.pluginObject[field] == true) /*  plugin is on anyway */
-      || (!this.plugin &&  this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true)  /* template is on */
+      || (!this.plugin && this.pluginTemplate && this.pluginObject && this.pluginObject[field] == true)  /* template is on */
   }
 
+  getLayout(communityId) {
+    if (this.previewInAdmin) {
+      let defaultCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
+      this.subscriptions.push(this.layoutService.getLayout(this.properties, communityId).subscribe(layout => {
+        layout = (layout ? layout : new Layout(communityId, defaultCustomizationOptions));
+        this.customizationOptions = (layout ? CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions, communityId) : Object.assign({}, defaultCustomizationOptions));
+        this.setStyle()
+      }, error => {
+        this.customizationOptions = defaultCustomizationOptions;
+        this.setStyle();
+      }));
+    }
+  }
+
+  setStyle() {
+    this.style = `background-color: ` + this.customizationOptions.backgrounds.form.color + `;
+      background-image: ` + (this.customizationOptions.backgrounds.form.imageFile ? (Layout.getUrl(properties.utilsService + '/download/' + this.customizationOptions.backgrounds.form.imageFile)) : 'none') + `;
+    background-position:` + this.customizationOptions.backgrounds.form.position + `;`
+    this.fontsDarkMode = this.customizationOptions.backgrounds.form.fontsDarkMode;
+
+  }
 }

services/customizationService.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CustomizationService} from "./customization.service";
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [],
+  providers: [
+    CustomizationService
+  ],
+  exports: []
+})
+export class CustomizationServiceModule {
+}

sharedComponents/menu.ts

@@ -23,10 +23,11 @@ export class MenuItem {
   isFeatured: boolean;
   isActive: boolean;
   target: string = "_blank";
+  badge?: string = ""; // used only for RDGraph portal (FAIRCORE4EOSC)
 
   constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[],
               routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null,
-              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = []) {
+              target: string = "_blank", type: string = "internal", isFeatured: boolean = false, items: MenuItem[] = [], badge: string = "") {
     this._id = id;
     this.title = title;
     this.url = url;
@@ -43,6 +44,7 @@ export class MenuItem {
     this.target = target;
     this.type = type;
     this.isFeatured = isFeatured;
+    this.badge = badge;
   }
 
   public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string = ""): boolean {

sharedComponents/navigationBar.component.html

@@ -41,7 +41,9 @@
                   <a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [queryParams]="menu.params"
-                     [fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
+                     [fragment]="menu.fragment">
+                    <span *ngIf="menu.badge" style="position: relative"><span class="badge-mobile">{{menu.badge}}</span></span>
+                    {{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
                   <a *ngIf="menu.url"
                      (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [href]="menu.items.length === 0?menu.url:null"
@@ -215,7 +217,9 @@
                       <a *ngIf="menu.route.length == 0 && menu.url.length > 0"
                          href="{{menu.url}}" target="{{menu.target}}"
                          [class.custom-external]="menu.target != '_self'">{{menu.title}}</a>
-                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">{{menu.title}}</a>
+                      <a *ngIf="(menu.route.length == 0 && menu.url.length == 0) || ( menu.route.length >0 && menu.routeRequired && !isEnabled([menu.route], showPage) && isAtleastOneEnabled(menu.routeRequired, showPage))">
+                        <span *ngIf="menu.badge" class="badge">{{menu.badge}}</span>
+                        {{menu.title}}</a>
                       <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto">
                         <!-- Do not delete this div, because it will remove the margin bottom of navbar -->
                         <div>

sharedComponents/tabs/slider-tabs.component.ts

@@ -6,11 +6,14 @@ import {
   ElementRef, EventEmitter,
   Input, OnDestroy, Output,
   QueryList,
-  ViewChild
+  ViewChild,
+  Inject,
+  PLATFORM_ID
 } from "@angular/core";
 import {SliderTabComponent} from "./slider-tab.component";
 import {ActivatedRoute, Router} from "@angular/router";
 import {Subscription} from "rxjs";
+import {isPlatformServer} from "@angular/common";
 import Timeout = NodeJS.Timeout;
 
 declare var UIkit;
@@ -20,7 +23,7 @@ declare var UIkit;
   template: `
     <div #sliderElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
          [ngClass]="customClass">
-      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'">
+      <div [class.uk-slider-container-tabs]="position === 'horizontal'" [class.uk-border-bottom]="border && position === 'horizontal'" [ngClass]="containerClass">
         <ul #tabsElement [class.uk-flex-nowrap]="position === 'horizontal'"
             [class.uk-slider-items]="position === 'horizontal'"
             [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
@@ -78,8 +81,10 @@ declare var UIkit;
           </ng-container>
         </ul>
       </div>
-      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
-      <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
+      <ng-container *ngIf="!isServer">
+        <slider-arrow *ngIf="position === 'horizontal' && arrows" type="previous"></slider-arrow>
+        <slider-arrow *ngIf="position === 'horizontal' && arrows" type="next"></slider-arrow>
+      </ng-container>
     </div>
   `,
 })
@@ -112,6 +117,11 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
    * */
   @Input()
   public flexPosition: 'center' | 'left' | 'right' = 'left';
+  /**
+   * Set a class for the container
+   * */
+  @Input()
+  public containerClass: string;
   /**
    * Set a class above tabs
    * */
@@ -138,10 +148,13 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
   private subscriptions: any[] = [];
   private observer: IntersectionObserver;
   private timeout: Timeout;
+  isServer: boolean;
   
   constructor(private route: ActivatedRoute,
               private router: Router,
-              private cdr: ChangeDetectorRef) {
+              private cdr: ChangeDetectorRef,
+              @Inject(PLATFORM_ID) private platform: any) {
+    this.isServer = isPlatformServer(this.platform);
   }
   
   ngAfterViewInit() {
@@ -164,7 +177,7 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
             }
           });
           if (this.type === 'static') {
-            let tabs = UIkit.tab(this.tabsElement.nativeElement, {connect: this.connect});
+            let tabs = UIkit.switcher(this.tabsElement.nativeElement, {connect: this.connect});
             tabs.show(this.activeIndex);
             if (this.connect.includes('#')) {
               this.scrollToStart();

utils/properties/searchFields.base.ts

@@ -341,6 +341,14 @@ export class SearchFieldsBase {
       operator: "pf",
       equalityOperator: " = ",
       filterType: "triplet"
+    },
+    ["haslicense"]: {
+      name: "License",
+      type: "triplet",
+      param: "haslicense",
+      operator: "hl",
+      equalityOperator: " = ",
+      filterType: "triplet"
     }
   };
 
@@ -377,6 +385,11 @@ export class SearchFieldsBase {
       { name: "All", id: "", count: "0" },
       { name: "Yes", id: "true", count: "0" },
       { name: "No", id: "false", count: "0" }
+    ],
+    ["haslicense"]: [
+      { name: "All", id: "", count: "0" },
+      { name: "Yes", id: "true", count: "0" },
+      { name: "No", id: "false", count: "0" }
     ]
   };