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

Fix missing icons in Visualize listing. (#11243) (#11264)

Browse source 
* Fix StatusText component so that it supports image icons.

* Fix missing icons in Visualize listing. Support both icons and images.
This commit is contained in:
CJ Cenizal 2017-04-14 14:11:37 -07:00 • committed by GitHub
parent 788fded8b0
commit 35f0d0fcbc
10 changed files with 104 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/core_plugins/kibana/public/visualize/listing/visualize_listing.html
View file

@ -172,7 +172,19 @@
<td class="kuiTableRowCell">
<div class="kuiTableRowCell__liner">
<span class="kuiStatusText">
<span class="kuiStatusText__icon kuiIcon {{ item.icon }}"></span>
<img
class="kuiStatusText__icon kuiIcon"
ng-if="item.type.image"
aria-hidden="true"
ng-src="{{ item.type.image }}"
/>
<!-- If there's no image, default to an icon, for BWC. -->
<span
class="kuiStatusText__icon kuiIcon {{ item.icon }}"
ng-if="!item.type.image"
></span>
{{ item.type.title }}
</span>
</div>

2
ui_framework/components/status_text/_index.scss
View file

@ -1 +1,3 @@
$statusTextIconSize: 1.15em;
@import "status_text";

6
ui_framework/components/status_text/_status_text.scss
View file

@ -19,6 +19,12 @@
color: $globalDangerColor;
}
/**
* 1. Set the image to be the same size as a font icon at 14px.
* 2. We need to cap the height too, in case the icon was designed thin and tall.
*/
.kuiStatusText__icon {
margin-right: 6px;
width: $statusTextIconSize; /* 1 */
max-height:$statusTextIconSize; /* 2 */
}

10
ui_framework/dist/ui_framework.css vendored
View file

@ -1993,8 +1993,16 @@ body {
.kuiStatusText--error {
color: #D86051; }
/**
* 1. Set the image to be the same size as a font icon at 14px.
* 2. We need to cap the height too, in case the icon was designed thin and tall.
*/
.kuiStatusText__icon {
margin-right: 6px; }
margin-right: 6px;
width: 1.15em;
/* 1 */
max-height: 1.15em;
/* 2 */ }
/**
* 1. Make seamless transition from ToolBar to Table header.

37
ui_framework/doc_site/src/views/status_text/status_text.html Normal file
View file

@ -0,0 +1,37 @@
<p class="kuiText">
<span class="kuiStatusText">
<span class="kuiStatusText__icon kuiIcon fa-area-chart"></span>
Font icon
</span>
</p>
<p class="kuiText">
<span class="kuiStatusText">
<img
class="kuiStatusText__icon"
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNjBweCI
gaGVpZ2h0PSI0NnB4IiB2aWV3Qm94PSIwIDAgNjAgNDYiIHZlcnNpb249IjEuMSIgeG1sbnM9Im
h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vc
mcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQyICgzNjc4MSkgLSBo
dHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbi1
hcmVhPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPG
RlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlZpc3VhbGl6ZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd
2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9
IlZpc3VhbGl6ZS1DcmVhdGUtTmV3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNzU2LjAwMDAwMCw
gLTIyMi4wMDAwMDApIiBmaWxsPSIjMDAwMDAwIj4KICAgICAgICAgICAgPGcgaWQ9ImNoYXJ0cy
IgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNzUuMDAwMDAwLCAxNDguMDAwMDAwKSI+CiAgICAgICAgI
CAgICAgICA8ZyBpZD0iYXJlYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjQxLjAwMDAwMCwgNDMu
MDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb24tYXJlYSIgdHJhbnNmb3J
tPSJ0cmFuc2xhdGUoNDAuMDAwMDAwLCAzMS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgIC
AgICAgPHBvbHlnb24gaWQ9Iu+HviIgcG9pbnRzPSI0NC41Mzg0NjE1IDExLjY2NjY2NjcgNTEgM
zUgOSAzNSA5IDIwIDIwLjMwNzY5MjMgNSAzNC44NDYxNTM4IDIwIj48L3BvbHlnb24+CiAgICAg
ICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJ4eS1heGlzIiBmaWxsLXJ1bGU9Im5vbnp
lcm8iIHBvaW50cz0iNCAwIDAgMCAwIDQ1LjAxMTYyNjMgNjAuMDAwMDAxMSA0NS4wMTE2MjYzID
YwLjAwMDAwMTEgNDEuMDExNjI2MyA0IDQxLjAxMTYyNjMiPjwvcG9seWdvbj4KICAgICAgICAgI
CAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAg
ICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="
/>
Image icon
</span>
</p>

10
ui_framework/doc_site/src/views/status_text/status_text_error.html
View file

@ -1,4 +1,6 @@
<span class="kuiStatusText kuiStatusText--error">
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
Something&rsquo;s gone terribly wrong
</span>
<p class="kuiText">
<span class="kuiStatusText kuiStatusText--error">
<span class="kuiStatusText__icon kuiIcon fa-warning"></span>
Something&rsquo;s gone terribly wrong
</span>
</p>

13
ui_framework/doc_site/src/views/status_text/status_text_example.js
View file

@ -7,6 +7,7 @@ import {
GuideSectionTypes,
} from '../../components';
const html = require('./status_text.html');
const infoHtml = require('./status_text_info.html');
const successHtml = require('./status_text_success.html');
const warningHtml = require('./status_text_warning.html');
@ -14,6 +15,18 @@ const errorHtml = require('./status_text_error.html');
export default props => (
<GuidePage title={props.route.name}>
<GuideSection
title="StatusText"
source={[{
type: GuideSectionTypes.HTML,
code: html,
}]}
>
<GuideDemo
html={html}
/>
</GuideSection>
<GuideSection
title="Info"
source={[{

10
ui_framework/doc_site/src/views/status_text/status_text_info.html
View file

@ -1,4 +1,6 @@
<span class="kuiStatusText kuiStatusText--info">
<span class="kuiStatusText__icon kuiIcon fa-info"></span>
Just to let you know
</span>
<p class="kuiText">
<span class="kuiStatusText kuiStatusText--info">
<span class="kuiStatusText__icon kuiIcon fa-info"></span>
Just to let you know
</span>
</p>

10
ui_framework/doc_site/src/views/status_text/status_text_success.html
View file

@ -1,4 +1,6 @@
<span class="kuiStatusText kuiStatusText--success">
<span class="kuiStatusText__icon kuiIcon fa-check"></span>
Eveything is OK
</span>
<p class="kuiText">
<span class="kuiStatusText kuiStatusText--success">
<span class="kuiStatusText__icon kuiIcon fa-check"></span>
Eveything is OK
</span>
</p>

10
ui_framework/doc_site/src/views/status_text/status_text_warning.html
View file

@ -1,4 +1,6 @@
<span class="kuiStatusText kuiStatusText--warning">
<span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
Careful!
</span>
<p class="kuiText">
<span class="kuiStatusText kuiStatusText--warning">
<span class="kuiStatusText__icon kuiIcon fa-bolt"></span>
Careful!
</span>
</p>