aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-12 14:57:46 +0100
committerChocobozzz <me@florianbigard.com>2017-12-12 14:57:46 +0100
commitc893d4514e6ecbf282c7985fe5f82b8acd8a1137 (patch)
treec7e9b9d53de5a8e8826e26785ae6019131036948 /client
parent77d07d690968a9631fc0c8bafbaebd27a5ebaab6 (diff)
downloadPeerTube-c893d4514e6ecbf282c7985fe5f82b8acd8a1137.tar.gz
PeerTube-c893d4514e6ecbf282c7985fe5f82b8acd8a1137.tar.zst
PeerTube-c893d4514e6ecbf282c7985fe5f82b8acd8a1137.zip
Add beautiful loading bar
Diffstat (limited to 'client')
-rw-r--r--client/package.json1
-rw-r--r--client/src/app/app.component.html1
-rw-r--r--client/src/app/shared/shared.module.ts5
-rw-r--r--client/src/sass/application.scss4
-rw-r--r--client/src/sass/loading-bar.scss93
-rw-r--r--client/yarn.lock13
6 files changed, 116 insertions, 1 deletions
diff --git a/client/package.json b/client/package.json
index 14c20e8d9..7e23d4d75 100644
--- a/client/package.json
+++ b/client/package.json
@@ -34,6 +34,7 @@
34 "@angular/platform-browser-dynamic": "~5.1.0", 34 "@angular/platform-browser-dynamic": "~5.1.0",
35 "@angular/router": "~5.1.0", 35 "@angular/router": "~5.1.0",
36 "@angularclass/hmr": "^2.1.3", 36 "@angularclass/hmr": "^2.1.3",
37 "@ngx-loading-bar/http-client": "^1.0.0-rc.1",
37 "@ngx-meta/core": "^4.0.1", 38 "@ngx-meta/core": "^4.0.1",
38 "@types/core-js": "^0.9.28", 39 "@types/core-js": "^0.9.28",
39 "@types/markdown-it": "^0.0.4", 40 "@types/markdown-it": "^0.0.4",
diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html
index da4273dda..1a808b397 100644
--- a/client/src/app/app.component.html
+++ b/client/src/app/app.component.html
@@ -34,5 +34,6 @@
34 </div> 34 </div>
35</div> 35</div>
36 36
37<ngx-loading-bar [includeSpinner]="false" color="#F1680D"></ngx-loading-bar>
37<my-confirm></my-confirm> 38<my-confirm></my-confirm>
38<simple-notifications [options]="notificationOptions"></simple-notifications> 39<simple-notifications [options]="notificationOptions"></simple-notifications>
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index d0e163f69..5af118c98 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -3,6 +3,7 @@ import { HttpClientModule } from '@angular/common/http'
3import { NgModule } from '@angular/core' 3import { NgModule } from '@angular/core'
4import { FormsModule, ReactiveFormsModule } from '@angular/forms' 4import { FormsModule, ReactiveFormsModule } from '@angular/forms'
5import { RouterModule } from '@angular/router' 5import { RouterModule } from '@angular/router'
6import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client'
6 7
7import { BsDropdownModule } from 'ngx-bootstrap/dropdown' 8import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
8import { ModalModule } from 'ngx-bootstrap/modal' 9import { ModalModule } from 'ngx-bootstrap/modal'
@@ -33,6 +34,8 @@ import { VideoService } from './video/video.service'
33 RouterModule, 34 RouterModule,
34 HttpClientModule, 35 HttpClientModule,
35 36
37 LoadingBarHttpClientModule,
38
36 BsDropdownModule.forRoot(), 39 BsDropdownModule.forRoot(),
37 ModalModule.forRoot(), 40 ModalModule.forRoot(),
38 41
@@ -59,6 +62,8 @@ import { VideoService } from './video/video.service'
59 RouterModule, 62 RouterModule,
60 HttpClientModule, 63 HttpClientModule,
61 64
65 LoadingBarHttpClientModule,
66
62 BsDropdownModule, 67 BsDropdownModule,
63 ModalModule, 68 ModalModule,
64 DataTableModule, 69 DataTableModule,
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 08131406a..968dc5f58 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -10,7 +10,9 @@ $FontPathSourceSansPro: '../../node_modules/npm-font-source-sans-pro/fonts';
10@import '~primeng/resources/themes/bootstrap/theme.css'; 10@import '~primeng/resources/themes/bootstrap/theme.css';
11@import '~primeng/resources/primeng.css'; 11@import '~primeng/resources/primeng.css';
12@import '~video.js/dist/video-js.css'; 12@import '~video.js/dist/video-js.css';
13@import './video-js-custom.scss'; 13
14@import './video-js-custom';
15@import './loading-bar';
14 16
15[hidden] { 17[hidden] {
16 display: none !important; 18 display: none !important;
diff --git a/client/src/sass/loading-bar.scss b/client/src/sass/loading-bar.scss
new file mode 100644
index 000000000..d34bf83ee
--- /dev/null
+++ b/client/src/sass/loading-bar.scss
@@ -0,0 +1,93 @@
1// Thanks: https://github.com/aitboudad/ngx-loading-bar/blob/master/loading-bar.css
2
3/* Make clicks pass-through */
4#loading-bar,
5#loading-bar-spinner {
6 pointer-events: none;
7 -webkit-pointer-events: none;
8 -webkit-transition: 350ms linear all;
9 -moz-transition: 350ms linear all;
10 -o-transition: 350ms linear all;
11 transition: 350ms linear all;
12 color: #29d;
13}
14
15#loading-bar .bar {
16 -webkit-transition: width 350ms;
17 -moz-transition: width 350ms;
18 -o-transition: width 350ms;
19 transition: width 350ms;
20
21 background: #29d;
22 position: fixed;
23 z-index: 10002;
24 top: 0;
25 left: 0;
26 width: 100%;
27 height: 2px;
28 border-bottom-right-radius: 1px;
29 border-top-right-radius: 1px;
30}
31
32/* Fancy blur effect */
33#loading-bar .peg {
34 position: absolute;
35 width: 70px;
36 right: 0;
37 top: 0;
38 height: 2px;
39 opacity: .45;
40 -moz-box-shadow: 1px 0 6px 1px;
41 -ms-box-shadow: 1px 0 6px 1px;
42 -webkit-box-shadow: 1px 0 6px 1px;
43 box-shadow: 1px 0 6px 1px;
44 color: inherit;
45 -moz-border-radius: 100%;
46 -webkit-border-radius: 100%;
47 border-radius: 100%;
48}
49
50#loading-bar-spinner {
51 display: block;
52 position: fixed;
53 z-index: 10002;
54 top: 10px;
55 left: 10px;
56}
57
58#loading-bar-spinner .spinner-icon {
59 width: 14px;
60 height: 14px;
61
62 border: solid 2px transparent;
63 border-top-color: inherit;
64 border-left-color: inherit;
65 border-radius: 50%;
66
67 -webkit-animation: loading-bar-spinner 400ms linear infinite;
68 -moz-animation: loading-bar-spinner 400ms linear infinite;
69 -ms-animation: loading-bar-spinner 400ms linear infinite;
70 -o-animation: loading-bar-spinner 400ms linear infinite;
71 animation: loading-bar-spinner 400ms linear infinite;
72}
73
74@-webkit-keyframes loading-bar-spinner {
75 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
76 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
77}
78@-moz-keyframes loading-bar-spinner {
79 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
80 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
81}
82@-o-keyframes loading-bar-spinner {
83 0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
84 100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
85}
86@-ms-keyframes loading-bar-spinner {
87 0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
88 100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
89}
90@keyframes loading-bar-spinner {
91 0% { transform: rotate(0deg); }
92 100% { transform: rotate(360deg); }
93}
diff --git a/client/yarn.lock b/client/yarn.lock
index 5c63a68a6..10f15bcd6 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -178,6 +178,19 @@
178 source-map "^0.5.6" 178 source-map "^0.5.6"
179 tree-kill "^1.0.0" 179 tree-kill "^1.0.0"
180 180
181"@ngx-loading-bar/core@1.0.0-rc.1":
182 version "1.0.0-rc.1"
183 resolved "https://registry.yarnpkg.com/@ngx-loading-bar/core/-/core-1.0.0-rc.1.tgz#6809578979c924fa514c0a094c0f479817635c63"
184 dependencies:
185 tslib "^1.7.1"
186
187"@ngx-loading-bar/http-client@^1.0.0-rc.1":
188 version "1.0.0-rc.1"
189 resolved "https://registry.yarnpkg.com/@ngx-loading-bar/http-client/-/http-client-1.0.0-rc.1.tgz#f4c15d9e46445bf8fe7a945c7f4eb0ef443bddd8"
190 dependencies:
191 "@ngx-loading-bar/core" "1.0.0-rc.1"
192 tslib "^1.7.1"
193
181"@ngx-meta/core@^4.0.1": 194"@ngx-meta/core@^4.0.1":
182 version "4.0.1" 195 version "4.0.1"
183 resolved "https://registry.yarnpkg.com/@ngx-meta/core/-/core-4.0.1.tgz#b035febeeb92876920480f70719fcf953dc0245f" 196 resolved "https://registry.yarnpkg.com/@ngx-meta/core/-/core-4.0.1.tgz#b035febeeb92876920480f70719fcf953dc0245f"