Fix flickering for linking basket

This commit is contained in:
Konstantinos Triantafyllou 2022-09-14 09:26:57 +03:00
parent 945cee4519
commit b7a5cf34ab
1 changed files with 91 additions and 92 deletions

View File

@ -35,8 +35,7 @@
<div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '"> <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
<div *ngIf="properties" class="uk-section uk-padding-remove-top"> <div *ngIf="properties" class="uk-section uk-padding-remove-top">
<div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '"> <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
<div id="basketStickTop"></div> <div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'" uk-grid>
<div class="uk-grid basketContainer" *ngIf="showOptions.show!='claim'">
<div class="uk-width-2-3 uk-position-z-index"> <div class="uk-width-2-3 uk-position-z-index">
<div *ngIf="showOptions.show=='source'"> <div *ngIf="showOptions.show=='source'">
<claim-result-search-form [selectedResults]="sources" [properties]=properties <claim-result-search-form [selectedResults]="sources" [properties]=properties
@ -66,113 +65,113 @@
</div> </div>
<!-- Basket--> <!-- Basket-->
<div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3"> <div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3">
<div id="basket" uk-sticky=" offset: 220; top:#basketStickTop; bottom: #basketStickBottom; media: @m" <div id="basket" uk-sticky="offset: 220; bottom: !*; media: @m" style="z-index: 0!important;">
class="uk-card uk-card-default linkingBasket" style="z-index: 0!important;"> <div class="uk-card uk-card-default linkingBasket">
<div class="uk-card-body uk-padding-small"> <div class="uk-card-body uk-padding-small">
<div class="uk-margin-right"> <div class="uk-margin-right">
<ul class="uk-tab" uk-tab> <ul class="uk-tab" uk-tab>
<li [class.uk-active]="showOptions.basketShowSources" <li [class.uk-active]="showOptions.basketShowSources"
(click)="showOptions.basketswitchToSources()"> (click)="showOptions.basketswitchToSources()">
<a> <a>
Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}}) Sources to link ({{(sources.length + (inlineEntity ? 1 : 0)) |number}})
</a> </a>
</li> </li>
<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">
<a (click)="showOptions.basketswitchToLinkTo()">Link to <span <a (click)="showOptions.basketswitchToLinkTo()">Link to <span
*ngIf="results.length> 0">({{(results.length) | number}})</span> *ngIf="results.length> 0">({{(results.length) | number}})</span>
</a> </a>
</li> </li>
</ul> </ul>
<div *ngIf="showOptions.basketShowSources"> <div *ngIf="showOptions.basketShowSources">
<div class="uk-height-medium uk-overflow-auto"> <div class="uk-height-medium uk-overflow-auto">
<div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;"> <div *ngIf="showOptions.show == 'source'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height:17px;">
<start-over *ngIf="showOptions.show == 'source' && sources.length> 0" <start-over *ngIf="showOptions.show == 'source' && sources.length> 0"
[results]="sources" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" [localStoragePrefix]="localStoragePrefix+'sources'"
message="all sources" class="uk-float-right"></start-over> message="all sources" class="uk-float-right"></start-over>
<bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources" <bulk-claim *ngIf="showOptions.show == 'source'" [results]="sources"
[properties]=properties [properties]=properties
[localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit" [localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
> >
</bulk-claim> </bulk-claim>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="sources.length == 0 && !inlineEntity " class="uk-text-center uk-text-meta">
No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
</div> </div>
<div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center"> <div class="uk-padding-small uk-padding-remove-horizontal">
Basket reached the size limit. No more sources can be added. <div *ngIf="sources.length == 0 && !inlineEntity " class="uk-text-center uk-text-meta">
No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
</div>
<div *ngIf="sources.length >= basketLimit " class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more sources can be added.
</div>
<claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="false" type="source">
</claim-selected-results>
<claim-selected-results *ngIf="sources.length > 0" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="true" type="source">
</claim-selected-results>
</div> </div>
<claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="false" type="source">
</claim-selected-results>
<claim-selected-results *ngIf="sources.length > 0" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="true" type="source">
</claim-selected-results>
</div> </div>
</div> </div>
</div> <div *ngIf="showOptions.basketShowLinksTo">
<div *ngIf="showOptions.basketShowLinksTo"> <div class="uk-height-medium uk-overflow-auto">
<div class="uk-height-medium uk-overflow-auto"> <div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;">
<div *ngIf="(results.length)> 0 || showOptions.show=='result'" class="uk-padding-small uk-padding-remove-horizontal" style="min-height: 17px;"> <start-over *ngIf=" (results.length)> 0"
<start-over *ngIf=" (results.length)> 0" [results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
[results]="results" [localStoragePrefix]="localStoragePrefix+'results'" message="all results (projects, communities, research results)"
message="all results (projects, communities, research results)" class="uk-float-right"></start-over>
class="uk-float-right"></start-over> <bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties
<bulk-claim *ngIf="showOptions.show=='result'" [results]="results" [properties]=properties [localStoragePrefix]="localStoragePrefix+'results'"
[localStoragePrefix]="localStoragePrefix+'results'" [basketLimit]="basketLimit"></bulk-claim>
[basketLimit]="basketLimit"></bulk-claim>
</div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="results.length >= basketLimit "
class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more entities can be added.
</div>
<claim-selected-results sectionTitle="Selected Results" [results]="results"
[localStoragePrefix]="localStoragePrefix+'results'" type="target">
</claim-selected-results>
<div *ngIf="(results.length) == 0 " class=" uk-text-center">
No entities to link with the sources. Start adding entities from the left panel.
</div> </div>
<div class="uk-padding-small uk-padding-remove-horizontal">
<div *ngIf="results.length >= basketLimit "
class="uk-alert uk-alert-warning uk-text-center">
Basket reached the size limit. No more entities can be added.
</div>
<claim-selected-results sectionTitle="Selected Results" [results]="results"
[localStoragePrefix]="localStoragePrefix+'results'" type="target">
</claim-selected-results>
<div *ngIf="(results.length) == 0 " class=" uk-text-center">
No entities to link with the sources. Start adding entities from the left panel.
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div *ngIf="showOptions.show == 'source'"
<div *ngIf="showOptions.show == 'source'" class="uk-card-footer uk-flex uk-flex-center clickable"
class="uk-card-footer uk-flex uk-flex-center clickable" [class.uk-tile-primary]="sources.length > 0"
[class.uk-tile-primary]="sources.length > 0" [class.uk-background-muted]="sources.length == 0"
[class.uk-background-muted]="sources.length == 0" [class.uk-disabled]="sources.length == 0"
[class.uk-disabled]="sources.length == 0" (click)="stepHasChanged('target')">
(click)="stepHasChanged('target')"> <button class="uk-flex uk-flex-middle uk-button uk-button-text"
<button class="uk-flex uk-flex-middle uk-button uk-button-text" [class.uk-disabled]="sources.length == 0" [disabled]="sources.length == 0">
[class.uk-disabled]="sources.length == 0" [disabled]="sources.length == 0"> <icon name="link" visuallyHidden="link" [flex]="true"></icon>
<icon name="link" visuallyHidden="link" [flex]="true"></icon> <div class="uk-width-expand uk-margin-small-left">STEP 2 - LINK SOURCES TO ENTITIES</div>
<div class="uk-width-expand uk-margin-small-left">STEP 2 - LINK SOURCES TO ENTITIES</div> </button>
</button>
</div> </div>
<div *ngIf="showOptions.show != 'source'" <div *ngIf="showOptions.show != 'source'"
class="uk-card-footer uk-flex uk-flex-center clickable" class="uk-card-footer uk-flex uk-flex-center clickable"
[class.uk-tile-primary]="results.length > 0" [class.uk-tile-primary]="results.length > 0"
[class.uk-background-muted]="results.length == 0" [class.uk-background-muted]="results.length == 0"
[class.uk-disabled]="results.length == 0" (click)="stepHasChanged('claim')"> [class.uk-disabled]="results.length == 0" (click)="stepHasChanged('claim')">
<button class="uk-flex uk-flex-middle uk-button uk-button-text" <button class="uk-flex uk-flex-middle uk-button uk-button-text"
[class.uk-disabled]="results.length == 0" [disabled]="results.length == 0"> [class.uk-disabled]="results.length == 0" [disabled]="results.length == 0">
<icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon> <icon *ngIf="inlineEntity" name="link" visuallyHidden="link" [flex]="true"></icon>
<div class="uk-width-expand uk-margin-small-left">STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH</div> <div class="uk-width-expand uk-margin-small-left">STEP {{inlineEntity ? '2' : '3'}} - FINALISE AND FINISH</div>
</button> </button>
</div>
</div> </div>
</div> </div>
</div> </div>
<!-- <helper position="right" styleName=" uk-width-1-5"></helper>--> <!-- <helper position="right" styleName=" uk-width-1-5"></helper>-->
</div> </div>
<div id="basketStickBottom"></div>
<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
[texts]="pageContents['bottom']"></helper> [texts]="pageContents['bottom']"></helper>
</div> </div>