From cb4d95f5f58425af7ca242a4bfe51a3310583cd5 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Thu, 12 Jan 2017 09:10:23 -0800 Subject: [PATCH] Improve Context Log highlighting and UI. (#1) * Move ContextLoadingButtons out of header into Context view. * Add kuiButton--iconText modifier to ContextLoadingButtons. * Use style guide color for highlighted Context Log row. * Add Bar component. Use Bar to surface entry-pagination controls in Context Log. Refactor ContextSizePicker directive to surface a single input without surrounding text. * Use Panel component to present loading feedback and table within Context app. * Remove fading effect from truncated doc table rows, because it doesn't work with highlighted backgrounds. It also looks weird. * Move bar component to match #9803 * Update ui framework css bundle * Move getter/setter into the size-picker * Remove superfluous loading-button styling --- .../kibana/public/context/app.html | 140 ++++++++++-------- src/core_plugins/kibana/public/context/app.js | 3 +- .../loading_button/loading_button.html | 2 +- .../loading_button/loading_button.js | 1 - .../loading_button/loading_button.less | 4 - .../components/size_picker/size_picker.html | 22 +-- .../components/size_picker/size_picker.js | 17 +-- .../components/size_picker/size_picker.less | 28 ++-- .../kibana/public/discover/styles/main.less | 7 +- .../doc_table/components/table_row/open.html | 2 +- src/ui/public/styles/table.less | 6 +- src/ui/public/styles/truncate.less | 34 ----- src/ui/public/styles/variables/for-theme.less | 1 - ui_framework/components/bar/_bar.scss | 7 + ui_framework/components/bar/_index.scss | 1 + ui_framework/components/index.scss | 39 +++++ ui_framework/components/tool_bar/_index.scss | 3 - .../components/tool_bar/_tool_bar.scss | 23 +-- .../components/tool_bar/_tool_bar_footer.scss | 28 +--- ui_framework/dist/ui_framework.css | 63 +++++++- .../doc_site/src/services/routes/Routes.js | 6 + ui_framework/doc_site/src/views/bar/bar.html | 18 +++ .../doc_site/src/views/bar/bar_example.jsx | 31 ++++ .../src/views/bar/bar_one_section.html | 12 ++ .../src/views/bar/bar_three_sections.html | 38 +++++ 25 files changed, 326 insertions(+), 210 deletions(-) delete mode 100644 src/core_plugins/kibana/public/context/components/loading_button/loading_button.less create mode 100644 ui_framework/components/bar/_bar.scss create mode 100644 ui_framework/components/bar/_index.scss create mode 100644 ui_framework/doc_site/src/views/bar/bar.html create mode 100644 ui_framework/doc_site/src/views/bar/bar_example.jsx create mode 100644 ui_framework/doc_site/src/views/bar/bar_one_section.html create mode 100644 ui_framework/doc_site/src/views/bar/bar_three_sections.html diff --git a/src/core_plugins/kibana/public/context/app.html b/src/core_plugins/kibana/public/context/app.html index 9d0ca85c51ec5..f8b4ad92c7b90 100644 --- a/src/core_plugins/kibana/public/context/app.html +++ b/src/core_plugins/kibana/public/context/app.html @@ -1,71 +1,91 @@ -
-
-
-
-
-
- Discover -
-
+
+
+
+
+
+ Discover
-
-
- +
-
-
-
-
+
+
+
+
+
-
-
-
- - Load newer entries - -
+
+ +
+
+ + Load newer entries +
-
-
-
-

Loading...

-
-
- - -
-
+ +
+
Limit to
+ +
newer entries
-
-
- - Load older entries - -
+
+ + +
+
+ Loading… +
+
+ + +
+
+ +
+
+ + +
+
+ + Load older entries + +
+ +
+
Limit to
+ +
older entries
diff --git a/src/core_plugins/kibana/public/context/app.js b/src/core_plugins/kibana/public/context/app.js index e6195cdcff676..44a8891d22d1d 100644 --- a/src/core_plugins/kibana/public/context/app.js +++ b/src/core_plugins/kibana/public/context/app.js @@ -3,7 +3,7 @@ import _ from 'lodash'; import uiModules from 'ui/modules'; import contextAppTemplate from './app.html'; import './components/loading_button'; -import './components/size_picker'; +import './components/size_picker/size_picker'; import { bindSelectors } from './utils/selectors'; import { QueryParameterActionsProvider, @@ -17,7 +17,6 @@ import { selectRows, } from './query'; - const module = uiModules.get('apps/context', [ 'kibana', 'ngRoute', diff --git a/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html index d066bd7138a40..7759ffb705625 100644 --- a/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html +++ b/src/core_plugins/kibana/public/context/components/loading_button/loading_button.html @@ -1,5 +1,5 @@
+ diff --git a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js index 008965c1cc0ce..3bdfc71675183 100644 --- a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js +++ b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.js @@ -1,13 +1,10 @@ import _ from 'lodash'; - import uiModules from 'ui/modules'; import contextSizePickerTemplate from './size_picker.html'; import './size_picker.less'; - const module = uiModules.get('apps/context', [ 'kibana', - 'ngRoute', ]); module.directive('contextSizePicker', function ContextSizePicker() { @@ -18,22 +15,18 @@ module.directive('contextSizePicker', function ContextSizePicker() { replace: true, restrict: 'E', scope: { - predecessorCount: '=', - successorCount: '=', - setPredecessorCount: '=', - setSuccessorCount: '=', + count: '=', + setCount: '=', }, template: contextSizePickerTemplate, }; }); + function ContextSizePickerController() { const vm = this; - vm.getOrSetPredecessorCount = (value) => ( - _.isUndefined(value) ? vm.predecessorCount : vm.setPredecessorCount(value) - ); - vm.getOrSetSuccessorCount = (value) => ( - _.isUndefined(value) ? vm.successorCount : vm.setSuccessorCount(value) + vm.getOrSetCount = (count) => ( + _.isUndefined(count) ? vm.count : vm.setCount(count) ); } diff --git a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less index 950f93c1e7b56..ff0d1a0c99190 100644 --- a/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less +++ b/src/core_plugins/kibana/public/context/components/size_picker/size_picker.less @@ -1,20 +1,14 @@ +/** + * 1. Hide increment and decrement buttons for type="number" input. + */ .contextSizePicker { - padding-right: 10px; - height: 100%; -} + appearance: textfield; + text-align: center; + width: 3em; - .contextSizePicker__item { - display: inline-block; - } - - .contextSizePicker__sizeInput { - appearance: textfield; - text-align: center; - width: 3em; - - &::-webkit-outer-spin-button, - &::-webkit-inner-spin-button { - appearance: none; - margin: 0; - } + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + appearance: none; /* 1 */ + margin: 0; /* 1 */ } +} diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less index 8c45ed09b7dc7..436a2ea6871fe 100644 --- a/src/core_plugins/kibana/public/discover/styles/main.less +++ b/src/core_plugins/kibana/public/discover/styles/main.less @@ -129,18 +129,13 @@ } .discover-table-row--highlight { - font-weight: 900; - outline: 3px solid @discover-table-highlight-bg; + background-color: #E2F1F6; td { border-top: none !important; } } - .discover-table-togglefield--highlight { - background: @discover-table-highlight-bg; - } - .shard-failures { color: @discover-shard-failures-color; background-color: @discover-shard-failures-bg !important; diff --git a/src/ui/public/doc_table/components/table_row/open.html b/src/ui/public/doc_table/components/table_row/open.html index f9e8fa4b3ae6c..5313be2ed284f 100644 --- a/src/ui/public/doc_table/components/table_row/open.html +++ b/src/ui/public/doc_table/components/table_row/open.html @@ -1,4 +1,4 @@ - + diff --git a/src/ui/public/styles/table.less b/src/ui/public/styles/table.less index 68969e18abd19..2ffa21eb5f485 100644 --- a/src/ui/public/styles/table.less +++ b/src/ui/public/styles/table.less @@ -21,6 +21,10 @@ kbn-table, .kbn-table, tbody[kbn-rows] { } } + /** + * 1. Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted + * row in the Context Log. + */ dl.source { margin-bottom: 0; line-height: 2em; @@ -31,7 +35,7 @@ kbn-table, .kbn-table, tbody[kbn-rows] { } dt { - background: @table-dt-bg; + background-color: rgba(108, 135, 142, 0.15); /* 1 */ color: @table-dt-color; padding: @padding-xs-vertical @padding-xs-horizontal; margin-right: @padding-xs-horizontal; diff --git a/src/ui/public/styles/truncate.less b/src/ui/public/styles/truncate.less index f6b136e941993..30ba5fea2a4ea 100644 --- a/src/ui/public/styles/truncate.less +++ b/src/ui/public/styles/truncate.less @@ -1,37 +1,3 @@ -@import (reference) "~ui/styles/variables"; - -@truncate1: fade(@truncate-color, 0%); -@truncate2: fade(@truncate-color, 1%); -@truncate3: fade(@truncate-color, 99%); -@truncate4: fade(@truncate-color, 100%); - .truncate-by-height { - position: relative; overflow: hidden; - - &:before { - content: " "; - width: 100%; - height: 15px; // copied into index.html! - position: absolute; - left: 0; - - // FF3.6+ - background: -moz-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%); - - // Chrome,Safari4+ - background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @truncate1), color-stop(1%, @truncate2), color-stop(99%, @truncate3), color-stop(100%, @truncate4)); - - // Chrome10+,Safari5.1+ - background: -webkit-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%); - - // Opera 11.10+ - background: -o-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%); - - // IE10+ - background: -ms-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%); - - // W3C - background: linear-gradient(to bottom, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%); - } } diff --git a/src/ui/public/styles/variables/for-theme.less b/src/ui/public/styles/variables/for-theme.less index b43ea260a6ba5..89dbd407060b0 100644 --- a/src/ui/public/styles/variables/for-theme.less +++ b/src/ui/public/styles/variables/for-theme.less @@ -82,7 +82,6 @@ // table ======================================================================= -@table-dt-bg: @gray-lighter; @table-dt-color: @brand-primary; @table-cell-hover-bg: white; @table-cell-hover-hover-bg: @gray-lighter; diff --git a/ui_framework/components/bar/_bar.scss b/ui_framework/components/bar/_bar.scss new file mode 100644 index 0000000000000..32453b9700067 --- /dev/null +++ b/ui_framework/components/bar/_bar.scss @@ -0,0 +1,7 @@ +.kuiBar { + @include bar; +} + +.kuiBarSection { + @include barSection; +} diff --git a/ui_framework/components/bar/_index.scss b/ui_framework/components/bar/_index.scss new file mode 100644 index 0000000000000..eb595631d700c --- /dev/null +++ b/ui_framework/components/bar/_index.scss @@ -0,0 +1 @@ +@import "bar"; diff --git a/ui_framework/components/index.scss b/ui_framework/components/index.scss index c3d49afbc5934..a86e0c33c2028 100644 --- a/ui_framework/components/index.scss +++ b/ui_framework/components/index.scss @@ -44,6 +44,10 @@ $tableBorder: 2px solid $panelColor; // Timing $formTransitionTiming: 0.1s linear; +// Bar +$toolBarSectionSpacing: 50px; +$toolBarItsemSpacing: 10px; + @mixin darkTheme() { .theme-dark & { @content; @@ -94,6 +98,40 @@ $formTransitionTiming: 0.1s linear; } } +@mixin bar { + display: flex; + align-items: center; + justify-content: space-between; +} + +/** + * 1. Put 10px of space between each child. + * 2. If there is only one child, align it to the right. If you wanted it aligned right, you + * wouldn't use the Bar in the first place. + */ +@mixin barSection { + display: flex; + align-items: center; + margin-left: $toolBarSectionSpacing * 0.5; + margin-right: $toolBarSectionSpacing * 0.5; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + &:only-child { + margin-left: auto; /* 1 */ + } + + & > * + * { + margin-left: $toolBarItsemSpacing; /* 1 */ + } +} + * { box-sizing: border-box; } @@ -102,6 +140,7 @@ body { font-family: $font; } +@import "bar/index"; @import "button/index"; @import "form/index"; @import "icon/index"; diff --git a/ui_framework/components/tool_bar/_index.scss b/ui_framework/components/tool_bar/_index.scss index 70749aad66ba9..e1fabe167ea5c 100644 --- a/ui_framework/components/tool_bar/_index.scss +++ b/ui_framework/components/tool_bar/_index.scss @@ -1,6 +1,3 @@ -$toolBarSectionSpacing: 50px; -$toolBarItsemSpacing: 10px; - @import "tool_bar"; @import "tool_bar_footer"; @import "tool_bar_search"; diff --git a/ui_framework/components/tool_bar/_tool_bar.scss b/ui_framework/components/tool_bar/_tool_bar.scss index f447813f60088..26dc086112c3d 100644 --- a/ui_framework/components/tool_bar/_tool_bar.scss +++ b/ui_framework/components/tool_bar/_tool_bar.scss @@ -1,27 +1,12 @@ .kuiToolBar { - display: flex; - justify-content: space-between; + @include bar; + @include buttonOnReverseBackground; + padding: 10px; height: 50px; background-color: $panelColor; - - @include buttonOnReverseBackground; } -/** - * 1. Put 10px of space between each child. - */ .kuiToolBarSection { - display: flex; - align-items: center; - margin-left: $toolBarSectionSpacing * 0.5; - margin-right: $toolBarSectionSpacing * 0.5; - - &:last-child { - margin-right: 0; - } - - & > * + * { - margin-left: $toolBarItsemSpacing; /* 1 */ - } + @include barSection; } diff --git a/ui_framework/components/tool_bar/_tool_bar_footer.scss b/ui_framework/components/tool_bar/_tool_bar_footer.scss index d0b7f43e2151b..c33b66a7e9452 100644 --- a/ui_framework/components/tool_bar/_tool_bar_footer.scss +++ b/ui_framework/components/tool_bar/_tool_bar_footer.scss @@ -1,34 +1,12 @@ .kuiToolBarFooter { - display: flex; - justify-content: space-between; + @include bar; + padding: 10px; height: 40px; background-color: #ffffff; border: $tableBorder; } -/** - * 1. Put 10px of space between each child. - */ .kuiToolBarFooterSection { - display: flex; - align-items: center; - margin-left: $toolBarSectionSpacing * 0.5; - margin-right: $toolBarSectionSpacing * 0.5; - - &:first-child { - margin-left: 0; - } - - &:last-child { - margin-right: 0; - } - - &:only-child { - margin-left: auto; - } - - & > * + * { - margin-left: $toolBarItsemSpacing; /* 1 */ - } + @include barSection; } diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index 9fefcdb09850b..84979617d4673 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -2,12 +2,53 @@ * 1. Make sure outline doesn't get hidden beneath adjacent elements. * 2. Override inherited styles (possibly from Bootstrap). */ +/** + * 1. Put 10px of space between each child. + * 2. If there is only one child, align it to the right. If you wanted it aligned right, you + * wouldn't use the Bar in the first place. + */ * { box-sizing: border-box; } body { font-family: "Open Sans", Helvetica, Arial, sans-serif; } +.kuiBar { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; } + +.kuiBarSection { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; + margin-left: 25px; + margin-right: 25px; } + .kuiBarSection:first-child { + margin-left: 0; } + .kuiBarSection:last-child { + margin-right: 0; } + .kuiBarSection:only-child { + margin-left: auto; + /* 1 */ } + .kuiBarSection > * + * { + margin-left: 10px; + /* 1 */ } + /** * 1. Setting to inline-block guarantees the same height when applied to both * button elements and anchor tags. @@ -877,6 +918,10 @@ body { display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -891,9 +936,6 @@ body { color: #a7a7a7; background-color: #F3F3F3; } -/** - * 1. Put 10px of space between each child. - */ .kuiToolBarSection { display: -webkit-box; display: -webkit-flex; @@ -905,8 +947,13 @@ body { align-items: center; margin-left: 25px; margin-right: 25px; } + .kuiToolBarSection:first-child { + margin-left: 0; } .kuiToolBarSection:last-child { margin-right: 0; } + .kuiToolBarSection:only-child { + margin-left: auto; + /* 1 */ } .kuiToolBarSection > * + * { margin-left: 10px; /* 1 */ } @@ -916,6 +963,10 @@ body { display: -webkit-flex; display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -webkit-align-items: center; + -ms-flex-align: center; + align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; @@ -925,9 +976,6 @@ body { background-color: #ffffff; border: 2px solid #E4E4E4; } -/** - * 1. Put 10px of space between each child. - */ .kuiToolBarFooterSection { display: -webkit-box; display: -webkit-flex; @@ -944,7 +992,8 @@ body { .kuiToolBarFooterSection:last-child { margin-right: 0; } .kuiToolBarFooterSection:only-child { - margin-left: auto; } + margin-left: auto; + /* 1 */ } .kuiToolBarFooterSection > * + * { margin-left: 10px; /* 1 */ } diff --git a/ui_framework/doc_site/src/services/routes/Routes.js b/ui_framework/doc_site/src/services/routes/Routes.js index cf87e6f52c1f2..5ebd5981b44f7 100644 --- a/ui_framework/doc_site/src/services/routes/Routes.js +++ b/ui_framework/doc_site/src/services/routes/Routes.js @@ -1,6 +1,9 @@ import Slugify from '../string/slugify'; +import BarExample + from '../../views/bar/bar_example.jsx'; + import ButtonExample from '../../views/button/button_example.jsx'; @@ -33,6 +36,9 @@ import ToolBarExample // Component route names should match the component name exactly. const components = [{ + name: 'Bar', + component: BarExample, +}, { name: 'Button', component: ButtonExample, }, { diff --git a/ui_framework/doc_site/src/views/bar/bar.html b/ui_framework/doc_site/src/views/bar/bar.html new file mode 100644 index 0000000000000..47346c625c347 --- /dev/null +++ b/ui_framework/doc_site/src/views/bar/bar.html @@ -0,0 +1,18 @@ +
+
+
+ + +
+
+ +
+
Limit to
+ +
pages
+
+
diff --git a/ui_framework/doc_site/src/views/bar/bar_example.jsx b/ui_framework/doc_site/src/views/bar/bar_example.jsx new file mode 100644 index 0000000000000..1b9663e97f358 --- /dev/null +++ b/ui_framework/doc_site/src/views/bar/bar_example.jsx @@ -0,0 +1,31 @@ +import React from 'react'; + +import { + createExample, +} from '../../services'; + +export default createExample([{ + title: 'Bar', + description: ( +
+

Use the Bar to organize controls in a horizontal layout. This is especially useful for surfacing controls in the corners of a view.

+

Note: Instead of using this component with a Table, try using the ControlledTable, ToolBar, and ToolBarFooter components.

+
+ ), + html: require('./bar.html'), + hasDarkTheme: false, +}, { + title: 'One section', + description: ( +

A Bar with one section will align it to the right, by default. To align it to the left, just add another section and leave it empty, or don't use a Bar at all.

+ ), + html: require('./bar_one_section.html'), + hasDarkTheme: false, +}, { + title: 'Three sections', + description: ( +

Technically the Bar can contain three or more sections, but there's no established use-case for this.

+ ), + html: require('./bar_three_sections.html'), + hasDarkTheme: false, +}]); diff --git a/ui_framework/doc_site/src/views/bar/bar_one_section.html b/ui_framework/doc_site/src/views/bar/bar_one_section.html new file mode 100644 index 0000000000000..120421a1138c3 --- /dev/null +++ b/ui_framework/doc_site/src/views/bar/bar_one_section.html @@ -0,0 +1,12 @@ +
+
+
+ + +
+
+
diff --git a/ui_framework/doc_site/src/views/bar/bar_three_sections.html b/ui_framework/doc_site/src/views/bar/bar_three_sections.html new file mode 100644 index 0000000000000..f9941351a1132 --- /dev/null +++ b/ui_framework/doc_site/src/views/bar/bar_three_sections.html @@ -0,0 +1,38 @@ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
Limit to
+ +
pages
+ +
+ + +
+
+