From 46f274034e60ecef46c1d18a152811490a780f26 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Fri, 14 Apr 2017 14:00:53 -0700 Subject: [PATCH] Fix missing icons in Visualize listing. (#11243) * Fix StatusText component so that it supports image icons. * Fix missing icons in Visualize listing. Support both icons and images. --- .../visualize/listing/visualize_listing.html | 14 ++++++- .../components/status_text/_index.scss | 2 + .../components/status_text/_status_text.scss | 6 +++ ui_framework/dist/ui_framework.css | 10 ++++- .../src/views/status_text/status_text.html | 37 +++++++++++++++++++ .../views/status_text/status_text_error.html | 10 +++-- .../views/status_text/status_text_example.js | 13 +++++++ .../views/status_text/status_text_info.html | 10 +++-- .../status_text/status_text_success.html | 10 +++-- .../status_text/status_text_warning.html | 10 +++-- 10 files changed, 104 insertions(+), 18 deletions(-) create mode 100644 ui_framework/doc_site/src/views/status_text/status_text.html diff --git a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html index 432e1f24081a8..0e31a44ab64d8 100644 --- a/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html +++ b/src/core_plugins/kibana/public/visualize/listing/visualize_listing.html @@ -172,7 +172,19 @@
- + + + + + {{ item.type.title }}
diff --git a/ui_framework/components/status_text/_index.scss b/ui_framework/components/status_text/_index.scss index bd8af89489a9e..4b45dc5461d6d 100644 --- a/ui_framework/components/status_text/_index.scss +++ b/ui_framework/components/status_text/_index.scss @@ -1 +1,3 @@ +$statusTextIconSize: 1.15em; + @import "status_text"; diff --git a/ui_framework/components/status_text/_status_text.scss b/ui_framework/components/status_text/_status_text.scss index 471ab86298cc0..610786b326df0 100644 --- a/ui_framework/components/status_text/_status_text.scss +++ b/ui_framework/components/status_text/_status_text.scss @@ -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 */ } diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css index dc820b4936f10..c675fd16ee105 100644 --- a/ui_framework/dist/ui_framework.css +++ b/ui_framework/dist/ui_framework.css @@ -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. diff --git a/ui_framework/doc_site/src/views/status_text/status_text.html b/ui_framework/doc_site/src/views/status_text/status_text.html new file mode 100644 index 0000000000000..3d63c056afdad --- /dev/null +++ b/ui_framework/doc_site/src/views/status_text/status_text.html @@ -0,0 +1,37 @@ +

+ + + Font icon + +

+ +

+ + + Image icon + +

+ diff --git a/ui_framework/doc_site/src/views/status_text/status_text_error.html b/ui_framework/doc_site/src/views/status_text/status_text_error.html index c87fca15a25fc..b0e9c5832d8aa 100644 --- a/ui_framework/doc_site/src/views/status_text/status_text_error.html +++ b/ui_framework/doc_site/src/views/status_text/status_text_error.html @@ -1,4 +1,6 @@ - - - Something’s gone terribly wrong - +

+ + + Something’s gone terribly wrong + +

diff --git a/ui_framework/doc_site/src/views/status_text/status_text_example.js b/ui_framework/doc_site/src/views/status_text/status_text_example.js index bbe21f2bc0dc9..06e0cbfcaa5b7 100644 --- a/ui_framework/doc_site/src/views/status_text/status_text_example.js +++ b/ui_framework/doc_site/src/views/status_text/status_text_example.js @@ -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 => ( + + + + - - Just to let you know - +

+ + + Just to let you know + +

diff --git a/ui_framework/doc_site/src/views/status_text/status_text_success.html b/ui_framework/doc_site/src/views/status_text/status_text_success.html index 83bb45831d90d..07dc4f202d095 100644 --- a/ui_framework/doc_site/src/views/status_text/status_text_success.html +++ b/ui_framework/doc_site/src/views/status_text/status_text_success.html @@ -1,4 +1,6 @@ - - - Eveything is OK - +

+ + + Eveything is OK + +

diff --git a/ui_framework/doc_site/src/views/status_text/status_text_warning.html b/ui_framework/doc_site/src/views/status_text/status_text_warning.html index 46f5cf6e965b3..c1f6a0a1066b1 100644 --- a/ui_framework/doc_site/src/views/status_text/status_text_warning.html +++ b/ui_framework/doc_site/src/views/status_text/status_text_warning.html @@ -1,4 +1,6 @@ - - - Careful! - +

+ + + Careful! + +