diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index e3d99501d78..811e21bc64a 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -15,79 +15,74 @@ ng-blur="ctrl.searchInputBlur()" /> -
- - - - starred - | - - - tags - - - | - - - - {{tagName}} - - - -
-
-
-
-
- - - {{tag.term}}  ({{tag.count}}) - -
-
+
+
+
+
No dashboards matching your query were found.
-
-
No dashboards matching your query were found.
+
+ + + {{::section.title}} + + + -
- - - {{::section.title}} - - - + +
+
+
-
- - - - - -
{{::item.title}}
-
- {{::item.folderTitle}} -
- - - - {{tag}} - - - -
-
-
+
+
+
+ + Filter by: + + Clear + +
-
- - Find dashboards on Grafana.com - -
-
+
+ + +
+ +
+ + + +
+
+ +
+ + Find dashboards on Grafana.com + +
+
+
diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index c7ac381c7ce..728b6a3ee18 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -9,16 +9,18 @@ export class SearchCtrl { selectedIndex: number; results: any; currentSearchId: number; - tagsMode: boolean; showImport: boolean; dismiss: any; ignoreClose: any; isLoading: boolean; + initialFolderFilterTitle: string; /** @ngInject */ constructor($scope, private $location, private $timeout, private searchSrv: SearchSrv, $rootScope) { $rootScope.onAppEvent('show-dash-search', this.openSearch.bind(this), $scope); $rootScope.onAppEvent('hide-dash-search', this.closeSearch.bind(this), $scope); + + this.initialFolderFilterTitle = "All"; } closeSearch() { @@ -44,14 +46,6 @@ export class SearchCtrl { this.query.starred = true; } - if (payload && payload.tagsMode) { - return this.$timeout(() => { - this.ignoreClose = false; - this.giveSearchFocus = this.giveSearchFocus + 1; - this.getTags(); - }, 100); - } - this.$timeout(() => { this.ignoreClose = false; this.giveSearchFocus = this.giveSearchFocus + 1; @@ -70,14 +64,6 @@ export class SearchCtrl { this.moveSelection(-1); } if (evt.keyCode === 13) { - if (this.tagsMode) { - var tag = this.results[this.selectedIndex]; - if (tag) { - this.filterByTag(tag.term, null); - } - return; - } - var selectedDash = this.results[this.selectedIndex]; if (selectedDash) { this.$location.search({}); @@ -93,7 +79,6 @@ export class SearchCtrl { } searchDashboards() { - this.tagsMode = false; this.currentSearchId = this.currentSearchId + 1; var localSearchId = this.currentSearchId; @@ -129,12 +114,8 @@ export class SearchCtrl { getTags() { return this.searchSrv.getDashboardTags().then((results) => { - this.tagsMode = !this.tagsMode; this.results = results; this.giveSearchFocus = this.giveSearchFocus + 1; - if ( !this.tagsMode ) { - this.search(); - } }); } diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index a47e8fcae48..1164f8305e0 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -180,6 +180,7 @@ $input-invalid-border-color: lighten($red, 5%); // Search $search-shadow: 0 0 35px 0 $body-bg; +$search-filter-box-bg: $gray-blue; // Dropdowns // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 61c2c34962a..f33ef4debed 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -205,6 +205,7 @@ $breadcrumb-hover-hl: #d9dadd; // search $search-shadow: 0 5px 30px 0 $gray-4; +$search-filter-box-bg: $gray-4; // Dropdowns // ------------------------- diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 2e0bc160b84..8b1805480b2 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -89,8 +89,8 @@ $font-size-root: 14px !default; $font-size-base: 13px !default; $font-size-lg: 18px !default; -$font-size-sm: 12px !default; -$font-size-xs: 10px !default; +$font-size-sm: 11px !default; +$font-size-xs: 9px !default; $line-height-base: 1.5 !default; $font-weight-semi-bold: 500; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 38baae3b6a0..16cb2873cbe 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -21,6 +21,15 @@ $input-border: 1px solid $input-border-color; &--flex-end { justify-content: flex-end; } + + &--alt { + flex-direction: column; + align-items: flex-start; + + .gf-form-label { + padding: 4px 0; + } + } } .gf-form-disabled { diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index 9b5c08839b8..240cfe80e5d 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -6,7 +6,7 @@ top: $navbarHeight; z-index: $zindex-modal-backdrop; background-color: $black; - @include opacity(70); + @include opacity(75); } .search-container { @@ -44,12 +44,6 @@ flex-grow: 1; } -.search-switches { - flex-grow: 1; - padding: 1rem 1rem 0.75rem 1rem; - white-space: nowrap; -} - .search-field-icon { font-size: $font-size-lg; padding: 1rem 1rem 0.75rem 1.5rem; @@ -57,12 +51,38 @@ .search-dropdown { display: flex; - flex-direction: column; - max-width: 800px; - background: $page-bg; + flex-direction: row; height: calc(100% - #{$navbarHeight}); } +.search-dropdown__col_1 { + background: $page-bg; + max-width: 700px; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.search-dropdown__col_2 { + flex-grow: 1; + height: 100%; + padding-top: 16px; +} + +.search-filter-box { + background: $search-filter-box-bg; + border-radius: 2px; + padding: $spacer*1.5; + max-width: 340px; + margin-bottom: $spacer * 1.5; + margin-left: $spacer * 1.5; +} + +.search-filter-box__header { + border-bottom: 1px solid $dark-5; + margin-bottom: $spacer * 1.5; +} + .search-results-container { height: 100%; display: block;