hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-15 14:03:06 +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"> <div [ngClass]="{ 'thumbnail': true, 'limit-width': limitWidth }">
<img *ngIf="src !== null" [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()" class="img-fluid"/> <img *ngIf="src !== null" class="thumbnail-content img-fluid"
<div *ngIf="src === null" class="outer"> [src]="src | dsSafeUrl" [alt]="alt | translate" (error)="errorHandler()"/>
<div *ngIf="src === null" class="thumbnail-content outer">
<div class="inner"> <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> </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); 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. * This component renders a given Bitstream as a thumbnail.
* One input parameter of type Bitstream is expected. * 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({ @Component({
selector: 'ds-thumbnail', selector: 'ds-thumbnail',
@@ -39,6 +39,11 @@ export class ThumbnailComponent implements OnInit {
*/ */
@Input() placeholder? = 'thumbnail.default.placeholder'; @Input() placeholder? = 'thumbnail.default.placeholder';
/**
* Limit thumbnail width to --ds-thumbnail-max-width
*/
@Input() limitWidth? = true;
/** /**
* Initialize the thumbnail. * Initialize the thumbnail.
* Use a default image if no actual image is available. * Use a default image if no actual image is available.