diff --git a/src/app/shared/animations/focus.ts b/src/app/shared/animations/focus.ts new file mode 100644 index 0000000000..6458fd0d78 --- /dev/null +++ b/src/app/shared/animations/focus.ts @@ -0,0 +1,19 @@ +import { animate, state, transition, trigger, style } from '@angular/animations'; + +export const focusShadow = trigger('focusShadow', [ + + state('focus', style({ 'box-shadow': '0 0 6px #777777' })), + + state('blur', style({ 'box-shadow': 'none' })), + + transition('focus <=> blur', animate(250)) +]); + +export const focusBackground = trigger('focusBackground', [ + + state('focus', style({ 'background-color': 'rgba(119, 119, 119, 0.1)' })), + + state('blur', style({ 'background-color': 'transparent' })), + + transition('focus <=> blur', animate(250)) +]); diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss index 32ad2df187..1b9418be48 100644 --- a/src/app/shared/object-grid/object-grid.component.scss +++ b/src/app/shared/object-grid/object-grid.component.scss @@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep { width: 100%; } div.card { - margin-bottom: 20px; + margin-bottom: $spacer; } } diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html index d1f37c952e..e35e06ec03 100644 --- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html +++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html @@ -1,28 +1,23 @@ -
- +
+
-
- -

-
+

- + {{dso.findMetadata("dc.date.issued")}} ,

- +

@@ -32,6 +27,5 @@ class="lead btn btn-primary viewButton">View
-
\ No newline at end of file diff --git a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts index ee03a8b545..518fc23a44 100644 --- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts +++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts @@ -5,14 +5,13 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element. import { Item } from '../../../../core/shared/item.model'; import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model'; import { ViewMode } from '../../../../+search-page/search-options.model'; -import { slide } from '../../../animations/slide'; -import { overlay } from '../../../animations/overlay'; +import { focusShadow } from '../../../../shared/animations/focus'; @Component({ selector: 'ds-item-search-result-grid-element', styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'], templateUrl: 'item-search-result-grid-element.component.html', - animations: [slide, overlay], + animations: [focusShadow], }) @renderElementsFor(ItemSearchResult, ViewMode.Grid) diff --git a/src/app/shared/object-list/object-list.component.html b/src/app/shared/object-list/object-list.component.html index 4a7221d3e6..6ccac35464 100644 --- a/src/app/shared/object-list/object-list.component.html +++ b/src/app/shared/object-list/object-list.component.html @@ -11,7 +11,7 @@ (sortFieldChange)="onSortFieldChange($event)" (paginationChange)="onPaginationChange($event)"> diff --git a/src/app/shared/object-list/object-list.component.scss b/src/app/shared/object-list/object-list.component.scss index 48e6526dff..3d2af4d023 100644 --- a/src/app/shared/object-list/object-list.component.scss +++ b/src/app/shared/object-list/object-list.component.scss @@ -1 +1 @@ -@import '../../../styles/variables'; +@import '../../../styles/variables'; \ No newline at end of file diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html index 104a6be716..9aa176fb08 100644 --- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html +++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html @@ -1,12 +1,11 @@ - - - -
+
+ +
- - + (, -
- - +
+ + +
\ No newline at end of file diff --git a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts index 76e8eb288f..b776abc214 100644 --- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts +++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts @@ -6,25 +6,16 @@ import { Item } from '../../../../core/shared/item.model'; import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model'; import { ViewMode } from '../../../../+search-page/search-options.model'; import { ListableObject } from '../../../object-collection/shared/listable-object.model'; +import { focusBackground } from '../../../animations/focus'; @Component({ selector: 'ds-item-search-result-list-element', styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'], - templateUrl: 'item-search-result-list-element.component.html' + templateUrl: 'item-search-result-list-element.component.html', + animations: [focusBackground], + }) @renderElementsFor(ItemSearchResult, ViewMode.List) -export class ItemSearchResultListElementComponent extends SearchResultListElementComponent implements OnInit { - lines = 3; - - constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) { - super(listable); - } - - ngOnInit() { - setTimeout(() => { - this.lines = 4; - this.changeDetectorRef.detectChanges(); - }, 0); - } +export class ItemSearchResultListElementComponent extends SearchResultListElementComponent { } diff --git a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts index 6c79eaad53..9675a58a1e 100644 --- a/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts +++ b/src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts @@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model'; import { isEmpty, hasNoValue } from '../../empty.util'; import { ListableObject } from '../../object-collection/shared/listable-object.model'; import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component'; +import { Observable } from 'rxjs/Observable'; +import { TruncatableService } from '../../truncatable/truncatable.service'; @Component({ selector: 'ds-search-result-list-element', @@ -15,7 +17,7 @@ import { AbstractListableElementComponent } from '../../object-collection/shared export class SearchResultListElementComponent, K extends DSpaceObject> extends AbstractListableElementComponent { dso: K; - public constructor(@Inject('objectElementProvider') public listable: ListableObject) { + public constructor(@Inject('objectElementProvider') public listable: ListableObject, private truncatableService: TruncatableService) { super(listable); this.dso = this.object.dspaceObject; } @@ -54,4 +56,8 @@ export class SearchResultListElementComponent, K exten } return result; } + + isCollapsed(): Observable { + return this.truncatableService.isCollapsed(this.dso.id); + } } 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 cd3d245f7f..b66eab7005 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss @@ -9,9 +9,7 @@ line-height: $line-height; overflow-wrap: break-word; &:after { - content: "..."; - color: $link-color; - text-align: right; + content: ""; position: absolute; padding-right: 15px; top: ($lines - 1) * $height; 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 83a5f04ba4..2d643f4a33 100644 --- a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts +++ b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts @@ -11,11 +11,11 @@ import { TruncatableService } from '../truncatable.service'; export class TruncatablePartComponent implements OnInit, OnDestroy { @Input() minLines: number; - @Input() maxLines: number; + @Input() maxLines = -1; @Input() initialExpand = false; @Input() id: string; @Input() type: string; - private lines: number; + private lines: string; private sub; public constructor(private service: TruncatableService) { @@ -28,9 +28,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy { private setLines() { this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => { if (collapsed) { - this.lines = this.minLines; + this.lines = this.minLines.toString(); } else { - this.lines = this.maxLines; + this.lines = this.maxLines < 0 ? 'none' : this.maxLines.toString(); } }); }