[Connect & Library | new-theme]: Replaced "Subscribed" badge with "Member" text | Renamed "subscriber" filter to "member" in search communities page | Fixed "view all" buttons in my communities page.

1. browse-community.component.html: Replaced "Subscribed" badge with "Member" text | Updated how restricted/private icons are displayed.
2. browse-community.component.ts: Updated visibilityIcon map (PRIVATE -> incognito icon, RESTRICTED -> restricted icon).
3. browse-community.module.ts: iconsService.registerIcons([incognito, restricted]).
4. communities.component.html & my-communities.component.html: Added uk-button class in "View all" button for communities.
5. portal-search-result.component.html: Replaced "Subscribed" badge with "Member" text.
6. searchCommunities.component.ts: Renamed "subscriber" filter to "member".
This commit is contained in:
Konstantina Galouni 2022-06-03 18:34:23 +03:00
parent 45b3334519
commit a6d3c02aa5
7 changed files with 33 additions and 27 deletions

View File

@ -9,18 +9,18 @@
<ng-template #card> <ng-template #card>
<div class="uk-padding"> <div class="uk-padding">
<div *ngIf="community.isSubscribed" <div *ngIf="community.isSubscribed"
class="uk-alert-primary portal-card-badge uk-text-center uk-position-top-left uk-padding-small"> class="uk-text-background uk-text-center uk-position-top-left uk-padding-small uk-text-uppercase uk-text-bold">
<span>Subscribed</span> Member
</div> </div>
<div *ngIf="community.status === 'manager'" <div *ngIf="community.status === 'manager'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="0.85" flex="true"></icon> <icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.2" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-small uk-text-capitalize">restricted</span> <span class="uk-text-small uk-text-capitalize">restricted</span>
</div> </div>
<div *ngIf="community.status === 'hidden'" <div *ngIf="community.status === 'hidden'"
class="uk-position-top-right uk-margin-small-top uk-margin-right uk-flex uk-flex-middle"> class="uk-position-top-right uk-margin-small-top uk-margin-small-right uk-flex uk-flex-column uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="0.85" flex="true"></icon> <icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.2" [flex]="true"></icon>
<span class="uk-margin-small-left uk-text-small uk-text-capitalize">private</span> <span class="uk-text-small uk-text-capitalize">private</span>
</div> </div>
<!-- community-logo--> <!-- community-logo-->
<div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall <div class="uk-card-media-top uk-flex uk-flex-center uk-flex-middle uk-height-xsmall

View File

@ -30,8 +30,8 @@ export class BrowseCommunityComponent {
public directLink: boolean = true; public directLink: boolean = true;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([ visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'], ["PRIVATE", 'incognito'],
["RESTRICTED", 'group'] ["RESTRICTED", 'restricted']
]); ]);
constructor(private route: ActivatedRoute, constructor(private route: ActivatedRoute,

View File

@ -11,6 +11,8 @@ import {AlertModalModule} from "../../openaireLibrary/utils/modal/alertM
import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module"; import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module";
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module"; import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module"; import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
import {incognito, restricted} from "../../openaireLibrary/utils/icons/icons";
@NgModule({ @NgModule({
imports: [ imports: [
@ -26,4 +28,8 @@ import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
BrowseCommunityComponent BrowseCommunityComponent
] ]
}) })
export class BrowseCommunityModule { } export class BrowseCommunityModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([incognito, restricted])
}
}

View File

@ -261,7 +261,7 @@
</div> </div>
<div class="uk-text-center uk-margin-medium-top"> <div class="uk-text-center uk-margin-medium-top">
<a *ngIf="researchCommunities.length > 3" <a *ngIf="researchCommunities.length > 3"
class="uk-display-inline-block uk-text-uppercase uk-button-text" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities"> routerLinkActive="router-link-active" routerLink="/search/find/communities">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<span>View All</span> <span>View All</span>

View File

@ -26,13 +26,13 @@
</div> </div>
</div> </div>
</div> </div>
<div *ngIf="managerOfCommunities.length > 4" class="uk-text-center uk-margin-medium-top"> <div *ngIf="managerOfCommunities.length > 4" class="uk-text-center uk-margin-large-top">
<a class="uk-margin-large-top uk-display-inline-block uk-text-uppercase uk-button-text" <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
routerLinkActive="router-link-active" routerLink="/search/find/communities" routerLinkActive="router-link-active" routerLink="/search/find/communities"
[queryParams]="{role: quote('manager')}"> [queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<span>View All ({{managerOfCommunities.length}})</span> <span>View All ({{managerOfCommunities.length}})</span>
</span> </span>
</a> </a>
</div> </div>
</div> </div>
@ -45,15 +45,15 @@
</div> </div>
</div> </div>
</div> </div>
</div> <div *ngIf="managerOfCommunities.length > 3" class="uk-text-center uk-margin-large-top">
<div *ngIf="managerOfCommunities.length > 3" class="uk-text-center uk-margin-medium-top"> <a class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text"
<a class="uk-hidden@xl uk-display-inline-block uk-text-uppercase uk-button-text" routerLinkActive="router-link-active" routerLink="/search/find/communities"
routerLinkActive="router-link-active" routerLink="/search/find/communities" [queryParams]="{role: quote('manager')}">
[queryParams]="{role: quote('manager')}">
<span class="uk-flex uk-flex-middle"> <span class="uk-flex uk-flex-middle">
<span>View All ({{managerOfCommunities.length}})</span> <span>View All ({{managerOfCommunities.length}})</span>
</span> </span>
</a> </a>
</div>
</div> </div>
</div> </div>
</div> </div>

@ -1 +1 @@
Subproject commit b88c65a3430a3689770e40e1e6f34d8bb10b86c3 Subproject commit 658c96bb02308e0dec08178ce269fb4b14475bb8

View File

@ -336,7 +336,7 @@ export class SearchCommunitiesComponent {
break; break;
} }
} }
if (value.replace(/["']/g, "") == 'subscriber') { if (value.replace(/["']/g, "") == 'member') {
if (this.results[i].isSubscribed) { if (this.results[i].isSubscribed) {
results.push(this.results[i]); results.push(this.results[i]);
break; break;
@ -476,8 +476,8 @@ export class SearchCommunitiesComponent {
value_original_ids.push(["public", "restricted", "private"]); value_original_ids.push(["public", "restricted", "private"]);
filter_names.push("Role"); filter_names.push("Role");
filter_ids.push("role"); filter_ids.push("role");
value_names.push(["Manager", "Subscriber"]); value_names.push(["Manager", "Member"]);
value_original_ids.push(["manager", "subscriber"]); value_original_ids.push(["manager", "member"]);
} }
let filters: Filter[] = []; let filters: Filter[] = [];
for (let i = 0; i < filter_names.length; i++) { for (let i = 0; i < filter_names.length; i++) {