github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UI Framework] Add Icon and InfoPanel types. (#10107)

Browse source 
Backports PR #10056

**Commit 1:**
Add inactive and info Icons.

* Original sha: 3c2d12d8f5
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-25T04:46:13Z

**Commit 2:**
Add info, success, and warning InfoPanels. Change background-color to white and use a colored border instead.

* Original sha: 25ef494e24
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-25T05:04:56Z

**Commit 3:**
Update Saved Object Management view to use new InfoPanel styles.

* Original sha: 4798befe26
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-25T16:52:47Z

**Commit 4:**
Address Shaunak's feedback.

* Original sha: 153f23aac9
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-27T23:53:35Z
This commit is contained in:
jasper 2017-01-28 20:40:40 -05:00 • committed by CJ Cenizal
parent 65d5627c94
commit cb5c6618ab
15 changed files with 281 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

65
src/core_plugins/kibana/public/management/sections/objects/_view.html
View file

@ -28,35 +28,62 @@
</div>
<!-- Errors -->
<div class="bs-callout bs-callout-danger" ng-if="notFound">
<h4>There is a problem with this saved object</h4>
<div
class="kuiViewContentItem kuiVerticalRhythm"
ng-if="notFound"
>
<div class="kuiInfoPanel kuiInfoPanel--error">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
<span class="kuiInfoPanelHeader__title">
There is a problem with this saved object
</span>
</div>
<p ng-if="notFound === 'search'">
The saved search associated with this object no longer exists.
</p>
<div class="kuiInfoPanelBody">
<div
class="kuiInfoPanelBody__message"
ng-if="notFound === 'search'"
>
The saved search associated with this object no longer exists.
</div>
<p ng-if="notFound === 'index-pattern'">
The index pattern associated with this object no longer exists.
</p>
<div
class="kuiInfoPanelBody__message"
ng-if="notFound === 'index-pattern'"
>
The index pattern associated with this object no longer exists.
</div>
<p ng-if="notFound === 'index-pattern-field'">
A field associated with this object no longer exists in the index pattern.
</p>
<div
class="kuiInfoPanelBody__message"
ng-if="notFound === 'index-pattern-field'"
>
A field associated with this object no longer exists in the index pattern.
</div>
<p>
If you know what this error means, go ahead and fix it &mdash; otherwise click the delete button above.
</p>
<div class="kuiInfoPanelBody__message">
If you know what this error means, go ahead and fix it &mdash; otherwise click the delete button above.
</div>
</div>
</div>
</div>
<!-- Intro -->
<div class="kuiViewContentItem kuiVerticalRhythm">
<div class="kuiInfoPanel kuiInfoPanel--warning">
<p>
<span class="kuiIcon kuiIcon--warning fa-bolt"></span>
<strong>Proceed with caution!</strong>
</p>
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
<span class="kuiInfoPanelHeader__title">
Proceed with caution!
</span>
</div>
<p>Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.</p>
<div class="kuiInfoPanelBody">
<div class="kuiInfoPanelBody__message">
Modifying objects is for advanced users only. Object properties are not validated and invalid objects could cause errors, data loss, or worse. Unless someone with intimate knowledge of the code told you to be in here, you probably shouldn&rsquo;t be.
</div>
</div>
</div>
</div>

8
ui_framework/components/icon/_icon.scss
View file

@ -11,6 +11,10 @@
-moz-osx-font-smoothing: grayscale; /* 1 */
}
.kuiIcon--info {
color: $infoColor;
}
.kuiIcon--success {
color: $successColor;
}
@ -22,3 +26,7 @@
.kuiIcon--error {
color: $errorColor;
}
.kuiIcon--inactive {
color: $inactiveColor;
}

1
ui_framework/components/index.scss
View file

@ -31,6 +31,7 @@ $buttonBorderRadius: 4px;
// Colors
$infoColor: #3fa8c7;
$inactiveColor: #c3c3c3;
$successColor: #417505;
$warningColor: #ec9800;
$errorColor: #D86051;

66
ui_framework/components/info_panel/_info_panel.scss
View file

@ -1,8 +1,68 @@
.kuiInfoPanel {
padding: 20px;
padding: 14px 20px 18px;
line-height: $lineHeight;
border: 2px solid;
}
.kuiInfoPanel--warning {
background-color: #FFF6E4;
/**
* 1. TODO: Pick a hex value instead of making these colors translucent.
*/
.kuiInfoPanel--info {
border-color: rgba($infoColor, 0.25); /* 1 */
}
/**
* 1. TODO: Pick a hex value instead of making these colors translucent.
*/
.kuiInfoPanel--success {
border-color: rgba($successColor, 0.25); /* 1 */
}
/**
* 1. TODO: Pick a hex value instead of making these colors translucent.
*/
.kuiInfoPanel--warning {
border-color: rgba($warningColor, 0.25); /* 1 */
}
/**
* 1. TODO: Pick a hex value instead of making these colors translucent.
*/
.kuiInfoPanel--error {
border-color: rgba($errorColor, 0.25); /* 1 */
}
/**
* 1. Align with first line of title text if it wraps.
*/
.kuiInfoPanelHeader {
display: flex;
align-items: baseline; /* 1 */
}
.kuiInfoPanelHeader__icon {
margin-right: 10px;
font-size: $fontSize;
line-height: $lineHeight;
}
.kuiInfoPanelHeader__title {
font-size: $fontSize;
line-height: $lineHeight;
font-weight: 700;
}
.kuiInfoPanelBody {
$infoPanelVerticalRhythm: 8px;
margin-top: $infoPanelVerticalRhythm;
> * + * {
margin-top: $infoPanelVerticalRhythm;
}
}
.kuiInfoPanelBody__message {
font-size: $fontSize;
line-height: $lineHeight;
}

62
ui_framework/dist/ui_framework.css vendored
View file

@ -513,6 +513,9 @@ body {
-moz-osx-font-smoothing: grayscale;
/* 1 */ }
.kuiIcon--info {
color: #3fa8c7; }
.kuiIcon--success {
color: #417505; }
@ -522,12 +525,65 @@ body {
.kuiIcon--error {
color: #D86051; }
.kuiIcon--inactive {
color: #c3c3c3; }
.kuiInfoPanel {
padding: 20px;
line-height: 1.5; }
padding: 14px 20px 18px;
line-height: 1.5;
border: 2px solid; }
/**
* 1. TODO: Pick a hex value instead of making these colors translucent.
*/
.kuiInfoPanel--info {
border-color: rgba(63, 168, 199, 0.25);
/* 1 */ }
.kuiInfoPanel--success {
border-color: rgba(65, 117, 5, 0.25);
/* 1 */ }
.kuiInfoPanel--warning {
background-color: #FFF6E4; }
border-color: rgba(255, 172, 21, 0.25);
/* 1 */ }
.kuiInfoPanel--error {
border-color: rgba(216, 96, 81, 0.25);
/* 1 */ }
/**
* 1. Align with first line of title text if it wraps.
*/
.kuiInfoPanelHeader {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-webkit-align-items: baseline;
-ms-flex-align: baseline;
align-items: baseline;
/* 1 */ }
.kuiInfoPanelHeader__icon {
margin-right: 10px;
font-size: 14px;
line-height: 1.5; }
.kuiInfoPanelHeader__title {
font-size: 14px;
line-height: 1.5;
font-weight: 700; }
.kuiInfoPanelBody {
margin-top: 8px; }
.kuiInfoPanelBody > * + * {
margin-top: 8px; }
.kuiInfoPanelBody__message {
font-size: 14px;
line-height: 1.5; }
.kuiLink {
color: #3CAED2;

22
ui_framework/doc_site/src/views/icon/icon_example.jsx
View file

@ -11,25 +11,39 @@ export default createExample([{
),
html: require('./icon.html'),
hasDarkTheme: false,
}, {
title: 'Info',
description: (
<p>Use this Icon to denote useful information.</p>
),
html: require('./icon_info.html'),
hasDarkTheme: false,
}, {
title: 'Success',
description: (
<p>Use this Icon to convey the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
<p>Use this Icon to denote the successful completion of an action, e.g. filling out a form field correctly or a successful API request.</p>
),
html: require('./icon_success.html'),
hasDarkTheme: false,
}, {
title: 'Warning',
description: (
<p>Use this Icon to convey an irregularity or potential problems.</p>
<p>Use this Icon to denote an irregularity or potential problems.</p>
),
html: require('./icon_warning.html'),
hasDarkTheme: false,
}, {
title: 'Error',
description: (
<p>Use this Icon to convey a failed attempt at an action, e.g. an invalid form field or an API error.</p>
<p>Use this Icon to denote a failed attempt at an action, e.g. an invalid form field or an API error.</p>
),
html: require('./icon_error.html'),
hasDarkTheme: false,
}]);
}, {
title: 'Inactive',
description: (
<p>Use this Icon to denote a disabled, inactive, off, offline, or asleep status.</p>
),
html: require('./icon_inactive.html'),
hasDarkTheme: false,
}, ]);

1
ui_framework/doc_site/src/views/icon/icon_inactive.html Normal file
View file

@ -0,0 +1 @@
<div class="kuiIcon kuiIcon--inactive fa-circle-o"></div>

1
ui_framework/doc_site/src/views/icon/icon_info.html Normal file
View file

@ -0,0 +1 @@
<div class="kuiIcon kuiIcon--info fa-info"></div>

10
ui_framework/doc_site/src/views/info_panel/info_panel.html
View file

@ -1,10 +0,0 @@
<div class="kuiInfoPanel kuiInfoPanel--warning">
<p>
<span class="kuiIcon kuiIcon--warning fa-bolt"></span>
<strong>Proceed with caution!</strong>
</p>
<p>
Here be dragons. Don&rsquo;t wanna mess with no dragons.
</p>
</div>

14
ui_framework/doc_site/src/views/info_panel/info_panel_error.html Normal file
View file

@ -0,0 +1,14 @@
<div class="kuiInfoPanel kuiInfoPanel--error">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--error fa-warning"></span>
<span class="kuiInfoPanelHeader__title">
Sorry, there was an error.
</span>
</div>
<div class="kuiInfoPanelBody">
<div class="kuiInfoPanelBody__message">
Now you have to fix it, but maybe <a href="#" class="kuiLink">this link can help</a>.
</div>
</div>
</div>

23
ui_framework/doc_site/src/views/info_panel/info_panel_example.jsx
View file

@ -5,10 +5,31 @@ import {
} from '../../services';
export default createExample([{
title: 'Info',
description: (
<p>Use this InfoPanel to generally inform the user.</p>
),
html: require('./info_panel_info.html'),
hasDarkTheme: false,
}, {
title: 'Success',
description: (
<p>Use this InfoPanel to notify the user of an action successfully completing.</p>
),
html: require('./info_panel_success.html'),
hasDarkTheme: false,
}, {
title: 'Warning',
description: (
<p>Use this InfoPanel to warn the user against decisions they might regret.</p>
),
html: require('./info_panel.html'),
html: require('./info_panel_warning.html'),
hasDarkTheme: false,
}, {
title: 'Error',
description: (
<p>Use this InfoPanel to let the user know something went wrong.</p>
),
html: require('./info_panel_error.html'),
hasDarkTheme: false,
}]);

18
ui_framework/doc_site/src/views/info_panel/info_panel_info.html Normal file
View file

@ -0,0 +1,18 @@
<div class="kuiInfoPanel kuiInfoPanel--info">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--info fa-info"></span>
<span class="kuiInfoPanelHeader__title">
Check it out.
</span>
</div>
<div class="kuiInfoPanelBody">
<div class="kuiInfoPanelBody__message">
Here&rsquo;s some stuff that you need to know.
</div>
<div class="kuiInfoPanelBody__message">
And some other stuff on another line, just for kicks.
</div>
</div>
</div>

14
ui_framework/doc_site/src/views/info_panel/info_panel_success.html Normal file
View file

@ -0,0 +1,14 @@
<div class="kuiInfoPanel kuiInfoPanel--success">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--success fa-check"></span>
<span class="kuiInfoPanelHeader__title">
Good news, everyone!
</span>
</div>
<div class="kuiInfoPanelBody">
<div class="kuiInfoPanelBody__message">
I have no news. Which is good!
</div>
</div>
</div>

14
ui_framework/doc_site/src/views/info_panel/info_panel_warning.html Normal file
View file

@ -0,0 +1,14 @@
<div class="kuiInfoPanel kuiInfoPanel--warning">
<div class="kuiInfoPanelHeader">
<span class="kuiInfoPanelHeader__icon kuiIcon kuiIcon--warning fa-bolt"></span>
<span class="kuiInfoPanelHeader__title">
Proceed with caution!
</span>
</div>
<div class="kuiInfoPanelBody">
<div class="kuiInfoPanelBody__message">
Here be dragons. Don&rsquo;t wanna mess with no dragons.
</div>
</div>
</div>

4
ui_framework/doc_site/src/views/typography/typography_example.jsx
View file

@ -7,14 +7,14 @@ import {
export default createExample([{
title: 'Title',
description: (
<p>Works well with an H1.</p>
<p>Works well with an <code className="guideCode">h1</code>.</p>
),
html: require('./title.html'),
hasDarkTheme: false,
}, {
title: 'SubTitle',
description: (
<p>Works well with an H2.</p>
<p>Works well with an <code className="guideCode">h2</code>.</p>
),
html: require('./sub_title.html'),
hasDarkTheme: false,