[Trunk | Connect]:

1. app-routing.module.ts: Add route '/subjects'.
2. app.component.ts: Group subscribe and invite buttons under id="subscribeAndInviteBtn" (keep distance between them alwayes the same) | uncomment menu item 'Subjects' in About.
3. app.module.ts: import 'SubscribeService' (singleton service to update everywhere subscriber status).
4. libUser.module.ts & subscribe.module.ts: remove import of 'SubscribeService' (singleton service to update everywhere subscriber status).
5. community.component.html: 
	a. Improve some checks
	b. In main tabs of the page (class main-tabs) add class 'uk-text-truncate' and remove class 'uk-width-3-4' (each tab has max-width)
	c. Add icon in 'Analytics' tab
	d. [Bug fix] In description, fix overflow and max height of box
6. community.component.ts: Add field '@ViewChild(SubscribeComponent) subscribeComponent: SubscribeComponent' to add some checks in html.
7. curators.component.html: Remove div with class 'image-front-topbar' | Update css for title | Add <breadcrumbs> | Add user icon for each curator.
8. curators.component.ts: Initialize breadcrumb | [Bug fix] In methods 'getPageContents()' and 'getDivContents()' use communityId (instead of 'connect').
9. curators.module.ts & organizationsPage.module.ts & inviteBasic.module.ts: import 'BreadcrumbsModule'.
10. organizationsPage.component.ts: Update css for title | Add <breadcrumbs> | Initialize breadcrumb.
11. subjects.component.ts, subjects.module.ts, subjects-routing.module.ts: Add page for Subjects.
12. invite.component.html: Add <breadcrumbs> in longView | Add icon in button 'Invite users'.
13. invite.component.ts: Initialize breadcrumb.
14. subscribe.component.ts:  
	a. Add icon in button "Subscribe"/ "Subscribed" 
	b. Add class 'uk-display-inline-block' in showNumbers (members) 
	c. Initialize and get subscriber status with new methods of service (initIsSubscribedToCommunity() & isSubscribed - BehaviorSubject instead of isSubscribedToCommunity())
15. connect-custom.css: Group css for #subscribeBtn, #inviteBtn into #subscribeAndInviteBtn | Add css for class 'user-circle-background' (background of user icon in curators).


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58574 d315682c-612b-4755-9ff5-7f18f6832af3

src/app/app-routing.module.ts

@@ -24,6 +24,7 @@ const routes: Routes = [
   { path: 'projects', loadChildren: './htmlPages/projects/projectsPage.module#ProjectsPageModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
   { path: 'national-bulletins', loadChildren: './htmlPages/nationalBulletins/nationalBulletinsPage.module#NaionalBulletinPageModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
   { path: 'curators', loadChildren: './curators/curators.module#CuratorsModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
+  { path: 'subjects', loadChildren: './subjects/subjects.module#SubjectsModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
 
   { path: 'myCommunities', loadChildren: './my-communities/my-communities.module#MyCommunitiesModule', resolve: { envSpecific: EnvironmentSpecificResolver  }},
 

src/app/app.component.ts

@@ -35,12 +35,10 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
           <router-outlet></router-outlet>
         </main>
       </div>
-      <subscribe id="subscribeBtn" *ngIf="isClient && properties && communityId != null && communityId != ''" 
+      <div id="subscribeAndInviteBtn" *ngIf="isClient && properties && communityId">
-                 [communityId]="communityId" [properties]="properties"></subscribe>
+        <subscribe [communityId]="communityId" [properties]="properties"></subscribe>
-<!--      && managerOfCommunities -->
+        <invite *ngIf="managerOfCommunities" [longView]=false [buttonSizeSmall]=false [properties]="properties"></invite>
-      <invite id="inviteBtn" *ngIf="isClient && properties && communityId != null && communityId != '' && managerOfCommunities" 
+      </div>
-              [longView]=false [buttonSizeSmall]=false [properties]="properties"></invite>
-
       <!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback-->
       <cookie-law *ngIf="isClient" position="bottom">
         OpenAIRE uses cookies in order to function properly.<br>
@@ -201,7 +199,7 @@ export class AppComponent {
                   new MenuItem("", "Sources and methology", "", "/content", false, [], ["/content"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "Projects and funding Opportunities", "", "/projects", false, [], ["/projects"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                   new MenuItem("", "National Bulletins", "", "/national-bulletins", false, [], ["/national-bulletins"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
-                  //new MenuItem("", "Subjects", "", "/subjects", false, [], ["/subjects"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
+                  new MenuItem("", "Subjects", "", "/subjects", false, [], ["/subjects"], this.properties.environment != "development" ? {} : {communityId: community.communityId}),
                 ]
               });
             if (isCommunityManager) {

src/app/app.module.ts

@@ -30,6 +30,7 @@ import {PreviousRouteRecorder} from "./openaireLibrary/utils/piwik/previousRoute
 import {PiwikService} from "./openaireLibrary/utils/piwik/piwik.service";
 import {CommunityService} from "./openaireLibrary/connect/community/community.service";
 import {InviteBasicModule} from "./utils/subscribe/invite/inviteBasic.module";
+import {SubscribeService} from "./openaireLibrary/utils/subscribe/subscribe.service";
 
 @NgModule({
 
@@ -52,7 +53,7 @@ import {InviteBasicModule} from "./utils/subscribe/invite/inviteBasic.module";
   declarations: [ AppComponent, OpenaireErrorPageComponent, ThemeComponent, PageURLResolverComponent],
   exports: [ AppComponent ],
   providers:[
-    EnvironmentSpecificResolver,  CommunitiesService, LayoutService,
+    EnvironmentSpecificResolver,  CommunitiesService, LayoutService, SubscribeService,
     //FreeGuard, PreviousRouteRecorder, PiwikService, CommunityService,
     {
       provide: HTTP_INTERCEPTORS,

src/app/community/community.component.html

@@ -189,13 +189,13 @@
 <div *ngIf="communityInfo" class="uk-section uk-padding-remove-top uk-padding-remove-bottom">
   <div class="uk-padding-small">
     <div class="uk-container uk-container-large uk-margin-top"
-         *ngIf="communityId != null && communityId != '' && community != null">
+         *ngIf="communityId">
       <div>
         <div class="uk-margin-large-bottom">
-          <div *ngIf="community.title != null" class="uk-h2 uk-margin-remove">
+          <div *ngIf="community.title" class="uk-h2 uk-margin-remove">
             {{community.title}}
           </div>
-          <div *ngIf="community.shortTitle != null && community.title != community.shortTitle"
+          <div *ngIf="community.shortTitle && community.title != community.shortTitle"
                class="subtitle uk-margin-remove">
             {{community.shortTitle}}
           </div>
@@ -205,15 +205,15 @@
               <curators [longView]="false" [managers]="community.managers" [communityId]="communityId"></curators>
             </div>
             <div>
-              <span *ngIf="projectTotal != null  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)">
+              <span *ngIf="projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)">
                 <span class="uk-text-muted">Projects: </span>
                 <a class="uk-margin-auto-vertical uk-margin-auto portal-link" [queryParams]=params
                        routerLinkActive="router-link-active" [routerLink]="searchLinkToProjects">
                   {{projectTotal|number}}
                 </a>
               </span>
-              <span *ngIf="contentProviderTotal != null  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)"
+              <span *ngIf="contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)"
-                    [class]="'uk-display-inline-block '+((projectTotal != null  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)) ? 'uk-margin-left' : '')">
+                    [class]="'uk-display-inline-block '+((projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects)) ? 'uk-margin-left' : '')">
                     <span class="uk-text-muted">Content Providers: </span>
                     <a class="uk-margin-auto-vertical uk-margin-auto portal-link" [queryParams]=params
                        routerLinkActive="router-link-active" [routerLink]="searchLinkToDataProviders">
@@ -221,8 +221,8 @@
                     </a>
               </span>
               <span *ngIf="projectsCalculated && contentProvidersCalculated &&
-                          ((projectTotal != null  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects))
+                          ((projectTotal  && projectTotal > 0 && isEntityEnabled('project') && isRouteEnabled(searchLinkToProjects))
-                          || (contentProviderTotal != null  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)))"
+                          || (contentProviderTotal  && contentProviderTotal > 0 && isEntityEnabled('datasource') && isRouteEnabled(searchLinkToDataProviders)))"
                     class="uk-icon uk-text-muted uk-margin-small-left"
                     title="{{buildProjectsAndContentProvidesTooltip()}}"
                     uk-tooltip="pos:bottom-right; delay:10; cls: community-page-tooltip uk-width-medium">
@@ -253,61 +253,68 @@
         </div>
         <div>
           <div class="main-tabs-div">
-          <ul uk-tab class="main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
+          <ul uk-tab class="uk-text-truncate main-tabs uk-margin-remove uk-child-width-expand uk-width-3-4" uk-switcher="connect: .main-tabs-content">
             <li class="uk-padding-remove">
               <a class="uk-width-1-1 uk-height-1-1">
                 <div class="uk-text-bold">Summary</div>
               </a>
             </li>
-            <li *ngIf="publicationTotal != null && publicationTotal > 0 && isEntityEnabled('publication')"
+            <li *ngIf="publicationTotal && publicationTotal > 0 && isEntityEnabled('publication')"
                 class="uk-padding-remove" (click)="show='overview'; searchResearchResults('publication', publicationTotal, publicationResults)">
               <a class="uk-width-1-1 uk-height-1-1">
-                <div class="uk-text-bold">Publications</div><div class="uk-margin-small-top number">{{publicationTotal|number}}</div>
+                <div class="uk-text-bold">Publications</div><div class="uk-margin-top number">{{publicationTotal|number}}</div>
               </a>
             </li>
-            <li *ngIf="researchDataTotal != null && researchDataTotal > 0 && isEntityEnabled('dataset')"
+            <li *ngIf="researchDataTotal && researchDataTotal > 0 && isEntityEnabled('dataset')"
                 class="uk-padding-remove" (click)="show='overview'; searchResearchResults('dataset', researchDataTotal, researchDataResults)">
               <a class="uk-width-1-1 uk-height-1-1">
-                <div class="uk-text-bold">Research Data</div><div class="uk-margin-small-top number">{{researchDataTotal|number}}</div>
+                <div class="uk-text-bold">Research Data</div><div class="uk-margin-top number">{{researchDataTotal|number}}</div>
               </a>
             </li>
-            <li *ngIf="softwareTotal != null && softwareTotal > 0 && isEntityEnabled('software')"
+            <li *ngIf="softwareTotal && softwareTotal > 0 && isEntityEnabled('software')"
                 class="uk-padding-remove" (click)="show='overview'; searchResearchResults('software', softwareTotal, softwareResults)">
               <a class="uk-width-1-1 uk-height-1-1">
-                <div class="uk-text-bold">Software</div><div class="uk-margin-small-top number">{{softwareTotal|number}}</div>
+                <div class="uk-text-bold">Software</div><div class="uk-margin-top number">{{softwareTotal|number}}</div>
               </a>
             </li>
-            <li *ngIf="orpTotal != null && orpTotal > 0 && isEntityEnabled('orp')"
+            <li *ngIf="orpTotal && orpTotal > 0 && isEntityEnabled('orp')"
                 class="uk-padding-remove" (click)="show='overview'; searchResearchResults('other', orpTotal, orpResults)">
               <a class="uk-width-1-1 uk-height-1-1">
-                <div class="uk-text-bold">Other Research</div><div class="uk-margin-small-top number">{{orpTotal|number}}</div></a>
+                <div class="uk-text-bold">Other Research</div><div class="uk-margin-top number">{{orpTotal|number}}</div></a>
             </li>
             <li *ngIf="statistics && statistics.statisticsDisplay && statistics.statisticsDisplay.isActive"
                 class="uk-padding-remove statistics" (click)="show='analysis'; activeTab='analytics'">
               <a class="uk-width-1-1 uk-height-1-1">
                 <div class="uk-text-bold">Analytics</div>
+                <div class="uk-margin-top number">
+                  <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+                    <path d="M0 0h24v24H0z" fill="none"></path>
+                    <path d="M10 20h4V4h-4v16zm-6 0h4v-8H4v8zM16 9v11h4V9h-4z"></path>
+                  </svg>
+                </div>
               </a>
             </li>
           </ul>
           </div>
           <ul class="uk-switcher main-tabs-content">
             <li>
-              <div class="uk-grid uk-margin-remove">
+              <div *ngIf="community" class="uk-grid uk-margin-remove">
                 <div class="uk-width-expand uk-padding uk-inline">
                   <div>
-                    <span *ngIf="community.date != null" class="uk-margin-right">
+                    <span *ngIf="community.date" class="uk-margin-right">
                       <span class="lowOpacityColor uk-text-muted">Created: </span> {{community.date | date:'dd-MMM-yyyy'}}
                     </span>
-                    <span class="uk-margin-right uk-display-inline-block">
+                    <span>
-                      <subscribe *ngIf="communityId != null" [communityId]="communityId" showNumbers=true class=""></subscribe>
+                      <subscribe *ngIf="communityId" [communityId]="communityId" showNumbers=true class=""></subscribe>
                     </span>
                   </div>
-                  <div *ngIf="community.description != null" class="uk-margin-bottom uk-margin-top">
+                  <div *ngIf="community.description"
+                       [class]="'uk-margin-bottom '+ ((subscribeComponent && subscribeComponent.subscribers > 0) || community.date ? 'uk-margin-top' : '')">
                     <div class="uk-text-muted">Description</div>
                     <div *ngIf="!showAllDescription" class="">
                       {{community.description.substring(0, 500)}}{{community.description.length > 500 ? '...' : ''}}</div>
-                    <div *ngIf="showAllDescription" class="uk-height-max-medium uk-overflow-auto">
+                    <div *ngIf="showAllDescription" class="uk-overflow-auto">
-                      {{community.description}}
+                      <div class="uk-height-max-medium">{{community.description}}</div>
                     </div>
                     <div *ngIf="!showAllDescription && community.description.length > 500 "
                          class="uk-animation-fade uk-margin-small-top uk-padding uk-padding-remove-top uk-position-bottom-right">
@@ -322,9 +329,9 @@
                     </div>
                   </div>
                 </div>
-                <div *ngIf="community.subjects && community.subjects.length > 0"
+                <div *ngIf="isRouteEnabled('/subjects') && community.subjects && community.subjects.length > 0"
                      class="uk-width-1-3 uk-padding right-column uk-inline">
-                  <div class="">
+                  <div class="uk-margin-bottom">
                     <div class="uk-text-muted">Subjects</div>
                     <span *ngFor="let subject of community.subjects.slice(0,12) let i=index">
                       <span *ngIf="subject != ''">
@@ -336,9 +343,8 @@
                         <span *ngIf="i < community.subjects.length-1 && i != 11">, </span>
                       </span>
                     </span>
-                    <div *ngIf="community.subjects.length > 12"
+                    <div class="uk-margin-top uk-animation-fade uk-padding uk-padding-remove-top uk-position-bottom-right">
-                         class="uk-margin-top uk-animation-fade portal-link uk-padding uk-padding-remove-top uk-position-bottom-right">
+                      <a class="portal-link" routerLinkActive="router-link-active" [routerLink]="'/subjects'">
-                      <a routerLinkActive="router-link-active" [routerLink]="'/subjects'">
                         View all
                       </a>
                     </div>
@@ -346,22 +352,22 @@
                 </div>
               </div>
             </li>
-            <li *ngIf="publicationTotal != null && publicationTotal > 0 && isEntityEnabled('publication')">
+            <li *ngIf="publicationTotal && publicationTotal > 0 && isEntityEnabled('publication')">
               <ng-container *ngTemplateOutlet="tab_content; context: {
                 resultType: 'publication', results: publicationResults, totalResults: publicationTotal, type: 'publication', typeName: 'publication'}">
               </ng-container>
             </li>
-            <li *ngIf="researchDataTotal != null && researchDataTotal > 0 && isEntityEnabled('dataset')">
+            <li *ngIf="researchDataTotal && researchDataTotal > 0 && isEntityEnabled('dataset')">
               <ng-container *ngTemplateOutlet="tab_content; context: {
                 resultType: 'dataset', results: researchDataResults, totalResults: researchDataTotal, type: 'dataset', typeName: 'research fata'}">
               </ng-container>
             </li>
-            <li *ngIf="softwareTotal != null && softwareTotal > 0 && isEntityEnabled('software')">
+            <li *ngIf="softwareTotal && softwareTotal > 0 && isEntityEnabled('software')">
               <ng-container *ngTemplateOutlet="tab_content; context: {
                 resultType: 'software', results: softwareResults, totalResults: softwareTotal, type: 'software', typeName: 'software'}">
               </ng-container>
             </li>
-            <li *ngIf="orpTotal != null && orpTotal > 0 && isEntityEnabled('orp')">
+            <li *ngIf="orpTotal && orpTotal > 0 && isEntityEnabled('orp')">
               <ng-container *ngTemplateOutlet="tab_content; context: {
                 resultType: 'other', results: orpResults, totalResults: orpTotal, type: 'orp', typeName: 'other products'}">
               </ng-container>
@@ -748,8 +754,7 @@
 <!--    </div>-->
 <!--  </div>-->
 <!--</div>-->
-<div class="uk-section tm-middle uk-container uk-margin-top uk-padding-remove-top" id="" *ngIf="communityId != null
+<div class="uk-section tm-middle uk-container uk-margin-top uk-padding-remove-top" id="" *ngIf="communityId && communityInfo">
-   && communityId != '' && community != null && communityInfo != null">
   <ng-container *ngIf=" isRouteEnabled('/organizations')">
     <div class="uk-container  uk-margin-bottom uk-grid">
       <div class="uk-width-expand uk-padding-remove">
@@ -768,7 +773,7 @@
           class="uk-child-width-1-6@l uk-child-width-1-6@m uk-child-width-1-3@s uk-text-center uk-alert uk-alert-primary">
           No community chosen
         </div>
-        <div *ngIf="communityId != null && communityId != '' && community != null">
+        <div *ngIf="communityId">
 
         </div>
       </article>

src/app/community/community.component.ts

@@ -21,6 +21,7 @@ import {SearchResearchResultsService} from "../openaireLibrary/services/searchRe
 import {RouterHelper} from "../openaireLibrary/utils/routerHelper.class";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {UserManagementService} from "../openaireLibrary/services/user-management.service";
+import {SubscribeComponent} from "../utils/subscribe/subscribe.component";
 
 @Component({
   selector: 'community',
@@ -81,6 +82,8 @@ export class CommunityComponent {
   public routerHelper: RouterHelper = new RouterHelper();
   private user: User;
 
+  @ViewChild(SubscribeComponent) subscribeComponent: SubscribeComponent = null;
+
   constructor(
     private element: ElementRef,
     private route: ActivatedRoute,

src/app/curators/curators.component.html

@@ -1,24 +1,27 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
 
 <ng-container *ngIf="longView else shortView">
-  <div class="image-front-topbar  uk-section-default uk-position-relative"
+<!--  <div class="image-front-topbar  uk-section-default uk-position-relative"-->
-       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+<!--       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"-->
-       tm-header-transparent="light">
+<!--       tm-header-transparent="light">-->
-    <div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
+<!--    uk-flex uk-flex-middle-->
+    <div style=" min-height: 650px;" class="communityBackground uk-section uk-padding-remove-top uk-padding-remove-bottom ">
       <div class="uk-align-center">
-        <div class="uk-section">
+          <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>
-          <div class="uk-container">
+
-            <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+          <div class="uk-container uk-container-large">
-                    [texts]="pageContents['top']"></helper>
             <div *ngIf="showLoading" class="uk-margin-large">
               <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
                 class="loading-gif  uk-align-center"></span></div>
             </div>
-            <div *ngIf="!showLoading && curators.length > 0">
+<!--            && curators.length > 0-->
-              <h4 class="uk-margin-top uk-h4">
+            <div *ngIf="!showLoading">
-                <span class="uk-text-bold">Curators</span>
+              <div class="uk-margin-medium-top uk-h2">
+                <span class="">Curators</span>
                 <span> ({{curators.length}})</span>
-              </h4>
+              </div>
+              <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+                      [texts]="pageContents['top']"></helper>
               <div *ngFor="let curator of curators let i=index;"
                    class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
                 <div
@@ -85,8 +88,7 @@
           </div>
       </div>
     </div>
-    </div>
+<!--  </div>-->
-  </div>
 </ng-container>
 <ng-template #shortView>
   <div class="uk-grid">
@@ -101,7 +103,16 @@
 <!--        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"-->
 <!--             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">-->
 <!--      </span>-->
-        <a>{{curator.name}}</a>
+
+        <a>
+          <span class="user-circle-background">
+            <svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path>
+              <path d="M0 0h24v24H0z" fill="none"></path>
+            </svg>
+          </span>
+          {{curator.name}}
+        </a>
         <span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
              uk-dropdown="pos: bottom-left; mode:click; ">
           <span class="uk-grid uk-grid-stack">

src/app/curators/curators.component.ts

@@ -11,6 +11,7 @@ import {Meta, Title} from "@angular/platform-browser";
 import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
 import {PiwikHelper} from "../utils/piwikHelper";
+import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
 
 @Component({
   selector: 'curators',
@@ -38,6 +39,8 @@ export class CuratorsComponent {
   public url: string = null;
   public pageTitle: string = "Curators";
 
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - curators'}];
+
   constructor (private route: ActivatedRoute,
                private curatorsService: CuratorService,
                private communitiesService: CommunitiesService,
@@ -106,13 +109,13 @@ export class CuratorsComponent {
   }
 
   private getPageContents() {
-    this.helper.getPageHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
+    this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
       this.pageContents = contents;
     })
   }
 
   private getDivContents() {
-    this.helper.getDivHelpContents(this.properties, 'connect', this._router.url).subscribe(contents => {
+    this.helper.getDivHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
       this.divContents = contents;
     })
   }

src/app/curators/curators.module.ts

@@ -12,12 +12,14 @@ import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2js
 import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
 import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
 import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
+import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule,
     CuratorsRoutingModule, AffiliationsModule, HelperModule,
-    Schema2jsonldModule, SEOServiceModule, PiwikServiceModule
+    Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
+    BreadcrumbsModule
   ],
   declarations: [
     CuratorsComponent

src/app/htmlPages/organizations/organizationsPage.component.ts

@@ -1,19 +1,23 @@
 import {Component} from '@angular/core';
+import {Breadcrumb} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
 
 @Component({
     selector: 'organizations',
     template: `
-      <div class=" uk-section tm-middle uk-container uk-padding-remove-top uk-margin-top" id="tm-main">
+      <div class="communityBackground uk-section tm-middle uk-padding-remove-top" id="tm-main">
-        <div class="uk-container  uk-margin-bottom">
+        <breadcrumbs [addClass]="'uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top'" [breadcrumbs]="breadcrumbs"></breadcrumbs>
-          <div class="uk-article-title custom-article-title uk-margin-bottom"> Organizations related to the community
+
-          </div>
+        <div class="uk-container uk-container-large uk-margin-bottom">
-          <html-page description="Organizations" pageTitle="Related Organizations"></html-page>
+          <div class="uk-h2 uk-margin-medium-top uk-margin-bottom">Supporting Organizations</div>
+          <html-page description="Organizations" pageTitle="Supporting Organizations"></html-page>
           <affiliations [longView]="true" [getAffiliationsFromAPI]="true"></affiliations>
         </div>
       </div>
     `
 })
 export class OrganizationsPageComponent {
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about - supporting organizations'}];
+
   constructor () {}
   public ngOnInit() {
   }

src/app/htmlPages/organizations/organizationsPage.module.ts

@@ -11,10 +11,12 @@ import {AffiliationsModule} from "../../affiliations/affiliations.module";
 import {HelperModule} from "../../openaireLibrary/utils/helper/helper.module";
 import {CommonModule} from "@angular/common";
 import {HtmlPagesModule} from "../htmlPages.module";
+import {BreadcrumbsModule} from "../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
 
 @NgModule({
   imports: [
-    OrganizationsPageRoutingModule, AffiliationsModule, HelperModule, CommonModule, HtmlPagesModule
+    OrganizationsPageRoutingModule, AffiliationsModule, HelperModule, CommonModule, HtmlPagesModule,
+    BreadcrumbsModule
   ],
   declarations: [
     OrganizationsPageComponent

src/app/login/libUser.module.ts

@@ -16,7 +16,7 @@ import {SubscribeModule} from '../utils/subscribe/subscribe.module';
     CommonModule, FormsModule,
     UserRoutingModule, UserModule, SubscribeModule
   ],
-  providers:[PreviousRouteRecorder, SubscribeService, EmailService],
+  providers:[PreviousRouteRecorder, /*SubscribeService,*/ EmailService],
   declarations: [
 OpenaireUserComponent
 

src/app/subjects/subjects-routing.module.ts

@@ -0,0 +1,15 @@
+import { NgModule}      from '@angular/core';
+import { RouterModule } from '@angular/router';
+import {SubjectsComponent} from "./subjects.component";
+import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
+import {PreviousRouteRecorder} from "../openaireLibrary/utils/piwik/previousRouteRecorder.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: '', component: SubjectsComponent, canActivate: [IsRouteEnabled], canDeactivate: [PreviousRouteRecorder]}
+    ])
+  ]
+})
+export class SubjectsRoutingModule {
+}

src/app/subjects/subjects.component.ts

@@ -0,0 +1,149 @@
+import {Component, Input} from '@angular/core';
+import {EnvProperties}    from '../openaireLibrary/utils/properties/env-properties';
+import {ActivatedRoute, Router} from "@angular/router";
+import {CommunityService} from "../openaireLibrary/connect/community/community.service";
+import {ConnectHelper} from "../openaireLibrary/connect/connectHelper";
+import {HelperFunctions} from "../openaireLibrary/utils/HelperFunctions.class";
+import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
+import {Meta, Title} from "@angular/platform-browser";
+import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
+import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {PiwikHelper} from "../utils/piwikHelper";
+import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
+import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
+
+@Component({
+  selector: 'subjects',
+  template: `
+    <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
+
+    <div style=" min-height: 650px;" class="communityBackground">
+      <div class="uk-section uk-padding-remove-top uk-padding-remove-bottom">
+        <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>
+        <!--          <div *ngIf="communityId != null && communityId != ''" -->
+<!--               class="uk-container uk-container-large uk-margin-top white-box-with-border">-->
+
+            <div class="uk-container uk-container-large">
+              <div *ngIf="showLoading">
+                <div class="uk-animation-fade uk-width-1-1" role="alert"><span
+                  class="loading-gif  uk-align-center"></span></div>
+              </div>
+              <div *ngIf="!showLoading">
+                <div class="uk-h2 uk-margin-bottom uk-margin-medium-top">
+                  <span>Subjects</span>
+                </div>
+                
+                <div style=" min-height: 250px;" class="white-box-with-border uk-padding uk-list">
+                  <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+                          [texts]="pageContents['top']"></helper>
+
+                  <span *ngFor="let subject of subjects let i=index">
+                      <span *ngIf="subject != ''">
+                        <a class="portal-link"
+                           [queryParams]="{f0:'resultsubject',fv0:createParams(subject)}"
+                           routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToAdvancedResults" >
+                          <span>{{subject}}</span>
+                        </a>
+                        <span *ngIf="i < subjects.length-1">, </span>
+                      </span>
+                  </span>
+                </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  `
+
+})
+
+export class SubjectsComponent {
+  public subjects: string[];
+  @Input() communityId = null;
+  public showLoading = true;
+
+  public properties: EnvProperties;
+  public pageContents = null;
+  public divContents = null;
+
+  public piwiksub: any;
+  public url: string = null;
+  public pageTitle: string = "Subjects";
+
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'about - subjects'}];
+
+  constructor (private route: ActivatedRoute,
+               private communityService: CommunityService,
+               private _router: Router,
+               private helper: HelperService,
+               private _meta: Meta,
+               private _title: Title,
+               private seoService: SEOService,
+               private _piwikService: PiwikService) {}
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+      this.showLoading = true;
+      this.properties = data.envSpecific;
+
+        if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
+          this.piwiksub = this._piwikService.trackView(this.properties, this.pageTitle, PiwikHelper.getSiteId(this.communityId, this.properties.environment)).subscribe();
+        }
+        this.url = this.properties.baseLink + this._router.url;
+        this.seoService.createLinkForCanonicalURL(this.url);
+        this.updateUrl(this.url);
+        this.updateTitle(this.pageTitle);
+        this.updateDescription("OpenAIRE - Connect, Community Gateway, research community");
+
+        this.route.queryParams.subscribe(data => {
+          this.communityId  = ConnectHelper.getCommunityFromDomain(this.properties.domain);
+          if(!this.communityId) {
+            this.communityId = data['communityId'];
+          }
+          //this.getDivContents();
+          this.getPageContents();
+          this.communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe(community => {
+            this.subjects = community.subjects;
+            this.showLoading = false;
+            HelperFunctions.scroll();
+          });
+        });
+    });
+  }
+
+  createParams(param) {
+    return StringUtils.quote(StringUtils.URIEncode(param));
+  }
+
+  ngOnDestroy() {
+    if(this.piwiksub) {
+      this.piwiksub.unsubscribe();
+    }
+  }
+
+  private getPageContents() {
+    this.helper.getPageHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
+      this.pageContents = contents;
+    })
+  }
+
+  private getDivContents() {
+    this.helper.getDivHelpContents(this.properties, this.communityId, this._router.url).subscribe(contents => {
+      this.divContents = contents;
+    })
+  }
+
+  private updateDescription(description: string) {
+    this._meta.updateTag({content: description}, "name='description'");
+    this._meta.updateTag({content: description}, "property='og:description'");
+  }
+
+  private updateTitle(title: string) {
+    var _title = ((title.length > 50) ? title.substring(0, 50) : title);
+    this._title.setTitle(_title);
+    this._meta.updateTag({content: _title}, "property='og:title'");
+  }
+
+  private updateUrl(url: string) {
+    this._meta.updateTag({content: url}, "property='og:url'");
+  }
+}

src/app/subjects/subjects.module.ts

@@ -0,0 +1,30 @@
+import { NgModule} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule }  from '@angular/forms';
+import { RouterModule } from '@angular/router';
+
+import {SubjectsComponent} from './subjects.component';
+import {SubjectsRoutingModule} from "./subjects-routing.module";
+import {CommunityService} from "../openaireLibrary/connect/community/community.service";
+import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
+import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
+import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {PiwikServiceModule} from "../openaireLibrary/utils/piwik/piwikService.module";
+import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+
+@NgModule({
+  imports: [
+    CommonModule, FormsModule, RouterModule,
+    SubjectsRoutingModule, HelperModule,
+    Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
+    BreadcrumbsModule
+  ],
+  declarations: [
+    SubjectsComponent
+  ],
+  providers: [CommunityService],
+  exports: [
+    SubjectsComponent
+  ]
+})
+export class SubjectsModule {}

src/app/utils/subscribe/invite/invite.component.html

@@ -1,7 +1,8 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other"></schema2jsonld>
 
-<div *ngIf="longView == true">
+<div *ngIf="longView == true" class="communityBackground">
-  <div class="uk-section uk-padding-remove-top tm-middle uk-container" id="tm-main">
+  <div class="uk-section uk-padding-remove-top tm-middle" id="tm-main">
+    <breadcrumbs addClass="uk-margin-large-left uk-margin-remove-bottom uk-margin-small-top" [breadcrumbs]="breadcrumbs"></breadcrumbs>
 
     <div class="uk-container  uk-margin-bottom">
       <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
@@ -153,9 +154,15 @@
     </div>
   </div>
 </div>
-<div class="">
+<div *ngIf="!longView" class="uk-margin-small-top">
-  <button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  portal-button uk-button-small uk-width-1-1'">
+  <button [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  portal-button uk-button-small uk-width-1-1'">
-    Invite users
+    <span class="uk-icon uk-flex uk-flex-middle">
+      <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
+        <path d="M0 0h24v24H0z" fill="none"></path>
+        <path d="M8 10H5V7H3v3H0v2h3v3h2v-3h3v-2zm10 1c1.66 0 2.99-1.34 2.99-3S19.66 5 18 5c-.32 0-.63.05-.91.14.57.81.9 1.79.9 2.86s-.34 2.04-.9 2.86c.28.09.59.14.91.14zm-5 0c1.66 0 2.99-1.34 2.99-3S14.66 5 13 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm6.62 2.16c.83.73 1.38 1.66 1.38 2.84v2h3v-2c0-1.54-2.37-2.49-4.38-2.84zM13 13c-2 0-6 1-6 3v2h12v-2c0-2-4-3-6-3z"></path>
+      </svg>
+      <span class="space">Invite users</span>
+    </span>
   </button>
   <div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
     <div class="uk-margin-top">

src/app/utils/subscribe/invite/invite.component.ts

@@ -22,6 +22,7 @@ import {SEOService} from "../../../openaireLibrary/sharedComponents/SEO/SEO.serv
 import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";
 import {PiwikHelper} from "../../piwikHelper";
 import {UserManagementService} from "../../../openaireLibrary/services/user-management.service";
+import {Breadcrumb} from "../../../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
 
 @Component({
   selector: 'invite',
@@ -71,6 +72,8 @@ export class InviteComponent implements OnInit {
   piwiksub: any;
   private user: User;
 
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'invite'}];
+
   constructor(
     private route: ActivatedRoute,
     private _router: Router,

src/app/utils/subscribe/invite/inviteBasic.module.ts

@@ -16,11 +16,12 @@ import {HelperModule} from "../../../openaireLibrary/utils/helper/helper.module"
 import {Schema2jsonldModule} from "../../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
 import {SEOServiceModule} from "../../../openaireLibrary/sharedComponents/SEO/SEOService.module";
 import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";
+import {BreadcrumbsModule} from "../../../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
 
 @NgModule({
   imports: [
     RouterModule, CommonModule, FormsModule, CKEditorModule, ErrorMessagesModule,
-    HelperModule, Schema2jsonldModule, SEOServiceModule
+    HelperModule, Schema2jsonldModule, SEOServiceModule, BreadcrumbsModule
   ],
   declarations: [
     InviteComponent

src/app/utils/subscribe/subscribe.component.ts

@@ -25,12 +25,28 @@ declare var UIkit: any;
       <p>Please login first to subscribe</p>
       </div>
       <button *ngIf="!subscribed" [class]="'uk-button portal-button uk-button-small uk-width-1-1 ' + (loading ? ' uk-disabled' : '')"
-              (click)="subscribe()"> Subscribe</button>
+              (click)="subscribe()">
+        <span class="uk-icon uk-flex uk-flex-middle">
+          <svg height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
+          </svg>
+          <span class="space">Subscribe</span> 
+        </span>
+      </button>
       <button *ngIf="subscribed" [class]="'subscribed-button uk-button uk-button-small uk-width-1-1 ' + (loading ? ' uk-disabled' : '')"
-              (click)="confirmOpen()"> Subscribed</button>
+              (click)="confirmOpen()">
+        <span class="uk-icon uk-flex uk-flex-middle">
+          <svg height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <path d="M0 0h24v24H0z" fill="none"></path>
+            <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"></path>
+          </svg>
+          <span class="space">Subscribed</span> 
+        </span>
+      </button>
     </span>
 
-    <span *ngIf="showNumbers && subscribers !=null && subscribers > 0  && showTemplate">
+    <span *ngIf="showNumbers && subscribers !=null && subscribers > 0  && showTemplate" class="uk-display-inline-block">
       <span class="lowOpacityColor uk-text-muted">Members: </span> {{subscribers}}
     </span>
     <modal-alert (alertOutput)="confirmClose($event)">
@@ -90,6 +106,20 @@ export class SubscribeComponent {
     //this.init();
   }
 
+  private isSubscribed() {
+    this._subscribeService.isSubscribed.subscribe(
+      res => {
+        console.log("Subscribe component: isSubscribed: "+res);
+        this.subscribed = res;
+        if (this.subscribed) {
+          this.subscribeEvent.emit({
+            value: "ok"
+          });
+        }
+      }
+    );
+  }
+
   private init() {
     if (!this.showNumbers) {
       let email = (this.user) ? this.user.email : null;
@@ -97,18 +127,21 @@ export class SubscribeComponent {
         this.subscribed = false;
       } else {
         if (this.communityId) {
-          this._subscribeService.isSubscribedToCommunity(this.properties, this.communityId).subscribe(
+          // this._subscribeService.isSubscribedToCommunity(this.properties, this.communityId).subscribe(
-            res => {
+          //   res => {
-              this.subscribed = res;
+          //     this.subscribed = res;
-              if (this.subscribed) {
+          //     if (this.subscribed) {
-                this.subscribeEvent.emit({
+          //       this.subscribeEvent.emit({
-                  value: "ok"
+          //         value: "ok"
-                });
+          //       });
-              }
+          //     }
-            },
+          //   },
-            error => {
+          //   error => {
-              this.handleError("Error getting response if email: " + email + " is subscribed to community with id: " + this.communityId, error);
+          //     this.handleError("Error getting response if email: " + email + " is subscribed to community with id: " + this.communityId, error);
-            });
+          //   });
+
+          this._subscribeService.initIsSubscribedToCommunity(this.properties, this.communityId);
+          this.isSubscribed();
         }
       }
     } else {

src/app/utils/subscribe/subscribe.module.ts

@@ -25,7 +25,7 @@ export class SubscribeModule {
     return {
       ngModule: SubscribeModule,
       providers: [
-        SubscribeService, EmailService, CommunityService
+        /*SubscribeService,*/ EmailService, CommunityService
       ]
     }
   }

src/assets/connect-custom.css

@@ -238,36 +238,26 @@ Impact Factor -  ATHENA CODE */
 
 /*CONNECT REDESIGN*/
 
-#subscribeBtn, #inviteBtn {
+#subscribeAndInviteBtn {
+/*#subscribeBtn, #inviteBtn {*/
     float: left;
     position: fixed;
     right: 0;
     z-index: 100;
     display: block;
-    width: 110px;
+    top: calc(30% - 47px);
 }
 
-#subscribeBtn {
+#subscribeAndInviteBtn button {
-    top: calc(35% - 47px);
+    width: 125px;
-}
+    height: 35px;
-
-#inviteBtn {
-    top: calc(40% - 47px);
-}
-
-#subscribeBtn > * > button, #inviteBtn > * > button {
     border-right: none;
     /*border-top-right-radius: 0;*/
     /*border-bottom-right-radius: 0;*/
     border-radius: 4px 0px 0px 4px;
     box-shadow: 0px 2px 6px #00000038;
-    /*background-color: var(--portal-main-color);*/
 }
 
-/*#subscribeBtn > * > button:hover, #inviteBtn > * > button:hover {*/
-/*    background-color: white;*/
-/*}*/
-
 .subscribed-button {
     background-color: #8AD15E !important;
     color: white !important;
@@ -287,6 +277,20 @@ Impact Factor -  ATHENA CODE */
     z-index: 10000;
 }
 
+.user-circle-background {
+    background-color: var(--portal-main-color);
+    border-radius: 50%;
+    height: 10px;
+    width: 10px;
+    display: inline-flex;
+    padding: 2px;
+    fill: white;
+}
+
+a:hover .user-circle-background {
+    background-color: var(--portal-dark-color);
+}
+
 /*END OF CONNECT REDESIGN*/
 
 .communityApp .uk-logo{