interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Design video update

This commit is contained in:
Chocobozzz 2017-12-07 14:48:47 +01:00
parent ff249f499c
commit 4cc66133ab
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
9 changed files with 238 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,85 +1,85 @@
<div [formGroup]="form">
<div class="form-group">
<label for="name">Name</label>
<input
type="text" class="form-control" id="name"
formControlName="name"
>
<div *ngIf="formErrors.name" class="alert alert-danger">
{{ formErrors.name }}
<div class="video-edit row" [formGroup]="form">
<div class="col-md-8">
<div class="form-group">
<label for="name">Title</label>
<input type="text" id="name" formControlName="name" />
<div *ngIf="formErrors.name" class="form-error">
{{ formErrors.name }}
</div>
</div>
<div class="form-group">
<label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="5" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="description">Description</label>
<my-video-description formControlName="description"></my-video-description>
<div *ngIf="formErrors.description" class="form-error">
{{ formErrors.description }}
</div>
</div>
</div>
<div class="form-group">
<label for="privacy">Privacy</label>
<select class="form-control" id="privacy" formControlName="privacy">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
</select>
<div class="col-md-4">
<div class="form-group">
<label for="category">Category</label>
<select id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.privacy" class="alert alert-danger">
{{ formErrors.privacy }}
<div *ngIf="formErrors.category" class="form-error">
{{ formErrors.category }}
</div>
</div>
</div>
<div class="form-group">
<input
type="checkbox" id="nsfw"
formControlName="nsfw"
>
<label for="nsfw">This video contains mature or explicit content</label>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" formControlName="category">
<option></option>
<option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
</select>
<div *ngIf="formErrors.category" class="alert alert-danger">
{{ formErrors.category }}
<div *ngIf="formErrors.licence" class="form-error">
{{ formErrors.licence }}
</div>
</div>
</div>
<div class="form-group">
<label for="licence">Licence</label>
<select class="form-control" id="licence" formControlName="licence">
<option></option>
<option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
</select>
<div class="form-group">
<label for="language">Language</label>
<select id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div *ngIf="formErrors.licence" class="alert alert-danger">
{{ formErrors.licence }}
<div *ngIf="formErrors.language" class="form-error">
{{ formErrors.language }}
</div>
</div>
</div>
<div class="form-group">
<label for="language">Language</label>
<select class="form-control" id="language" formControlName="language">
<option></option>
<option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
</select>
<div class="form-group">
<label for="privacy">Privacy</label>
<select id="privacy" formControlName="privacy">
<option></option>
<option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
</select>
<div *ngIf="formErrors.language" class="alert alert-danger">
{{ formErrors.language }}
<div *ngIf="formErrors.privacy" class="form-error">
{{ formErrors.privacy }}
</div>
</div>
</div>
<div class="form-group">
<label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
<tag-input
[ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
formControlName="tags" maxItems="5" modelAsStrings="true"
></tag-input>
</div>
<div class="form-group">
<label for="description">Description</label>
<my-video-description formControlName="description"></my-video-description>
<div *ngIf="formErrors.description" class="alert alert-danger">
{{ formErrors.description }}
<div class="form-group form-group-checkbox">
<input type="checkbox" id="nsfw" formControlName="nsfw" />
<label for="nsfw">This video contains mature or explicit content</label>
</div>
</div>
</div>

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

@ -1,3 +1,121 @@
.video-edit {
height: 100%;
.form-group {
margin-bottom: 25px;
}
input {
@include peertube-input-text(100%);
display: block;
&[type=checkbox] {
outline: 0;
}
}
select {
@include peertube-select(100%);
}
input, select {
font-size: 15px
}
.form-group-checkbox {
display: flex;
align-items: center;
label {
font-weight: $font-regular;
margin: 0;
}
input {
width: 10px;
margin-right: 10px;
}
}
}
.submit-container {
text-align: right;
position: relative;
bottom: $button-height;
.submit-button {
@include peertube-button;
@include orange-button;
display: inline-block;
input {
cursor: inherit;
background-color: inherit;
border: none;
padding: 0;
}
.icon.icon-validate {
@include icon(20px);
cursor: inherit;
position: relative;
top: -1px;
margin-right: 4px;
background-image: url('../../../../assets/images/global/validate.svg');
}
}
}
/deep/ {
.ng2-tag-input {
border: none !important;
}
.ng2-tags-container {
display: flex;
align-items: center;
border: 1px solid #C6C6C6;
border-radius: 3px;
padding: 5px !important;
}
tag {
background-color: #E5E5E5 !important;
border-radius: 3px !important;
font-size: 15px !important;
color: #000 !important;
height: 30px !important;
line-height: 30px !important;
margin: 0 5px 0 0 !important;
cursor: default !important;
padding: 0 8px 0 10px !important;
div {
height: 100% !important;
}
}
delete-icon {
cursor: pointer !important;
height: auto !important;
vertical-align: middle !important;
padding-left: 6px !important;
svg {
height: auto !important;
vertical-align: middle !important;
fill: #585858 !important;
}
&:hover {
transform: none !important;
}
}
}
.btn-file {
position: relative;
overflow: hidden;
@ -20,24 +138,6 @@
display: block;
}
.form-group {
margin-bottom: 10px;
}
div.tags {
height: 40px;
font-size: 20px;
margin-top: 20px;
.tag {
margin-right: 10px;
.remove {
cursor: pointer;
}
}
}
div.file-to-upload {
height: 40px;

19
client/src/app/videos/+video-edit/video-update.component.html
View File

@ -1,7 +1,7 @@
<div class="row">
<div class="content-padding">
<h3>Update {{ video?.name }}</h3>
<div class="margin-content">
<div class="title-page title-page-single">
Update {{ video?.name }}
</div>
<form novalidate [formGroup]="form">
@ -10,12 +10,11 @@
[validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
></my-video-edit>
<div class="form-group">
<input
type="button" value="Update" class="btn btn-default form-control"
(click)="update()"
>
<div class="submit-container">
<div class="submit-button" [ngClass]="{ disabled: !form.valid }">
<span class="icon icon-validate"></span>
<input type="button" value="Update" (click)="update()" />
</div>
</div>
</form>
</div>
</div>

13
client/src/app/videos/+video-edit/video-update.component.ts
View File

@ -5,19 +5,10 @@ import { NotificationsService } from 'angular2-notifications'
import 'rxjs/add/observable/forkJoin'
import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
import { ServerService } from '../../core'
import {
FormReactive,
VIDEO_CATEGORY,
VIDEO_DESCRIPTION,
VIDEO_LANGUAGE,
VIDEO_LICENCE,
VIDEO_NAME,
VIDEO_PRIVACY,
VIDEO_TAGS
} from '../../shared'
import { FormReactive } from '../../shared'
import { ValidatorMessage } from '../../shared/forms/form-validators'
import { VideoService } from '../../shared/video/video.service'
import { VideoEdit } from '../../shared/video/video-edit.model'
import { VideoService } from '../../shared/video/video.service'
@Component({
selector: 'my-videos-update',

1
client/src/app/videos/+video-watch/video-watch.component.scss
View File

@ -70,6 +70,7 @@
&.icon-more {
background-image: url('../../../assets/images/video/more.svg');
top: -1px;
}
}

4
client/src/app/videos/shared/video-description.component.html
View File

@ -1,6 +1,6 @@
<textarea
[(ngModel)]="description" (ngModelChange)="onModelChange()"
id="description" class="form-control" placeholder="My super video">
[(ngModel)]="description" (ngModelChange)="onModelChange()"
id="description" placeholder="My super video">
</textarea>
<tabset #staticTabs class="previews">

6
client/src/app/videos/shared/video-description.component.scss
View File

@ -1,11 +1,15 @@
textarea {
@include peertube-input-text(100%);
font-size: 15px;
height: 150px;
}
.previews /deep/ {
font-size: 15px !important;
.nav {
margin-top: 10px;
font-size: 0.9em;
}
.tab-content {

14
client/src/assets/images/global/validate.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<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">
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
<g id="Extras" transform="translate(48.000000, 1046.000000)">
<g id="yes" transform="translate(352.000000, 88.000000)">
<circle id="Oval-1" cx="12" cy="12" r="10"></circle>
<polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"></polyline>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 824 B

22
client/src/sass/_mixins.scss
View File

@ -23,20 +23,28 @@
color: #fff;
background-color: $orange-color;
&:hover, &:active, &:focus, &[disabled] {
&:hover, &:active, &:focus, &[disabled], &.disabled {
color: #fff;
background-color: $orange-hoover-color;
}
&[disabled], &.disabled {
cursor: default;
}
}
@mixin grey-button {
background-color: $grey-color;
color: #585858;
&:hover, &:active, &:focus, &[disabled] {
&:hover, &:active, &:focus, &[disabled], &.disabled {
color: #585858;
background-color: $grey-hoover-color;
}
&[disabled], &.disabled {
cursor: default;
}
}
@mixin peertube-button {
@ -72,3 +80,13 @@
vertical-align: middle;
cursor: pointer;
}
@mixin peertube-select ($width) {
background-color: #fff;
border: 1px solid #C6C6C6;
height: $button-height;
width: $width;
border-radius: 3px;
padding-left: 15px;
}