Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-08 06:04:56 +03:00
Code Issues Packages Projects Releases Wiki Activity

added send button

Browse Source
This commit is contained in:
Harjeet Singh 2018-04-20 15:55:09 -07:00
parent 63847ff3b6
commit 2a7ce2b64e
4 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/common-elements/buttons.ts Normal file
View File

@ -0,0 +1,14 @@
import styled, { StyledComponentClass, withProps } from '../styled-components';
export const Button = styled.button`
background: #248fb2;
border-radius: 0px;
border: none;
color: white;
font-size: 0.929em;
`;
export const SendButton = Button.extend`
background: #B0045E;
`;

14
src/common-elements/panels.ts
View File

@ -4,7 +4,7 @@ export const MiddlePanel = styled.div`
width: calc(100% - ${props => props.theme.rightPanel.width}); width: calc(100% - ${props => props.theme.rightPanel.width});
padding: ${props => props.theme.spacingUnit * 2}px; padding: ${props => props.theme.spacingUnit * 2}px;
${media.lessThan('medium')` ${media.lessThan('medium') `
width: 100%; width: 100%;
`}; `};
`; `;
@ -15,7 +15,7 @@ export const RightPanel = styled.div`
background-color: ${props => props.theme.rightPanel.backgroundColor}; background-color: ${props => props.theme.rightPanel.backgroundColor};
padding: ${props => props.theme.spacingUnit * 2}px; padding: ${props => props.theme.spacingUnit * 2}px;
${media.lessThan('medium')` ${media.lessThan('medium') `
width: 100%; width: 100%;
`}; `};
`; `;
@ -25,7 +25,7 @@ export const DarkRightPanel = RightPanel.extend`
`; `;
export const EmptyDarkRightPanel = DarkRightPanel.extend` export const EmptyDarkRightPanel = DarkRightPanel.extend`
${media.lessThan('medium')` ${media.lessThan('medium') `
padding: 0 padding: 0
`}; `};
`; `;
@ -34,7 +34,13 @@ export const Row = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
${media.lessThan('medium')` ${media.lessThan('medium') `
flex-direction: column; flex-direction: column;
`}; `};
`; `;
export const FlexLayout = styled.div`
align-items: flex-end;
display: flex;
width: 100%;
`;

5
src/components/Console/ConsoleEditor.tsx
View File

@ -33,7 +33,7 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
for (let mediaType of mediaTypes) { for (let mediaType of mediaTypes) {
if (mediaType.name.indexOf('json') > -1) { if (mediaType.name.indexOf('json') > -1) {
if (mediaType.examples) { if (mediaType.examples) {
sample = mediaType.examples && mediaType.examples.default; sample = mediaType.examples && mediaType.examples.default && mediaType.examples.default.value;
} }
break; break;
} }
@ -51,12 +51,11 @@ export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
*/ */
return ( return (
<div> <div>
<h3>ConsoleEditor</h3>
<AceEditor <AceEditor
tabSize={1} tabSize={1}
fontSize={10} fontSize={10}
mode="json" mode="json"
theme="monokai" theme="github"
name="request-builder-editor" name="request-builder-editor"
editorProps={{ $blockScrolling: true }} editorProps={{ $blockScrolling: true }}
value={JSON.stringify(sample, null, 2)} value={JSON.stringify(sample, null, 2)}

5
src/components/Console/ConsoleViewer.tsx
View File

@ -3,6 +3,8 @@ import * as React from 'react';
import { OperationModel } from '../../services/models'; import { OperationModel } from '../../services/models';
import { PayloadSamples } from '../PayloadSamples/PayloadSamples'; import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
import { SourceCodeWithCopy } from '../SourceCode/SourceCode'; import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
import { SendButton } from '../../common-elements/buttons';
import { FlexLayout } from '../../common-elements/panels';
import { ConsoleEditor } from './ConsoleEditor'; import { ConsoleEditor } from './ConsoleEditor';
export interface ConsoleViewerProps { export interface ConsoleViewerProps {
@ -30,6 +32,9 @@ export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
{samples.map(sample => ( {samples.map(sample => (
<SourceCodeWithCopy lang={sample.lang} source={sample.source} /> <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
))} ))}
<FlexLayout>
<SendButton>Send Request</SendButton>
</FlexLayout>
</div> </div>
); );
} }