From a14c176472614874586cbc64cf25e82bbdc52868 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 10 Jun 2022 14:46:18 +0200 Subject: [PATCH] Use bootstrap loader --- .../comment/video-comments.component.html | 2 +- .../metadata/video-description.component.html | 2 +- .../src/app/menu/notification.component.html | 2 +- .../shared-main/buttons/button.component.html | 2 +- .../shared-main/buttons/button.component.scss | 6 --- .../app/shared/shared-main/loaders/index.ts | 1 - .../shared-main/loaders/loader.component.html | 8 ---- .../shared-main/loaders/loader.component.scss | 45 ------------------- .../shared-main/loaders/loader.component.ts | 22 ++++++++- .../loaders/small-loader.component.html | 3 -- .../loaders/small-loader.component.ts | 11 ----- .../shared/shared-main/shared-main.module.ts | 4 +- client/src/sass/bootstrap.scss | 16 +------ 13 files changed, 26 insertions(+), 98 deletions(-) delete mode 100644 client/src/app/shared/shared-main/loaders/loader.component.html delete mode 100644 client/src/app/shared/shared-main/loaders/loader.component.scss delete mode 100644 client/src/app/shared/shared-main/loaders/small-loader.component.html delete mode 100644 client/src/app/shared/shared-main/loaders/small-loader.component.ts 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 @@ View {comment.totalReplies, plural, =1 {1 reply} other {{{ comment.totalReplies }} replies}} - + 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 @@
Show 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 @@
- +
- + {{ label }} 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 @@ display: inline-block; } -my-small-loader ::ng-deep .root { - display: inline-block; - margin: 0 3px 0 0; - width: 20px; -} - a[class$=-button], span[class$=-button] { > 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 @@ export * from './loader.component' -export * 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 @@ -
-
-
-
-
-
-
-
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 @@ -@use '_variables' as *; -@use '_mixins' as *; - -// Thanks to https://loading.io/css/ (CC0 License) - -.loader { - display: inline-block; - position: relative; - width: 50px; - height: 50px; -} - -.loader div { - box-sizing: border-box; - display: block; - position: absolute; - width: 44px; - height: 44px; - margin: 6px; - border: 4px solid; - border-radius: 50%; - animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: #999999 transparent transparent; -} - -.loader div:nth-child(1) { - animation-delay: -0.45s; -} - -.loader div:nth-child(2) { - animation-delay: -0.3s; -} - -.loader div:nth-child(3) { - animation-delay: -0.15s; -} - -@keyframes loader { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } -} 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' @Component({ selector: 'my-loader', - styleUrls: [ './loader.component.scss' ], - templateUrl: './loader.component.html' + template: `
` }) export class LoaderComponent { @Input() loading: boolean + @Input() size: 'sm' | 'xl' + + private readonly sizes = { + sm: { + width: '1rem', + height: '1rem', + 'border-width': '.2em' + }, + xl: { + width: '3rem', + height: '3rem' + } + } + + getStyle () { + if (!this.size) return undefined + + return this.sizes[this.size] + } } 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 @@ -
-
-
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 @@ -import { Component, Input } from '@angular/core' - -@Component({ - selector: 'my-small-loader', - styleUrls: [ ], - templateUrl: './small-loader.component.html' -}) - -export class SmallLoaderComponent { - @Input() loading: boolean -} 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 import { CustomPageService } from './custom-page' import { DateToggleComponent } from './date' import { FeedComponent } from './feeds' -import { LoaderComponent, SmallLoaderComponent } from './loaders' +import { LoaderComponent } from './loaders' import { ChannelsSetupMessageComponent, HelpComponent, @@ -97,7 +97,6 @@ import { VideoChannelService } from './video-channel' FeedComponent, LoaderComponent, - SmallLoaderComponent, ChannelsSetupMessageComponent, HelpComponent, @@ -157,7 +156,6 @@ import { VideoChannelService } from './video-channel' FeedComponent, LoaderComponent, - SmallLoaderComponent, ChannelsSetupMessageComponent, 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/'; @import '~bootstrap/scss/modal'; @import '~bootstrap/scss/tooltip'; @import '~bootstrap/scss/popover'; +@import '~bootstrap/scss/spinners'; @import '~bootstrap/scss/helpers'; @import '~bootstrap/scss/utilities/api'; @import '~@neos21/bootstrap3-glyphicons/assets/stylesheets/bootstrap3-glyphicons'; -// Thanks https://gist.github.com/alexandrevicenzi/680147013e902a4eaa5d -.glyphicon-refresh-animate { - animation: spin 0.7s infinite linear; -} - .flex-auto { flex: auto; } @@ -45,16 +41,6 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/'; cursor: pointer !important; } -@keyframes spin { - from { - transform: scale(1) rotate(0deg); - } - - to { - transform: scale(1) rotate(360deg); - } -} - // --------------------------------------------------------------------------- // Dropdown // ---------------------------------------------------------------------------