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
Hide whitespace changes
Inline Side-by-side
Showing
with 57 additions and 50 deletions
src/app/shared/animations/focus.ts 0 → 100644
+ 19
− 0
View file @ 58a26c03
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))
]);
src/app/shared/object-grid/object-grid.component.scss
+ 1
− 1
View file @ 58a26c03
......@@ -7,7 +7,7 @@ ds-wrapper-grid-element ::ng-deep {
width: 100%;
}
div.card {
margin-bottom: 20px;
margin-bottom: $spacer;
}
}
......
src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
+ 5
− 11
View file @ 58a26c03
<ds-truncatable [id]="dso.id">
<div class="card">
<a [@slide]="(isCollapsed() | async)? 'expanded' : 'collapsed'"
[routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div>
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
</ds-grid-thumbnail>
<div [@overlay]="(isCollapsed() | async)? 'hide' : 'show'"
class="thumbnail-overlay"></div>
</div>
</a>
<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>
</ds-truncatable-part>
<h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
<p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
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 *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);">,
<span [innerHTML]="authorMd.value"></span>
</span>
</ds-truncatable-part>
</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"
[innerHTML]="getFirstValue('dc.description.abstract')">
</p>
......@@ -32,6 +27,5 @@
class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>
</ds-truncatable>
\ No newline at end of file
src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts
+ 2
− 3
View file @ 58a26c03
......@@ -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)
......
src/app/shared/object-list/object-list.component.html
+ 1
− 1
View file @ 58a26c03
......@@ -11,7 +11,7 @@
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
<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>
</li>
</ul>
......
src/app/shared/object-list/object-list.component.scss
+ 1
− 1
View file @ 58a26c03
@import '../../../styles/variables';
@import '../../../styles/variables';
\ No newline at end of file
src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.html
+ 11
− 11
View file @ 58a26c03
<ds-truncatable [id]="dso.id">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5" type="title">
<a [routerLink]="['/items/' + dso.id]" class="lead"
[innerHTML]="getFirstValue('dc.title')"></a>
</ds-truncatable-part>
<div>
<div [@focusBackground]="(isCollapsed() | async)?'blur':'focus'">
<a
[routerLink]="['/items/' + dso.id]" class="lead"
[innerHTML]="getFirstValue('dc.title')"></a>
<div>
<span class="text-muted">
<ds-truncatable-part [id]="dso.id" [minLines]="1" [maxLines]="5">
<ds-truncatable-part [id]="dso.id" [minLines]="1">
(<span *ngIf="dso.findMetadata('dc.publisher')" class="item-list-publisher"
[innerHTML]="getFirstValue('dc.publisher')">, </span><span
*ngIf="dso.findMetadata('dc.date.issued')" class="item-list-date"
......@@ -19,10 +18,11 @@
</span>
</ds-truncatable-part>
</span>
<div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
<ds-truncatable-part [id]="dso.id" [minLines]="3" [maxLines]="15"><span
[innerHTML]="getFirstValue('dc.description.abstract')"></span>
</ds-truncatable-part>
<div *ngIf="dso.findMetadata('dc.description.abstract')" class="item-list-abstract">
<ds-truncatable-part [id]="dso.id" [minLines]="3"><span
[innerHTML]="getFirstValue('dc.description.abstract')"></span>
</ds-truncatable-part>
</div>
</div>
</div>
</ds-truncatable>
\ No newline at end of file
src/app/shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
+ 5
− 14
View file @ 58a26c03
......@@ -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<ItemSearchResult, Item> 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<ItemSearchResult, Item> {
}
src/app/shared/object-list/search-result-list-element/search-result-list-element.component.ts
+ 7
− 1
View file @ 58a26c03
......@@ -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<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
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<T extends SearchResult<K>, K exten
}
return result;
}
isCollapsed(): Observable<boolean> {
return this.truncatableService.isCollapsed(this.dso.id);
}
}
src/app/shared/truncatable/truncatable-part/truncatable-part.component.scss
+ 1
− 3
View file @ 58a26c03
......@@ -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;
......
src/app/shared/truncatable/truncatable-part/truncatable-part.component.ts
+ 4
− 4
View file @ 58a26c03
......@@ -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();
}
});
}
......
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