aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html2
-rw-r--r--client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html2
-rw-r--r--client/src/app/menu/notification.component.html2
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html2
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss6
-rw-r--r--client/src/app/shared/shared-main/loaders/index.ts1
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.html8
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.scss45
-rw-r--r--client/src/app/shared/shared-main/loaders/loader.component.ts22
-rw-r--r--client/src/app/shared/shared-main/loaders/small-loader.component.html3
-rw-r--r--client/src/app/shared/shared-main/loaders/small-loader.component.ts11
-rw-r--r--client/src/app/shared/shared-main/shared-main.module.ts4
-rw-r--r--client/src/sass/bootstrap.scss16
13 files changed, 26 insertions, 98 deletions
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
index a76379924..eca821370 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comments.component.html
@@ -80,7 +80,7 @@
80 80
81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template> 81 <ng-template i18n #noAuthorComments>View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}}</ng-template>
82 82
83 <my-small-loader class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-small-loader> 83 <my-loader size="sm" class="comment-thread-loading ms-1" [loading]="threadLoading[comment.id]"></my-loader>
84 </div> 84 </div>
85 </my-video-comment> 85 </my-video-comment>
86 86
diff --git a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
index 2cfaad8f6..835d0e89f 100644
--- a/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
+++ b/client/src/app/+videos/+video-watch/shared/metadata/video-description.component.html
@@ -9,7 +9,7 @@
9 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()"> 9 <div class="video-info-description-more" *ngIf="completeDescriptionShown === false && video.description?.length >= 250" (click)="showMoreDescription()">
10 <ng-container i18n>Show more</ng-container> 10 <ng-container i18n>Show more</ng-container>
11 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span> 11 <span *ngIf="descriptionLoading === false" class="glyphicon glyphicon-menu-down"></span>
12 <my-small-loader class="description-loading" [loading]="descriptionLoading"></my-small-loader> 12 <my-loader size="sm" class="description-loading" [loading]="descriptionLoading"></my-loader>
13 </div> 13 </div>
14 14
15 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more"> 15 <div *ngIf="completeDescriptionShown === true" (click)="showLessDescription()" class="video-info-description-more">
diff --git a/client/src/app/menu/notification.component.html b/client/src/app/menu/notification.component.html
index 2bd11c6f7..5aa834f36 100644
--- a/client/src/app/menu/notification.component.html
+++ b/client/src/app/menu/notification.component.html
@@ -36,7 +36,7 @@
36 </div> 36 </div>
37 37
38 <div *ngIf="!loaded" class="loader mt-4"> 38 <div *ngIf="!loaded" class="loader mt-4">
39 <my-loader [loading]="!loaded"></my-loader> 39 <my-loader size="xl" [loading]="!loaded"></my-loader>
40 </div> 40 </div>
41 41
42 <my-user-notifications 42 <my-user-notifications
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index c0a4b21b8..3e558bbb8 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -7,7 +7,7 @@
7</a> 7</a>
8 8
9<ng-template #content> 9<ng-template #content>
10 <my-small-loader [loading]="loading"></my-small-loader> 10 <my-loader size="sm" [loading]="loading"></my-loader>
11 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon> 11 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
12 12
13 <span *ngIf="label" class="button-label">{{ label }}</span> 13 <span *ngIf="label" class="button-label">{{ label }}</span>
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index 776f6622e..cdd75d525 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -20,12 +20,6 @@
20 display: inline-block; 20 display: inline-block;
21} 21}
22 22
23my-small-loader ::ng-deep .root {
24 display: inline-block;
25 margin: 0 3px 0 0;
26 width: 20px;
27}
28
29a[class$=-button], 23a[class$=-button],
30span[class$=-button] { 24span[class$=-button] {
31 > span { 25 > span {
diff --git a/client/src/app/shared/shared-main/loaders/index.ts b/client/src/app/shared/shared-main/loaders/index.ts
index a061914d5..60483727c 100644
--- a/client/src/app/shared/shared-main/loaders/index.ts
+++ b/client/src/app/shared/shared-main/loaders/index.ts
@@ -1,2 +1 @@
1export * from './loader.component' export * from './loader.component'
2export * from './small-loader.component'
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.html b/client/src/app/shared/shared-main/loaders/loader.component.html
deleted file mode 100644
index ca8ed063e..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.html
+++ /dev/null
@@ -1,8 +0,0 @@
1<div *ngIf="loading">
2 <div class="loader">
3 <div></div>
4 <div></div>
5 <div></div>
6 <div></div>
7 </div>
8</div>
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.scss b/client/src/app/shared/shared-main/loaders/loader.component.scss
deleted file mode 100644
index b88b0db6a..000000000
--- a/client/src/app/shared/shared-main/loaders/loader.component.scss
+++ /dev/null
@@ -1,45 +0,0 @@
1@use '_variables' as *;
2@use '_mixins' as *;
3
4// Thanks to https://loading.io/css/ (CC0 License)
5
6.loader {
7 display: inline-block;
8 position: relative;
9 width: 50px;
10 height: 50px;
11}
12
13.loader div {
14 box-sizing: border-box;
15 display: block;
16 position: absolute;
17 width: 44px;
18 height: 44px;
19 margin: 6px;
20 border: 4px solid;
21 border-radius: 50%;
22 animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
23 border-color: #999999 transparent transparent;
24}
25
26.loader div:nth-child(1) {
27 animation-delay: -0.45s;
28}
29
30.loader div:nth-child(2) {
31 animation-delay: -0.3s;
32}
33
34.loader div:nth-child(3) {
35 animation-delay: -0.15s;
36}
37
38@keyframes loader {
39 0% {
40 transform: rotate(0deg);
41 }
42 100% {
43 transform: rotate(360deg);
44 }
45}
diff --git a/client/src/app/shared/shared-main/loaders/loader.component.ts b/client/src/app/shared/shared-main/loaders/loader.component.ts
index e3b1eea3a..ce8685a09 100644
--- a/client/src/app/shared/shared-main/loaders/loader.component.ts
+++ b/client/src/app/shared/shared-main/loaders/loader.component.ts
@@ -2,9 +2,27 @@ import { Component, Input } from '@angular/core'
2 2
3@Component({ 3@Component({
4 selector: 'my-loader', 4 selector: 'my-loader',
5 styleUrls: [ './loader.component.scss' ], 5 template: `<div *ngIf="loading" class="spinner-border" [ngStyle]="getStyle()" role="status"></div>`
6 templateUrl: './loader.component.html'
7}) 6})
8export class LoaderComponent { 7export class LoaderComponent {
9 @Input() loading: boolean 8 @Input() loading: boolean
9 @Input() size: 'sm' | 'xl'
10
11 private readonly sizes = {
12 sm: {
13 width: '1rem',
14 height: '1rem',
15 'border-width': '.2em'
16 },
17 xl: {
18 width: '3rem',
19 height: '3rem'
20 }
21 }
22
23 getStyle () {
24 if (!this.size) return undefined
25
26 return this.sizes[this.size]
27 }
10} 28}
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.html b/client/src/app/shared/shared-main/loaders/small-loader.component.html
deleted file mode 100644
index 7886f8918..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.html
+++ /dev/null
@@ -1,3 +0,0 @@
1<div class="root" *ngIf="loading">
2 <div class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></div>
3</div>
diff --git a/client/src/app/shared/shared-main/loaders/small-loader.component.ts b/client/src/app/shared/shared-main/loaders/small-loader.component.ts
deleted file mode 100644
index 191877f14..000000000
--- a/client/src/app/shared/shared-main/loaders/small-loader.component.ts
+++ /dev/null
@@ -1,11 +0,0 @@
1import { Component, Input } from '@angular/core'
2
3@Component({
4 selector: 'my-small-loader',
5 styleUrls: [ ],
6 templateUrl: './small-loader.component.html'
7})
8
9export class SmallLoaderComponent {
10 @Input() loading: boolean
11}
diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts
index 5629640bc..89f43239f 100644
--- a/client/src/app/shared/shared-main/shared-main.module.ts
+++ b/client/src/app/shared/shared-main/shared-main.module.ts
@@ -34,7 +34,7 @@ import { ActionDropdownComponent, ButtonComponent, DeleteButtonComponent, EditBu
34import { CustomPageService } from './custom-page' 34import { CustomPageService } from './custom-page'
35import { DateToggleComponent } from './date' 35import { DateToggleComponent } from './date'
36import { FeedComponent } from './feeds' 36import { FeedComponent } from './feeds'
37import { LoaderComponent, SmallLoaderComponent } from './loaders' 37import { LoaderComponent } from './loaders'
38import { 38import {
39 ChannelsSetupMessageComponent, 39 ChannelsSetupMessageComponent,
40 HelpComponent, 40 HelpComponent,
@@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel'
97 FeedComponent, 97 FeedComponent,
98 98
99 LoaderComponent, 99 LoaderComponent,
100 SmallLoaderComponent,
101 100
102 ChannelsSetupMessageComponent, 101 ChannelsSetupMessageComponent,
103 HelpComponent, 102 HelpComponent,
@@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel'
157 FeedComponent, 156 FeedComponent,
158 157
159 LoaderComponent, 158 LoaderComponent,
160 SmallLoaderComponent,
161 159
162 ChannelsSetupMessageComponent, 160 ChannelsSetupMessageComponent,
163 HelpComponent, 161 HelpComponent,
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 20eeeb623..03b2e8b15 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -26,17 +26,13 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
26@import '~bootstrap/scss/modal'; 26@import '~bootstrap/scss/modal';
27@import '~bootstrap/scss/tooltip'; 27@import '~bootstrap/scss/tooltip';
28@import '~bootstrap/scss/popover'; 28@import '~bootstrap/scss/popover';
29@import '~bootstrap/scss/spinners';
29 30
30@import '~bootstrap/scss/helpers'; 31@import '~bootstrap/scss/helpers';
31@import '~bootstrap/scss/utilities/api'; 32@import '~bootstrap/scss/utilities/api';
32 33
33@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; 34@import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons';
34 35
35// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d
36.glyphicon-refresh-animate {
37 animation: spin 0.7s infinite linear;
38}
39
40.flex-auto { 36.flex-auto {
41 flex: auto; 37 flex: auto;
42} 38}
@@ -45,16 +41,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
45 cursor: pointer !important; 41 cursor: pointer !important;
46} 42}
47 43
48@keyframes spin {
49 from {
50 transform: scale(1) rotate(0deg);
51 }
52
53 to {
54 transform: scale(1) rotate(360deg);
55 }
56}
57
58// --------------------------------------------------------------------------- 44// ---------------------------------------------------------------------------
59// Dropdown 45// Dropdown
60// --------------------------------------------------------------------------- 46// ---------------------------------------------------------------------------