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

Visualize sidebar design updates (#29658)

Browse source 
* Bring over all ui-select styles and convert color vars

* Some bootstrap dark theming

* Consolidating non-EUI form control styles

* Update some tutorial pieces set to EUI

* Fix up visualize editor sidebar as best as I can

* PR feedback

- comment for image
- euiScrollbar
- euiBorderThick

* Fix advanced toggle test

* Don’t show IE’s select arrow
This commit is contained in:
Caroline Horn 2019-01-31 16:46:05 -05:00 committed by GitHub
parent 505873ee6e
commit 90554c1744
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
59 changed files with 2049 additions and 1766 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/kbn-ui-framework/dist/kui_dark.css vendored
View file

@ -467,7 +467,7 @@ main {
border-bottom-left-radius: 4px; }
.kuiButtonGroup--united .kuiButton + .kuiButton {
margin-left: 2px; }
margin-left: 0; }
.kuiButtonGroup--fullWidth {
display: -webkit-box;

2
packages/kbn-ui-framework/dist/kui_light.css vendored
View file

@ -467,7 +467,7 @@ main {
border-bottom-left-radius: 4px; }
.kuiButtonGroup--united .kuiButton + .kuiButton {
margin-left: 2px; }
margin-left: 0; }
.kuiButtonGroup--fullWidth {
display: -webkit-box;

2
packages/kbn-ui-framework/src/components/button/button_group/_button_group.scss
View file

@ -30,7 +30,7 @@
}
.kuiButton + .kuiButton {
margin-left: 2px;
margin-left: 0;
}
}

463
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/gauge_options.html
View file

@ -1,41 +1,41 @@
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__section">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="gaugeType"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.gaugeTypeLabel"
i18n-default-message="Gauge Type"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="gaugeType"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.gauge.gaugeType"
ng-options="mode for mode in collections.gaugeTypes"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="percentageMode"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.percentageModeLabel"
i18n-default-message="Percentage Mode"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.gauge.percentageMode">
</div>
</div>
<div class="kuiSideBarFormRow" ng-hide="editorState.params.gauge.type === 'simple'">
<div class="visEditorSidebar__formRow" ng-hide="editorState.params.gauge.type === 'simple'">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="verticalSplit"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.verticalSplitLabel"
i18n-default-message="Vertical Split"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="verticalSplit" type="checkbox" ng-model="editorState.params.gauge.verticalSplit">&nbsp;
<icon-tip
content="'Shows gauges one under another'"
@ -44,15 +44,15 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="displayWarnings"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.displayWarningsLabel"
i18n-default-message="Display warnings"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
&nbsp;
<icon-tip
@ -62,41 +62,41 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="addLegend"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLegendLabel"
i18n-default-message="Show Legend"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="addLegend" type="checkbox" ng-model="editorState.params.addLegend">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showLabels"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.gauge.labels.show">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.labels.show">
<div class="visEditorSidebar__formRow" ng-show="editorState.params.gauge.labels.show">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="subText"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.subTextLabel"
i18n-default-message="Sub Text"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
id="subText"
class="kuiInput kuiSideBarInput"
class="kuiInput visEditorSidebar__input"
ng-model="editorState.params.gauge.style.subText"
type="text"
>
@ -104,17 +104,17 @@
</div>
<div
class="kuiSideBarFormRow"
class="visEditorSidebar__formRow"
ng-hide="editorState.params.gauge.type === 'simple'"
ng-show="editorState.params.gauge.colorsRange.length > 1"
>
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="extendRange"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.autoExtendRangeLabel"
i18n-default-message="Auto Extend Range"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="extendRange" type="checkbox" ng-model="editorState.params.gauge.extendRange">
&nbsp;
<icon-tip
@ -124,274 +124,259 @@
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showColorRange}}"
aria-controls="gaugeOptionsRanges"
aria-label="Toggle range options"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showColorRange = !showColorRange"
>
<icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.rangesTitle"
i18n-default-message="Ranges"
></span>
</div>
</div>
<div id="gaugeOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
<tr>
<th scope="col">
<label
id="gaugeOptionsCustomRangeFrom"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fromTitle"
i18n-default-message="From"
></label>
</th>
<th scope="col" colspan="2">
<label
id="gaugeOptionsCustomRangeTo"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.toTitle"
i18n-default-message="To"
></label>
</th>
</tr>
<div id="gaugeOptionsRanges" ng-show="showColorRange">
<tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
required
step="any" />
</td>
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-or-equal-than="{{range.from}}"
required
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
ng-show="editorState.params.gauge.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.gauge.colorsRange.length">
<tr>
<th scope="col">
<label
id="gaugeOptionsCustomRangeFrom"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fromTitle"
i18n-default-message="From"
></label>
</th>
<th scope="col" colspan="2">
<label
id="gaugeOptionsCustomRangeTo"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.toTitle"
i18n-default-message="To"
></label>
</th>
</tr>
<div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<span
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.specifiedRangeNumberWarningMessage"
i18n-default-message="{required} You must specify at least one range."
i18n-values="{ html_required: '<strong>' + requiredText + '</strong>' }"
></span>
</p>
</div>
<tr ng-repeat="range in editorState.params.gauge.colorsRange track by $index">
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
required
step="any" />
</td>
<td>
<input
aria-labelledby="gaugeOptionsCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-or-equal-than="{{range.from}}"
required
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
ng-show="editorState.params.gauge.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>
<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
i18n-default-message="Add Range"
></div>
<div class="euiSpacer euiSpacer--s"></div>
<div
class="text text-center text-info"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
i18n-default-message="Note: colors can be changed in the legend"
></div>
<div class="hintbox" ng-show="!editorState.params.gauge.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<span
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.specifiedRangeNumberWarningMessage"
i18n-default-message="{required} You must specify at least one range."
i18n-values="{ html_required: '<strong>' + requiredText + '</strong>' }"
></span>
</p>
</div>
<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.addRangeTitle"
i18n-default-message="Add Range"
></div>
<div class="euiSpacer euiSpacer--s"></div>
<div
class="text text-center text-info"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.howToChangeColorsDescription"
i18n-default-message="Note: colors can be changed in the legend"
></div>
</div>
</div>
<div ng-show="editorState.params.gauge.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin" ng-show="editorState.params.gauge.colorsRange.length > 1">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showColorOptions}}"
aria-controls="gaugeOptionsColors"
aria-label="Toggle color options"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showColorOptions = !showColorOptions"
>
<icon color="'primary'" aria-hidden="true" ng-if="showColorOptions" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showColorOptions" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showColorOptions,
'fa-caret-right': !showColorOptions
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorOptionsTitle"
i18n-default-message="Color Options"
></span>
</div>
</div>
<div id="gaugeOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="colorSchema"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.gauge.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
</div>
<div
class="text-info text-center"
ng-show="customColors"
ng-click="resetColors()"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.resetColorsTitle"
i18n-default-message="reset colors"
></div>
</div>
<div id="gaugeOptionsColors" ng-if="showColorOptions">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="invertColors"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel"
i18n-default-message="Reverse Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="colorSchema"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="visEditorSidebar__formControl">
<select
id="colorSchema"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.gauge.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
</div>
<div
class="text-info text-center"
ng-show="customColors"
ng-click="resetColors()"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.resetColorsTitle"
i18n-default-message="reset colors"
></div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="invertColors"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.reverseColorSchemaLabel"
i18n-default-message="Reverse Color Schema"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.gauge.invertColors">
</div>
</div>
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showStyle}}"
aria-controls="gaugeOptionsStyle"
aria-label="Toggle style options"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showStyle = !showStyle"
>
<icon color="'primary'" aria-hidden="true" ng-if="showStyle" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showStyle" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showStyle,
'fa-caret-right': !showStyle
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.styleTitle"
i18n-default-message="Style"
></span>
</div>
</div>
<div id="gaugeOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div ng-hide="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
<label
class="kuiSideBarFormRow__label"
for="labelColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabelsLabel"
i18n-default-message="Color Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel"
i18n-default-message="Show Scale"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
</div>
<div id="gaugeOptionsStyle" ng-if="showStyle">
<div ng-hide="editorState.params.gauge.type === 'simple'">
<div class="visEditorSidebar__formRow" ng-show="editorState.params.gauge.colorsRange.length > 1">
<label
class="visEditorSidebar__formLabel"
for="labelColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabelsLabel"
i18n-default-message="Color Labels"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="labelColor" type="checkbox" ng-model="editorState.params.gauge.style.labelColor">
</div>
</div>
<div ng-show="editorState.params.gauge.type === 'simple'">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="gaugeColorMode"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabel"
i18n-default-message="Color"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="gaugeColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.gauge.gaugeColorMode"
ng-options="mode for mode in collections.gaugeColorMode"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="backColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.backTextColorLabel"
i18n-default-message="Back/Text Color"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="backTextColor"
class="kuiInput kuiSideBarInput"
ng-model="editorState.params.gauge.style.bgFill"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.gauge.style.fontSize }"
></label>
<div class="kuiSideBarFormRow__control">
<input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.showScaleLabel"
i18n-default-message="Show Scale"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showScale" type="checkbox" ng-model="editorState.params.gauge.scale.show">
</div>
</div>
</div>
<div ng-show="editorState.params.gauge.type === 'simple'">
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="gaugeColorMode"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.colorLabel"
i18n-default-message="Color"
></label>
<div class="visEditorSidebar__formControl">
<select
id="gaugeColorMode"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.gauge.gaugeColorMode"
ng-options="mode for mode in collections.gaugeColorMode"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="backColor"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.backTextColorLabel"
i18n-default-message="Back/Text Color"
></label>
<div class="visEditorSidebar__formControl">
<input
id="backTextColor"
class="kuiInput visEditorSidebar__input"
ng-model="editorState.params.gauge.style.bgFill"
>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="showScale"
i18n-id="kbnVislibVisTypes.controls.gaugeOptions.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.gauge.style.fontSize }"
></label>
<div class="visEditorSidebar__formControl">
<input type="range" ng-model="editorState.params.gauge.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>
</div>
</div>

310
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html
View file

@ -1,15 +1,15 @@
<div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="colorSchema"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
@ -24,71 +24,71 @@
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="invertColors"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.reverseColorSchemaLabel"
i18n-default-message="Reverse Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.invertColors">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="axisScale"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorScaleLabel"
i18n-default-message="Color Scale"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="axisScale"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.valueAxes[0].scale.type"
ng-options="mode for mode in collections.scales"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="defaultYExtents"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.scaleToDataBoundsLabel"
i18n-default-message="Scale to Data Bounds"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="defaultYExtents" type="checkbox" ng-model="editorState.params.valueAxes[0].scale.defaultYExtents">
</div>
</div>
<div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
<div class="visEditorSidebar__formRow" ng-if="!editorState.params.setColorRange">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="percentageMode"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.percentageModeLabel"
i18n-default-message="Percentage Mode"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.percentageMode">
</div>
</div>
<div class="kuiSideBarFormRow" ng-if="!editorState.params.setColorRange">
<div class="visEditorSidebar__formRow" ng-if="!editorState.params.setColorRange">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="colorsNumber"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorsNumberLabel"
i18n-default-message="Number of colors"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
data-test-subj="heatmapOptionsColorsNumberInput"
id="colorsNumber"
class="kuiSideBarInput"
class="visEditorSidebar__input"
ng-model="editorState.params.colorsNumber"
type="number"
greater-than="1"
@ -97,23 +97,21 @@
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="toggleColorRangeSection()"
kbn-accessible-click
aria-expanded="{{!!showColorRange}}"
aria-controls="heatmapOptionsRanges"
aria-label="Toggle custom ranges options"
>
<icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.customRangesTitle"
i18n-default-message="Custom Ranges"
></span>
@ -123,7 +121,6 @@
aria-label="Enable custom ranges"
ng-model="editorState.params.setColorRange"
type="checkbox"
class="kuiSideBarSectionTitle__action"
ng-click="toggleColorRangeSection(true)"
kbn-accessible-click
>
@ -133,109 +130,104 @@
id="heatmapOptionsRanges"
ng-if="editorState.params.setColorRange"
ng-show="showColorRange"
class="kuiSideBarCollapsibleSection"
>
<div class="kuiSideBarSection">
<table
data-test-subj="heatmapCustomRangesTable"
class="visEditorAgg__rangesTable form-group"
ng-show="editorState.params.colorsRange.length">
<tr>
<th scope="col">
<label
id="heatmapCustomRangeFrom"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.fromLabel"
i18n-default-message="From"
></label>
</th>
<th scope="col" colspan="2">
<label
id="heatmapCustomRangeTo"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.toLabel"
i18n-default-message="To"
></label>
</th>
</tr>
<tr ng-repeat="range in editorState.params.colorsRange track by $index">
<td>
<input
aria-labelledby="heatmapCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
step="any" />
</td>
<td>
<input
aria-labelledby="heatmapCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-than="range.from"
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
class="kuiButton kuiButton--danger kuiButton--small"
>
<span class="kuiIcon fa-times"></span>
</button>
</td>
</tr>
</table>
<table
data-test-subj="heatmapCustomRangesTable"
class="visEditorAgg__rangesTable form-group"
ng-show="editorState.params.colorsRange.length">
<tr>
<th scope="col">
<label
id="heatmapCustomRangeFrom"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.fromLabel"
i18n-default-message="From"
></label>
</th>
<th scope="col" colspan="2">
<label
id="heatmapCustomRangeTo"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.toLabel"
i18n-default-message="To"
></label>
</th>
</tr>
<div class="hintbox" ng-show="!editorState.params.colorsRange.length">
<p
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.specifiedRangeNumberWarningMessage"
i18n-default-message="{icon} {required} You must specify at least one range."
i18n-values="{
html_icon: '<span class=\'kuiIcon fa-danger text-danger\'></span>',
html_required: '<strong>' + requiredText + '</strong>'
}"
></p>
</div>
<tr ng-repeat="range in editorState.params.colorsRange track by $index">
<td>
<input
aria-labelledby="heatmapCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
step="any" />
</td>
<td>
<input
aria-labelledby="heatmapCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-than="range.from"
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
class="kuiButton kuiButton--danger kuiButton--small"
>
<span class="kuiIcon fa-times"></span>
</button>
</td>
</tr>
</table>
<button
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
data-test-subj="heatmapAddRangeButton"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.addRangeButtonLabel"
i18n-default-message="Add Range"
></button>
<div class="euiSpacer euiSpacer--s"></div>
<div
class="text text-center text-info"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.howToChangeColorsDescription"
i18n-default-message="Note: colors can be changed in the legend"
></div>
<div class="hintbox" ng-show="!editorState.params.colorsRange.length">
<p
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.specifiedRangeNumberWarningMessage"
i18n-default-message="{icon} {required} You must specify at least one range."
i18n-values="{
html_icon: '<span class=\'kuiIcon fa-danger text-danger\'></span>',
html_required: '<strong>' + requiredText + '</strong>'
}"
></p>
</div>
<button
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
data-test-subj="heatmapAddRangeButton"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.addRangeButtonLabel"
i18n-default-message="Add Range"
></button>
<div class="euiSpacer euiSpacer--s"></div>
<div
class="text text-center text-info"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.howToChangeColorsDescription"
i18n-default-message="Note: colors can be changed in the legend"
></div>
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="toggleLabelSection()"
kbn-accessible-click
aria-expanded="{{!!showLabels}}"
aria-controls="heatmapOptionsLabels"
>
<icon color="'primary'" aria-hidden="true" ng-if="showLabels" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showLabels" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showLabels,
'fa-caret-right': !showLabels
}"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.showLabelsTitle"
i18n-default-message="Show Labels"
></span>
@ -244,56 +236,54 @@
aria-label="Show labels"
ng-model="editorState.params.valueAxes[0].labels.show"
type="checkbox"
class="kuiSideBarSectionTitle__action"
>
</div>
<div
id="heatmapOptionsLabels"
ng-if="editorState.params.valueAxes[0].labels.show"
ng-show="showLabels"
class="kuiSideBarCollapsibleSection"
>
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="rotateLabels"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="overwriteColor"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel"
i18n-default-message="Overwrite automatic color"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
<label
class="kuiSideBarFormRow__label"
for="labelColor"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorLabel"
i18n-default-message="Color"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="labelColor"
class="kuiSideBarInput"
ng-model="editorState.params.valueAxes[0].labels.color"
>
</div>
<div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
<label
class="visEditorSidebar__formLabel"
for="rotateLabels"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="rotateLabels" type="checkbox" ng-model="options.rotateLabels">
</div>
</div>
<div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
<label
class="visEditorSidebar__formLabel"
for="overwriteColor"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.overwriteAutomaticColorLabel"
i18n-default-message="Overwrite automatic color"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="editorState.params.valueAxes[0].labels.overwriteColor">
</div>
</div>
<div class="visEditorSidebar__formRow" ng-show="editorState.params.valueAxes[0].labels.overwriteColor">
<label
class="visEditorSidebar__formLabel"
for="labelColor"
i18n-id="kbnVislibVisTypes.controls.heatmapOptions.colorLabel"
i18n-default-message="Color"
></label>
<div class="visEditorSidebar__formControl">
<input
id="labelColor"
class="visEditorSidebar__input"
ng-model="editorState.params.valueAxes[0].labels.color"
>
</div>
</div>
</div>
</div>

199
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/category_axis.html
View file

@ -1,64 +1,60 @@
<div class="kuiSideBarSection kuiSideBarSection__main">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section kuiSideBarSection__main">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.xAxisTitle"
i18n-default-message="X-Axis"
></div>
</div>
<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShow"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabel"
i18n-default-message="Show"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisPosition"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel"
i18n-default-message="Position"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="categoryAxisPosition"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.categoryAxes[0].position"
ng-options="mode for mode in vis.type.editorConfig.collections.positions"
></select>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisShow"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabel"
i18n-default-message="Show"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="categoryAxisShow" type="checkbox" ng-model="editorState.params.categoryAxes[0].show">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisPosition"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.positionLabel"
i18n-default-message="Position"
></label>
<div class="visEditorSidebar__formControl">
<select
id="categoryAxisPosition"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.categoryAxes[0].position"
ng-options="mode for mode in vis.type.editorConfig.collections.positions"
></select>
</div>
</div>
<!-- Advanced options -->
<div class="kuiSideBarSection">
<div class="visEditorSidebar__collapsible--margin">
<a
class="kuiSideBarOptionsLink small"
class="small"
ng-click="isCategoryAxisAdvancedOptionsOpen = !isCategoryAxisAdvancedOptionsOpen"
kbn-accessible-click
>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isCategoryAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isCategoryAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': isCategoryAxisAdvancedOptionsOpen, 'fa-caret-right': !isCategoryAxisAdvancedOptionsOpen }"
class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="!isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showAdvancedOptionsLabel"
i18n-default-message="Show Advanced Options"
></span>
<span
class="kuiSideBarOptionsLink__text"
ng-show="isCategoryAxisAdvancedOptionsOpen"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.hideAdvancedOptionsLabel"
i18n-default-message="Hide Advanced Options"
@ -67,71 +63,70 @@
<div ng-show="isCategoryAxisAdvancedOptionsOpen">
<!-- Labels -->
<div class="kuiSideBarSection">
<h6
class="kuiSideBarFormSectionTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
i18n-default-message="Labels"
></h6>
<h6
class="visEditorSidebar__formTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.labelsTitle"
i18n-default-message="Labels"
></h6>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShowLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisShowFilter"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel"
i18n-default-message="Filter Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisRotateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="categoryAxisRotateLabels"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.categoryAxes[0].labels.rotate"
ng-options="mode.value as mode.name for mode in rotateOptions"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="categoryAxisTruncateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="categoryAxisTruncateLabels"
class="kuiInput kuiSideBarInput"
type="number"
ng-model="editorState.params.categoryAxes[0].labels.truncate"
>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisShowLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="categoryAxisShowLabels" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.show">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisShowFilter"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.filterLabelsLabel"
i18n-default-message="Filter Labels"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="categoryAxisShowFilter" type="checkbox" ng-model="editorState.params.categoryAxes[0].labels.filter">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisRotateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="visEditorSidebar__formControl">
<select
id="categoryAxisRotateLabels"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.categoryAxes[0].labels.rotate"
ng-options="mode.value as mode.name for mode in rotateOptions"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="categoryAxisTruncateLabels"
i18n-id="kbnVislibVisTypes.controls.pointSeries.categoryAxis.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="visEditorSidebar__formControl">
<input
id="categoryAxisTruncateLabels"
class="kuiInput visEditorSidebar__input"
type="number"
ng-model="editorState.params.categoryAxes[0].labels.truncate"
>
</div>
</div>
</div>
</div>

85
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/grid.html
View file

@ -1,64 +1,59 @@
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="isGridOpen = !isGridOpen"
kbn-accessible-click
aria-expanded="{{!!isGridOpen}}"
aria-controls="visGridOptions"
aria-label="Toggle grid options"
>
<icon color="'primary'"aria-hidden="true"ng-if="isGridOpen"type="'arrowDown'"size="'s'"></icon>
<icon color="'primary'"aria-hidden="true"ng-if="!isGridOpen"type="'arrowRight'"size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': isGridOpen, 'fa-caret-right': !isGridOpen }"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.gridText"
i18n-default-message="Grid"
></span>
</div>
</div>
<div id="visGridOptions" ng-show="isGridOpen" class="kuiSideBarCollapsibleSection">
<div id="visGridOptions" ng-show="isGridOpen">
<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="showCategoryLines"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel"
i18n-default-message="X-Axis Lines"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="showCategoryLines"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.xAxisLinesLabel"
i18n-default-message="X-Axis Lines"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showCategoryLines" type="checkbox" ng-model="editorState.params.grid.categoryLines">
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="gridAxis"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel"
i18n-default-message="Y-Axis Lines"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="gridAxis"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.grid.valueAxis"
ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
>
<option
value=""
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel"
i18n-default-message="Don't show"
></option>
</select>
</div>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="gridAxis"
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.yAxisLinesLabel"
i18n-default-message="Y-Axis Lines"
></label>
<div class="visEditorSidebar__formControl">
<select
id="gridAxis"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.grid.valueAxis"
ng-options="axis.id as axis.name for axis in editorState.params.valueAxes track by axis.id"
>
<option
value=""
i18n-id="kbnVislibVisTypes.controls.pointSeries.gridAxis.dontShowLabel"
i18n-default-message="Don't show"
></option>
</select>
</div>
</div>
</div>
</div>

243
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/series.html
View file

@ -1,7 +1,6 @@
<div class="kuiSideBarSection kuiSideBarSection__main">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section kuiSideBarSection__main">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.metricsTitle"
i18n-default-message="Metrics"
></div>
@ -9,155 +8,149 @@
<div
ng-repeat="chart in editorState.params.seriesParams track by $index"
class="kuiSideBarSection"
class="visEditorSidebar__section visEditorSidebar__collapsible"
>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsibleTitle">
<div
ng-init="isSeriesOpen = ($index === 0)"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="isSeriesOpen = !isSeriesOpen"
kbn-accessible-click
aria-expanded="{{!!isSeriesOpen}}"
aria-controls="visSeriesOptions{{$index}}"
aria-label="Toggle {{chart.data.label}} options"
>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': isSeriesOpen, 'fa-caret-right': !isSeriesOpen }"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
<icon color="'primary'" aria-hidden="true" ng-if="isSeriesOpen" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!isSeriesOpen" type="'arrowRight'" size="'s'"></icon>
<span class="visEditorSidebar__collapsibleTitleText">
{{chart.data.label}}
</span>
</div>
</div>
<div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen" class="kuiSideBarCollapsibleSection">
<div id="visSeriesOptions{{$index}}" ng-show="isSeriesOpen">
<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesType' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
i18n-default-message="Chart Type"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'seriesType' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="chart.type"
ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
></select>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'seriesType' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.chartTypeLabel"
i18n-default-message="Chart Type"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'seriesType' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="chart.type"
ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.chartTypes"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
i18n-default-message="Mode"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'seriesMode' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="chart.mode"
ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
></select>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'seriesMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.modeLabel"
i18n-default-message="Mode"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'seriesMode' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="chart.mode"
ng-options="mode for mode in vis.type.editorConfig.collections.chartModes"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'seriesValueAxis' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
i18n-default-message="Value Axis"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'seriesValueAxis' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="chart.valueAxis"
ng-change="changeValueAxis($index)"
>
<option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
<option
value="new"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
i18n-default-message="New Axis…"
></option>
</select>
</div>
</div>
<div ng-show="chart.type == 'line' || chart.type == 'area'">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'seriesValueAxis' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.valueAxisLabel"
i18n-default-message="Value Axis"
class="visEditorSidebar__formLabel"
for="{{ 'lineMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
i18n-default-message="Line Mode"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="{{ 'seriesValueAxis' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="chart.valueAxis"
ng-change="changeValueAxis($index)"
id="{{ 'lineMode' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="chart.interpolate"
ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
>
<option ng-repeat="axis in editorState.params.valueAxes track by axis.id" value="{{axis.id}}">{{axis.name}}</option>
<option
value="new"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.newAxisLabel"
i18n-default-message="New Axis…"
></option>
</select>
</div>
</div>
<div ng-show="chart.type == 'line' || chart.type == 'area'">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'lineMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineModeLabel"
i18n-default-message="Line Mode"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'lineMode' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="chart.interpolate"
ng-options="mode.value as mode.text for mode in vis.type.editorConfig.collections.interpolationModes"
>
</select>
</div>
</div>
</div>
<div ng-show="chart.type == 'line'">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'drawLines' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
i18n-default-message="Show Line"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'showCircles' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
i18n-default-message="Show Circles"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
i18n-default-message="Line Width"
></label>
<div class="kuiSideBarFormRow__control">
<input name="lineWidth"
class="kuiInput kuiSideBarInput"
type="number"
step="0.5"
ng-model="chart.lineWidth"
>
</div>
</div>
</div>
</div>
<div ng-show="chart.type == 'line'">
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'drawLines' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showLineLabel"
i18n-default-message="Show Line"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{{ 'drawLines' + $index }}" type="checkbox" ng-model="chart.drawLinesBetweenPoints">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'showCircles' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.showCirclesLabel"
i18n-default-message="Show Circles"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{{ 'showCircles' + $index }}" type="checkbox" ng-model="chart.showCircles">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
i18n-id="kbnVislibVisTypes.controls.pointSeries.series.lineWidthLabel"
i18n-default-message="Line Width"
></label>
<div class="visEditorSidebar__formControl">
<input name="lineWidth"
class="kuiInput visEditorSidebar__input"
type="number"
step="0.5"
ng-model="chart.lineWidth"
>
</div>
</div>
</div>
</div>
</div>
<div style="height: 10px"></div>
</div>

487
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/point_series/value_axes.html
View file

@ -1,7 +1,6 @@
<div class="kuiSideBarSection kuiSideBarSection__main">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section kuiSideBarSection__main">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.yAxisTitle"
i18n-default-message="Y-Axes"
></div>
@ -13,35 +12,34 @@
tooltip="Add Y axis"
tooltip-append-to-body="true"
type="button"
class="kuiIcon fa-plus kuiSideBarSectionTitle__action"
></button>
>
<icon color="'primary'" aria-hidden="true" type="'plusInCircleFilled'" size="'m'"></icon>
</button>
</div>
<div
ng-repeat="axis in editorState.params.valueAxes track by axis.id"
class="kuiSideBarSection"
class="visEditorSidebar__section visEditorSidebar__collapsible"
>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsibleTitle">
<div
data-test-subj="toggleYAxisOptions-{{axis.id}}"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="isValueAxisOpen = !isValueAxisOpen"
kbn-accessible-click
aria-expanded="{{!!isValueAxisOpen}}"
aria-controls="axisOptions{{axis.id}}"
aria-label="Toggle {{axis.name}} options"
>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': isValueAxisOpen, 'fa-caret-right': !isValueAxisOpen }"
class="kuiIcon fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span class="kuiSideBarCollapsibleTitle__text">
<icon class="kuiSideBarOptionsLink__caret" color="'primary'" aria-hidden="true" ng-if="isValueAxisOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="kuiSideBarOptionsLink__caret" color="'primary'" aria-hidden="true" ng-if="!isValueAxisOpen" type="'arrowRight'" size="'s'"></icon>
<span class="visEditorSidebar__collapsibleTitleText">
{{axis.name}}
</span>
</div>
<div tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
<div class="visEditorSidebar__collapsibleTitleDescription" tooltip="{{getSeries(axis)}}">{{getSeriesShort(axis)}}</div>
<button
ng-hide="editorState.params.valueAxes.length === 1"
@ -50,109 +48,108 @@
tooltip="Remove Y axis"
tooltip-append-to-body="true"
type="button"
class="kuiIcon fa-remove kuiSideBarCollapsibleTitle__action"
></button>
>
<icon color="'danger'" aria-hidden="true" type="'cross'" size="'m'"></icon>
</button>
</div>
<div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen" class="kuiSideBarCollapsibleSection">
<div id="axisOptions{{axis.id}}" ng-show="isValueAxisOpen">
<!-- General -->
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{ 'valueAxisShow' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel"
i18n-default-message="Show"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisTitle' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel"
i18n-default-message="Title"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="{{ 'valueAxisTitle' + $index }}"
class="kuiInput kuiSideBarInput"
type="text"
ng-model="axis.title.text"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisPosition' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.positionLabel"
i18n-default-message="Position"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'valueAxisPosition' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-change="updateAxisName(axis)"
ng-model="axis.position"
ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.modeLabel"
i18n-default-message="Mode"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'valueAxisMode' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="axis.scale.mode"
ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisScaleType' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleTypeLabel"
i18n-default-message="Scale Type"
></label>
<div class="kuiSideBarFormRow__control">
<select
data-test-subj="scaleSelectYAxis-{{axis.id}}"
id="{{ 'valueAxisScaleType' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="axis.scale.type"
ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
></select>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{ 'valueAxisShow' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabel"
i18n-default-message="Show"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{ 'valueAxisShow' + $index }" type="checkbox" ng-model="axis.show">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisTitle' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.titleLabel"
i18n-default-message="Title"
></label>
<div class="visEditorSidebar__formControl">
<input
id="{{ 'valueAxisTitle' + $index }}"
class="kuiInput visEditorSidebar__input"
type="text"
ng-model="axis.title.text"
>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisPosition' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.positionLabel"
i18n-default-message="Position"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'valueAxisPosition' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-change="updateAxisName(axis)"
ng-model="axis.position"
ng-options="mode disable when isPositionDisabled(mode) for mode in vis.type.editorConfig.collections.positions"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisMode' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.modeLabel"
i18n-default-message="Mode"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'valueAxisMode' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="axis.scale.mode"
ng-options="mode for mode in vis.type.editorConfig.collections.axisModes"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisScaleType' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleTypeLabel"
i18n-default-message="Scale Type"
></label>
<div class="visEditorSidebar__formControl">
<select
data-test-subj="scaleSelectYAxis-{{axis.id}}"
id="{{ 'valueAxisScaleType' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="axis.scale.type"
ng-options="type for type in vis.type.editorConfig.collections.scaleTypes"
></select>
</div>
</div>
<!-- Advanced options -->
<div class="kuiSideBarSection">
<div class="visEditorSidebar__collapsible--margin">
<a
data-test-subj="toggleYAxisAdvancedOptions-{{axis.id}}"
class="kuiSideBarOptionsLink small"
class="small"
ng-click="isValueAxisAdvancedOptionsOpen = !isValueAxisAdvancedOptionsOpen"
kbn-accessible-click
>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': isValueAxisAdvancedOptionsOpen, 'fa-caret-right': !isValueAxisAdvancedOptionsOpen }"
class="kuiIcon fa-caret-right kuiSideBarOptionsLink__caret"
></span>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="isValueAxisAdvancedOptionsOpen" type="'arrowDown'" size="'s'"></icon>
<icon class="visEditorSidebar__advancedLinkIcon" color="'primary'" aria-hidden="true" ng-if="!isValueAxisAdvancedOptionsOpen" type="'arrowRight'" size="'s'"></icon>
<span
class="kuiSideBarOptionsLink__text"
ng-show="!isValueAxisAdvancedOptionsOpen"
@ -170,158 +167,154 @@
<div ng-show="isValueAxisAdvancedOptionsOpen">
<!-- Labels -->
<div class="kuiSideBarSection">
<h6
class="kuiSideBarFormSectionTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.labelsTitle"
i18n-default-message="Labels"
></h6>
<h6
class="visEditorSidebar__formTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.labelsTitle"
i18n-default-message="Labels"
></h6>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisShowLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{{ 'valueAxisShowLabels' + $index }}" type="checkbox" ng-model="axis.labels.show">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisFilterLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.filterLabelsLabel"
i18n-default-message="Filter Labels"
></label>
<div class="kuiSideBarFormRow__control">
<input
data-test-subj="yAxisFilterLabelsCheckbox-{{axis.id}}"
class="kuiCheckBox"
id="{{ 'valueAxisFilterLabels' + $index }}"
type="checkbox"
ng-model="axis.labels.filter"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisRotateLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="kuiSideBarFormRow__control">
<select
id="{{ 'valueAxisRotateLabels' + $index }}"
class="kuiSelect kuiSideBarSelect"
ng-model="axis.labels.rotate"
ng-options="mode.value as mode.name for mode in rotateOptions"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{{ 'valueAxisTruncateLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="kuiSideBarFormRow__control">
<input
id="{{ 'valueAxisTruncateLabels' + $index }}"
class="kuiInput kuiSideBarInput"
type="number"
ng-model="axis.labels.truncate"
>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisShowLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{{ 'valueAxisShowLabels' + $index }}" type="checkbox" ng-model="axis.labels.show">
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisFilterLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.filterLabelsLabel"
i18n-default-message="Filter Labels"
></label>
<div class="visEditorSidebar__formControl">
<input
data-test-subj="yAxisFilterLabelsCheckbox-{{axis.id}}"
class="kuiCheckBox"
id="{{ 'valueAxisFilterLabels' + $index }}"
type="checkbox"
ng-model="axis.labels.filter"
>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisRotateLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.rotateLabel"
i18n-default-message="Rotate"
></label>
<div class="visEditorSidebar__formControl">
<select
id="{{ 'valueAxisRotateLabels' + $index }}"
class="kuiSelect visEditorSidebar__select"
ng-model="axis.labels.rotate"
ng-options="mode.value as mode.name for mode in rotateOptions"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
for="{{ 'valueAxisTruncateLabels' + $index }}"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="visEditorSidebar__formControl">
<input
id="{{ 'valueAxisTruncateLabels' + $index }}"
class="kuiInput visEditorSidebar__input"
type="number"
ng-model="axis.labels.truncate"
>
</div>
</div>
<!-- Custom Extents -->
<div class="kuiSideBarSection">
<h6
class="kuiSideBarFormSectionTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.customExtentsTitle"
i18n-default-message="Custom Extents"
></h6>
<h6
class="visEditorSidebar__formTitle"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.customExtentsTitle"
i18n-default-message="Custom Extents"
></h6>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{ 'defaultYExtents' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBoundsLabel"
i18n-default-message="Scale to Data Bounds"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
for="{ 'setYExtents' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.setAxisExtentsLabel"
i18n-default-message="Set Axis Extents"
></label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
</div>
</div>
<div ng-if="axis.scale.setYExtents">
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.maxLabel"
i18n-default-message="Max"
></label>
<div class="kuiSideBarFormRow__control">
<input
name="yMax"
class="kuiInput kuiSideBarInput"
type="number"
step="0.1"
ng-model="axis.scale.max"
>
</div>
</div>
<div class="kuiSideBarFormRow">
<label
class="kuiSideBarFormRow__label"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minLabel"
i18n-default-message="Min"
></label>
<div class="kuiSideBarFormRow__control">
<input
name="yMin"
class="kuiInput kuiSideBarInput"
type="number"
step="0.1"
greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
ng-model="axis.scale.min"
>
</div>
</div>
<div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
<span
class="text-danger"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minNeededScaleText"
i18n-default-message="Min must exceed 0 when a log scale is selected"
></span>
</div>
<div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
<label
class="visEditorSidebar__formLabel"
for="{ 'defaultYExtents' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.scaleToDataBoundsLabel"
i18n-default-message="Scale to Data Bounds"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{ 'defaultYExtents' + $index }" type="checkbox" ng-model="axis.scale.defaultYExtents">
</div>
</div>
<div class="visEditorSidebar__formRow visEditorSidebar__formRow--expand">
<label
class="visEditorSidebar__formLabel"
for="{ 'setYExtents' + $index }"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.setAxisExtentsLabel"
i18n-default-message="Set Axis Extents"
></label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="{ 'setYExtents' + $index }" type="checkbox" ng-model="axis.scale.setYExtents" ng-change="updateExtents(axis)">
</div>
</div>
<div ng-if="axis.scale.setYExtents">
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.maxLabel"
i18n-default-message="Max"
></label>
<div class="visEditorSidebar__formControl">
<input
name="yMax"
class="kuiInput visEditorSidebar__input"
type="number"
step="0.1"
ng-model="axis.scale.max"
>
</div>
</div>
<div class="visEditorSidebar__formRow">
<label
class="visEditorSidebar__formLabel"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minLabel"
i18n-default-message="Min"
></label>
<div class="visEditorSidebar__formControl">
<input
name="yMin"
class="kuiInput visEditorSidebar__input"
type="number"
step="0.1"
greater-than="{{axis.scale.type === 'log' ? 0 : ''}}"
ng-model="axis.scale.min"
>
</div>
</div>
<div ng-show="axis.scale.type === 'log' && axis.scale.min <= 0">
<span
class="text-danger"
i18n-id="kbnVislibVisTypes.controls.pointSeries.valueAxes.minNeededScaleText"
i18n-default-message="Min must exceed 0 when a log scale is selected"
></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="height: 10px"></div>
</div>

12
src/legacy/core_plugins/kbn_vislib_vis_types/public/controls/vislib_basic_options.html
View file

@ -1,12 +1,12 @@
<div class="form-group">
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="visualizeBasicSettingsLegendPosition"
i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.legendPositionLabel"
i18n-default-message="Legend Position"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="visualizeBasicSettingsLegendPosition"
class="form-control"
@ -17,14 +17,14 @@
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showTooltip"
i18n-id="kbnVislibVisTypes.controls.vislibBasicOptions.showTooltipLabel"
i18n-default-message="Show Tooltip"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input id="showTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>

30
src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/heatmap.html
View file

@ -1,47 +1,46 @@
<div class="kuiSideBarSection">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.editors.heatmap.basicSettingsTitle"
i18n-default-message="Basic Settings"
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="addTooltip"
i18n-id="kbnVislibVisTypes.editors.heatmap.showTooltipsLabel"
i18n-default-message="Show Tooltips"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="addTooltip" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="enableHover"
i18n-id="kbnVislibVisTypes.editors.heatmap.highlightLabel"
i18n-default-message="Highlight"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="enableHover" type="checkbox" ng-model="editorState.params.enableHover">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.addLegend">
<div class="visEditorSidebar__formRow" ng-show="editorState.params.addLegend">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="legendPosition"
i18n-id="kbnVislibVisTypes.editors.heatmap.legendPositionLabel"
i18n-default-message="Legend Position"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="legendPosition"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.legendPosition"
ng-options="position.value as position.text for position in vis.type.editorConfig.collections.legendPositions"
></select>
@ -49,11 +48,10 @@
</div>
</div>
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.editors.heatmap.heatmapSettingsTitle"
i18n-default-message="Heatmap Settings"
></div>

42
src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/pie.html
View file

@ -1,21 +1,20 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.editors.pie.pieSettingsTitle"
i18n-default-message="Pie Settings"
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="isDonut"
i18n-id="kbnVislibVisTypes.editors.pie.donutLabel"
i18n-default-message="Donut"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input id="isDonut" name="isDonut" type="checkbox" value="{{isDonut}}"
ng-checked="editorState.params.isDonut"
ng-model="editorState.params.isDonut"
@ -28,63 +27,62 @@
</div>
<!-- Labels -->
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.editors.pie.labelsSettingsTitle"
i18n-default-message="Labels Settings"
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showLabels"
i18n-id="kbnVislibVisTypes.editors.pie.showLabelsLabel"
i18n-default-message="Show Labels"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.labels.show">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showLastLevel"
i18n-id="kbnVislibVisTypes.editors.pie.showTopLevelOnlyLabel"
i18n-default-message="Show Top Level Only"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showLastLevel" type="checkbox" ng-model="editorState.params.labels.last_level">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showValues"
i18n-id="kbnVislibVisTypes.editors.pie.showValuesLabel"
i18n-default-message="Show Values"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showValues" type="checkbox" ng-model="editorState.params.labels.values">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="truncateLabels"
i18n-id="kbnVislibVisTypes.editors.pie.truncateLabel"
i18n-default-message="Truncate"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
id="truncateLabels"
class="kuiInput kuiSideBarInput"
class="kuiInput visEditorSidebar__input"
type="number"
ng-model="editorState.params.labels.truncate"
>

31
src/legacy/core_plugins/kbn_vislib_vis_types/public/editors/point_series.html
View file

@ -1,51 +1,50 @@
<div>
<!-- Global settings -->
<div class="kuiSideBarSection">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="kbnVislibVisTypes.editors.pointSeries.settingsTitle"
i18n-default-message="Settings"
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="legendPosition"
i18n-id="kbnVislibVisTypes.editors.pointSeries.legendPositionLabel"
i18n-default-message="Legend Position"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="legendPosition"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.legendPosition"
ng-options="position for position in ['top', 'left', 'right', 'bottom']"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showCursor"
i18n-id="kbnVislibVisTypes.editors.pointSeries.showTooltipLabel"
i18n-default-message="Show Tooltip"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showCursor" type="checkbox" ng-model="editorState.params.addTooltip">
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
<div class="visEditorSidebar__formRow" ng-show="vis.hasSchemaAgg('segment', 'date_histogram')">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="currentTimeMarker"
i18n-id="kbnVislibVisTypes.editors.pointSeries.currentTimeMarkerLabel"
i18n-default-message="Current Time Marker"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="currentTimeMarker" type="checkbox"
ng-model="editorState.params.addTimeMarker"
ng-checked="editorState.params.addTimeMarker"
@ -53,14 +52,14 @@
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
<div class="visEditorSidebar__formRow" ng-show="!vis.hasSchemaAgg('segment', 'date_histogram')">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="orderBuckets"
i18n-id="kbnVislibVisTypes.editors.pointSeries.orderBucketsBySumLabel"
i18n-default-message="Order Buckets by Sum"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="orderBuckets" type="checkbox" ng-model="editorState.params.orderBucketsBySum">
</div>
</div>

240
src/legacy/core_plugins/kibana/public/home/components/tutorial/__snapshots__/instruction_set.test.js.snap
View file

@ -1,23 +1,35 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`render 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>
@ -79,23 +91,35 @@ exports[`render 1`] = `
`;
exports[`statusCheckState checking status 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>
@ -200,23 +224,35 @@ exports[`statusCheckState checking status 1`] = `
`;
exports[`statusCheckState failed status check - error 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>
@ -326,23 +362,35 @@ exports[`statusCheckState failed status check - error 1`] = `
`;
exports[`statusCheckState failed status check - no data 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>
@ -452,23 +500,35 @@ exports[`statusCheckState failed status check - no data 1`] = `
`;
exports[`statusCheckState initial state - no check has been attempted 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>
@ -573,23 +633,35 @@ exports[`statusCheckState initial state - no check has been attempted 1`] = `
`;
exports[`statusCheckState successful status check 1`] = `
<div
className="kuiVerticalRhythmLarge"
>
<KuiBar
className="kuiVerticalRhythm"
<div>
<EuiFlexGroup
alignItems="stretch"
component="div"
direction="row"
gutterSize="l"
justifyContent="spaceBetween"
responsive={false}
wrap={true}
>
<KuiBarSection>
<div
className="kuiTitle"
<EuiFlexItem
component="div"
grow={false}
>
<EuiTitle
size="m"
textTransform="none"
>
title1
</div>
</KuiBarSection>
<KuiBarSection />
</KuiBar>
<h2>
title1
</h2>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem
component="div"
grow={false}
/>
</EuiFlexGroup>
<EuiTabs
className="kuiVerticalRhythm"
expand={false}
size="m"
>

60
src/legacy/core_plugins/kibana/public/home/components/tutorial/instruction_set.js
View file

@ -17,13 +17,8 @@
* under the License.
*/
import classNames from 'classnames';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import {
KuiBar,
KuiBarSection,
} from '@kbn/ui-framework/components';
import { Instruction } from './instruction';
import { ParameterForm } from './parameter_form';
import { Content } from './content';
@ -37,6 +32,8 @@ import {
EuiFlexItem,
EuiButton,
EuiCallOut,
EuiButtonEmpty,
EuiTitle,
} from '@elastic/eui';
import * as StatusCheckStates from './status_check_states';
@ -222,44 +219,37 @@ class InstructionSetUi extends React.Component {
renderHeader = () => {
let paramsVisibilityToggle;
if (this.props.params) {
const visibilityToggleClasses = classNames('kuiIcon kuiSideBarCollapsibleTitle__caret', {
'fa-caret-right': !this.state.isParamFormVisible,
'fa-caret-down': this.state.isParamFormVisible
});
const ariaLabel = this.props.intl.formatMessage({ id: 'kbn.home.tutorial.instructionSet.toggleAriaLabel',
defaultMessage: 'toggle command parameters visibility'
});
paramsVisibilityToggle = (
<div className="kuiSideBarCollapsibleTitle" style={{ cursor: 'pointer' }}>
<div
aria-label={ariaLabel}
className="kuiSideBarCollapsibleTitle__label"
onClick={this.handleToggleVisibility}
>
<span className={visibilityToggleClasses} />
<span className="kuiSideBarCollapsibleTitle__text">
<FormattedMessage
id="kbn.home.tutorial.instructionSet.customizeLabel"
defaultMessage="Customize your code snippets"
/>
</span>
</div>
</div>
<EuiButtonEmpty
iconType={this.state.isParamFormVisible ? 'arrowDown' : 'arrowRight'}
aria-label={ariaLabel}
onClick={this.handleToggleVisibility}
>
<FormattedMessage
id="kbn.home.tutorial.instructionSet.customizeLabel"
defaultMessage="Customize your code snippets"
/>
</EuiButtonEmpty>
);
}
return (
<KuiBar className="kuiVerticalRhythm">
<KuiBarSection>
<div className="kuiTitle">
{this.props.title}
</div>
</KuiBarSection>
<EuiFlexGroup responsive={false} wrap justifyContent="spaceBetween">
<EuiFlexItem grow={false}>
<EuiTitle size="m">
<h2>
{this.props.title}
</h2>
</EuiTitle>
</EuiFlexItem>
<KuiBarSection>
<EuiFlexItem grow={false}>
{paramsVisibilityToggle}
</KuiBarSection>
</KuiBar>
</EuiFlexItem>
</EuiFlexGroup>
);
};
@ -276,13 +266,13 @@ class InstructionSetUi extends React.Component {
}
return (
<div className="kuiVerticalRhythmLarge">
<div>
{this.renderHeader()}
{paramsForm}
<EuiTabs className="kuiVerticalRhythm">
<EuiTabs>
{this.renderTabs()}
</EuiTabs>

6
src/legacy/core_plugins/kibana/public/home/components/tutorial/number_parameter.js
View file

@ -26,14 +26,14 @@ export function NumberParameter({ id, label, value, setParameter }) {
};
return (
<div className="kuiSideBarFormRow">
<div className="visEditorSidebar__formRow">
<label
className="kuiSideBarFormRow__label"
className="visEditorSidebar__formLabel"
htmlFor={id}
>
{label}
</label>
<div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
<div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
<input
className="kuiTextInput"
type="number"

11
src/legacy/core_plugins/kibana/public/home/components/tutorial/parameter_form.js
View file

@ -21,6 +21,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { NumberParameter } from './number_parameter';
import { StringParameter } from './string_parameter';
import { EuiPanel } from '@elastic/eui';
export class ParameterForm extends React.Component {
@ -55,13 +56,9 @@ export class ParameterForm extends React.Component {
render() {
return (
<div>
<div className="kuiSideBarSection">
{this.renderInputs()}
</div>
</div>
<EuiPanel>
{this.renderInputs()}
</EuiPanel>
);
}
}

6
src/legacy/core_plugins/kibana/public/home/components/tutorial/string_parameter.js
View file

@ -26,13 +26,13 @@ export function StringParameter({ id, label, value, setParameter }) {
};
return (
<div className="kuiSideBarFormRow">
<div className="visEditorSidebar__formRow">
<label
className="kuiSideBarFormRow__label"
className="visEditorSidebar__formLabel"
>
{label}
</label>
<div className="kuiSideBarFormRow__control kuiFieldGroupSection--wide">
<div className="visEditorSidebar__formControl kuiFieldGroupSection--wide">
<input
className="kuiTextInput"
type="text"

14
src/legacy/core_plugins/markdown_vis/public/markdown_vis_params.html
View file

@ -1,4 +1,4 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<div class="clearfix form-group">
<label for="markdownVisInput">Markdown</label>
@ -13,8 +13,8 @@
</a>
</small>
</div>
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="markdownVisFontSize">
<div class="visEditorSidebar__formRow">
<label class="visEditorSidebar__formLabel" for="markdownVisFontSize">
<span
i18n-id="markdownVis.params.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
@ -22,19 +22,19 @@
>
</span>
</label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input id="markdownVisFontSize" type="range" ng-model="editorState.params.fontSize" class="form-control" min="8" max="36" />
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="markdownVisOpenLinksInNewTab"
i18n-id="markdownVis.params.openLinksLabel"
i18n-default-message="Open links in new tab"
>
</label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
id="markdownVisOpenLinksInNewTab"
type="checkbox"

345
src/legacy/core_plugins/metric_vis/public/metric_vis_params.html
View file

@ -1,48 +1,46 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="percentageMode"
i18n-id="metricVis.params.percentageModeLabel"
i18n-default-message="Percentage Mode"
>
</label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="percentageMode" type="checkbox" ng-model="editorState.params.metric.percentageMode">
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="showLabels"
i18n-id="metricVis.params.showLabelsLabel"
i18n-default-message="Show Labels"
>
</label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="showLabels" type="checkbox" ng-model="editorState.params.metric.labels.show">
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showColorRange}}"
aria-controls="metricOptionsRanges"
aria-label="{{::'metricVis.params.ranges.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle range options' } }}"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showColorRange = !showColorRange"
>
<span
aria-hidden="true"
ng-class="{ 'fa-caret-down': showColorRange, 'fa-caret-right': !showColorRange }"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<icon color="'primary'" aria-hidden="true" ng-if="showColorRange" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showColorRange" type="'arrowRight'" size="'s'"></icon>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="metricVis.params.rangesTitle"
i18n-default-message="Ranges"
>
@ -50,213 +48,202 @@
</div>
</div>
<div id="metricOptionsRanges" ng-show="showColorRange" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
<tr>
<th scope="col">
<label
id="metricOptionsCustomRangeFrom"
i18n-id="metricVis.params.ranges.fromLabel"
i18n-default-message="From"
>
</label>
</th>
<th scope="col" colspan="2">
<label
id="metricOptionsCustomRangeTo"
i18n-id="metricVis.params.ranges.toLabel"
i18n-default-message="To"
>
</label>
</th>
</tr>
<div id="metricOptionsRanges" ng-show="showColorRange">
<tr ng-repeat="range in editorState.params.metric.colorsRange track by $index">
<td>
<input
aria-labelledby="metricOptionsCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
required
step="any" />
</td>
<td>
<input
aria-labelledby="metricOptionsCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-or-equal-than="{{range.from}}"
required
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
ng-show="editorState.params.metric.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>
<div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<span
i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
i18n-default-message="{requiredDescription} You must specify at least one range."
i18n-values="{ html_requiredDescription: '<strong>' + editorState.requiredDescription + '</strong>' }"
<table class="visEditorAgg__rangesTable form-group" ng-show="editorState.params.metric.colorsRange.length">
<tr>
<th scope="col">
<label
id="metricOptionsCustomRangeFrom"
i18n-id="metricVis.params.ranges.fromLabel"
i18n-default-message="From"
>
</span>
</p>
</div>
</label>
</th>
<th scope="col" colspan="2">
<label
id="metricOptionsCustomRangeTo"
i18n-id="metricVis.params.ranges.toLabel"
i18n-default-message="To"
>
</label>
</th>
</tr>
<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="metricVis.params.ranges.addRangeButtonLabel"
i18n-default-message="Add Range"
>
</div>
<tr ng-repeat="range in editorState.params.metric.colorsRange track by $index">
<td>
<input
aria-labelledby="metricOptionsCustomRangeFrom"
ng-model="range.from"
type="number"
class="form-control"
name="range.from"
greater-or-equal-than="{{getGreaterThan($index)}}"
required
step="any" />
</td>
<td>
<input
aria-labelledby="metricOptionsCustomRangeTo"
ng-model="range.to"
type="number"
class="form-control"
name="range.to"
greater-or-equal-than="{{range.from}}"
required
step="any" />
</td>
<td>
<button
type="button"
ng-click="removeRange($index)"
ng-show="editorState.params.metric.colorsRange.length > 1"
class="kuiButton kuiButton--danger kuiButton--small">
<i class="fa fa-times"></i>
</button>
</td>
</tr>
</table>
<div class="hintbox" ng-show="!editorState.params.metric.colorsRange.length">
<p>
<i class="fa fa-danger text-danger"></i>
<span
i18n-id="metricVis.params.ranges.warning.specifyRangeDescription"
i18n-default-message="{requiredDescription} You must specify at least one range."
i18n-values="{ html_requiredDescription: '<strong>' + editorState.requiredDescription + '</strong>' }"
>
</span>
</p>
</div>
<div
ng-click="addRange()"
class="kuiButton kuiButton--primary kuiButton--fullWidth"
i18n-id="metricVis.params.ranges.addRangeButtonLabel"
i18n-default-message="Add Range"
>
</div>
</div>
</div>
<div ng-show="editorState.params.metric.colorsRange.length > 1">
<div class="kuiSideBarCollapsibleTitle">
<div ng-show="editorState.params.metric.colorsRange.length > 1" class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showColorOptions}}"
aria-controls="metricOptionsColors"
aria-label="{{::'metricVis.params.color.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle color options' } }}"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showColorOptions = !showColorOptions"
>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showColorOptions,
'fa-caret-right': !showColorOptions
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<icon color="'primary'" aria-hidden="true" ng-if="showColorOptions" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showColorOptions" type="'arrowRight'" size="'s'"></icon>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="metricVis.params.color.colorOptionsTitle"
i18n-default-message="Color Options"
>
</span>
</div>
</div>
<div id="metricOptionsColors" ng-if="showColorOptions" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.colorsRange.length > 1">
<label
class="kuiSideBarFormRow__label"
for="metricColorMode"
i18n-id="metricVis.params.color.useForLabel"
i18n-default-message="Use Color For"
>
</label>
<div class="kuiSideBarFormRow__control">
<select
id="metricColorMode"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.metric.metricColorMode"
ng-options="mode.id as mode.label for mode in collections.metricColorMode"
></select>
</div>
</div>
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label
class="kuiSideBarFormRow__label"
for="colorSchema"
i18n-id="metricVis.params.color.schemaLabel"
i18n-default-message="Color Schema"
>
</label>
<div class="kuiSideBarFormRow__control">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
ng-model="editorState.params.metric.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
i18n-id="metricVis.params.color.resetColorDescription"
i18n-default-message="reset colors"
>
</div>
</div>
<div id="metricOptionsColors" ng-if="showColorOptions">
<div class="kuiSideBarFormRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label
class="kuiSideBarFormRow__label"
for="invertColors"
i18n-id="metricVis.params.color.reverseSchemaLabel"
i18n-default-message="Reverse Color Schema"
>
</label>
<div class="kuiSideBarFormRow__control">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
</div>
<div class="visEditorSidebar__formRow" ng-show="editorState.params.metric.colorsRange.length > 1">
<label
class="visEditorSidebar__formLabel"
for="metricColorMode"
i18n-id="metricVis.params.color.useForLabel"
i18n-default-message="Use Color For"
>
</label>
<div class="visEditorSidebar__formControl">
<select
id="metricColorMode"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.metric.metricColorMode"
ng-options="mode.id as mode.label for mode in collections.metricColorMode"
></select>
</div>
</div>
<div class="visEditorSidebar__formRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label
class="visEditorSidebar__formLabel"
for="colorSchema"
i18n-id="metricVis.params.color.schemaLabel"
i18n-default-message="Color Schema"
>
</label>
<div class="visEditorSidebar__formControl">
<select
id="colorSchema"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.metric.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
</div>
<div class="text-info text-center" ng-show="customColors" ng-click="resetColors()"
i18n-id="metricVis.params.color.resetColorDescription"
i18n-default-message="reset colors"
>
</div>
</div>
<div class="visEditorSidebar__formRow" ng-show="editorState.params.metric.metricColorMode !== 'None'">
<label
class="visEditorSidebar__formLabel"
for="invertColors"
i18n-id="metricVis.params.color.reverseSchemaLabel"
i18n-default-message="Reverse Color Schema"
>
</label>
<div class="visEditorSidebar__formControl">
<input class="kuiCheckBox" id="invertColors" type="checkbox" ng-model="editorState.params.metric.invertColors">
</div>
</div>
</div>
</div>
<div>
<div class="kuiSideBarCollapsibleTitle">
<div class="visEditorSidebar__collapsible--margin">
<div class="visEditorSidebar__collapsibleTitle">
<div
kbn-accessible-click
aria-expanded="{{!!showStyle}}"
aria-controls="metricOptionsStyle"
aria-label="{{::'metricVis.params.style.toggleOptionsAriaLabel' | i18n: { defaultMessage: 'Toggle style options' } }}"
class="kuiSideBarCollapsibleTitle__label"
class="visEditorSidebar__collapsibleTitleLabel"
ng-click="showStyle = !showStyle"
>
<icon color="'primary'" aria-hidden="true" ng-if="showStyle" type="'arrowDown'" size="'s'"></icon>
<icon color="'primary'" aria-hidden="true" ng-if="!showStyle" type="'arrowRight'" size="'s'"></icon>
<span
aria-hidden="true"
ng-class="{
'fa-caret-down': showStyle,
'fa-caret-right': !showStyle
}"
class="fa fa-caret-right kuiSideBarCollapsibleTitle__caret"
></span>
<span
class="kuiSideBarCollapsibleTitle__text"
class="visEditorSidebar__collapsibleTitleText"
i18n-id="metricVis.params.style.styleTitle"
i18n-default-message="Style"
>
</span>
</div>
</div>
<div id="metricOptionsStyle" ng-if="showStyle" class="kuiSideBarCollapsibleSection">
<div class="kuiSideBarSection">
<div id="metricOptionsStyle" ng-if="showStyle">
<div class="kuiSideBarFormRow">
<label class="kuiSideBarFormRow__label" for="metricFontSize">
<span
i18n-id="metricVis.params.style.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
>
</span>
</label>
<div class="kuiSideBarFormRow__control">
<input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />
</div>
<div class="visEditorSidebar__formRow">
<label class="visEditorSidebar__formLabel" for="metricFontSize">
<span
i18n-id="metricVis.params.style.fontSizeLabel"
i18n-default-message="Font Size ({fontSize}pt)"
i18n-values="{ fontSize: editorState.params.metric.style.fontSize }"
>
</span>
</label>
<div class="visEditorSidebar__formControl">
<input id="metricFontSize" type="range" ng-model="editorState.params.metric.style.fontSize" class="form-control" min="12" max="120" />
</div>
</div>
</div>
</div>
</div>

56
src/legacy/core_plugins/region_map/public/region_map_vis_params.html
View file

@ -1,24 +1,23 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="regionMap.visParams.layerSettingsTitle"
i18n-default-message="Layer Settings"
></div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="regionMap"
i18n-id="regionMap.visParams.vectorMapLabel"
i18n-default-message="Vector map"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="regionMap"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.selectedLayer"
ng-options="layer.name for layer in collections.vectorLayers track by layer.layerId"
ng-change="onLayerChange()"
@ -46,16 +45,16 @@
</a>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="joinField"
i18n-id="regionMap.visParams.joinFieldLabel"
i18n-default-message="Join field"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select id="joinField"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.selectedJoinField"
ng-options="field.description for field in editorState.params.selectedLayer.fields track by field.name"
>
@ -67,15 +66,15 @@
</select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="displayWarnings"
i18n-id="regionMap.visParams.displayWarningsLabel"
i18n-default-message="Display warnings"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input id="displayWarnings" type="checkbox" ng-model="editorState.params.isDisplayWarning">
&nbsp;
<icon-tip
@ -86,14 +85,14 @@
></icon-tip>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="onlyShowMatchingShapes"
i18n-id="regionMap.visParams.showAllShapesLabel"
i18n-default-message="Show all shapes"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input id="onlyShowMatchingShapes" type="checkbox" ng-model="editorState.params.showAllShapes">
&nbsp;
<icon-tip
@ -107,42 +106,41 @@
</div>
</div>
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="regionMap.visParams.styleSettingsLabel"
i18n-default-message="Style settings"
></div>
</div>
<div class="kuiSideBarFormRow" >
<div class="visEditorSidebar__formRow" >
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="colorSchema"
i18n-id="regionMap.visParams.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.colorSchema"
ng-options="mode.id as mode.label for mode in collections.colorSchemas"
></select>
</div>
</div>
<div class="kuiSideBarFormRow" >
<div class="visEditorSidebar__formRow" >
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="outlineWeight"
i18n-id="regionMap.visParams.outlineWeightLabel"
i18n-default-message="Outline weight"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
id="outlineWeight"
class="kuiInput kuiSideBarInput"
class="kuiInput visEditorSidebar__input"
type="number"
ng-model="editorState.params.outlineWeight"
>
@ -150,4 +148,4 @@
</div>
</div>
<wms-options options="editorState.params.wms" collections="collections"></wms-options>
<wms-options options="editorState.params.wms" collections="collections"></wms-options>

2
src/legacy/core_plugins/table_vis/public/table_vis_params.html
View file

@ -1,5 +1,5 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<label
for="datatableVisualizationPerPage"

2
src/legacy/core_plugins/tagcloud/public/tag_cloud_vis_params.html
View file

@ -1,4 +1,4 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<div class="form-group">
<label i18n-id="tagCloud.visParams.textScaleLabel" i18n-default-message="Text Scale"></label>

16
src/legacy/core_plugins/tile_map/public/editors/tile_map_vis_params.html
View file

@ -1,5 +1,5 @@
<!-- vis type specific options -->
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<label
for="coordinateMapOptionsMapType"
@ -18,17 +18,17 @@
</div>
<div class="kuiSideBarFormRow" >
<div class="visEditorSidebar__formRow" >
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="colorSchema"
i18n-id="tileMap.visParams.colorSchemaLabel"
i18n-default-message="Color Schema"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="colorSchema"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="editorState.params.colorSchema"
ng-options="mode.id as mode.label for mode in vis.type.editorConfig.collections.colorSchemas"
></select>
@ -62,15 +62,15 @@
<vislib-basic-options></vislib-basic-options>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="desaturateMapTiles"
i18n-id="tileMap.visParams.desaturateTilesLabel"
i18n-default-message="Desaturate tiles"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
type="checkbox"
id="desaturateMapTiles"

19
src/legacy/core_plugins/tile_map/public/editors/wms_options.html
View file

@ -1,42 +1,41 @@
<div>
<div class="kuiSideBarSection">
<div class="kuiSideBarSectionTitle">
<div class="visEditorSidebar__section">
<div class="visEditorSidebar__sectionTitle">
<div
class="kuiSideBarSectionTitle__text"
i18n-id="tileMap.wmsOptions.baseLayerSettingsTitle"
i18n-default-message="Base Layer Settings"
></div>
</div>
<div class="kuiSideBarFormRow" ng-show="!options.enabled">
<div class="visEditorSidebar__formRow" ng-show="!options.enabled">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="tmsLayers"
i18n-id="tileMap.wmsOptions.layersLabel"
i18n-default-message="Layers"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<select
id="tmsLayers"
class="kuiSelect kuiSideBarSelect"
class="kuiSelect visEditorSidebar__select"
ng-model="options.selectedTmsLayer"
ng-options="layer.id for layer in collections.tmsLayers track by layer.id"
></select>
</div>
</div>
<div class="kuiSideBarFormRow">
<div class="visEditorSidebar__formRow">
<label
class="kuiSideBarFormRow__label"
class="visEditorSidebar__formLabel"
for="wmsCompliantMapServer"
i18n-id="tileMap.wmsOptions.wmsMapServerLabel"
i18n-default-message="WMS map server"
></label>
<div class="kuiSideBarFormRow__control">
<div class="visEditorSidebar__formControl">
<input
id="wmsCompliantMapServer"
type="checkbox"

2
src/legacy/core_plugins/timelion/public/vis/timelion_vis_params.html
View file

@ -1,4 +1,4 @@
<div class="kuiSideBarSection">
<div class="visEditorSidebar__section">
<div class="form-group">
<label
for="timelionInterval"

5
src/ui/public/agg_types/controls/filters.html
View file

@ -1,8 +1,7 @@
<div class="form-group">
<div ng-repeat="filter in agg.params.filters">
<div class="visEditorAggHeader">
<div class="visEditorSidebar__collapsibleTitle">
<label
class="visEditorAggHeader__title visEditorAggHeader__title--grow"
for="visEditorFilterInput{{agg.id}}"
>
<span
@ -13,7 +12,7 @@
<span ng-if="filter.label">- {{ filter.label }}</span>
</label>
<div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
<div class="kuiButtonGroup kuiButtonGroup--united">
<button
ng-click="showConfig = !showConfig"
type="button"

4
src/ui/public/agg_types/controls/other_bucket.html
View file

@ -29,7 +29,7 @@
<input
type="text"
ng-model="agg.params.otherBucketLabel"
class="form-control kuiSideBarInput"
class="form-control visEditorSidebar__input"
>
</div>
</div>
@ -65,7 +65,7 @@
<input
type="text"
ng-model="agg.params.missingBucketLabel"
class="form-control kuiSideBarInput"
class="form-control visEditorSidebar__input"
ng-disabled="agg.params.field.type !== 'string'"
>
</div>

3
src/ui/public/chrome/_variables.scss
View file

@ -1,6 +1,3 @@
$kbnChromeGlobalNavBackground: shade($euiColorPrimary, 30%);
$kbnGlobalNavClosedWidth: 53px;
$kbnGlobalNavOpenWidth: 180px;
$kbnGlobalNavLogoHeight: 70px;

2
src/ui/public/chrome/directives/global_nav/_global_nav.scss
View file

@ -46,7 +46,7 @@
}
&::-webkit-scrollbar-thumb { /* 4 */
background-color: tint($kbnChromeGlobalNavBackground, 50%);
background-color: tint($euiColorPrimary, 50%);
}
}

1
src/ui/public/styles/_legacy/_index.scss
View file

@ -2,6 +2,7 @@
// // KIBANA THEME
@import './depth';
@import './base';
@import './mixins';
// // Components
@import './components/index';

56
src/ui/public/styles/_legacy/_mixins.scss Normal file
View file

@ -0,0 +1,56 @@
// These mixins are temporary helpers to consolidate styles of elements that
// are not yet converted to use EUI.
// DO NOT CONTINUE TO USE THESE MIXINS
@import '@elastic/eui/src/components/form/variables';
@mixin __legacyInputStyles__bad {
&:not([type='range']) {
appearance: none;
}
display: block;
width: 100%;
height: $euiFormControlCompressedHeight;
padding: $euiSizeXS $euiSizeM;
@include euiFontSizeS;
border: $euiBorderThin;
background-color: $euiFormBackgroundColor;
color: $euiTextColor;
border-radius: $euiBorderRadius;
cursor: pointer;
&:focus {
border-color: $euiColorPrimary;
outline: none;
box-shadow: none;
}
}
@mixin __legacySelectStyles__bad {
// Makes the select arrow similar to EUI's arrowDown icon
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='#{hexToRGB($euiTextColor)}' d='M13.0688508,5.15725038 L8.38423975,9.76827428 C8.17054415,9.97861308 7.82999214,9.97914095 7.61576025,9.76827428 L2.93114915,5.15725038 C2.7181359,4.94758321 2.37277319,4.94758321 2.15975994,5.15725038 C1.94674669,5.36691756 1.94674669,5.70685522 2.15975994,5.9165224 L6.84437104,10.5275463 C7.48517424,11.1582836 8.51644979,11.1566851 9.15562896,10.5275463 L13.8402401,5.9165224 C14.0532533,5.70685522 14.0532533,5.36691756 13.8402401,5.15725038 C13.6272268,4.94758321 13.2818641,4.94758321 13.0688508,5.15725038 Z'/%3E%3C/svg%3E");
background-size: $euiSize;
background-repeat: no-repeat;
background-position: calc(100% - #{$euiSizeS});
padding-right: $euiSizeXL;
&::-ms-expand {
display: none;
}
&:focus::-ms-value {
color: $euiTextColor;
background: transparent;
}
}
@mixin __legacyLabelStyles__bad {
font-size: $euiFontSizeXS;
font-weight: $euiFontWeightSemiBold;
color: $euiTextColor;
&[for] {
cursor: pointer;
}
}

1
src/ui/public/styles/_legacy/components/_index.scss
View file

@ -3,7 +3,6 @@
@import './hintbox';
@import './input';
@import './kui_forms';
@import './kui_sidebar';
@import './list_group_menu';
@import './navbar';
@import './config';

10
src/ui/public/styles/_legacy/components/_kui_forms.scss
View file

@ -1,11 +1,19 @@
.form-control {
@include __legacyInputStyles__bad;
}
select.form-control {
@include __legacySelectStyles__bad;
}
.kuiFormSection {
margin-bottom: $euiSize;
}
.kuiFormLabel {
@include __legacyLabelStyles__bad;
display: block;
margin-bottom: 5px;
font-weight: 700;
}
.kuiInputNote {

133
src/ui/public/styles/_legacy/components/_kui_sidebar.scss
View file

@ -1,133 +0,0 @@
.kuiSideBarInput,
.kuiSideBarSelect {
height: $euiSizeL;
width: 100%;
font-size: $euiFontSizeXS;
padding: 0 $euiSize;
}
.kuiSideBarInput {
display: block;
color: $euiTextColor;
border: $euiBorderThin;
border-radius: $euiBorderRadius;
padding-left: $euiSizeXS;
padding-right: $euiSizeXS;
}
.kuiSideBarSection {
margin-bottom: $euiSizeS;
background-color: $euiColorEmptyShade;
padding: $euiSizeS;
border-radius: $euiBorderRadius;
label {
font-weight: $euiFontWeightBold;
display: block;
}
.vis-option-item label {
font-weight: $euiFontWeightRegular !important;
}
}
.kuiSideBarSection .kuiSideBarSection .kuiSideBarSection {
border-radius: 0;
border-left: solid 1px tint($euiColorPrimary, 20%);
margin-left: 3px; // Align to caret open
}
.kuiSideBarSectionTitle {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $euiSizeS;
}
.kuiSideBarSectionTitle__text {
font-size: $euiFontSizeL;
color: $euiColorDarkestShade;
}
.kuiSideBarSectionTitle__action {
background-color: transparent; // Override Bootstrap button styles.
padding: 0; // 1
cursor: pointer;
color: $euiColorPrimary;
border: none;
&:hover {
color: darken($euiColorPrimary, 10%);
}
}
.kuiSideBarCollapsibleTitle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-bottom: $euiSizeS;
}
.kuiSideBarCollapsibleTitle__label {
display: flex;
align-items: center;
}
.kuiSideBarCollapsibleTitle__caret {
@include size($euiSizeM + ($euiSizeXS / 2));
font-size: $euiFontSizeS !important; // Override FontAwesome .fa styles.
color: $euiColorPrimary;
}
.kuiSideBarCollapsibleTitle__text {
font-size: $euiFontSizeS;
color: $euiColorPrimary;
}
/**
* 1. Override Bootstrap button styles.
*/
.kuiSideBarCollapsibleTitle__action {
background-color: transparent; // 1
padding: 0; // 1
cursor: pointer;
color: $euiColorPrimary;
border: none;
&:hover {
color: darken($euiColorPrimary, 10%);
}
}
/**
* 1. Override Bootstrap h1 styles.
*/
.kuiSideBarFormSectionTitle {
font-size: 12px;
color: $euiColorDarkShade;
margin: 10px 0 !important; // 1
padding-bottom: 2px;
}
.kuiSideBarFormRow {
display: flex;
align-items: center;
min-height: $euiSizeM;
margin-bottom: $euiSizeS;
}
.kuiSideBarFormRow__label {
display: flex;
align-items: center;
flex: 1 1 40% !important; // Override .vis-editor-sidebar styles
font-weight: $euiFontWeightBold;
}
.kuiSideBarFormRow__control {
display: flex;
align-items: center;
flex: 1 1 60%;
}

8
src/ui/public/styles/_legacy/components/_list_group_menu.scss
View file

@ -1,23 +1,23 @@
.list-group-menu {
&.select-mode a {
outline: none;
color: tint($euiColorPrimary, 10%);
color: tintOrShade($euiColorPrimary, 10%, 10%);
}
.list-group-menu-item {
list-style: none;
color: tint($euiColorPrimary, 10%);
color: tintOrShade($euiColorPrimary, 10%, 10%);
&.active {
font-weight: bold;
background-color: $euiColorLightShade;
}
&:hover {
background-color: tint($euiColorPrimary, 90%);
background-color: tintOrShade($euiColorPrimary, 90%, 90%);
}
li {
list-style: none;
color: tint($euiColorPrimary, 10%);
color: tintOrShade($euiColorPrimary, 10%, 10%);
}
}
}

8
src/ui/public/styles/_legacy/components/_sidebar.scss
View file

@ -1,3 +1,5 @@
// ONLY USED IN DISCOVER
.sidebar-container {
padding-left: 0px !important;
padding-right: 0px !important;
@ -38,15 +40,11 @@
line-height: normal;
label {
@include __legacyLabelStyles__bad;
margin-bottom: $euiSizeXS;
font-weight: $euiFontWeightBold;
display: block;
}
label[for] {
cursor: pointer;
}
&.active {
background-color: shade($euiColorLightestShade, 10%);
color: $euiColorDarkestShade;

393
src/ui/public/styles/_legacy/components/_ui_select.scss
View file

@ -1,68 +1,363 @@
// Overwrites ui-select classes that are loaded through NPM dependencies.
// Must use important tags here because those files are loaded later.
@import '@elastic/eui/src/components/button/variables';
@import '@elastic/eui/src/components/form/variables';
/**
* 1. Override Bootstrap ui-select component styles. If side padding is > 5px, the component breaks.
/*!
* ui-select
* http://github.com/angular-ui/ui-select
* Version: 0.19.5 - 2016-10-24T23:13:59.551Z
* License: MIT
*/
.ui-select-multiple.ui-select-bootstrap {
padding: 3px 5px 2px !important; // 1
border: $euiBorderThin; // 1
background-color: $euiColorEmptyShade; // 1
&.kuiInputError {
border-color: $euiColorDanger; // 1
/* Style when highlighting a search. */
.ui-select-highlight {
font-weight: bold;
}
.ui-select-offscreen {
clip: rect(0 0 0 0) !important;
width: 1px !important;
height: 1px !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
position: absolute !important;
outline: 0 !important;
left: 0px !important;
top: 0px !important;
}
.ui-select-choices-row:hover {
background-color: $euiColorLightestShade;
}
/* Select2 theme */
/* Mark invalid Select2 */
.ng-dirty.ng-invalid > a.select2-choice {
border-color: $euiColorDanger;
}
.select2-result-single {
padding-left: 0;
}
.select2-locked > .select2-search-choice-close{
display:none;
}
.select-locked > .ui-select-match-close{
display:none;
}
body > .select2-container.open {
z-index: 9999; /* The z-index Select2 applies to the select2-drop */
}
/* Handle up direction Select2 */
.ui-select-container[theme="select2"].direction-up .ui-select-match,
.ui-select-container.select2.direction-up .ui-select-match {
border-radius: 4px; /* FIXME hardcoded value :-/ */
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown,
.ui-select-container.select2.direction-up .ui-select-dropdown {
border-radius: 4px; /* FIXME hardcoded value :-/ */
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-width: 1px; /* FIXME hardcoded value :-/ */
border-top-style: solid;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.25);
margin-top: -4px; /* FIXME hardcoded value :-/ */
}
.ui-select-container[theme="select2"].direction-up .ui-select-dropdown .select2-search,
.ui-select-container.select2.direction-up .ui-select-dropdown .select2-search {
margin-top: 4px; /* FIXME hardcoded value :-/ */
}
.ui-select-container[theme="select2"].direction-up.select2-dropdown-open .ui-select-match,
.ui-select-container.select2.direction-up.select2-dropdown-open .ui-select-match {
border-bottom-color: $euiColorPrimary;
}
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden,
.ui-select-container[theme="select2"] .ui-select-dropdown .ui-select-search-hidden input{
opacity: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border:0;
}
/* Bootstrap theme */
/* Helper class to show styles when focus */
.btn-default-focus {
color: $euiTextColor;
background-color: $euiColorEmptyShade;
border-color: $euiColorPrimary;
text-decoration: none;
outline: none;
box-shadow: none;
}
.ui-select-bootstrap .ui-select-toggle {
@include __legacyInputStyles__bad;
@include __legacySelectStyles__bad;
}
.ui-select-bootstrap .ui-select-toggle > .caret {
display: none;
}
/* Fix Bootstrap dropdown position when inside a input-group */
.input-group > .ui-select-bootstrap.dropdown {
/* Instead of relative */
position: static;
}
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control {
border-radius: 4px; /* FIXME hardcoded value :-/ */
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.input-group > .ui-select-bootstrap > input.ui-select-search.form-control.direction-up {
border-radius: 4px !important; /* FIXME hardcoded value :-/ */
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.ui-select-bootstrap .ui-select-search-hidden {
opacity: 0;
height: 0;
min-height: 0;
padding: 0;
margin: 0;
border:0;
}
.ui-select-bootstrap > .ui-select-match > .btn {
@include __legacyInputStyles__bad;
@include __legacySelectStyles__bad;
text-align: left !important; // Instead of center because of .btn
.ui-select-placeholder {
color: $euiColorMediumShade;
}
&:focus,
&:active {
background-color: $euiColorEmptyShade;
color: $euiTextColor;
outline: none;
}
}
.ui-select-bootstrap .ui-select-choices-row.active > span {
background-color: $euiColorPrimary !important;
.ui-select-bootstrap > .ui-select-match > .caret {
display: none;
}
.ui-select-bootstrap > .ui-select-choices, .ui-select-bootstrap > .ui-select-no-choice {
margin-top: $euiSizeXS / 2 !important;
/* See Scrollable Menu with Bootstrap 3 http://stackoverflow.com/questions/19227496 */
.ui-select-bootstrap > .ui-select-choices,
.ui-select-bootstrap > .ui-select-no-choice {
width: 100%;
height: auto;
max-height: $euiSize * 14;
overflow-x: hidden;
}
body > .ui-select-bootstrap.open {
z-index: $euiZContentMenu;
}
.ui-select-multiple.ui-select-bootstrap {
height: auto;
padding: 3px 5px 2px;
border: $euiBorderThin;
background-color: $euiFormBackgroundColor;
&.kuiInputError {
border-color: $euiColorDanger;
}
}
.ui-select-multiple.ui-select-bootstrap input.ui-select-search {
background-color: transparent !important; /* To prevent double background when disabled */
border: none;
outline: none;
height: 1.666666em;
margin-bottom: 3px;
}
.ui-select-multiple.ui-select-bootstrap .ui-select-match .close {
font-size: 1.6em;
line-height: 0.75;
}
.ui-select-multiple.ui-select-bootstrap .ui-select-match-item {
outline: 0;
margin: 0 3px 3px 0;
}
.ui-select-multiple .ui-select-match-item {
position: relative;
}
.ui-select-multiple .ui-select-match-item.dropping .ui-select-match-close {
pointer-events: none;
}
.ui-select-multiple:hover .ui-select-match-item.dropping-before:before {
content: "";
position: absolute;
top: 0;
right: 100%;
height: 100%;
margin-right: 2px;
border-left: 1px solid $euiColorPrimary;
}
.ui-select-multiple:hover .ui-select-match-item.dropping-after:after {
content: "";
position: absolute;
top: 0;
left: 100%;
height: 100%;
margin-left: 2px;
border-right: 1px solid $euiColorPrimary;
}
.ui-select-bootstrap .ui-select-choices-row>span {
@include euiFontSizeS;
@include euiTextTruncate;
font-weight: inherit;
cursor: pointer;
display: block;
padding: $euiSizeXS $euiSize;
clear: both;
color: $euiTextColor;
white-space: nowrap;
&:hover,
&:focus {
text-decoration: none;
color: $euiTextColor;
background-color: $euiFocusBackgroundColor;
}
}
.ui-select-bootstrap .ui-select-choices-row.active>span {
color: $euiTextColor;
text-decoration: none;
outline: 0;
background-color: $euiFocusBackgroundColor;
}
.ui-select-bootstrap .ui-select-choices-row.disabled>span,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
color: $euiButtonColorDisabled;
cursor: not-allowed;
background-color: transparent;
}
/* fix hide/show angular animation */
.ui-select-match.ng-hide-add,
.ui-select-search.ng-hide-add {
display: none !important;
}
/* Mark invalid Bootstrap */
.ui-select-bootstrap.ng-dirty.ng-invalid > button.btn.ui-select-match {
border-color: $euiColorDanger;
}
/* Handle up direction Bootstrap */
.ui-select-container[theme="bootstrap"].direction-up .ui-select-dropdown {
@include euiBottomShadowMedium;
}
.ui-select-bootstrap .ui-select-match-text {
width: 100%;
padding-right: 1em;
}
.ui-select-bootstrap .ui-select-match-text span {
display: inline-block;
width: 100%;
overflow: hidden;
}
.ui-select-bootstrap .ui-select-toggle > a.btn {
position: absolute;
height: 10px;
right: 10px;
margin-top: -2px;
}
/* Spinner */
.ui-select-refreshing {
position: absolute;
right: 0;
padding: 8px 27px;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing:antialiased;
}
@-webkit-keyframes ui-select-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
@keyframes ui-select-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(359deg);
transform: rotate(359deg);
}
}
.ui-select-spin {
-webkit-animation: ui-select-spin 2s infinite linear;
animation: ui-select-spin 2s infinite linear;
}
.ui-select-refreshing.ng-animate {
-webkit-animation: none 0s;
}
// Other Custom
/**
* 1. Fix appearance of ui-select in the Filtering UI.
*/
.btn-default .ui-select-placeholder {
color: tint($euiColorPrimary, 70%); /* 1 */
}
/**
* 1. Make ui-select input match other inputs.
*/
.ui-select-match {
.btn {
border: $euiBorderThin; /* 1 */
background-color: $euiColorEmptyShade; /* 1 */
color: $euiColorDarkestShade; /* 1 */
.ui-select-placeholder {
color: $euiColorMediumShade; /* 1 */
padding-right: 1em; /* 1 */
}
&:focus {
outline: none;
}
&:active {
background-color: $euiColorEmptyShade; /* 1 */
color: $euiColorDarkestShade; /* 1 */
}
}
&.btn-default-focus {
box-shadow: none;
outline: none;
.btn {
border-color: $euiColorPrimary;
}
}
color: $euiColorMediumShade; /* 1 */
}
.uiSelectMatch--ellipsis {
@include euiTextTruncate;
}
.ui-select-choices-group-label {
@include euiTitle('xxxs');
@include euiTextTruncate;
padding: $euiSizeXS;
}

8
src/ui/public/styles/bootstrap/_custom_variables.less
View file

@ -103,6 +103,8 @@
//##
//** `<input>` background color
@input-bg: lighten(@gray-lightest, 1.5%);
//** Placeholder text color
@input-color-placeholder: @gray;
@ -139,10 +141,10 @@
@dropdown-link-active-color: @white;
//** Disabled dropdown menu item background color.
@dropdown-link-disabled-color: @text-muted;
@dropdown-link-disabled-color: @gray;
//** Text color for headers within dropdown menus.
@dropdown-header-color: @text-muted;
@dropdown-header-color: @gray;
// Note: Deprecated @dropdown-caret-color as of v3.1.0
@dropdown-caret-color: @gray-base;
@ -176,7 +178,7 @@
@navbar-padding-horizontal: 10px;
// Default theme
@navbar-default-bg: lighten(@gray-lighter, 50%);
@navbar-default-bg: @gray-lightest;
@navbar-default-color: @gray5;
@navbar-default-border: transparent;
@navbar-default-link-color: @gray5;

4
src/ui/public/styles/bootstrap/_custom_variables_dark_overrides.less Normal file
View file

@ -0,0 +1,4 @@
@navbar-default-bg: darken(@gray-lighter, 50%);
//** `<input>` background color
@input-bg: darken(@gray-lightest, 5%);

1
src/ui/public/styles/bootstrap/bootstrap_dark.less vendored
View file

@ -39,6 +39,7 @@
@import "variables.less";
@import "_colors_dark.less";
@import "_custom_variables.less";
@import "_custom_variables_dark_overrides.less";
@import "mixins.less";
// Hard to remove, used in many places

2
src/ui/public/styles/bootstrap/forms.less
View file

@ -80,7 +80,7 @@
// Designed to help with the organization and spacing of vertical forms. For
// horizontal forms, use the predefined grid classes.
.form-group {
.form-group:not(:empty) {
margin-bottom: @form-group-margin-bottom;
}

2
src/ui/public/styles/bootstrap/variables.less
View file

@ -327,7 +327,7 @@
@grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-sm-min;
@grid-float-breakpoint: 0;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

12
src/ui/public/vis/components/tooltip/_tooltip.scss
View file

@ -1,18 +1,14 @@
// EUITODO: Use EuiTooltip or create a tooltip mixin
@import '@elastic/eui/src/components/tool_tip/mixins';
.visTooltip,
.visTooltip__sizingClone {
@include euiBottomShadow($color: $euiColorFullShade);
@include euiFontSizeXS;
@include euiToolTipStyle('s');
visibility: hidden;
pointer-events: none;
position: fixed;
z-index: $euiZLevel9;
background-color: tintOrShade($euiColorFullShade, 25%, 90%);
color: $euiColorGhost;
border-radius: $euiBorderRadius;
max-width: $euiSizeXL * 10;
overflow: hidden;
overflow-wrap: break-word;
padding: 0;
> :last-child {
margin-bottom: $euiSizeS;

62
src/ui/public/vis/editors/default/_agg.scss
View file

@ -1,60 +1,3 @@
// Entire container -- found in agg_group.html
.visEditorAgg {
@include flex-parent();
width: 100%;
max-width: 100%;
//IE10/11 - prevent flex item from overflowing
flex-basis: 100%;
}
//
// Header -- found in agg.html
//
.visEditorAggHeader {
display: flex;
align-items: center;
flex: 1 0 auto;
margin-bottom: $vis-editor-agg-editor-spacing;
}
.visEditorAggHeader__toggle {
flex: 0 0 auto;
margin-right: $vis-editor-agg-editor-spacing;
min-width: $euiSizeL;
min-height: $euiSizeL;
text-align: center;
}
.visEditorAggHeader__title {
flex: 0 0 auto;
font-weight: $euiFontWeightBold;
@include euiTextTruncate;
}
.visEditorAggHeader__title--grow {
flex-grow: 1;
}
.visEditorAggHeader__description {
flex: 1 1 0;
font-weight: $euiFontWeightRegular;
padding-right: $vis-editor-agg-editor-spacing;
padding-left: $euiSizeXS;
@include euiTextTruncate;
}
.visEditorAggHeader__description--danger {
color: $euiColorDanger;
font-weight: $euiFontWeightBold;
}
.visEditorAggHeader__controls {
flex: 0 0 auto;
}
//
// Misc elements -- found in agg_types/controls/*.html
//
@ -90,14 +33,13 @@
}
.visEditorAgg__sliderValue {
@include euiFontSize;
align-self: center;
margin: 0 0 0 $vis-editor-agg-editor-spacing;
@include euiFontSize;
}
.visEditorAgg__subAgg {
border: 2px solid;
border-color: $euiColorLightShade;
border: $euiBorderThick;
border-radius: $euiBorderRadius;
background-color: transparent;
margin: $vis-editor-agg-editor-spacing 0;

19
src/ui/public/vis/editors/default/_agg_group.scss
View file

@ -1,19 +0,0 @@
.visEditorAggGroup__wrapper {
border-top: 0 !important; // override .sidebar-item
padding: $euiSizeM;
border-radius: $euiBorderRadius;
margin-bottom: $vis-editor-agg-editor-spacing;
background: $euiColorEmptyShade;
}
.visEditorAggGroup__title {
@include euiFontSizeL;
margin-bottom: $vis-editor-agg-editor-spacing !important;
padding: 0px !important;
text-transform: capitalize;
}
.visEditorAggGroup {
// wraps the .vis-editor-agg
color: $euiColorDarkShade;
}

4
src/ui/public/vis/editors/default/_agg_select.scss
View file

@ -16,3 +16,7 @@
}
}
}
.visEditorAggSelect__helpLink {
@include euiFontSizeXS;
}

8
src/ui/public/vis/editors/default/_default.scss
View file

@ -62,14 +62,6 @@
flex-basis: $vis-editor-sidebar-basis;
max-width: calc(100% - #{$vis-editor-resizer-width});
}
.kuiSideBarFormRow__label {
font-size: $euiFontSizeXS;
}
.form-group {
margin-bottom: $vis-editor-agg-editor-spacing;
}
}
/**

1
src/ui/public/vis/editors/default/_index.scss
View file

@ -9,6 +9,5 @@ $vis-editor-resizer-width: $euiSizeM;
// Components
@import './agg';
@import './agg_group';
@import './agg_params';
@import './agg_select';

163
src/ui/public/vis/editors/default/_sidebar.scss
View file

@ -1,3 +1,5 @@
@import '@elastic/eui/src/components/form/variables';
//
// LAYOUT
//
@ -16,6 +18,7 @@
@include euiBreakpoint('l', 'xl') {
@include flex-parent(1, 1, 1px);
@include euiScrollBar;
overflow: auto;
}
}
@ -24,17 +27,24 @@
// NAVIGATION
//
.visEditorSidebar__indexPattern,
.visEditorSidebar__nav {
min-height: auto;
border-radius: 0px;
.visEditorSidebar__indexPattern {
font-weight: $euiFontWeightBold;
padding: $euiSizeXS $euiSizeS;
background-color: shade($euiColorPrimary, 60%);
color: $euiColorGhost;
line-height: $euiSizeL;
}
.visEditorSidebar__nav .navbar-right {
// Match correct bootstrap container spacing to pull buttons fully right
margin-right: -15px;
.visEditorSidebar__nav {
min-height: 0;
.navbar-right {
// Match correct bootstrap container spacing to pull buttons fully right
margin-right: -15px;
}
}
/**
* 1. TODO: Override bootstrap styles. Remove !important once we're rid of bootstrap.
*/
@ -70,7 +80,144 @@
}
.visEditorSidebar__navButtonLink {
// Make the line-height the same size as the icon for better alignement
// Make the line-height the same size as the icon for better alignment
line-height: $euiSize;
}
//
// SECTIONS
//
.visEditorSidebar__section {
background-color: $euiColorEmptyShade;
padding: $euiSizeS;
border-radius: $euiBorderRadius;
+ .visEditorSidebar__section {
margin-top: $euiSizeS;
}
label {
@include __legacyLabelStyles__bad;
display: block;
}
.form-group label {
margin-bottom: $euiSizeS;
}
}
.visEditorSidebar__sectionTitle {
@include euiFontSizeL;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $euiSizeM;
text-transform: capitalize;
}
// Collapsible section
.visEditorSidebar__collapsible {
background-color: transparentize($euiColorLightShade, .85);
}
.visEditorSidebar__collapsible--margin {
margin-top: $euiSizeM;
}
.visEditorSidebar__collapsible--marginBottom {
margin-bottom: $euiSizeM;
}
.visEditorSidebar__collapsibleTitle {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
line-height: 1.5;
white-space: nowrap;
+ * {
margin-top: $euiSize;
display: block;
}
+ .form-group {
margin-top: $euiSizeXS;
}
label {
margin-bottom: 0 !important; // For filters
}
}
.visEditorSidebar__collapsibleTitleLabel {
@include euiFontSizeS;
color: $euiColorPrimary;
display: flex;
align-items: center;
margin-right: $euiSizeXS;
}
.visEditorSidebar__collapsibleTitleText {
@include euiTextTruncate;
margin-left: $euiSizeS;
}
.visEditorSidebar__collapsibleTitleDescription {
flex: 1 1 0;
@include euiTextTruncate;
}
.visEditorSidebar__collapsibleTitleDescription--danger {
color: $euiColorDanger;
font-weight: $euiFontWeightBold;
}
//
// FORMS
//
.visEditorSidebar__input,
.visEditorSidebar__select {
@include __legacyInputStyles__bad;
}
.visEditorSidebar__select {
@include __legacySelectStyles__bad;
}
.visEditorSidebar__formTitle {
@include euiTitle('xxs');
margin: $euiSizeS 0;
}
.visEditorSidebar__formRow {
display: flex;
align-items: center;
margin-top: $euiSizeM;
}
.visEditorSidebar__formLabel {
display: flex;
align-items: center;
flex: 1 1 40%;
padding-right: $euiSizeXS;
}
.visEditorSidebar__formControl {
display: flex;
align-items: center;
flex: 1 1 60%;
}
.visEditorSidebar__formRow--expand {
.visEditorSidebar__formLabel,
.visEditorSidebar__formControl {
flex-basis: auto;
flex-grow: 0;
}
}

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

@ -1,103 +1,108 @@
<!-- header -->
<div class="visEditorAggHeader">
<div class="visEditorSidebar__section visEditorSidebar__collapsible visEditorSidebar__collapsible--marginBottom">
<!-- header -->
<div class="visEditorSidebar__collapsibleTitle">
<!-- open/close editor -->
<button
aria-label="{{::'common.ui.vis.editors.agg.toggleEditorButtonAriaLabel' | i18n: { defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title } } }}"
ng-click="editorOpen = !editorOpen"
aria-expanded="{{ !!editorOpen }}"
aria-controls="visAggEditorParams{{agg.id}}"
type="button"
data-test-subj="toggleEditor"
class="visEditorAggHeader__toggle kuiButton kuiButton--primary kuiButton--small">
<i aria-hidden="true" ng-class="{ 'fa-caret-down': editorOpen, 'fa-caret-right': !editorOpen }" class="fa"></i>
</button>
<!-- title -->
<span class="visEditorAggHeader__title" ng-class="{'visEditorAggHeader__title--grow': editorOpen}">
{{ agg.schema.title }}
</span>
<!-- description -->
<span ng-if="!editorOpen && aggForm.$valid" class="visEditorAggHeader__description" title="{{describe()}}">
{{ describe() }}
</span>
<!-- error -->
<span ng-if="!editorOpen && aggForm.$invalid" class="visEditorAggHeader__description visEditorAggHeader__description--danger" title="{{aggForm.describeErrors()}}">
{{ aggForm.describeErrors() }}
</span>
<!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
<div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
<!-- disable aggregation -->
<!-- open/close editor -->
<button
ng-if="agg.enabled && canRemove(agg)"
ng-click="agg.enabled = false"
aria-label="{{::'common.ui.vis.editors.agg.disableAggButtonAriaLabel' | i18n: { defaultMessage: 'Disable aggregation' } }}"
tooltip="{{::'common.ui.vis.editors.agg.disableAggButtonTooltip' | i18n: { defaultMessage: 'Disable aggregation' } }}"
tooltip-append-to-body="true"
data-test-subj="disableAggregationBtn"
aria-label="{{::'common.ui.vis.editors.agg.toggleEditorButtonAriaLabel' | i18n: { defaultMessage: 'Toggle {schema} editor', values: { schema: agg.schema.title } } }}"
ng-click="editorOpen = !editorOpen"
aria-expanded="{{ !!editorOpen }}"
aria-controls="visAggEditorParams{{agg.id}}"
type="button"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-toggle-on"></i>
</button>
data-test-subj="toggleEditor"
class="visEditorSidebar__collapsibleTitleLabel">
<!-- enable aggregation -->
<button
ng-if="!agg.enabled"
ng-click="agg.enabled = true"
aria-label="{{::'common.ui.vis.editors.agg.enableAggButtonAriaLabel' | i18n: { defaultMessage: 'Enable aggregation' } }}"
tooltip="{{::'common.ui.vis.editors.agg.enableAggButtonTooltip' | i18n: { defaultMessage: 'Enable aggregation' } }}"
tooltip-append-to-body="true"
data-test-subj="disableAggregationBtn"
type="button"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-toggle-off"></i>
</button>
<icon aria-hidden="true" ng-if="editorOpen" type="'arrowDown'" size="'s'"></icon>
<icon aria-hidden="true" ng-if="!editorOpen" type="'arrowRight'" size="'s'"></icon>
<!-- drag handle -->
<button
draggable-handle
ng-if="stats.count > 1"
tooltip="{{::'common.ui.vis.editors.agg.modifyPriorityButtonTooltip' | i18n: { defaultMessage: 'Modify Priority by Dragging' } }}"
tooltip-append-to-body="true"
type="button"
keyboard-move="onPriorityReorder(direction)"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-arrows-v"></i>
<span class="euiScreenReaderOnly"
i18n-id="common.ui.vis.editors.howToModifyScreenReaderPriorityDescription"
i18n-default-message="Use up and down key on this button to move this aggregation up and down in the priority order."
>
<!-- title -->
<span class="visEditorSidebar__collapsibleTitleText">
{{ agg.schema.title }}
</span>
</button>
<!-- remove button -->
<button
ng-if="canRemove(agg)"
aria-label="{{::'common.ui.vis.editors.agg.removeDimensionButtonAriaLabel' | i18n: { defaultMessage: 'Remove Dimension' } }}"
ng-if="stats.count > stats.min"
ng-click="remove(agg)"
tooltip="{{::'common.ui.vis.editors.agg.removeDimensionButtonTooltip' | i18n: { defaultMessage: 'Remove Dimension' } }}"
tooltip-append-to-body="true"
type="button"
class="kuiButton kuiButton--danger kuiButton--small">
<i aria-hidden="true" class="fa fa-times"></i>
</button>
<!-- description -->
<span ng-if="!editorOpen && aggForm.$valid" class="visEditorSidebar__collapsibleTitleDescription" title="{{describe()}}">
{{ describe() }}
</span>
<!-- error -->
<span ng-if="!editorOpen && aggForm.$invalid" class="visEditorSidebar__collapsibleTitleDescription visEditorSidebar__collapsibleTitleDescription--danger" title="{{aggForm.describeErrors()}}">
{{ aggForm.describeErrors() }}
</span>
<!-- controls !!!actually disabling buttons will break tooltips¡¡¡ -->
<div class="visEditorAggHeader__controls kuiButtonGroup kuiButtonGroup--united">
<!-- disable aggregation -->
<button
ng-if="agg.enabled && canRemove(agg)"
ng-click="agg.enabled = false"
aria-label="{{::'common.ui.vis.editors.agg.disableAggButtonAriaLabel' | i18n: { defaultMessage: 'Disable aggregation' } }}"
tooltip="{{::'common.ui.vis.editors.agg.disableAggButtonTooltip' | i18n: { defaultMessage: 'Disable aggregation' } }}"
tooltip-append-to-body="true"
data-test-subj="disableAggregationBtn"
type="button"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-toggle-on"></i>
</button>
<!-- enable aggregation -->
<button
ng-if="!agg.enabled"
ng-click="agg.enabled = true"
aria-label="{{::'common.ui.vis.editors.agg.enableAggButtonAriaLabel' | i18n: { defaultMessage: 'Enable aggregation' } }}"
tooltip="{{::'common.ui.vis.editors.agg.enableAggButtonTooltip' | i18n: { defaultMessage: 'Enable aggregation' } }}"
tooltip-append-to-body="true"
data-test-subj="disableAggregationBtn"
type="button"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-toggle-off"></i>
</button>
<!-- drag handle -->
<button
draggable-handle
ng-if="stats.count > 1"
tooltip="{{::'common.ui.vis.editors.agg.modifyPriorityButtonTooltip' | i18n: { defaultMessage: 'Modify Priority by Dragging' } }}"
tooltip-append-to-body="true"
type="button"
keyboard-move="onPriorityReorder(direction)"
class="kuiButton kuiButton--basic kuiButton--small">
<i aria-hidden="true" class="fa fa-arrows-v"></i>
<span class="euiScreenReaderOnly"
i18n-id="common.ui.vis.editors.howToModifyScreenReaderPriorityDescription"
i18n-default-message="Use up and down key on this button to move this aggregation up and down in the priority order."
>
</span>
</button>
<!-- remove button -->
<button
ng-if="canRemove(agg)"
aria-label="{{::'common.ui.vis.editors.agg.removeDimensionButtonAriaLabel' | i18n: { defaultMessage: 'Remove Dimension' } }}"
ng-if="stats.count > stats.min"
ng-click="remove(agg)"
tooltip="{{::'common.ui.vis.editors.agg.removeDimensionButtonTooltip' | i18n: { defaultMessage: 'Remove Dimension' } }}"
tooltip-append-to-body="true"
type="button"
class="kuiButton kuiButton--basic kuiButton--small">
<icon aria-hidden="true" color="'danger'" type="'cross'" size="'m'"></icon>
</button>
</div>
</div>
<vis-editor-agg-params
id="visAggEditorParams{{agg.id}}"
agg="agg"
group-name="groupName"
ng-show="editorOpen"
index-pattern="vis.indexPattern">
</vis-editor-agg-params>
</div>
<vis-editor-agg-params
id="visAggEditorParams{{agg.id}}"
agg="agg"
group-name="groupName"
ng-show="editorOpen"
index-pattern="vis.indexPattern">
</vis-editor-agg-params>
<vis-editor-agg-add
ng-if="$index + 1 === stats.count"
ng-hide="dragging">

10
src/ui/public/vis/editors/default/agg_group.html
View file

@ -1,14 +1,16 @@
<div class="sidebar-item visEditorAggGroup__wrapper">
<div class="sidebar-item-title visEditorAggGroup__title">
<div class="visEditorSidebar__section">
<div class="visEditorSidebar__sectionTitle">
{{ groupNameLabel }}
</div>
<div ng-class="groupName" draggable-container="group" class="visEditorAggGroup">
<div ng-class="groupName" draggable-container="group">
<div ng-repeat="agg in group track by agg.id" data-test-subj="aggregationEditor{{agg.id}}" draggable-item="agg">
<!-- agg.html - controls for aggregation -->
<ng-form vis-editor-agg name="aggForm" class="visEditorAgg"></ng-form>
<ng-form vis-editor-agg name="aggForm"></ng-form>
</div>
<vis-editor-agg-add ng-if="stats.count === 0" data-test-subj="addAggregationButton"></vis-editor-agg-add>
</div>
</div>
<br>

2
src/ui/public/vis/editors/default/agg_params.js
View file

@ -89,7 +89,7 @@ uiModules
addAggSelector();
function addSchemaEditor() {
const $schemaEditor = $('<div>').addClass('schemaEditors').appendTo($el);
const $schemaEditor = $('<div>').addClass('schemaEditors form-group').appendTo($el);
if ($scope.agg.schema.editor) {
$schemaEditor.append($scope.agg.schema.editor);

2
src/ui/public/vis/editors/default/agg_select.html
View file

@ -17,7 +17,7 @@
<a
ng-if="aggHelpLink"
href="{{aggHelpLink}}"
class="pull-right"
class="pull-right visEditorAggSelect__helpLink"
target="_blank"
rel="noopener noreferrer"
i18n-id="common.ui.vis.editors.aggSelect.helpLinkLabel"

10
src/ui/public/vis/editors/default/sidebar.html
View file

@ -1,6 +1,6 @@
<div class="sidebar-container visEditorSidebar__container">
<div class="visEditorSidebar__container">
<form
class="sidebar-list visEditorSidebar__form"
class="visEditorSidebar__form"
ng-submit="visualizeEditor.$invalid ? stageEditableVis(false) : stageEditableVis()"
name="visualizeEditor"
novalidate
@ -17,14 +17,14 @@
}
}}"
ng-if="vis.type.requiresSearch && vis.type.options.showIndexSelection"
class="index-pattern visEditorSidebar__indexPattern"
class="visEditorSidebar__indexPattern"
tabindex="0"
id="sidebarIndexPatternTitle"
>
{{ vis.indexPattern.title }}
</div>
<nav class="navbar navbar-default subnav visEditorSidebar__nav">
<nav class="navbar visEditorSidebar__nav">
<div class="container-fluid">
<!-- tabs -->
@ -115,7 +115,7 @@
tooltip="{{::'common.ui.vis.editors.sidebar.applyChangesTooltip' | i18n: { defaultMessage: 'Apply changes' } }}"
tooltip-placement="bottom"
tooltip-popup-delay="400" tooltip-append-to-body="1"
ng-hide="autoApplyEnabled"
ng-hide="autoApplyEnabled || visualizeEditor.softErrorCount() > 0"
>
<button
data-test-subj="visualizeEditorRenderButton"

2
src/ui/public/vis/map/_leaflet_overrides.scss
View file

@ -99,7 +99,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
display: none !important;
}
.leaflet-control-attribution {
.leaflet-container .leaflet-control-attribution {
background-color: transparentize($euiColorEmptyShade, .7);
color: $euiColorDarkShade;

6
test/functional/page_objects/point_series_page.js
View file

@ -40,12 +40,12 @@ export function PointSeriesPageProvider({ getService }) {
}
async getValueAxesCount() {
const axes = await find.allByCssSelector('.kuiSideBarSection:contains("Value Axes") > .kuiSideBarSection');
const axes = await find.allByCssSelector('.visEditorSidebar__section:contains("Value Axes") > .visEditorSidebar__section');
return axes.length;
}
async getSeriesCount() {
const series = await find.allByCssSelector('.kuiSideBarSection:contains("Series") > .kuiSideBarSection');
const series = await find.allByCssSelector('.visEditorSidebar__section:contains("Series") > .visEditorSidebar__section');
return series.length;
}
@ -82,7 +82,7 @@ export function PointSeriesPageProvider({ getService }) {
}
async toggleCollapsibleTitle(title) {
const sidebarTitles = await find.allByCssSelector('.kuiSideBarCollapsibleTitle .kuiSideBarCollapsibleTitle__text');
const sidebarTitles = await find.allByCssSelector('.visEditorSidebar__collapsibleTitle .visEditorSidebar__collapsibleTitleText');
log.debug('found sidebar titles ' + sidebarTitles.length);
return Promise.all(sidebarTitles.map(async (titleDiv) => {

6
test/functional/page_objects/visualize_page.js
View file

@ -440,10 +440,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
// it would be nice to get the correct axis by name like "LeftAxis-1"
// instead of an incremented index, but this link isn't under the div above
const advancedLink =
await find.byCssSelector(`#axisOptionsValueAxis-1 .kuiSideBarOptionsLink .kuiSideBarOptionsLink__caret`);
await find.byCssSelector(`#axisOptionsValueAxis-1 .visEditorSidebar__advancedLinkIcon`);
const advancedLinkState = await advancedLink.getAttribute('class');
if (advancedLinkState.includes('fa-caret-right')) {
const advancedLinkState = await advancedLink.getAttribute('type');
if (advancedLinkState.includes('arrowRight')) {
await advancedLink.moveMouseTo();
log.debug('click advancedLink');
await advancedLink.click();

1
x-pack/plugins/security/webpackShims/angular-ui-select.js vendored
View file

@ -9,7 +9,6 @@ require('jquery');
require('angular');
require('angular-sanitize');
require('ui-select/dist/select');
require('ui-select/dist/select.css');
var uiModules = require('ui/modules').uiModules;
uiModules.get('kibana', ['ui.select', 'ngSanitize']);