aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-12-07 14:48:47 +0100
committerChocobozzz <florian.bigard@gmail.com>2017-12-07 15:18:03 +0100
commit4cc66133abf1e37873316999b660c93ab92eb4a0 (patch)
treea7f861f665ab563c2cf0231d0ab5554a9dc994d6 /client
parentff249f499ccca2e37757f338384e7ba44c906a69 (diff)
downloadPeerTube-4cc66133abf1e37873316999b660c93ab92eb4a0.tar.gz
PeerTube-4cc66133abf1e37873316999b660c93ab92eb4a0.tar.zst
PeerTube-4cc66133abf1e37873316999b660c93ab92eb4a0.zip
Design video update
Diffstat (limited to 'client')
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html130
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss136
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html19
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts13
-rw-r--r--client/src/app/videos/+video-watch/video-watch.component.scss1
-rw-r--r--client/src/app/videos/shared/video-description.component.html4
-rw-r--r--client/src/app/videos/shared/video-description.component.scss6
-rw-r--r--client/src/assets/images/global/validate.svg14
-rw-r--r--client/src/sass/_mixins.scss22
9 files changed, 236 insertions, 109 deletions
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 e087b71a4..a6b753166 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
@@ -1,85 +1,85 @@
1<div [formGroup]="form"> 1<div class="video-edit row" [formGroup]="form">
2 <div class="form-group">
3 <label for="name">Name</label>
4 <input
5 type="text" class="form-control" id="name"
6 formControlName="name"
7 >
8 <div *ngIf="formErrors.name" class="alert alert-danger">
9 {{ formErrors.name }}
10 </div>
11 </div>
12 2
13 <div class="form-group"> 3 <div class="col-md-8">
14 <label for="privacy">Privacy</label> 4 <div class="form-group">
15 <select class="form-control" id="privacy" formControlName="privacy"> 5 <label for="name">Title</label>
16 <option></option> 6 <input type="text" id="name" formControlName="name" />
17 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 7 <div *ngIf="formErrors.name" class="form-error">
18 </select> 8 {{ formErrors.name }}
9 </div>
10 </div>
19 11
20 <div *ngIf="formErrors.privacy" class="alert alert-danger"> 12 <div class="form-group">
21 {{ formErrors.privacy }} 13 <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span>
14 <tag-input
15 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages"
16 formControlName="tags" maxItems="5" modelAsStrings="true"
17 ></tag-input>
22 </div> 18 </div>
23 </div>
24 19
25 <div class="form-group"> 20 <div class="form-group">
26 <input 21 <label for="description">Description</label>
27 type="checkbox" id="nsfw" 22 <my-video-description formControlName="description"></my-video-description>
28 formControlName="nsfw" 23
29 > 24 <div *ngIf="formErrors.description" class="form-error">
30 <label for="nsfw">This video contains mature or explicit content</label> 25 {{ formErrors.description }}
26 </div>
27 </div>
31 </div> 28 </div>
32 29
33 <div class="form-group"> 30 <div class="col-md-4">
34 <label for="category">Category</label> 31 <div class="form-group">
35 <select class="form-control" id="category" formControlName="category"> 32 <label for="category">Category</label>
36 <option></option> 33 <select id="category" formControlName="category">
37 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 34 <option></option>
38 </select> 35 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
36 </select>
39 37
40 <div *ngIf="formErrors.category" class="alert alert-danger"> 38 <div *ngIf="formErrors.category" class="form-error">
41 {{ formErrors.category }} 39 {{ formErrors.category }}
40 </div>
42 </div> 41 </div>
43 </div>
44 42
45 <div class="form-group"> 43 <div class="form-group">
46 <label for="licence">Licence</label> 44 <label for="licence">Licence</label>
47 <select class="form-control" id="licence" formControlName="licence"> 45 <select id="licence" formControlName="licence">
48 <option></option> 46 <option></option>
49 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 47 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
50 </select> 48 </select>
51 49
52 <div *ngIf="formErrors.licence" class="alert alert-danger"> 50 <div *ngIf="formErrors.licence" class="form-error">
53 {{ formErrors.licence }} 51 {{ formErrors.licence }}
52 </div>
54 </div> 53 </div>
55 </div>
56 54
57 <div class="form-group"> 55 <div class="form-group">
58 <label for="language">Language</label> 56 <label for="language">Language</label>
59 <select class="form-control" id="language" formControlName="language"> 57 <select id="language" formControlName="language">
60 <option></option> 58 <option></option>
61 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 59 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
62 </select> 60 </select>
63 61
64 <div *ngIf="formErrors.language" class="alert alert-danger"> 62 <div *ngIf="formErrors.language" class="form-error">
65 {{ formErrors.language }} 63 {{ formErrors.language }}
64 </div>
66 </div> 65 </div>
67 </div>
68 66
69 <div class="form-group"> 67 <div class="form-group">
70 <label class="label-tags">Tags</label> <span class="little-information">(press enter to add the tag)</span> 68 <label for="privacy">Privacy</label>
71 <tag-input 69 <select id="privacy" formControlName="privacy">
72 [ngModel]="tags" [validators]="tagValidators" [errorMessages]="tagValidatorsMessages" 70 <option></option>
73 formControlName="tags" maxItems="5" modelAsStrings="true" 71 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
74 ></tag-input> 72 </select>
75 </div>
76 73
77 <div class="form-group"> 74 <div *ngIf="formErrors.privacy" class="form-error">
78 <label for="description">Description</label> 75 {{ formErrors.privacy }}
79 <my-video-description formControlName="description"></my-video-description> 76 </div>
77 </div>
80 78
81 <div *ngIf="formErrors.description" class="alert alert-danger"> 79 <div class="form-group form-group-checkbox">
82 {{ formErrors.description }} 80 <input type="checkbox" id="nsfw" formControlName="nsfw" />
81 <label for="nsfw">This video contains mature or explicit content</label>
83 </div> 82 </div>
83
84 </div> 84 </div>
85</div> 85</div>
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 9ee0c520c..0af48fabe 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
@@ -1,3 +1,121 @@
1.video-edit {
2 height: 100%;
3
4 .form-group {
5 margin-bottom: 25px;
6 }
7
8 input {
9 @include peertube-input-text(100%);
10 display: block;
11
12 &[type=checkbox] {
13 outline: 0;
14 }
15 }
16
17 select {
18 @include peertube-select(100%);
19 }
20
21 input, select {
22 font-size: 15px
23 }
24
25 .form-group-checkbox {
26 display: flex;
27 align-items: center;
28
29 label {
30 font-weight: $font-regular;
31 margin: 0;
32 }
33
34 input {
35 width: 10px;
36 margin-right: 10px;
37 }
38 }
39}
40
41.submit-container {
42 text-align: right;
43 position: relative;
44 bottom: $button-height;
45
46 .submit-button {
47 @include peertube-button;
48 @include orange-button;
49
50 display: inline-block;
51
52 input {
53 cursor: inherit;
54 background-color: inherit;
55 border: none;
56 padding: 0;
57 }
58
59 .icon.icon-validate {
60 @include icon(20px);
61
62 cursor: inherit;
63 position: relative;
64 top: -1px;
65 margin-right: 4px;
66 background-image: url('../../../../assets/images/global/validate.svg');
67 }
68 }
69}
70
71/deep/ {
72 .ng2-tag-input {
73 border: none !important;
74 }
75
76 .ng2-tags-container {
77 display: flex;
78 align-items: center;
79 border: 1px solid #C6C6C6;
80 border-radius: 3px;
81 padding: 5px !important;
82 }
83
84 tag {
85 background-color: #E5E5E5 !important;
86 border-radius: 3px !important;
87 font-size: 15px !important;
88 color: #000 !important;
89 height: 30px !important;
90 line-height: 30px !important;
91 margin: 0 5px 0 0 !important;
92 cursor: default !important;
93 padding: 0 8px 0 10px !important;
94
95 div {
96 height: 100% !important;
97 }
98 }
99
100 delete-icon {
101 cursor: pointer !important;
102 height: auto !important;
103 vertical-align: middle !important;
104 padding-left: 6px !important;
105
106 svg {
107 height: auto !important;
108 vertical-align: middle !important;
109 fill: #585858 !important;
110 }
111
112 &:hover {
113 transform: none !important;
114 }
115 }
116}
117
118
1.btn-file { 119.btn-file {
2 position: relative; 120 position: relative;
3 overflow: hidden; 121 overflow: hidden;
@@ -20,24 +138,6 @@
20 display: block; 138 display: block;
21} 139}
22 140
23.form-group {
24 margin-bottom: 10px;
25}
26
27div.tags {
28 height: 40px;
29 font-size: 20px;
30 margin-top: 20px;
31
32 .tag {
33 margin-right: 10px;
34
35 .remove {
36 cursor: pointer;
37 }
38 }
39}
40
41div.file-to-upload { 141div.file-to-upload {
42 height: 40px; 142 height: 40px;
43 143
diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index c57f35da0..3163495bf 100644
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/client/src/app/videos/+video-edit/video-update.component.html
@@ -1,7 +1,7 @@
1<div class="row"> 1<div class="margin-content">
2 <div class="content-padding"> 2 <div class="title-page title-page-single">
3 3 Update {{ video?.name }}
4 <h3>Update {{ video?.name }}</h3> 4 </div>
5 5
6 <form novalidate [formGroup]="form"> 6 <form novalidate [formGroup]="form">
7 7
@@ -10,12 +10,11 @@
10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies"
11 ></my-video-edit> 11 ></my-video-edit>
12 12
13 <div class="form-group"> 13 <div class="submit-container">
14 <input 14 <div class="submit-button" [ngClass]="{ disabled: !form.valid }">
15 type="button" value="Update" class="btn btn-default form-control" 15 <span class="icon icon-validate"></span>
16 (click)="update()" 16 <input type="button" value="Update" (click)="update()" />
17 > 17 </div>
18 </div> 18 </div>
19 </form> 19 </form>
20 </div>
21</div> 20</div>
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts
index 01ab0a716..d1da8b6d8 100644
--- a/client/src/app/videos/+video-edit/video-update.component.ts
+++ b/client/src/app/videos/+video-edit/video-update.component.ts
@@ -5,19 +5,10 @@ import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 5import 'rxjs/add/observable/forkJoin'
6import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum' 6import { VideoPrivacy } from '../../../../../shared/models/videos/video-privacy.enum'
7import { ServerService } from '../../core' 7import { ServerService } from '../../core'
8import { 8import { FormReactive } from '../../shared'
9 FormReactive,
10 VIDEO_CATEGORY,
11 VIDEO_DESCRIPTION,
12 VIDEO_LANGUAGE,
13 VIDEO_LICENCE,
14 VIDEO_NAME,
15 VIDEO_PRIVACY,
16 VIDEO_TAGS
17} from '../../shared'
18import { ValidatorMessage } from '../../shared/forms/form-validators' 9import { ValidatorMessage } from '../../shared/forms/form-validators'
19import { VideoService } from '../../shared/video/video.service'
20import { VideoEdit } from '../../shared/video/video-edit.model' 10import { VideoEdit } from '../../shared/video/video-edit.model'
11import { VideoService } from '../../shared/video/video.service'
21 12
22@Component({ 13@Component({
23 selector: 'my-videos-update', 14 selector: 'my-videos-update',
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 6973619b2..2ccfd2749 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.scss
+++ b/client/src/app/videos/+video-watch/video-watch.component.scss
@@ -70,6 +70,7 @@
70 70
71 &.icon-more { 71 &.icon-more {
72 background-image: url('../../../assets/images/video/more.svg'); 72 background-image: url('../../../assets/images/video/more.svg');
73 top: -1px;
73 } 74 }
74 } 75 }
75 76
diff --git a/client/src/app/videos/shared/video-description.component.html b/client/src/app/videos/shared/video-description.component.html
index 7a228857c..da66a9753 100644
--- a/client/src/app/videos/shared/video-description.component.html
+++ b/client/src/app/videos/shared/video-description.component.html
@@ -1,6 +1,6 @@
1<textarea 1<textarea
2 [(ngModel)]="description" (ngModelChange)="onModelChange()" 2 [(ngModel)]="description" (ngModelChange)="onModelChange()"
3 id="description" class="form-control" placeholder="My super video"> 3 id="description" placeholder="My super video">
4</textarea> 4</textarea>
5 5
6<tabset #staticTabs class="previews"> 6<tabset #staticTabs class="previews">
diff --git a/client/src/app/videos/shared/video-description.component.scss b/client/src/app/videos/shared/video-description.component.scss
index d8d73e846..6ef81ae58 100644
--- a/client/src/app/videos/shared/video-description.component.scss
+++ b/client/src/app/videos/shared/video-description.component.scss
@@ -1,11 +1,15 @@
1textarea { 1textarea {
2 @include peertube-input-text(100%);
3
4 font-size: 15px;
2 height: 150px; 5 height: 150px;
3} 6}
4 7
5.previews /deep/ { 8.previews /deep/ {
9 font-size: 15px !important;
10
6 .nav { 11 .nav {
7 margin-top: 10px; 12 margin-top: 10px;
8 font-size: 0.9em;
9 } 13 }
10 14
11 .tab-content { 15 .tab-content {
diff --git a/client/src/assets/images/global/validate.svg b/client/src/assets/images/global/validate.svg
new file mode 100644
index 000000000..5c7ee9d14
--- /dev/null
+++ b/client/src/assets/images/global/validate.svg
@@ -0,0 +1,14 @@
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">
5 <g id="Artboard-4" transform="translate(-400.000000, -1134.000000)" stroke="#ffffff" stroke-width="2">
6 <g id="Extras" transform="translate(48.000000, 1046.000000)">
7 <g id="yes" transform="translate(352.000000, 88.000000)">
8 <circle id="Oval-1" cx="12" cy="12" r="10"></circle>
9 <polyline id="Path-288" stroke-linecap="round" stroke-linejoin="round" points="8.5 12.5 10.5 14.5 15.5 9.5"></polyline>
10 </g>
11 </g>
12 </g>
13 </g>
14</svg>
diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss
index 14d9b5044..121e16e10 100644
--- a/client/src/sass/_mixins.scss
+++ b/client/src/sass/_mixins.scss
@@ -23,20 +23,28 @@
23 color: #fff; 23 color: #fff;
24 background-color: $orange-color; 24 background-color: $orange-color;
25 25
26 &:hover, &:active, &:focus, &[disabled] { 26 &:hover, &:active, &:focus, &[disabled], &.disabled {
27 color: #fff; 27 color: #fff;
28 background-color: $orange-hoover-color; 28 background-color: $orange-hoover-color;
29 } 29 }
30
31 &[disabled], &.disabled {
32 cursor: default;
33 }
30} 34}
31 35
32@mixin grey-button { 36@mixin grey-button {
33 background-color: $grey-color; 37 background-color: $grey-color;
34 color: #585858; 38 color: #585858;
35 39
36 &:hover, &:active, &:focus, &[disabled] { 40 &:hover, &:active, &:focus, &[disabled], &.disabled {
37 color: #585858; 41 color: #585858;
38 background-color: $grey-hoover-color; 42 background-color: $grey-hoover-color;
39 } 43 }
44
45 &[disabled], &.disabled {
46 cursor: default;
47 }
40} 48}
41 49
42@mixin peertube-button { 50@mixin peertube-button {
@@ -72,3 +80,13 @@
72 vertical-align: middle; 80 vertical-align: middle;
73 cursor: pointer; 81 cursor: pointer;
74} 82}
83
84
85@mixin peertube-select ($width) {
86 background-color: #fff;
87 border: 1px solid #C6C6C6;
88 height: $button-height;
89 width: $width;
90 border-radius: 3px;
91 padding-left: 15px;
92}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:36:50 +0000