IntenseWebs/PeerTube
3
0
Fork 0
mirror of https://github.com/Chocobozzz/PeerTube.git synced 2024-11-25 18:20:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Customize checkboxs

Browse Source
This commit is contained in:
Chocobozzz 2017-12-20 15:25:44 +01:00
parent 15a7387da8
commit a0d6990823
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
7 changed files with 81 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
client/src/app/account/account-settings/account-details/account-details.component.html
View File

@ -1,20 +1,23 @@
<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
<form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
<input
type="checkbox" id="displayNSFW"
formControlName="displayNSFW"
>
<label for="displayNSFW">Display videos that contain mature or explicit content</label>
<div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
{{ formErrors['displayNSFW'] }}
<div class="form-group">
<input
type="checkbox" id="displayNSFW"
formControlName="displayNSFW"
>
<label for="displayNSFW"></label>
<label for="displayNSFW">Display videos that contain mature or explicit content</label>
</div>
<div class="form-group">
<input
type="checkbox" id="autoPlayVideo"
formControlName="autoPlayVideo"
>
<label for="autoPlayVideo"></label>
<label for="autoPlayVideo">Automatically plays video</label>
</div>
<br/>
<input
type="checkbox" id="autoPlayVideo"
formControlName="autoPlayVideo"
>
<label for="autoPlayVideo">Automatically plays video</label>
<input type="submit" value="Save" [disabled]="!form.valid">
</form>

6
client/src/app/account/account-settings/account-details/account-details.component.scss
View File

@ -1,10 +1,8 @@
@import '_variables';
@import '_mixins';
label {
font-size: 15px;
font-weight: $font-regular;
margin-left: 5px;
input[type=checkbox] {
@include peertube-checkbox(1px);
}
input[type=submit] {

5
client/src/app/account/account-videos/account-videos.component.html
View File

@ -7,7 +7,10 @@
(scrolledUp)="onNearOfTop()"
>
<div class="video" *ngFor="let video of videos; let i = index">
<input type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
<div class="checkbox-container">
<input [id]="'video-check-' + i" type="checkbox" [(ngModel)]="checkedVideos[video.id]" />
<label [for]="'video-check-' + i"></label>
</div>
<my-video-thumbnail [video]="video"></my-video-thumbnail>

16
client/src/app/account/account-videos/account-videos.component.scss
View File

@ -46,11 +46,6 @@
min-height: 130px;
padding-bottom: 20px;
input[type=checkbox] {
margin-right: 20px;
outline: 0;
}
&:first-child {
margin-top: 47px;
}
@ -60,6 +55,17 @@
border-bottom: 1px solid #C6C6C6;
}
.checkbox-container {
display: flex;
align-items: center;
margin-right: 20px;
margin-left: 12px;
input[type=checkbox] {
@include peertube-checkbox(2px);
}
}
my-video-thumbnail {
margin-right: 10px;
}

1
client/src/app/videos/+video-edit/shared/video-edit.component.html
View File

@ -95,6 +95,7 @@
<div class="form-group form-group-checkbox">
<input type="checkbox" id="nsfw" formControlName="nsfw" />
<label for="nsfw"></label>
<label for="nsfw">This video contains mature or explicit content</label>
</div>

2
client/src/app/videos/+video-edit/shared/video-edit.component.scss
View File

@ -21,7 +21,7 @@
display: block;
&[type=checkbox] {
outline: 0;
@include peertube-checkbox(1px);
}
}

46
client/src/sass/include/_mixins.scss
View File

@ -148,3 +148,49 @@
cursor: default;
}
}
@mixin peertube-checkbox ($border-width) {
display: none;
& + label {
position: relative;
width: 18px;
height: 18px;
border: $border-width solid #000;
border-radius: 3px;
vertical-align: middle;
cursor: pointer;
&:after {
content: '';
position: absolute;
top: calc(2px - #{$border-width});
left: 5px;
width: 5px;
height: 12px;
opacity: 0;
transform: rotate(45deg) scale(0);
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
}
}
&:checked + label {
border-color: transparent;
background: $orange-color;
animation: jelly 0.6s ease;
&:after {
opacity: 1;
transform: rotate(45deg) scale(1);
}
}
& + label + label {
font-size: 15px;
font-weight: $font-regular;
margin-left: 5px;
cursor: pointer;
}
}