Adding table_info component (elastic#11778)

* Adding loading-results component * Adding example usage on testbed * Fixing module name * Adding kuiControlledTable container * Replacing kuiNoItems and kuiLoadingResults with kuiTableInfo * Making directive compositional * Fixing imports * Re-generating fixed CSS
snide · May 30, 2017 · 1b4a4dc · 1b4a4dc
1 parent 5bfd957
commit 1b4a4dc
Show file tree

Hide file tree

Showing 19 changed files with 54 additions and 45 deletions.
diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html
@@ -86,7 +86,7 @@
     ].includes(contextApp.state.loadingStatus.anchor)"
     class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
   >
-    <div class="kuiLoadingItems">
+    <div class="kuiTableInfo">
       Loading&hellip;
     </div>
   </div>

diff --git a/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html b/src/core_plugins/kibana/public/dashboard/listing/dashboard_listing.html
@@ -78,12 +78,12 @@
       </div>
     </div>
 
-    <!-- NoItems -->
+    <!-- TableInfo -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
       ng-if="!listingController.items.length && listingController.filter"
     >
-      <div class="kuiNoItems">
+      <div class="kuiTableInfo">
         No dashboards matched your search.
       </div>
     </div>

diff --git a/src/core_plugins/kibana/public/doc/index.html b/src/core_plugins/kibana/public/doc/index.html
@@ -60,7 +60,7 @@
     <!-- loading -->
     <div class="kuiViewContentItem" ng-if="status === undefined">
       <div class="kuiPanel kuiPanel--centered">
-        <div class="kuiLoadingItems">
+        <div class="kuiTableInfo">
           Loading&hellip;
         </div>
       </div>

diff --git a/src/core_plugins/kibana/public/management/sections/objects/_objects.html b/src/core_plugins/kibana/public/management/sections/objects/_objects.html
@@ -117,7 +117,7 @@ <h1 class="kuiTitle">
         class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
         ng-if="!service.data.length"
       >
-        <div class="kuiNoItems">
+        <div class="kuiTableInfo">
           No {{service.title}} matched your search.
         </div>
       </div>

diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
@@ -65,12 +65,12 @@
       </div>
     </div>
 
-    <!-- NoItems -->
+    <!-- TableInfo -->
     <div
       class="kuiPanel kuiPanel--centered kuiPanel--withHeader"
       ng-if="!listingController.items.length && listingController.filter"
     >
-      <div class="kuiNoItems">
+      <div class="kuiTableInfo">
         No visualizations matched your search.
       </div>
     </div>

diff --git a/src/core_plugins/testbed/public/testbed.html b/src/core_plugins/testbed/public/testbed.html
@@ -5,6 +5,12 @@
     you need to demonstate your functionality. Nothing need be preserved. -->
     <!-- CONTENT START -->
 
+    <div class="kuiControlledTable">
+      <table-info>
+        Loading all the things&hellip;
+      </table-info>
+    </div>
+
     <!-- CONTENT END -->
 
   </div>

diff --git a/src/core_plugins/testbed/public/testbed.js b/src/core_plugins/testbed/public/testbed.js
@@ -2,6 +2,8 @@ import uiRoutes from 'ui/routes';
 import template from './testbed.html';
 import './testbed.less';
 
+import 'ui/table_info';
+
 uiRoutes.when('/testbed', {
   template: template,
   controllerAs: 'testbed',

diff --git a/src/ui/public/table_info/index.js b/src/ui/public/table_info/index.js
@@ -0,0 +1 @@
+import './table_info';
diff --git a/src/ui/public/table_info/table_info.html b/src/ui/public/table_info/table_info.html
@@ -0,0 +1,6 @@
+<div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
+  <div
+    class="kuiTableInfo"
+    ng-transclude
+  ></div>
+</div>
diff --git a/src/ui/public/table_info/table_info.js b/src/ui/public/table_info/table_info.js
@@ -0,0 +1,17 @@
+import { uiModules } from 'ui/modules';
+import template from './table_info.html';
+
+const app = uiModules.get('kibana');
+
+app.directive('tableInfo', function () {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: template,
+    transclude: true,
+    controllerAs: 'tableInfo',
+    bindToController: true,
+    controller: class TableInfoController {
+    }
+  };
+});
diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss
@@ -35,18 +35,17 @@
 @import "icon/index";
 @import "info_panel/index";
 @import "link/index";
-@import "loading_items/index";
 @import "local_nav/index";
 @import "menu/index";
 @import "menu_button/index";
 @import "micro_button/index";
 @import "modal/index";
-@import "no_items/index";
 @import "notice/index";
 @import "panel/index";
 @import "prompt_for_items/index";
 @import "status_text/index";
 @import "table/index";
+@import "table_info/index";
 @import "tabs/index";
 @import "toggle_button/index";
 @import "tool_bar/index";

diff --git a/ui_framework/components/loading_items/_index.scss b/ui_framework/components/loading_items/_index.scss
diff --git a/ui_framework/components/loading_items/_loading_items.scss b/ui_framework/components/loading_items/_loading_items.scss
diff --git a/ui_framework/components/no_items/_index.scss b/ui_framework/components/no_items/_index.scss
diff --git a/ui_framework/components/table_info/_index.scss b/ui_framework/components/table_info/_index.scss
@@ -0,0 +1 @@
+@import "table_info";
diff --git a/...mework/components/no_items/_no_items.scss → ...rk/components/table_info/_table_info.scss b/...mework/components/no_items/_no_items.scss → ...rk/components/table_info/_table_info.scss
@@ -1,4 +1,4 @@
-.kuiNoItems {
+.kuiTableInfo {
   padding: 30px;
   font-size: $globalTitleFontSize;
   color: $globalSubduedTextColor;

diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
@@ -781,7 +781,6 @@ body {
   /* 2 */
   font-size: 10px !important;
   /* 2 */
-  -webkit-transition: background-color 0.1s linear;
   transition: background-color 0.1s linear; }
   .kuiCheckBox:before {
     position: relative;
@@ -791,7 +790,6 @@ body {
     font-size: 1em;
     opacity: 0;
     color: #FFF;
-    -webkit-transition: opacity 0.1s linear;
     transition: opacity 0.1s linear; }
   .kuiCheckBox:checked {
     border-color: #0096CC;
@@ -865,7 +863,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -907,7 +904,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -981,7 +977,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -1022,7 +1017,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -1228,12 +1222,12 @@ body {
 .kuiInfoButton {
   font-size: 16px;
   background-color: transparent;
-  color: #3CAED2;
+  color: #0096CC;
   cursor: pointer;
   border: none;
   padding: 0; }
   .kuiInfoButton:hover, .kuiInfoButton:active {
-    color: #105A73; }
+    color: #007199; }
 
 /**
  * 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
@@ -1352,12 +1346,6 @@ body {
     .theme-dark .kuiLink:hover {
       color: #b7e2ea; }
 
-.kuiLoadingItems {
-  padding: 30px;
-  font-size: 18px;
-  color: #666;
-  line-height: 1.5; }
-
 /**
  * 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
  *    a bit.
@@ -1844,7 +1832,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -1926,7 +1913,6 @@ body {
   background-color: #ffffff;
   border: 1px solid #DEDEDE;
   border-radius: 4px;
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear;
   /**
    * 1. Angular will add an ng-untouched class to an input if it hasn't been touched yet.
@@ -2292,12 +2278,6 @@ body {
   .kuiModalFooter > * + * {
     margin-left: 5px; }
 
-.kuiNoItems {
-  padding: 30px;
-  font-size: 18px;
-  color: #666;
-  line-height: 1.5; }
-
 .kuiNotice {
   padding: 40px 60px 48px;
   margin: 20px;
@@ -2636,6 +2616,12 @@ body {
     overflow: visible;
     /* 3 */ }
 
+.kuiTableInfo {
+  padding: 30px;
+  font-size: 18px;
+  color: #666;
+  line-height: 1.5; }
+
 .kuiTabs {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2980,7 +2966,6 @@ body {
   border: 1px solid #D9D9D9;
   line-height: normal;
   /* 1 */
-  -webkit-transition: border-color 0.1s linear;
   transition: border-color 0.1s linear; }
   .kuiToolBarSearchBox__input:focus {
     outline: none;

diff --git a/ui_framework/doc_site/src/views/table/controlled_table_loading_items.html b/ui_framework/doc_site/src/views/table/controlled_table_loading_items.html
@@ -42,9 +42,9 @@
     </div>
   </div>
 
-  <!-- LoadingResults -->
+  <!-- TableInfo -->
   <div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
-    <div class="kuiLoadingItems">
+    <div class="kuiTableInfo">
       Loading&hellip;
     </div>
   </div>

diff --git a/ui_framework/doc_site/src/views/table/controlled_table_no_items.html b/ui_framework/doc_site/src/views/table/controlled_table_no_items.html
@@ -42,9 +42,9 @@
     </div>
   </div>
 
-  <!-- NoItems -->
+  <!-- TableInfo -->
   <div class="kuiPanel kuiPanel--centered kuiPanel--withHeader">
-    <div class="kuiNoItems">
+    <div class="kuiTableInfo">
       No Items matched your search.
     </div>
   </div>