close popovers with backdrop (#2110)

UnchartedBull · Jul 29, 2021 · 6b54702 · 6b54702
1 parent 48cfecb
commit 6b54702
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 80 deletions.
diff --git a/angular.json b/angular.json
@@ -96,10 +96,15 @@
               ]
             },
             "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
               "sourceMap": true,
               "namedChunks": true
             }
-          }
+          },
+          "defaultConfiguration": "development"
         },
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",

diff --git a/src/app/control/control.component.html b/src/app/control/control.component.html
@@ -9,33 +9,10 @@
     <td class="top-bar__center">
       <img src="assets/control.svg" class="top-bar__center-icon" />
     </td>
-    <td class="top-bar__next" (click)="showHelp = true">
-      <span matRipple [matRippleUnbounded]="false" [matRippleCentered]="true">
-        <img src="assets/help.svg" class="top-bar__next-icon" />
-      </span>
-    </td>
+    <td class="top-bar__next"></td>
   </tr>
 </table>
 
-<div class="help" *ngIf="showHelp">
-  <div class="help__card">
-    <img src="assets/error.svg" class="help__close" (click)="showHelp = false" />
-    <span class="help__heading">Control Screen</span>
-    <span class="help__text">
-      <ng-container i18n="@@help-adjust-speed">
-        You can adjust the printhead speed in the settings (default 150mm/s for XY - 5mm/s for Z).
-      </ng-container>
-      <br />
-      <span i18n="@@help-custom-actions-message">
-        You can customize the 6 icons on the right. They can either send GCode Commands to the printer or call a few
-        predefined actions (like rebooting the Pi). Please visit the GitHub Wiki to get further information.
-      </span>
-      <br />
-      <ng-container i18n="@@help-custom-actions"> Wiki page is called "CustomActions". </ng-container>
-    </span>
-  </div>
-</div>
-
 <div class="control">
   <div class="control__XY">
     <div class="control__XY-wrapper">

diff --git a/src/app/control/control.component.ts b/src/app/control/control.component.ts
@@ -13,7 +13,6 @@ export class ControlComponent {
   public printerProfile: OctoprintPrinterProfile;
 
   public jogDistance = 10;
-  public showHelp = false;
 
   public constructor(private printerService: PrinterService, private notificationService: NotificationService) {
     this.printerService.getActiveProfile().subscribe(

diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html
@@ -89,8 +89,8 @@
   <div class="scroll__thumb-inactive" *ngIf="directory"></div>
 </div>
 
-<div class="file" id="fileDetailView">
-  <div class="file__wrapper" *ngIf="fileDetail && fileDetail.name !== 'error'">
+<div class="file" id="fileDetailView" (click)="closeDetails()">
+  <div class="file__wrapper" *ngIf="fileDetail && fileDetail.name !== 'error'" (click)="stopPropagation($event)">
     <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />
     <span class="file__name">{{ fileDetail.name }}</span>
     <span class="file__directory">{{ fileDetail.path }}</span>
@@ -137,8 +137,8 @@
   </div>
 </div>
 
-<div class="sorting" id="sortingView" *ngIf="showSorting">
-  <div class="sorting-wrapper">
+<div class="sorting" id="sortingView" *ngIf="showSorting" (click)="closeSorting()">
+  <div class="sorting-wrapper" (click)="stopPropagation($event)">
     <img src="assets/error.svg" class="sorting-close" (click)="closeSorting()" />
     <span class="sorting-heading" i18n="@@files-sort">sort files</span>
     <table class="sorting-selection">

diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss
@@ -130,7 +130,6 @@
   width: 100vw;
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.85);
-  // backdrop-filter: blur(8px);
   transition: opacity 0.4s ease-in-out;
   z-index: 5;
 

diff --git a/src/app/files/files.component.ts b/src/app/files/files.component.ts
@@ -116,6 +116,10 @@ export class FilesComponent {
     }, 500);
   }
 
+  public stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
   public openSorting(): void {
     this.showSorting = true;
     setTimeout((): void => {

diff --git a/src/app/printer-status/printer-status.component.html b/src/app/printer-status/printer-status.component.html
@@ -15,6 +15,7 @@
         /{{ printerStatus.tool0.set }}<span class="unit">°C</span>
       </span>
     </td>
+
     <td
       class="printer-status__value printer-status__value-2"
       [ngClass]="{ 'printer-status__no-set-value': printerStatus.bed.set === 0 }"
@@ -30,6 +31,7 @@
         /{{ printerStatus.bed.set }}<span class="unit">°C</span>
       </span>
     </td>
+
     <td
       class="printer-status__value printer-status__value-3 printer-status__no-set-value"
       (click)="showQuickControlFan()"
@@ -43,12 +45,12 @@
     </td>
   </tr>
 </table>
-<div class="quick-control" *ngIf="view !== QuickControlView.NONE" id="quickControl">
-  <table class="top-bar" (click)="hideQuickControl()">
+
+<div class="quick-control" *ngIf="view !== QuickControlView.NONE" id="quickControl" (click)="hideQuickControl()">
+  <table class="top-bar">
     <tr>
       <td class="top-bar__back">
         <img src="assets/back.svg" class="top-bar__back-icon" matRipple [matRippleUnbounded]="false" />
-        <ng-container i18n="@@quick-back">back</ng-container>
       </td>
       <td class="top-bar__center">
         <img
@@ -63,10 +65,11 @@
           class="top-bar__center-icon"
         />
       </td>
-      <td class="top-bar__back"></td>
+      <td class="top-bar__next"></td>
     </tr>
   </table>
-  <div class="quick-control__controller">
+
+  <div class="quick-control__controller" (click)="stopPropagation($event)">
     <div class="quick-control__controller-row">
       <div
         class="quick-control__controller-increase"
@@ -85,6 +88,7 @@
         +10
       </div>
     </div>
+
     <div
       class="quick-control__controller-value"
       colspan="2"
@@ -116,6 +120,7 @@
       {{ this.fanTarget }}
       <span class="quick-control__controller-value-unit">%</span>
     </div>
+
     <div class="quick-control__controller-row">
       <div
         class="quick-control__controller-decrease"
@@ -134,6 +139,7 @@
         -10
       </div>
     </div>
+
     <div class="quick-control__controller-row">
       <div
         class="quick-control__controller-set"

diff --git a/src/app/printer-status/printer-status.component.scss b/src/app/printer-status/printer-status.component.scss
@@ -83,7 +83,6 @@
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.85);
-  // backdrop-filter: blur(8px);
   transition: opacity 0.4s ease-in-out;
   z-index: 10;
   opacity: 0;

diff --git a/src/app/printer-status/printer-status.component.ts b/src/app/printer-status/printer-status.component.ts
@@ -76,6 +76,10 @@ export class PrinterStatusComponent implements OnInit, OnDestroy {
     }, 500);
   }
 
+  public stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
   public quickControlChangeValue(value: number): void {
     switch (this.view) {
       case QuickControlView.HOTEND:

diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
@@ -1,6 +1,6 @@
 <div class="settings">
-  <div class="settings-wrapper" [ngClass]="{ 'settings-wrapper-fadeout': fadeOutAnimation }">
-    <div class="settings-container">
+  <div class="settings-wrapper" [ngClass]="{ 'settings-wrapper-fadeout': fadeOutAnimation }" (click)="hideSettings()">
+    <div class="settings-container" (click)="stopPropagation($event)">
       <img src="assets/error.svg" class="settings__close" (click)="hideSettings()" />
       <div class="settings__content" #settingsMain>
         <span class="settings__heading" i18n="@@settings">settings</span>

diff --git a/src/app/settings/settings.component.ts b/src/app/settings/settings.component.ts
@@ -79,6 +79,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
     }
   }
 
+  public stopPropagation(event: Event): void {
+    event.stopPropagation();
+  }
+
   public changePage(page: number, current: number, direction: 'forward' | 'backward'): void {
     this.pages[current].classList.add('settings__content-slideout-' + direction);
     this.pages[page].classList.remove('settings__content-inactive');

diff --git a/src/styles.scss b/src/styles.scss
@@ -117,47 +117,6 @@ app-root {
   }
 }
 
-.help {
-  position: fixed;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.85);
-  // backdrop-filter: blur(8px);
-  z-index: 1000;
-
-  &__card {
-    display: block;
-    position: fixed;
-    left: 7vw;
-    right: 7vw;
-    bottom: 7vh;
-    top: 7vh;
-    background-color: #353b48;
-    padding: 3.5vh 2vw;
-  }
-
-  &__close {
-    display: block;
-    width: 6vw;
-    position: absolute;
-    right: 2vw;
-    top: 3vh;
-  }
-
-  &__heading {
-    display: block;
-    padding-bottom: 2vh;
-    font-weight: 500;
-  }
-
-  &__text {
-    text-align: justify;
-    font-size: 3vw;
-  }
-}
-
 .splash-screen {
   &__icon {
     height: 50vh;