aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
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
parent7b272fd73f1ea67e83c1924f2cc33503b8759811 (diff)
downloadPeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.gz
PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.tar.zst
PeerTube-0727cab0dfd3d53e5e9c88bfbda6bc0e090d4f12.zip
Design video watch modals
Diffstat (limited to 'client')
-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
-rw-r--r--client/src/assets/images/video/download-grey.svg (renamed from client/src/assets/images/video/download.svg)0
-rw-r--r--client/src/assets/images/video/download-white.svg16
-rw-r--r--client/src/sass/_mixins.scss16
-rw-r--r--client/src/sass/application.scss30
15 files changed, 113 insertions, 47 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 {
diff --git a/client/src/assets/images/video/download.svg b/client/src/assets/images/video/download-grey.svg
index 5b0cca5ef..5b0cca5ef 100644
--- a/client/src/assets/images/video/download.svg
+++ b/client/src/assets/images/video/download-grey.svg
diff --git a/client/src/assets/images/video/download-white.svg b/client/src/assets/images/video/download-white.svg
new file mode 100644
index 000000000..0e66e06e8
--- /dev/null
+++ b/client/src/assets/images/video/download-white.svg
@@ -0,0 +1,16 @@
1<?xml version="1.0" encoding="UTF-8"?>
2<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3 <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4 <title>download</title>
5 <desc>Created with Sketch.</desc>
6 <defs></defs>
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
8 <g id="Artboard-4" transform="translate(-180.000000, -291.000000)" stroke="#ffffff" stroke-width="2">
9 <g id="84" transform="translate(180.000000, 291.000000)">
10 <path d="M12,3 L12,15" id="Path-58"></path>
11 <polyline id="Path-59" stroke-linejoin="round" transform="translate(12.000000, 14.000000) rotate(-270.000000) translate(-12.000000, -14.000000) " points="9 8 15 14 9 20"></polyline>
12 <path d="M3,18 L3,20.0590859 C3,20.6127331 3.44494889,21.0615528 3.99340349,21.0615528 L20.0067018,21.0615528 C20.5553434,21.0615528 21.0001052,20.6098102 21.0001051,20.0590859 L21.0001049,18" id="Path-12" stroke-linejoin="round"></path>
13 </g>
14 </g>
15 </g>
16</svg>
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index ddc9c6766..14d9b5044 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -23,7 +23,8 @@
23 color: #fff; 23 color: #fff;
24 background-color: $orange-color; 24 background-color: $orange-color;
25 25
26 &:hover { 26 &:hover, &:active, &:focus, &[disabled] {
27 color: #fff;
27 background-color: $orange-hoover-color; 28 background-color: $orange-hoover-color;
28 } 29 }
29} 30}
@@ -32,7 +33,8 @@
32 background-color: $grey-color; 33 background-color: $grey-color;
33 color: #585858; 34 color: #585858;
34 35
35 &:hover { 36 &:hover, &:active, &:focus, &[disabled] {
37 color: #585858;
36 background-color: $grey-hoover-color; 38 background-color: $grey-hoover-color;
37 } 39 }
38} 40}
@@ -60,3 +62,13 @@
60 width: $size; 62 width: $size;
61 height: $size; 63 height: $size;
62} 64}
65
66@mixin icon ($size) {
67 display: inline-block;
68 background-repeat: no-repeat;
69 background-size: contain;
70 width: $size;
71 height: $size;
72 vertical-align: middle;
73 cursor: pointer;
74}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index c81031021..dc1f4dba0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -152,3 +152,33 @@ p-datatable {
152 color: #000 !important; 152 color: #000 !important;
153 } 153 }
154} 154}
155
156.modal {
157 .modal-header {
158 border-bottom: none;
159
160 .title-page-single {
161 margin: 0;
162 }
163 }
164}
165
166.orange-button {
167 @include peertube-button;
168 @include orange-button;
169}
170
171.orange-button-link {
172 @include peertube-button-link;
173 @include orange-button;
174}
175
176.grey-button {
177 @include peertube-button;
178 @include grey-button;
179}
180
181.grey-button-link {
182 @include peertube-button-link;
183 @include grey-button;
184}