Add LoadingResults component. (#9661)

Backports PR #9647

**Commit 1:**
Add LoadingResults component.

* Original sha: d758fed76a
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-26T20:38:20Z

**Commit 2:**
Rename NoResults and LoadingResults to NoItems and LoadingItems.

* Original sha: ad390b01e9
* Authored by CJ Cenizal <cj@cenizal.com> on 2016-12-27T00:08:09Z
This commit is contained in:
jasper 2016-12-27 15:29:22 -05:00 committed by CJ Cenizal
parent ffb1347f23
commit 3571cde290
10 changed files with 89 additions and 7 deletions

View file

@ -106,7 +106,7 @@
<!-- NoResults -->
<div class="kuiPanel kuiPanel--centered" ng-if="!service.data.length">
<div class="kuiNoResults">
<div class="kuiNoItems">
No {{service.title}} matched your search.
</div>
</div>

View file

@ -107,9 +107,10 @@ body {
@import "icon/index";
@import "info_panel/index";
@import "link/index";
@import "loading_items/index";
@import "local_nav/index";
@import "micro_button/index";
@import "no_results/index";
@import "no_items/index";
@import "panel/index";
@import "table/index";
@import "tabs/index";

View file

@ -0,0 +1 @@
@import "loading_items";

View file

@ -0,0 +1,6 @@
.kuiLoadingItems {
padding: 30px;
font-size: 18px;
color: $subduedFontColor;
line-height: $lineHeight;
}

View file

@ -0,0 +1 @@
@import "no_items";

View file

@ -1,4 +1,4 @@
.kuiNoResults {
.kuiNoItems {
padding: 30px;
font-size: 18px;
color: $subduedFontColor;

View file

@ -1 +0,0 @@
@import "no_results";

View file

@ -0,0 +1,70 @@
<div class="kuiControlledTable">
<!-- ToolBar -->
<div class="kuiToolBar">
<div class="kuiToolBarSearch">
<div class="kuiToolBarSearchBox">
<div class="kuiToolBarSearchBox__icon kuiIcon fa-search"></div>
<input
class="kuiToolBarSearchBox__input"
type="text"
placeholder="Search..."
>
</div>
</div>
<div class="kuiToolBarSection">
<button class="kuiButton kuiButton--primary">
Add
</button>
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-gear"></span>
</button>
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-bars"></span>
</button>
</div>
<div class="kuiToolBarSection">
<div class="kuiToolBarText">
0 of 33
</div>
<div class="kuiButtonGroup kuiButtonGroup--united">
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
</button>
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
</button>
</div>
</div>
</div>
<!-- LoadingResults -->
<div class="kuiPanel kuiPanel--centered">
<div class="kuiLoadingItems">
Loading&hellip;
</div>
</div>
<!-- ToolBarFooter -->
<div class="kuiToolBarFooter">
<div class="kuiToolBarFooterSection">
<div class="kuiToolBarText">
0 of 33
</div>
<div class="kuiButtonGroup kuiButtonGroup--united">
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-chevron-left"></span>
</button>
<button class="kuiButton kuiButton--basic kuiButton--icon">
<span class="kuiButton__icon kuiIcon fa-chevron-right"></span>
</button>
</div>
</div>
</div>
</div>

View file

@ -44,7 +44,7 @@
<!-- NoResults -->
<div class="kuiPanel kuiPanel--centered">
<div class="kuiNoResults">
<div class="kuiNoItems">
No Items matched your search.
</div>
</div>

View file

@ -14,7 +14,11 @@ export default createExample([{
html: require('./controlled_table.html'),
hasDarkTheme: false,
}, {
title: 'ControlledTable with NoResults',
html: require('./controlled_table_no_results.html'),
title: 'ControlledTable with LoadingItems',
html: require('./controlled_table_loading_items.html'),
hasDarkTheme: false,
}, {
title: 'ControlledTable with NoItems',
html: require('./controlled_table_no_items.html'),
hasDarkTheme: false,
}]);