diff --git a/src/core_plugins/kibana/public/discover/styles/main.less b/src/core_plugins/kibana/public/discover/styles/main.less index 3f725765fea20..58dfaeb0e07ae 100644 --- a/src/core_plugins/kibana/public/discover/styles/main.less +++ b/src/core_plugins/kibana/public/discover/styles/main.less @@ -88,10 +88,6 @@ overflow-x: auto; padding-left: 0px !important; padding-right: 0px !important; - - tbody { - font-family: "Lucida Console", Monaco, monospace; - } } .discover-table-footer { diff --git a/src/ui/public/doc_table/components/table_row.js b/src/ui/public/doc_table/components/table_row.js index 24dc6d0120fa0..1e7f140a343ba 100644 --- a/src/ui/public/doc_table/components/table_row.js +++ b/src/ui/public/doc_table/components/table_row.js @@ -27,6 +27,7 @@ const MIN_LINE_LENGTH = 20; module.directive('kbnTableRow', function ($compile) { const cellTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/cell.html'))); const truncateByHeightTemplate = _.template(noWhiteSpace(require('ui/partials/truncate_by_height.html'))); + const cellDetailsTemplate = _.template(noWhiteSpace(require('ui/doc_table/components/table_row/document_details.html'))); return { restrict: 'A', @@ -151,7 +152,7 @@ module.directive('kbnTableRow', function ($compile) { const text = indexPattern.formatField(row, fieldName); if (truncate && text.length > MIN_LINE_LENGTH) { - return truncateByHeightTemplate({ + return cellDetailsTemplate({ body: text }); } diff --git a/src/ui/public/doc_table/components/table_row/document_details.html b/src/ui/public/doc_table/components/table_row/document_details.html new file mode 100644 index 0000000000000..a26a380ad2e0f --- /dev/null +++ b/src/ui/public/doc_table/components/table_row/document_details.html @@ -0,0 +1,3 @@ +
+ <%= body %> +
diff --git a/src/ui/public/doc_table/doc_table.less b/src/ui/public/doc_table/doc_table.less index 4f7b42eb4ff7d..64d4d51c503cd 100644 --- a/src/ui/public/doc_table/doc_table.less +++ b/src/ui/public/doc_table/doc_table.less @@ -31,3 +31,48 @@ doc-table { opacity: @loading-opacity; } } + +.kuiDocumentDetails { + display: flex; + max-height: 100px; + overflow-x: hidden; + overflow-y: hidden; + + &::-webkit-scrollbar { + width: 16px; + height: 16px; + } + + &::-webkit-scrollbar-thumb { + background-color: #ecf0f1; + border: 6px solid transparent; + background-clip: content-box; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } +} + +.kuiDocumentSource { + display: flex; + flex-direction: column; + flex-wrap: wrap; + margin-top: -4px; +} + +.kuiDocumentSourceItem { + width: 300px; + padding: 4px 2px 0; + margin-right: 2px; +} + + .kuiDocumentSourceItem__term { + word-wrap: break-word; + font-weight: bold; + } + + .kuiDocumentSourceItem__description { + word-wrap: break-word; + padding-bottom: 4px; + } diff --git a/src/ui/public/stringify/types/_source.html b/src/ui/public/stringify/types/_source.html index 8cebbbe5ac3ee..e700eb7139100 100644 --- a/src/ui/public/stringify/types/_source.html +++ b/src/ui/public/stringify/types/_source.html @@ -1,7 +1,9 @@ -
+
<% defPairs.forEach(function (def) { %> -
<%- def[0] %>:
-
<%= def[1] %>
+
+
<%- def[0] %>
+
<%= def[1] %>
+
<%= ' ' %> <% }); %> -
+ diff --git a/src/ui/public/styles/base.less b/src/ui/public/styles/base.less index 5d3685b2ee5c5..3f13d6e91a4fa 100644 --- a/src/ui/public/styles/base.less +++ b/src/ui/public/styles/base.less @@ -919,225 +919,4 @@ fieldset { } } - -// TODO: Extract these styles into the UI Framework. - -.kuiFormSection { - margin-bottom: 16px; -} - -.kuiFormLabel { - display: block; -} - -.kuiFormSubLabel { - display: block; - font-weight: normal; -} - -.kuiTextArea, -.kuiInput, -.kuiStaticInput { - display: block; - width: 100%; - font-size: 14px; - color: #2d2d2d; - border: 1px solid; - border-radius: 4px; -} - -.kuiStaticInput { - padding: 5px 0; - border-color: transparent; -} - -.kuiInput, -.kuiTextArea { - padding: 5px 15px; - border-color: #D4D4D4; -} - -.kuiSelect { - display: block; - width: 100%; - height: 32px; - padding: 5px 15px; - font-size: 14px; - line-height: 1.42857143; - color: #2D2D2D; - background-color: #ffffff; - background-image: none; - border: 1px solid #D4D4D4; - border-radius: 4px; -} - -/** - * 1. Override Bootstrap checkbox styles. - */ -.kuiCheckBox { - margin: 0 !important; // 1 -} - -.kuiSideBarSelect { - // TODO: @include kuiSelect styles when this is moved to the UI Framework and we're using SASS. - height: 24px; - font-size: 12px; - padding: 0 15px; -} - -.kuiSideBarInput { - // TODO: @include kuiInput styles when this is moved to the UI Framework and we're using SASS. - height: 24px; - font-size: 12px; -} - -.kuiSideBarSection { - margin-bottom: 6px; -} - -.kuiSideBarSectionTitle { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 6px; - border-bottom: 1px solid #D4D4D4; -} - -.kuiSideBarSectionTitle__text { - font-size: 14px; - font-weight: 700; - color: #5A5A5A; -} - -/** - * 1. Override Bootstrap button styles. - */ -.kuiSideBarSectionTitle__action { - background-color: transparent; // 1 - padding: 0; // 1 - cursor: pointer; - color: #328CAA; - - &:hover { - color: #105A73; - } -} - -.kuiSideBarCollapsibleTitle { - display: flex; - align-items: center; - justify-content: space-between; - width: 100%; - margin-bottom: 4px; - border-bottom: 1px solid #E8E8E8; -} - -.kuiSideBarCollapsibleTitle__label { - display: flex; - align-items: center; -} - -/** - * 1. Override FontAwesome .fa styles. - */ -.kuiSideBarCollapsibleTitle__caret { - width: 12px; - height: 12px; - font-size: 12px !important; // 1 - font-weight: 700; - color: #5A5A5A; -} - -.kuiSideBarCollapsibleTitle__text { - font-size: 12px; - font-weight: 700; - color: #5A5A5A; -} - -/** - * 1. Override Bootstrap button styles. - */ -.kuiSideBarCollapsibleTitle__action { - background-color: transparent; // 1 - padding: 0; // 1 - cursor: pointer; - color: #328CAA; - - &:hover { - color: #105A73; - } -} - -.kuiSideBarCollapsibleSection { - padding-left: 16px; -} - -/** - * 1. Override Bootstrap h1 styles. - */ -.kuiSideBarFormSectionTitle { - font-size: 12px; - font-weight: 700; - color: #5A5A5A; - border-bottom: 1px solid #E8E8E8; - margin: 4px 0 !important; // 1 - padding-bottom: 2px; -} - -.kuiSideBarFormRow { - display: flex; - align-items: center; - min-height: 24px; - margin-bottom: 1px; -} - -/** - * 1. Override .vis-editor-sidebar styles. - */ -.kuiSideBarFormRow__label { - display: flex; - align-items: center; - flex: 1 1 40% !important; // 1 - font-weight: 400; -} - -.kuiSideBarFormRow__label__colorbox { - width: 24px; - height: 24px; - display: inline-block; - margin-right: 10px; - border: 1px ridge lightgray; -} - -.kuiSideBarFormRow__control { - display: flex; - align-items: center; - flex: 1 1 60%; -} - -/** - * 1. Override .sidebar-item styles. - */ -.kuiSideBarOptionsLink { - display: flex; - align-items: baseline; - margin-bottom: 8px; - font-size: 12px; - color: #328CAA !important; // 1 - - &:hover { - color: #105A73 !important; // 1 - } -} - -.kuiSideBarOptionsLink__caret { - width: 10px; - height: 10px; -} - -.kuiSideBarOptionsLink__text { - margin-left: 2px; -} - - @import "~dragula/dist/dragula.css";