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

Fix editor sidebar with long field names (#20455)

Browse source 
* Fix editor sidebar overflow

* Fix sidebar select overflow in Firefox

* Ellipsis too long field names in select
This commit is contained in:
Tim Roes 2018-07-05 09:00:31 +02:00 committed by GitHub
parent b0057d9eac
commit b4b309e4b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 32 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/core_plugins/kibana/public/visualize/editor/styles/_editor.less
View file

@ -4,6 +4,7 @@
@vis-editor-sidebar-min-width: 350px;
@vis-editor-nesting-width: 8px;
@vis-editor-agg-editor-spacing: 10px;
@vis-editor-resizer-width: 13px;
.vis-editor {
.flex-parent();
@ -75,7 +76,8 @@
.default-editor__resizer {
display: flex;
flex: 0 0 13px;
flex: 0 0 @vis-editor-resizer-width;
width: @vis-editor-resizer-width;
cursor: ew-resize;
background-color: @globalColorLightestGray;
align-items: center;
@ -153,6 +155,7 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
.vis-editor-sidebar {
.flex-parent(1, 0, auto);
max-width: ~"calc(100% - @{vis-editor-resizer-width})";
// overridden for tablet and desktop
@media (min-width: @screen-md-min) {
@ -228,6 +231,8 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
.vis-editor-agg {
.flex-parent();
width: 100%;
max-width: 100%;
//IE10/11 - prevent flex item from overflowing
flex-basis: 100%;
@ -264,14 +269,21 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
}
.vis-editor-agg-header-title {
flex: 1 1 auto;
flex: 0 0 auto;
.ellipsis();
font-weight: bold;
}
.vis-editor-agg-header-title--grow {
flex-grow: 1;
}
.vis-editor-agg-header-description {
font-weight: normal;
padding-right: @vis-editor-agg-editor-spacing;
padding-left: 5px;
.ellipsis();
flex: 1 1 0;
&.danger {
.text-danger();
@ -375,6 +387,15 @@ a tilemap in an iframe: https://github.com/elastic/kibana/issues/16457 */
* 1. Show invalid state if the user has interacted with the input without selecting an option.
*/
.vis-editor-field-ui-select {
.vis-editor-field-ui-select__field-entry {
.ellipsis();
}
.ui-select-match-text {
.ellipsis();
}
&.ng-invalid.ng-dirty,
&.ng-invalid.ng-touched {
.ui-select-match {

7
src/ui/public/agg_types/controls/field.html
View file

@ -21,7 +21,12 @@
kbn-scroll-bottom="limit = limit + 100"
repeat="field in indexedFields | filter: { displayName: $select.search } | sortPrefixFirst:$select.search:'name' | limitTo: limit"
>
<div data-test-subj="{{field.displayName}}" ng-bind-html="field.displayName | highlight: $select.search"></div>
<div
data-test-subj="{{field.displayName}}"
class="vis-editor-field-ui-select__field-entry"
ng-bind-html="field.displayName | highlight: $select.search"
title="{{field.displayName}}"
></div>
</ui-select-choices>
</ui-select>

6
src/ui/public/vis/editors/default/agg.html
View file

@ -14,17 +14,17 @@
</button>
<!-- title -->
<span class="vis-editor-agg-header-title">
<span class="vis-editor-agg-header-title" ng-class="{'vis-editor-agg-header-title--grow': editorOpen}">
{{ agg.schema.title }}
</span>
<!-- description -->
<span ng-if="!editorOpen && aggForm.$valid" class="vis-editor-agg-header-description">
<span ng-if="!editorOpen && aggForm.$valid" class="vis-editor-agg-header-description" title="{{describe()}}">
{{ describe() }}
</span>
<!-- error -->
<span ng-if="!editorOpen && aggForm.$invalid" class="vis-editor-agg-header-description danger">
<span ng-if="!editorOpen && aggForm.$invalid" class="vis-editor-agg-header-description danger" title="{{aggForm.describeErrors()}}">
{{ aggForm.describeErrors() }}
</span>