From 0d859d0de960690a245e976b3b398234acacd248 Mon Sep 17 00:00:00 2001
From: fsdavid <daviti1@mail.com>
Date: Thu, 21 Nov 2019 03:53:10 +0100
Subject: [PATCH] update screenshot taking design
---
.../signinBanner/signinBanner.template.html | 6 +--
.../takeScreenshot.component.ts | 52 +++++++++++++++----
.../takeScreenshot/takeScreenshot.style.css | 19 +++----
.../takeScreenshot.template.html | 33 ++++++------
4 files changed, 73 insertions(+), 37 deletions(-)
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index c05a5a455..c3c78b069 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -1,4 +1,4 @@
-<div class="d-flex"
+<div class="d-flex" #signInBanner
[iav-key-listener]="keyListenerConfig"
(iav-key-event)="openTmplWithDialog(helpComponent)">
@@ -18,7 +18,7 @@
</div>
<!-- plugin and tools -->
- <div class="btnWrapper">
+ <div class="btnWrapper" #pluginsAndToolsDiv>
<button mat-icon-button
matTooltipPosition="below"
[matTooltip]="pluginTooltipText"
@@ -169,4 +169,4 @@
</mat-list-item>
</mat-list>
</ng-template>
-<take-screenshot #takeScreenshotElement style="z-index: 1509;" class="position-fixed fixed-top"></take-screenshot>
+<take-screenshot #takeScreenshotElement style="z-index: 1509;" class="position-fixed fixed-top" (focusSigninBaner)="signInBanner.focus()"></take-screenshot>
diff --git a/src/ui/takeScreenshot/takeScreenshot.component.ts b/src/ui/takeScreenshot/takeScreenshot.component.ts
index 32b76f9fc..0f4789c60 100644
--- a/src/ui/takeScreenshot/takeScreenshot.component.ts
+++ b/src/ui/takeScreenshot/takeScreenshot.component.ts
@@ -1,6 +1,16 @@
-import {Component, ElementRef, HostListener, Inject, Input, OnInit, Renderer2, ViewChild} from "@angular/core";
+import {
+ Component,
+ ElementRef, EventEmitter,
+ HostListener,
+ Inject,
+ OnInit, Output,
+ Renderer2,
+ TemplateRef,
+ ViewChild
+} from "@angular/core";
import html2canvas from "html2canvas";
import {DOCUMENT} from "@angular/common";
+import {MatDialog} from "@angular/material/dialog";
@Component({
selector: 'take-screenshot',
@@ -10,8 +20,12 @@ import {DOCUMENT} from "@angular/common";
export class TakeScreenshotComponent implements OnInit {
@ViewChild('downloadLink', {read: ElementRef}) downloadLink: ElementRef
- @ViewChild('helpBody', {read: ElementRef}) helpBody: ElementRef
@ViewChild('screenshotPreviewCard', {read: ElementRef}) screenshotPreviewCard: ElementRef
+ @ViewChild('previewImageDialog', {read: TemplateRef}) previewImageDialogTemplateRef : TemplateRef<any>
+ @Output() focusSigninBaner = new EventEmitter()
+
+ dialogRef
+
takingScreenshot = false
previewingScreenshot = false
loadingScreenshot = false
@@ -37,9 +51,7 @@ export class TakeScreenshotComponent implements OnInit {
screenshotStartY = 0
imageUrl
- constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: any) {
-
- }
+ constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: any, private matDialog: MatDialog) {}
ngOnInit(): void {
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
@@ -47,7 +59,7 @@ export class TakeScreenshotComponent implements OnInit {
}
@HostListener('window:resize', ['$event'])
- onResize(event) {
+ onResize() {
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
this.windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
}
@@ -60,10 +72,10 @@ export class TakeScreenshotComponent implements OnInit {
}
startScreenshot(){
- this.takingScreenshot = true
this.previewingScreenshot = false
this.croppedCanvas = null
- this.loadingScreenshot = null
+ this.loadingScreenshot = false
+ this.takingScreenshot = true
}
move = (e) => {
@@ -196,12 +208,33 @@ export class TakeScreenshotComponent implements OnInit {
this.imageUrl = this.croppedCanvas.toDataURL()
this.previewingScreenshot = true
this.clearStateAfterScreenshot()
+
+ this.dialogRef = this.matDialog.open(this.previewImageDialogTemplateRef)
+ this.dialogRef.afterClosed().toPromise()
+ .then(result => {
+ switch (result) {
+ case 'save': {
+ this.saveImage()
+ this.cancelTakingScreenshot()
+ break
+ }
+ case 'again': {
+ this.focusSigninBaner.emit()
+ this.startScreenshot()
+ break
+ }
+ case 'cancel': {
+ this.cancelTakingScreenshot()
+ break
+ }
+ }
+ })
})
}
saveImage() {
this.downloadLink.nativeElement.href = this.croppedCanvas.toDataURL('image/png')
- this.downloadLink.nativeElement.download = 'marble-diagram.png'
+ this.downloadLink.nativeElement.download = 'brain screenshot.png'
this.downloadLink.nativeElement.click()
}
@@ -229,5 +262,4 @@ export class TakeScreenshotComponent implements OnInit {
this.screenshotStartX = 0
this.screenshotStartY = 0
}
-
}
diff --git a/src/ui/takeScreenshot/takeScreenshot.style.css b/src/ui/takeScreenshot/takeScreenshot.style.css
index fa111504d..9574fd58f 100644
--- a/src/ui/takeScreenshot/takeScreenshot.style.css
+++ b/src/ui/takeScreenshot/takeScreenshot.style.css
@@ -21,27 +21,28 @@
}
.smallSizeWindow {
- width: 160px;
height: 40px;
}
.cancelTimesPosition {
top: 5px;
- right: 5px;
+ right: -10px;
}
.previewScreenshot {
- max-width: 400px !important;
- max-height: 400px !important;
+ max-width: 700px !important;
+ max-height: 700px !important;
}
.previewImage {
- max-width:350px !important;
- max-height:350px !important;
+ max-width:400px !important;
+ max-height:400px !important;
}
.screenshotPreviewCard {
- bottom: 50px !important;
- right: 150px !important;
+ top: 50px !important;
+ right: 50% !important;
+ left: 50% !important;
z-index: 10520 !important;
-}
+ background: rgba(0,0,0,0);
+}
\ No newline at end of file
diff --git a/src/ui/takeScreenshot/takeScreenshot.template.html b/src/ui/takeScreenshot/takeScreenshot.template.html
index d0788f753..c71088926 100644
--- a/src/ui/takeScreenshot/takeScreenshot.template.html
+++ b/src/ui/takeScreenshot/takeScreenshot.template.html
@@ -11,31 +11,34 @@
</div>
<mat-card #screenshotPreviewCard
- class="position-fixed screenshotPreviewCard"
+ class="position-fixed screenshotPreviewCard p-0 d-flex justify-content-center"
(click)="$event.stopPropagation()"
- *ngIf="previewingScreenshot || takingScreenshot || loadingScreenshot">
- <i class="fas fa-times cursorPointer position-absolute cancelTimesPosition"
- (click)="cancelTakingScreenshot()">
- </i>
-
- <div *ngIf="takingScreenshot || loadingScreenshot" class="smallSizeWindow">
- <div class="d-flex flex-column w-100 h-100" *ngIf="takingScreenshot">
- <span>Size: {{boxEndWidth}} x {{boxEndHeight}}px</span>
+ *ngIf="takingScreenshot || loadingScreenshot">
+ <div class="smallSizeWindow">
+ <div class="d-flex flex-column w-100 h-100 align-items-center position-relative" *ngIf="takingScreenshot">
+ <span class="h3 text-nowrap" *ngIf="!mouseIsDown">You are taking screenshot.</span>
+ <i *ngIf="!mouseIsDown" class="fas fa-times cursorPointer position-absolute cancelTimesPosition"
+ (click)="cancelTakingScreenshot()">
+ </i>
</div>
<div class="d-flex w-100 h-100 justify-content-center align-items-center" *ngIf="loadingScreenshot">
- <i class="fas fa-spinner fa-pulse"></i>
+ <span class="h3 text-nowrap">Please wait to your screenshot.</span> <i class="fas fa-spinner fa-pulse ml-1"></i>
</div>
+
</div>
+</mat-card>
+
+<ng-template #previewImageDialog>
<div *ngIf="previewingScreenshot" class="d-flex flex-column align-items-center previewScreenshot">
<img [src]="imageUrl" class="previewImage">
- <div class="d-flex w-100 justify-content-end mt-2">
- <button mat-stroked-button color="primary" class="mr-1 ml-1" (click)="saveImage(); previewingScreenshot = false; takingScreenshot = false; croppedCanvas = null;">
+ <div class="d-flex w-100 justify-content-center mt-2">
+ <button mat-stroked-button color="primary" class="mr-1 ml-1" mat-dialog-close="save">
<i class="fas fa-save"></i> Save
</button>
- <button mat-stroked-button color="primary" class="mr-1 ml-1" (click)="previewingScreenshot = false; takingScreenshot = true; croppedCanvas = null;">
+ <button mat-stroked-button color="primary" class="mr-1 ml-1" mat-dialog-close="again">
<i class="fas fa-camera"></i> Try again
</button>
- <button mat-stroked-button color="primary" class="mr-1 ml-1" (click)="cancelTakingScreenshot()">
+ <button mat-stroked-button color="warn" class="mr-1 ml-1" mat-dialog-close="cancel">
<i class="fas fa-times"></i> Cancel
</button>
</div>
@@ -43,4 +46,4 @@
<div id="download" class="d-none">
<a #downloadLink></a>
</div>
-</mat-card>
\ No newline at end of file
+</ng-template>
\ No newline at end of file
--
GitLab