MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change search page base on new mocks for portal results

This commit is contained in:
Konstantinos Triantafyllou 2022-02-14 18:02:00 +02:00
parent e5a644f2ae
commit db58e5c3e8
8 changed files with 50 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
searchPages/searchUtils/advancedSearchForm.component.html
View File

@ -140,11 +140,8 @@
(selectionChange)=" simpleEntityChanged($event)"
[onChangeNavigate]="true" [customFilter]="customFilter"></entities-selection>
</div>
<div *ngIf="selectedFields[0]" class="uk-inline">
<!--<a *ngIf="selectedFields[0].value.length > 0" class="uk-form-icon uk-form-icon-flip"
(click)="selectedFields[0].value = ''"
uk-icon="icon: close"></a>-->
<a class="uk-form-icon uk-form-icon-flip"
<div *ngIf="selectedFields[0]" class="uk-inline uk-link">
<a class="uk-form-icon uk-form-icon-flip uk-link-reset"
(click)="simpleKeywordChanged(null)" type="submit">
<icon name="search" flex="true"></icon>
</a>

25
searchPages/searchUtils/newSearchPage.component.html
View File

@ -4,7 +4,7 @@
refineFields.indexOf(customFilter.queryFieldName) ==
-1) ||customFilter.isHiddenFilter)">
<span class="uk-width-auto">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
</span>
</span>
@ -14,9 +14,9 @@
<ng-container *ngIf="type.selected">
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -29,9 +29,9 @@
<span class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
[class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-taguk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -43,9 +43,9 @@
<ng-container *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; ">
<span *ngIf="!customFilter || (customFilter.isHiddenFilter && customFilter.valueId != value.id)" class="uk-width-auto">
<a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)" [class.uk-disabled]="disabled">
<span class="uk-label uk-flex uk-flex-middle">
<span class="filter-tag uk-flex uk-flex-middle">
<span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
<icon name="close" ratio="0.5" flex="true"></icon>
<icon name="close" flex="true" ratio="0.7"></icon>
</span>
</a>
</span>
@ -73,7 +73,7 @@
<span *ngIf="searchUtils.refineStatus == errorCodes.NONE">No filters available</span>
<span *ngIf="searchUtils.refineStatus != errorCodes.NONE" class="uk-text-warning">Filters temporarily unavailable. Please try again later.</span>
</div>
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-large">
<ul *ngIf="!showUnknownFilters" class="uk-list uk-list-xlarge">
<li *ngIf="filters.length > 0 && filters[0].values.length >0 && filters[0].filterId == 'resultbestaccessright'">
<search-filter [filterValuesNum]="filterValuesNum" [showMoreInline]="showMoreFilterValuesInline"
[isDisabled]="disabled"
@ -110,19 +110,18 @@
[attr.uk-sticky]="(stickyForm?'{animation:false;offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
' uk-position-relative ' :(' uk-section ' ))+'}':null)">
<div style="box-sizing: border-box; "
[class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
<div [class]="' uk-background-norepeat uk-background-bottom-center uk-padding-remove-bottom uk-flex uk-flex-middle uk-background-fixed '+searchFormClass
+ (usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') && !dashboard ?
' image-front-topbar searchFormMinHeight uk-padding-remove-bottom uk-section' : '')
+(simpleView?'':' advancedSearchFormBackground ')">
<!-- TODO - Kostis until here-->
<div class="uk-width-1-1">
<div class="uk-container uk-container-large">
<div class="uk-padding-small">
<div class="uk-padding-small uk-padding-remove-bottom">
<breadcrumbs *ngIf="showBreadcrumb" [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div>
</div>
<div class="uk-position-relative uk-margin-medium-bottom">
<div class="uk-position-relative">
<div class="uk-container uk-container-large uk-section" id="searchForm">
<advanced-search-form
[entityType]="entityType"
@ -147,7 +146,7 @@
</div>
<schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
[searchAction]=false [description]="metaDescription" ></schema2jsonld>
<div id="tm-main" class=" tm-middle" [class.uk-margin-top]="stickyForm">
<div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
<div uk-grid>
<div class="tm-main uk-width-1-1@s uk-width-1-1@m uk-width-1-1@l uk-row-first ">
<div class="uk-container uk-container-large">

2
searchPages/searchUtils/newSearchPage.component.ts
View File

@ -58,7 +58,7 @@ export class NewSearchPageComponent {
@Input() customFilter: SearchCustomFilter;
@Input() sort: boolean = true;
@Input() sortedByChanged: string = "";
@Input() searchFormClass: string = "searchForm";
@Input() searchFormClass: string = "uk-background-muted";
//From simple:
@Input() rangeFilters: RangeFilter[] = [];
@Input() rangeFields: string[][] = [];

30
searchPages/searchUtils/portal-search-result.component.html
View File

@ -8,19 +8,19 @@
<span>Subscribed</span>
</div>
<div *ngIf="type === 'community' && result.status === 'manager'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('RESTRICTED')"></icon>
<span class="space uk-text-small uk-text-capitalize">restricted</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get('RESTRICTED')" ratio="1.5" class="uk-display-block"></icon>
<span class="uk-text-small uk-text-capitalize">restricted</span>
</div>
<div *ngIf="type === 'community' && result.status === 'hidden'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get('PRIVATE')"></icon>
<span class="space uk-text-small uk-text-capitalize">private</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get('PRIVATE')" ratio="1.5" class="uk-display-block"></icon>
<span class="uk-text-small uk-text-capitalize">private</span>
</div>
<div *ngIf="result.visibility && result.visibility !== 'PUBLIC'"
class="uk-position-top-right uk-margin-top uk-margin-right uk-flex uk-flex-middle">
<icon [name]="visibilityIcon.get(result.visibility)"></icon>
<span class="space uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
class="uk-position-top-right uk-margin-top uk-margin-right uk-text-center">
<icon [name]="visibilityIcon.get(result.visibility)" ratio="1.5" class="uk-display-block"></icon>
<span class="uk-text-small uk-text-capitalize">{{result.visibility.toLowerCase()}}</span>
</div>
</div>
<div class="uk-grid uk-flex uk-flex-middle" uk-grid>
@ -64,21 +64,25 @@
{{result.description}}
</p>
</div>
<div class="uk-text-small uk-flex uk-flex-middle">
<span class="uk-text-muted" *ngIf="result.date || result.creationDate">Creation Date: </span>
<div class="uk-text-small">
<div *ngIf="result.date || result.creationDate" class="uk-flex uk-flex-middle uk-margin-small-bottom">
<span class="uk-text-muted">Creation Date: </span>
<span class="uk-margin-small-left" *ngIf="result.date">{{result.date | date:'dd-MM-yyyy'}}</span>
<span class="uk-margin-small-left" *ngIf="result.creationDate">{{result.creationDate | date:'dd-MM-yyyy'}}</span>
<span *ngIf="type === 'community' && showType && result.type" class="uk-margin-left">
</div>
<div class="uk-flex uk-flex-middle">
<span *ngIf="type === 'community' && showType && result.type">
<span class="uk-text-muted">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
<span *ngIf="type === 'stakeholder' && result.type" class="uk-margin-left">
<span *ngIf="type === 'stakeholder' && result.type">
<span class="uk-text-muted">Type:</span>
<span class="uk-margin-small-left uk-text-capitalize">{{mapType(result.type)}}</span>
</span>
</div>
</div>
</div>
</div>
<div *ngIf="result.isManager" class="uk-flex uk-flex-right uk-margin-top">
<manage [communityId]="result.communityId" [alias]="result.alias"></manage>
</div>

2
searchPages/searchUtils/portal-search-result.component.ts
View File

@ -22,7 +22,7 @@ export class PortalSearchResultComponent implements OnInit{
@Input() properties: EnvProperties;
@ViewChild('AlertModal') modal;
visibilityIcon: Map<Visibility, string> = new Map<Visibility, string> ([
["PRIVATE", 'lock'],
["PRIVATE", 'visibility_off'],
["RESTRICTED", 'group']
]);
public urlParam: string;

6
searchPages/searchUtils/portal-search-result.module.ts
View File

@ -9,10 +9,8 @@ import {ManageModule} from "../../utils/manage/manage.module";
import {IconsModule} from "../../utils/icons/icons.module";
import {UrlPrefixModule} from "../../utils/pipes/url-prefix.module";
import {IconsService} from "../../utils/icons/icons.service";
import {group, lock} from "../../utils/icons/icons";
import {lock} from "../../utils/icons/icons";
import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
// import {IconsService} from "../../utils/icons/icons.service";
// import {group, lock} from "../../utils/icons/icons";
@NgModule({
imports: [
@ -31,6 +29,6 @@ import {LogoUrlPipeModule} from "../../utils/pipes/logoUrlPipe.module";
})
export class PortalSearchResultModule {
constructor(private iconsService: IconsService) {
this.iconsService.registerIcons([group, lock])
this.iconsService.registerIcons([lock])
}
}

2
utils/breadcrumbs/breadcrumbs.component.ts
View File

@ -8,7 +8,7 @@ export interface Breadcrumb {
@Component({
selector: 'breadcrumbs',
template: `
<ul class="uk-breadcrumb" [ngClass]="addClass" [class.uk-light]="light">
<ul class="uk-breadcrumb uk-margin-remove-bottom" [ngClass]="addClass" [class.uk-light]="light">
<li *ngFor="let breadcrumb of breadcrumbs">
<a class="uk-text-capitalize" *ngIf="breadcrumb.route" [routerLink]="breadcrumb.route">{{breadcrumb.name}}</a>
<span class="uk-text-capitalize" *ngIf="!breadcrumb.route">{{breadcrumb.name}}</span>

2
utils/icons/icons.component.ts
View File

@ -22,7 +22,7 @@ import {IconsService} from "./icons.service";
selector: 'icon',
template: `
<span #icon *ngIf="svg" class="uk-icon" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
<span [class.uk-flex]="flex" [ngClass]="customClass">
<span [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
<span *ngIf="!svg && iconName" class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
</span>
<span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>