MaDgIK
/
connect
13
0
Fork 0
Code Issues Pull Requests Projects Releases 14 Wiki Activity

[Trunk | Connect]: Connect redesing 

1. app.component.ts: <subscribe> and <invite> components added (floating buttons on the right side of each page for communities).
2. community.component.html: 
3. community.component.ts:                   
        a. 'projectsCalculated' and 'contentProvidersCalculated' fields added, to calculate tootlip after both requests complete
        b. added methods for building tootips
        c. 'activeTab' set to 'summary'.
4. affiliations.component.html: minor phrasing changes (e.g. title).
5. curators.component.html: shortview changed.
6. results.component.ts: Title changed | 'View all' moved to the bottom.
7. customization.component.ts: Changed '--portal-main-color' from  '#4C9CD5' to '#4687E6' | Changed '--portal-dark-color' from '#24857F' to '#2D72D6'.
8. invite.component.html: shortview changed.
9. invite.component.ts: 'properties' field as input (get it is called from app.component).
10. invite.module.ts & inviteBasic.module.ts: InviteBasicModule created to declare InviteComponent without routing and login guard | InviteModule imports InviteBasicModule and adds routing and login guar$
11. subscribe.component.ts: Changes for subscribe button and members | 'properties' field as input (get it is called from app.component).
12. connect-custom.css: css for subscribe and invite buttons and for tooltip with 'community-page-tooltip' class.
13. customization.css: class 'communityBackground' added and css for 'subtitle' class inside 'communityBackground'.


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@58549 d315682c-612b-4755-9ff5-7f18f6832af3
This commit is contained in:
konstantina.galouni 2020-04-24 16:38:35 +00:00
parent 1796453bb7
commit 17e7eb2d7f
15 changed files with 949 additions and 525 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/affiliations/affiliations.component.html
View File

@ -47,7 +47,8 @@
<div *ngIf="communityFirstPage" <div *ngIf="communityFirstPage"
class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold"> class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
Related Organizations ({{affiliations.length}}) Supporting Organizations
<!-- ({{affiliations.length}})-->
</div> </div>
<div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1" <div *ngIf="!longView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
@ -82,8 +83,8 @@
</div> </div>
<div *ngIf="communityFirstPage" <div *ngIf="communityFirstPage"
[class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider"> [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
<a routerLink="/organizations" class="uk-align-right uk-link"> <a routerLink="/organizations" class="uk-align-right uk-link portal-link">
View more details See Details >
</a> </a>
</div> </div>
</ng-container> </ng-container>

8
src/app/app.component.ts
View File

@ -35,6 +35,12 @@ import {UserManagementService} from "./openaireLibrary/services/user-management.
<router-outlet></router-outlet> <router-outlet></router-outlet>
</main> </main>
</div> </div>
<subscribe id="subscribeBtn" *ngIf="isClient && properties && communityId != null && communityId != ''"
[communityId]="communityId" [properties]="properties"></subscribe>
<!-- && managerOfCommunities -->
<invite id="inviteBtn" *ngIf="isClient && properties && communityId != null && communityId != '' && managerOfCommunities"
[longView]=false [buttonSizeSmall]=false [properties]="properties"></invite>
<!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback--> <!--feedback *ngIf= "isClient && properties" portalName="Connect" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback-->
<cookie-law *ngIf="isClient" position="bottom"> <cookie-law *ngIf="isClient" position="bottom">
OpenAIRE uses cookies in order to function properly.<br> OpenAIRE uses cookies in order to function properly.<br>
@ -72,6 +78,7 @@ export class AppComponent {
subscriberOfCommunities = false; subscriberOfCommunities = false;
managerOfCommunities = false; managerOfCommunities = false;
user: User; user: User;
communityId: string = "";
// community: {id:string, name:string, logoUrl:string}; // community: {id:string, name:string, logoUrl:string};
constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService, constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
@ -119,6 +126,7 @@ export class AppComponent {
communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain); communityId = ConnectHelper.getCommunityFromDomain(this.properties.domain);
this.buildMenu(communityId); this.buildMenu(communityId);
} }
this.communityId = communityId;
} }
public buildMenu(communityId: string) { public buildMenu(communityId: string) {

9
src/app/app.module.ts
View File

@ -24,6 +24,12 @@ import {ThemeComponent} from "./test/theme.component";
import {CustomizationModule} from "./utils/customization/customization.module"; import {CustomizationModule} from "./utils/customization/customization.module";
import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service"; import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
import {PageURLResolverComponent} from "./openaireLibrary/utils/pageURLResolver.component"; import {PageURLResolverComponent} from "./openaireLibrary/utils/pageURLResolver.component";
import {InviteModule} from "./utils/subscribe/invite/invite.module";
import {FreeGuard} from "./openaireLibrary/login/freeGuard.guard";
import {PreviousRouteRecorder} from "./openaireLibrary/utils/piwik/previousRouteRecorder.guard";
import {PiwikService} from "./openaireLibrary/utils/piwik/piwik.service";
import {CommunityService} from "./openaireLibrary/connect/community/community.service";
import {InviteBasicModule} from "./utils/subscribe/invite/inviteBasic.module";
@NgModule({ @NgModule({
@ -38,7 +44,7 @@ import {PageURLResolverComponent} from "./openaireLibrary/utils/pageURLResolver.
BottomModule, BottomModule,
CookieLawModule, CookieLawModule,
CustomizationModule, CustomizationModule,
SubscribeModule.forRoot(), SubscribeModule.forRoot(), InviteBasicModule,
BrowserModule.withServerTransition({appId: 'my-app'}), BrowserModule.withServerTransition({appId: 'my-app'}),
AppRoutingModule, AppRoutingModule,
BrowserTransferStateModule BrowserTransferStateModule
@ -47,6 +53,7 @@ import {PageURLResolverComponent} from "./openaireLibrary/utils/pageURLResolver.
exports: [ AppComponent ], exports: [ AppComponent ],
providers:[ providers:[
EnvironmentSpecificResolver, CommunitiesService, LayoutService, EnvironmentSpecificResolver, CommunitiesService, LayoutService,
//FreeGuard, PreviousRouteRecorder, PiwikService, CommunityService,
{ {
provide: HTTP_INTERCEPTORS, provide: HTTP_INTERCEPTORS,
useClass: HttpInterceptorService, useClass: HttpInterceptorService,

1070
src/app/community/community.component.html
View File

File diff suppressed because it is too large Load Diff

42
src/app/community/community.component.ts
View File

@ -42,6 +42,9 @@ export class CommunityComponent {
public contentProviderTotal = null; public contentProviderTotal = null;
public organizationTotal = null; public organizationTotal = null;
public projectsCalculated: boolean = false;
public contentProvidersCalculated: boolean = false;
params: any = {}; params: any = {};
properties: EnvProperties; properties: EnvProperties;
@ -66,7 +69,7 @@ export class CommunityComponent {
public subSoftware; public subSoftware;
public subOrps; public subOrps;
@ViewChild(StatisticsForDashboardComponent) statistics: StatisticsForDashboardComponent = null; @ViewChild(StatisticsForDashboardComponent) statistics: StatisticsForDashboardComponent = null;
public activeTab = "publication"; public activeTab = "summary";
public show: string = 'overview'; public show: string = 'overview';
searchLinkToResults: string = null; searchLinkToResults: string = null;
@ -181,6 +184,9 @@ export class CommunityComponent {
}, },
error => { error => {
this.handleError("Error getting number of projects for community with id: " + this.communityId, error); this.handleError("Error getting number of projects for community with id: " + this.communityId, error);
},
() => {
this.projectsCalculated = true;
} }
); );
@ -191,6 +197,9 @@ export class CommunityComponent {
}, },
error => { error => {
this.handleError("Error getting number of content providers for community with id: " + this.communityId, error); this.handleError("Error getting number of content providers for community with id: " + this.communityId, error);
},
() => {
this.contentProvidersCalculated = true;
} }
); );
@ -220,7 +229,7 @@ export class CommunityComponent {
researchResultsTotal => { researchResultsTotal => {
this.setTotal(resultType, researchResultsTotal); this.setTotal(resultType, researchResultsTotal);
if (resultType == "publication") { if (resultType == "publication") {
this.searchResearchResults(resultType, this.publicationTotal, this.publicationResults); //this.searchResearchResults(resultType, this.publicationTotal, this.publicationResults);
} }
}, },
error => { error => {
@ -357,4 +366,33 @@ export class CommunityComponent {
return (full ? ("other research product" + (plural ? "s" : "")) : "other"); return (full ? ("other research product" + (plural ? "s" : "")) : "other");
} }
} }
public buildProjectsAndContentProvidesTooltip(): string {
let tooltipContent: string = "<div class='uk-margin'>";
if(this.projectTotal != null && this.projectTotal > 0 && this.isEntityEnabled('project') && this.isRouteEnabled(this.searchLinkToProjects)) {
tooltipContent += "<span class='uk-text-bold'>Projects</span>";
}
if(this.projectTotal != null && this.projectTotal > 0 && this.isEntityEnabled('project') && this.isRouteEnabled(this.searchLinkToProjects)
&& (this.contentProviderTotal != null && this.contentProviderTotal > 0 && this.isEntityEnabled('datasource') && this.isRouteEnabled(this.searchLinkToDataProviders))) {
tooltipContent += " and ";
}
if(this.contentProviderTotal != null && this.contentProviderTotal > 0 && this.isEntityEnabled('datasource') && this.isRouteEnabled(this.searchLinkToDataProviders)) {
tooltipContent += "<span class='uk-text-bold'>Content Providers</span>";
}
tooltipContent += " have been selected as relevant for your community by the gateway curators.";
tooltipContent += "</div>";
return tooltipContent;
}
public buildZenodoCommunitiesTooltip(): string {
let tooltipContent: string = "<div class='uk-margin'>";
tooltipContent += "<span class='uk-text-bold'>Zenodo</span> is a catch-all repository for OpenAIRE.";
tooltipContent += "<div class='uk-margin-small-top'>A <span class='uk-text-bold'>Zenodo Community</span> is created and curated by Zenodo users.</div>";
tooltipContent += "</div>";
return tooltipContent;
}
} }

59
src/app/curators/curators.component.html
View File

@ -89,54 +89,55 @@
</div> </div>
</ng-container> </ng-container>
<ng-template #shortView> <ng-template #shortView>
<span *ngIf=" curators && curators.length > 0" class="lowOpacityColor uk-width-1-1">
Curators
</span>
<div class="uk-grid"> <div class="uk-grid">
<div *ngFor="let curator of curators let i=index;" class="uk-flex uk-flex-middle uk-width-1-2 uk-margin-small-top"> <span *ngIf=" curators && curators.length > 0" class="lowOpacityColor uk-text-muted uk-width-auto">
<div> Curated by:
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" </span>
src="{{downloadUrl + curator.photo}}" alt="Curator Photo"> <span class="uk-width-expand uk-padding-remove space">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" <span *ngFor="let curator of curators let i=index;">
src="../../assets/common-assets/curator-default.png" alt="Curator Photo"> <!-- <span>-->
</div> <!-- <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"-->
<div class="uk-width-expand uk-margin-left"> <!-- src="{{downloadUrl + curator.photo}}" alt="Curator Photo">-->
<!-- <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>{{curator.name}}</a>
<div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium" <span class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
uk-dropdown="pos: bottom-left; mode:click; "> uk-dropdown="pos: bottom-left; mode:click; ">
<div class="uk-grid uk-grid-stack"> <span class="uk-grid uk-grid-stack">
<div class="uk-first-column uk-flex uk-flex-middle uk-grid"> <span class="uk-first-column uk-flex uk-flex-middle uk-grid">
<div> <span>
<img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
src="{{downloadUrl + curator.photo}}" alt="Curator Photo"> src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
<img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
src="../../assets/common-assets/curator-default.png" alt="Curator Photo"> src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
</div> </span>
<div class="uk-width-expand uk-h5 ignoreCommunityPanelBackground"> <span class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">
{{curator.name}} {{curator.name}}
</div> </span>
</div> </span>
<div *ngIf="curator.affiliations.length > 0" class="uk-width-1-1"> <span *ngIf="curator.affiliations.length > 0" class="uk-width-1-1">
<hr class="uk-margin-top"> <hr class="uk-margin-top">
<span class="uk-text-left uk-margin"> <span class="uk-text-left uk-margin">
Affiliations Affiliations
</span> </span>
<span> ({{curator.affiliations.length}})</span> <span> ({{curator.affiliations.length}})</span>
<div class="uk-width-1-1"> <span class="uk-width-1-1">
<affiliations [affiliations]="curator.affiliations" <affiliations [affiliations]="curator.affiliations"
[affiliationsInSlider]="2" [affiliationsInSlider]="2"
[arrows]="false" [arrows]="false"
[sliderOptions]="'autoplay: true; autoplay-interval: 2000'"></affiliations> [sliderOptions]="'autoplay: true; autoplay-interval: 2000'"></affiliations>
</div> </span>
</div> </span>
<div class="uk-width-1-1"> <span class="uk-width-1-1">
<a routerLink="/curators" class="uk-align-right uk-link ignoreCommunityPanelBackground"> <a routerLink="/curators" class="uk-align-right uk-link ignoreCommunityPanelBackground">
View more details View more details
</a> </a>
</div> </span>
</div> </span>
</div> </span>
</div> <span *ngIf="i < curators.length-1">, </span>
</div> </span>
</span>
</div> </div>
</ng-template> </ng-template>

34
src/app/searchEntries/results/results.component.ts
View File

@ -6,19 +6,10 @@ import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
@Component({ @Component({
selector: 'results-comp', selector: 'results-comp',
template: ` template: `
<div class="uk-h5 uk-text-bold uk-margin-top uk-margin-remove-bottom">Recent research results</div> <div class="tab-header">Recent {{getEntityName(resultType, true, true)}}</div>
<div *ngIf="!results && total != 0"> <div *ngIf="!results && total != 0">
<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div> <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
</div> </div>
<div *ngIf="results != null && results.length > 0">
<div class="uk-text-right">
<div>
<a class="el-content uk-button uk-button-text" [queryParams]="{type:getresultTypeLink(resultType, true), qf:false}" routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToResults">
View all
</a>
</div>
</div>
</div>
<div *ngIf="results != null && results.length > 0 && !showLoading"> <div *ngIf="results != null && results.length > 0 && !showLoading">
<!--<div class="uk-margin-remove-vertical uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@xl uk-grid-small uk-grid uk-grid-stack" uk-grid=""> <!--<div class="uk-margin-remove-vertical uk-grid-match uk-child-width-1-1 uk-child-width-1-1@m uk-child-width-1-1@l uk-child-width-1-1@xl uk-grid-small uk-grid uk-grid-stack" uk-grid="">
<li *ngFor="let item of results; let i = index"> <li *ngFor="let item of results; let i = index">
@ -52,6 +43,15 @@ import {SearchResult} from "../../openaireLibrary/utils/entities/searchResult";
[type]="resultType" [properties] = properties class="communityRecentResults" [showImpactFactors]="(community.communityId == 'elixir-gr')" > [type]="resultType" [properties] = properties class="communityRecentResults" [showImpactFactors]="(community.communityId == 'elixir-gr')" >
</search-result> </search-result>
</div> </div>
<div *ngIf="results != null && results.length > 0">
<div class="uk-text-right">
<div>
<a class="el-content uk-link portal-link uk-text-capitalize" [queryParams]="{type:getresultTypeLink(resultType, true), qf:false}" routerLinkActive="router-link-active" [routerLink]="properties.searchLinkToResults">
View all {{getEntityName(resultType, true, true)}} >
</a>
</div>
</div>
</div>
<div *ngIf="results != null && results.length == 0 || total == 0" class=" uk-alert uk-alert-primary"> No results available </div> <div *ngIf="results != null && results.length == 0 || total == 0" class=" uk-alert uk-alert-primary"> No results available </div>
@ -75,6 +75,20 @@ export class ResultsComponent {
} }
return type; return type;
} }
public getEntityName(entityType: string, plural: boolean, full: boolean): string {
if (entityType == "publication") {
return "publication" + (plural ? "s" : "");
} else if (entityType == "dataset") {
return (full ? "research data" : ("dataset" + (plural ? "s" : "")));
} else if (entityType == "software") {
return "software";
} else if (entityType == "other") {
return (full ? ("other research product" + (plural ? "s" : "")) : "other");
} else if (entityType == "result") {
return (full ? ("research outcome" + (plural ? "s" : "")) : "result");
}
}
/* getParamId(type:string){ /* getParamId(type:string){
let param =""; let param ="";
if(type == "publication"){ if(type == "publication"){

4
src/app/utils/customization/customization.component.ts
View File

@ -59,8 +59,8 @@ export class CustomizationComponent {
if(typeof document === 'undefined') { if(typeof document === 'undefined') {
return; return;
} }
document.documentElement.style.setProperty('--portal-main-color', '#4C9CD5'); document.documentElement.style.setProperty('--portal-main-color', '#4687E6');
document.documentElement.style.setProperty('--portal-dark-color', '#24857F'); document.documentElement.style.setProperty('--portal-dark-color', '#2D72D6');
} }

10
src/app/utils/subscribe/invite/invite.component.html
View File

@ -141,9 +141,9 @@
<div class="uk-text-left"> <div class="uk-text-left">
<span uk-icon="chevron-left"></span><span class="uk-margin-small-left"> <span uk-icon="chevron-left"></span><span class="uk-margin-small-left">
<a [queryParams]="communityIdParam" routerLinkActive="router-link-active" <a [queryParams]="communityIdParam" routerLinkActive="router-link-active"
routerLink="/">Back</a> routerLink="/" class="portal-link">Back</a>
</span> </span>
</div> </div>
</div> </div>
@ -153,8 +153,8 @@
</div> </div>
</div> </div>
</div> </div>
<div class="uk-inline"> <div class="">
<button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button uk-button-primary'"> <button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button portal-button uk-button-small uk-width-1-1'">
Invite users Invite users
</button> </button>
<div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage"> <div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">

29
src/app/utils/subscribe/invite/invite.component.ts
View File

@ -34,7 +34,7 @@ export class InviteComponent implements OnInit {
@Input() communityId = null; @Input() communityId = null;
@Input() buttonSizeSmall = true; @Input() buttonSizeSmall = true;
private properties: EnvProperties = null; @Input() properties: EnvProperties;
public community = null; public community = null;
//public showLoading: boolean = true; //public showLoading: boolean = true;
@ -91,15 +91,24 @@ export class InviteComponent implements OnInit {
public ngOnInit() { public ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => { this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific; if(!this.properties) {
this.errorMessage = ""; this.properties = data.envSpecific;
this.missingCommunityId = ""; }
this.status = this.errorCodes.LOADING; if(this.properties) {
this.userManageService.getUserInfo().subscribe(user => { this.errorMessage = "";
this.user = user; this.missingCommunityId = "";
this.init(); this.status = this.errorCodes.LOADING;
}); this.userManageService.getUserInfo().subscribe(
this.init(); user => {
this.user = user;
this.init();
},
error => {
this.init();
}
);
//this.init();
}
}); });
} }

37
src/app/utils/subscribe/invite/invite.module.ts
View File

@ -18,23 +18,30 @@ import {HelperModule} from "../../../openaireLibrary/utils/helper/helper.module"
import {Schema2jsonldModule} from "../../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module"; import {Schema2jsonldModule} from "../../../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {SEOServiceModule} from "../../../openaireLibrary/sharedComponents/SEO/SEOService.module"; import {SEOServiceModule} from "../../../openaireLibrary/sharedComponents/SEO/SEOService.module";
import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service"; import {PiwikService} from "../../../openaireLibrary/utils/piwik/piwik.service";
import {InviteBasicModule} from "./inviteBasic.module";
@NgModule({ @NgModule({
imports: [ // imports: [
CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule, ErrorMessagesModule, // //CommonModule, FormsModule, RouterModule, InviteRoutingModule, CKEditorModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule // RouterModule, CommonModule, FormsModule, CKEditorModule, ErrorMessagesModule,
], // //InviteRoutingModule,
declarations: [ // HelperModule, Schema2jsonldModule, SEOServiceModule
InviteComponent // ],
], // declarations: [
providers: [ // InviteComponent
LoginGuard, PreviousRouteRecorder, // ],
EmailService, CommunityService, IsRouteEnabled, // providers: [
PiwikService // //LoginGuard,
], // PreviousRouteRecorder,
exports: [ // EmailService, CommunityService, IsRouteEnabled,
InviteComponent // PiwikService
] // ],
// exports: [
// InviteComponent
// ]
imports: [InviteBasicModule, InviteRoutingModule],
providers: [LoginGuard]
}) })
export class InviteModule { } export class InviteModule { }

38
src/app/utils/subscribe/invite/inviteBasic.module.ts Normal file
View File

@ -0,0 +1,38 @@
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {CKEditorModule} from 'ng2-ckeditor';
import {InviteComponent} from './invite.component';
import {PreviousRouteRecorder} from '../../../openaireLibrary/utils/piwik/previousRouteRecorder.guard';
import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
import {IsRouteEnabled} from "../../../openaireLibrary/error/isRouteEnabled.guard";
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";
@NgModule({
imports: [
RouterModule, CommonModule, FormsModule, CKEditorModule, ErrorMessagesModule,
HelperModule, Schema2jsonldModule, SEOServiceModule
],
declarations: [
InviteComponent
],
providers: [
PreviousRouteRecorder,
EmailService, CommunityService, IsRouteEnabled,
PiwikService
],
exports: [
InviteComponent
]
})
export class InviteBasicModule { }

40
src/app/utils/subscribe/subscribe.component.ts
View File

@ -24,14 +24,14 @@ declare var UIkit: any;
<a class="uk-alert-close" uk-close></a> <a class="uk-alert-close" uk-close></a>
<p>Please login first to subscribe</p> <p>Please login first to subscribe</p>
</div> </div>
<button *ngIf="!subscribed" [class]="'uk-button uk-button-primary' + (loading ? ' uk-disabled' : '')" <button *ngIf="!subscribed" [class]="'uk-button portal-button uk-button-small uk-width-1-1 ' + (loading ? ' uk-disabled' : '')"
(click)="subscribe()"> Subscribe</button> (click)="subscribe()"> Subscribe</button>
<button *ngIf="subscribed" [class]="'uk-button uk-button-primary' + (loading ? ' uk-disabled' : '')" <button *ngIf="subscribed" [class]="'subscribed-button uk-button uk-button-small uk-width-1-1 ' + (loading ? ' uk-disabled' : '')"
(click)="confirmOpen()"> Unsubscribe</button> (click)="confirmOpen()"> Subscribed</button>
</span> </span>
<span *ngIf="showNumbers && subscribers !=null && subscribers > 0 && showTemplate"> <span *ngIf="showNumbers && subscribers !=null && subscribers > 0 && showTemplate">
<span class="lowOpacityColor"> Members</span> {{subscribers}} <span class="lowOpacityColor uk-text-muted">Members: </span> {{subscribers}}
</span> </span>
<modal-alert (alertOutput)="confirmClose($event)"> <modal-alert (alertOutput)="confirmClose($event)">
</modal-alert> </modal-alert>
@ -50,7 +50,7 @@ export class SubscribeComponent {
loading: boolean = false; loading: boolean = false;
subscribed: boolean = null; subscribed: boolean = null;
properties: EnvProperties; @Input() properties: EnvProperties;
subscribers: number = null; subscribers: number = null;
showLoginAlert: Boolean = false; showLoginAlert: Boolean = false;
@ViewChild(AlertModal) alert; @ViewChild(AlertModal) alert;
@ -63,16 +63,26 @@ export class SubscribeComponent {
private router: Router, private router: Router,
private userManagementService: UserManagementService private userManagementService: UserManagementService
) { ) {
console.log("subscribe constructor");
} }
public ngOnInit() { public ngOnInit() {
this.route.data.subscribe((data: { envSpecific: EnvProperties }) => { this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
this.properties = data.envSpecific; if(!this.properties) {
this.properties = data.envSpecific;
}
console.log(this.properties);
if(!this.showNumbers) { if(!this.showNumbers) {
this.userManagementService.getUserInfo().subscribe(user => { this.userManagementService.getUserInfo().subscribe(
this.user = user; user => {
this.init(); this.user = user;
}); this.init();
},
error => {},
() => {
this.init();
}
);
} else { } else {
this.init(); this.init();
} }
@ -132,6 +142,7 @@ export class SubscribeComponent {
if (email == null) { if (email == null) {
this.subscribed = false; this.subscribed = false;
// this.showLoginAlert = true; // this.showLoginAlert = true;
console.log("subscribe before navigate");
this.router.navigate(['/user-info'], { this.router.navigate(['/user-info'], {
queryParams: { queryParams: {
"errorCode": LoginErrorCodes.ACTION_REQUIRES_LOGIN, "errorCode": LoginErrorCodes.ACTION_REQUIRES_LOGIN,
@ -232,10 +243,11 @@ export class SubscribeComponent {
this.alert.cancelButton = true; this.alert.cancelButton = true;
this.alert.okButton = true; this.alert.okButton = true;
this.alert.alertTitle = "Unsubscribe community "; //this.alert.alertTitle = "Unsubscribe community ";
this.alert.message = "Do you want to proceed? "; //this.alert.message = "Do you want to proceed? ";
this.alert.okButtonText = "Yes"; this.alert.message = "You are subscribed to the Community Gateway. Do you want to unsubscribe?";
this.alert.cancelButtonText = "No"; this.alert.okButtonText = "UNSUBSCRIBE";
this.alert.cancelButtonText = "CANCEL";
this.alert.open(); this.alert.open();
} }

53
src/assets/connect-custom.css
View File

@ -233,6 +233,59 @@ Impact Factor - ATHENA CODE */
} }
/* ATHENA CODE */ /* ATHENA CODE */
/*CONNECT REDESIGN*/
#subscribeBtn, #inviteBtn {
float: left;
position: fixed;
right: 0;
z-index: 100;
display: block;
width: 110px;
}
#subscribeBtn {
top: calc(35% - 47px);
}
#inviteBtn {
top: calc(40% - 47px);
}
#subscribeBtn > * > button, #inviteBtn > * > button {
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
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;
}
.subscribed-button:hover {
background-color: #71b04a !important;
}
.uk-tooltip.community-page-tooltip {
background-color: white;
display: block;
border-radius: 4px;
padding: 15px 15px 0;
border: 1px solid #DEDEDE;
color: #6c6c6c;
z-index: 10000;
}
/*END OF CONNECT REDESIGN*/
.communityApp .uk-logo{ .communityApp .uk-logo{
padding-left: 20px; padding-left: 20px;

32
src/assets/customization.css
View File

@ -82,7 +82,7 @@ a:not(.uk-button):hover,
.uk-tab>.uk-active>a, .uk-tab>.uk-active>a,
.uk-navbar-nav>li.uk-active>a, .uk-navbar-nav>li.uk-active>a,
.uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a { .uk-navbar-container:not(.uk-navbar-transparent) .uk-navbar-nav>li.uk-active>a {
color: #24857F; color: #2D72D6;
} }
.communityBorder { .communityBorder {
@ -125,13 +125,13 @@ a:not(.uk-button):hover,
border-width: 1px; border-width: 1px;
} }
.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover, /*.uk-button:not(.uk-button-text):not(.uk-button-default):not(.uk-button-primary):hover,*/
.portal-button:hover { /*.portal-button:hover {*/
background-color: #154B71; /* background-color: #154B71;*/
color: #ffffff; /* color: #ffffff;*/
border-color: #ffffff; /* border-color: #ffffff;*/
} /*}*/
*/
.communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) { .communityPanelBackground .uk-button:not(.ignoreCommunityPanelBackground) {
background-color: #ffffff !important; background-color: #ffffff !important;
@ -168,3 +168,19 @@ a:not(.uk-button):hover,
border-color: var(--portal-dark-color); border-color: var(--portal-dark-color);
} }
/*CONNECT REDESIGN*/
.communityBackground {
background-color: #F7FCFF;
color: #000000 !important;
font-size: 14px !important;
/*font-weight: 400!important;*/
}
.communityBackground .subtitle{
color: #000000 !important;
opacity: 0.6;
/*font-weight: 400!important;*/
}
/*CONNECT REDESIGN*/