From 8a5d885f03b7fc9e9da3b650b4993da49453f05a Mon Sep 17 00:00:00 2001
From: Xiao Gui <xgui3783@gmail.com>
Date: Thu, 21 Nov 2019 14:05:10 +0100
Subject: [PATCH] chore: fix styles chore: change detection
---
src/res/css/extra_styles.css | 10 ++
src/ui/signinBanner/signinBanner.style.css | 5 +
.../signinBanner/signinBanner.template.html | 6 +-
.../takeScreenshot.component.ts | 147 +++++++++---------
.../takeScreenshot/takeScreenshot.style.css | 17 +-
.../takeScreenshot.template.html | 91 ++++++-----
6 files changed, 149 insertions(+), 127 deletions(-)
diff --git a/src/res/css/extra_styles.css b/src/res/css/extra_styles.css
index 0342c195b..0ff2cabc4 100644
--- a/src/res/css/extra_styles.css
+++ b/src/res/css/extra_styles.css
@@ -688,3 +688,13 @@ body::after
position:absolute;
background:linear-gradient(transparent 50px, #424242);
}
+
+.o-1
+{
+ opacity: 1.0!important;
+}
+
+.o-0
+{
+ opacity: 0.0!important;
+}
\ No newline at end of file
diff --git a/src/ui/signinBanner/signinBanner.style.css b/src/ui/signinBanner/signinBanner.style.css
index 74e36a8f2..06e68c902 100644
--- a/src/ui/signinBanner/signinBanner.style.css
+++ b/src/ui/signinBanner/signinBanner.style.css
@@ -9,3 +9,8 @@
{
pointer-events: all;
}
+
+take-screenshot
+{
+ z-index: 1509;
+}
\ No newline at end of file
diff --git a/src/ui/signinBanner/signinBanner.template.html b/src/ui/signinBanner/signinBanner.template.html
index c3c78b069..52f5ed744 100644
--- a/src/ui/signinBanner/signinBanner.template.html
+++ b/src/ui/signinBanner/signinBanner.template.html
@@ -169,4 +169,8 @@
</mat-list-item>
</mat-list>
</ng-template>
-<take-screenshot #takeScreenshotElement style="z-index: 1509;" class="position-fixed fixed-top" (focusSigninBaner)="signInBanner.focus()"></take-screenshot>
+
+<take-screenshot
+ #takeScreenshotElement
+ class="position-fixed fixed-top">
+</take-screenshot>
diff --git a/src/ui/takeScreenshot/takeScreenshot.component.ts b/src/ui/takeScreenshot/takeScreenshot.component.ts
index 0f4789c60..1ebccf587 100644
--- a/src/ui/takeScreenshot/takeScreenshot.component.ts
+++ b/src/ui/takeScreenshot/takeScreenshot.component.ts
@@ -1,16 +1,17 @@
import {
Component,
- ElementRef, EventEmitter,
+ ElementRef,
HostListener,
Inject,
- OnInit, Output,
+ OnInit,
Renderer2,
TemplateRef,
- ViewChild
+ ViewChild,
+ ChangeDetectorRef
} from "@angular/core";
import html2canvas from "html2canvas";
import {DOCUMENT} from "@angular/common";
-import {MatDialog} from "@angular/material/dialog";
+import {MatDialog, MatDialogRef} from "@angular/material/dialog";
@Component({
selector: 'take-screenshot',
@@ -19,39 +20,48 @@ import {MatDialog} from "@angular/material/dialog";
})
export class TakeScreenshotComponent implements OnInit {
- @ViewChild('downloadLink', {read: ElementRef}) downloadLink: ElementRef
@ViewChild('screenshotPreviewCard', {read: ElementRef}) screenshotPreviewCard: ElementRef
@ViewChild('previewImageDialog', {read: TemplateRef}) previewImageDialogTemplateRef : TemplateRef<any>
- @Output() focusSigninBaner = new EventEmitter()
- dialogRef
+ private dialogRef: MatDialogRef<any>
- takingScreenshot = false
- previewingScreenshot = false
- loadingScreenshot = false
- croppedCanvas = null
+ public takingScreenshot:boolean = false
+ public previewingScreenshot:boolean = false
+ public loadingScreenshot:boolean = false
+
+ public screenshotName:string = `screenshot.png`
+ private croppedCanvas = null
- mouseIsDown = false
- isDragging = false
- tookScreenShot = false // After the mouse is released
+ public mouseIsDown = false
+ public isDragging = false
+
// Used to calculate where to start showing the dragging area
- startX = 0
- startY = 0
- endX = 0
- endY = 0
- borderWidth = ''
+ private startX:number = 0
+ private startY:number = 0
+ private endX:number = 0
+ private endY:number = 0
+
+ public borderWidth:string = ''
// The box that contains the border and all required numbers.
- boxTop = 0
- boxLeft = 0
- boxEndWidth = 0
- boxEndHeight = 0
- windowHeight = 0
- windowWidth = 0
- screenshotStartX = 0
- screenshotStartY = 0
- imageUrl
-
- constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: any, private matDialog: MatDialog) {}
+ public boxTop: number = 0
+ public boxLeft: number = 0
+ public boxEndWidth: number = 0
+ public boxEndHeight: number = 0
+
+ private windowHeight: number = 0
+ private windowWidth: number = 0
+
+ private screenshotStartX:number = 0
+ private screenshotStartY:number = 0
+
+ public imageUrl:string
+
+ constructor(
+ private renderer: Renderer2,
+ @Inject(DOCUMENT) private document: any,
+ private matDialog: MatDialog,
+ private cdr:ChangeDetectorRef
+ ) {}
ngOnInit(): void {
this.windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
@@ -78,7 +88,7 @@ export class TakeScreenshotComponent implements OnInit {
this.takingScreenshot = true
}
- move = (e) => {
+ move(e:MouseEvent){
if (this.mouseIsDown) {
this.isDragging = true
@@ -155,40 +165,53 @@ export class TakeScreenshotComponent implements OnInit {
}
}
- mouseDown = (e) => {
+ mouseDown(e:MouseEvent){
this.borderWidth = this.windowWidth + 'px ' + this.windowHeight + 'px'
this.startX = e.clientX
this.startY = e.clientY
-
this.mouseIsDown = true
- this.tookScreenShot = false
}
- mouseUp = (e) => {
+ mouseUp(e:MouseEvent){
this.borderWidth = '0'
- if (this.isDragging) {
- // Don't take the screenshot unless the mouse moved somehow.
- this.tookScreenShot = true
- }
-
this.isDragging = false
this.mouseIsDown = false
- this.loadingScreenshot = true
this.takingScreenshot = false
if (this.boxEndWidth * window.devicePixelRatio <= 1 && this.boxEndHeight * window.devicePixelRatio <= 1) {
this.cancelTakingScreenshot()
} else {
- this.takeScreenshot()
+ this.loadScreenshot()
}
}
- takeScreenshot() {
+ loadScreenshot() {
+
+ this.loadingScreenshot = true
+ this.dialogRef = this.matDialog.open(this.previewImageDialogTemplateRef, {
+ autoFocus: false
+ })
+ this.dialogRef.afterClosed().toPromise()
+ .then(result => {
+ switch (result) {
+ case 'again': {
+ this.startScreenshot()
+ this.cdr.markForCheck()
+ break
+ }
+ case 'cancel': {
+ this.cancelTakingScreenshot()
+ break
+ }
+ default: this.cancelTakingScreenshot()
+ }
+ })
+
html2canvas(this.document.querySelector('#neuroglancer-container canvas')).then(canvas => {
this.croppedCanvas = null
this.croppedCanvas = this.renderer.createElement('canvas')
@@ -203,41 +226,20 @@ export class TakeScreenshotComponent implements OnInit {
0, 0,
this.boxEndWidth * window.devicePixelRatio, this.boxEndHeight * window.devicePixelRatio)
}).then(() => {
- this.screenshotPreviewCard.nativeElement.click()
+
+ const d = new Date()
+ const n = `${d.getFullYear()}_${d.getMonth() + 1}_${d.getDate()}_${d.getHours()}_${d.getMinutes()}_${d.getSeconds()}`
+ this.screenshotName = `${n}_IAV.png`
+
this.loadingScreenshot = false
- this.imageUrl = this.croppedCanvas.toDataURL()
+ this.imageUrl = this.croppedCanvas.toDataURL('image/png')
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
- }
- }
- })
+
+ this.cdr.markForCheck()
})
}
- saveImage() {
- this.downloadLink.nativeElement.href = this.croppedCanvas.toDataURL('image/png')
- this.downloadLink.nativeElement.download = 'brain screenshot.png'
- this.downloadLink.nativeElement.click()
- }
-
cancelTakingScreenshot() {
this.takingScreenshot = false
this.previewingScreenshot = false
@@ -247,7 +249,6 @@ export class TakeScreenshotComponent implements OnInit {
clearStateAfterScreenshot() {
this.mouseIsDown = false
this.isDragging = false
- this.tookScreenShot = false
this.startX = 0
this.startY = 0
this.endX = 0
diff --git a/src/ui/takeScreenshot/takeScreenshot.style.css b/src/ui/takeScreenshot/takeScreenshot.style.css
index 9574fd58f..f104726c3 100644
--- a/src/ui/takeScreenshot/takeScreenshot.style.css
+++ b/src/ui/takeScreenshot/takeScreenshot.style.css
@@ -18,6 +18,8 @@
clear: both;
background-repeat: no-repeat;
background-size: cover;
+
+ transition: opacity ease-in-out 200ms;
}
.smallSizeWindow {
@@ -29,20 +31,7 @@
right: -10px;
}
-.previewScreenshot {
- max-width: 700px !important;
- max-height: 700px !important;
-}
-
-.previewImage {
- max-width:400px !important;
- max-height:400px !important;
-}
-
.screenshotPreviewCard {
- top: 50px !important;
- right: 50% !important;
- left: 50% !important;
z-index: 10520 !important;
- background: rgba(0,0,0,0);
+ background:none;
}
\ No newline at end of file
diff --git a/src/ui/takeScreenshot/takeScreenshot.template.html b/src/ui/takeScreenshot/takeScreenshot.template.html
index c71088926..126211c98 100644
--- a/src/ui/takeScreenshot/takeScreenshot.template.html
+++ b/src/ui/takeScreenshot/takeScreenshot.template.html
@@ -1,49 +1,62 @@
-<div id="screenshot"
- class="screenshotContainer overflow-hidden w-100 h-100"
- (mousemove)="move($event)"
- (mousedown)="mouseDown($event)"
- (mouseup)="mouseUp($event)"
- *ngIf="takingScreenshot"
- [ngStyle]="{'cursor':takingScreenshot? 'crosshair' : 'auto'}">
- <div class="overlay position-fixed fixed-top w-100 h-100" [ngClass]="{ 'highlighting' : mouseIsDown }" [ngStyle]="{ borderWidth: borderWidth }"></div>
- <div class="position-absolute border border-light" *ngIf="isDragging" [ngStyle]="{ left: boxLeft + 'px', top: boxTop + 'px', width: boxEndWidth + 'px', height: boxEndHeight + 'px' }"></div>
+<div class="screenshotContainer overflow-hidden w-100 h-100"
+ (mousemove)="move($event)"
+ (mousedown)="mouseDown($event)"
+ (mouseup)="mouseUp($event)"
+ [ngClass]="{'pe-none o-0':!takingScreenshot, 'o-1': takingScreenshot}"
+ [ngStyle]="{'cursor':takingScreenshot? 'crosshair' : 'auto'}">
+ <div class="overlay position-fixed fixed-top w-100 h-100 d-flex align-items-center justify-content-center"
+ [ngClass]="{ 'highlighting' : mouseIsDown }"
+ [ngStyle]="{ borderWidth: borderWidth }">
+
+ <!-- instruction text -->
+ <mat-card *ngIf="!isDragging" class="screenshotPreviewCard pe-none">
+ <mat-card-title>
+ Drag a box to take a screenshot
+ </mat-card-title>
+ <mat-card-subtitle class="text-muted d-flex justify-content-center">
+ cancel with Esc
+ </mat-card-subtitle>
+ </mat-card>
+ </div>
+ <div class="position-absolute border border-light"
+ *ngIf="isDragging"
+ [ngStyle]="{ left: boxLeft + 'px', top: boxTop + 'px', width: boxEndWidth + 'px', height: boxEndHeight + 'px' }">
+ </div>
</div>
-<mat-card #screenshotPreviewCard
- class="position-fixed screenshotPreviewCard p-0 d-flex justify-content-center"
- (click)="$event.stopPropagation()"
- *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>
+<ng-template #previewImageDialog>
+ <mat-dialog-content>
+
<div class="d-flex w-100 h-100 justify-content-center align-items-center" *ngIf="loadingScreenshot">
- <span class="h3 text-nowrap">Please wait to your screenshot.</span> <i class="fas fa-spinner fa-pulse ml-1"></i>
+ <span class="text-nowrap">Generating screenshot </span> <i class="fas fa-spinner fa-pulse ml-1"></i>
</div>
+ <ng-template [ngIf]="!loadingScreenshot">
+ <img [src]="imageUrl" class="w-100 h-100">
+ </ng-template>
+ </mat-dialog-content>
+ <mat-dialog-actions align="end">
- </div>
-</mat-card>
+ <a *ngIf="imageUrl"
+ [href]="imageUrl"
+ [download]="screenshotName">
-<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-center mt-2">
- <button mat-stroked-button color="primary" class="mr-1 ml-1" mat-dialog-close="save">
+ <button mat-raised-button
+ color="primary"
+ class="mr-2">
<i class="fas fa-save"></i> Save
</button>
- <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="warn" class="mr-1 ml-1" mat-dialog-close="cancel">
- <i class="fas fa-times"></i> Cancel
- </button>
- </div>
- </div>
- <div id="download" class="d-none">
- <a #downloadLink></a>
- </div>
+ </a>
+ <button mat-stroked-button
+ color="default"
+ class="mr-2"
+ mat-dialog-close="again">
+ <i class="fas fa-camera"></i> Try again
+ </button>
+ <button mat-button
+ color="default"
+ mat-dialog-close="cancel">
+ Cancel
+ </button>
+ </mat-dialog-actions>
</ng-template>
\ No newline at end of file
--
GitLab