Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

remove backdrop filter and add dot animation #1114

Merged
merged 1 commit into from
Oct 22, 2020
Merged

remove backdrop filter and add dot animation #1114

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
4 changes: 2 additions & 2 deletions src/app/config/no-config/no-config.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/app/control/control.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/app/filament/filament.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/app/files/files.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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()" />
Expand Down
8 changes: 4 additions & 4 deletions src/app/files/files.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/app/job-status/job-status.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
4 changes: 2 additions & 2 deletions src/app/print-control/print-control.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/app/printer-status/printer-status.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/app/settings/settings.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/app/standby/standby.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
13 changes: 8 additions & 5 deletions src/app/update/update.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -25,4 +28,4 @@
<button class="update-restart-button update-restart-button__yes" (click)="reboot()">yes</button>
</div>
</div>
</div>
</div>
55 changes: 51 additions & 4 deletions src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand Down Expand Up @@ -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);
}
}