diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html b/src/app/shared/dso-selector/dso-selector/dso-selector.component.html index a115e4a30e..0e914a3783 100644 --- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.html +++ b/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> diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.scss b/src/app/shared/dso-selector/dso-selector/dso-selector.component.scss index a9a65d61e7..37d2ebeca7 100644 --- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.scss +++ b/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; } diff --git a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts b/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts index c451bfbe4d..931599c333 100644 --- a/src/app/shared/dso-selector/dso-selector/dso-selector.component.ts +++ b/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} diff --git a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html index 77611b3cdd..17e700486f 100644 --- a/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html +++ b/src/app/shared/object-list/sidebar-search-list-element/sidebar-search-list-element.component.html @@ -1,13 +1,13 @@ - +
- +
- +
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 8add0c0977..9bbe9351b0 100644 --- a/src/app/shared/shared.module.ts +++ b/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, - DsoPageEditButtonComponent + CurationFormComponent ], entryComponents: [ ...ENTRY_COMPONENTS diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html index 72f41cd770..bf1212a6bf 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html @@ -1,5 +1,5 @@ -
+
-
\ No newline at end of file +
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss index 68b6772465..d2ddfc7383 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss +++ b/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} { - transition: height 1s; - @include clamp($i); - &.title { - @include clamp($i, 1.25); - } - &.h4 { - @include clamp($i, $h4-factor, $headings-line-height); - } + .clamp-default-#{$i} { + @include clamp-with-titles($i, $body-bg); + } + :host-context(.ds-hover) .clamp-default-#{$i} { + @include clamp-with-titles($i, $list-group-hover-bg); + } + + .clamp-primary-#{$i} { + @include clamp-with-titles($i, $primary); + } + + :host-context(.ds-hover) .clamp-primary-#{$i} { + @include clamp-with-titles($i, darken($primary, 10%)); } } diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts index fef5d7d098..2a375e95d9 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts +++ b/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 */