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

Add new components to UI Framework.

Browse source 
- Icon, Link, Button, TextInput, CheckBox, Table, ControlledTable, ToolBar, ToolBarFooter.
- Update Local Nav to use classes with kui prefix.
- Add PostCSS loader to UI Framework webpack.
This commit is contained in:
CJ Cenizal 2016-12-13 09:22:39 -08:00
parent bff1533503
commit 644a267ada
110 changed files with 1918 additions and 764 deletions
Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -146,6 +146,7 @@
"node-sass": "3.8.0",
"node-uuid": "1.4.7",
"pegjs": "0.9.0",
"postcss-loader": "1.2.0",
"querystring-browser": "1.0.4",
"raw-loader": "0.5.1",
"request": "2.61.0",

2
src/core_plugins/console/public/src/directives/help.html
View file

@ -1,4 +1,4 @@
<div class="localDropdownTitle">Help</div>
<div class="kuiLocalDropdownTitle">Help</div>
<tabset>
<tab heading="Request format">

2
src/core_plugins/console/public/src/directives/history.html
View file

@ -1,4 +1,4 @@
<div class="localDropdownTitle">History</div>
<div class="kuiLocalDropdownTitle">History</div>
<div class="history-body">
<ul class="list-group history-reqs">

10
src/core_plugins/console/public/src/directives/settings.html
View file

@ -1,9 +1,9 @@
<div class="localDropdownTitle">Settings</div>
<div class="kuiLocalDropdownTitle">Settings</div>
<form class="form" name="settingsForm" ng-submit="settingsForm.$valid && settings.apply()">
<div class="form-group">
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">Font Size</div>
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">Font Size</div>
</div>
<div>
@ -27,8 +27,8 @@
</div>
<div class="form-group">
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">Autocomplete</div>
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">Autocomplete</div>
</div>
<div class="checkbox">

2
src/core_plugins/console/public/src/directives/welcome.html
View file

@ -1,4 +1,4 @@
<div class="localDropdownTitle">Welcome to Console</div>
<div class="kuiLocalDropdownTitle">Welcome to Console</div>
<p><strong>Quick intro to the UI</strong></p>

10
src/core_plugins/kibana/public/dashboard/index.html
View file

@ -6,7 +6,7 @@
<!-- Title. -->
<div
data-transclude-slot="topLeftCorner"
class="localTitle"
class="kuiLocalTitle"
>
<span
ng-show="dash.id"
@ -24,7 +24,7 @@
ng-submit="filterResults()"
>
<div class="typeahead" kbn-typeahead="dashboard">
<div class="localSearch">
<div class="kuiLocalSearch">
<input
parse-query
input-focus
@ -33,13 +33,13 @@
placeholder="Filter..."
aria-label="Filter input"
type="text"
class="localSearchInput"
ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
class="kuiLocalSearchInput"
ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
>
<button
type="submit"
aria-label="Filter Dashboards"
class="localSearchButton"
class="kuiLocalSearchButton"
ng-disabled="queryInput.$invalid"
>
<span class="fa fa-search" aria-hidden="true"></span>

2
src/core_plugins/kibana/public/dashboard/partials/load_dashboard.html
View file

@ -1,2 +1,2 @@
<div class="localDropdownTitle">Open Dashboard</div>
<div class="kuiLocalDropdownTitle">Open Dashboard</div>
<saved-object-finder type="dashboards"></saved-object-finder>

2
src/core_plugins/kibana/public/dashboard/partials/options.html
View file

@ -1,5 +1,5 @@
<form role="form">
<div class="localDropdownTitle">Options</div>
<div class="kuiLocalDropdownTitle">Options</div>
<div class="input-group">
<label>
<input type="checkbox" ng-model="opts.ui.darkTheme" ng-checked="opts.ui.darkTheme">

2
src/core_plugins/kibana/public/dashboard/partials/pick_visualization.html
View file

@ -2,7 +2,7 @@
ng-switch="mode"
ng-init="mode = 'visualization'"
>
<div class="localDropdownTitle">Add Panels</div>
<div class="kuiLocalDropdownTitle">Add Panels</div>
<ul class="nav nav-tabs">
<li ng-class="{active: mode == 'visualization'}">

4
src/core_plugins/kibana/public/dashboard/partials/save_dashboard.html
View file

@ -2,9 +2,9 @@
role="form"
ng-submit="opts.save()"
>
<div class="localDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
<div class="kuiLocalDropdownTitle">Save {{opts.dashboard.getDisplayName()}}</div>
<input
class="localDropdownInput"
class="kuiLocalDropdownInput"
id="dashboardTitle"
type="text"
ng-model="opts.dashboard.title"

6
src/core_plugins/kibana/public/dev_tools/partials/dev_tools_app.html
View file

@ -9,11 +9,11 @@
></bread-crumbs>
<!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="localTabs">
<div data-transclude-slot="bottomRow" class="kuiLocalTabs">
<a
ng-repeat="item in kbnDevToolsApp.devTools"
class="localTab"
ng-class="{'localTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
class="kuiLocalTab"
ng-class="{'kuiLocalTab-isSelected': kbnDevToolsApp.currentPath === item.url}"
kbn-href="{{::item.url}}"
>
{{::item.display}}

16
src/core_plugins/kibana/public/discover/index.html
View file

@ -4,13 +4,13 @@
<!-- Transcluded elements. -->
<div data-transclude-slots>
<!-- Breadcrumbs. -->
<div data-transclude-slot="topLeftCorner" class="localBreadcrumbs">
<div class="localBreadcrumb">
<span ng-show="opts.savedSearch.id" class="localBreadcrumb__emphasis">
<div data-transclude-slot="topLeftCorner" class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<span ng-show="opts.savedSearch.id" class="kuiLocalBreadcrumb__emphasis">
<span data-test-subj="discoverCurrentQuery" ng-bind="opts.savedSearch.lastSavedTitle"></span>
<i aria-label="Reload Saved Search" tooltip="Reload Saved Search" ng-click="resetQuery();" class="fa fa-undo small"></i>&nbsp;
</span>
<span data-test-subj="discoverQueryHits" class="localBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
<span data-test-subj="discoverQueryHits" class="kuiLocalBreadcrumb__emphasis">{{(hits || 0) | number:0}}</span>
<ng-pluralize count="hits" when="{'1':'hit', 'other':'hits'}"></ng-pluralize>
</div>
</div>
@ -24,7 +24,7 @@
ng-submit="fetch()"
>
<div class="typeahead" kbn-typeahead="discover">
<div class="localSearch">
<div class="kuiLocalSearch">
<input
parse-query
input-focus
@ -33,13 +33,13 @@
placeholder="Search..."
aria-label="Search input"
type="text"
class="localSearchInput"
ng-class="{'localSearchInput-isInvalid': discoverSearch.$invalid}"
class="kuiLocalSearchInput"
ng-class="{'kuiLocalSearchInput-isInvalid': discoverSearch.$invalid}"
>
<button
type="submit"
aria-label="Search"
class="localSearchButton"
class="kuiLocalSearchButton"
ng-disabled="discoverSearch.$invalid"
>
<span class="fa fa-search" aria-hidden="true"></span>

2
src/core_plugins/kibana/public/discover/partials/load_search.html
View file

@ -1,4 +1,4 @@
<form role="form" ng-submit="fetch()">
<div class="localDropdownTitle">Open Search</div>
<div class="kuiLocalDropdownTitle">Open Search</div>
<saved-object-finder type="searches"></saved-object-finder>
</form>

4
src/core_plugins/kibana/public/discover/partials/save_search.html
View file

@ -2,9 +2,9 @@
role="form"
ng-submit="opts.saveDataSource()"
>
<div class="localDropdownTitle">Save Search</div>
<div class="kuiLocalDropdownTitle">Save Search</div>
<input
class="localDropdownInput"
class="kuiLocalDropdownInput"
id="SaveSearch"
ng-model="opts.savedSearch.title"
input-focus="select"

8
src/core_plugins/kibana/public/management/app.html
View file

@ -10,15 +10,15 @@
></bread-crumbs>
<!-- Tabs. -->
<div data-transclude-slot="bottomRow" class="localTabs">
<span ng-if="!sectionName" class="localTab">
<div data-transclude-slot="bottomRow" class="kuiLocalTabs">
<span ng-if="!sectionName" class="kuiLocalTab">
{{::section.display}}
</span>
<a
ng-if="sectionName"
ng-repeat="item in section.items.inOrder"
class="localTab"
ng-class="{ 'localTab-isSelected': item.active, 'localTab-disabled': !item.url }"
class="kuiLocalTab"
ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': !item.url }"
kbn-href="{{::item.url}}"
data-test-subj="{{::item.name}}"
tooltip="{{::item.tooltip}}"

10
src/core_plugins/kibana/public/visualize/editor/editor.html
View file

@ -6,7 +6,7 @@
<!-- Title. -->
<div
data-transclude-slot="topLeftCorner"
class="localTitle"
class="kuiLocalTitle"
>
<span
ng-show="savedVis.id"
@ -41,7 +41,7 @@
class="fullWidth"
>
<div class="typeahead" kbn-typeahead="visualize">
<div class="localSearch">
<div class="kuiLocalSearch">
<input
ng-model="state.query"
parse-query
@ -49,13 +49,13 @@
kbn-typeahead-input
placeholder="Search..."
type="text"
class="localSearchInput"
ng-class="{'localSearchInput-isInvalid': queryInput.$invalid}"
class="kuiLocalSearchInput"
ng-class="{'kuiLocalSearchInput-isInvalid': queryInput.$invalid}"
>
<button
type="submit"
aria-label="Search"
class="localSearchButton"
class="kuiLocalSearchButton"
ng-disabled="queryInput.$invalid"
>
<span aria-hidden="true" class="fa fa-search"></span>

2
src/core_plugins/kibana/public/visualize/editor/panels/load.html
View file

@ -1,2 +1,2 @@
<div class="localDropdownTitle">Open Visualization</div>
<div class="kuiLocalDropdownTitle">Open Visualization</div>
<saved-object-finder type="visualizations"></saved-object-finder>

4
src/core_plugins/kibana/public/visualize/editor/panels/save.html
View file

@ -2,9 +2,9 @@
role="form"
ng-submit="opts.doSave()"
>
<div class="localDropdownTitle">Save Visualization</div>
<div class="kuiLocalDropdownTitle">Save Visualization</div>
<input
class="localDropdownInput"
class="kuiLocalDropdownInput"
input-focus="select"
type="text"
name="visTitle"

8
src/core_plugins/timelion/public/index.html
View file

@ -4,7 +4,7 @@
<!-- Transcluded elements. -->
<div data-transclude-slots>
<div data-transclude-slot="topLeftCorner">
<span class="localTitle" ng-show="opts.savedSheet.id">
<span class="kuiLocalTitle" ng-show="opts.savedSheet.id">
{{opts.savedSheet.lastSavedTitle}}
&nbsp;
<span class="fa fa-bolt" ng-click="showStats = !showStats"></span>
@ -23,7 +23,7 @@
role="form"
ng-submit="search()"
>
<div class="localSearch timelionLocalSearch">
<div class="kuiLocalSearch timelionLocalSearch">
<input
input-focus
ng-model="state.sheet[state.selected]"
@ -31,7 +31,7 @@
placeholder="Expression..."
aria-label="Expression input"
type="text"
class="localSearchInput timelion-expression"
class="kuiLocalSearchInput timelion-expression"
>
<timelion-interval model="state.interval"></timelion-interval>
@ -39,7 +39,7 @@
<button
type="submit"
aria-label="Search"
class="localSearchButton"
class="kuiLocalSearchButton"
>
<span class="fa fa-play"></span>
</button>

4
src/core_plugins/timelion/public/partials/docs/tutorial.html
View file

@ -146,10 +146,10 @@
</div>
<div ng-show="section === 'functions'">
<div class="localDropdownTitle">
<div class="kuiLocalDropdownTitle">
Function reference
</div>
<div class="localDropdownHelpText">
<div class="kuiLocalDropdownHelpText">
Click a function for details and arguments or <a ng-click="section = 'tutorial'">return to the tutorial.</a>
</div>
<div class="timelionFunctionsDropdownContent">

2
src/core_plugins/timelion/public/partials/load_sheet.html
View file

@ -1,4 +1,4 @@
<form role="form" ng-submit="fetch()">
<div class="localDropdownTitle">Open Sheet</div>
<div class="kuiLocalDropdownTitle">Open Sheet</div>
<saved-object-finder type="timelion-sheet" use-local-management="true"></saved-object-finder>
</form>

2
src/core_plugins/timelion/public/partials/sheet_options.html
View file

@ -1,5 +1,5 @@
<form role="form">
<div class="localDropdownTitle">Sheet options</div>
<div class="kuiLocalDropdownTitle">Sheet options</div>
<div>
<div class="form-group col-md-6">
<label>Columns <small>Column count must divide evenly into 12</small></label>

2
src/ui/public/courier/saved_object/ui/saved_object_save_as_checkbox.html
View file

@ -1,5 +1,5 @@
<div ng-hide="!savedObject.id || savedObject.isSaving">
<div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="localDropdownWarning">
<div ng-hide="!savedObject.isTitleChanged() || savedObject.copyOnSave" class="kuiLocalDropdownWarning">
In previous versions of Kibana, changing the name of a {{savedObject.getDisplayName()}} would make a copy with the new name. Use the 'Save as a new {{savedObject.getDisplayName()}}' checkbox to do this now.
</div>
<label>

20
src/ui/public/kbn_top_nav/kbn_top_nav.html
View file

@ -1,26 +1,26 @@
<div
class="localNav"
class="kuiLocalNav"
ng-show="kbnTopNav.isVisible()"
data-test-subj="top-nav"
>
<!-- Top row -->
<div class="localNavRow">
<div class="kuiLocalNavRow">
<!-- Top left corner slot, e.g. breadcrumbs, title. -->
<div
class="localNavRow__section"
class="kuiLocalNavRow__section"
data-transclude-slot="topLeftCorner"
></div>
<!-- Right-side: menu -->
<div class="localNavRow__section">
<div class="localMenu">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div
class="localMenuItem"
class="kuiLocalMenuItem"
ng-repeat="menuItem in kbnTopNav.menuItems"
aria-label="{{::menuItem.description}}"
aria-haspopup="{{!menuItem.hasFunction}}"
aria-expanded="{{kbnTopNav.isCurrent(menuItem.key)}}"
ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'localMenuItem-isDisabled': menuItem.disableButton()}"
ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent(menuItem.key), 'kuiLocalMenuItem-isDisabled': menuItem.disableButton()}"
ng-click="kbnTopNav.handleClick(menuItem)"
ng-bind="menuItem.label"
tooltip="{{menuItem.tooltip()}}"
@ -38,10 +38,10 @@
<!-- Dropdown content, e.g. time-picker. -->
<div
class="localDropdown"
class="kuiLocalDropdown"
ng-show="kbnTopNav.rendered"
>
<button class="localDropdownCloseButton" ng-click="kbnTopNav.close()">
<button class="kuiLocalDropdownCloseButton" ng-click="kbnTopNav.close()">
<span class="fa fa-chevron-circle-up"></span>
</button>
<div id="template_wrapper">
@ -49,7 +49,7 @@
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<!-- Bottom row slot, e.g. tabs. -->
<div data-transclude-slot="bottomRow"></div>
</div>

2
src/ui/public/notify/partials/fatal_splash_screen.html
View file

@ -19,4 +19,4 @@
</center>
<div id="fatal-splash-screen">
</div>
</div>
</div>

4
src/ui/public/partials/bread_crumbs.html
View file

@ -1,5 +1,5 @@
<div class="localBreadcrumbs">
<div class="localBreadcrumb" ng-repeat="breadcrumb in breadcrumbs">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb" ng-repeat="breadcrumb in breadcrumbs">
{{breadcrumb}}
</div>
</div>

78
src/ui/public/share/views/share.html
View file

@ -1,34 +1,34 @@
<div class="localDropdownPanels">
<div class="kuiLocalDropdownPanels">
<!-- Left panel -->
<div class="localDropdownPanel localDropdownPanel--left">
<div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
<!-- Title -->
<div
data-test-subj="shareUiTitle"
class="localDropdownTitle"
class="kuiLocalDropdownTitle"
>
Share saved {{share.objectType}}
</div>
<!-- Help text -->
<div ng-if="share.urls.original" class="localDropdownHelpText">
<div ng-if="share.urls.original" class="kuiLocalDropdownHelpText">
You can share this URL with people to let them load the most recent saved version of this {{share.objectType}}.
</div>
<div ng-if="!share.urls.original" class="localDropdownWarning">
<div ng-if="!share.urls.original" class="kuiLocalDropdownWarning">
Please save this {{share.objectType}} to enable this sharing option.
</div>
<div ng-if="share.urls.original">
<!-- iframe -->
<div class="localDropdownSection" ng-if="share.allowEmbed">
<div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Embedded iframe
</div>
<div class="localDropdownHeader__actions">
<div class="kuiLocalDropdownHeader__actions">
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-click="share.copyToClipboard('#originalIframeUrl')"
>
Copy
@ -39,28 +39,28 @@
<!-- Input -->
<input
id="originalIframeUrl"
class="localDropdownInput"
class="kuiLocalDropdownInput"
type="text"
readonly
value="{{share.makeIframeTag(share.urls.original)}}"
/>
<!-- Notes -->
<div class="localDropdownFormNote">
<div class="kuiLocalDropdownFormNote">
Add to your HTML source. Note that all clients must be able to access Kibana.
</div>
</div>
<!-- Link -->
<div class="localDropdownSection">
<div class="kuiLocalDropdownSection">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Link
</div>
<div class="localDropdownHeader__actions">
<div class="kuiLocalDropdownHeader__actions">
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-click="share.copyToClipboard('#originalUrl')"
>
Copy
@ -71,7 +71,7 @@
<!-- Input -->
<input
id="originalUrl"
class="localDropdownInput"
class="kuiLocalDropdownInput"
type="text"
readonly
value="{{share.urls.original}}"
@ -81,27 +81,27 @@
</div>
<!-- Right panel -->
<div class="localDropdownPanel localDropdownPanel--right">
<div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--right">
<!-- Title -->
<div class="localDropdownTitle">
<div class="kuiLocalDropdownTitle">
Share Snapshot
</div>
<!-- Help text -->
<div class="localDropdownHelpText">
<div class="kuiLocalDropdownHelpText">
Snapshot URLs encode the current state of the {{share.objectType}} in the URL itself. Edits to the saved {{share.objectType}} won't be visible via this URL.
</div>
<!-- iframe -->
<div class="localDropdownSection" ng-if="share.allowEmbed">
<div class="kuiLocalDropdownSection" ng-if="share.allowEmbed">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Embedded iframe
</div>
<div class="localDropdownHeader__actions">
<div class="kuiLocalDropdownHeader__actions">
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-if="!share.urlFlags.shortSnapshotIframe"
ng-click="share.toggleShortSnapshotIframeUrl()"
>
@ -109,7 +109,7 @@
</a>
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-if="share.urlFlags.shortSnapshotIframe"
ng-click="share.toggleShortSnapshotIframeUrl()"
>
@ -117,7 +117,7 @@
</a>
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-click="share.copyToClipboard('#snapshotIframeUrl')"
>
Copy
@ -128,29 +128,29 @@
<!-- Input -->
<input
id="snapshotIframeUrl"
class="localDropdownInput"
class="kuiLocalDropdownInput"
type="text"
readonly
value="{{share.urlFlags.shortSnapshotIframe ? share.makeIframeTag(share.urls.shortSnapshotIframe) : share.makeIframeTag(share.urls.snapshot)}}"
/>
<!-- Notes -->
<div class="localDropdownFormNote">
<div class="kuiLocalDropdownFormNote">
Add to your HTML source. Note that all clients must be able to access Kibana.
</div>
</div>
<!-- Link -->
<div class="localDropdownSection">
<div class="kuiLocalDropdownSection">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Link
</div>
<div class="localDropdownHeader__actions">
<div class="kuiLocalDropdownHeader__actions">
<a
data-test-subj="sharedSnapshotShortUrlButton"
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-if="!share.urlFlags.shortSnapshot"
ng-click="share.toggleShortSnapshotUrl()"
>
@ -158,7 +158,7 @@
</a>
<a
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-if="share.urlFlags.shortSnapshot"
ng-click="share.toggleShortSnapshotUrl()"
>
@ -167,7 +167,7 @@
<a
data-test-subj="sharedSnapshotCopyButton"
class="localDropdownHeader__action"
class="kuiLocalDropdownHeader__action"
ng-click="share.copyToClipboard('#snapshotUrl')"
>
Copy
@ -179,14 +179,14 @@
<input
data-test-subj="sharedSnapshotUrl"
id="snapshotUrl"
class="localDropdownInput"
class="kuiLocalDropdownInput"
type="text"
readonly
value="{{share.urlFlags.shortSnapshot ? share.urls.shortSnapshot : share.urls.snapshot}}"
/>
<!-- Notes -->
<div class="localDropdownFormNote">
<div class="kuiLocalDropdownFormNote">
We recommend sharing shortened snapshot URLs for maximum compatibility. Internet Explorer has URL length restrictions, and some wiki and markup parsers don't do well with the full-length version of the snapshot URL, but the short URL should work great.
</div>
</div>

64
src/ui/public/styles/base.less
View file

@ -719,68 +719,6 @@ fieldset {
flex: 1 1 auto;
}
/**
* 1. Disable for Angular.
*/
.kuiButton {
display: inline-block;
padding: 4px 24px;
color: #00a9e5;
border: 1px solid;
text-decoration: none;
border-radius: 3px;
background-color: transparent;
&[disabled] {
pointer-events: none; // 1
opacity: 0.4;
}
}
.kuiButton--default,
.kuiButton--default:focus {
color: #2D2D2D;
border-color: #D4D4D4;
&:hover,
&:active {
color: #111111;
background-color: #FAFAFA;
}
}
.kuiButton--primary,
.kuiButton--primary:focus {
color: #00a9e5;
border-color: #00a9e5;
&:hover,
&:active {
color: #00a9e5;
background-color: #ECF9FF;
}
}
.kuiButton--danger,
.kuiButton--danger:focus {
color: #d76051;
border-color: #d76051;
&:hover,
&:active {
color: #d76051;
background-color: #ffe4e1;
}
}
.kuiIcon--success {
color: #80c383;
}
.kuiIcon--danger {
color: #d76051;
}
/**
* 1. Override h1.
*/
@ -1070,7 +1008,7 @@ fieldset {
/**
* 1. Override Bootstrap styles.
*/
.localDropdownCloseButton {
.kuiLocalDropdownCloseButton {
color: #2d2d2d !important; /* 1 */
.theme-dark & {

16
src/ui/public/timepicker/kbn_global_timepicker.html
View file

@ -1,6 +1,6 @@
<div ng-show="timefilter.enabled" class="localMenu" data-test-subj="globalTimepicker">
<div ng-show="timefilter.enabled" class="kuiLocalMenu" data-test-subj="globalTimepicker">
<div
class="localMenuItem"
class="kuiLocalMenuItem"
ng-click="toggleRefresh()"
ng-show="timefilter.refreshInterval.value > 0"
>
@ -8,8 +8,8 @@
</div>
<div
class="localMenuItem navbar-timepicker-auto-refresh-desc"
ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
class="kuiLocalMenuItem navbar-timepicker-auto-refresh-desc"
ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('interval') }"
ng-show="timefilter.refreshInterval.value > 0 || kbnTopNav.isCurrent('interval') || kbnTopNav.isCurrent('filter')"
ng-click="kbnTopNav.toggle('interval')"
>
@ -21,14 +21,14 @@
</span>
</div>
<div class="localMenuItem" ng-click="back()">
<div class="kuiLocalMenuItem" ng-click="back()">
<span class="fa fa-chevron-left ng-scope" tooltip="Move backwards in time"></span>
</div>
<div
data-test-subj="globalTimepickerButton"
class="localMenuItem navbar-timepicker-time-desc"
ng-class="{'localMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
class="kuiLocalMenuItem navbar-timepicker-time-desc"
ng-class="{'kuiLocalMenuItem-isSelected': kbnTopNav.isCurrent('filter')}"
ng-click="kbnTopNav.toggle('filter')"
aria-haspopup="true"
aria-expanded="false"
@ -40,7 +40,7 @@
></pretty-duration>
</div>
<div class="localMenuItem" ng-click="forward()">
<div class="kuiLocalMenuItem" ng-click="forward()">
<span class="fa fa-chevron-right ng-scope" tooltip="Move forwards in time"></span>
</div>
</div>

4
src/ui/public/timepicker/timepicker.html
View file

@ -4,7 +4,7 @@
<!-- Filters -->
<div ng-show="activeTab === 'filter'" role="tabpanel" class="tab-pane active">
<div class="localDropdownTitle">Time Range</div>
<div class="kuiLocalDropdownTitle">Time Range</div>
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked kbn-timepicker-modes">
@ -141,7 +141,7 @@
<!-- Refresh Intervals -->
<div ng-show="activeTab === 'interval'" role="tabpanel" class="tab-pane active">
<div class="localDropdownTitle">Refresh Interval</div>
<div class="kuiLocalDropdownTitle">Refresh Interval</div>
<div ng-repeat="list in refreshLists" class="kbn-refresh-section">
<ul class="list-unstyled">
<li ng-repeat="inter in list">

82
src/ui_framework/components/button/_button.scss Normal file
View file

@ -0,0 +1,82 @@
/**
* 1. Disable for Angular.
*/
.kuiButton {
appearance: none;
padding: 4px 12px 5px;
font-size: $fontSize;
font-weight: 400;
line-height: $lineHeight;
text-decoration: none;
border: none;
border-radius: $buttonBorderRadius;
cursor: pointer;
&:disabled {
cursor: default;
pointer-events: none; // 1
}
&:active:enabled {
transform: translateY(1px);
}
&:focus {
@include focus;
}
}
.kuiButton--iconText {
.kuiButton__icon {
margin-right: 4px;
}
}
.kuiButton--basic {
color: #5a5a5a;
background-color: #F2F2F2;
&:hover:enabled,
&:active:enabled {
color: #ffffff;
background-color: #9B9B9B;
}
&:disabled {
color: #9B9B9B;
}
}
.kuiButton--primary {
color: #FFFFFF;
background-color: #6EADC1;
&:hover:enabled,
&:active:enabled {
color: #FFFFFF;
background-color: #006E8A;
}
&:disabled {
background-color: #B6D6E0;
}
}
.kuiButton--danger {
color: #FFFFFF;
background-color: #D76051;
&:hover:enabled,
&:active:enabled {
color: #FFFFFF;
background-color: #A52E1F;
}
&:disabled {
background-color: #efc0ba;
}
&:focus {
@include focus(#ff523c);
}
}

21
src/ui_framework/components/button/_button_group.scss Normal file
View file

@ -0,0 +1,21 @@
.kuiButtonGroup {
display: flex;
> .kuiButton:not(:first-child):not(:last-child) {
border-radius: 0;
}
> .kuiButton:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
> .kuiButton:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.kuiButton + .kuiButton {
margin-left: 2px;
}
}

2
src/ui_framework/components/button/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import "button";
@import "button_group";

39
src/ui_framework/components/form/_check_box.scss Normal file
View file

@ -0,0 +1,39 @@
/**
* 1. Deliberately disable only webkit appearance. If we disable it in Firefox, we get a really
* ugly default appearance which we can't customize, so our best option is to give Firefox
* control over the checkbox's appearance.
*/
.kuiCheckBox {
-webkit-appearance: none; /* 1 */
background-color: #FFFFFF;
border: 1px solid #BEBEBE;
border-radius: $buttonBorderRadius;
width: 16px;
height: 16px;
line-height: $lineHeight;
transition: background-color $formTransitionTiming;
&:before {
position: relative;
top: -0.05em;
left: 0.15em;
font-family: FontAwesome;
content: "\F00C";
font-size: 1em;
opacity: 0;
color: #ffffff;
transition: opacity $formTransitionTiming;
}
&:checked {
border-color: #328CAA;
background-color: #328CAA;
&:before {
opacity: 1;
}
}
&:focus {
@include focus;
}
}

2
src/ui_framework/components/form/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import "check_box";
@import "text_input";

21
src/ui_framework/components/form/_text_input.scss Normal file
View file

@ -0,0 +1,21 @@
.kuiTextInput {
appearance: none;
padding: 3px 12px 4px;
font-size: $fontSize;
font-weight: 400;
line-height: $lineHeight;
background-color: #ffffff;
border: 1px solid #DEDEDE;
color: $fontColor;
border-radius: $buttonBorderRadius;
transition: border-color $formTransitionTiming;
&:invalid {
border-color: $errorBorderColor;
}
&:focus {
@include focus;
border-color: $selectedBorderColor;
}
}

24
src/ui_framework/components/icon/_icon.scss Normal file
View file

@ -0,0 +1,24 @@
/**
* 1. Copied from FontAwesome's .fa class. We use a custom class to make it easier to migrate away
* from FontAwesome someday. When we do migrate away, we can just update this definition.
*/
.kuiIcon {
display: inline-block; /* 1 */
font: normal normal normal 14px/1 FontAwesome; /* 1 */
font-size: inherit; /* 1 */
text-rendering: auto; /* 1 */
-webkit-font-smoothing: antialiased; /* 1 */
-moz-osx-font-smoothing: grayscale; /* 1 */
}
.kuiIcon--success {
color: $successColor;
}
.kuiIcon--warning {
color: $warningColor;
}
.kuiIcon--error {
color: $errorColor;
}

1
src/ui_framework/components/icon/_index.scss Normal file
View file

@ -0,0 +1 @@
@import "icon";

45
src/ui_framework/components/index.scss
View file

@ -18,10 +18,55 @@ $inputTextColor--darkTheme: $textColor--darkTheme;
$inputBackgroundColor--darkTheme: #444444;
$inputBorderColor--darkTheme: $inputBackgroundColor--darkTheme;
// Font
$fontSize: 14px;
$lineHeight: 1.5;
// Button
$buttonBorderRadius: 4px;
// Colors
$successColor: #417505;
$warningColor: #ffac15;
$errorColor: #D86051;
$fontColor: #191E23;
$panelColor: #E4E4E4;
$selectedBorderColor: #6EADC1;
$errorBorderColor: $errorColor;
// Borders
$tableBorder: 2px solid $panelColor;
// Timing
$formTransitionTiming: 0.1s linear;
@mixin darkTheme() {
.theme-dark & {
@content;
}
}
/**
* 1. Make sure outline doesn't get hidden beneath adjacent elements.
*/
@mixin focus($color: #6EADC1) {
z-index: 1; /* 1 */
outline: 1px solid $color;
outline-offset: 2px;
}
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", Helvetica, Arial, sans-serif;
}
@import "button/index";
@import "form/index";
@import "icon/index";
@import "link/index";
@import "local_nav/index";
@import "table/index";
@import "tool_bar/index";

1
src/ui_framework/components/link/_index.scss Normal file
View file

@ -0,0 +1 @@
@import "link";

14
src/ui_framework/components/link/_link.scss Normal file
View file

@ -0,0 +1,14 @@
.kuiLink {
color: #3CAED2;
text-decoration: none;
&:visited,
&:active {
color: #3CAED2;
}
&:hover {
color: #006E8A;
text-decoration: underline;
}
}

11
src/ui_framework/components/local_nav/_local_breadcrumbs.scss
View file

@ -3,14 +3,14 @@
* 1. Breadcrumbs are placed in the top-left corner and need to be bumped over
* a bit.
*/
.localBreadcrumbs {
.kuiLocalBreadcrumbs {
display: flex;
align-items: center;
height: 100%;
padding-left: $localNavSideSpacing; /* 1 */
}
.localBreadcrumb {
.kuiLocalBreadcrumb {
& + & {
margin-left: 6px;
@ -27,7 +27,7 @@
}
&:last-child {
.localBreadcrumb__link {
.kuiLocalBreadcrumb__link {
color: $localNavTextColor;
cursor: default;
@ -40,10 +40,9 @@
}
}
}
}
.localBreadcrumb__link {
.kuiLocalBreadcrumb__link {
font-size: $localNavFontSizeNormal;
color: #5a5a5a;
text-decoration: none;
@ -57,6 +56,6 @@
}
}
.localBreadcrumb__emphasis {
.kuiLocalBreadcrumb__emphasis {
font-weight: 700;
}

33
src/ui_framework/components/local_nav/_local_dropdown.scss
View file

@ -1,5 +1,4 @@
.localDropdown {
.kuiLocalDropdown {
position: relative;
padding: 10px $localNavSideSpacing 14px;
background-color: $localDropdownBackgroundColor;
@ -10,7 +9,7 @@
}
}
.localDropdownCloseButton {
.kuiLocalDropdownCloseButton {
appearance: none;
background-color: transparent;
padding: 4px;
@ -32,23 +31,23 @@
}
}
.localDropdownPanels {
.kuiLocalDropdownPanels {
display: flex;
}
.localDropdownPanel {
.kuiLocalDropdownPanel {
flex: 1 1 0%;
}
.localDropdownPanel--left {
.kuiLocalDropdownPanel--left {
margin-right: 30px;
}
.localDropdownPanel--right {
.kuiLocalDropdownPanel--right {
margin-left: 30px;
}
.localDropdownTitle {
.kuiLocalDropdownTitle {
margin-bottom: 12px;
font-size: 18px;
color: $localNavTextColor;
@ -58,7 +57,7 @@
}
}
.localDropdownSection {
.kuiLocalDropdownSection {
margin-bottom: 16px;
&:last-child {
@ -66,14 +65,14 @@
}
}
.localDropdownHeader {
.kuiLocalDropdownHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.localDropdownHeader__label {
.kuiLocalDropdownHeader__label {
font-size: 14px;
font-weight: 700;
color: $localNavTextColor;
@ -83,11 +82,11 @@
}
}
.localDropdownHeader__actions {
.kuiLocalDropdownHeader__actions {
display: flex;
}
.localDropdownHeader__action {
.kuiLocalDropdownHeader__action {
color: $linkColor;
font-size: 12px;
text-decoration: none;
@ -112,7 +111,7 @@
}
}
.localDropdownInput {
.kuiLocalDropdownInput {
display: block;
width: 100%;
margin-bottom: 12px;
@ -130,7 +129,7 @@
}
}
.localDropdownFormNote {
.kuiLocalDropdownFormNote {
font-size: 14px;
color: $localDropdownFormNoteTextColor;
@ -139,7 +138,7 @@
}
}
.localDropdownWarning {
.kuiLocalDropdownWarning {
margin-bottom: 16px;
padding: 6px 10px;
font-size: 14px;
@ -152,7 +151,7 @@
}
}
.localDropdownHelpText {
.kuiLocalDropdownHelpText {
margin-bottom: 16px;
font-size: 14px;
color: #2D2D2D;

14
src/ui_framework/components/local_nav/_local_menu.scss
View file

@ -1,11 +1,11 @@
.localMenu {
.kuiLocalMenu {
display: flex;
align-items: center;
height: 100%;
}
.localMenuItem {
.kuiLocalMenuItem {
display: flex;
align-items: center;
height: 100%;
@ -21,11 +21,11 @@
color: $localNavButtonTextColor-isHover;
}
&.localMenuItem-isSelected {
&.kuiLocalMenuItem-isSelected {
background-color: $localNavButtonBackgroundColor-isSelected;
}
&.localMenuItem-isDisabled {
&.kuiLocalMenuItem-isDisabled {
opacity: 0.5;
cursor: default;
@ -43,11 +43,11 @@
color: $localNavButtonTextColor-isHover--darkTheme;
}
&.localMenuItem-isSelected {
&.kuiLocalMenuItem-isSelected {
background-color: $localNavButtonBackgroundColor-isSelected--darkTheme;
}
&.localMenuItem-isDisabled {
&.kuiLocalMenuItem-isDisabled {
&:hover {
background-color: transparent;
color: $localNavButtonTextColor--darkTheme;
@ -56,7 +56,7 @@
}
}
.localMenuItem__icon {
.kuiLocalMenuItem__icon {
margin-right: 5px;
margin-bottom: -1px;
}

8
src/ui_framework/components/local_nav/_local_nav.scss
View file

@ -3,7 +3,7 @@
* 1. Match height of logo in side bar, but allow it to expand to accommodate
* dropdown.
*/
.localNav {
.kuiLocalNav {
display: flex;
flex-direction: column;
justify-content: space-between;
@ -17,18 +17,18 @@
}
}
.localNavRow {
.kuiLocalNavRow {
display: flex;
align-items: center;
justify-content: space-between;
height: 32px;
}
.localNavRow__section {
.kuiLocalNavRow__section {
height: 100%;
}
.localNavRow--secondary {
.kuiLocalNavRow--secondary {
height: 38px;
padding: 0 $localNavSideSpacing;
}

10
src/ui_framework/components/local_nav/_local_search.scss
View file

@ -1,13 +1,13 @@
$localSearchHeight: 30px;
.localSearch {
.kuiLocalSearch {
display: flex;
width: 100%;
height: $localSearchHeight;
}
.localSearchInput {
.kuiLocalSearchInput {
flex: 1 1 100%;
padding: 5px 15px;
font-size: $localNavFontSizeNormal;
@ -19,7 +19,7 @@ $localSearchHeight: 30px;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
&.localSearchInput-isInvalid {
&.kuiLocalSearchInput-isInvalid {
border-color: $localSearchBorderColor-isInvalid;
}
@ -28,13 +28,13 @@ $localSearchHeight: 30px;
background-color: $localSearchBackgroundColor--darkTheme;
border-color: $localSearchBackgroundColor--darkTheme;
&.localSearchInput-isInvalid {
&.kuiLocalSearchInput-isInvalid {
border-color: $localSearchBorderColor-isInvalid--darkTheme;
}
}
}
.localSearchButton {
.kuiLocalSearchButton {
width: 43px;
height: $localSearchHeight;
font-size: $localNavFontSizeNormal;

6
src/ui_framework/components/local_nav/_local_tabs.scss
View file

@ -1,7 +1,7 @@
/**
* 1. We want the bottom border on selected tabs to be flush with the bottom of the container.
*/
.localTabs {
.kuiLocalTabs {
display: flex;
align-items: flex-end; // 1
height: 100%;
@ -10,7 +10,7 @@
/**
* 1. Make sure the bottom border is flush with the bottom of the LocalNav.
*/
.localTab {
.kuiLocalTab {
padding: 5px 0 6px 0;
font-size: 18px;
line-height: 22px; /* 1 */
@ -28,7 +28,7 @@
}
}
&.localTab-isSelected {
&.kuiLocalTab-isSelected {
color: $localTabTextColor-isSelected;
border-bottom-color: $localTabTextColor-isSelected;
cursor: default;

2
src/ui_framework/components/local_nav/_local_title.scss
View file

@ -1,4 +1,4 @@
.localTitle {
.kuiLocalTitle {
display: flex;
align-items: center;
height: 100%;

13
src/ui_framework/components/table/_controlled_table.scss Normal file
View file

@ -0,0 +1,13 @@
/**
* 1. Make seamless transition from ToolBar to Table header.
* 1. Make seamless transition from Table to ToolBarFooter header.
*/
.kuiControlledTable {
.kuiTable {
border-top: none; /* 1 */
}
.kuiToolBarFooter {
border-top: none; /* 2 */
}
}

2
src/ui_framework/components/table/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import "controlled_table";
@import "table";

62
src/ui_framework/components/table/_table.scss Normal file
View file

@ -0,0 +1,62 @@
@mixin tableCell {
font-size: $fontSize;
font-weight: 400;
line-height: $lineHeight;
padding: 7px 8px 8px;
text-align: left;
&:last-child {
padding-right: 16px;
}
}
.kuiTable {
table-layout: fixed;
width: 100%;
border: $tableBorder;
border-collapse: collapse;
}
.kuiTableHeaderCell {
@include tableCell;
color: #787878;
}
/**
* 1. Prevent rapid clicking from selecting text.
*/
.kuiTableHeaderCell--sortable {
user-select: none; /* 1 */
cursor: pointer;
&:hover:not(.kuiTableHeaderCell-isSorted) {
.kuiTableSortIcon {
opacity: 0.4;
}
}
}
.kuiTableSortIcon {
pointer-events: none;
}
.kuiTableRowCell {
@include tableCell;
color: $fontColor;
border-top: $tableBorder;
}
.kuiTableRowCell__liner {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/**
* 1. Rendered width of cell with checkbox inside of it.
*/
.kuiTableHeaderCell--checkBox,
.kuiTableRowCell--checkBox {
width: 28px; /* 1 */
padding-right: 0;
}

7
src/ui_framework/components/tool_bar/_index.scss Normal file
View file

@ -0,0 +1,7 @@
$toolBarSectionSpacing: 50px;
$toolBarItsemSpacing: 10px;
@import "tool_bar";
@import "tool_bar_footer";
@import "tool_bar_search";
@import "tool_bar_text";

37
src/ui_framework/components/tool_bar/_tool_bar.scss Normal file
View file

@ -0,0 +1,37 @@
.kuiToolBar {
display: flex;
justify-content: space-between;
padding: 10px;
height: 50px;
background-color: $panelColor;
.kuiButton--basic {
background-color: #FFFFFF;
&:hover:enabled {
background-color: #FFFFFF;
}
&:active:enabled {
background-color: #FAFAFA;
}
}
}
/**
* 1. Put 10px of space between each child.
*/
.kuiToolBarSection {
display: flex;
align-items: center;
margin-left: $toolBarSectionSpacing * 0.5;
margin-right: $toolBarSectionSpacing * 0.5;
&:last-child {
margin-right: 0;
}
& > * + * {
margin-left: $toolBarItsemSpacing; /* 1 */
}
}

30
src/ui_framework/components/tool_bar/_tool_bar_footer.scss Normal file
View file

@ -0,0 +1,30 @@
.kuiToolBarFooter {
display: flex;
justify-content: space-between;
padding: 10px;
height: 40px;
background-color: #ffffff;
border: $tableBorder;
}
/**
* 1. Put 10px of space between each child.
*/
.kuiToolBarFooterSection {
display: flex;
align-items: center;
margin-left: $toolBarSectionSpacing * 0.5;
margin-right: $toolBarSectionSpacing * 0.5;
&:last-child {
margin-right: 0;
}
&:only-child {
margin-left: auto;
}
& > * + * {
margin-left: $toolBarItsemSpacing; /* 1 */
}
}

35
src/ui_framework/components/tool_bar/_tool_bar_search.scss Normal file
View file

@ -0,0 +1,35 @@
.kuiToolBarSearch {
display: flex;
flex: 1 1 auto;
max-width: 800px;
line-height: $lineHeight;
margin-right: $toolBarSectionSpacing * 0.5;
}
.kuiToolBarSearchBox {
flex: 1 1 auto;
position: relative;
}
.kuiToolBarSearchBox__icon {
position: absolute;
top: 6px;
left: 8px;
font-size: 14px;
color: #ACACAC;
}
.kuiToolBarSearchBox__input {
width: 100%;
min-width: 200px;
padding: 5px 12px 6px 28px;
background-color: #FFFFFF;
color: $fontColor;
border: 1px solid #FFFFFF;
border-radius: $buttonBorderRadius;
font-size: $fontSize;
&:focus {
@include focus;
}
}

9
src/ui_framework/components/tool_bar/_tool_bar_text.scss Normal file
View file

@ -0,0 +1,9 @@
/*
* 1. We don't want the text to take up two lines and overflow the ToolBar.
*/
.kuiToolBarText {
font-size: $fontSize;
line-height: $lineHeight;
color: #5A5A5A;
white-space: nowrap; /* 1 */
}

2
src/ui_framework/doc_site/build/index.html
View file

@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700|Ubuntu+Mono:400' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open Sans:300,400,700|Ubuntu+Mono:400' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<script src="https://use.fontawesome.com/a9649923ac.js"></script>
</head>

5
src/ui_framework/doc_site/postcss.config.js Normal file
View file

@ -0,0 +1,5 @@
module.exports = {
plugins: [
require('autoprefixer')({ browsers: ['last 2 versions'] })
]
};

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

@ -1,3 +1,9 @@
.guideCode {
padding: 2px 4px;
font-family: 'Ubuntu Mono', monospace;
background-color: #e8e8e8;
color: #565656;
}
.guideCodeViewer {
position: fixed;

3
src/ui_framework/doc_site/src/components/guide_example/guide_example.jsx
View file

@ -1,4 +1,3 @@
import React, {
Component,
PropTypes,
@ -43,6 +42,7 @@ export default class GuideExample extends Component {
slug={section.slug}
html={section.html}
js={section.js}
hasDarkTheme={section.hasDarkTheme}
>
{section.description}
</GuidePageSection>
@ -73,5 +73,6 @@ GuideExample.propTypes = {
description: React.PropTypes.any,
html: React.PropTypes.string.isRequired,
js: React.PropTypes.string,
hasDarkTheme: React.PropTypes.bool,
})),
};

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

@ -1,11 +1,12 @@
.guideNav {
display: flex;
flex-direction: column;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
height: $guideNavHeight;
padding: 0 20px;
background-color: #e8488b;
color: #ffffff;
box-shadow:
@ -20,9 +21,11 @@
}
.guideNav__header {
flex: 0 0 auto;
display: flex;
align-items: center;
height: 60px;
padding: 0 20px;
}
.guideNav__menu {
@ -54,14 +57,29 @@
font-size: 14px;
}
.guideNavItem {
color: white;
text-decoration: none;
font-size: 20px;
padding: 10px;
border-radius: 3px;
.guideNavItemsContainer {
@include scrollbar;
display: flex;
overflow: auto;
}
&:hover {
background-color: rgba(black, 0.15);
}
.guideNavItems {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
}
.guideNavItem {
color: white;
text-decoration: none;
font-size: 20px;
line-height: 20px;
padding: 8px 20px;
border-radius: 3px;
&:hover {
background-color: rgba(black, 0.15);
}
}

6
src/ui_framework/doc_site/src/components/guide_nav/guide_nav.jsx
View file

@ -47,8 +47,10 @@ const GuideNav = props => {
</Link>
</div>
<div className="guideNavItems">
{navItems}
<div className="guideNavItemsContainer">
<div className="guideNavItems">
{navItems}
</div>
</div>
</div>
);

34
src/ui_framework/doc_site/src/components/guide_page_section/guide_page_section.jsx
View file

@ -46,7 +46,10 @@ export default class GuidePageSection extends Component {
}
trimChildren(this.refs.html);
trimChildren(this.refs.htmlDarkTheme);
if (this.refs.htmlDarkTheme) {
trimChildren(this.refs.htmlDarkTheme);
}
}
componentWillUnmount() {
@ -59,6 +62,10 @@ export default class GuidePageSection extends Component {
}
render() {
const exampleClasses = classNames('guidePageSection__example', {
'guidePageSection__example--standalone': !this.props.children,
});
let description;
if (this.props.children) {
@ -69,9 +76,21 @@ export default class GuidePageSection extends Component {
);
}
const exampleClasses = classNames('guidePageSection__example', {
'guidePageSection__example--standalone': !this.props.children,
});
let darkThemeExample;
if (this.props.hasDarkTheme) {
darkThemeExample = (
<div
ref="htmlDarkTheme"
className={`${exampleClasses} theme-dark`}
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
);
} else {
darkThemeExample = (
<div className="guideWarning">This component is missing Dark Theme variations.</div>
);
}
return (
<div
@ -96,11 +115,7 @@ export default class GuidePageSection extends Component {
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
<div
ref="htmlDarkTheme"
className={`${exampleClasses} theme-dark`}
dangerouslySetInnerHTML={{ __html: this.props.html }}
/>
{darkThemeExample}
</div>
);
}
@ -120,4 +135,5 @@ GuidePageSection.propTypes = {
html: PropTypes.string,
js: PropTypes.string,
children: PropTypes.any,
hasDarkTheme: PropTypes.bool,
};

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

@ -21,7 +21,6 @@ body {
* on styles inherited from body.
*/
body {
font-family: 'Lato', 'Helvetica Neue', sans-serif;
background: #ffffff;
line-height: 40px; /* 1 */
margin: 0;

3
src/ui_framework/doc_site/src/services/example/createExample.js
View file

@ -1,9 +1,8 @@
import {
GuideExample,
} from '../../components';
export default function createExample(examples) {
export default function creatExample(examples) {
class Example extends GuideExample {
constructor(props) {
super(props, examples);

36
src/ui_framework/doc_site/src/services/routes/Routes.js
View file

@ -1,13 +1,49 @@
import Slugify from '../string/slugify';
import ButtonExample
from '../../views/button/button_example.jsx';
import FormExample
from '../../views/form/form_example.jsx';
import IconExample
from '../../views/icon/icon_example.jsx';
import LinkExample
from '../../views/link/link_example.jsx';
import LocalNavExample
from '../../views/local_nav/local_nav_example.jsx';
import TableExample
from '../../views/table/table_example.jsx';
import ToolBarExample
from '../../views/tool_bar/tool_bar_example.jsx';
// Component route names should match the component name exactly.
const components = [{
name: 'Button',
component: ButtonExample,
}, {
name: 'Form',
component: FormExample,
}, {
name: 'Icon',
component: IconExample,
}, {
name: 'Link',
component: LinkExample,
}, {
name: 'LocalNav',
component: LocalNavExample,
}, {
name: 'Table',
component: TableExample,
}, {
name: 'ToolBar',
component: ToolBarExample,
}];
export default {

12
src/ui_framework/doc_site/src/views/_app.scss
View file

@ -20,3 +20,15 @@
}
}
}
.guideWarning {
border-left: 5px solid #e8488b;
margin-top: 19px;
padding: 0 14px;
line-height: 21px;
color: #e8488b;
}
.guideBreak {
border: none;
}

9
src/ui_framework/doc_site/src/views/button/button_basic.html Normal file
View file

@ -0,0 +1,9 @@
<button class="kuiButton kuiButton--basic">
Basic button
</button>
<hr class="guideBreak">
<button disabled class="kuiButton kuiButton--basic">
Basic button, disabled
</button>

9
src/ui_framework/doc_site/src/views/button/button_danger.html Normal file
View file

@ -0,0 +1,9 @@
<button class="kuiButton kuiButton--danger">
Danger button
</button>
<hr class="guideBreak">
<button disabled class="kuiButton kuiButton--danger">
Danger button, disabled
</button>

17
src/ui_framework/doc_site/src/views/button/button_elements.html Normal file
View file

@ -0,0 +1,17 @@
<button class="kuiButton kuiButton--basic">
Button element
</button>
<hr class="guideBreak">
<input
type="submit"
class="kuiButton kuiButton--basic"
value="Submit input element"
>
<hr class="guideBreak">
<a href="#" class="kuiButton kuiButton--basic">
Anchor element
</a>

56
src/ui_framework/doc_site/src/views/button/button_example.jsx Normal file
View file

@ -0,0 +1,56 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'Basic Button',
description: (
<p>Use the basic Button in most situations.</p>
),
html: require('./button_basic.html'),
hasDarkTheme: false,
}, {
title: 'Primary Button',
description: (
<p>Use the primary Button to represent the most common action. Generally, there won't be a need to present more than one of these at a time.</p>
),
html: require('./button_primary.html'),
hasDarkTheme: false,
}, {
title: 'Danger Button',
description: (
<p>Danger Buttons represent irreversible, potentially regrettable actions.</p>
),
html: require('./button_danger.html'),
hasDarkTheme: false,
}, {
title: 'Button with icon',
description: (
<p>You can toss an icon into a Button, with or without text.</p>
),
html: require('./button_with_icon.html'),
hasDarkTheme: false,
}, {
title: 'ButtonGroup',
description: (
<p>Use the ButtonGroup to emphasize the relationships between a set of Buttons, and differentiate them from Buttons outside of the set.</p>
),
html: require('./button_group.html'),
hasDarkTheme: false,
}, {
title: 'In ToolBar',
description: (
<p>This example verifies that Buttons are legible against the ToolBar's background.</p>
),
html: require('./buttons_in_tool_bar.html'),
hasDarkTheme: false,
}, {
title: 'Element variations',
description: (
<p>You can create a Button using a button element, link, or input[type="submit"].</p>
),
html: require('./button_elements.html'),
hasDarkTheme: false,
}]);

11
src/ui_framework/doc_site/src/views/button/button_group.html Normal file
View file

@ -0,0 +1,11 @@
<div class="kuiButtonGroup">
<button class="kuiButton kuiButton--basic">
Option A
</button>
<button class="kuiButton kuiButton--basic">
Option B
</button>
<button class="kuiButton kuiButton--basic">
Option C
</button>
</div>

9
src/ui_framework/doc_site/src/views/button/button_primary.html Normal file
View file

@ -0,0 +1,9 @@
<button class="kuiButton kuiButton--primary">
Primary button
</button>
<hr class="guideBreak">
<button disabled class="kuiButton kuiButton--primary">
Primary button, disabled
</button>

10
src/ui_framework/doc_site/src/views/button/button_with_icon.html Normal file
View file

@ -0,0 +1,10 @@
<button class="kuiButton kuiButton--basic kuiButton--iconText">
<span class="kuiButton__icon kuiIcon fa-gear"></span>
Settings
</button>
<hr class="guideBreak">
<button class="kuiButton kuiButton--basic">
<span class="kuiButton__icon kuiIcon fa-gear"></span>
</button>

25
src/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.html Normal file
View file

@ -0,0 +1,25 @@
<div class="kuiToolBar">
<button class="kuiButton kuiButton--basic">
Basic button
</button>
<button disabled class="kuiButton kuiButton--basic">
Basic button, disabled
</button>
<button class="kuiButton kuiButton--primary">
Primary button
</button>
<button disabled class="kuiButton kuiButton--primary">
Primary button, disabled
</button>
<button class="kuiButton kuiButton--danger">
Danger button
</button>
<button disabled class="kuiButton kuiButton--danger">
Danger button, disabled
</button>
</div>

1
src/ui_framework/doc_site/src/views/form/check_box.html Normal file
View file

@ -0,0 +1 @@
<input type="checkbox" class="kuiCheckBox">

15
src/ui_framework/doc_site/src/views/form/form_example.jsx Normal file
View file

@ -0,0 +1,15 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'TextInput',
html: require('./text_input.html'),
hasDarkTheme: false,
}, {
title: 'CheckBox',
html: require('./check_box.html'),
hasDarkTheme: false,
}]);

9
src/ui_framework/doc_site/src/views/form/text_input.html Normal file
View file

@ -0,0 +1,9 @@
<input type="text" class="kuiTextInput" placeholder="Placeholder text">
<hr class="guideBreak">
<input type="text" class="kuiTextInput" value="Entered text" autofocus>
<hr class="guideBreak">
<input type="text" class="kuiTextInput" required>

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

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

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

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

35
src/ui_framework/doc_site/src/views/icon/icon_example.jsx Normal file
View file

@ -0,0 +1,35 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'Icon',
description: (
<p>Use the <code className="guideCode">icon</code> class instead of the <code className="guideCode">fa</code> class for FontAwesome icons. This will make it easier for us to migrate away from FontAwesome.</p>
),
html: require('./icon.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>
),
html: require('./icon_success.html'),
hasDarkTheme: false,
}, {
title: 'Warning',
description: (
<p>Use this Icon to convey 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>
),
html: require('./icon_error.html'),
hasDarkTheme: false,
}]);

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

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

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

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

1
src/ui_framework/doc_site/src/views/link/link.html Normal file
View file

@ -0,0 +1 @@
<a class="kuiLink" href="#">More info</a>

11
src/ui_framework/doc_site/src/views/link/link_example.jsx Normal file
View file

@ -0,0 +1,11 @@
import React from 'react';
import {
createExample,
} from '../../services';
export default createExample([{
title: 'Link',
html: require('./link.html'),
hasDarkTheme: false,
}]);

40
src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs.html Normal file
View file

@ -0,0 +1,40 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div class="kuiLocalMenuItem">
New
</div>
<div class="kuiLocalMenuItem">
Save
</div>
<div class="kuiLocalMenuItem">
Open
</div>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
</div>

41
src/ui_framework/doc_site/src/views/local_nav/local_nav_breadcrumbs/local_nav_breadcrumbs.html
View file

@ -1,41 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<div class="localMenuItem">
New
</div>
<div class="localMenuItem">
Save
</div>
<div class="localMenuItem">
Open
</div>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
</div>

126
src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown.html Normal file
View file

@ -0,0 +1,126 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
New
</div>
<div class="kuiLocalMenuItem">
Save
</div>
<div class="kuiLocalMenuItem">
Open
</div>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="kuiLocalDropdown">
<!-- Dropdown close button -->
<button class="kuiLocalDropdownCloseButton">
<span class="fa fa-chevron-circle-up"></span>
</button>
<!-- Title -->
<div class="kuiLocalDropdownTitle">Dropdown title</div>
<!-- Help text -->
<div class="kuiLocalDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
<!-- Warning -->
<div class="kuiLocalDropdownWarning">
Here's some warning text in case the user has something misconfigured.
</div>
<div class="kuiLocalDropdownSection">
<!-- Header -->
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Header for a section of content
</div>
</div>
<!-- Input -->
<input
class="kuiLocalDropdownInput"
type="text"
placeholder="Input something here"
/>
</div>
<div class="kuiLocalDropdownSection">
<!-- Header -->
<div class="kuiLocalDropdownHeader">
<div class="kuiLocalDropdownHeader__label">
Header for another section of content
</div>
<div class="kuiLocalDropdownHeader__actions">
<a
class="kuiLocalDropdownHeader__action"
href=""
>
Action A
</a>
<a
class="kuiLocalDropdownHeader__action"
href=""
>
Action B
</a>
</div>
</div>
<!-- Input -->
<input
class="kuiLocalDropdownInput"
type="text"
readonly
value="This is some text inside of a read-only input"
/>
<!-- Notes -->
<div class="kuiLocalDropdownFormNote">
Here are some notes to explain the purpose of this section of the dropdown.
</div>
</div>
</div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalSearch">
<input
class="kuiLocalSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="kuiLocalSearchButton">
<span class="kuiIcon fa-search"></span>
</button>
</div>
</div>
</div>

127
src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown/local_nav_dropdown.html
View file

@ -1,127 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<div class="localMenuItem localMenuItem-isSelected">
New
</div>
<div class="localMenuItem">
Save
</div>
<div class="localMenuItem">
Open
</div>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="localDropdown">
<!-- Dropdown close button -->
<button class="localDropdownCloseButton">
<span class="fa fa-chevron-circle-up"></span>
</button>
<!-- Title -->
<div class="localDropdownTitle">Dropdown title</div>
<!-- Help text -->
<div class="localDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
<!-- Warning -->
<div class="localDropdownWarning">
Here's some warning text in case the user has something misconfigured.
</div>
<div class="localDropdownSection">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
Header for a section of content
</div>
</div>
<!-- Input -->
<input
class="localDropdownInput"
type="text"
placeholder="Input something here"
/>
</div>
<div class="localDropdownSection">
<!-- Header -->
<div class="localDropdownHeader">
<div class="localDropdownHeader__label">
Header for another section of content
</div>
<div class="localDropdownHeader__actions">
<a
class="localDropdownHeader__action"
href=""
>
Action A
</a>
<a
class="localDropdownHeader__action"
href=""
>
Action B
</a>
</div>
</div>
<!-- Input -->
<input
class="localDropdownInput"
type="text"
readonly
value="This is some text inside of a read-only input"
/>
<!-- Notes -->
<div class="localDropdownFormNote">
Here are some notes to explain the purpose of this section of the dropdown.
</div>
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="localSearch">
<input
class="localSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="localSearchButton">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>

85
src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels.html Normal file
View file

@ -0,0 +1,85 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
New
</div>
<div class="kuiLocalMenuItem">
Save
</div>
<div class="kuiLocalMenuItem">
Open
</div>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="kuiLocalDropdown">
<!-- Dropdown close button -->
<button class="kuiLocalDropdownCloseButton">
<span class="fa fa-chevron-circle-up"></span>
</button>
<div class="kuiLocalDropdownPanels">
<!-- Left panel -->
<div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
<!-- Title -->
<div class="kuiLocalDropdownTitle">Left panel</div>
<!-- Help text -->
<div class="kuiLocalDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
</div>
<!-- Right panel -->
<div class="kuiLocalDropdownPanel kuiLocalDropdownPanel--left">
<!-- Title -->
<div class="kuiLocalDropdownTitle">Right panel</div>
<!-- Help text -->
<div class="kuiLocalDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
</div>
</div>
</div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalSearch">
<input
class="kuiLocalSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="kuiLocalSearchButton">
<span class="kuiIcon fa-search"></span>
</button>
</div>
</div>
</div>

86
src/ui_framework/doc_site/src/views/local_nav/local_nav_dropdown_panels/local_nav_dropdown_panels.html
View file

@ -1,86 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<div class="localMenuItem localMenuItem-isSelected">
New
</div>
<div class="localMenuItem">
Save
</div>
<div class="localMenuItem">
Open
</div>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="localDropdown">
<!-- Dropdown close button -->
<button class="localDropdownCloseButton">
<span class="fa fa-chevron-circle-up"></span>
</button>
<div class="localDropdownPanels">
<!-- Left panel -->
<div class="localDropdownPanel localDropdownPanel--left">
<!-- Title -->
<div class="localDropdownTitle">Left panel</div>
<!-- Help text -->
<div class="localDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
</div>
<!-- Right panel -->
<div class="localDropdownPanel localDropdownPanel--left">
<!-- Title -->
<div class="localDropdownTitle">Right panel</div>
<!-- Help text -->
<div class="localDropdownHelpText">
Here's some help text to explain the purpose of the dropdown.
</div>
</div>
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="localSearch">
<input
class="localSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="localSearchButton">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>

25
src/ui_framework/doc_site/src/views/local_nav/local_nav_example.jsx
View file

@ -1,4 +1,3 @@
import React from 'react';
import {
@ -10,22 +9,26 @@ export default createExample([{
description: (
<p>Here's a simple LocalNav with a Title in the top left corner and Menu in the top right.</p>
),
html: require('./local_nav_simple/local_nav_simple.html'),
html: require('./local_nav_simple.html'),
hasDarkTheme: true,
}, {
title: 'Breadcrumbs',
description: (
<p>You can replace the Title with Breadcrumbs.</p>
),
html: require('./local_nav_breadcrumbs/local_nav_breadcrumbs.html'),
html: require('./local_nav_breadcrumbs.html'),
hasDarkTheme: true,
}, {
title: 'Search',
description: (
<p>You can add a Search component for filtering results.</p>
),
html: require('./local_nav_search/local_nav_search.html'),
html: require('./local_nav_search.html'),
hasDarkTheme: true,
}, {
title: 'Invalid Search',
html: require('./local_nav_search_error/local_nav_search_error.html'),
html: require('./local_nav_search_error.html'),
hasDarkTheme: true,
}, {
title: 'Selected and disabled Menu Item states',
description: (
@ -34,23 +37,27 @@ export default createExample([{
<p>Menu Items can also be disabled, in which case they become non-interactive.</p>
</div>
),
html: require('./local_nav_menu_item_states/local_nav_menu_item_states.html'),
html: require('./local_nav_menu_item_states.html'),
hasDarkTheme: true,
}, {
title: 'Dropdown',
description: (
<p>Selecting a Menu Item will commonly result in an open Dropdown.</p>
),
html: require('./local_nav_dropdown/local_nav_dropdown.html'),
html: require('./local_nav_dropdown.html'),
hasDarkTheme: true,
}, {
title: 'Dropdown panels',
description: (
<p>You can split the Dropdown into side-by-side Panels.</p>
),
html: require('./local_nav_dropdown_panels/local_nav_dropdown_panels.html'),
html: require('./local_nav_dropdown_panels.html'),
hasDarkTheme: true,
}, {
title: 'Tabs',
description: (
<p>You can display Tabs for navigating local content.</p>
),
html: require('./local_nav_tabs/local_nav_tabs.html'),
html: require('./local_nav_tabs.html'),
hasDarkTheme: true,
}]);

54
src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states.html Normal file
View file

@ -0,0 +1,54 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div class="kuiLocalMenuItem kuiLocalMenuItem-isSelected">
New
</div>
<div class="kuiLocalMenuItem">
Save
</div>
<div class="kuiLocalMenuItem kuiLocalMenuItem-isDisabled">
Open
</div>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalSearch">
<input
class="kuiLocalSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="kuiLocalSearchButton">
<span class="kuiIcon fa-search"></span>
</button>
</div>
</div>
</div>

55
src/ui_framework/doc_site/src/views/local_nav/local_nav_menu_item_states/local_nav_menu_item_states.html
View file

@ -1,55 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<div class="localMenuItem localMenuItem-isSelected">
New
</div>
<div class="localMenuItem">
Save
</div>
<div class="localMenuItem localMenuItem-isDisabled">
Open
</div>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="localSearch">
<input
class="localSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="localSearchButton">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>

54
src/ui_framework/doc_site/src/views/local_nav/local_nav_search.html Normal file
View file

@ -0,0 +1,54 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<button class="kuiLocalMenuItem">
New
</button>
<button class="kuiLocalMenuItem">
Save
</button>
<button class="kuiLocalMenuItem">
Open
</button>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalSearch">
<input
class="kuiLocalSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="kuiLocalSearchButton">
<span class="kuiIcon fa-search"></span>
</button>
</div>
</div>
</div>

55
src/ui_framework/doc_site/src/views/local_nav/local_nav_search/local_nav_search.html
View file

@ -1,55 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<button class="localMenuItem">
New
</button>
<button class="localMenuItem">
Save
</button>
<button class="localMenuItem">
Open
</button>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="localSearch">
<input
class="localSearchInput"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="localSearchButton">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>

54
src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error.html Normal file
View file

@ -0,0 +1,54 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalBreadcrumbs">
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="kuiLocalBreadcrumb">
<a class="kuiLocalBreadcrumb__link" href="#">
<span class="kuiLocalBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<button class="kuiLocalMenuItem">
New
</button>
<button class="kuiLocalMenuItem">
Save
</button>
<button class="kuiLocalMenuItem">
Open
</button>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="kuiLocalNavRow kuiLocalNavRow--secondary">
<div class="kuiLocalSearch">
<input
class="kuiLocalSearchInput kuiLocalSearchInput-isInvalid"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="kuiLocalSearchButton">
<span class="kuiIcon fa-search"></span>
</button>
</div>
</div>
</div>

55
src/ui_framework/doc_site/src/views/local_nav/local_nav_search_error/local_nav_search_error.html
View file

@ -1,55 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localBreadcrumbs">
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
Discover
</a>
</div>
<div class="localBreadcrumb">
<a class="localBreadcrumb__link" href="#">
<span class="localBreadcrumb__emphasis">0</span> hits
</a>
</div>
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<button class="localMenuItem">
New
</button>
<button class="localMenuItem">
Save
</button>
<button class="localMenuItem">
Open
</button>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
<div class="localNavRow localNavRow--secondary">
<div class="localSearch">
<input
class="localSearchInput localSearchInput-isInvalid"
type="text"
placeholder="Filter..."
autocomplete="off"
>
<button class="localSearchButton">
<span class="fa fa-search"></span>
</button>
</div>
</div>
</div>

30
src/ui_framework/doc_site/src/views/local_nav/local_nav_simple.html Normal file
View file

@ -0,0 +1,30 @@
<div class="kuiLocalNav">
<div class="kuiLocalNavRow">
<div class="kuiLocalNavRow__section">
<div class="kuiLocalTitle">
Untitled Document
</div>
</div>
<div class="kuiLocalNavRow__section">
<div class="kuiLocalMenu">
<div class="kuiLocalMenuItem">
New
</div>
<div class="kuiLocalMenuItem">
Save
</div>
<div class="kuiLocalMenuItem">
Open
</div>
<button class="kuiLocalMenuItem">
<div class="kuiLocalMenuItem__icon kuiIcon fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
</div>

31
src/ui_framework/doc_site/src/views/local_nav/local_nav_simple/local_nav_simple.html
View file

@ -1,31 +0,0 @@
<div class="localNav">
<div class="localNavRow">
<div class="localNavRow__section">
<div class="localTitle">
Untitled Document
</div>
</div>
<div class="localNavRow__section">
<div class="localMenu">
<div class="localMenuItem">
New
</div>
<div class="localMenuItem">
Save
</div>
<div class="localMenuItem">
Open
</div>
<button class="localMenuItem">
<div class="localMenuItem__icon fa fa-clock-o"></div>
Last 5 minutes
</button>
</div>
</div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show more