mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-25 01:53:44 +03:00
fix: improve customization fab (#1891)
This commit is contained in:
AlexVarchuk
GitHub
parent
eb4040afd8
commit
635f379eb0
|
|
@ -217,6 +217,7 @@ You can use all of the following options with the standalone version of the <red
|
|||
* `hideDownloadButton` - do not show "Download" spec button. **THIS DOESN'T MAKE YOUR SPEC PRIVATE**, it just hides the button.
|
||||
* `hideHostname` - if set, the protocol and hostname is not shown in the operation definition.
|
||||
* `hideLoading` - do not show loading animation. Useful for small docs.
|
||||
* `hideFab` - do not show FAB in mobile view. Useful for implementing a custom floating action button.
|
||||
* `hideSchemaPattern` - if set, the pattern is not shown in the schema.
|
||||
* `hideSingleRequestSampleTab` - do not show the request sample tab for requests with only one sample.
|
||||
* `showObjectSchemaExamples` - show object schema example in the properties, default `false`.
|
||||
|
|
@ -305,6 +306,9 @@ You can use all of the following options with the standalone version of the <red
|
|||
* `backgroundColor`: '#263238'
|
||||
* `width`: '40%'
|
||||
* `textColor`: '#ffffff'
|
||||
* `fab`
|
||||
* `backgroundColor`: '#263238'
|
||||
* `color`: '#ffffff'
|
||||
|
||||
-----------
|
||||
## Development
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
|
|||
const FloatingButton = styled.div`
|
||||
outline: none;
|
||||
user-select: none;
|
||||
background-color: #f2f2f2;
|
||||
background-color: ${({ theme }) => theme.fab.backgroundColor};
|
||||
color: ${props => props.theme.colors.primary.main};
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
|
|
@ -74,6 +74,9 @@ const FloatingButton = styled.div`
|
|||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
svg {
|
||||
color: ${({ theme }) => theme.fab.color};
|
||||
}
|
||||
|
||||
@media print {
|
||||
display: none;
|
||||
|
|
@ -140,9 +143,11 @@ export class StickyResponsiveSidebar extends React.Component<
|
|||
>
|
||||
{this.props.children}
|
||||
</StyledStickySidebar>
|
||||
<FloatingButton onClick={this.toggleNavMenu}>
|
||||
<AnimatedChevronButton open={open} />
|
||||
</FloatingButton>
|
||||
{!this.context.hideFab && (
|
||||
<FloatingButton onClick={this.toggleNavMenu}>
|
||||
<AnimatedChevronButton open={open} />
|
||||
</FloatingButton>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -186,6 +187,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -320,6 +325,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -426,6 +432,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -536,6 +546,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -642,6 +653,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -817,6 +832,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -923,6 +939,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -1057,6 +1077,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -1163,6 +1184,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -1273,6 +1298,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -1379,6 +1405,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -1512,6 +1542,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -1618,6 +1649,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -1790,6 +1825,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -1896,6 +1932,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -2030,6 +2070,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -2136,6 +2177,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
@ -2246,6 +2291,7 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
"expandSingleSchemaField": false,
|
||||
"generatedPayloadSamplesMaxDepth": 10,
|
||||
"hideDownloadButton": false,
|
||||
"hideFab": false,
|
||||
"hideHostname": false,
|
||||
"hideSchemaPattern": false,
|
||||
"hideSchemaTitles": false,
|
||||
|
|
@ -2352,6 +2398,10 @@ exports[`Components SchemaView discriminator should correctly render SchemaView
|
|||
},
|
||||
},
|
||||
"extensionsHook": undefined,
|
||||
"fab": Object {
|
||||
"backgroundColor": "#f2f2f2",
|
||||
"color": "#0065FB",
|
||||
},
|
||||
"logo": Object {
|
||||
"gutter": "2px",
|
||||
"maxHeight": "260px",
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ export interface RedocRawOptions {
|
|||
ignoreNamedSchemas?: string[] | string;
|
||||
hideSchemaPattern?: boolean;
|
||||
generatedPayloadSamplesMaxDepth?: number;
|
||||
hideFab?: boolean;
|
||||
}
|
||||
|
||||
export function argValueToBoolean(val?: string | boolean, defaultValue?: boolean): boolean {
|
||||
|
|
@ -245,6 +246,7 @@ export class RedocNormalizedOptions {
|
|||
ignoreNamedSchemas: Set<string>;
|
||||
hideSchemaPattern: boolean;
|
||||
generatedPayloadSamplesMaxDepth: number;
|
||||
hideFab: boolean;
|
||||
|
||||
constructor(raw: RedocRawOptions, defaults: RedocRawOptions = {}) {
|
||||
raw = { ...defaults, ...raw };
|
||||
|
|
@ -315,5 +317,6 @@ export class RedocNormalizedOptions {
|
|||
RedocNormalizedOptions.normalizeGeneratedPayloadSamplesMaxDepth(
|
||||
raw.generatedPayloadSamplesMaxDepth,
|
||||
);
|
||||
this.hideFab = argValueToBoolean(raw.hideFab);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,6 +162,10 @@ const defaultTheme: ThemeInterface = {
|
|||
codeBlock: {
|
||||
backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
|
||||
},
|
||||
fab: {
|
||||
backgroundColor: '#f2f2f2',
|
||||
color: '#0065FB',
|
||||
},
|
||||
};
|
||||
|
||||
export default defaultTheme;
|
||||
|
|
@ -338,6 +342,10 @@ export interface ResolvedThemeInterface {
|
|||
codeBlock: {
|
||||
backgroundColor: string;
|
||||
};
|
||||
fab: {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
};
|
||||
|
||||
extensionsHook?: (name: string, props: any) => string;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user