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

update layout for claims: icons, spaces, make stepper sticky in final step

This commit is contained in:
argirok 2022-06-06 17:35:26 +03:00
parent f3af762dab
commit 10635c09ec
6 changed files with 59 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
claims/claim-utils/claimResults.component.ts
View File

@ -10,12 +10,12 @@ declare var UIkit: any;
<div *ngIf="results.length > 0 " class="uk-margin-top"> <div *ngIf="results.length > 0 " class="uk-margin-top">
<div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-card-body uk-margin-bottom claim-result-card"> <div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-card-body uk-margin-bottom claim-result-card">
<div> <div>
<div class="uk-text-small uk-margin-small-bottom"> <div class="uk-text-small ">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div> </div>
<div class="uk-grid"> <div class="uk-grid">
<div class="uk-width-expand uk-margin-right"> <div class="uk-width-expand uk-margin-right">
<claim-title [entity]="entity"></claim-title> <claim-title [entity]="entity" [showIcon]="false"></claim-title>
<claim-result-metadata [entity]="entity"></claim-result-metadata> <claim-result-metadata [entity]="entity"></claim-result-metadata>
<claim-project-metadata [entity]="entity"></claim-project-metadata> <claim-project-metadata [entity]="entity"></claim-project-metadata>
</div> </div>

13
claims/linking/linkingGeneric.component.html
View File

@ -3,7 +3,7 @@
<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
</div> </div>
</div> </div>
<div uk-sticky=" offset: 65; top:#basketStickTop; bottom: #basketStickBottom; media: @m" <div uk-sticky=" offset: 65; top:#pageTop; bottom: #pageBottom; media: @m"
style="z-index: 100" class="uk-background-default uk-margin-small-top"> style="z-index: 100" class="uk-background-default uk-margin-small-top">
<stepper> <stepper>
<step *ngIf="!inlineEntity" [status]="stepStatus('source')" stepId="source" stepNumber="1" <step *ngIf="!inlineEntity" [status]="stepStatus('source')" stepId="source" stepNumber="1"
@ -20,7 +20,7 @@
</stepper> </stepper>
</div> </div>
<div id="pageTop"></div>
<metadata-preview *ngIf="showOptions.show=='claim' && properties" class="uk-margin-top" <metadata-preview *ngIf="showOptions.show=='claim' && properties" class="uk-margin-top"
[results]="results" [sources]="sources" [results]="results" [sources]="sources"
[localStoragePrefix]="localStoragePrefix" [inlineEntity]="inlineEntity" [localStoragePrefix]="localStoragePrefix" [inlineEntity]="inlineEntity"
@ -91,13 +91,11 @@
<li [class.uk-disabled]="sources.length == 0 && !inlineEntity" <li [class.uk-disabled]="sources.length == 0 && !inlineEntity"
[class.uk-active]="showOptions.basketShowLinksTo" [class.uk-active]="showOptions.basketShowLinksTo"
(click)="showOptions.basketswitchToLinkTo()"><a href="#">Link to <span (click)="showOptions.basketswitchToLinkTo()"><a href="#">Link to <span
*ngIf="results.length *ngIf="results.length> 0">({{(results.length) | number}})</span></a></li>
> 0">(
{{(results.length) | number}})</span></a></li>
</ul> </ul>
<div *ngIf="showOptions.basketShowSources" class="uk-padding-small"> <div *ngIf="showOptions.basketShowSources" class="">
<div <div
class=" uk-margin-remove-top uk-height-medium uk-overflow-auto "> class=" uk-margin-remove-top uk-height-medium uk-overflow-auto ">
@ -136,7 +134,7 @@
</div> </div>
<div *ngIf="showOptions.basketShowLinksTo" class="uk-padding-small"> <div *ngIf="showOptions.basketShowLinksTo" class="">
<div <div
class="uk-height-medium uk-overflow-auto"> class="uk-height-medium uk-overflow-auto">
<div *ngIf=" (results.length)> 0 || showOptions.show=='result'" <div *ngIf=" (results.length)> 0 || showOptions.show=='result'"
@ -222,6 +220,7 @@
</div> </div>
</div> </div>
</div> </div>
<div id="pageBottom"></div>
<modal-alert (alertOutput)="closeSelectionModal($event)" > <modal-alert (alertOutput)="closeSelectionModal($event)" >
<div class="uk-grid uk-text-center uk-margin-expand uk-padding uk-child-width-1-3"> <div class="uk-grid uk-text-center uk-margin-expand uk-padding uk-child-width-1-3">

2
claims/linking/selected/ClaimEntityProjectMetadata.component.ts
View File

@ -4,7 +4,7 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
@Component({ @Component({
selector: 'claim-project-metadata', selector: 'claim-project-metadata',
template: ` template: `
<div *ngIf="entity.type == 'project' && entity.project" class="uk-text-small uk-flex uk-flex-wrap" style="grid-gap: 20px;"> <div *ngIf="entity.type == 'project' && entity.project" class="uk-text-small uk-flex uk-flex-wrap" [style.grid-gap]="shortVersion?'10px':'20px'">
<div *ngIf="entity.project.funderName"> <div *ngIf="entity.project.funderName">
<span class="uk-text-meta">Funder: </span>{{entity.project.funderName}} <span class="uk-text-meta">Funder: </span>{{entity.project.funderName}}
</div> </div>

13
claims/linking/selected/ClaimEntityTitle.component.ts
View File

@ -7,7 +7,17 @@ import {StringUtils} from "../../../utils/string-utils.class";
template: template:
` `
<div class="uk-grid uk-flex uk-flex-middle"> <div class="uk-grid uk-flex uk-flex-middle">
<div class="uk-width-expand " style="word-break: break-word;" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion" [class.uk-text-truncate]="shortVersion" [class.uk-margin-bottom]="!shortVersion" [class.uk-margin-small-bottom]="shortVersion"> <span *ngIf="showIcon" >
<span *ngIf=" entity.result" class="material-icons uk-text-small uk-text-meta" >insert_drive_file
</span>
<span *ngIf=" entity.project"
class="material-icons uk-text-small uk-text-meta">assignment_turned_in
</span>
<span *ngIf="entity.type=='community'" style="margin-right: 2px;"
class="material-icons uk-text-small uk-text-meta">people
</span></span>
<div class="uk-width-expand " style="word-break: break-word;" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion" [class.uk-text-truncate]="shortVersion" [class.uk-margin-bottom]="!shortVersion" [class.uk-padding-remove-left]="showIcon">
<a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url" <a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
class="uk-link uk-link-heading">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a> class="uk-link uk-link-heading">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a>
<span <span
@ -53,6 +63,7 @@ export class ClaimEntityTitleComponent {
@Input() slice:boolean = false; @Input() slice:boolean = false;
@Input() sliceSize:number = 45; @Input() sliceSize:number = 45;
@Input() shortVersion: boolean = false; @Input() shortVersion: boolean = false;
@Input() showIcon: boolean = false;
ngOnInit() { ngOnInit() {

106
claims/linking/selected/metadataPreview.component.html
View File

@ -27,8 +27,9 @@
</div> </div>
<ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider"> <ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider">
<li> <li>
<div class="uk-grid uk-text-small"> <div class="uk-grid uk-text-small uk-margin-top">
<div class="uk-text-muted uk-width-1-2"> <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
{{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}} {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}
</div> </div>
<div *ngIf="inlineEntity.errorMessages.length > 0" <div *ngIf="inlineEntity.errorMessages.length > 0"
@ -38,19 +39,13 @@
<!-- <div class="uk-text-muted">--> <!-- <div class="uk-text-muted">-->
<!-- {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}--> <!-- {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}-->
<!-- </div>--> <!-- </div>-->
<div class="uk-grid uk-flex uk-flex-middle">
<div> <div class="">
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span> <claim-title [shortVersion]="true" [entity]="inlineEntity" [showIcon]="false"></claim-title>
<!-- <span class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
</div>
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<div>
<claim-title [shortVersion]="true" [entity]="inlineEntity"></claim-title>
</div> </div>
<claim-result-metadata [entity]="inlineEntity"></claim-result-metadata> <claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
<claim-project-metadata [entity]="inlineEntity"></claim-project-metadata> <claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>
</div>
</div>
</li> </li>
</ul> </ul>
@ -64,26 +59,20 @@
</div> </div>
<ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider"> <ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
<li *ngFor=" let entity of sources "> <li *ngFor=" let entity of sources ">
<!-- <div class="uk-text-muted">--> <div class="uk-grid uk-text-small uk-margin-top">
<!-- {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}--> <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
<!-- </div>--> <span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
<div class="uk-grid uk-text-small">
<div class="uk-text-muted uk-width-1-2">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div> </div>
<div *ngIf="entity.errorMessages.length > 0" <div *ngIf="entity.errorMessages.length > 0"
class="uk-text-danger uk-width-1-2"> Link couldn't be saved class="uk-text-danger uk-width-1-2"> Link couldn't be saved
</div> </div>
</div> </div>
<div class="uk-grid uk-margin-remove-top"> <div class="uk-grid uk-margin-remove-top uk-margin-bottom">
<div class="uk-width-expand ">
<div> <claim-title [shortVersion]="true" [entity]="entity" [showIcon]="false"></claim-title>
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
<!-- <span class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
</div>
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<claim-title [shortVersion]="true" [entity]="entity"></claim-title>
<claim-result-metadata [entity]="entity"></claim-result-metadata> <claim-result-metadata [entity]="entity"></claim-result-metadata>
<claim-project-metadata [entity]="entity"></claim-project-metadata> <claim-project-metadata [entity]="entity"></claim-project-metadata>
<div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' " <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
@ -189,8 +178,16 @@
<ul *ngIf="results.length > 0 " class="uk-list uk-animation-fade uk-list-divider"> <ul *ngIf="results.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
<li *ngFor=" let entity of results " <li *ngFor=" let entity of results "
style="z-index: 0 !important;"> style="z-index: 0 !important;">
<div class="uk-grid uk-text-small"> <div class="uk-grid uk-text-small uk-margin-top">
<div class="uk-text-muted uk-width-1-2"> <div class="uk-text-muted uk-width-1-2 uk-flex uk-flex-middle">
<span *ngIf="entity.result" class="material-icons uk-text-small uk-text-meta">insert_drive_file
</span>
<span *ngIf="entity.project"
class="material-icons uk-text-small uk-text-meta">assignment_turned_in
</span>
<span *ngIf="entity.type=='community'"
class="material-icons uk-text-small uk-text-meta">people
</span>
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div> </div>
<div *ngIf="entity.errorMessages.length > 0" <div *ngIf="entity.errorMessages.length > 0"
@ -198,63 +195,12 @@
</div> </div>
</div> </div>
<div class="uk-grid uk-margin-remove-top"> <div class="uk-grid uk-margin-remove-top uk-margin-bottom">
<div class="uk-width-expand"> <div class="uk-width-expand">
<claim-title [shortVersion]="true" [entity]="entity"></claim-title> <claim-title [shortVersion]="true" [entity]="entity" [showIcon]="false"></claim-title>
<claim-result-metadata [entity]="entity"></claim-result-metadata> <claim-result-metadata [entity]="entity"></claim-result-metadata>
<claim-project-metadata [entity]="entity"></claim-project-metadata> <claim-project-metadata [entity]="entity"></claim-project-metadata>
<div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
class="uk-grid uk-text-small uk-margin-remove-left uk-margin-small-top">
<div class="uk-width-1-2 uk-padding-remove-left">
<!-- <span class="uk-text-muted">Type </span>-->
<mat-form-field class="matSelectionFormField">
<mat-label>Type</mat-label>
<mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
class=" matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option [value]="'publication'"
(click)="onTypeChanged('publication',entity, false)">Publication
</mat-option>
<mat-option [value]="'dataset'"
(click)="onTypeChanged('dataset',entity, false)">Research data
</mat-option>
<mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
</mat-option>
<mat-option [value]="'other'"
(click)="onTypeChanged('other',entity, false)">Other research product
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="uk-width-1-2">
<div class="uk-grid">
<!-- <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
<mat-form-field class="matSelectionFormField">
<mat-label>Access mode </mat-label>
<mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
class=" uk-padding-remove-left matSelection"
[disableOptionCentering]="true"
panelClass="matSelectionPanel">
<mat-option *ngFor="let type of accessTypes" [value]="type"
(click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
<input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
(click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"
(dateInput)="onDateChanged($event, entity, true)"
(dateChange)="onDateChanged($event, entity, true)">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_result']" ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
</mat-form-field>
</div>
<div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
[class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
</div>
</div>
</div>
</div> </div>
<div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left"> <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
<a class="uk-link " <a class="uk-link "

18
claims/linking/selected/selectedResults.component.html
View File

@ -3,13 +3,19 @@
<!--<div class="uk-text-muted"> <!--<div class="uk-text-muted">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}} {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div>--> </div>-->
<div class="uk-grid uk-flex uk-flex-middle uk-margin-small-top uk-margin-small-bottom"> <div class="uk-grid uk-flex uk-flex-middle uk-margin-small-top uk-margin-small-bottom uk-margin-remove-left">
<div > <!--<div >
<span *ngIf="type == 'source'" class="material-icons uk-text-small uk-text-meta">insert_drive_file</span> <span *ngIf="type == 'source' || entity.result" class="material-icons uk-text-small uk-text-meta">insert_drive_file
<span *ngIf="type == 'target'" class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span> </span>
</div> <span *ngIf="type == 'target' && entity.project"
class="material-icons uk-text-small uk-text-meta">assignment_turned_in
</span>
<span *ngIf="entity.type=='community'"
class="material-icons uk-text-small uk-text-meta">people
</span>
</div>-->
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left"> <div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="shortVersion"></claim-title> <claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="shortVersion" [showIcon]="true"></claim-title>
<claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-result-metadata> <claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-result-metadata>
<claim-project-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-project-metadata> <claim-project-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-project-metadata>
</div> </div>