Skip to content

Commit cb4d95f

Browse files
cjcenizalweltenwort
cjcenizal
authored and
weltenwort
committedJan 12, 2017
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 elastic#9803 * Update ui framework css bundle * Move getter/setter into the size-picker * Remove superfluous loading-button styling
1 parent 02440e8 commit cb4d95f

File tree

25 files changed

+326
-210
lines changed

25 files changed

+326
-210
lines changed
 

‎src/core_plugins/kibana/public/context/app.html

+80-60
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,91 @@
1-
<div class="app-container">
2-
<div class="kuiLocalNav">
3-
<div class="kuiLocalNavRow">
4-
<div class="kuiLocalNavRow__section">
5-
<div class="kuiLocalBreadcrumbs">
6-
<div class="kuiLocalBreadcrumb">
7-
<a class="kuiLocalBreadcrumb__link" href="#/discover">Discover</a>
8-
</div>
9-
<div class="kuiLocalBreadcrumb" ng-bind="contextApp.state.queryParameters.indexPattern.id"></div>
1+
<div class="kuiLocalNav">
2+
<div class="kuiLocalNavRow">
3+
<div class="kuiLocalNavRow__section">
4+
<div class="kuiLocalBreadcrumbs">
5+
<div class="kuiLocalBreadcrumb">
6+
<a class="kuiLocalBreadcrumb__link" href="#/discover">Discover</a>
107
</div>
11-
</div>
12-
<div class="kuiLocalNavRow__section">
13-
<context-size-picker
14-
predecessor-count="contextApp.state.queryParameters.predecessorCount"
15-
successor-count="contextApp.state.queryParameters.successorCount"
16-
set-predecessor-count="contextApp.actions.fetchGivenPredecessorRows"
17-
set-successor-count="contextApp.actions.fetchGivenSuccessorRows"
18-
/>
8+
<div class="kuiLocalBreadcrumb" ng-bind="contextApp.state.queryParameters.indexPattern.id"></div>
199
</div>
2010
</div>
21-
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
22-
<div class="kuiLocalTabs">
23-
<div class="kuiLocalTab kuiLocalTab-isSelected" ng-bind-template="Context of {{ contextApp.state.queryParameters.anchorUid }}"></div>
24-
</div>
11+
</div>
12+
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
13+
<div class="kuiLocalTabs">
14+
<div class="kuiLocalTab kuiLocalTab-isSelected" ng-bind-template="Context of {{ contextApp.state.queryParameters.anchorUid }}"></div>
2515
</div>
2616
</div>
17+
</div>
2718

28-
<div class="container-fluid" role="main">
29-
<div class="row">
30-
<div class="col-md-12">
31-
<context-loading-button
32-
disabled="contextApp.derivedState.isLoadingPredecessorRows()"
33-
icon="'fa-chevron-up'"
34-
ng-click="contextApp.actions.fetchMorePredecessorRows()"
35-
ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
36-
>
37-
Load newer entries
38-
</context-loading-button>
39-
</div>
19+
<div class="kuiViewContent kuiViewContentItem" role="main">
20+
<!-- Controls -->
21+
<div class="kuiBar kuiVerticalRhythm">
22+
<div class="kuiBarSection">
23+
<context-loading-button
24+
disabled="contextApp.derivedState.isLoadingPredecessorRows()"
25+
icon="'fa-chevron-up'"
26+
ng-click="contextApp.actions.fetchMorePredecessorRows()"
27+
ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
28+
>
29+
Load newer entries
30+
</context-loading-button>
4031
</div>
41-
<div class="row">
42-
<div class="col-md-12">
43-
<div class="discover-overlay" ng-if="contextApp.derivedState.isLoadingAnchorRow()">
44-
<h2>Loading...</h2>
45-
</div>
46-
<div class="discover-table" ng-if="!contextApp.derivedState.isLoadingAnchorRow()" fixed-scroll>
47-
<doc-table
48-
hits="contextApp.derivedState.rows()"
49-
index-pattern="contextApp.state.queryParameters.indexPattern"
50-
sorting="contextApp.state.queryParameters.sort"
51-
columns="contextApp.state.queryParameters.columns"
52-
infinite-scroll="true"
53-
>
54-
</doc-table>
55-
</div>
56-
</div>
32+
33+
<div class="kuiBarSection">
34+
<div>Limit to</div>
35+
<context-size-picker
36+
count="contextApp.state.queryParameters.predecessorCount"
37+
set-count="contextApp.actions.fetchGivenPredecessorRows"
38+
></context-size-picker>
39+
<div>newer entries</div>
5740
</div>
58-
<div class="row">
59-
<div class="col-md-12">
60-
<context-loading-button
61-
disabled="contextApp.derivedState.isLoadingSuccessorRows()"
62-
icon="'fa-chevron-down'"
63-
ng-click="contextApp.actions.fetchMoreSuccessorRows()"
64-
ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
65-
>
66-
Load older entries
67-
</context-loading-button>
68-
</div>
41+
</div>
42+
43+
<!-- Loading feedback -->
44+
<div
45+
ng-if="contextApp.derivedState.isLoadingAnchorRow()"
46+
class="kuiPanel kuiPanel--centered kuiVerticalRhythm"
47+
>
48+
<div class="kuiLoadingItems">
49+
Loading&hellip;
50+
</div>
51+
</div>
52+
53+
<!-- Table -->
54+
<div
55+
ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
56+
class="kuiPanel kuiVerticalRhythm"
57+
>
58+
<div class="discover-table" fixed-scroll>
59+
<doc-table
60+
hits="contextApp.derivedState.rows()"
61+
index-pattern="contextApp.state.queryParameters.indexPattern"
62+
sorting="contextApp.state.queryParameters.sort"
63+
columns="contextApp.state.queryParameters.columns"
64+
infinite-scroll="true"
65+
></doc-table>
66+
</div>
67+
</div>
68+
69+
<!-- Controls -->
70+
<div class="kuiBar kuiVerticalRhythm">
71+
<div class="kuiBarSection">
72+
<context-loading-button
73+
disabled="contextApp.derivedState.isLoadingSuccessorRows()"
74+
icon="'fa-chevron-down'"
75+
ng-click="contextApp.actions.fetchMoreSuccessorRows()"
76+
ng-if="!contextApp.derivedState.isLoadingAnchorRow()"
77+
>
78+
Load older entries
79+
</context-loading-button>
80+
</div>
81+
82+
<div class="kuiBarSection">
83+
<div>Limit to</div>
84+
<context-size-picker
85+
count="contextApp.state.queryParameters.successorCount"
86+
set-count="contextApp.actions.fetchGivenSuccessorRows"
87+
></context-size-picker>
88+
<div>older entries</div>
6989
</div>
7090
</div>
7191
</div>

‎src/core_plugins/kibana/public/context/app.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import _ from 'lodash';
33
import uiModules from 'ui/modules';
44
import contextAppTemplate from './app.html';
55
import './components/loading_button';
6-
import './components/size_picker';
6+
import './components/size_picker/size_picker';
77
import { bindSelectors } from './utils/selectors';
88
import {
99
QueryParameterActionsProvider,
@@ -17,7 +17,6 @@ import {
1717
selectRows,
1818
} from './query';
1919

20-
2120
const module = uiModules.get('apps/context', [
2221
'kibana',
2322
'ngRoute',

‎src/core_plugins/kibana/public/context/components/loading_button/loading_button.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<button
2-
class="kuiButton kuiButton--basic contextLoadingButton"
2+
class="kuiButton kuiButton--basic kuiButton--iconText"
33
ng-disabled="disabled"
44
>
55
<span

‎src/core_plugins/kibana/public/context/components/loading_button/loading_button.js

-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import uiModules from 'ui/modules';
22
import contextLoadingButtonTemplate from './loading_button.html';
3-
import './loading_button.less';
43

54

65
const module = uiModules.get('apps/context', [

‎src/core_plugins/kibana/public/context/components/loading_button/loading_button.less

-4
This file was deleted.

‎src/core_plugins/kibana/public/context/components/size_picker/size_picker.html

+6-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,6 @@
1-
<div class="contextSizePicker">
2-
<input
3-
class="kuiTextInput contextSizePicker__item contextSizePicker__sizeInput"
4-
ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
5-
ng-model="vm.getOrSetPredecessorCount"
6-
type="number"
7-
/>
8-
<div class="contextSizePicker__item">newer and</div>
9-
<input
10-
class="kuiTextInput contextSizePicker__item contextSizePicker__sizeInput"
11-
ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
12-
ng-model="vm.getOrSetSuccessorCount"
13-
type="number"
14-
/>
15-
<div class="contextSizePicker__item">older entries</div>
16-
</div>
1+
<input
2+
class="kuiTextInput contextSizePicker"
3+
ng-model-options="{updateOn: 'change', getterSetter: true, debounce: 200}"
4+
ng-model="vm.getOrSetCount"
5+
type="number"
6+
>

‎src/core_plugins/kibana/public/context/components/size_picker/size_picker.js

+5-12
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import _ from 'lodash';
2-
32
import uiModules from 'ui/modules';
43
import contextSizePickerTemplate from './size_picker.html';
54
import './size_picker.less';
65

7-
86
const module = uiModules.get('apps/context', [
97
'kibana',
10-
'ngRoute',
118
]);
129

1310
module.directive('contextSizePicker', function ContextSizePicker() {
@@ -18,22 +15,18 @@ module.directive('contextSizePicker', function ContextSizePicker() {
1815
replace: true,
1916
restrict: 'E',
2017
scope: {
21-
predecessorCount: '=',
22-
successorCount: '=',
23-
setPredecessorCount: '=',
24-
setSuccessorCount: '=',
18+
count: '=',
19+
setCount: '=',
2520
},
2621
template: contextSizePickerTemplate,
2722
};
2823
});
2924

25+
3026
function ContextSizePickerController() {
3127
const vm = this;
3228

33-
vm.getOrSetPredecessorCount = (value) => (
34-
_.isUndefined(value) ? vm.predecessorCount : vm.setPredecessorCount(value)
35-
);
36-
vm.getOrSetSuccessorCount = (value) => (
37-
_.isUndefined(value) ? vm.successorCount : vm.setSuccessorCount(value)
29+
vm.getOrSetCount = (count) => (
30+
_.isUndefined(count) ? vm.count : vm.setCount(count)
3831
);
3932
}

‎src/core_plugins/kibana/public/context/components/size_picker/size_picker.less

+11-17
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1+
/**
2+
* 1. Hide increment and decrement buttons for type="number" input.
3+
*/
14
.contextSizePicker {
2-
padding-right: 10px;
3-
height: 100%;
4-
}
5+
appearance: textfield;
6+
text-align: center;
7+
width: 3em;
58

6-
.contextSizePicker__item {
7-
display: inline-block;
8-
}
9-
10-
.contextSizePicker__sizeInput {
11-
appearance: textfield;
12-
text-align: center;
13-
width: 3em;
14-
15-
&::-webkit-outer-spin-button,
16-
&::-webkit-inner-spin-button {
17-
appearance: none;
18-
margin: 0;
19-
}
9+
&::-webkit-outer-spin-button,
10+
&::-webkit-inner-spin-button {
11+
appearance: none; /* 1 */
12+
margin: 0; /* 1 */
2013
}
14+
}

‎src/core_plugins/kibana/public/discover/styles/main.less

+1-6
Original file line numberDiff line numberDiff line change
@@ -129,18 +129,13 @@
129129
}
130130

131131
.discover-table-row--highlight {
132-
font-weight: 900;
133-
outline: 3px solid @discover-table-highlight-bg;
132+
background-color: #E2F1F6;
134133

135134
td {
136135
border-top: none !important;
137136
}
138137
}
139138

140-
.discover-table-togglefield--highlight {
141-
background: @discover-table-highlight-bg;
142-
}
143-
144139
.shard-failures {
145140
color: @discover-shard-failures-color;
146141
background-color: @discover-shard-failures-bg !important;

‎src/ui/public/doc_table/components/table_row/open.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<td ng-click="toggleRow()" ng-class="{'discover-table-togglefield--highlight': row['$$_isAnchor']}">
1+
<td ng-click="toggleRow()">
22
<i
33
class="fa discover-table-open-icon"
44
ng-class="{ 'fa-caret-down': open, 'fa-caret-right': !open }">

‎src/ui/public/styles/table.less

+5-1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,10 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
2121
}
2222
}
2323

24+
/**
25+
* 1. Use alpha so this will stand out against non-white backgrounds, e.g. the highlighted
26+
* row in the Context Log.
27+
*/
2428
dl.source {
2529
margin-bottom: 0;
2630
line-height: 2em;
@@ -31,7 +35,7 @@ kbn-table, .kbn-table, tbody[kbn-rows] {
3135
}
3236

3337
dt {
34-
background: @table-dt-bg;
38+
background-color: rgba(108, 135, 142, 0.15); /* 1 */
3539
color: @table-dt-color;
3640
padding: @padding-xs-vertical @padding-xs-horizontal;
3741
margin-right: @padding-xs-horizontal;

‎src/ui/public/styles/truncate.less

-34
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,3 @@
1-
@import (reference) "~ui/styles/variables";
2-
3-
@truncate1: fade(@truncate-color, 0%);
4-
@truncate2: fade(@truncate-color, 1%);
5-
@truncate3: fade(@truncate-color, 99%);
6-
@truncate4: fade(@truncate-color, 100%);
7-
81
.truncate-by-height {
9-
position: relative;
102
overflow: hidden;
11-
12-
&:before {
13-
content: " ";
14-
width: 100%;
15-
height: 15px; // copied into index.html!
16-
position: absolute;
17-
left: 0;
18-
19-
// FF3.6+
20-
background: -moz-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
21-
22-
// Chrome,Safari4+
23-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @truncate1), color-stop(1%, @truncate2), color-stop(99%, @truncate3), color-stop(100%, @truncate4));
24-
25-
// Chrome10+,Safari5.1+
26-
background: -webkit-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
27-
28-
// Opera 11.10+
29-
background: -o-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
30-
31-
// IE10+
32-
background: -ms-linear-gradient(top, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
33-
34-
// W3C
35-
background: linear-gradient(to bottom, @truncate1 0%, @truncate2 1%, @truncate3 99%, @truncate4 100%);
36-
}
373
}

‎src/ui/public/styles/variables/for-theme.less

-1
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,6 @@
8282

8383

8484
// table =======================================================================
85-
@table-dt-bg: @gray-lighter;
8685
@table-dt-color: @brand-primary;
8786
@table-cell-hover-bg: white;
8887
@table-cell-hover-hover-bg: @gray-lighter;

‎ui_framework/components/bar/_bar.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.kuiBar {
2+
@include bar;
3+
}
4+
5+
.kuiBarSection {
6+
@include barSection;
7+
}

‎ui_framework/components/bar/_index.scss

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "bar";

‎ui_framework/components/index.scss

+39
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@ $tableBorder: 2px solid $panelColor;
4444
// Timing
4545
$formTransitionTiming: 0.1s linear;
4646

47+
// Bar
48+
$toolBarSectionSpacing: 50px;
49+
$toolBarItsemSpacing: 10px;
50+
4751
@mixin darkTheme() {
4852
.theme-dark & {
4953
@content;
@@ -94,6 +98,40 @@ $formTransitionTiming: 0.1s linear;
9498
}
9599
}
96100

101+
@mixin bar {
102+
display: flex;
103+
align-items: center;
104+
justify-content: space-between;
105+
}
106+
107+
/**
108+
* 1. Put 10px of space between each child.
109+
* 2. If there is only one child, align it to the right. If you wanted it aligned right, you
110+
* wouldn't use the Bar in the first place.
111+
*/
112+
@mixin barSection {
113+
display: flex;
114+
align-items: center;
115+
margin-left: $toolBarSectionSpacing * 0.5;
116+
margin-right: $toolBarSectionSpacing * 0.5;
117+
118+
&:first-child {
119+
margin-left: 0;
120+
}
121+
122+
&:last-child {
123+
margin-right: 0;
124+
}
125+
126+
&:only-child {
127+
margin-left: auto; /* 1 */
128+
}
129+
130+
& > * + * {
131+
margin-left: $toolBarItsemSpacing; /* 1 */
132+
}
133+
}
134+
97135
* {
98136
box-sizing: border-box;
99137
}
@@ -102,6 +140,7 @@ body {
102140
font-family: $font;
103141
}
104142

143+
@import "bar/index";
105144
@import "button/index";
106145
@import "form/index";
107146
@import "icon/index";

‎ui_framework/components/tool_bar/_index.scss

-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,3 @@
1-
$toolBarSectionSpacing: 50px;
2-
$toolBarItsemSpacing: 10px;
3-
41
@import "tool_bar";
52
@import "tool_bar_footer";
63
@import "tool_bar_search";

‎ui_framework/components/tool_bar/_tool_bar.scss

+4-19
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,12 @@
11
.kuiToolBar {
2-
display: flex;
3-
justify-content: space-between;
2+
@include bar;
3+
@include buttonOnReverseBackground;
4+
45
padding: 10px;
56
height: 50px;
67
background-color: $panelColor;
7-
8-
@include buttonOnReverseBackground;
98
}
109

11-
/**
12-
* 1. Put 10px of space between each child.
13-
*/
1410
.kuiToolBarSection {
15-
display: flex;
16-
align-items: center;
17-
margin-left: $toolBarSectionSpacing * 0.5;
18-
margin-right: $toolBarSectionSpacing * 0.5;
19-
20-
&:last-child {
21-
margin-right: 0;
22-
}
23-
24-
& > * + * {
25-
margin-left: $toolBarItsemSpacing; /* 1 */
26-
}
11+
@include barSection;
2712
}

‎ui_framework/components/tool_bar/_tool_bar_footer.scss

+3-25
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,12 @@
11
.kuiToolBarFooter {
2-
display: flex;
3-
justify-content: space-between;
2+
@include bar;
3+
44
padding: 10px;
55
height: 40px;
66
background-color: #ffffff;
77
border: $tableBorder;
88
}
99

10-
/**
11-
* 1. Put 10px of space between each child.
12-
*/
1310
.kuiToolBarFooterSection {
14-
display: flex;
15-
align-items: center;
16-
margin-left: $toolBarSectionSpacing * 0.5;
17-
margin-right: $toolBarSectionSpacing * 0.5;
18-
19-
&:first-child {
20-
margin-left: 0;
21-
}
22-
23-
&:last-child {
24-
margin-right: 0;
25-
}
26-
27-
&:only-child {
28-
margin-left: auto;
29-
}
30-
31-
& > * + * {
32-
margin-left: $toolBarItsemSpacing; /* 1 */
33-
}
11+
@include barSection;
3412
}

‎ui_framework/dist/ui_framework.css

+56-7
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,53 @@
22
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
33
* 2. Override inherited styles (possibly from Bootstrap).
44
*/
5+
/**
6+
* 1. Put 10px of space between each child.
7+
* 2. If there is only one child, align it to the right. If you wanted it aligned right, you
8+
* wouldn't use the Bar in the first place.
9+
*/
510
* {
611
box-sizing: border-box; }
712

813
body {
914
font-family: "Open Sans", Helvetica, Arial, sans-serif; }
1015

16+
.kuiBar {
17+
display: -webkit-box;
18+
display: -webkit-flex;
19+
display: -ms-flexbox;
20+
display: flex;
21+
-webkit-box-align: center;
22+
-webkit-align-items: center;
23+
-ms-flex-align: center;
24+
align-items: center;
25+
-webkit-box-pack: justify;
26+
-webkit-justify-content: space-between;
27+
-ms-flex-pack: justify;
28+
justify-content: space-between; }
29+
30+
.kuiBarSection {
31+
display: -webkit-box;
32+
display: -webkit-flex;
33+
display: -ms-flexbox;
34+
display: flex;
35+
-webkit-box-align: center;
36+
-webkit-align-items: center;
37+
-ms-flex-align: center;
38+
align-items: center;
39+
margin-left: 25px;
40+
margin-right: 25px; }
41+
.kuiBarSection:first-child {
42+
margin-left: 0; }
43+
.kuiBarSection:last-child {
44+
margin-right: 0; }
45+
.kuiBarSection:only-child {
46+
margin-left: auto;
47+
/* 1 */ }
48+
.kuiBarSection > * + * {
49+
margin-left: 10px;
50+
/* 1 */ }
51+
1152
/**
1253
* 1. Setting to inline-block guarantees the same height when applied to both
1354
* button elements and anchor tags.
@@ -877,6 +918,10 @@ body {
877918
display: -webkit-flex;
878919
display: -ms-flexbox;
879920
display: flex;
921+
-webkit-box-align: center;
922+
-webkit-align-items: center;
923+
-ms-flex-align: center;
924+
align-items: center;
880925
-webkit-box-pack: justify;
881926
-webkit-justify-content: space-between;
882927
-ms-flex-pack: justify;
@@ -891,9 +936,6 @@ body {
891936
color: #a7a7a7;
892937
background-color: #F3F3F3; }
893938

894-
/**
895-
* 1. Put 10px of space between each child.
896-
*/
897939
.kuiToolBarSection {
898940
display: -webkit-box;
899941
display: -webkit-flex;
@@ -905,8 +947,13 @@ body {
905947
align-items: center;
906948
margin-left: 25px;
907949
margin-right: 25px; }
950+
.kuiToolBarSection:first-child {
951+
margin-left: 0; }
908952
.kuiToolBarSection:last-child {
909953
margin-right: 0; }
954+
.kuiToolBarSection:only-child {
955+
margin-left: auto;
956+
/* 1 */ }
910957
.kuiToolBarSection > * + * {
911958
margin-left: 10px;
912959
/* 1 */ }
@@ -916,6 +963,10 @@ body {
916963
display: -webkit-flex;
917964
display: -ms-flexbox;
918965
display: flex;
966+
-webkit-box-align: center;
967+
-webkit-align-items: center;
968+
-ms-flex-align: center;
969+
align-items: center;
919970
-webkit-box-pack: justify;
920971
-webkit-justify-content: space-between;
921972
-ms-flex-pack: justify;
@@ -925,9 +976,6 @@ body {
925976
background-color: #ffffff;
926977
border: 2px solid #E4E4E4; }
927978

928-
/**
929-
* 1. Put 10px of space between each child.
930-
*/
931979
.kuiToolBarFooterSection {
932980
display: -webkit-box;
933981
display: -webkit-flex;
@@ -944,7 +992,8 @@ body {
944992
.kuiToolBarFooterSection:last-child {
945993
margin-right: 0; }
946994
.kuiToolBarFooterSection:only-child {
947-
margin-left: auto; }
995+
margin-left: auto;
996+
/* 1 */ }
948997
.kuiToolBarFooterSection > * + * {
949998
margin-left: 10px;
950999
/* 1 */ }

‎ui_framework/doc_site/src/services/routes/Routes.js

+6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11

22
import Slugify from '../string/slugify';
33

4+
import BarExample
5+
from '../../views/bar/bar_example.jsx';
6+
47
import ButtonExample
58
from '../../views/button/button_example.jsx';
69

@@ -33,6 +36,9 @@ import ToolBarExample
3336

3437
// Component route names should match the component name exactly.
3538
const components = [{
39+
name: 'Bar',
40+
component: BarExample,
41+
}, {
3642
name: 'Button',
3743
component: ButtonExample,
3844
}, {

‎ui_framework/doc_site/src/views/bar/bar.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<div class="kuiBar">
2+
<div class="kuiBarSection">
3+
<div class="kuiButtonGroup">
4+
<button class="kuiButton kuiButton--basic">
5+
See previous 10 pages
6+
</button>
7+
<button class="kuiButton kuiButton--basic">
8+
See next 10 pages
9+
</button>
10+
</div>
11+
</div>
12+
13+
<div class="kuiBarSection">
14+
<div>Limit to</div>
15+
<input class="kuiTextInput" size="2" value="10">
16+
<div>pages</div>
17+
</div>
18+
</div>

‎ui_framework/doc_site/src/views/bar/bar_example.jsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
3+
import {
4+
createExample,
5+
} from '../../services';
6+
7+
export default createExample([{
8+
title: 'Bar',
9+
description: (
10+
<div>
11+
<p>Use the Bar to organize controls in a horizontal layout. This is especially useful for surfacing controls in the corners of a view.</p>
12+
<p><strong>Note:</strong> Instead of using this component with a Table, try using the ControlledTable, ToolBar, and ToolBarFooter components.</p>
13+
</div>
14+
),
15+
html: require('./bar.html'),
16+
hasDarkTheme: false,
17+
}, {
18+
title: 'One section',
19+
description: (
20+
<p>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.</p>
21+
),
22+
html: require('./bar_one_section.html'),
23+
hasDarkTheme: false,
24+
}, {
25+
title: 'Three sections',
26+
description: (
27+
<p>Technically the Bar can contain three or more sections, but there's no established use-case for this.</p>
28+
),
29+
html: require('./bar_three_sections.html'),
30+
hasDarkTheme: false,
31+
}]);

‎ui_framework/doc_site/src/views/bar/bar_one_section.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="kuiBar">
2+
<div class="kuiBarSection">
3+
<div class="kuiButtonGroup">
4+
<button class="kuiButton kuiButton--basic">
5+
See previous 10 pages
6+
</button>
7+
<button class="kuiButton kuiButton--basic">
8+
See next 10 pages
9+
</button>
10+
</div>
11+
</div>
12+
</div>

‎ui_framework/doc_site/src/views/bar/bar_three_sections.html

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<div class="kuiBar">
2+
<div class="kuiBarSection">
3+
<div class="kuiButtonGroup">
4+
<button class="kuiButton kuiButton--basic">
5+
See previous 10 pages
6+
</button>
7+
<button class="kuiButton kuiButton--basic">
8+
See next 10 pages
9+
</button>
10+
</div>
11+
</div>
12+
13+
<div class="kuiBarSection">
14+
<div class="kuiButtonGroup">
15+
<button class="kuiButton kuiButton--basic">
16+
Create new page
17+
</button>
18+
<button class="kuiButton kuiButton--danger">
19+
Clear all pages
20+
</button>
21+
</div>
22+
</div>
23+
24+
<div class="kuiBarSection">
25+
<div>Limit to</div>
26+
<input class="kuiTextInput" size="2" value="10">
27+
<div>pages</div>
28+
29+
<div class="kuiButtonGroup">
30+
<button class="kuiButton kuiButton--basic">
31+
Undo
32+
</button>
33+
<button class="kuiButton kuiButton--basic">
34+
Redo
35+
</button>
36+
</div>
37+
</div>
38+
</div>

0 commit comments

Comments
 (0)
Please sign in to comment.