aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-07 10:27:33 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-07 10:28:20 +0100
commit0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12 (patch)
treeaf4dff1224b4cafa7771ab85acdcdc32ca717e87 /client/src/app
parent7b272fd73f1ea67e83c1924f2cc33503b8759811 (diff)
downloadPeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.gz
PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.zst
PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.zip
Design video watch modals
Diffstat (limited to 'client/src/app')
-rw-r--r--client/src/app/account/account-videos/account-videos.component.scss8
-rw-r--r--client/src/app/app.component.scss8
-rw-r--r--client/src/app/header/header.component.scss10
-rw-r--r--client/src/app/menu/menu.component.scss6
-rw-r--r--client/src/app/shared/forms/form-validators/video-abuse.ts6
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.html11
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.scss23
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.ts2
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.html12
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.html2
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss10
11 files changed, 53 insertions, 45 deletions
diff --git a/client/src/app/account/account-videos/account-videos.component.scss b/client/src/app/account/account-videos/account-videos.component.scss
index 04aaa8e89..083918e29 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -32,12 +32,8 @@
32 } 32 }
33 33
34 .icon { 34 .icon {
35 display: inline-block; 35 @include icon(21px);
36 background-repeat: no-repeat; 36
37 background-size: contain;
38 width: 21px;
39 height: 21px;
40 vertical-align: middle;
41 position: relative; 37 position: relative;
42 top: -2px; 38 top: -2px;
43 39
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index 97c5d461a..10af9debe 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -35,11 +35,7 @@
35 align-items: center; 35 align-items: center;
36 36
37 .icon { 37 .icon {
38 cursor: pointer; 38 @include icon(22px);
39 width: 22px;
40 height: 22px;
41 display: inline-block;
42 background-size: contain;
43 39
44 &.icon-menu { 40 &.icon-menu {
45 background-image: url('../assets/images/header/menu.svg'); 41 background-image: url('../assets/images/header/menu.svg');
@@ -59,7 +55,7 @@
59 .icon.icon-logo { 55 .icon.icon-logo {
60 display: inline-block; 56 display: inline-block;
61 background: url('../assets/images/logo.svg') no-repeat; 57 background: url('../assets/images/logo.svg') no-repeat;
62 width: 20px; 58 width: 23px;
63 height: 24px; 59 height: 24px;
64 } 60 }
65 } 61 }
diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss
index e7761a9df..d1c59e8d1 100644
--- a/client/src/app/header/header.component.scss
+++ b/client/src/app/header/header.component.scss
@@ -9,13 +9,11 @@
9} 9}
10 10
11.icon.icon-search { 11.icon.icon-search {
12 display: inline-block; 12 @include icon(25px);
13 background: url('../../assets/images/header/search.svg') no-repeat;
14 background-size: contain;
15 width: 25px;
16 height: 21px; 13 height: 21px;
17 vertical-align: middle; 14
18 cursor: pointer; 15 background-image: url('../../assets/images/header/search.svg');
16
19 // yolo 17 // yolo
20 position: absolute; 18 position: absolute;
21 margin-left: -50px; 19 margin-left: -50px;
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index c93c59622..eda3e1a85 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -107,11 +107,9 @@ menu {
107 @include disable-default-a-behaviour; 107 @include disable-default-a-behaviour;
108 108
109 .icon { 109 .icon {
110 width: 22px; 110 @include icon(22px);
111 height: 22px; 111
112 display: inline-block;
113 margin-right: 18px; 112 margin-right: 18px;
114 background-size: contain;
115 113
116 &.icon-videos-trending { 114 &.icon-videos-trending {
117 position: relative; 115 position: relative;
diff --git a/client/src/app/shared/forms/form-validators/video-abuse.ts b/client/src/app/shared/forms/form-validators/video-abuse.ts
index 3c7f26205..4b2a2b789 100644
--- a/client/src/app/shared/forms/form-validators/video-abuse.ts
+++ b/client/src/app/shared/forms/form-validators/video-abuse.ts
@@ -3,8 +3,8 @@ import { Validators } from '@angular/forms'
3export const VIDEO_ABUSE_REASON = { 3export const VIDEO_ABUSE_REASON = {
4 VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ], 4 VALIDATORS: [ Validators.required, Validators.minLength(2), Validators.maxLength(300) ],
5 MESSAGES: { 5 MESSAGES: {
6 'required': 'Report reason name is required.', 6 'required': 'Report reason is required.',
7 'minlength': 'Report reson must be at least 2 characters long.', 7 'minlength': 'Report reason must be at least 2 characters long.',
8 'maxlength': 'Report reson cannot be more than 300 characters long.' 8 'maxlength': 'Report reason cannot be more than 300 characters long.'
9 } 9 }
10} 10}
diff --git a/client/src/app/videos/+video-watch/video-download.component.html b/client/src/app/videos/+video-watch/video-download.component.html
index ddc57e999..7efc79e93 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -6,18 +6,19 @@
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <button type="button" class="close" aria-label="Close" (click)="hide()">
7 <span aria-hidden="true">&times;</span> 7 <span aria-hidden="true">&times;</span>
8 </button> 8 </button>
9 <h4 class="modal-title">Download</h4> 9 <h4 class="title-page title-page-single">Download</h4>
10 </div> 10 </div>
11 11
12 <div class="modal-body"> 12 <div class="modal-body">
13 <div *ngFor="let file of video.files" class="resolution-block"> 13 <div *ngFor="let file of video.files" class="resolution-block">
14 <label>{{ file.resolutionLabel }}</label> 14 <label>{{ file.resolutionLabel }}</label>
15 <a class="btn btn-default " target="_blank" [href]="file.torrentUrl"> 15
16 <span class="glyphicon glyphicon-download"></span> 16 <a class="orange-button-link " target="_blank" [href]="file.torrentUrl">
17 <span class="icon icon-download"></span>
17 Torrent file 18 Torrent file
18 </a> 19 </a>
19 <a class="btn btn-default" target="_blank" [href]="file.fileUrl"> 20 <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
20 <span class="glyphicon glyphicon-download"></span> 21 <span class="icon icon-download"></span>
21 Download 22 Download
22 </a> 23 </a>
23 24
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
new file mode 100644
index 000000000..c9d5af9c1
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -0,0 +1,23 @@
1.resolution-block:not(:first-child) {
2 margin-top: 30px;
3}
4
5.orange-button-link {
6 margin-right: 10px;
7}
8
9label {
10 display: block;
11}
12
13.icon {
14 @include icon(21px);
15
16 margin-right: 5px;
17 position: relative;
18 top: -1px;
19
20 &.icon-download {
21 background-image: url('../../../assets/images/video/download-white.svg');
22 }
23}
diff --git a/client/src/app/videos/+video-watch/video-download.component.ts b/client/src/app/videos/+video-watch/video-download.component.ts
index 010a246cd..095df1698 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -5,7 +5,7 @@ import { VideoDetails } from '../../shared/video/video-details.model'
5@Component({ 5@Component({
6 selector: 'my-video-download', 6 selector: 'my-video-download',
7 templateUrl: './video-download.component.html', 7 templateUrl: './video-download.component.html',
8 styles: [ '.resolution-block { margin-top: 20px; }' ] 8 styleUrls: [ './video-download.component.scss' ]
9}) 9})
10export class VideoDownloadComponent { 10export class VideoDownloadComponent {
11 @Input() video: VideoDetails = null 11 @Input() video: VideoDetails = null
diff --git a/client/src/app/videos/+video-watch/video-report.component.html b/client/src/app/videos/+video-watch/video-report.component.html
index ceb7cf50a..20474bab4 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -6,28 +6,28 @@
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <button type="button" class="close" aria-label="Close" (click)="hide()">
7 <span aria-hidden="true">&times;</span> 7 <span aria-hidden="true">&times;</span>
8 </button> 8 </button>
9 <h4 class="modal-title">Report video</h4> 9 <h4 class="title-page title-page-single">Report video</h4>
10 </div> 10 </div>
11 11
12 <div class="modal-body"> 12 <div class="modal-body">
13 13
14 <form novalidate [formGroup]="form"> 14 <form novalidate [formGroup]="form" (ngSubmit)="report()">
15 <div class="form-group"> 15 <div class="form-group">
16 <label for="reason">Reason</label> 16 <label for="reason">Reason</label>
17 <textarea 17 <textarea
18 id="reason" class="form-control" placeholder="Reason..." 18 id="reason" class="form-control" placeholder="Reason..."
19 formControlName="reason" 19 formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
20 > 20 >
21 </textarea> 21 </textarea>
22 <div *ngIf="formErrors.reason" class="alert alert-danger"> 22 <div *ngIf="formErrors.reason" class="form-error">
23 {{ formErrors.reason }} 23 {{ formErrors.reason }}
24 </div> 24 </div>
25 </div> 25 </div>
26 26
27 <div class="form-group"> 27 <div class="form-group">
28 <input 28 <input
29 type="button" value="Report" class="btn btn-default form-control" 29 type="submit" value="Report" class="orange-button"
30 [disabled]="!form.valid" (click)="report()" 30 [disabled]="!form.valid"
31 > 31 >
32 </div> 32 </div>
33 </form> 33 </form>
diff --git a/client/src/app/videos/+video-watch/video-share.component.html b/client/src/app/videos/+video-watch/video-share.component.html
index 88f59c063..36ec38d88 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -6,7 +6,7 @@
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <button type="button" class="close" aria-label="Close" (click)="hide()">
7 <span aria-hidden="true">&times;</span> 7 <span aria-hidden="true">&times;</span>
8 </button> 8 </button>
9 <h4 class="modal-title">Share</h4> 9 <h4 class="title-page title-page-single">Share</h4>
10 </div> 10 </div>
11 11
12 <div class="modal-body"> 12 <div class="modal-body">
diff --git a/client/src/app/videos/+video-watch/video-watch.component.scss b/client/src/app/videos/+video-watch/video-watch.component.scss
index 3f36410f4..6973619b2 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -51,12 +51,8 @@
51 padding: 0 10px 0 10px; 51 padding: 0 10px 0 10px;
52 52
53 .icon { 53 .icon {
54 display: inline-block; 54 @include icon(21px);
55 background-repeat: no-repeat; 55
56 background-size: contain;
57 width: 21px;
58 height: 21px;
59 vertical-align: middle;
60 position: relative; 56 position: relative;
61 top: -2px; 57 top: -2px;
62 58
@@ -105,7 +101,7 @@
105 top: -1px; 101 top: -1px;
106 102
107 &.icon-download { 103 &.icon-download {
108 background-image: url('../../../assets/images/video/download.svg'); 104 background-image: url('../../../assets/images/video/download-grey.svg');
109 } 105 }
110 106
111 &.icon-alert { 107 &.icon-alert {