aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 15:25:44 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 15:25:44 +0100
commita0d69908239718ca3bd03097fbd9eb7e2a13ff75 (patch)
tree2a9c8f8abab25967277363f611ff3a7d45105ffe
parent15a7387da888492068e2ce3d1e39639d142f6c6e (diff)
downloadPeerTube-a0d69908239718ca3bd03097fbd9eb7e2a13ff75.tar.gz
PeerTube-a0d69908239718ca3bd03097fbd9eb7e2a13ff75.tar.zst
PeerTube-a0d69908239718ca3bd03097fbd9eb7e2a13ff75.zip
Customize checkboxs
-rw-r--r--client/src/app/account/account-settings/account-details/account-details.component.html29
-rw-r--r--client/src/app/account/account-settings/account-details/account-details.component.scss6
-rw-r--r--client/src/app/account/account-videos/account-videos.component.html5
-rw-r--r--client/src/app/account/account-videos/account-videos.component.scss16
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html1
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss2
-rw-r--r--client/src/sass/include/_mixins.scss46
7 files changed, 81 insertions, 24 deletions
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
index 593b87e29..c8e1e73b0 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.html
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -1,20 +1,23 @@
1<div *ngIf="error" class="alert alert-danger">{{ error }}</div> 1<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
2 2
3<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form"> 3<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
4 <input 4 <div class="form-group">
5 type="checkbox" id="displayNSFW" 5 <input
6 formControlName="displayNSFW" 6 type="checkbox" id="displayNSFW"
7 > 7 formControlName="displayNSFW"
8 <label for="displayNSFW">Display videos that contain mature or explicit content</label> 8 >
9 <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger"> 9 <label for="displayNSFW"></label>
10 {{ formErrors['displayNSFW'] }} 10 <label for="displayNSFW">Display videos that contain mature or explicit content</label>
11 </div>
12
13 <div class="form-group">
14 <input
15 type="checkbox" id="autoPlayVideo"
16 formControlName="autoPlayVideo"
17 >
18 <label for="autoPlayVideo"></label>
19 <label for="autoPlayVideo">Automatically plays video</label>
11 </div> 20 </div>
12 <br/>
13 <input
14 type="checkbox" id="autoPlayVideo"
15 formControlName="autoPlayVideo"
16 >
17 <label for="autoPlayVideo">Automatically plays video</label>
18 21
19 <input type="submit" value="Save" [disabled]="!form.valid"> 22 <input type="submit" value="Save" [disabled]="!form.valid">
20</form> 23</form>
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
index 1bdb19a38..4e8dfde1d 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.scss
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -1,10 +1,8 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4label { 4input[type=checkbox] {
5 font-size: 15px; 5 @include peertube-checkbox(1px);
6 font-weight: $font-regular;
7 margin-left: 5px;
8} 6}
9 7
10input[type=submit] { 8input[type=submit] {
diff --git a/client/src/app/account/account-videos/account-videos.component.html b/client/src/app/account/account-videos/account-videos.component.html
index 4f3a774bd..f73483039 100644
--- a/client/src/app/account/account-videos/account-videos.component.html
+++ b/client/src/app/account/account-videos/account-videos.component.html
@@ -7,7 +7,10 @@
7 (scrolledUp)="onNearOfTop()" 7 (scrolledUp)="onNearOfTop()"
8> 8>
9 <div class="video" *ngFor="let video of videos; let i = index"> 9 <div class="video" *ngFor="let video of videos; let i = index">
10 <input type="checkbox" [(ngModel)]="checkedVideos[video.id]" /> 10 <div class="checkbox-container">
11 <input [id]="'video-check-' + i" type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
12 <label [for]="'video-check-' + i"></label>
13 </div>
11 14
12 <my-video-thumbnail [video]="video"></my-video-thumbnail> 15 <my-video-thumbnail [video]="video"></my-video-thumbnail>
13 16
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 0d478edd7..707bd66ad 100644
--- a/client/src/app/account/account-videos/account-videos.component.scss
+++ b/client/src/app/account/account-videos/account-videos.component.scss
@@ -46,11 +46,6 @@
46 min-height: 130px; 46 min-height: 130px;
47 padding-bottom: 20px; 47 padding-bottom: 20px;
48 48
49 input[type=checkbox] {
50 margin-right: 20px;
51 outline: 0;
52 }
53
54 &:first-child { 49 &:first-child {
55 margin-top: 47px; 50 margin-top: 47px;
56 } 51 }
@@ -60,6 +55,17 @@
60 border-bottom: 1px solid #C6C6C6; 55 border-bottom: 1px solid #C6C6C6;
61 } 56 }
62 57
58 .checkbox-container {
59 display: flex;
60 align-items: center;
61 margin-right: 20px;
62 margin-left: 12px;
63
64 input[type=checkbox] {
65 @include peertube-checkbox(2px);
66 }
67 }
68
63 my-video-thumbnail { 69 my-video-thumbnail {
64 margin-right: 10px; 70 margin-right: 10px;
65 } 71 }
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html
index e728d8ea2..4f92b4908 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.html
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html
@@ -95,6 +95,7 @@
95 95
96 <div class="form-group form-group-checkbox"> 96 <div class="form-group form-group-checkbox">
97 <input type="checkbox" id="nsfw" formControlName="nsfw" /> 97 <input type="checkbox" id="nsfw" formControlName="nsfw" />
98 <label for="nsfw"></label>
98 <label for="nsfw">This video contains mature or explicit content</label> 99 <label for="nsfw">This video contains mature or explicit content</label>
99 </div> 100 </div>
100 101
diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
index ba0ca1e21..4f8f031cf 100644
--- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss
+++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss
@@ -21,7 +21,7 @@
21 display: block; 21 display: block;
22 22
23 &[type=checkbox] { 23 &[type=checkbox] {
24 outline: 0; 24 @include peertube-checkbox(1px);
25 } 25 }
26 } 26 }
27 27
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4a709404d..a07bd5d28 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -148,3 +148,49 @@
148 cursor: default; 148 cursor: default;
149 } 149 }
150} 150}
151
152@mixin peertube-checkbox ($border-width) {
153 display: none;
154
155 & + label {
156 position: relative;
157 width: 18px;
158 height: 18px;
159 border: $border-width solid #000;
160 border-radius: 3px;
161 vertical-align: middle;
162 cursor: pointer;
163
164 &:after {
165 content: '';
166 position: absolute;
167 top: calc(2px - #{$border-width});
168 left: 5px;
169 width: 5px;
170 height: 12px;
171 opacity: 0;
172 transform: rotate(45deg) scale(0);
173 border-right: 2px solid #fff;
174 border-bottom: 2px solid #fff;
175 }
176 }
177
178 &:checked + label {
179 border-color: transparent;
180 background: $orange-color;
181 animation: jelly 0.6s ease;
182
183 &:after {
184 opacity: 1;
185 transform: rotate(45deg) scale(1);
186 }
187 }
188
189 & + label + label {
190 font-size: 15px;
191 font-weight: $font-regular;
192 margin-left: 5px;
193 cursor: pointer;
194 }
195}
196