Start page versions modal
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
36d97c9eca
commit
0e0d237d4f
@ -0,0 +1,25 @@
|
|||||||
|
<div class="container">
|
||||||
|
<div class="header">
|
||||||
|
<div class="title">Page Versions</div>
|
||||||
|
<button title="Close" class="close" (click)="dismiss()">
|
||||||
|
<i class="fa fa-times"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="contents">
|
||||||
|
<ion-list>
|
||||||
|
<ion-item button *ngFor="let version of pageVersions" (click)="onVersionClick(version)" [color]="selectedVersion === version ? 'primary' : ''">
|
||||||
|
<ion-label>
|
||||||
|
<h4 style="font-weight: bold">
|
||||||
|
#{{ version.versionNum }}
|
||||||
|
<span class="version-date">({{ version.versionCreateDate.toLocaleString() }})</span>
|
||||||
|
<span class="current-version"><i *ngIf="version.currentVersion" class="fa fa-asterisk" title="Current version"></i></span>
|
||||||
|
</h4>
|
||||||
|
<h5>{{ version.versionMessage }} by {{ version.userDisplay }}</h5>
|
||||||
|
</ion-label>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
<div class="preview">
|
||||||
|
Page preview will be here.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
@ -0,0 +1,49 @@
|
|||||||
|
.container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.header {
|
||||||
|
background: lightgrey;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
flex: 1;
|
||||||
|
padding: 10px;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.close {
|
||||||
|
padding: 10px 15px;
|
||||||
|
background: #ff6666;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.contents {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
|
ion-list {
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: scroll;
|
||||||
|
max-width: 325px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.preview {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-date {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-version {
|
||||||
|
color: darkgreen;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -0,0 +1,36 @@
|
|||||||
|
import {Component, Input, OnInit} from '@angular/core';
|
||||||
|
import {AlertController, ModalController} from '@ionic/angular';
|
||||||
|
import {EditorService} from '../../service/editor.service';
|
||||||
|
import {PageVersionRecord} from '../../structures/PageRecord';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-version-modal',
|
||||||
|
templateUrl: './version-modal.component.html',
|
||||||
|
styleUrls: ['./version-modal.component.scss'],
|
||||||
|
})
|
||||||
|
export class VersionModalComponent implements OnInit {
|
||||||
|
@Input() pageId: string;
|
||||||
|
public pageVersions: PageVersionRecord[] = [];
|
||||||
|
public selectedVersion?: PageVersionRecord;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
protected alerts: AlertController,
|
||||||
|
protected modals: ModalController,
|
||||||
|
protected editorService: EditorService,
|
||||||
|
) {
|
||||||
|
console.log('version modal', this);
|
||||||
|
}
|
||||||
|
|
||||||
|
async ngOnInit() {
|
||||||
|
this.pageVersions = await this.editorService.loadPageVersions(this.pageId);
|
||||||
|
await this.onVersionClick(this.pageVersions[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
dismiss() {
|
||||||
|
this.modals.dismiss();
|
||||||
|
}
|
||||||
|
|
||||||
|
async onVersionClick(version: PageVersionRecord) {
|
||||||
|
this.selectedVersion = version;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in new issue