aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/+my-library/my-video-imports/my-video-imports.component.html2
-rw-r--r--client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss5
-rw-r--r--client/src/app/+my-library/my-videos/my-videos.component.ts2
-rw-r--r--client/src/app/+search/search-filters.component.ts8
-rw-r--r--client/src/app/+videos/+video-edit/video-add-components/video-send.scss2
-rw-r--r--client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss6
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html14
-rw-r--r--client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss4
-rw-r--r--client/src/app/shared/shared-forms/markdown-textarea.component.scss1
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.html2
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.scss6
-rw-r--r--client/src/app/shared/shared-main/buttons/button.component.ts1
-rw-r--r--client/src/app/shared/shared-search/advanced-search.model.ts31
-rw-r--r--client/src/sass/include/_mixins.scss22
-rw-r--r--client/src/sass/include/_variables.scss1
-rw-r--r--client/src/sass/ng-select.scss10
16 files changed, 71 insertions, 46 deletions
diff --git a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
index c5f0db17f..79fb4da26 100644
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@@ -24,7 +24,7 @@
24 <ng-template pTemplate="body" let-expanded="expanded" let-videoImport> 24 <ng-template pTemplate="body" let-expanded="expanded" let-videoImport>
25 <tr> 25 <tr>
26 <td class="expand-cell" [pRowToggler]="videoImport"> 26 <td class="expand-cell" [pRowToggler]="videoImport">
27 <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon> 27 <my-table-expander-icon *ngIf="videoImport.error" [expanded]="expanded"></my-table-expander-icon>
28 </td> 28 </td>
29 29
30 <td class="action-cell"> 30 <td class="action-cell">
diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
index 47c323d6d..840e449ea 100644
--- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
+++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.scss
@@ -20,6 +20,11 @@ input[type=text] {
20 @include peertube-select-container(340px); 20 @include peertube-select-container(340px);
21} 21}
22 22
23my-select-channel {
24 display: block;
25 max-width: 340px;
26}
27
23input[type=submit] { 28input[type=submit] {
24 @include peertube-button; 29 @include peertube-button;
25 @include orange-button; 30 @include orange-button;
diff --git a/client/src/app/+my-library/my-videos/my-videos.component.ts b/client/src/app/+my-library/my-videos/my-videos.component.ts
index c8012ec78..2f1eb84ba 100644
--- a/client/src/app/+my-library/my-videos/my-videos.component.ts
+++ b/client/src/app/+my-library/my-videos/my-videos.component.ts
@@ -67,7 +67,7 @@ export class MyVideosComponent implements OnInit, DisableForReuseHook {
67 67
68 user: User 68 user: User
69 69
70 inputFilters: AdvancedInputFilter[] 70 inputFilters: AdvancedInputFilter[] = []
71 71
72 disabled = false 72 disabled = false
73 73
diff --git a/client/src/app/+search/search-filters.component.ts b/client/src/app/+search/search-filters.component.ts
index aaa4ecc5a..f9de04706 100644
--- a/client/src/app/+search/search-filters.component.ts
+++ b/client/src/app/+search/search-filters.component.ts
@@ -138,11 +138,11 @@ export class SearchFiltersComponent implements OnInit {
138 private loadOriginallyPublishedAtYears () { 138 private loadOriginallyPublishedAtYears () {
139 this.originallyPublishedStartYear = this.advancedSearch.originallyPublishedStartDate 139 this.originallyPublishedStartYear = this.advancedSearch.originallyPublishedStartDate
140 ? new Date(this.advancedSearch.originallyPublishedStartDate).getFullYear().toString() 140 ? new Date(this.advancedSearch.originallyPublishedStartDate).getFullYear().toString()
141 : null 141 : undefined
142 142
143 this.originallyPublishedEndYear = this.advancedSearch.originallyPublishedEndDate 143 this.originallyPublishedEndYear = this.advancedSearch.originallyPublishedEndDate
144 ? new Date(this.advancedSearch.originallyPublishedEndDate).getFullYear().toString() 144 ? new Date(this.advancedSearch.originallyPublishedEndDate).getFullYear().toString()
145 : null 145 : undefined
146 } 146 }
147 147
148 private loadFromDurationRange () { 148 private loadFromDurationRange () {
@@ -189,7 +189,7 @@ export class SearchFiltersComponent implements OnInit {
189 189
190 this.advancedSearch.originallyPublishedStartDate = start.toISOString() 190 this.advancedSearch.originallyPublishedStartDate = start.toISOString()
191 } else { 191 } else {
192 this.advancedSearch.originallyPublishedStartDate = null 192 this.advancedSearch.originallyPublishedStartDate = undefined
193 } 193 }
194 194
195 if (this.originallyPublishedEndYear) { 195 if (this.originallyPublishedEndYear) {
@@ -199,7 +199,7 @@ export class SearchFiltersComponent implements OnInit {
199 199
200 this.advancedSearch.originallyPublishedEndDate = end.toISOString() 200 this.advancedSearch.originallyPublishedEndDate = end.toISOString()
201 } else { 201 } else {
202 this.advancedSearch.originallyPublishedEndDate = null 202 this.advancedSearch.originallyPublishedEndDate = undefined
203 } 203 }
204 } 204 }
205 205
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
index 7284ad00f..594999d66 100644
--- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
+++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss
@@ -17,7 +17,7 @@ $width-size: 250px;
17 align-items: center; 17 align-items: center;
18 18
19 .upload-icon { 19 .upload-icon {
20 @include apply-svg-color(#C6C6C6); 20 @include apply-svg-color($input-border-color);
21 21
22 width: 90px; 22 width: 90px;
23 margin-bottom: 25px; 23 margin-bottom: 25px;
diff --git a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
index 23e705507..023d625e9 100644
--- a/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
+++ b/client/src/app/+videos/+video-watch/shared/comment/video-comment-add.component.scss
@@ -56,8 +56,8 @@ form {
56 width: $markdown-icon-width; 56 width: $markdown-icon-width;
57 57
58 svg { 58 svg {
59 color: #C6C6C6; 59 color: $input-border-color;
60 fill: #C6C6C6; 60 fill: $input-border-color;
61 border-radius: 3px; 61 border-radius: 3px;
62 } 62 }
63 } 63 }
@@ -66,7 +66,7 @@ form {
66 &:active, 66 &:active,
67 &:hover { 67 &:hover {
68 my-global-icon svg { 68 my-global-icon svg {
69 background-color: #C6C6C6; 69 background-color: $input-border-color;
70 color: pvar(--mainBackgroundColor); 70 color: pvar(--mainBackgroundColor);
71 fill: pvar(--mainBackgroundColor); 71 fill: pvar(--mainBackgroundColor);
72 } 72 }
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
index 266fc26c5..f675371d9 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
@@ -5,9 +5,7 @@
5 </div> 5 </div>
6 6
7 <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body"> 7 <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
8 <my-global-icon iconName="upload"></my-global-icon> 8 <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
9 <label for="bannerfile" i18n>Upload a new banner</label>
10 <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
11 </div> 9 </div>
12 10
13 <div 11 <div
@@ -22,9 +20,7 @@
22 20
23<ng-template #bannerEditContent> 21<ng-template #bannerEditContent>
24 <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body"> 22 <div class="dropdown-item c-hand" [ngbTooltip]="bannerFormat" placement="right" container="body">
25 <my-global-icon iconName="upload"></my-global-icon> 23 <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
26 <span for="bannerfile" i18n>Upload a new banner</span>
27 <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
28 </div> 24 </div>
29 25
30 <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()"> 26 <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
@@ -32,3 +28,9 @@
32 <span i18n>Remove banner</span> 28 <span i18n>Remove banner</span>
33 </div> 29 </div>
34</ng-template> 30</ng-template>
31
32<ng-template #uploadNewBanner>
33 <my-global-icon iconName="upload"></my-global-icon>
34 <span for="bannerfile" i18n>Upload a new banner</span>
35 <input #bannerfileInput type="file" name="bannerfile" id="bannerfile" [accept]="bannerExtensions" (change)="onBannerChange(bannerfileInput)"/>
36</ng-template>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index ec2de2528..90fcd81aa 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -25,3 +25,7 @@
25 margin-bottom: 0; 25 margin-bottom: 0;
26 } 26 }
27} 27}
28
29my-global-icon {
30 margin: 0 5px;
31}
diff --git a/client/src/app/shared/shared-forms/markdown-textarea.component.scss b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
index 0b4872d46..5939bb999 100644
--- a/client/src/app/shared/shared-forms/markdown-textarea.component.scss
+++ b/client/src/app/shared/shared-forms/markdown-textarea.component.scss
@@ -4,7 +4,6 @@
4 4
5$nav-preview-tab-height: 30px; 5$nav-preview-tab-height: 30px;
6$base-padding: 15px; 6$base-padding: 15px;
7$input-border-color: #C6C6C6;
8$input-border-radius: 3px; 7$input-border-radius: 3px;
9 8
10@mixin in-small-view { 9@mixin in-small-view {
diff --git a/client/src/app/shared/shared-main/buttons/button.component.html b/client/src/app/shared/shared-main/buttons/button.component.html
index 11c8ffedd..d1a4215e6 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.html
+++ b/client/src/app/shared/shared-main/buttons/button.component.html
@@ -1,6 +1,6 @@
1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0"> 1<span class="action-button" [ngClass]="getClasses()" [ngbTooltip]="title" tabindex="0">
2 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
3 <my-small-loader [loading]="loading"></my-small-loader> 2 <my-small-loader [loading]="loading"></my-small-loader>
3 <my-global-icon *ngIf="icon && !loading" [iconName]="icon"></my-global-icon>
4 4
5 <span *ngIf="label" class="button-label">{{ label }}</span> 5 <span *ngIf="label" class="button-label">{{ label }}</span>
6 6
diff --git a/client/src/app/shared/shared-main/buttons/button.component.scss b/client/src/app/shared/shared-main/buttons/button.component.scss
index c782ac3ef..c53b8f2e5 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.scss
+++ b/client/src/app/shared/shared-main/buttons/button.component.scss
@@ -34,6 +34,12 @@ span[class$=-button] {
34 @include button-with-icon(21px); 34 @include button-with-icon(21px);
35 35
36 width: 100%; // useful for ellipsis, allow to define a max-width on host component 36 width: 100%; // useful for ellipsis, allow to define a max-width on host component
37
38 &.icon-only {
39 my-global-icon {
40 margin: 0;
41 }
42 }
37} 43}
38 44
39.orange-button { 45.orange-button {
diff --git a/client/src/app/shared/shared-main/buttons/button.component.ts b/client/src/app/shared/shared-main/buttons/button.component.ts
index b97012d9a..52936a4d4 100644
--- a/client/src/app/shared/shared-main/buttons/button.component.ts
+++ b/client/src/app/shared/shared-main/buttons/button.component.ts
@@ -20,6 +20,7 @@ export class ButtonComponent {
20 return { 20 return {
21 [this.className]: true, 21 [this.className]: true,
22 disabled: this.disabled, 22 disabled: this.disabled,
23 'icon-only': !this.label,
23 'responsive-label': this.responsiveLabel 24 'responsive-label': this.responsiveLabel
24 } 25 }
25 } 26 }
diff --git a/client/src/app/shared/shared-search/advanced-search.model.ts b/client/src/app/shared/shared-search/advanced-search.model.ts
index e40fd2e66..1375820da 100644
--- a/client/src/app/shared/shared-search/advanced-search.model.ts
+++ b/client/src/app/shared/shared-search/advanced-search.model.ts
@@ -40,9 +40,6 @@ export class AdvancedSearch {
40 searchTarget: SearchTargetType 40 searchTarget: SearchTargetType
41 resultType: AdvancedSearchResultType 41 resultType: AdvancedSearchResultType
42 42
43 // Filters we don't want to count, because they are mandatory
44 private silentFilters = new Set([ 'sort', 'searchTarget' ])
45
46 constructor (options?: { 43 constructor (options?: {
47 startDate?: string 44 startDate?: string
48 endDate?: string 45 endDate?: string
@@ -101,14 +98,7 @@ export class AdvancedSearch {
101 } 98 }
102 99
103 containsValues () { 100 containsValues () {
104 const obj = this.toUrlObject() 101 return this.size() !== 0
105 for (const k of Object.keys(obj)) {
106 if (this.silentFilters.has(k)) continue
107
108 if (this.isValidValue(obj[k])) return true
109 }
110
111 return false
112 } 102 }
113 103
114 reset () { 104 reset () {
@@ -193,12 +183,19 @@ export class AdvancedSearch {
193 size () { 183 size () {
194 let acc = 0 184 let acc = 0
195 185
196 const obj = this.toUrlObject() 186 if (this.isValidValue(this.startDate) || this.isValidValue(this.endDate)) acc++
197 for (const k of Object.keys(obj)) { 187 if (this.isValidValue(this.originallyPublishedStartDate) || this.isValidValue(this.originallyPublishedEndDate)) acc++
198 if (this.silentFilters.has(k)) continue 188
199 189 if (this.isValidValue(this.nsfw)) acc++
200 if (this.isValidValue(obj[k])) acc++ 190 if (this.isValidValue(this.categoryOneOf)) acc++
201 } 191 if (this.isValidValue(this.licenceOneOf)) acc++
192 if (this.isValidValue(this.languageOneOf)) acc++
193 if (this.isValidValue(this.tagsOneOf)) acc++
194 if (this.isValidValue(this.tagsAllOf)) acc++
195 if (this.isValidValue(this.durationMin) || this.isValidValue(this.durationMax)) acc++
196 if (this.isValidValue(this.isLive)) acc++
197 if (this.isValidValue(this.host)) acc++
198 if (this.isValidValue(this.resultType)) acc++
202 199
203 return acc 200 return acc
204 } 201 }
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 8545824e3..26f5a149a 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -92,7 +92,7 @@
92 max-width: $width; 92 max-width: $width;
93 color: pvar(--inputForegroundColor); 93 color: pvar(--inputForegroundColor);
94 background-color: pvar(--inputBackgroundColor); 94 background-color: pvar(--inputBackgroundColor);
95 border: 1px solid #C6C6C6; 95 border: 1px solid $input-border-color;
96 border-radius: 3px; 96 border-radius: 3px;
97 font-size: 15px; 97 font-size: 15px;
98 98
@@ -138,7 +138,7 @@
138 &.disabled { 138 &.disabled {
139 cursor: default; 139 cursor: default;
140 color: #fff; 140 color: #fff;
141 background-color: #C6C6C6; 141 background-color: $input-border-color;
142 } 142 }
143 143
144 my-global-icon { 144 my-global-icon {
@@ -168,7 +168,7 @@
168 &.disabled { 168 &.disabled {
169 cursor: default; 169 cursor: default;
170 color: pvar(--mainColor); 170 color: pvar(--mainColor);
171 background-color: #C6C6C6; 171 background-color: $input-border-color;
172 } 172 }
173 173
174 my-global-icon { 174 my-global-icon {
@@ -385,10 +385,9 @@
385 select { 385 select {
386 padding: 0 35px 0 12px; 386 padding: 0 35px 0 12px;
387 position: relative; 387 position: relative;
388 border: 1px solid #C6C6C6; 388 border: 1px solid $input-border-color;
389 background: transparent none; 389 background: transparent none;
390 appearance: none; 390 appearance: none;
391 cursor: pointer;
392 height: $button-height; 391 height: $button-height;
393 text-overflow: ellipsis; 392 text-overflow: ellipsis;
394 color: pvar(--mainForegroundColor); 393 color: pvar(--mainForegroundColor);
@@ -404,14 +403,17 @@
404 403
405 option { 404 option {
406 color: #000; 405 color: #000;
406
407 &[value=undefined] {
408 font-weight: $font-semibold;
409 }
407 } 410 }
408 } 411 }
409 412
410 &.peertube-select-button { 413 &.peertube-select-button {
411 @include grey-button; 414 @include grey-button;
412 415
413 select, 416 select {
414 option {
415 font-weight: $font-semibold; 417 font-weight: $font-semibold;
416 color: pvar(--greyForegroundColor); 418 color: pvar(--greyForegroundColor);
417 border: 0; 419 border: 0;
@@ -446,7 +448,7 @@
446 top: 0; 448 top: 0;
447 width: 18px; 449 width: 18px;
448 height: 18px; 450 height: 18px;
449 border: 1px solid #C6C6C6; 451 border: 1px solid $input-border-color;
450 border-radius: 100%; 452 border-radius: 100%;
451 background: #fff; 453 background: #fff;
452 } 454 }
@@ -493,7 +495,7 @@
493 width: 18px; 495 width: 18px;
494 min-width: 18px; 496 min-width: 18px;
495 height: 18px; 497 height: 18px;
496 border: $border-width solid #C6C6C6; 498 border: $border-width solid $input-border-color;
497 border-radius: 3px; 499 border-radius: 3px;
498 vertical-align: middle; 500 vertical-align: middle;
499 cursor: pointer; 501 cursor: pointer;
@@ -612,7 +614,7 @@
612 margin-bottom: 20px; 614 margin-bottom: 20px;
613 615
614 @if $separator { 616 @if $separator {
615 border-bottom: 1px solid #C6C6C6; 617 border-bottom: 1px solid $input-border-color;
616 } 618 }
617 619
618 @media screen and (max-width: $small-view) { 620 @media screen and (max-width: $small-view) {
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 41ae60290..884e7b5d0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -85,6 +85,7 @@ $theater-bottom-space: 115px;
85$input-foreground-color: $fg-color; 85$input-foreground-color: $fg-color;
86$input-background-color: $bg-color; 86$input-background-color: $bg-color;
87$input-placeholder-color: #898989; 87$input-placeholder-color: #898989;
88$input-border-color: #C6C6C6;
88 89
89$textarea-foreground-color: $fg-color; 90$textarea-foreground-color: $fg-color;
90$textarea-background-color: $bg-color; 91$textarea-background-color: $bg-color;
diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss
index 97e61e068..b1b82b573 100644
--- a/client/src/sass/ng-select.scss
+++ b/client/src/sass/ng-select.scss
@@ -4,7 +4,7 @@
4$ng-select-highlight: #f2690d; 4$ng-select-highlight: #f2690d;
5// $ng-select-primary-text: #333 !default; 5// $ng-select-primary-text: #333 !default;
6// $ng-select-disabled-text: #f9f9f9 !default; 6// $ng-select-disabled-text: #f9f9f9 !default;
7// $ng-select-border: #ccc !default; 7$ng-select-border: $input-border-color;
8// $ng-select-border-radius: 4px !default; 8// $ng-select-border-radius: 4px !default;
9// $ng-select-bg: #ffffff !default; 9// $ng-select-bg: #ffffff !default;
10// $ng-select-selected: lighten($ng-select-highlight, 46) !default; 10// $ng-select-selected: lighten($ng-select-highlight, 46) !default;
@@ -46,6 +46,14 @@ $ng-select-value-font-size: 15px;
46 @include padding-right(12px); 46 @include padding-right(12px);
47 } 47 }
48 48
49 .ng-arrow {
50 border-color: #000 transparent transparent !important;
51 }
52
53 &.ng-select-opened .ng-arrow {
54 border-color: transparent transparent #000 !important;
55 }
56
49 &.ng-select-single .ng-value-container .ng-value { 57 &.ng-select-single .ng-value-container .ng-value {
50 color: pvar(--inputForegroundColor); 58 color: pvar(--inputForegroundColor);
51 59