mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Add Bar component.
This commit is contained in:
CJ Cenizal
parent
7989c992ab
commit
fdc36f2eb8
12 changed files with 234 additions and 54 deletions
7
ui_framework/components/bar/_bar.scss
Normal file
7
ui_framework/components/bar/_bar.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
.kuiBar {
|
||||
@include bar;
|
||||
}
|
||||
|
||||
.kuiBarSection {
|
||||
@include barSection;
|
||||
}
|
||||
1
ui_framework/components/bar/_index.scss
Normal file
1
ui_framework/components/bar/_index.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "bar";
|
||||
|
|
@ -46,6 +46,10 @@ $tableRowBorder: 1px solid $panelColor;
|
|||
// Timing
|
||||
$formTransitionTiming: 0.1s linear;
|
||||
|
||||
// Bar
|
||||
$toolBarSectionSpacing: 50px;
|
||||
$toolBarItsemSpacing: 10px;
|
||||
|
||||
@mixin darkTheme() {
|
||||
.theme-dark & {
|
||||
@content;
|
||||
|
|
@ -116,6 +120,44 @@ $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 */
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-left: $toolBarItsemSpacing; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -124,6 +166,7 @@ body {
|
|||
font-family: $font;
|
||||
}
|
||||
|
||||
@import "bar/index";
|
||||
@import "button/index";
|
||||
@import "form/index";
|
||||
@import "icon/index";
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
$toolBarSectionSpacing: 50px;
|
||||
$toolBarItsemSpacing: 10px;
|
||||
|
||||
@import "tool_bar";
|
||||
@import "tool_bar_footer";
|
||||
@import "tool_bar_search";
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
78
ui_framework/dist/ui_framework.css
vendored
78
ui_framework/dist/ui_framework.css
vendored
|
|
@ -7,12 +7,58 @@
|
|||
* button elements and anchor tags.
|
||||
* 2. Fit MicroButton inside of Table rows without pushing them taller.
|
||||
*/
|
||||
/**
|
||||
* 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 > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiBarSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
||||
/**
|
||||
* 1. Setting to inline-block guarantees the same height when applied to both
|
||||
* button elements and anchor tags.
|
||||
|
|
@ -970,6 +1016,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;
|
||||
|
|
@ -984,9 +1034,6 @@ body {
|
|||
color: #a7a7a7;
|
||||
background-color: #F3F3F3; }
|
||||
|
||||
/**
|
||||
* 1. Put 10px of space between each child.
|
||||
*/
|
||||
.kuiToolBarSection {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -998,8 +1045,18 @@ 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 > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiToolBarSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
|
@ -1009,6 +1066,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;
|
||||
|
|
@ -1018,9 +1079,6 @@ body {
|
|||
background-color: #ffffff;
|
||||
border: 2px solid #E4E4E4; }
|
||||
|
||||
/**
|
||||
* 1. Put 10px of space between each child.
|
||||
*/
|
||||
.kuiToolBarFooterSection {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -1037,7 +1095,13 @@ body {
|
|||
.kuiToolBarFooterSection:last-child {
|
||||
margin-right: 0; }
|
||||
.kuiToolBarFooterSection:only-child {
|
||||
margin-left: auto; }
|
||||
margin-left: auto;
|
||||
/* 1 */ }
|
||||
.kuiToolBarFooterSection > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiToolBarFooterSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
||||
|
|
@ -36,6 +39,9 @@ import ToolBarExample
|
|||
|
||||
// Component route names should match the component name exactly.
|
||||
const components = [{
|
||||
name: 'Bar',
|
||||
component: BarExample,
|
||||
}, {
|
||||
name: 'Button',
|
||||
component: ButtonExample,
|
||||
}, {
|
||||
|
|
|
|||
18
ui_framework/doc_site/src/views/bar/bar.html
Normal file
18
ui_framework/doc_site/src/views/bar/bar.html
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<div class="kuiBar">
|
||||
<div class="kuiBarSection">
|
||||
<div class="kuiButtonGroup">
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See previous 10 pages
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See next 10 pages
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<div>Limit to</div>
|
||||
<input class="kuiTextInput" size="2" value="10">
|
||||
<div>pages</div>
|
||||
</div>
|
||||
</div>
|
||||
31
ui_framework/doc_site/src/views/bar/bar_example.jsx
Normal file
31
ui_framework/doc_site/src/views/bar/bar_example.jsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react';
|
||||
|
||||
import {
|
||||
createExample,
|
||||
} from '../../services';
|
||||
|
||||
export default createExample([{
|
||||
title: 'Bar',
|
||||
description: (
|
||||
<div>
|
||||
<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>
|
||||
<p><strong>Note:</strong> Instead of using this component with a Table, try using the ControlledTable, ToolBar, and ToolBarFooter components.</p>
|
||||
</div>
|
||||
),
|
||||
html: require('./bar.html'),
|
||||
hasDarkTheme: false,
|
||||
}, {
|
||||
title: 'One section',
|
||||
description: (
|
||||
<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>
|
||||
),
|
||||
html: require('./bar_one_section.html'),
|
||||
hasDarkTheme: false,
|
||||
}, {
|
||||
title: 'Three sections',
|
||||
description: (
|
||||
<p>Technically the Bar can contain three or more sections, but there's no established use-case for this.</p>
|
||||
),
|
||||
html: require('./bar_three_sections.html'),
|
||||
hasDarkTheme: false,
|
||||
}]);
|
||||
12
ui_framework/doc_site/src/views/bar/bar_one_section.html
Normal file
12
ui_framework/doc_site/src/views/bar/bar_one_section.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<div class="kuiBar">
|
||||
<div class="kuiBarSection">
|
||||
<div class="kuiButtonGroup">
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See previous 10 pages
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See next 10 pages
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
38
ui_framework/doc_site/src/views/bar/bar_three_sections.html
Normal file
38
ui_framework/doc_site/src/views/bar/bar_three_sections.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<div class="kuiBar">
|
||||
<div class="kuiBarSection">
|
||||
<div class="kuiButtonGroup">
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See previous 10 pages
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
See next 10 pages
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<div class="kuiButtonGroup">
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
Create new page
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--danger">
|
||||
Clear all pages
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kuiBarSection">
|
||||
<div>Limit to</div>
|
||||
<input class="kuiTextInput" size="2" value="10">
|
||||
<div>pages</div>
|
||||
|
||||
<div class="kuiButtonGroup">
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
Undo
|
||||
</button>
|
||||
<button class="kuiButton kuiButton--basic">
|
||||
Redo
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue