diff options
Diffstat (limited to 'client/src/app/videos/+video-edit')
13 files changed, 44 insertions, 131 deletions
diff --git a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html index 30aefdbfc..19043eee6 100644 --- a/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/videos/+video-edit/shared/video-caption-add-modal.component.html | |||
@@ -3,7 +3,7 @@ | |||
3 | 3 | ||
4 | <div class="modal-header"> | 4 | <div class="modal-header"> |
5 | <h4 i18n class="modal-title">Add caption</h4> | 5 | <h4 i18n class="modal-title">Add caption</h4> |
6 | <span class="close" aria-label="Close" role="button" (click)="hide()"></span> | 6 | <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> |
7 | </div> | 7 | </div> |
8 | 8 | ||
9 | <div class="modal-body"> | 9 | <div class="modal-body"> |
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 bd52d686a..092c0e862 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 | |||
@@ -143,7 +143,7 @@ | |||
143 | 143 | ||
144 | <div class="captions-header"> | 144 | <div class="captions-header"> |
145 | <a (click)="openAddCaptionModal()" class="create-caption"> | 145 | <a (click)="openAddCaptionModal()" class="create-caption"> |
146 | <span class="icon icon-add"></span> | 146 | <my-global-icon iconName="add"></my-global-icon> |
147 | <ng-container i18n>Add another caption</ng-container> | 147 | <ng-container i18n>Add another caption</ng-container> |
148 | </a> | 148 | </a> |
149 | </div> | 149 | </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 25db8e8ed..cc32fb254 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 | |||
@@ -42,7 +42,7 @@ my-peertube-checkbox { | |||
42 | text-align: right; | 42 | text-align: right; |
43 | 43 | ||
44 | .create-caption { | 44 | .create-caption { |
45 | @include create-button('../../../../assets/images/global/add.svg'); | 45 | @include create-button; |
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
@@ -100,13 +100,14 @@ my-peertube-checkbox { | |||
100 | display: inline-block; | 100 | display: inline-block; |
101 | margin-right: 25px; | 101 | margin-right: 25px; |
102 | 102 | ||
103 | color: #585858; | 103 | color: $grey-foreground-color; |
104 | font-size: 15px; | 104 | font-size: 15px; |
105 | } | 105 | } |
106 | 106 | ||
107 | .submit-button { | 107 | .submit-button { |
108 | @include peertube-button; | 108 | @include peertube-button; |
109 | @include orange-button; | 109 | @include orange-button; |
110 | @include button-with-icon(20px, 1px); | ||
110 | 111 | ||
111 | display: inline-block; | 112 | display: inline-block; |
112 | 113 | ||
@@ -119,16 +120,6 @@ my-peertube-checkbox { | |||
119 | color: inherit; | 120 | color: inherit; |
120 | font-weight: $font-semibold; | 121 | font-weight: $font-semibold; |
121 | } | 122 | } |
122 | |||
123 | .icon.icon-validate { | ||
124 | @include icon(20px); | ||
125 | |||
126 | cursor: inherit; | ||
127 | position: relative; | ||
128 | top: -1px; | ||
129 | margin-right: 4px; | ||
130 | background-image: url('../../../../assets/images/global/validate.svg'); | ||
131 | } | ||
132 | } | 123 | } |
133 | } | 124 | } |
134 | 125 | ||
@@ -202,7 +193,7 @@ p-calendar { | |||
202 | top: -1px; | 193 | top: -1px; |
203 | height: auto !important; | 194 | height: auto !important; |
204 | vertical-align: middle !important; | 195 | vertical-align: middle !important; |
205 | fill: #585858 !important; | 196 | fill: $grey-foreground-color !important; |
206 | } | 197 | } |
207 | 198 | ||
208 | &:hover { | 199 | &:hover { |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html index 11a81ad66..28eb143c9 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div *ngIf="!hasImportedVideo" class="upload-video-container"> | 1 | <div *ngIf="!hasImportedVideo" class="upload-video-container"> |
2 | <div class="import-video-torrent"> | 2 | <div class="first-step-block"> |
3 | <div class="icon icon-upload"></div> | 3 | <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> |
4 | 4 | ||
5 | <div class="button-file"> | 5 | <div class="button-file"> |
6 | <span i18n>Select the torrent to import</span> | 6 | <span i18n>Select the torrent to import</span> |
@@ -66,7 +66,7 @@ | |||
66 | (click)="updateSecondStep()" | 66 | (click)="updateSecondStep()" |
67 | [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" | 67 | [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" |
68 | > | 68 | > |
69 | <span class="icon icon-validate"></span> | 69 | <my-global-icon iconName="validate"></my-global-icon> |
70 | <input type="button" i18n-value value="Update" /> | 70 | <input type="button" i18n-value value="Update" /> |
71 | </div> | 71 | </div> |
72 | </div> | 72 | </div> |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss index 00626cd7b..6d59ed834 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.scss | |||
@@ -1,45 +1,7 @@ | |||
1 | @import 'variables'; | 1 | @import 'variables'; |
2 | @import 'mixins'; | 2 | @import 'mixins'; |
3 | 3 | ||
4 | $width-size: 190px; | 4 | .first-step-block { |
5 | |||
6 | .peertube-select-container { | ||
7 | @include peertube-select-container($width-size); | ||
8 | } | ||
9 | |||
10 | .alert.alert-danger { | ||
11 | text-align: center; | ||
12 | |||
13 | & > div { | ||
14 | font-weight: $font-semibold; | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .import-video-torrent { | ||
19 | display: flex; | ||
20 | flex-direction: column; | ||
21 | align-items: center; | ||
22 | |||
23 | .icon.icon-upload { | ||
24 | @include icon(90px); | ||
25 | margin-bottom: 25px; | ||
26 | cursor: default; | ||
27 | |||
28 | background-image: url('../../../../assets/images/video/upload.svg'); | ||
29 | } | ||
30 | |||
31 | .button-file { | ||
32 | @include peertube-button-file(auto); | ||
33 | |||
34 | min-width: 190px; | ||
35 | } | ||
36 | |||
37 | .button-file-extension { | ||
38 | display: block; | ||
39 | font-size: 12px; | ||
40 | margin-top: 5px; | ||
41 | } | ||
42 | |||
43 | .torrent-or-magnet { | 5 | .torrent-or-magnet { |
44 | margin: 10px 0; | 6 | margin: 10px 0; |
45 | } | 7 | } |
@@ -47,19 +9,6 @@ $width-size: 190px; | |||
47 | .form-group-magnet-uri { | 9 | .form-group-magnet-uri { |
48 | margin-bottom: 40px; | 10 | margin-bottom: 40px; |
49 | } | 11 | } |
50 | |||
51 | input[type=text] { | ||
52 | @include peertube-input-text($width-size); | ||
53 | display: block; | ||
54 | } | ||
55 | |||
56 | input[type=button] { | ||
57 | @include peertube-button; | ||
58 | @include orange-button; | ||
59 | |||
60 | width: $width-size; | ||
61 | margin-top: 30px; | ||
62 | } | ||
63 | } | 12 | } |
64 | 13 | ||
65 | 14 | ||
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts index 63db06919..307806bb9 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-torrent.component.ts | |||
@@ -18,7 +18,8 @@ import { scrollToTop } from '@app/shared/misc/utils' | |||
18 | templateUrl: './video-import-torrent.component.html', | 18 | templateUrl: './video-import-torrent.component.html', |
19 | styleUrls: [ | 19 | styleUrls: [ |
20 | '../shared/video-edit.component.scss', | 20 | '../shared/video-edit.component.scss', |
21 | './video-import-torrent.component.scss' | 21 | './video-import-torrent.component.scss', |
22 | './video-send.scss' | ||
22 | ] | 23 | ] |
23 | }) | 24 | }) |
24 | export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { | 25 | export class VideoImportTorrentComponent extends VideoSend implements OnInit, CanComponentDeactivate { |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html index 533446672..3550c3585 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div *ngIf="!hasImportedVideo" class="upload-video-container"> | 1 | <div *ngIf="!hasImportedVideo" class="upload-video-container"> |
2 | <div class="import-video-url"> | 2 | <div class="first-step-block"> |
3 | <div class="icon icon-upload"></div> | 3 | <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> |
4 | 4 | ||
5 | <div class="form-group"> | 5 | <div class="form-group"> |
6 | <label i18n for="targetUrl">URL</label> | 6 | <label i18n for="targetUrl">URL</label> |
@@ -59,7 +59,7 @@ | |||
59 | (click)="updateSecondStep()" | 59 | (click)="updateSecondStep()" |
60 | [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" | 60 | [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }" |
61 | > | 61 | > |
62 | <span class="icon icon-validate"></span> | 62 | <my-global-icon iconName="validate"></my-global-icon> |
63 | <input type="button" i18n-value value="Update" /> | 63 | <input type="button" i18n-value value="Update" /> |
64 | </div> | 64 | </div> |
65 | </div> | 65 | </div> |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts index a1810b7a0..257c6e5db 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.ts | |||
@@ -18,7 +18,7 @@ import { scrollToTop } from '@app/shared/misc/utils' | |||
18 | templateUrl: './video-import-url.component.html', | 18 | templateUrl: './video-import-url.component.html', |
19 | styleUrls: [ | 19 | styleUrls: [ |
20 | '../shared/video-edit.component.scss', | 20 | '../shared/video-edit.component.scss', |
21 | './video-import-url.component.scss' | 21 | './video-send.scss' |
22 | ] | 22 | ] |
23 | }) | 23 | }) |
24 | export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { | 24 | export class VideoImportUrlComponent extends VideoSend implements OnInit, CanComponentDeactivate { |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-send.scss index e907edc70..8769dd302 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-import-url.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-send.scss | |||
@@ -3,10 +3,6 @@ | |||
3 | 3 | ||
4 | $width-size: 190px; | 4 | $width-size: 190px; |
5 | 5 | ||
6 | .peertube-select-container { | ||
7 | @include peertube-select-container($width-size); | ||
8 | } | ||
9 | |||
10 | .alert.alert-danger { | 6 | .alert.alert-danger { |
11 | text-align: center; | 7 | text-align: center; |
12 | 8 | ||
@@ -15,17 +11,20 @@ $width-size: 190px; | |||
15 | } | 11 | } |
16 | } | 12 | } |
17 | 13 | ||
18 | .import-video-url { | 14 | .first-step-block { |
19 | display: flex; | 15 | display: flex; |
20 | flex-direction: column; | 16 | flex-direction: column; |
21 | align-items: center; | 17 | align-items: center; |
22 | 18 | ||
23 | .icon.icon-upload { | 19 | .upload-icon { |
24 | @include icon(90px); | 20 | width: 90px; |
25 | margin-bottom: 25px; | 21 | margin-bottom: 25px; |
26 | cursor: default; | ||
27 | 22 | ||
28 | background-image: url('../../../../assets/images/video/upload.svg'); | 23 | @include apply-svg-color(#C6C6C6); |
24 | } | ||
25 | |||
26 | .peertube-select-container { | ||
27 | @include peertube-select-container($width-size); | ||
29 | } | 28 | } |
30 | 29 | ||
31 | input[type=text] { | 30 | input[type=text] { |
@@ -40,6 +39,16 @@ $width-size: 190px; | |||
40 | width: $width-size; | 39 | width: $width-size; |
41 | margin-top: 30px; | 40 | margin-top: 30px; |
42 | } | 41 | } |
43 | } | ||
44 | 42 | ||
43 | .button-file { | ||
44 | @include peertube-button-file(auto); | ||
45 | 45 | ||
46 | min-width: 190px; | ||
47 | } | ||
48 | |||
49 | .button-file-extension { | ||
50 | display: block; | ||
51 | font-size: 12px; | ||
52 | margin-top: 5px; | ||
53 | } | ||
54 | } | ||
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html index 826e54d25..b252cd60a 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.html | |||
@@ -1,6 +1,6 @@ | |||
1 | <div *ngIf="!isUploadingVideo" class="upload-video-container"> | 1 | <div *ngIf="!isUploadingVideo" class="upload-video-container"> |
2 | <div class="upload-video"> | 2 | <div class="first-step-block"> |
3 | <div class="icon icon-upload"></div> | 3 | <my-global-icon class="upload-icon" iconName="upload"></my-global-icon> |
4 | 4 | ||
5 | <div class="button-file"> | 5 | <div class="button-file"> |
6 | <span i18n>Select the file to upload</span> | 6 | <span i18n>Select the file to upload</span> |
@@ -61,7 +61,7 @@ | |||
61 | (click)="updateSecondStep()" | 61 | (click)="updateSecondStep()" |
62 | [ngClass]="{ disabled: isPublishingButtonDisabled() }" | 62 | [ngClass]="{ disabled: isPublishingButtonDisabled() }" |
63 | > | 63 | > |
64 | <span class="icon icon-validate"></span> | 64 | <my-global-icon iconName="validate"></my-global-icon> |
65 | <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" /> | 65 | <input [disabled]="isPublishingButtonDisabled()" type="button" i18n-value value="Publish" /> |
66 | </div> | 66 | </div> |
67 | </div> | 67 | </div> |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss index 4b2c86ae9..8adf8f169 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.scss | |||
@@ -1,47 +1,9 @@ | |||
1 | @import 'variables'; | 1 | @import 'variables'; |
2 | @import 'mixins'; | 2 | @import 'mixins'; |
3 | 3 | ||
4 | .peertube-select-container { | 4 | .first-step-block .form-group-channel { |
5 | @include peertube-select-container(190px); | 5 | margin-bottom: 20px; |
6 | } | 6 | margin-top: 35px; |
7 | |||
8 | .alert.alert-danger { | ||
9 | text-align: center; | ||
10 | |||
11 | & > div { | ||
12 | font-weight: $font-semibold; | ||
13 | } | ||
14 | } | ||
15 | |||
16 | .upload-video { | ||
17 | display: flex; | ||
18 | flex-direction: column; | ||
19 | align-items: center; | ||
20 | |||
21 | .form-group-channel { | ||
22 | margin-bottom: 20px; | ||
23 | margin-top: 35px; | ||
24 | } | ||
25 | |||
26 | .icon.icon-upload { | ||
27 | @include icon(90px); | ||
28 | margin-bottom: 25px; | ||
29 | cursor: default; | ||
30 | |||
31 | background-image: url('../../../../assets/images/video/upload.svg'); | ||
32 | } | ||
33 | |||
34 | .button-file { | ||
35 | @include peertube-button-file(auto); | ||
36 | |||
37 | min-width: 190px; | ||
38 | } | ||
39 | |||
40 | .button-file-extension { | ||
41 | display: block; | ||
42 | font-size: 12px; | ||
43 | margin-top: 5px; | ||
44 | } | ||
45 | } | 7 | } |
46 | 8 | ||
47 | .upload-progress-cancel { | 9 | .upload-progress-cancel { |
diff --git a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts index aa40f8781..e4d54b654 100644 --- a/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts +++ b/client/src/app/videos/+video-edit/video-add-components/video-upload.component.ts | |||
@@ -20,7 +20,8 @@ import { scrollToTop } from '@app/shared/misc/utils' | |||
20 | templateUrl: './video-upload.component.html', | 20 | templateUrl: './video-upload.component.html', |
21 | styleUrls: [ | 21 | styleUrls: [ |
22 | '../shared/video-edit.component.scss', | 22 | '../shared/video-edit.component.scss', |
23 | './video-upload.component.scss' | 23 | './video-upload.component.scss', |
24 | './video-send.scss' | ||
24 | ] | 25 | ] |
25 | }) | 26 | }) |
26 | export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { | 27 | export class VideoUploadComponent extends VideoSend implements OnInit, OnDestroy, CanComponentDeactivate { |
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 0457778c0..4992bb369 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html | |||
@@ -13,7 +13,7 @@ | |||
13 | 13 | ||
14 | <div class="submit-container"> | 14 | <div class="submit-container"> |
15 | <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"> | 15 | <div class="submit-button" (click)="update()" [ngClass]="{ disabled: !form.valid || isUpdatingVideo === true }"> |
16 | <span class="icon icon-validate"></span> | 16 | <my-global-icon iconName="validate"></my-global-icon> |
17 | <input type="button" i18n-value value="Update" /> | 17 | <input type="button" i18n-value value="Update" /> |
18 | </div> | 18 | </div> |
19 | </div> | 19 | </div> |