diff --git a/client/src/app/search/advanced-search.model.ts b/client/src/app/search/advanced-search.model.ts index e2a0253f4..50f00bc27 100644 --- a/client/src/app/search/advanced-search.model.ts +++ b/client/src/app/search/advanced-search.model.ts @@ -65,7 +65,7 @@ export class AdvancedSearch { for (const k of Object.keys(obj)) { if (k === 'sort') continue // Exception - if (obj[k] !== undefined) return true + if (obj[k] !== undefined && obj[k] !== '') return true } return false @@ -131,7 +131,7 @@ export class AdvancedSearch { for (const k of Object.keys(obj)) { if (k === 'sort') continue // Exception - if (obj[k] !== undefined) acc++ + if (obj[k] !== undefined && obj[k] !== '') acc++ } return acc diff --git a/client/src/app/search/search-filters.component.html b/client/src/app/search/search-filters.component.html index 8220a990b..07fb2c048 100644 --- a/client/src/app/search/search-filters.component.html +++ b/client/src/app/search/search-filters.component.html @@ -3,7 +3,12 @@
-
Sort
+
+ + +
@@ -12,20 +17,32 @@
-
Published date
+
+ + +
- +
- +
+ + +
-
Duration
+
+ + +
- +
-
Display sensitive content
+
+ + +
@@ -69,9 +98,12 @@
+
@@ -79,9 +111,12 @@
+
@@ -89,9 +124,12 @@
+
@@ -101,17 +139,37 @@
- + +
- + +
+ +
diff --git a/client/src/app/search/search-filters.component.scss b/client/src/app/search/search-filters.component.scss index cfc48fbef..99af2e4c5 100644 --- a/client/src/app/search/search-filters.component.scss +++ b/client/src/app/search/search-filters.component.scss @@ -19,6 +19,8 @@ form { .peertube-select-container { @include peertube-select-container(auto); + + margin-bottom: 1rem; } .form-group { @@ -37,4 +39,92 @@ input[type=submit] { .submit-button { text-align: right; -} \ No newline at end of file +} + +.reset-button { + @include peertube-button; + + font-weight: $font-semibold; + display: inline-block; + padding: 0 10px 0 10px; + white-space: nowrap; + background: transparent; + + margin-right: 1rem; +} + +.reset-button-small { + font-size: 80%; + height: unset; + line-height: unset; + margin: unset; + margin-bottom: 0.5rem; +} + +.label-container { + display: flex; + white-space: nowrap; +} + +::ng-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; + height: max-content; + } + + tag-input-form { + input { + height: 30px !important; + font-size: 12px !important; + + background-color: var(--mainBackgroundColor) !important; + color: var(--mainForegroundColor) !important; + } + } + + tag { + background-color: $grey-background-color !important; + color: #000 !important; + border-radius: 3px !important; + font-size: 12px !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 { + position: relative; + top: -1px; + height: auto !important; + vertical-align: middle !important; + + path { + fill: $grey-foreground-color !important; + } + } + + &:hover { + transform: none !important; + } + } +} diff --git a/client/src/app/search/search-filters.component.ts b/client/src/app/search/search-filters.component.ts index 14a05b721..b64c965b1 100644 --- a/client/src/app/search/search-filters.component.ts +++ b/client/src/app/search/search-filters.component.ts @@ -1,4 +1,6 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' +import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core' +import { ValidatorFn } from '@angular/forms' +import { VideoValidatorsService } from '@app/shared' import { ServerService } from '@app/core' import { I18n } from '@ngx-translate/i18n-polyfill' import { AdvancedSearch } from '@app/search/advanced-search.model' @@ -18,6 +20,9 @@ export class SearchFiltersComponent implements OnInit { videoLicences: VideoConstant[] = [] videoLanguages: VideoConstant[] = [] + tagValidators: ValidatorFn[] + tagValidatorsMessages: { [ name: string ]: string } + publishedDateRanges: { id: string, label: string }[] = [] sorts: { id: string, label: string }[] = [] durationRanges: { id: string, label: string }[] = [] @@ -30,9 +35,16 @@ export class SearchFiltersComponent implements OnInit { constructor ( private i18n: I18n, + private videoValidatorsService: VideoValidatorsService, private serverService: ServerService ) { + this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS + this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES this.publishedDateRanges = [ + { + id: undefined, + label: this.i18n('Any') + }, { id: 'today', label: this.i18n('Today') @@ -52,6 +64,10 @@ export class SearchFiltersComponent implements OnInit { ] this.durationRanges = [ + { + id: undefined, + label: this.i18n('Any') + }, { id: 'short', label: this.i18n('Short (< 4 min)') @@ -92,11 +108,14 @@ export class SearchFiltersComponent implements OnInit { this.loadOriginallyPublishedAtYears() } - formUpdated () { + inputUpdated () { this.updateModelFromDurationRange() this.updateModelFromPublishedRange() this.updateModelFromOriginallyPublishedAtYears() + } + formUpdated () { + this.inputUpdated() this.filtered.emit(this.advancedSearch) } @@ -216,4 +235,26 @@ export class SearchFiltersComponent implements OnInit { this.advancedSearch.startDate = date.toISOString() } + private reset () { + this.advancedSearch.reset() + this.durationRange = undefined + this.publishedDateRange = undefined + this.originallyPublishedStartYear = undefined + this.originallyPublishedEndYear = undefined + this.inputUpdated() + } + + private resetField (fieldName: string, value?: any) { + this.advancedSearch[fieldName] = value + } + + private resetLocalField (fieldName: string, value?: any) { + this[fieldName] = value + this.inputUpdated() + } + + private resetOriginalPublicationYears () { + this.originallyPublishedStartYear = this.originallyPublishedEndYear = undefined + } + } diff --git a/client/src/app/search/search.module.ts b/client/src/app/search/search.module.ts index 8b791621e..3b0fd6ee2 100644 --- a/client/src/app/search/search.module.ts +++ b/client/src/app/search/search.module.ts @@ -1,4 +1,5 @@ import { NgModule } from '@angular/core' +import { TagInputModule } from 'ngx-chips' import { SharedModule } from '../shared' import { SearchComponent } from '@app/search/search.component' import { SearchService } from '@app/search/search.service' @@ -7,6 +8,8 @@ import { SearchFiltersComponent } from '@app/search/search-filters.component' @NgModule({ imports: [ + TagInputModule, + SearchRoutingModule, SharedModule ], @@ -17,6 +20,7 @@ import { SearchFiltersComponent } from '@app/search/search-filters.component' ], exports: [ + TagInputModule, SearchComponent ], 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 9479c588a..3d57e9152 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 @@ -150,12 +150,13 @@ p-calendar { border: 1px solid #C6C6C6; border-radius: 3px; padding: 5px !important; - height: 40px; + height: max-content; } tag-input-form { input { height: 30px !important; + font-size: 12px !important; background-color: var(--mainBackgroundColor) !important; color: var(--mainForegroundColor) !important; @@ -166,7 +167,7 @@ p-calendar { background-color: $grey-background-color !important; color: #000 !important; border-radius: 3px !important; - font-size: 15px !important; + font-size: 12px !important; height: 30px !important; line-height: 30px !important; margin: 0 5px 0 0 !important; diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 56126d41f..4a1780b3f 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -205,6 +205,7 @@ $play-overlay-width: 18px; color: $grey-foreground-color; margin-bottom: 10px; font-weight: $font-semibold; + text-decoration: none; } @media screen and (max-width: $mobile-view) {