Basic edit-image-modal

This commit is contained in:
Willem Dantuma
2021-03-01 16:56:48 +01:00
parent dd71b49502
commit 7768387f58
14 changed files with 142 additions and 85 deletions

View File

@@ -2,21 +2,8 @@
<div class="content">
<img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!item.thumbnail" class="large-icon" [style.font-size]="getFontSize()" [style.line-height]="getLineHeight()"><i [ngClass]="itemTypeService.getIcon(item.itemType)"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-outline-primary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
<div *ngIf="canEdit()" class="edit btn btn-secondary rounded-circle" (click)="onEditClick()"><i class="fal fa-camera"></i></div>
</div>
</div>
<ng-template #thumbnail_upload let-modal>
<div class="modal-header">
<h4 class="modal-title" i18n>Select period</h4>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<!-- <button type="submit" class="btn btn-primary" (click)="handleSelect($event)" i18n>Select</button> -->
<button type="button" class="btn btn-secondary" (click)="modal.close('Save click')" i18n="@@buttonClose">Close</button>
</div>
</ng-template>
<fm-edit-image-modal #modal></fm-edit-image-modal>

View File

@@ -1,8 +1,9 @@
import { Component,Input ,ViewChild,ElementRef} from '@angular/core';
import { Store } from '@ngrx/store';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
import { IListItem } from '../../models/list.item';
import { commonReducers,ItemTypeService } from '../../../public-api'
import { EditImageModalComponent} from '../edit-image-modal/edit-image-modal.component';
@Component({
selector: 'fm-thumbnail',
@@ -15,9 +16,9 @@ import { commonReducers,ItemTypeService } from '../../../public-api'
@Input() public item: IListItem;
@Input() public edit: boolean = false;
@ViewChild('thumbnail') el:ElementRef;
@ViewChild('thumbnail_upload') modal:ElementRef;
@ViewChild('modal') modal:EditImageModalComponent;
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,private modalService: NgbModal) {
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService) {
}
getThumbnailUrl(item:IListItem):string {
@@ -46,6 +47,6 @@ import { commonReducers,ItemTypeService } from '../../../public-api'
}
onEditClick() {
this.modalService.open(this.modal);
this.modal.open(this.item.url+"/thumbnail",4/3);
}
}