github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Remove inline Buttons from Table. Add MicroButtons to serve the same purpose.

Browse source
This commit is contained in:
CJ Cenizal 2016-12-16 16:36:56 -08:00
parent 09b7a08e73
commit 0f32b83747
14 changed files with 132 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/core_plugins/kibana/public/management/sections/objects/_objects.html
View file

@ -123,8 +123,6 @@
<th class="kuiTableHeaderCell">
Title
</th>
<th class="kuiTableHeaderCell">
</th>
</tr>
</thead>
@ -142,25 +140,23 @@
>
</td>
<td class="kuiTableRowCell">
<a class="kuiLink" href="" ng-click="edit(service, item)">
{{ item.title }}
</a>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight kuiTableRowCell--actions">
<div class="kuiTableRowCell__liner">
<!-- Inline view button -->
<a class="kuiLink" href="" ng-click="edit(service, item)">
{{ item.title }}
</a>
<button
class="kuiButton kuiButton--basic"
class="kuiMicroButton kuiTableRowHoverReveal"
ng-click="open(item)"
aria-label="View"
tooltip="View in app"
>
<span
aria-hidden="true"
class="kuiButton__icon kuiIcon fa-eye"
class="kuiIcon fa-eye"
></span>
</button>
</div>
</div>
</td>
</tr>

2
src/ui_framework/components/button/_button.scss
View file

@ -6,6 +6,7 @@
.kuiButton {
display: inline-block; /* 1 */
appearance: none;
cursor: pointer;
padding: 4px 12px 5px;
font-size: $fontSize;
font-weight: 400;
@ -13,7 +14,6 @@
text-decoration: none;
border: none;
border-radius: $buttonBorderRadius;
cursor: pointer;
&:disabled {
cursor: default;

1
src/ui_framework/components/index.scss
View file

@ -73,6 +73,7 @@ body {
@import "icon/index";
@import "link/index";
@import "local_nav/index";
@import "micro_button/index";
@import "no_results/index";
@import "panel/index";
@import "table/index";

2
src/ui_framework/components/micro_button/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import 'micro_button';
@import 'micro_button_group';

20
src/ui_framework/components/micro_button/_micro_button.scss Normal file
View file

@ -0,0 +1,20 @@
/**
* 1. Setting to inline-block guarantees the same height when applied to both
* button elements and anchor tags.
* 2. Fit MicroButton inside of Table rows without pushing them taller.
*/
.kuiMicroButton {
display: inline-block; /* 1 */
appearance: none;
cursor: pointer;
padding: 2px 5px;
border: 1px solid transparent;
color: $subduedFontColor;
background-color: transparent;
font-size: 12px;
line-height: 1; /* 2 */
&:hover {
color: $fontColor;
}
}

7
src/ui_framework/components/micro_button/_micro_button_group.scss Normal file
View file

@ -0,0 +1,7 @@
.kuiMicroButtonGroup {
display: flex;
.kuiMicroButton + .kuiMicroButton {
margin-left: 2px;
}
}

34
src/ui_framework/components/table/_table.scss
View file

@ -37,10 +37,25 @@
}
}
.kuiTableHeaderCell--alignRight {
text-align: right;
}
.kuiTableSortIcon {
pointer-events: none;
}
.kuiTableRow {
&:hover {
.kuiTableRowHoverReveal {
display: inline-block;
}
}
}
.kuiTableRowHoverReveal {
display: none;
}
.kuiTableRowCell {
@include tableCell;
@ -48,10 +63,17 @@
border-top: $tableBorder;
}
/**
* 1. Vertically align all children.
*/
.kuiTableRowCell__liner {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
* > {
vertical-align: middle; /* 1 */
}
}
.kuiTableRowCell--alignRight {
@ -62,18 +84,6 @@
}
}
.kuiTableRowCell--actions {
padding-top: 0;
padding-bottom: 0;
/**
* 1. We don't want to clip the focused state of buttons.
*/
.kuiTableRowCell__liner {
overflow: visible; /* 1 */
}
}
/**
* 1. Rendered width of cell with checkbox inside of it.
* 2. Align checkbox with text in other cells.

6
src/ui_framework/doc_site/src/services/routes/Routes.js
View file

@ -16,6 +16,9 @@ import LinkExample
import LocalNavExample
from '../../views/local_nav/local_nav_example.jsx';
import MicroButtonExample
from '../../views/micro_button/micro_button_example.jsx';
import TableExample
from '../../views/table/table_example.jsx';
@ -41,6 +44,9 @@ const components = [{
}, {
name: 'LocalNav',
component: LocalNavExample,
}, {
name: 'MicroButton',
component: MicroButtonExample,
}, {
name: 'Table',
component: TableExample,

4
src/ui_framework/doc_site/src/views/button/button_elements.html
View file

@ -2,12 +2,16 @@
Button element
</button>
&nbsp;
<input
type="submit"
class="kuiButton kuiButton--basic"
value="Submit input element"
>
&nbsp;
<a href="#" class="kuiButton kuiButton--basic">
Anchor element
</a>

3
src/ui_framework/doc_site/src/views/micro_button/micro_button.html Normal file
View file

@ -0,0 +1,3 @@
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
</button>

9
src/ui_framework/doc_site/src/views/micro_button/micro_button_elements.html Normal file
View file

@ -0,0 +1,9 @@
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
</button>
&nbsp;
<a href="#" class="kuiMicroButton" title="View">
<soan class="kuiIcon fa-eye"></soan>
</a>

28
src/ui_framework/doc_site/src/views/micro_button/micro_button_example.jsx Normal file
View file

@ -0,0 +1,28 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'MicroButton',
description: (
<p>Use MicroButtons for inline actions inside of Table rows.</p>
),
html: require('./micro_button.html'),
hasDarkTheme: false,
}, {
title: 'MicroButtonGroup',
description: (
<p>Use the MicroButtonGroup to emphasize the relationships between a set of MicroButtons, and differentiate them from MicroButtons outside of the set.</p>
),
html: require('./micro_button_group.html'),
hasDarkTheme: false,
}, {
title: 'Element variations',
description: (
<p>You can create a MicroButton using a button element or a link.</p>
),
html: require('./micro_button_elements.html'),
hasDarkTheme: false,
}]);

13
src/ui_framework/doc_site/src/views/micro_button/micro_button_group.html Normal file
View file

@ -0,0 +1,13 @@
<div class="kuiMicroButtonGroup">
<button class="kuiMicroButton" title="Edit">
<soan class="kuiIcon fa-gear"></soan>
</button>
<button class="kuiMicroButton" title="View">
<soan class="kuiIcon fa-eye"></soan>
</button>
<button class="kuiMicroButton" title="Delete">
<soan class="kuiIcon fa-trash"></soan>
</button>
</div>

32
src/ui_framework/doc_site/src/views/table/controlled_table.html
View file

@ -58,7 +58,8 @@
<th class="kuiTableHeaderCell">
Date created
</th>
<th class="kuiTableHeaderCell">
<th class="kuiTableHeaderCell kuiTableHeaderCell--alignRight">
Orders of magnitude
</th>
</tr>
</thead>
@ -79,14 +80,9 @@
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight kuiTableRowCell--actions">
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
<button class="kuiButton kuiButton--basic">
View
</button>
<button class="kuiButton kuiButton--basic">
Edit
</button>
1
</div>
</td>
</tr>
@ -106,14 +102,9 @@
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight kuiTableRowCell--actions">
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
<button class="kuiButton kuiButton--basic">
View
</button>
<button class="kuiButton kuiButton--basic">
Edit
</button>
10
</div>
</td>
</tr>
@ -133,14 +124,9 @@
Tue Dec 06 2016 12:56:15 GMT-0800 (PST)
</div>
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight kuiTableRowCell--actions">
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
<button class="kuiButton kuiButton--basic">
View
</button>
<button class="kuiButton kuiButton--basic">
Edit
</button>
100
</div>
</td>
</tr>
@ -162,7 +148,7 @@
</td>
<td class="kuiTableRowCell kuiTableRowCell--alignRight">
<div class="kuiTableRowCell__liner">
(Unavailable)
1000
</div>
</td>
</tr>