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 @@
-
\ 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();
}
});
}