Revision 5b16c0dc
Added by Amir Fefer almost 6 years ago
| .storybook/addons.js | ||
|---|---|---|
|
import '@storybook/addon-actions/register';
|
||
|
import '@storybook/addon-knobs/register';
|
||
| package.json | ||
|---|---|---|
|
"private": true,
|
||
|
"devDependencies": {
|
||
|
"@storybook/addon-actions": "^3.2.12",
|
||
|
"@storybook/addon-knobs": "^3.4.3",
|
||
|
"@storybook/react": "^3.2.12",
|
||
|
"@storybook/storybook-deployer": "^2.0.0",
|
||
|
"axios-mock-adapter": "^1.10.0",
|
||
| webpack/assets/javascripts/react_app/common/colors.scss | ||
|---|---|---|
|
$pf-color-white: #fff;
|
||
|
$pf-border-gray: #d1d1d1;
|
||
|
|
||
|
$switcher-max-height: 300px;
|
||
|
$switcher-max-height: 400px;
|
||
|
$switcher-max-width: 200px;
|
||
|
$switcher-min-width: 200px;
|
||
| webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBar.stories.js | ||
|---|---|---|
|
import React from 'react';
|
||
|
import { storiesOf } from '@storybook/react';
|
||
|
import { boolean, number, withKnobs } from '@storybook/addon-knobs';
|
||
|
import { action } from '@storybook/addon-actions';
|
||
|
import BreadcrumbBar from './BreadcrumbBar';
|
||
|
|
||
|
storiesOf('BreadcrumBar', module)
|
||
|
.addDecorator(withKnobs)
|
||
|
.add('With open switcher', () => (
|
||
|
<BreadcrumbBar
|
||
|
isLoadingResources={boolean('is loading', false)}
|
||
|
loadSwitcherResourcesByResource={action('load switcher data')}
|
||
|
isSwitcherOpen={boolean('is switcher open', true)}
|
||
|
totalPages={number('total pages', 3)}
|
||
|
currentPage={number('current page', 2)}
|
||
|
hasError={boolean('has error', false)}
|
||
|
resourceSwitcherItems={[
|
||
|
{ name: 'item 1', id: 1 },
|
||
|
{ name: 'item 2', id: 2 },
|
||
|
{
|
||
|
name:
|
||
|
'item 3 with a very very very very very very very very long name',
|
||
|
id: 3,
|
||
|
},
|
||
|
]}
|
||
|
data={{
|
||
|
resource: {
|
||
|
resourceUrl: 'some_url',
|
||
|
},
|
||
|
isSwitchable: true,
|
||
|
breadcrumbItems: [
|
||
|
{ caption: 'Index Page', url: '#' },
|
||
|
{ caption: 'Resource Page' },
|
||
|
],
|
||
|
}}
|
||
|
/>
|
||
|
));
|
||
| webpack/assets/javascripts/react_app/components/BreadcrumbBar/BreadcrumbBarActions.js | ||
|---|---|---|
|
};
|
||
|
beforeRequest();
|
||
|
|
||
|
return API.get(resourceUrl, {}, { page, search: searchQuery && `${[nameField]}~${searchQuery}` }).then(onRequestSuccess, onRequestFail);
|
||
|
return API.get(resourceUrl, {}, { page, per_page: 10, search: searchQuery && `${[nameField]}~${searchQuery}` }).then(onRequestSuccess, onRequestFail);
|
||
|
};
|
||
| webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.js | ||
|---|---|---|
|
</ListGroup>
|
||
|
<Pager
|
||
|
className="pager-sm"
|
||
|
messages={{ nextPage: __('Next'), previousPage: __('Previous') }}
|
||
|
messages={{ nextPage: '', previousPage: '' }}
|
||
|
onNextPage={onNextPageClick}
|
||
|
onPreviousPage={onPrevPageClick}
|
||
|
disablePrevious={currentPage === 1}
|
||
| webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/BreadcrumbSwitcherPopover.scss | ||
|---|---|---|
|
@import '../../../common/colors';
|
||
|
|
||
|
.popover-content {
|
||
|
max-height: $switcher-max-height;
|
||
|
overflow-y: auto;
|
||
|
max-width: $switcher-max-width;
|
||
|
min-width: $switcher-max-width;
|
||
|
|
||
|
.fa-spinner {
|
||
|
margin-top: 12px;
|
||
|
}
|
||
|
#breadcrumb-switcher-popover {
|
||
|
z-index: 1000 !important;
|
||
|
|
||
|
.breadcrumb-switcher-popover-error {
|
||
|
color: #f00;
|
||
|
}
|
||
|
.popover-content {
|
||
|
padding-left: 0;
|
||
|
padding-right: 0;
|
||
|
max-height: $switcher-max-height;
|
||
|
overflow: hidden;
|
||
|
max-width: $switcher-max-width;
|
||
|
min-width: $switcher-max-width;
|
||
|
|
||
|
.list-group-item {
|
||
|
padding: 5px 3px;
|
||
|
.fa-spinner {
|
||
|
margin-top: 12px;
|
||
|
}
|
||
|
|
||
|
&:hover {
|
||
|
color: #fff;
|
||
|
background-color: #39a5dc;
|
||
|
border-color: #39a5dc;
|
||
|
.breadcrumb-switcher-popover-error {
|
||
|
text-indent: 10px;
|
||
|
color: #f00;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.no-border {
|
||
|
border: none;
|
||
|
}
|
||
|
}
|
||
|
.list-group-item {
|
||
|
padding: 5px 3px;
|
||
|
text-indent: 10px;
|
||
|
|
||
|
#breadcrumb-switcher-popover {
|
||
|
z-index: 1000 !important;
|
||
|
}
|
||
|
&:hover {
|
||
|
color: #fff;
|
||
|
background-color: #0089c7;
|
||
|
}
|
||
|
|
||
|
.scrollable-list {
|
||
|
margin-top: 5px;
|
||
|
&.active {
|
||
|
background-color: #0089c7;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.no-border {
|
||
|
border: none;
|
||
|
}
|
||
|
|
||
|
.pager {
|
||
|
margin: 10px 13px;
|
||
|
|
||
|
a {
|
||
|
width: 22px;
|
||
|
}
|
||
|
|
||
|
&.list-group {
|
||
|
border-top: 0;
|
||
|
.fa {
|
||
|
margin-left: -2px;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
.scrollable-list {
|
||
|
margin-top: 5px;
|
||
|
|
||
|
&.list-group {
|
||
|
border-top: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
| webpack/assets/javascripts/react_app/components/BreadcrumbBar/components/__snapshots__/BreadcrumbSwitcherPopover.test.js.snap | ||
|---|---|---|
|
disablePrevious={true}
|
||
|
messages={
|
||
|
Object {
|
||
|
"nextPage": "Next",
|
||
|
"previousPage": "Previous",
|
||
|
"nextPage": "",
|
||
|
"previousPage": "",
|
||
|
}
|
||
|
}
|
||
|
onNextPage={[Function]}
|
||
| ... | ... | |
|
disablePrevious={true}
|
||
|
messages={
|
||
|
Object {
|
||
|
"nextPage": "Next",
|
||
|
"previousPage": "Previous",
|
||
|
"nextPage": "",
|
||
|
"previousPage": "",
|
||
|
}
|
||
|
}
|
||
|
onNextPage={[Function]}
|
||
| ... | ... | |
|
disablePrevious={false}
|
||
|
messages={
|
||
|
Object {
|
||
|
"nextPage": "Next",
|
||
|
"previousPage": "Previous",
|
||
|
"nextPage": "",
|
||
|
"previousPage": "",
|
||
|
}
|
||
|
}
|
||
|
onNextPage={[Function]}
|
||
| webpack/assets/javascripts/react_app/components/common/SearchInput/searchInput.scss | ||
|---|---|---|
|
|
||
|
.input-search {
|
||
|
position: relative;
|
||
|
left: 5px;
|
||
|
left: 20px;
|
||
|
|
||
|
input {
|
||
|
text-indent: 25px;
|
||
Also available in: Unified diff
Fixes #23391, #23251 - adjsut breadcrumbs swticher to pf design