remove backdrop filter and add dot animation (#1114)

UnchartedBull · Oct 22, 2020 · ae26107 · ae26107
1 parent 423334c
commit ae26107
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 32 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,8 +1,8 @@
 <app-notification></app-notification>
 <div class="container">
   <div *ngIf="!activated">
-    <img src="assets/icon/icon-main-title.svg" class="splash-screen__icon" />
-    <span class="splash-screen__credits">by UnchartedBull</span>
+    <img src="assets/icon/icon-main.svg" class="splash-screen__icon-small" />
+    <span class="splash-screen__text loading-dots">connecting</span>
   </div>
   <router-outlet (activate)="activated = true"></router-outlet>
-</div>
+</div>
diff --git a/src/app/config/no-config/no-config.component.html b/src/app/config/no-config/no-config.component.html
@@ -65,7 +65,7 @@
           </div>
           <img src="assets/connect.svg" class="no-config__discovered-instances__node-connect-icon" />
         </span>
-        <span class="no-config__discovered-instances__searching" *ngIf="!octoprintNodes">searching ...</span>
+        <span class="no-config__discovered-instances__searching loading-dots" *ngIf="!octoprintNodes">searching</span>
       </div>
       <div class="no-config__discovered-instances__manual" (click)="enterURLManually()">enter manually</div>
     </div>
@@ -102,7 +102,7 @@
   </div>
 
   <div *ngIf="page === 1.5">
-    <span class="no-config__connecting">connecting ...</span>
+    <span class="no-config__connecting loading-dots">connecting</span>
   </div>
 
   <div *ngIf="page === 2">

diff --git a/src/app/control/control.component.scss b/src/app/control/control.component.scss
@@ -218,8 +218,8 @@
   &__wrapper {
     position: fixed;
     z-index: 2;
-    backdrop-filter: blur(8px);
-    background-color: rgba(0, 0, 0, 0.77);
+    background-color: rgba(0, 0, 0, 0.85);
+    // backdrop-filter: blur(8px);
     left: 0;
     top: 0;
     right: 0;

diff --git a/src/app/filament/filament.component.html b/src/app/filament/filament.component.html
@@ -35,7 +35,7 @@
       </tr>
     </table>
     <div class="filament-no-filaments" *ngIf="!filamentSpools && !isLoadingSpools">no filament spools found</div>
-    <div class="filament-no-filaments" *ngIf="isLoadingSpools">loading spools ...</div>
+    <div class="filament-no-filaments loading-dots" *ngIf="isLoadingSpools">loading spools</div>
     <div class="scroll__thumb-inactive" *ngIf="filamentSpools"></div>
   </div>
   <div *ngIf="page === 1">

diff --git a/src/app/files/files.component.html b/src/app/files/files.component.html
@@ -30,7 +30,7 @@
 </div>
 <div class="files">
   <ngx-spinner>
-    <p class="la-pacman-text">loading ...</p>
+    <p class="la-pacman-text">loading</p>
   </ngx-spinner>
 
   <div *ngIf="!folderContent" class="files__error">can't load files ...</div>
@@ -120,7 +120,7 @@
   </div>
   <div class="file__wrapper file__loading" *ngIf="!fileDetail">
     <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />
-    loading details ...
+    <span class="loading-dots">loading details</span>
   </div>
   <div class="file__wrapper file__loading" *ngIf="fileDetail && fileDetail.name === 'error'">
     <img src="assets/error.svg" class="file__close" (click)="closeDetails()" />

diff --git a/src/app/files/files.component.scss b/src/app/files/files.component.scss
@@ -134,8 +134,8 @@
   left: 0;
   width: 100vw;
   height: 100vh;
-  backdrop-filter: blur(8px);
-  background-color: rgba(0, 0, 0, 0.77);
+  background-color: rgba(0, 0, 0, 0.85);
+  // backdrop-filter: blur(8px);
   transition: opacity 0.4s ease-in-out;
   z-index: 5;
 
@@ -270,8 +270,8 @@
 .sorting {
   display: block;
   position: fixed;
-  backdrop-filter: blur(8px);
-  background-color: rgba(0, 0, 0, 0.77);
+  background-color: rgba(0, 0, 0, 0.85);
+  // backdrop-filter: blur(8px);
   transition: opacity 0.4s ease-in-out;
   left: 0;
   top: 0;

diff --git a/src/app/job-status/job-status.component.html b/src/app/job-status/job-status.component.html
@@ -100,5 +100,5 @@
     </span>
   </div>
 </div>
-<div class="job-info__no-job" *ngIf="(!job && isFileLoaded()) || (!job && isPrinting())">loading info ...</div>
+<div class="job-info__no-job loading-dots" *ngIf="(!job && isFileLoaded()) || (!job && isPrinting())">loading info</div>
 <div class="job-info__no-job" *ngIf="!job && !isFileLoaded() && !isPrinting()">no job running ...</div>
diff --git a/src/app/print-control/print-control.component.scss b/src/app/print-control/print-control.component.scss
@@ -5,8 +5,8 @@
     right: 0;
     top: 0;
     bottom: 0;
-    backdrop-filter: blur(8px);
-    background-color: rgba(0, 0, 0, 0.77);
+    background-color: rgba(0, 0, 0, 0.85);
+    // backdrop-filter: blur(8px);
     transition: opacity 0.4s ease-in-out;
     z-index: 50;
     opacity: 1;

diff --git a/src/app/printer-status/printer-status.component.scss b/src/app/printer-status/printer-status.component.scss
@@ -82,8 +82,8 @@
   top: 0;
   right: 0;
   bottom: 0;
-  backdrop-filter: blur(8px);
-  background-color: rgba(0, 0, 0, 0.75);
+  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/settings/settings.component.scss b/src/app/settings/settings.component.scss
@@ -6,8 +6,8 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.75);
-    backdrop-filter: blur(8px);
+    background-color: rgba(0, 0, 0, 0.85);
+    // backdrop-filter: blur(8px);
     z-index: 20;
 
     &-fadeout {

diff --git a/src/app/standby/standby.component.html b/src/app/standby/standby.component.html
@@ -6,7 +6,7 @@
 
 <div class="standby__error" *ngIf="error !== ''" (click)="error = ''">
   {{ error }}
-  <span class="standby__error-close">tap this card to close it ...</span>
+  <span class="standby__error-close">tap this card to close it.</span>
 </div>
 
-<div class="standby__error" *ngIf="connecting">connecting ...</div>
+<div class="standby__error loading-dots" *ngIf="connecting">connecting</div>
diff --git a/src/app/update/update.component.html b/src/app/update/update.component.html
@@ -1,17 +1,20 @@
 <div class="update-container">
   <div *ngIf="page === 1">
-    <span class="update-heading">downloading update ...</span>
+    <span class="update-heading">downloading update</span>
     <div class="update-progress-bar__wrapper">
-      <div class="update-progress-bar" [ngStyle]="{ width: updateProgress.percentage / 2 + 'vw' }"
-        id="updateDownloadProgress">
+      <div
+        class="update-progress-bar"
+        [ngStyle]="{ width: updateProgress.percentage / 2 + 'vw' }"
+        id="updateDownloadProgress"
+      >
         {{ updateProgress.speed }} MB/s&nbsp;
       </div>
     </div>
     <span class="update-size__total">{{ updateProgress.total }} MB</span>
     <span class="update-time__remaining">{{ updateProgress.eta }} minutes left</span>
   </div>
   <div *ngIf="page === 2">
-    <span class="update-heading">installing update ...</span>
+    <span class="update-heading">installing update</span>
     <div class="update-progress-bar__wrapper">
       <div class="update-progress-bar update-progress-bar-no-percentage" id="installUpdateProgress"></div>
     </div>
@@ -25,4 +28,4 @@
       <button class="update-restart-button update-restart-button__yes" (click)="reboot()">yes</button>
     </div>
   </div>
-</div>
+</div>
diff --git a/src/styles.scss b/src/styles.scss
@@ -101,8 +101,8 @@ app-root {
   top: 0;
   right: 0;
   bottom: 0;
-  backdrop-filter: blur(8px);
-  background-color: rgba(0, 0, 0, 0.75);
+  background-color: rgba(0, 0, 0, 0.85);
+  // backdrop-filter: blur(8px);
   z-index: 1000;
 
   &__card {
@@ -143,6 +143,14 @@ app-root {
     margin-left: auto;
     margin-right: auto;
     display: block;
+
+    &-small {
+      height: 30vh;
+      margin-top: 10vh;
+      margin-left: auto;
+      margin-right: auto;
+      display: block;
+    }
   }
 
   &__credits {
@@ -154,11 +162,19 @@ app-root {
   }
 
   &__text {
-    text-align: justify;
-    font-size: 3vw;
+    text-align: center;
+    display: block;
+    font-size: 5vw;
+    margin-top: 25vh;
+    opacity: 0.7;
   }
 }
 
+.loading-dots:after {
+  content: ' .';
+  animation: dots 1s steps(7, end) infinite;
+}
+
 ::-webkit-scrollbar {
   width: 3vw;
   box-shadow: none;
@@ -219,3 +235,34 @@ app-root {
 [hidden] {
   display: none;
 }
+
+@keyframes dots {
+  0%,
+  10% {
+    color: rgba(255, 255, 255, 0.2);
+    text-shadow: 0.25em 0 0 rgba(255, 255, 255, 0.2), 0.5em 0 0 rgba(255, 255, 255, 0.2);
+  }
+  20% {
+    color: #f5f6fa;
+    text-shadow: 0.25em 0 0 rgba(255, 255, 255, 0.2), 0.5em 0 0 rgba(255, 255, 255, 0.2);
+  }
+  30% {
+    text-shadow: 0.25em 0 0 #f5f6fa, 0.5em 0 0 rgba(255, 255, 255, 0.2);
+  }
+  52%,
+  60% {
+    text-shadow: 0.25em 0 0 #f5f6fa, 0.5em 0 0 #f5f6fa;
+  }
+  70% {
+    color: rgba(255, 255, 255, 0.2);
+    text-shadow: 0.25em 0 0 #f5f6fa, 0.5em 0 0 #f5f6fa;
+  }
+  80% {
+    text-shadow: 0.25em 0 0 rgba(255, 255, 255, 0.2), 0.5em 0 0 #f5f6fa;
+  }
+  90%,
+  100% {
+    color: rgba(255, 255, 255, 0.2);
+    text-shadow: 0.25em 0 0 rgba(255, 255, 255, 0.2), 0.5em 0 0 rgba(255, 255, 255, 0.2);
+  }
+}