support truncation on different backgrounds

src/app/shared/dso-selector/dso-selector/dso-selector.component.html

@@ -22,6 +22,7 @@
             class="list-group-item list-group-item-action border-0 list-entry"
             [ngClass]="{'bg-primary': listEntry.indexableObject.id === currentDSOId}"
             title="{{ listEntry.indexableObject.name }}"
+            dsHoverClass="ds-hover"
             (click)="onSelect.emit(listEntry.indexableObject)" #listEntryElement>
       <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
                                            [linkType]=linkTypes.None [context]="getContext(listEntry.indexableObject.id)"></ds-listable-object-component-loader>

src/app/shared/dso-selector/dso-selector/dso-selector.component.scss

@@ -1,5 +1,5 @@
 .scrollable-menu {
   height: auto;
-  max-height: min(70vh, 475px);
+  max-height: $dso-selector-list-max-height;
   overflow-x: hidden;
 }

src/app/shared/dso-selector/dso-selector/dso-selector.component.ts

@@ -107,6 +107,11 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
    */
   linkTypes = CollectionElementLinkType;
 
+  /**
+   * Track whether the element has the mouse over it
+   */
+  isMouseOver = false
+
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}

src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html

@@ -1,13 +1,13 @@
-<ds-truncatable-part *ngIf="parentTitle$ && parentTitle$ | async" [maxLines]="1">
+<ds-truncatable-part *ngIf="parentTitle$ && parentTitle$ | async" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
   <div [ngClass]="isCurrent() ? 'text-light' : 'text-body'"
        [innerHTML]="parentTitle$ | async"></div>
 </ds-truncatable-part>
-<ds-truncatable-part *ngIf="title" [maxLines]="1">
+<ds-truncatable-part *ngIf="title" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
   <div class="font-weight-bold"
        [ngClass]="isCurrent() ? 'text-light' : 'text-primary'"
        [innerHTML]="title"></div>
 </ds-truncatable-part>
-<ds-truncatable-part *ngIf="description" [maxLines]="1">
+<ds-truncatable-part *ngIf="description" [maxLines]="1" [background]="isCurrent() ? 'primary' : 'default'">
   <div class="text-secondary"
        [ngClass]="isCurrent() ? 'text-light' : 'text-secondary'"
        [innerHTML]="description"></div>

src/app/shared/shared.module.ts

@@ -216,6 +216,7 @@ import { CollectionSidebarSearchListElementComponent } from './object-list/sideb
 import { CommunitySidebarSearchListElementComponent } from './object-list/sidebar-search-list-element/community/community-sidebar-search-list-element.component';
 import { AuthorizedCollectionSelectorComponent } from './dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component';
 import { DsoPageEditButtonComponent } from './dso-page/dso-page-edit-button/dso-page-edit-button.component';
+import { HoverClassDirective } from './hover-class.directive';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -501,6 +502,7 @@ const ENTRY_COMPONENTS = [
 const SHARED_ITEM_PAGE_COMPONENTS = [
   MetadataFieldWrapperComponent,
   MetadataValuesComponent,
+  DsoPageEditButtonComponent
 ];
 
 const PROVIDERS = [
@@ -531,7 +533,8 @@ const DIRECTIVES = [
   FileValidator,
   ClaimedTaskActionsDirective,
   NgForTrackByIdDirective,
-  MetadataFieldValidator
+  MetadataFieldValidator,
+  HoverClassDirective
 ];
 
 @NgModule({
@@ -545,7 +548,6 @@ const DIRECTIVES = [
     ...DIRECTIVES,
     ...ENTRY_COMPONENTS,
     ...SHARED_ITEM_PAGE_COMPONENTS,
-    DsoPageEditButtonComponent
   ],
   providers: [
     ...PROVIDERS
@@ -556,8 +558,7 @@ const DIRECTIVES = [
         ...COMPONENTS,
         ...SHARED_ITEM_PAGE_COMPONENTS,
         ...DIRECTIVES,
-        CurationFormComponent,
+        CurationFormComponent
-        DsoPageEditButtonComponent
     ],
   entryComponents: [
     ...ENTRY_COMPONENTS

src/app/shared/truncatable/truncatable-part/truncatable-part.component.html

@@ -1,5 +1,5 @@
-<div class="clamp-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
+<div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
     <div class="content">
         <ng-content></ng-content>
     </div>
-</div>
+</div>

src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss

@@ -1,4 +1,4 @@
-@mixin clamp($lines, $size-factor: 1, $line-height: $line-height-base) {
+@mixin clamp($lines, $bg, $size-factor: 1, $line-height: $line-height-base) {
     $height: $line-height * $font-size-base * $size-factor;
     &.fixedHeight {
         height: $lines * $height;
@@ -19,10 +19,11 @@
             min-width: 75px;
             max-width: 150px;
             height: $height;
-            background: linear-gradient(to right, rgba(255, 255, 255, 0), $body-bg 70%);
+            background: linear-gradient(to right, rgba(255, 255, 255, 0), $bg 70%);
             pointer-events: none;
         }
     }
+
 }
 
 @mixin min($lines, $size-factor: 1, $line-height: $line-height-base) {
@@ -31,16 +32,32 @@
 }
 
 $h4-factor: strip-unit($h4-font-size);
+
+@mixin clamp-with-titles($i, $bg) {
+  transition: height 1s;
+  @include clamp($i, $bg);
+  &.title {
+    @include clamp($i, $bg, 1.25);
+  }
+  &.h4 {
+    @include clamp($i, $bg, $h4-factor, $headings-line-height);
+  }
+}
+
 @for $i from 1 through 15 {
-    .clamp-#{$i} {
+    .clamp-default-#{$i} {
-        transition: height 1s;
+        @include clamp-with-titles($i, $body-bg);
-        @include clamp($i);
+    }
-        &.title {
+    :host-context(.ds-hover) .clamp-default-#{$i} {
-            @include clamp($i, 1.25);
+        @include clamp-with-titles($i, $list-group-hover-bg);
-        }
+    }
-        &.h4 {
+
-            @include clamp($i, $h4-factor, $headings-line-height);
+    .clamp-primary-#{$i} {
-        }
+      @include clamp-with-titles($i, $primary);
+    }
+
+    :host-context(.ds-hover) .clamp-primary-#{$i} {
+      @include clamp-with-titles($i, darken($primary, 10%));
     }
 }
 

src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts

@@ -38,6 +38,8 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
    */
   @Input() fixedHeight = false;
 
+  @Input() background = 'default';
+
   /**
    * Current amount of lines shown of this part
    */