fix(resource): increase width of space between entries of incoming links (DSP-1908) (#538)

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

* style(resource): display the incoming links inside the list of properties

Author: kilchenmann

src/app/workspace/resource/properties/properties.component.html

@@ -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"
@@ -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>

src/app/workspace/resource/properties/properties.component.scss

@@ -99,6 +99,11 @@
       .property-value {
         grid-column: 2 / span 3;
       }
+
+      .link-value {
+        padding: 2px 0;
+        display: block;
+      }
     }
   }
 

src/app/workspace/resource/properties/properties.component.ts

@@ -116,6 +116,8 @@ export class PropertiesComponent implements OnInit, OnChanges, OnDestroy {
 
     representationConstants = RepresentationConstants;
 
+    hasIncomingLinkIri = Constants.KnoraApiV2 + Constants.HashDelimiter + 'hasIncomingLinkValue';
+
     project: ReadProject;
     user: ReadUser;
 

src/assets/style/_elements.scss

@@ -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;
@@ -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 {
@@ -716,7 +713,7 @@ $gc-small: $form-width - $gc-large - 4;
     }
 
     button.info {
-      cursor: default;
+      cursor: help;
     }
 
     button:hover {