aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 17:49:58 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 17:49:58 +0100
commit5f0805d39b94eb2de1b73e0f43ac8685ae900994 (patch)
treecba6c3022caad5e424bd6639bbaaae92113b7b7f /client
parentcb9244de975909bac2922c4412fd948646ff3ba7 (diff)
downloadPeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.tar.gz
PeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.tar.zst
PeerTube-5f0805d39b94eb2de1b73e0f43ac8685ae900994.zip
Design modals
Diffstat (limited to 'client')
-rw-r--r--client/src/app/core/confirm/confirm.component.html22
-rw-r--r--client/src/app/videos/+video-edit/shared/video-description.component.scss5
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.html45
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.scss25
-rw-r--r--client/src/app/videos/+video-watch/video-download.component.ts22
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.html22
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.scss6
-rw-r--r--client/src/app/videos/+video-watch/video-report.component.ts3
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.html14
-rw-r--r--client/src/app/videos/+video-watch/video-share.component.scss3
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss36
-rw-r--r--client/src/assets/images/global/cross.svg12
-rw-r--r--client/src/assets/images/video/alert.svg6
-rw-r--r--client/src/assets/images/video/blacklist.svg15
-rw-r--r--client/src/assets/images/video/download-black.svg16
-rw-r--r--client/src/assets/images/video/eye-closed.svg18
-rw-r--r--client/src/sass/application.scss34
-rw-r--r--client/src/sass/include/_bootstrap.scss2
-rw-r--r--client/src/sass/include/_mixins.scss47
19 files changed, 245 insertions, 108 deletions
diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html
index 31b735f97..cc2c28de2 100644
--- a/client/src/app/core/confirm/confirm.component.html
+++ b/client/src/app/core/confirm/confirm.component.html
@@ -3,17 +3,23 @@
3 <div class="modal-content"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="cancel()"> 6 <span class="close" aria-hidden="true" (click)="cancel()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">{{ title }}</h4>
8 </button>
9 <h4 class="title-page title-page-single">{{ title }}</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body" [innerHtml]="message"></div> 10 <div class="modal-body" >
11 <div [innerHtml]="message"></div>
13 12
14 <div class="modal-footer"> 13 <div class="form-group inputs">
15 <button type="button" class="grey-button" data-dismiss="modal" (click)="cancel()">Cancel</button> 14 <span class="action-button action-button-cancel" (click)="cancel()">
16 <button type="button" class="orange-button" (click)="confirm()">Confirm</button> 15 Cancel
16 </span>
17
18 <input
19 type="submit" value="Confirm" class="action-button-submit"
20 (click)="confirm()"
21 >
22 </div>
17 </div> 23 </div>
18 </div> 24 </div>
19 </div> 25 </div>
diff --git a/client/src/app/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss
index d6a5190c5..2c731bee3 100644
--- a/client/src/app/videos/+video-edit/shared/video-description.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss
@@ -2,11 +2,8 @@
2@import '_mixins'; 2@import '_mixins';
3 3
4textarea { 4textarea {
5 @include peertube-input-text(100%); 5 @include peertube-textarea(100%, 150px);
6 6
7 padding: 5px 15px;
8 font-size: 15px;
9 height: 150px;
10 margin-bottom: 15px; 7 margin-bottom: 15px;
11} 8}
12 9
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 7efc79e93..f8f17a471 100644
--- a/client/src/app/videos/+video-watch/video-download.component.html
+++ b/client/src/app/videos/+video-watch/video-download.component.html
@@ -1,29 +1,40 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog"> 2 <div class="modal-dialog">
3 <div class="modal-content modal-lg"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Download video</h4>
8 </button>
9 <h4 class="title-page title-page-single">Download</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
13 <div *ngFor="let file of video.files" class="resolution-block"> 11 <div class="peertube-select-container">
14 <label>{{ file.resolutionLabel }}</label> 12 <select [(ngModel)]="resolution">
13 <option *ngFor="let file of video.files" [value]="file.resolution">{{ file.resolutionLabel }}</option>
14 </select>
15 </div>
16
17 <div class="download-type">
18 <div class="peertube-radio-container">
19 <input type="radio" name="download" id="download-torrent" [(ngModel)]="downloadType" value="torrent">
20 <label for="download-torrent">Torrent</label>
21 </div>
22
23 <div class="peertube-radio-container">
24 <input type="radio" name="download" id="download-direct" [(ngModel)]="downloadType" value="direct">
25 <label for="download-direct">Direct download</label>
26 </div>
27 </div>
15 28
16 <a class="orange-button-link " target="_blank" [href]="file.torrentUrl"> 29 <div class="form-group inputs">
17 <span class="icon icon-download"></span> 30 <span class="action-button action-button-cancel" (click)="hide()">
18 Torrent file 31 Cancel
19 </a> 32 </span>
20 <a class="orange-button-link" target="_blank" [href]="file.fileUrl">
21 <span class="icon icon-download"></span>
22 Download
23 </a>
24 33
25 <!-- Don't display magnet URI for now, this is not compatible with most torrent clients --> 34 <input
26 <!--<input #magnetUriInput (click)="magnetUriInput.select()" type="text" class="form-control input-sm readonly" readonly [value]="file.magnetUri" />--> 35 type="submit" value="Download" class="action-button-submit"
36 (click)="download()"
37 >
27 </div> 38 </div>
28 </div> 39 </div>
29 </div> 40 </div>
diff --git a/client/src/app/videos/+video-watch/video-download.component.scss b/client/src/app/videos/+video-watch/video-download.component.scss
index 7eac3d1c9..5fca82135 100644
--- a/client/src/app/videos/+video-watch/video-download.component.scss
+++ b/client/src/app/videos/+video-watch/video-download.component.scss
@@ -1,26 +1,17 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.resolution-block:not(:first-child) { 4.peertube-select-container {
5 margin-top: 30px; 5 @include peertube-select-container(130px);
6}
7
8.orange-button-link {
9 margin-right: 10px;
10} 6}
11 7
12label { 8.download-type {
13 display: block; 9 margin-top: 30px;
14}
15
16.icon {
17 @include icon(21px);
18 10
19 margin-right: 5px; 11 .peertube-radio-container {
20 position: relative; 12 @include peertube-radio-container;
21 top: -1px;
22 13
23 &.icon-download { 14 display: inline-block;
24 background-image: url('../../../assets/images/video/download-white.svg'); 15 margin-right: 30px;
25 } 16 }
26} 17}
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 095df1698..44ece986c 100644
--- a/client/src/app/videos/+video-watch/video-download.component.ts
+++ b/client/src/app/videos/+video-watch/video-download.component.ts
@@ -1,4 +1,4 @@
1import { Component, Input, ViewChild } from '@angular/core' 1import { Component, Input, OnInit, ViewChild } from '@angular/core'
2import { ModalDirective } from 'ngx-bootstrap/modal' 2import { ModalDirective } from 'ngx-bootstrap/modal'
3import { VideoDetails } from '../../shared/video/video-details.model' 3import { VideoDetails } from '../../shared/video/video-details.model'
4 4
@@ -7,15 +7,22 @@ import { VideoDetails } from '../../shared/video/video-details.model'
7 templateUrl: './video-download.component.html', 7 templateUrl: './video-download.component.html',
8 styleUrls: [ './video-download.component.scss' ] 8 styleUrls: [ './video-download.component.scss' ]
9}) 9})
10export class VideoDownloadComponent { 10export class VideoDownloadComponent implements OnInit {
11 @Input() video: VideoDetails = null 11 @Input() video: VideoDetails = null
12 12
13 @ViewChild('modal') modal: ModalDirective 13 @ViewChild('modal') modal: ModalDirective
14 14
15 downloadType: 'direct' | 'torrent' = 'torrent'
16 resolution = -1
17
15 constructor () { 18 constructor () {
16 // empty 19 // empty
17 } 20 }
18 21
22 ngOnInit () {
23 this.resolution = this.video.files[0].resolution
24 }
25
19 show () { 26 show () {
20 this.modal.show() 27 this.modal.show()
21 } 28 }
@@ -23,4 +30,15 @@ export class VideoDownloadComponent {
23 hide () { 30 hide () {
24 this.modal.hide() 31 this.modal.hide()
25 } 32 }
33
34 download () {
35 const file = this.video.files.find(f => f.resolution === this.resolution)
36 if (!file) {
37 console.error('Could not find file with resolution %d.', this.resolution)
38 return
39 }
40
41 const link = this.downloadType === 'direct' ? file.fileUrl : file.torrentUrl
42 window.open(link)
43 }
26} 44}
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 20474bab4..a9a7beb48 100644
--- a/client/src/app/videos/+video-watch/video-report.component.html
+++ b/client/src/app/videos/+video-watch/video-report.component.html
@@ -1,32 +1,30 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog"> 2 <div class="modal-dialog">
3 <div class="modal-content modal-lg"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Report video</h4>
8 </button>
9 <h4 class="title-page title-page-single">Report video</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
13 11
14 <form novalidate [formGroup]="form" (ngSubmit)="report()"> 12 <form novalidate [formGroup]="form" (ngSubmit)="report()">
15 <div class="form-group"> 13 <div class="form-group">
16 <label for="reason">Reason</label> 14 <textarea placeholder="Reason..." formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }">
17 <textarea
18 id="reason" class="form-control" placeholder="Reason..."
19 formControlName="reason" [ngClass]="{ 'input-error': formErrors['reason'] }"
20 >
21 </textarea> 15 </textarea>
22 <div *ngIf="formErrors.reason" class="form-error"> 16 <div *ngIf="formErrors.reason" class="form-error">
23 {{ formErrors.reason }} 17 {{ formErrors.reason }}
24 </div> 18 </div>
25 </div> 19 </div>
26 20
27 <div class="form-group"> 21 <div class="form-group inputs">
22 <span class="action-button action-button-cancel" (click)="hide()">
23 Cancel
24 </span>
25
28 <input 26 <input
29 type="submit" value="Report" class="orange-button" 27 type="submit" value="Submit" class="action-button-submit"
30 [disabled]="!form.valid" 28 [disabled]="!form.valid"
31 > 29 >
32 </div> 30 </div>
diff --git a/client/src/app/videos/+video-watch/video-report.component.scss b/client/src/app/videos/+video-watch/video-report.component.scss
new file mode 100644
index 000000000..09d273b35
--- /dev/null
+++ b/client/src/app/videos/+video-watch/video-report.component.scss
@@ -0,0 +1,6 @@
1@import '_variables';
2@import '_mixins';
3
4textarea {
5 @include peertube-textarea(100%, 60px);
6}
diff --git a/client/src/app/videos/+video-watch/video-report.component.ts b/client/src/app/videos/+video-watch/video-report.component.ts
index b94e4144e..ece14754a 100644
--- a/client/src/app/videos/+video-watch/video-report.component.ts
+++ b/client/src/app/videos/+video-watch/video-report.component.ts
@@ -7,7 +7,8 @@ import { VideoDetails } from '../../shared/video/video-details.model'
7 7
8@Component({ 8@Component({
9 selector: 'my-video-report', 9 selector: 'my-video-report',
10 templateUrl: './video-report.component.html' 10 templateUrl: './video-report.component.html',
11 styleUrls: [ './video-report.component.scss' ]
11}) 12})
12export class VideoReportComponent extends FormReactive implements OnInit { 13export class VideoReportComponent extends FormReactive implements OnInit {
13 @Input() video: VideoDetails = null 14 @Input() video: VideoDetails = null
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 e99eccbfe..85cf10a6c 100644
--- a/client/src/app/videos/+video-watch/video-share.component.html
+++ b/client/src/app/videos/+video-watch/video-share.component.html
@@ -1,12 +1,10 @@
1<div bsModal #modal="bs-modal" class="modal" tabindex="-1"> 1<div bsModal #modal="bs-modal" class="modal" tabindex="-1">
2 <div class="modal-dialog modal-lg"> 2 <div class="modal-dialog">
3 <div class="modal-content"> 3 <div class="modal-content">
4 4
5 <div class="modal-header"> 5 <div class="modal-header">
6 <button type="button" class="close" aria-label="Close" (click)="hide()"> 6 <span class="close" aria-hidden="true" (click)="hide()"></span>
7 <span aria-hidden="true">&times;</span> 7 <h4 class="modal-title">Share</h4>
8 </button>
9 <h4 class="title-page title-page-single">Share</h4>
10 </div> 8 </div>
11 9
12 <div class="modal-body"> 10 <div class="modal-body">
@@ -37,6 +35,12 @@
37 <div *ngIf="notSecure()" class="alert alert-warning"> 35 <div *ngIf="notSecure()" class="alert alert-warning">
38 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites). 36 The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
39 </div> 37 </div>
38
39 <div class="form-group inputs">
40 <span class="action-button action-button-cancel" (click)="hide()">
41 Cancel
42 </span>
43 </div>
40 </div> 44 </div>
41 </div> 45 </div>
42 </div> 46 </div>
diff --git a/client/src/app/videos/+video-watch/video-share.component.scss b/client/src/app/videos/+video-watch/video-share.component.scss
index e69de29bb..184e09027 100644
--- a/client/src/app/videos/+video-watch/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/video-share.component.scss
@@ -0,0 +1,3 @@
1.action-button-cancel {
2 margin-right: 0 !important;
3}
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 e742e1329..205a4333c 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -101,27 +101,27 @@
101 .action-more { 101 .action-more {
102 display: inline-block; 102 display: inline-block;
103 103
104 .dropdown-menu .icon { 104 .dropdown-menu .dropdown-item {
105 display: inline-block; 105 padding: 6px 24px;
106 background-repeat: no-repeat;
107 background-size: contain;
108 width: 21px;
109 height: 21px;
110 vertical-align: middle;
111 margin-right: 5px;
112 position: relative;
113 top: -1px;
114 106
115 &.icon-download { 107 .icon {
116 background-image: url('../../../assets/images/video/download-grey.svg'); 108 @include icon(24px);
117 }
118 109
119 &.icon-alert { 110 margin-right: 10px;
120 background-image: url('../../../assets/images/video/alert.svg'); 111 position: relative;
121 } 112 top: -1px;
113
114 &.icon-download {
115 background-image: url('../../../assets/images/video/download-black.svg');
116 }
117
118 &.icon-alert {
119 background-image: url('../../../assets/images/video/alert.svg');
120 }
122 121
123 &.icon-blacklist { 122 &.icon-blacklist {
124 background-image: url('../../../assets/images/video/eye-closed.svg'); 123 background-image: url('../../../assets/images/video/blacklist.svg');
124 }
125 } 125 }
126 } 126 }
127 } 127 }
diff --git a/client/src/assets/images/global/cross.svg b/client/src/assets/images/global/cross.svg
new file mode 100644
index 000000000..d47a75996
--- /dev/null
+++ b/client/src/assets/images/global/cross.svg
@@ -0,0 +1,12 @@
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 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
5 <g id="Artboard-4" transform="translate(-312.000000, -115.000000)" stroke="#585858" stroke-width="2">
6 <g id="7" transform="translate(312.000000, 115.000000)">
7 <path d="M19,5 L5,19" id="Path-14"></path>
8 <path d="M19,5 L5,19" id="Path-14" transform="translate(12.000000, 12.000000) scale(-1, 1) translate(-12.000000, -12.000000) "></path>
9 </g>
10 </g>
11 </g>
12</svg>
diff --git a/client/src/assets/images/video/alert.svg b/client/src/assets/images/video/alert.svg
index 6d3af029f..5b43534ad 100644
--- a/client/src/assets/images/video/alert.svg
+++ b/client/src/assets/images/video/alert.svg
@@ -7,9 +7,9 @@
7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 7 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8 <g id="Artboard-4" transform="translate(-48.000000, -467.000000)"> 8 <g id="Artboard-4" transform="translate(-48.000000, -467.000000)">
9 <g id="161" transform="translate(48.000000, 467.000000)"> 9 <g id="161" transform="translate(48.000000, 467.000000)">
10 <path d="M12.8715755,3.50973876 L12,1.96027114 L11.1284245,3.50973876 L2.12842446,19.5097388 L1.29015252,21 L3,21 L21,21 L22.7098475,21 L21.8715755,19.5097388 L12.8715755,3.50973876 Z" id="Triangle-2" stroke="#585858" stroke-width="2" stroke-linejoin="round"></path> 10 <path d="M12.8715755,3.50973876 L12,1.96027114 L11.1284245,3.50973876 L2.12842446,19.5097388 L1.29015252,21 L3,21 L21,21 L22.7098475,21 L21.8715755,19.5097388 L12.8715755,3.50973876 Z" id="Triangle-2" stroke="#000000" stroke-width="2" stroke-linejoin="round"></path>
11 <path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Oval-8" fill="#585858"></path> 11 <path d="M12,17.75 C12.6903559,17.75 13.25,17.1903559 13.25,16.5 C13.25,15.8096441 12.6903559,15.25 12,15.25 C11.3096441,15.25 10.75,15.8096441 10.75,16.5 C10.75,17.1903559 11.3096441,17.75 12,17.75 Z" id="Oval-8" fill="#000000"></path>
12 <rect id="Rectangle-3" fill="#585858" x="11" y="9" width="2" height="5" rx="1"></rect> 12 <rect id="Rectangle-3" fill="#000000" x="11" y="9" width="2" height="5" rx="1"></rect>
13 </g> 13 </g>
14 </g> 14 </g>
15 </g> 15 </g>
diff --git a/client/src/assets/images/video/blacklist.svg b/client/src/assets/images/video/blacklist.svg
new file mode 100644
index 000000000..431c73816
--- /dev/null
+++ b/client/src/assets/images/video/blacklist.svg
@@ -0,0 +1,15 @@
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>no</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">
8 <g id="Artboard-4" transform="translate(-312.000000, -863.000000)" stroke="#000000" stroke-width="2">
9 <g id="347" transform="translate(312.000000, 863.000000)">
10 <circle id="Oval-196" cx="12" cy="12" r="9"></circle>
11 <path d="M18,18 L6,6" id="Path-275"></path>
12 </g>
13 </g>
14 </g>
15</svg>
diff --git a/client/src/assets/images/video/download-black.svg b/client/src/assets/images/video/download-black.svg
new file mode 100644
index 000000000..501836746
--- /dev/null
+++ b/client/src/assets/images/video/download-black.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="#000000" 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/assets/images/video/eye-closed.svg b/client/src/assets/images/video/eye-closed.svg
deleted file mode 100644
index c5b739659..000000000
--- a/client/src/assets/images/video/eye-closed.svg
+++ /dev/null
@@ -1,18 +0,0 @@
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 <defs></defs>
4 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
5 <g id="Artboard-4" transform="translate(-796.000000, -1046.000000)" stroke="#585858" stroke-width="2">
6 <g id="Extras" transform="translate(48.000000, 1046.000000)">
7 <g id="eye-closed" transform="translate(760.000000, 12.000000) scale(1, -1) translate(-760.000000, -12.000000) translate(748.000000, 0.000000)">
8 <path d="M2,14 C2,14 5,7 12,7 C19,7 22,14 22,14" id="Path-80" stroke-linejoin="round"></path>
9 <path d="M12,7 L12,5" id="Path-81"></path>
10 <path d="M18,8.5 L19,7" id="Path-81"></path>
11 <path d="M21,12 L22.5,11" id="Path-81"></path>
12 <path d="M1.5,12 L3,11" id="Path-81" transform="translate(2.250000, 11.500000) scale(1, -1) translate(-2.250000, -11.500000) "></path>
13 <path d="M5,8.5 L6,7" id="Path-81" transform="translate(5.500000, 7.750000) scale(-1, 1) translate(-5.500000, -7.750000) "></path>
14 </g>
15 </g>
16 </g>
17 </g>
18</svg>
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index a1c222c31..0d96d5ec0 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -258,9 +258,39 @@ p-datatable {
258.modal { 258.modal {
259 .modal-header { 259 .modal-header {
260 border-bottom: none; 260 border-bottom: none;
261 margin-bottom: 5px;
261 262
262 .title-page-single { 263 .modal-title {
263 margin: 0; 264 font-size: 20px;
265 font-weight: $font-semibold;
266 }
267
268 .close {
269 @include icon(24px);
270
271 position: relative;
272 right: -1px;
273 float: right;
274 background-image: url('../assets/images/global/cross.svg');
275 }
276 }
277
278 .inputs {
279 margin-top: 40px;
280 margin-bottom: 0;
281 text-align: right;
282
283 .action-button-cancel {
284 @include peertube-button;
285 @include grey-button;
286
287 display: inline-block;
288 margin-right: 10px;
289 }
290
291 .action-button-submit {
292 @include peertube-button;
293 @include orange-button;
264 } 294 }
265 } 295 }
266} 296}
diff --git a/client/src/sass/include/_bootstrap.scss b/client/src/sass/include/_bootstrap.scss
index 3857bb521..4f0e2893e 100644
--- a/client/src/sass/include/_bootstrap.scss
+++ b/client/src/sass/include/_bootstrap.scss
@@ -37,7 +37,7 @@
37//@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels"; 37//@import "~bootstrap-sass/assets/stylesheets/bootstrap/panels";
38//@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed"; 38//@import "~bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
39//@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells"; 39//@import "~bootstrap-sass/assets/stylesheets/bootstrap/wells";
40@import "~bootstrap-sass/assets/stylesheets/bootstrap/close"; 40//@import "~bootstrap-sass/assets/stylesheets/bootstrap/close";
41 41
42// Components w/ JavaScript 42// Components w/ JavaScript
43@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals"; 43@import "~bootstrap-sass/assets/stylesheets/bootstrap/modals";
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index a07bd5d28..252cf2173 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -22,6 +22,14 @@
22 } 22 }
23} 23}
24 24
25@mixin peertube-textarea ($width, $height) {
26 @include peertube-input-text($width);
27
28 height: $height;
29 padding: 5px 15px;
30 font-size: 15px;
31}
32
25@mixin orange-button { 33@mixin orange-button {
26 &, &:active, &:focus { 34 &, &:active, &:focus {
27 color: #fff; 35 color: #fff;
@@ -101,6 +109,7 @@
101 overflow: hidden; 109 overflow: hidden;
102 background: #fff; 110 background: #fff;
103 position: relative; 111 position: relative;
112 font-size: 15px;
104 113
105 &:after { 114 &:after {
106 top: 50%; 115 top: 50%;
@@ -149,6 +158,44 @@
149 } 158 }
150} 159}
151 160
161// Thanks: https://codepen.io/triss90/pen/XNEdRe/
162@mixin peertube-radio-container {
163 input[type="radio"] {
164 display: none;
165
166 & + label {
167 font-weight: $font-regular;
168 cursor: pointer;
169
170 &:before {
171 position: relative;
172 top: -2px;
173 content: '';
174 background: #fff;
175 border-radius: 100%;
176 border: 1px solid #000;
177 display: inline-block;
178 width: 15px;
179 height: 15px;
180 vertical-align: middle;
181 cursor: pointer;
182 text-align: center;
183 margin-right: 10px;
184 }
185 }
186
187 &:checked + label:before {
188 background-color: #000;
189 box-shadow: inset 0 0 0 4px #fff;
190 }
191
192 &:focus + label:before {
193 outline: none;
194 border-color: #000;
195 }
196 }
197}
198
152@mixin peertube-checkbox ($border-width) { 199@mixin peertube-checkbox ($border-width) {
153 display: none; 200 display: none;
154 201
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-28 20:38:18 +0000