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

[ML] Fixes agg-type dropdowns size and styling. (#19816)

Browse source 
- Fixes an issue with cut off text within aggregation type dropdowns in the multi-metric and population wizard.
- Fixes the style of the dropdown to be consistent across browsers.
- Fixes 1px vertical offset between dropdown and trash-icon.
This commit is contained in:
Walter Rafelsberger 2018-06-13 17:31:55 +02:00 committed by GitHub
parent 49724b2996
commit 7b4e823d2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 64 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/fields_selection.html
View file

@ -21,13 +21,13 @@
{{field.name}}
</span>
</label>
<div>
<div class="agg-type-select-wrapper">
<select
ng-model="field.agg.type"
ng-options="agg as agg.title for agg in ui.aggTypeOptions | filterAggTypes:field"
ng-change="formChange()"
ng-disabled="formConfig.fields[field.id] === undefined || jobState === JOB_STATE.RUNNING || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED"
class="form-control agg-type">
class="form-control agg-type-select">
</select>
</div>
</div>

29
x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection/styles/main.less
View file

@ -33,10 +33,31 @@
}
}
.agg-type {
float: right;
width: 120px;
flex-grow: 0;
.agg-type-select-wrapper {
.agg-type-select {
float: right;
width: 130px;
flex-grow: 0;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
right: 10px;
top: 14px;
}
}
}
.field-row:first-child {

16
x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/fields_selection.html
View file

@ -40,13 +40,15 @@
</div>
<div>
<div class="agg-type">
<select
class="form-control"
ng-model="field.agg.type"
ng-options="agg as agg.title for agg in ui.aggTypeOptions | filterAggTypes:field"
ng-change="formChange()"
ng-disabled="formConfig.fields[$index] === undefined || jobState === JOB_STATE.RUNNING || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED">
</select>
<div class="agg-type-select-wrapper">
<select
class="form-control agg-type-select"
ng-model="field.agg.type"
ng-options="agg as agg.title for agg in ui.aggTypeOptions | filterAggTypes:field"
ng-change="formChange()"
ng-disabled="formConfig.fields[$index] === undefined || jobState === JOB_STATE.RUNNING || jobState === JOB_STATE.STOPPING || jobState === JOB_STATE.FINISHED">
</select>
</div>
<button
aria-label="Remove Detector"
ng-click="removeField($index, field)"

32
x-pack/plugins/ml/public/jobs/new_job/simple/components/fields_selection_population/styles/main.less
View file

@ -33,12 +33,37 @@
.agg-type {
float: right;
width: 152px;
width: 162px;
flex-grow: 0;
white-space: nowrap;
select {
width: 120px;
.agg-type-select-wrapper {
display: inline-block;
vertical-align: top;
.agg-type-select {
width: 130px;
flex-grow: 0;
padding: 5px 10px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
&::after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid #000;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
right: 43px;
top: 14px;
}
}
.remove-button {
@ -64,4 +89,3 @@
margin: 6px 2px 0px 0px;
}
}