FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Start of thumbnail upload dialog

Browse Source
This commit is contained in:
Willem Dantuma
2021-02-25 19:57:09 +01:00
parent b537239c96
commit a098f72b1a
11 changed files with 143 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
projects/common-map/src/fm-map/components/selected-item/selected-item.component.html
View File

@@ -1,9 +1,6 @@
<div *ngIf="item;let item">
<div class="card border-0">
<img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
</div>
<fm-thumbnail [item]="item" [edit]="true"></fm-thumbnail>
</div>
<div class="card">
<div class="card-body">

4
projects/common/src/fm/common.module.ts
View File

@@ -60,6 +60,7 @@ import { AppMenuComponent } from './components/app-menu/app-menu.component';
import { NotificationMenuComponent} from './components/notification-menu/notification-menu.component';
import { HelpMenuComponent} from './components/help-menu/help-menu.component';
import { BackButtonComponent } from './components/back-button/back-button.component';
import { ThumbnailUploadModalComponent } from './components/thumbnail-upload-modal/thumbnail-upload-modal.component';
export {
SafePipe,
@@ -138,7 +139,8 @@ export {
NotificationMenuComponent,
HelpMenuComponent,
BackButtonComponent,
ThumbnailComponent
ThumbnailComponent,
ThumbnailUploadModalComponent
],
exports: [
NgbModule,

5
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.html Normal file
View File

@@ -0,0 +1,5 @@
<div>
</div>

0
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.scss Normal file
View File

25
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ThumbnailUploadModalComponent } from './thumbnail-upload-modal.component';
describe('ThumbnailUploadModalComponent', () => {
let component: ThumbnailUploadModalComponent;
let fixture: ComponentFixture<ThumbnailUploadModalComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ThumbnailUploadModalComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ThumbnailUploadModalComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
projects/common/src/fm/components/thumbnail-upload-modal/thumbnail-upload-modal.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'fm-thumbnail-upload-modal',
templateUrl: './thumbnail-upload-modal.component.html',
styleUrls: ['./thumbnail-upload-modal.component.scss']
})
export class ThumbnailUploadModalComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

26
projects/common/src/fm/components/thumbnail/thumbnail.component.html
View File

@@ -1,6 +1,22 @@
<div class="thumbnail">
<img *ngIf="item.thumbnail" class="card-img-top" [src]="getThumbnailUrl(item)" />
<div *ngIf="!item.thumbnail" class="big-icon" [style.background-color]="itemTypeService.getColor(item.itemType)">
<i [ngClass]="itemTypeService.getIcon(item.itemType)"></i>
<div #thumbnail class="thumbnail" [style.background-color]="itemTypeService.getColor(item.itemType)" >
<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>
</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>

28
projects/common/src/fm/components/thumbnail/thumbnail.component.scss
View File

@@ -0,0 +1,28 @@
.thumbnail {
width: 100%;
position: relative;
padding-top: 75%;
}
.content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
}
.large-icon i {
color: white;
}
.edit {
position: absolute;
bottom: 1rem;
right: 1rem;
width: 2.5rem;
height: 2.5rem;
padding: 0;
line-height: 2.5rem;
}

41
projects/common/src/fm/components/thumbnail/thumbnail.component.ts
View File

@@ -1,6 +1,7 @@
import { Component,Input } from '@angular/core';
import { Component,Input ,ViewChild,ElementRef} from '@angular/core';
import { Store } from '@ngrx/store';
import { IItem } from '../../models/item';
import {NgbModal} from "@ng-bootstrap/ng-bootstrap"
import { IListItem } from '../../models/list.item';
import { commonReducers,ItemTypeService } from '../../../public-api'
@Component({
@@ -11,12 +12,40 @@ import { commonReducers,ItemTypeService } from '../../../public-api'
export class ThumbnailComponent {
@Input() public item: IItem;
@Input() public item: IListItem;
@Input() public edit: boolean = false;
@ViewChild('thumbnail') el:ElementRef;
@ViewChild('thumbnail_upload') modal:ElementRef;
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService) {
constructor(public store: Store<commonReducers.State>, public itemTypeService: ItemTypeService,private modalService: NgbModal) {
}
getThumbnailUrl(item:IItem):string {
getThumbnailUrl(item:IListItem):string {
return item.url+'/thumbnail?v=' + Date.parse(item.updated);
}
}
getFontSize():string {
if(this.el) {
var h = this.el.nativeElement.offsetHeight - (this.el.nativeElement.offsetHeight / 5 )
return h + "px";
} else {
return "1em";
}
}
getLineHeight():string {
if(this.el) {
return this.el.nativeElement.offsetHeight + "px";
} else {
return "1em";
}
}
canEdit():boolean {
return this.edit && this.item != null;
}
onEditClick() {
this.modalService.open(this.modal);
}
}