Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(resource): increase width of space between entries of incoming li…
…nks (DSP-1908) (#538)

* style(resource): fix position of property action bubble

* style(resource): display the incoming links inside the list of properties
  • Loading branch information
kilchenmann committed Sep 20, 2021
1 parent 303ac3d commit 79b4d29
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 41 deletions.
46 changes: 13 additions & 33 deletions src/app/workspace/resource/properties/properties.component.html
Expand Up @@ -18,13 +18,6 @@ <h3 class="label mat-title">
<!-- <span class="desktop-only">{{showAllProps ? 'Hide empty' : 'Show all'}} properties</span> -->
</button>

<!-- TODO: activate delete action to delete the whole resource -->
<!--
<button mat-button class="delete-res">
<mat-icon>delete</mat-icon>
</button>
-->

<!-- Share resource: copy ark url, add to favorites or open in new tab -->
<button mat-icon-button class="share-res" matTooltip="Share resource: {{resource.res.versionArkUrl}}" matTooltipPosition="above"
[disabled]="deletedResource"
Expand Down Expand Up @@ -144,34 +137,21 @@ <h3 class="label mat-title">
<mat-icon>add_box</mat-icon>
</button>
</div>
</div>
</div>
</div>

<div *ngIf="incomingLinkResources.length > 0">
<div class="property border-top">
<div class="property-label">
<!-- label of the incoming links -->
<h3 class="label mat-subheading-1">
has incoming link
</h3>
</div>
<div class="property-value">
<div *ngIf="loading">
...Loading
</div>
<div *ngIf="!loading">
<!-- the value(s) of the incoming links -->
<div *ngFor="let inRes of incomingLinkResources">
<a [routerLink]="['/resource', inRes.id]" target="_blank">{{inRes.label}}</a>
<!-- in case of incoming links we have to display them here -->
<div *ngIf="prop.propDef.id === hasIncomingLinkIri && incomingLinkResources.length > 0">
<app-progress-indicator *ngIf="loading"></app-progress-indicator>
<div *ngIf="!loading">
<!-- the value(s) of the incoming links -->
<a class="link link-value" *ngFor="let inRes of incomingLinkResources" [routerLink]="['/resource', inRes.id]" target="_blank">{{inRes.label}}</a>
<mat-paginator *ngIf="numberOffAllIncomingLinkRes > 25"
[length]=numberOffAllIncomingLinkRes
[pageSize]="25"
[hidePageSize]="true"
[pageIndex]="pageEvent.pageIndex"
(page)="goToPage($event)">
</mat-paginator>
</div>
<mat-paginator
[length]=numberOffAllIncomingLinkRes
[pageSize]="25"
[hidePageSize]="true"
[pageIndex]="pageEvent.pageIndex"
(page)="goToPage($event)">
</mat-paginator>
</div>
</div>
</div>
Expand Down
Expand Up @@ -99,6 +99,11 @@
.property-value {
grid-column: 2 / span 3;
}

.link-value {
padding: 2px 0;
display: block;
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions src/app/workspace/resource/properties/properties.component.ts
Expand Up @@ -116,6 +116,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {

representationConstants = RepresentationConstants;

hasIncomingLinkIri = Constants.KnoraApiV2 + Constants.HashDelimiter + 'hasIncomingLinkValue';

project: ReadProject;
user: ReadUser;

Expand Down
13 changes: 5 additions & 8 deletions src/assets/style/_elements.scss
Expand Up @@ -673,7 +673,7 @@ $gc-small: $form-width - $gc-large - 4;
.action-bubble {
position: absolute;
right: 8px;
bottom: 16px;
top: -20px;
border: 1px solid #e4e4e4;
border-radius: 14px;
padding: 0;
Expand All @@ -689,18 +689,15 @@ $gc-small: $form-width - $gc-large - 4;
outline: none;
background-color: transparent;
color: #000000;
margin: 0 2px;
margin: 0;
border-radius: 50%;
transition: background-color ease-out 0.5s;
min-width: inherit;
line-height: normal;

&:first-child {
margin: 0 2px 0 -1px;
}

&:first-child,
&:last-child {
margin: 0 -1px 0 2px;
margin: 0 -1px;
}

.material-icons {
Expand All @@ -716,7 +713,7 @@ $gc-small: $form-width - $gc-large - 4;
}

button.info {
cursor: default;
cursor: help;
}

button:hover {
Expand Down

0 comments on commit 79b4d29

Please sign in to comment.