maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add example of Table with MenuButtons. (#10554)

Browse source
This commit is contained in:
CJ Cenizal 2017-02-23 15:19:14 -08:00 committed by GitHub
parent 1cf8277e1b
commit 76d1a463b8
6 changed files with 124 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
ui_framework/components/menu_button/_menu_button_group.scss
View file

@ -5,3 +5,7 @@
margin-left: 4px;
}
}
.kuiMenuButtonGroup--alignRight {
justify-content: flex-end;
}

4
ui_framework/components/table/_table.scss
View file

@ -8,10 +8,6 @@ $tableCellPadding: 7px 8px 8px;
font-weight: 400;
text-align: left;
max-width: 20px; /* 1 */
&:last-child {
padding-right: 16px;
}
}
/**

10
ui_framework/dist/ui_framework.css vendored
View file

@ -1121,6 +1121,12 @@ body {
.kuiMenuButtonGroup .kuiMenuButton + .kuiMenuButton {
margin-left: 4px; }
.kuiMenuButtonGroup--alignRight {
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end; }
.kuiMicroButton {
display: inline-block;
/* 1 */
@ -1395,8 +1401,6 @@ body {
padding: 7px 8px 8px;
line-height: 1.5;
color: #a7a7a7; }
.kuiTableHeaderCell:last-child {
padding-right: 16px; }
/**
* 1. Prevent rapid clicking from selecting text.
@ -1431,8 +1435,6 @@ body {
/* 1 */
color: #191E23;
border-top: 1px solid #E4E4E4; }
.kuiTableRowCell:last-child {
padding-right: 16px; }
/**
* 1. Vertically align all children.

4
ui_framework/doc_site/src/views/table/fluid_table.html
View file

@ -1,10 +1,10 @@
<table class="kuiTable kuiTable--fluid">
<thead>
<tr>
<th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
<th class="kuiTableHeaderCell">
System
</th>
<th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
<th class="kuiTableHeaderCell">
Action
</th>
</tr>

13
ui_framework/doc_site/src/views/table/table_example.jsx
View file

@ -15,6 +15,7 @@ import {
const tableHtml = require('./table.html');
const tableJs = require('raw!./table.js');
const fluidTableHtml = require('./fluid_table.html');
const tableWithMenuButtonsHtml = require('./table_with_menu_buttons.html');
const controlledTableHtml = require('./controlled_table.html');
const controlledTableWithLoadingItemsHtml = require('./controlled_table_loading_items.html');
const controlledTableWithNoItemsHtml = require('./controlled_table_no_items.html');
@ -54,6 +55,18 @@ export default props => (
/>
</GuideSection>
<GuideSection
title="Table with MenuButtons"
source={[{
type: GuideSectionTypes.HTML,
code: tableWithMenuButtonsHtml,
}]}
>
<GuideDemo
html={tableWithMenuButtonsHtml}
/>
</GuideSection>
<GuideSection
title="ControlledTable"
source={[{

99
ui_framework/doc_site/src/views/table/table_with_menu_buttons.html Normal file
View file

@ -0,0 +1,99 @@
<table class="kuiTable">
<thead>
<tr>
<th class="kuiTableHeaderCell">
Reminder
</th>
<th class="kuiTableHeaderCell">
A
</th>
<th class="kuiTableHeaderCell">
B
</th>
<th class="kuiTableHeaderCell">
C
</th>
<th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
Actions
</th>
</tr>
</thead>
<tbody>
<tr class="kuiTableRow">
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
Core temperature critical
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
A
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
B
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
C
</div>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
<div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>
</td>
</tr>
<tr class="kuiTableRow">
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
Time for your snack
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
A
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
B
</div>
</td>
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
C
</div>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
<div class="kuiMenuButtonGroup kuiMenuButtonGroup--alignRight">
<button class="kuiMenuButton kuiMenuButton--basic">
Acknowledge
</button>
<button class="kuiMenuButton kuiMenuButton--basic">
Silence
</button>
<button class="kuiMenuButton kuiMenuButton--danger">
Delete
</button>
</div>
</div>
</td>
</tr>
</tbody>
</table>