Add LoadingResults component.

This commit is contained in:
CJ Cenizal 2016-12-26 12:38:20 -08:00
parent ac35cdc255
commit d758fed76a
5 changed files with 82 additions and 0 deletions

View file

@ -100,6 +100,7 @@ body {
@import "icon/index";
@import "info_panel/index";
@import "link/index";
@import "loading_results/index";
@import "local_nav/index";
@import "micro_button/index";
@import "no_results/index";

View file

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

View file

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

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="kuiLoadingResults">
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

@ -13,6 +13,10 @@ export default createExample([{
title: 'ControlledTable',
html: require('./controlled_table.html'),
hasDarkTheme: false,
}, {
title: 'ControlledTable with LoadingResults',
html: require('./controlled_table_loading_results.html'),
hasDarkTheme: false,
}, {
title: 'ControlledTable with NoResults',
html: require('./controlled_table_no_results.html'),