Skip to content
Snippets Groups Projects
Commit 58a26c03 authored by Lotte Hofstede's avatar Lotte Hofstede
Browse files

46063: removed ellipsis, added other animations..

parent 1b0fc45b
Branches
Tags
No related merge requests found
Showing
with 57 additions and 50 deletions
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))
]);
...@@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep { ...@@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep {
width: 100%; width: 100%;
} }
div.card { div.card {
margin-bottom: 20px; margin-bottom: $spacer;
} }
} }
......
<ds-truncatable [id]="dso.id"> <ds-truncatable [id]="dso.id">
<div class="card"> <div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<a [@slide]="(isCollapsed() | async)? 'expanded' : 'collapsed'" <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
[routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div> <div>
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()"> <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
</ds-grid-thumbnail> </ds-grid-thumbnail>
<div [@overlay]="(isCollapsed() | async)? 'hide' : 'show'"
class="thumbnail-overlay"></div>
</div> </div>
</a> </a>
<div class="card-body"> <div class="card-body">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3" type="h4"> <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
<h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
</ds-truncatable-part>
<p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])" <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
class="item-authors card-text text-muted"> class="item-authors card-text text-muted">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="3"> <ds-truncatable-part [id]="dso.id" [minLines]="1">
<span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span> <span *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date">{{dso.findMetadata("dc.date.issued")}}</span>
<span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">, <span *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
<span [innerHTML]="authorMd.value"></span> <span [innerHTML]="authorMd.value"></span>
</span> </span>
</ds-truncatable-part> </ds-truncatable-part>
</p> </p>
<ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"> <ds-truncatable-part [id]="dso.id" [minLines]="3">
<p class="item-abstract card-text" <p class="item-abstract card-text"
[innerHTML]="getFirstValue('dc.description.abstract')"> [innerHTML]="getFirstValue('dc.description.abstract')">
</p> </p>
...@@ -32,6 +27,5 @@ ...@@ -32,6 +27,5 @@
class="lead btn btn-primary viewButton">View</a> class="lead btn btn-primary viewButton">View</a>
</div> </div>
</div> </div>
</div> </div>
</ds-truncatable> </ds-truncatable>
\ No newline at end of file
...@@ -5,14 +5,13 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element. ...@@ -5,14 +5,13 @@ import { SearchResultGridElementComponent } from '../search-result-grid-element.
import { Item } from '../../../../core/shared/item.model'; import { Item } from '../../../../core/shared/item.model';
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model'; import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
import { ViewMode } from '../../../../+search-page/search-options.model'; import { ViewMode } from '../../../../+search-page/search-options.model';
import { slide } from '../../../animations/slide'; import { focusShadow } from '../../../../shared/animations/focus';
import { overlay } from '../../../animations/overlay';
@Component({ @Component({
selector: 'ds-item-search-result-grid-element', selector: 'ds-item-search-result-grid-element',
styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'], styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
templateUrl: 'item-search-result-grid-element.component.html', templateUrl: 'item-search-result-grid-element.component.html',
animations: [slide, overlay], animations: [focusShadow],
}) })
@renderElementsFor(ItemSearchResult, ViewMode.Grid) @renderElementsFor(ItemSearchResult, ViewMode.Grid)
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
(sortFieldChange)="onSortFieldChange($event)" (sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)"> (paginationChange)="onPaginationChange($event)">
<ul *ngIf="objects?.hasSucceeded" class="list-unstyled"> <ul *ngIf="objects?.hasSucceeded" class="list-unstyled">
<li *ngFor="let object of objects?.payload?.page"> <li *ngFor="let object of objects?.payload?.page" class="mt-2 mb-2">
<ds-wrapper-list-element [object]="object"></ds-wrapper-list-element> <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
</li> </li>
</ul> </ul>
......
@import '../../../styles/variables'; @import '../../../styles/variables';
\ No newline at end of file
<ds-truncatable [id]="dso.id"> <ds-truncatable [id]="dso.id">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5" type="title"> <div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
<a [routerLink]="['/items/' + dso.id]" class="lead" <a
[innerHTML]="getFirstValue('dc.title')"></a> [routerLink]="['/items/' + dso.id]" class="lead"
</ds-truncatable-part> [innerHTML]="getFirstValue('dc.title')"></a>
<div> <div>
<span class="text-muted"> <span class="text-muted">
<ds-truncatable-part [id]="dso.id" [minLines]="1">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5">
(<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher" (<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
[innerHTML]="getFirstValue('dc.publisher')">, </span><span [innerHTML]="getFirstValue('dc.publisher')">, </span><span
*ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date" *ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
...@@ -19,10 +18,11 @@ ...@@ -19,10 +18,11 @@
</span> </span>
</ds-truncatable-part> </ds-truncatable-part>
</span> </span>
<div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract"> <div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
<ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"><span <ds-truncatable-part [id]="dso.id" [minLines]="3"><span
[innerHTML]="getFirstValue('dc.description.abstract')"></span> [innerHTML]="getFirstValue('dc.description.abstract')"></span>
</ds-truncatable-part> </ds-truncatable-part>
</div>
</div> </div>
</div> </div>
</ds-truncatable> </ds-truncatable>
\ No newline at end of file
...@@ -6,25 +6,16 @@ import { Item } from '../../../../core/shared/item.model'; ...@@ -6,25 +6,16 @@ import { Item } from '../../../../core/shared/item.model';
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model'; import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
import { ViewMode } from '../../../../+search-page/search-options.model'; import { ViewMode } from '../../../../+search-page/search-options.model';
import { ListableObject } from '../../../object-collection/shared/listable-object.model'; import { ListableObject } from '../../../object-collection/shared/listable-object.model';
import { focusBackground } from '../../../animations/focus';
@Component({ @Component({
selector: 'ds-item-search-result-list-element', selector: 'ds-item-search-result-list-element',
styleUrls: ['../search-result-list-element.component.scss', 'item-search-result-list-element.component.scss'], 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) @renderElementsFor(ItemSearchResult, ViewMode.List)
export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> implements OnInit { export class ItemSearchResultListElementComponent extends SearchResultListElementComponent<ItemSearchResult, Item> {
lines = 3;
constructor(@Inject('objectElementProvider') public listable: ListableObject, private changeDetectorRef: ChangeDetectorRef) {
super(listable);
}
ngOnInit() {
setTimeout(() => {
this.lines = 4;
this.changeDetectorRef.detectChanges();
}, 0);
}
} }
...@@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model'; ...@@ -6,6 +6,8 @@ import { Metadatum } from '../../../core/shared/metadatum.model';
import { isEmpty, hasNoValue } from '../../empty.util'; import { isEmpty, hasNoValue } from '../../empty.util';
import { ListableObject } from '../../object-collection/shared/listable-object.model'; import { ListableObject } from '../../object-collection/shared/listable-object.model';
import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component'; 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({ @Component({
selector: 'ds-search-result-list-element', selector: 'ds-search-result-list-element',
...@@ -15,7 +17,7 @@ import { AbstractListableElementComponent } from '../../object-collection/shared ...@@ -15,7 +17,7 @@ import { AbstractListableElementComponent } from '../../object-collection/shared
export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> { export class SearchResultListElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
dso: K; dso: K;
public constructor(@Inject('objectElementProvider') public listable: ListableObject) { public constructor(@Inject('objectElementProvider') public listable: ListableObject, private truncatableService: TruncatableService) {
super(listable); super(listable);
this.dso = this.object.dspaceObject; this.dso = this.object.dspaceObject;
} }
...@@ -54,4 +56,8 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten ...@@ -54,4 +56,8 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
} }
return result; return result;
} }
isCollapsed(): Observable<boolean> {
return this.truncatableService.isCollapsed(this.dso.id);
}
} }
...@@ -9,9 +9,7 @@ ...@@ -9,9 +9,7 @@
line-height: $line-height; line-height: $line-height;
overflow-wrap: break-word; overflow-wrap: break-word;
&:after { &:after {
content: "..."; content: "";
color: $link-color;
text-align: right;
position: absolute; position: absolute;
padding-right: 15px; padding-right: 15px;
top: ($lines - 1) * $height; top: ($lines - 1) * $height;
......
...@@ -11,11 +11,11 @@ import { TruncatableService } from '../truncatable.service'; ...@@ -11,11 +11,11 @@ import { TruncatableService } from '../truncatable.service';
export class TruncatablePartComponent implements OnInit, OnDestroy { export class TruncatablePartComponent implements OnInit, OnDestroy {
@Input() minLines: number; @Input() minLines: number;
@Input() maxLines: number; @Input() maxLines = -1;
@Input() initialExpand = false; @Input() initialExpand = false;
@Input() id: string; @Input() id: string;
@Input() type: string; @Input() type: string;
private lines: number; private lines: string;
private sub; private sub;
public constructor(private service: TruncatableService) { public constructor(private service: TruncatableService) {
...@@ -28,9 +28,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy { ...@@ -28,9 +28,9 @@ export class TruncatablePartComponent implements OnInit, OnDestroy {
private setLines() { private setLines() {
this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => { this.sub = this.service.isCollapsed(this.id).subscribe((collapsed: boolean) => {
if (collapsed) { if (collapsed) {
this.lines = this.minLines; this.lines = this.minLines.toString();
} else { } else {
this.lines = this.maxLines; this.lines = this.maxLines < 0 ? 'none' : this.maxLines.toString();
} }
}); });
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment