github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Add Elastic logo to UI Framework doc site. (#11686) (#11687)

Browse source
This commit is contained in:
CJ Cenizal 2017-05-09 15:53:17 -07:00 • committed by GitHub
parent 8013644775
commit 3e714055ef
10 changed files with 123 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

2
ui_framework/doc_site/src/components/guide_code_viewer/_guide_code_viewer.scss
View file

@ -13,7 +13,7 @@
@include scrollbar;
@include whenNarrowerThan($normalBreakpoint) {
@include whenNarrowerThan($guideNormalBreakpoint) {
width: $guideCodeViewerSmallWidth;
}

46
ui_framework/doc_site/src/components/guide_nav/_guide_nav.scss
View file

@ -6,6 +6,7 @@
top: 0;
left: 0;
right: 0;
min-width: $guideMinWidth;
height: $guideNavHeight;
border-bottom: 1px solid #CCCCCC;
color: $guideTextColor;
@ -21,6 +22,7 @@
}
.guideNav__header {
position: relative;
flex: 0 0 auto;
display: flex;
align-items: center;
@ -57,6 +59,17 @@
font-size: 14px;
}
.guideNav__elasticLogo {
position: absolute;
background-image: url("images/elastic-logo.svg");
width: 106px;
height: 36px;
background-repeat: no-repeat;
background-size: contain;
left: 50%;
transform: translateX(-50%);
}
.guideNavSearch {
margin: 0 20px;
width: 100%;
@ -118,3 +131,36 @@
margin-top: 0;
margin-bottom: 0;
}
.guideNavPaginationButtons {
position: absolute;
top: 10px;
right: 10px;
}
.guideNavPaginationButton {
appearance: none;
border: none;
line-height: 10px;
padding: 4px 20px;
color: $guideLinkHoverColor;
background-color: #fff;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
&:hover,
&:active {
background-color: #e6f7fc;
}
&.guideNavPaginationButton-isDisabled {
pointer-events: none;
color: rgba($guideTextColor, 0.25);
border-color: rgba($guideTextColor, 0.25);
}
& + & {
margin-left: 10px;
}
}

62
ui_framework/doc_site/src/components/guide_nav/guide_nav.js
View file

@ -10,11 +10,17 @@ import {
import classNames from 'classnames';
export class GuideNav extends Component {
constructor() {
super();
constructor(props) {
super(props);
const currentRoute = props.routes[1];
const nextRoute = this.props.getNextRoute(currentRoute.name);
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
this.state = {
search: '',
nextRoute,
previousRoute,
};
this.onSearchChange = this.onSearchChange.bind(this);
@ -26,6 +32,17 @@ export class GuideNav extends Component {
});
}
componentWillReceiveProps(nextProps) {
const currentRoute = nextProps.routes[1];
const nextRoute = this.props.getNextRoute(currentRoute.name);
const previousRoute = this.props.getPreviousRoute(currentRoute.name);
this.setState({
nextRoute,
previousRoute,
});
}
renderNoItems(name) {
return (
<p className="guideNavNoItems">
@ -34,6 +51,41 @@ export class GuideNav extends Component {
);
}
renderPagination() {
const previousClasses = classNames('guideNavPaginationButton', {
'guideNavPaginationButton-isDisabled': !this.state.previousRoute,
});
const previousButton = (
<Link
className={previousClasses}
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
>
<span className="fa fa-angle-left"></span>
</Link>
);
const nextClasses = classNames('guideNavPaginationButton', {
'guideNavPaginationButton-isDisabled': !this.state.nextRoute,
});
const nextButton = (
<Link
className={nextClasses}
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
>
<span className="fa fa-angle-right"></span>
</Link>
);
return (
<div className="guideNavPaginationButtons">
{previousButton}
{nextButton}
</div>
);
}
render() {
const classes = classNames('guideNav', {
'is-guide-nav-open': this.props.isNavOpen,
@ -89,6 +141,9 @@ export class GuideNav extends Component {
>
Kibana UI Framework <span className="guideNav__version">{this.props.version}</span>
</Link>
<div className="guideNav__elasticLogo" />
{this.renderPagination()}
</div>
<div>
@ -125,6 +180,9 @@ GuideNav.propTypes = {
onToggleNav: PropTypes.func,
onClickNavItem: PropTypes.func,
version: PropTypes.string,
routes: PropTypes.array,
getNextRoute: PropTypes.func,
getPreviousRoute: PropTypes.func,
components: PropTypes.array,
sandboxes: PropTypes.array,
};

2
ui_framework/doc_site/src/components/guide_page/_guide_page.scss
View file

@ -22,7 +22,7 @@
width: calc(100vw - #{$leftMargin + $rightMargin + $scrollBarWidth + $guideCodeViewerWidth});
}
@include whenNarrowerThan($normalBreakpoint) {
@include whenNarrowerThan($guideNormalBreakpoint) {
$leftMargin: 20px + $guideSideNavSmallWidth;
$rightMargin: 20px;

2
ui_framework/doc_site/src/components/guide_page_side_nav/_guide_page_side_nav.scss
View file

@ -10,7 +10,7 @@
@include scrollbar;
@include whenNarrowerThan($normalBreakpoint) {
@include whenNarrowerThan($guideNormalBreakpoint) {
width: $guideSideNavSmallWidth;
}
}

3
ui_framework/doc_site/src/images/elastic-logo.svg Normal file
View file

@ -0,0 +1,3 @@
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="-155 383.3 687.5 235.7" xml:space="preserve" enable-background="new -155 383.3 687.5 235.7">
<path fill="#FFFFFF" d="M81.6 506.8c0-19.8-12.3-37.2-30.8-43.9 0.8-4.2 1.2-8.4 1.2-12.7 0-36.9-30-66.9-66.8-66.9 -21.6 0-41.6 10.3-54.2 27.7 -6.2-4.8-13.8-7.4-21.7-7.4 -19.6 0-35.5 15.9-35.5 35.5 0 4.3 0.8 8.5 2.2 12.4 -18.4 6.6-31 24.3-31 44 0 19.9 12.4 37.3 30.9 44 -0.8 4.1-1.2 8.4-1.2 12.7 0 36.8 29.9 66.7 66.7 66.7 21.6 0 41.6-10.4 54.1-27.8 6.2 4.9 13.8 7.6 21.7 7.6 19.6 0 35.5-15.9 35.5-35.5 0-4.3-0.8-8.5-2.2-12.4C68.9 544.2 81.6 526.5 81.6 506.8"/><path fill="#FED10A" d="M-62 484.8l51.8 23.6L42 462.6c0.8-3.8 1.1-7.5 1.1-11.5 0-32.2-26.2-58.4-58.4-58.4 -19.3 0-37.2 9.5-48.1 25.4l-8.7 45.1L-62 484.8z"/><path fill="#24BBB1" d="M-115.6 539.6c-0.8 3.8-1.1 7.7-1.1 11.7 0 32.3 26.3 58.5 58.6 58.5 19.4 0 37.5-9.6 48.4-25.6l8.6-44.9 -11.5-22 -52-23.7L-115.6 539.6z"/><path fill="#EF5098" d="M-115.9 450l35.5 8.4 7.8-40.3c-4.8-3.7-10.8-5.7-17-5.7 -15.4 0-28 12.5-28 28C-117.6 443.7-117 447-115.9 450"/><path fill="#17A8E0" d="M-119 458.5c-15.8 5.2-26.9 20.4-26.9 37.1 0 16.3 10.1 30.8 25.2 36.6l49.8-45 -9.1-19.5L-119 458.5z"/><path fill="#93C83E" d="M-0.7 584.2c4.9 3.7 10.8 5.8 16.9 5.8 15.4 0 28-12.5 28-28 0-3.4-0.6-6.7-1.7-9.7L7.1 544 -0.7 584.2z"/><path fill="#0779A1" d="M6.5 534.7l39 9.1c15.9-5.2 26.9-20.4 26.9-37.2 0-16.2-10.1-30.8-25.2-36.5l-51 44.7L6.5 534.7z"/><path d="M175.8 548.8l4.7-0.5 0.3 9.6c-12.4 1.7-23 2.6-31.8 2.6 -11.7 0-20-3.4-24.9-10.2s-7.3-17.4-7.3-31.7c0-28.6 11.4-42.9 34.1-42.9 11 0 19.2 3.1 24.6 9.2s8.1 15.8 8.1 28.9l-0.7 9.3h-53.8c0 9 1.6 15.7 4.9 20 3.3 4.3 8.9 6.5 17 6.5C159.2 549.8 167.4 549.5 175.8 548.8zM171.4 513.5c0-10-1.6-17.1-4.8-21.2 -3.2-4.1-8.4-6.2-15.6-6.2s-12.7 2.2-16.3 6.5c-3.6 4.3-5.5 11.3-5.6 20.9H171.4z"/><path d="M200.6 559V442h12.2v117H200.6z"/><path d="M289.9 502.1v40.1c0 4.1 10.1 4.9 10.1 4.9l-0.6 10.8c-8.6 0-15.7 0.7-20-3.4 -9.8 4.3-19.5 6.1-29.3 6.1 -7.5 0-13.2-2.1-17.1-6.4 -3.9-4.2-5.9-10.3-5.9-18.3 0-7.9 2-13.8 6-17.5 4-3.7 10.3-6.1 18.9-6.9l25.6-2.4v-7c0-5.5-1.2-9.5-3.6-11.9 -2.4-2.4-5.7-3.6-9.8-3.6h-32.1v-10.8h31.3c9.2 0 15.9 2.1 20.1 6.4C287.8 486.4 289.9 493.1 289.9 502.1zM239.7 535.3c0 10 4.1 15 12.4 15 7.4 0 14.7-1.2 21.8-3.7l3.7-1.3v-26.9l-24.1 2.3c-4.9 0.4-8.4 1.8-10.6 4.2C240.7 527.3 239.7 530.8 239.7 535.3z"/><path d="M337.6 486.7c-11.8 0-17.8 4.1-17.8 12.4 0 3.8 1.4 6.5 4.1 8.1s8.9 3.2 18.6 4.9c9.7 1.7 16.5 4 20.5 7.1 4 3 6 8.7 6 17.1 0 8.4-2.7 14.5-8.1 18.4 -5.4 3.9-13.2 5.9-23.6 5.9 -6.7 0-29.2-2.5-29.2-2.5l0.7-10.6c12.9 1.2 22.3 2.2 28.6 2.2 6.3 0 11.1-1 14.4-3s5-5.4 5-10.1 -1.4-7.9-4.2-9.6c-2.8-1.7-9-3.3-18.6-4.8s-16.4-3.7-20.4-6.7c-4-2.9-6-8.4-6-16.3 0-7.9 2.8-13.8 8.4-17.6 5.6-3.8 12.6-5.7 20.9-5.7 6.6 0 29.6 1.7 29.6 1.7v10.7C354.4 487.6 344.5 486.7 337.6 486.7z"/><path d="M428 488.1h-25.9v39c0 9.3 0.7 15.5 2 18.4 1.4 2.9 4.6 4.4 9.7 4.4l14.5-1 0.8 10.1c-7.3 1.2-12.8 1.8-16.6 1.8 -8.5 0-14.3-2.1-17.6-6.2s-4.9-12-4.9-23.6v-42.9h-11.6v-10.6H390v-25h12.1v24.9H428V488.1z"/><path d="M445 459v-14.1h12.2v14.2L445 459 445 459zM445 559v-81.5h12.2V559H445z"/><path d="M510.2 475.8c3.6 0 9.7 0.7 18.3 2l3.9 0.5 -0.5 9.9c-8.7-1-15.1-1.5-19.2-1.5 -9.2 0-15.5 2.2-18.8 6.6s-5 12.6-5 24.5c0 11.9 1.5 20.2 4.6 24.9 3.1 4.7 9.5 7 19.3 7l19.2-1.5 0.5 10.1c-10.1 1.5-17.7 2.3-22.7 2.3 -12.7 0-21.5-3.3-26.3-9.8s-7.3-17.5-7.3-33 2.6-26.4 7.8-32.6C489.3 479 498 475.8 510.2 475.8z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.4 KiB

37
ui_framework/doc_site/src/main.scss
View file

@ -20,6 +20,7 @@ body {
background-color: $guideBaseBackgroundColor;
line-height: 40px; /* 1 */
margin: 0;
min-width: $guideMinWidth;
}
.guide {
@ -35,7 +36,7 @@ body {
&.is-code-viewer-open {
padding-right: $guideCodeViewerWidth;
@include whenNarrowerThan($normalBreakpoint) {
@include whenNarrowerThan($guideNormalBreakpoint) {
padding-right: $guideCodeViewerSmallWidth;
}
}
@ -52,37 +53,3 @@ body {
.guideBreak {
border: none;
}
.guidePaginationButtons {
position: fixed;
z-index: 10001;
top: 10px;
right: 10px;
}
.guidePaginationButton {
appearance: none;
border: none;
line-height: 10px;
padding: 4px 20px;
color: $guideLinkHoverColor;
background-color: #fff;
border: 1px solid $guideLinkHoverColor;
border-radius: 3px;
cursor: pointer;
&:hover,
&:active {
background-color: #e6f7fc;
}
&.guidePaginationButton-isDisabled {
pointer-events: none;
color: rgba($guideTextColor, 0.25);
border-color: rgba($guideTextColor, 0.25);
}
& + & {
margin-left: 10px;
}
}

4
ui_framework/doc_site/src/variables.scss
View file

@ -12,7 +12,9 @@ $guidePanelBackgroundColor: #ffffff;
$guideTextColor: #444;
$guideLinkHoverColor: #00a9e5;
$normalBreakpoint: 1900px;
// Breakpoints
$guideMinWidth: 840px;
$guideNormalBreakpoint: 1900px;
@mixin whenNarrowerThan($browserWidth) {
@media only screen and (max-width: #{$browserWidth}) {

61
ui_framework/doc_site/src/views/app_view.js
View file

@ -3,10 +3,6 @@ import React, {
PropTypes,
} from 'react';
import {
Link,
} from 'react-router';
import classNames from 'classnames';
import {
@ -25,14 +21,8 @@ export class AppView extends Component {
constructor(props) {
super(props);
const currentRoute = props.routes[1];
const nextRoute = Routes.getNextRoute(currentRoute.name);
const previousRoute = Routes.getPreviousRoute(currentRoute.name);
this.state = {
isNavOpen: false,
nextRoute,
previousRoute,
};
this.onClickNavItem = this.onClickNavItem.bind(this);
@ -56,52 +46,6 @@ export class AppView extends Component {
});
}
componentWillReceiveProps(nextProps) {
const currentRoute = nextProps.routes[1];
const nextRoute = Routes.getNextRoute(currentRoute.name);
const previousRoute = Routes.getPreviousRoute(currentRoute.name);
this.setState({
nextRoute,
previousRoute,
});
}
renderPagination() {
const previousClasses = classNames('guidePaginationButton', {
'guidePaginationButton-isDisabled': !this.state.previousRoute,
});
const previousButton = (
<Link
className={previousClasses}
to={this.state.previousRoute ? this.state.previousRoute.path : ''}
>
<span className="fa fa-angle-left"></span>
</Link>
);
const nextClasses = classNames('guidePaginationButton', {
'guidePaginationButton-isDisabled': !this.state.nextRoute,
});
const nextButton = (
<Link
className={nextClasses}
to={this.state.nextRoute ? this.state.nextRoute.path : ''}
>
<span className="fa fa-angle-right"></span>
</Link>
);
return (
<div className="guidePaginationButtons">
{previousButton}
{nextButton}
</div>
);
}
render() {
const contentClasses = classNames('guideContent', {
'is-code-viewer-open': this.props.isCodeViewerOpen,
@ -114,6 +58,9 @@ export class AppView extends Component {
onToggleNav={this.onToggleNav}
onClickNavItem={this.onClickNavItem}
version={pkg.version}
routes={this.props.routes}
getNextRoute={Routes.getNextRoute}
getPreviousRoute={Routes.getPreviousRoute}
components={Routes.components}
sandboxes={Routes.sandboxes}
/>
@ -128,8 +75,6 @@ export class AppView extends Component {
title={this.props.title}
source={this.props.source}
/>
{this.renderPagination()}
</div>
);
}

3
ui_framework/doc_site/webpack.config.js
View file

@ -44,6 +44,9 @@ module.exports = {
test: /\.html$/,
loader: 'html',
exclude: /node_modules/
}, {
test: /\.(woff|woff2|ttf|eot|svg|ico)(\?|$)/,
loader: 'file',
}, {
test: require.resolve('jquery'),
loader: 'expose?jQuery!expose?$'