hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-15 05:53:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

79597: Add input to toggle thumbnail max-width

Browse Source
This commit is contained in:
Yura Bondarenko
2021-05-27 08:59:32 +02:00
parent ca7d45ff0c
commit 41c07e74ca
3 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/thumbnail/thumbnail.component.html
View File

@@ -1,8 +1,9 @@
<div class="thumbnail">
<img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/>
<div *ngIf="src === null" class="outer">
<div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
<img *ngIf="src !== null" class="thumbnail-content img-fluid"
[src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
<div *ngIf="src === null" class="thumbnail-content outer">
<div class="inner">
<div class="thumbnail-placeholder w-100 h-100 p-3">{{ placeholder | translate }}</div>
<div class="thumbnail-placeholder w-100 h-100 p-3 lead">{{ placeholder | translate }}</div>
</div>
</div>
</div>

2
src/app/thumbnail/thumbnail.component.scss
View File

@@ -1,4 +1,4 @@
.thumbnail {
.limit-width {
max-width: var(--ds-thumbnail-max-width);
}

7
src/app/thumbnail/thumbnail.component.ts
View File

@@ -5,7 +5,7 @@ import { hasValue } from '../shared/empty.util';
/**
* This component renders a given Bitstream as a thumbnail.
* One input parameter of type Bitstream is expected.
* If no Bitstream is provided, a holderjs image will be rendered instead.
* If no Bitstream is provided, a HTML placeholder will be rendered instead.
*/
@Component({
selector: 'ds-thumbnail',
@@ -39,6 +39,11 @@ export class ThumbnailComponent implements OnInit {
*/
@Input() placeholder? = 'thumbnail.default.placeholder';
/**
* Limit thumbnail width to --ds-thumbnail-max-width
*/
@Input() limitWidth? = true;
/**
* Initialize the thumbnail.
* Use a default image if no actual image is available.