Use ViewContent and Title components in Visualize wizard.

This commit is contained in:
CJ Cenizal 2017-02-06 10:46:50 -08:00
parent 99525ac45d
commit 734c85b5ab
3 changed files with 37 additions and 28 deletions

View file

@ -46,7 +46,6 @@
@media (min-width: @screen-lg) {
.wizard {
padding: 0;
display: flex;
}

View file

@ -12,31 +12,34 @@
<div class="kuiViewContent kuiViewContent--constrainedWidth">
<!-- Header -->
<div class="kuiViewContentItem kuiSubHeader">
<h1 class="kuiTitle">
<div class="kuiViewContentItem">
<h1 class="kuiTitle kuiVerticalRhythm">
Select visualization type
</h1>
</div>
<div class="wizard">
<div class="wizard-column">
<div class="wizard-row">
<a
class="wizard-type"
ng-repeat="type in visTypes.inTitleOrder"
ng-href="{{ visTypeUrl(type) }}"
>
<div class="wizard-type-heading">
<span
aria-hidden="true"
class="wizard-type-heading-icon fa fa-fw"
ng-class="type.icon"
></span>
<h4 data-test-subj="visualizeWizardChartTypeTitle" class="wizard-type-heading-text">{{type.title}}</h4>
</div>
<p class="wizard-type-description">{{type.description}}</p>
</a>
</div>
<div class="kuiVerticalRhythm">
<a
class="wizard-type"
ng-repeat="type in visTypes.inTitleOrder"
ng-href="{{ visTypeUrl(type) }}"
>
<div class="wizard-type-heading">
<span
aria-hidden="true"
class="wizard-type-heading-icon fa fa-fw"
ng-class="type.icon"
></span>
<h4
data-test-subj="visualizeWizardChartTypeTitle"
class="wizard-type-heading-text"
>
{{type.title}}
</h4>
</div>
<p class="wizard-type-description">{{type.description}}</p>
</a>
</div>
</div>
</div>

View file

@ -11,23 +11,30 @@
</kbn-top-nav>
<div class="kuiViewContent kuiViewContent--constrainedWidth">
<div class="wizard">
<div class="wizard kuiViewContentItem">
<div class="wizard-column wizard-column--small">
<h3 class="wizard-sub-title">From a New Search, Select Index</h3>
<h1 class="kuiTitle kuiVerticalRhythm">
From a New Search, Select Index
</h1>
<paginated-selectable-list
per-page="20"
list="indexPattern.list"
user-make-url="makeUrl"
class="wizard-row"
class="wizard-row kuiVerticalRhythm"
></paginated-selectable-list>
</div>
<div class="wizard-column wizard-column--large">
<h3 class="wizard-sub-title">Or, From a Saved Search</h3>
<h2 class="kuiTitle kuiVerticalRhythm">
Or, From a Saved Search
</h2>
<!-- Saved searches -->
<saved-object-finder
title="Saved Searches"
type="searches"
class="wizard-row"
class="wizard-row kuiVerticalRhythm"
make-url="step2WithSearchUrl"
></saved-object-finder>
</div>