Skip to content

Commit

Permalink
EUI css reset fixes (#15685)
Browse files Browse the repository at this point in the history
* EUI css reset fixes
* Fix linting errors.
  • Loading branch information
cjcenizal authored Dec 19, 2017
1 parent d654fed commit 7840bd4
Show file tree
Hide file tree
Showing 32 changed files with 320 additions and 221 deletions.
66 changes: 32 additions & 34 deletions src/core_plugins/console/public/src/directives/help.html
Original file line number Diff line number Diff line change
@@ -1,40 +1,38 @@
<h2 class="kuiLocalDropdownTitle">Help</h2>
<h2 class="euiTitle">Help</h2>

<tabset>
<tab heading="Request format">
<div class="list-group-item list-group-item--noBorder">
<div class="euiSpacer euiSpacer--m"></div>

<div class="euiPanel euiPanel--paddingLarge">
<div class="euiFlexGroup euiFlexGroup--gutterExtraLarge">
<div class="euiFlexItem">
<h2 class="euiTitle">Request format</h2>
<div class="euiSpacer euiSpacer--l"></div>
You can type one or more requests in the white editor. Console understands requests in a compact format:
<sense-help-example></sense-help-example>
</div>
</tab>
<tab heading="Keyboard tips">
<div class="list-group-item list-group-item--noBorder">
<dl class="dl-horizontal">
<dt></dt>
<dd><strong>General editing</strong></dd>
<dt>Ctrl/Cmd + I</dt>
<dd>Auto indent current request</dd>
<dt>Ctrl + Space</dt>
<dd>Open Auto complete (even if not typing)</dd>
<dt>Ctrl/Cmd + Enter</dt>
<dd>Submit request</dd>
<dt>Ctrl/Cmd + Up/Down</dt>
<dd>Jump to the previous/next request start or end.</dd>
<dt>Ctrl/Cmd + Alt + L</dt>
<dd>Collapse/expand current scope.</dd>
<dt>Ctrl/Cmd + Option + 0</dt>
<dd>Collapse all scopes but the current one. Expand by adding a shift.</dd>
</dl>
<dl class="dl-horizontal">
<dt></dt>
<dd><strong>When auto-complete is visible</strong></dd>
<dt>Down arrow</dt>
<dd>Switch focus to auto-complete menu. Use arrows to further select a term</dd>
<dt>Enter/Tab</dt>
<dd>Select the currently selected or the top most term in auto-complete menu</dd>
<dt>Esc</dt>
<dd>Close auto-complete menu</dd>
<div class="euiFlexItem">
<h2 class="euiTitle">Keyboard commands</h2>
<div class="euiSpacer euiSpacer--l"></div>
<dl class="euiDescriptionList euiDescriptionList--row euiDescriptionList--compressed">
<dt class="euiDescriptionList__title">Ctrl/Cmd + I</dt>
<dd class="euiDescriptionList__description">Auto indent current request</dd>
<dt class="euiDescriptionList__title">Ctrl + Space</dt>
<dd class="euiDescriptionList__description">Open Auto complete (even if not typing)</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Enter</dt>
<dd class="euiDescriptionList__description">Submit request</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Up/Down</dt>
<dd class="euiDescriptionList__description">Jump to the previous/next request start or end.</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Alt + L</dt>
<dd class="euiDescriptionList__description">Collapse/expand current scope.</dd>
<dt class="euiDescriptionList__title">Ctrl/Cmd + Option + 0</dt>
<dd class="euiDescriptionList__description">Collapse all scopes but the current one. Expand by adding a shift.</dd>
<dt class="euiDescriptionList__title">Down arrow</dt>
<dd class="euiDescriptionList__description">Switch focus to auto-complete menu. Use arrows to further select a term</dd>
<dt class="euiDescriptionList__title">Enter/Tab</dt>
<dd class="euiDescriptionList__description">Select the currently selected or the top most term in auto-complete menu</dd>
<dt class="euiDescriptionList__title">Esc</dt>
<dd class="euiDescriptionList__description">Close auto-complete menu</dd>
</dl>
</div>
</tab>
</tabset>
</div>
</div>
70 changes: 37 additions & 33 deletions src/core_plugins/console/public/src/directives/welcome.html
Original file line number Diff line number Diff line change
@@ -1,33 +1,37 @@
<h2 class="kuiLocalDropdownTitle">Welcome to Console</h2>

<p><strong>Quick intro to the UI</strong></p>

<p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
the response pane on the right side.
</p>

<p>Console understands requests in a compact format, similar to cURL:
<sense-help-example></sense-help-example>

<p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
These suggestions are made based on the request structure <i>as well as</i> your indices and types.
</p>

<p><strong>A few quick tips, while I have your attention</strong></p>
<ul>
<li>Submit requests to ES using the green triangle button.</li>
<li>Use the wrench menu for other useful things.</li>
<li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
<li>You can resize the editor and output panes by dragging the separator between them.</li>
<li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
</ul>

<button
type="button"
class="kuiButton kuiButton--primary"
data-test-subj="help-close-button"
ng-click="kbnTopNav.close()"
>
Get to work
</button>
<div class="euiText">

<h2>Welcome to Console</h2>

<p><strong>Quick intro to the UI</strong></p>

<p>The Console UI is split into two panes: an editor pane (left) and a response pane (right).
Use the editor to type requests and submit them to Elasticsearch. The results will be displayed in
the response pane on the right side.
</p>

<p>Console understands requests in a compact format, similar to cURL:
<sense-help-example></sense-help-example>

<p>While typing a request, Console will make suggestions which you can then accept by hitting Enter/Tab.
These suggestions are made based on the request structure <i>as well as</i> your indices and types.
</p>

<p><strong>A few quick tips, while I have your attention</strong></p>
<ul>
<li>Submit requests to ES using the green triangle button.</li>
<li>Use the wrench menu for other useful things.</li>
<li>You can paste requests in cURL format and they will be translated to the Console syntax.</li>
<li>You can resize the editor and output panes by dragging the separator between them.</li>
<li>Study the keyboard shortcuts under the Help button. Good stuff in there!</li>
</ul>

<button
type="button"
class="kuiButton kuiButton--primary"
data-test-subj="help-close-button"
ng-click="kbnTopNav.close()"
>
Get to work
</button>

</div>
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,7 @@
class="kuiButton kuiButton--primary kuiButton--fullWidth">
Add Range
</div>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,7 @@
>
Add Range
</button>
<div class="euiSpacer euiSpacer--s"></div>
<div class="text text-center text-info">Note: colors can be changed in the legend</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/dashboard/styles/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@
.start-screen {
margin: 20px auto;
max-width: 800px;
background: tint(@globalColorBlue, 90%);
background: #FFF;
padding: 40px;
border-radius: 4px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
></bread-crumbs>

<!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="kuiLocalTabs" role="tablist">
<div data-transclude-slot="bottomRow" class="euiTabs" role="tablist">
<a
role="tab"
aria-selected="{{kbnDevToolsApp.currentPath === item.url}}"
ng-repeat="item in kbnDevToolsApp.devTools"
class="kuiLocalTab"
ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
class="euiTab"
ng-class="{'euiTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
kbn-href="{{::item.url}}"
>
{{::item.display}}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="discover-field-details">
<div class="kuiVerticalRhythmSmall">
<p class="kuiSubduedText" ng-show="!field.details.error">
<p class="euiText euiText--extraSmall euiTextColor--subdued" ng-show="!field.details.error">
Top 5 values in
<span ng-if="!field.details.error">
<a
Expand All @@ -20,7 +20,7 @@

<div class="clearfix"></div>

<div ng-if="field.details.error" class="discover-field-details-error">{{field.details.error}}</div>
<div ng-if="field.details.error" class="euiText euiText--extraSmall euiTextColor--subdued">{{field.details.error}}</div>

<div ng-if="!field.details.error">
<div ng-repeat="bucket in ::field.details.buckets" class="discover-field-details-item">
Expand Down
5 changes: 4 additions & 1 deletion src/core_plugins/kibana/public/discover/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,10 @@ <h1 tabindex="0" id="kui_local_breadcrumb" class="kuiLocalBreadcrumb">
<!-- loading -->
<div ng-show="resultState === 'loading'">
<div class="discover-overlay">
<h2>Searching</h2>
<div class="euiTitle">
<h2>Searching</h2>
</div>
<div class="euiSpacer euiSpacer--m"></div>
<div ng-show="fetchStatus">{{fetchStatus.complete}}/{{fetchStatus.total}}</div>
</div>
</div>
Expand Down
60 changes: 43 additions & 17 deletions src/core_plugins/kibana/public/discover/partials/no_results.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<div>
<div class="col-md-10 col-md-offset-1" data-test-subj="discoverNoResults">
<div class="euiPage">

<div class="euiText" data-test-subj="discoverNoResults">

<h1>No results found <i aria-hidden="true" class="fa fa-meh-o"></i></h1>

Expand Down Expand Up @@ -63,21 +64,46 @@ <h3>
The search bar at the top uses Elasticsearch's support for Lucene <a class="kuiLink" documentation-href="query.luceneQuerySyntax" target="_blank" rel="noopener noreferrer">Query String syntax</a>. Let's say we're searching web server logs that have been parsed into a few fields.
</p>

<h4>Examples:</h4>
Find requests that contain the number 200, in any field:
<pre>200</pre>

Or we can search in a specific field. Find 200 in the status field:
<pre>status:200</pre>

Find all status codes between 400-499:
<pre>status:[400 TO 499]</pre>

Find status codes 400-499 with the extension php:
<pre>status:[400 TO 499] AND extension:PHP</pre>

Or HTML
<pre>status:[400 TO 499] AND (extension:php OR extension:html)</pre>
<h4>Examples</h4>

<p>Find requests that contain the number 200, in any field:</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">200</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>

<p>Or we can search in a specific field. Find 200 in the status field:</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:200</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>

<p>Find all status codes between 400-499:</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499]</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>

<p>Find status codes 400-499 with the extension php:</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499] AND extension:PHP</pre>
</code>
</div>
<div class="euiSpacer euiSpacer--l"></div>

<p>Or HTML</p>
<div class="euiCodeBlock euiCodeBlock--light euiCodeBlock--paddingSmall">
<code class="euiCodeBlock__code">
<pre class="euiCodeBlock__pre">status:[400 TO 499] AND (extension:php OR extension:html)</pre>
</code>
</div>
</div>

</div>
Expand Down
6 changes: 2 additions & 4 deletions src/core_plugins/kibana/public/discover/styles/main.less
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,7 @@
bottom: 0;
right: 0;
z-index: 20;
padding-top: 10px;

opacity: 0.75;
text-align: center;
Expand Down Expand Up @@ -209,10 +210,6 @@
white-space: nowrap;
}

.discover-field-details-error {
margin-top: 5px;
}

.discover-field-details-item {
margin-top: 5px;
}
Expand All @@ -222,6 +219,7 @@
}

.discover-field-details-item-title {
line-height: 1.5;
display: flex;
align-items: center;
justify-content: space-between;
Expand Down
Loading

0 comments on commit 7840bd4

Please sign in to comment.