dashfolders: styling of selected filters

#10081
8 years ago · bd7837e8d7
parent 62e6fed5ce
commit bd7837e8d7
5 changed files with 112 additions and 76 deletions
--- a/public/app/core/components/manage_dashboards/manage_dashboards.html
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.html
@ -1,86 +1,104 @@
-<div class="page-action-bar" ng-hide="!ctrl.hasFilters && ctrl.sections.length === 0">
-  <label class="gf-form gf-form--grow gf-form--has-input-icon">
-    <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
-    <i class="gf-form-input-icon fa fa-search"></i>
-  </label>
-  <div class="page-action-bar__spacer"></div>
-  <a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}">
-    <i class="fa fa-plus"></i>
-    Dashboard
-  </a>
-  <a class="btn btn-success" href="/dashboards/folder/new" ng-if="!ctrl.folderId">
-    <i class="fa fa-plus"></i>
-    Folder
-  </a>
-</div>
+<div class="dashboard-list">
+  <div class="page-action-bar page-action-bar--narrow" ng-hide="!ctrl.hasFilters && ctrl.sections.length === 0">
+    <label class="gf-form gf-form--grow gf-form--has-input-icon">
+      <input type="text" class="gf-form-input max-width-30" placeholder="Find Dashboard by name" tabindex="1" give-focus="true" ng-model="ctrl.query.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.onQueryChange()" />
+      <i class="gf-form-input-icon fa fa-search"></i>
+    </label>
+    <div class="page-action-bar__spacer"></div>
+    <a class="btn btn-success" href="/dashboard/new?folderId={{ctrl.folderId}}">
+      <i class="fa fa-plus"></i>
+      Dashboard
+    </a>
+    <a class="btn btn-success" href="/dashboards/folder/new" ng-if="!ctrl.folderId">
+      <i class="fa fa-plus"></i>
+      Folder
+    </a>
+  </div>

-<div class="gf-form" ng-if="ctrl.query.tag.length">
-  Filters:
-  <span ng-repeat="tagName in ctrl.query.tag">
-      <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="label label-tag">
-      <i class="fa fa-remove"></i>
-      {{tagName}}
-      </a>
-  </span>
-</div>
+  <div class="page-action-bar page-action-bar--narrow" ng-hide="(!ctrl.hasFilters && ctrl.sections.length === 0) || !ctrl.hasFilters">
+    <div class="gf-form-inline">
+      <div class="gf-form" ng-show="ctrl.query.tag.length > 0">
+        <label class="gf-form-label width-4">
+          Tags
+        </label>
+        <div class="gf-form-input gf-form-input--plaintext" ng-show="ctrl.query.tag.length > 0">
+          <span ng-repeat="tagName in ctrl.query.tag">
+            <a ng-click="ctrl.removeTag(tagName, $event)" tag-color-from-name="tagName" class="tag label label-tag">
+              <i class="fa fa-remove"></i>&nbsp;{{tagName}}
+            </a>
+          </span>
+        </div>
+      </div>
+      <div class="gf-form" ng-show="ctrl.query.starred">
+        <label class="gf-form-label">
+          <a class="pointer" ng-click="ctrl.removeStarred()">
+            <i class="fa fa-fw fa-check"></i> Starred
+          </a>
+        </label>
+      </div>
+      <div class="gf-form">
+        <label class="gf-form-label">
+          <a class="pointer" ng-click="ctrl.clearFilters()">
+            <i class="fa fa-remove"></i>&nbsp;Clear current search query and filters
+          </a>
+        </label>
+      </div>
+    </div>
+  </div>

-<div class="gf-form">
-  <div class="gf-form-button-row" ng-show="ctrl.hasFilters">
-    <button
-      type="button"
-      class="btn gf-form-button btn-inverse btn-small"
-      ng-click="ctrl.clearFilters()">
-      <i class="fa fa-close"></i> Clear current search query and filters
-    </button>
+  <div class="search-results" ng-show="ctrl.hasFilters && ctrl.sections.length === 0">
+    <em class="muted">
+      No dashboards matching your query were found.
+    </em>
  </div>
-</div>

-<div class="dashboard-list" ng-show="ctrl.sections.length > 0">
-  <div class="search-results-filter-row">
-    <gf-form-switch
-      on-change="ctrl.onSelectAllChanged()"
-      checked="ctrl.selectAllChecked"
-      switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
-    />
-    <div class="search-results-filter-row__filters">
-      <select
-        class="search-results-filter-row__filters-item gf-form-input"
-        ng-model="ctrl.selectedStarredFilter"
-        ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
-        ng-change="ctrl.onStarredFilterChange()"
-        ng-show="!(ctrl.canMove || ctrl.canDelete)"
+  <div class="search-results" ng-show="ctrl.sections.length > 0">
+    <div class="search-results-filter-row">
+      <gf-form-switch
+        on-change="ctrl.onSelectAllChanged()"
+        checked="ctrl.selectAllChecked"
+        switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
      />
-      <select
-        class="search-results-filter-row__filters-item gf-form-input"
-        ng-model="ctrl.selectedTagFilter"
-        ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
-        ng-change="ctrl.onTagFilterChange()"
-        ng-show="!(ctrl.canMove || ctrl.canDelete)"
-      />
-      <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
-        <button	type="button"
-          class="btn gf-form-button btn-inverse"
-          ng-disabled="!ctrl.canMove"
-          ng-click="ctrl.moveTo()"
-          bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'"
-          data-placement="bottom">
-        <i class="fa fa-exchange"></i>&nbsp;&nbsp;Move
-        </button>
-        <button type="button"
-          class="btn gf-form-button btn-danger"
-          ng-click="ctrl.delete()"
-          ng-disabled="!ctrl.canDelete">
-          <i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
-        </button>
+      <div class="search-results-filter-row__filters">
+        <select
+          class="search-results-filter-row__filters-item gf-form-input"
+          ng-model="ctrl.selectedStarredFilter"
+          ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
+          ng-change="ctrl.onStarredFilterChange()"
+          ng-show="!(ctrl.canMove || ctrl.canDelete)"
+        />
+        <select
+          class="search-results-filter-row__filters-item gf-form-input"
+          ng-model="ctrl.selectedTagFilter"
+          ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
+          ng-change="ctrl.onTagFilterChange()"
+          ng-show="!(ctrl.canMove || ctrl.canDelete)"
+        />
+        <div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
+          <button	type="button"
+            class="btn gf-form-button btn-inverse"
+            ng-disabled="!ctrl.canMove"
+            ng-click="ctrl.moveTo()"
+            bs-tooltip="ctrl.canMove ? '' : 'Select a dashboard to move (cannot move folders)'"
+            data-placement="bottom">
+          <i class="fa fa-exchange"></i>&nbsp;&nbsp;Move
+          </button>
+          <button type="button"
+            class="btn gf-form-button btn-danger"
+            ng-click="ctrl.delete()"
+            ng-disabled="!ctrl.canDelete">
+            <i class="fa fa-trash"></i>&nbsp;&nbsp;Delete
+          </button>
+        </div>
      </div>
    </div>
-  </div>
-  <div class="search-results-container">
-      <dashboard-search-results
-      results="ctrl.sections"
-      editable="true"
-      on-selection-changed="ctrl.selectionChanged()"
-      on-tag-selected="ctrl.filterByTag($tag)" />
+    <div class="search-results-container">
+        <dashboard-search-results
+        results="ctrl.sections"
+        editable="true"
+        on-selection-changed="ctrl.selectionChanged()"
+        on-tag-selected="ctrl.filterByTag($tag)" />
+    </div>
  </div>
 </div>

--- a/public/app/core/components/manage_dashboards/manage_dashboards.ts
+++ b/public/app/core/components/manage_dashboards/manage_dashboards.ts
@ -231,8 +231,14 @@ export class ManageDashboardsCtrl {
    }
  }

+  removeStarred() {
+    this.query.starred = false;
+    return this.getDashboards();
+  }
+
  onStarredFilterChange() {
    this.query.starred = this.selectedStarredFilter.text === 'Yes';
+    this.selectedStarredFilter = this.starredFilterOptions[0];
    return this.getDashboards();
  }

--- a/public/sass/components/_dashboard_list.scss
+++ b/public/sass/components/_dashboard_list.scss
@ -4,6 +4,10 @@
    }
 }

+.search-results {
+    margin-top: 2rem;
+}
+
 .search-results-filter-row {
    height: 35px;
    display: flex;
--- a/public/sass/components/_gf-form.scss
+++ b/public/sass/components/_gf-form.scss
@ -221,6 +221,10 @@ $input-border: 1px solid $input-border-color;
    padding-bottom: 4px;
    font-size: $font-size-sm;
  }
+
+  &--plaintext {
+    white-space: unset;
+  }
 }

 .gf-form-hint {
--- a/public/sass/layout/_page.scss
+++ b/public/sass/layout/_page.scss
@ -55,6 +55,10 @@
  }
 }

+.page-action-bar--narrow {
+  margin-bottom: 0;
+}
+
 .page-action-bar__spacer {
  width: $spacer * 2;
  flex-grow: 1;