Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-28 19:43:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve customization fab (#1891)

Browse Source
This commit is contained in:
AlexVarchuk 2022-03-14 15:36:50 +02:00 committed by GitHub
parent eb4040afd8
commit 635f379eb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 74 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -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

7
src/components/StickySidebar/StickyResponsiveSidebar.tsx
View File

@ -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>
{!this.context.hideFab && (
<FloatingButton onClick={this.toggleNavMenu}>
<AnimatedChevronButton open={open} />
</FloatingButton>
)}
</>
);
}

50
src/components/__tests__/__snapshots__/DiscriminatorDropdown.test.tsx.snap
View File

@ -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",

3
src/services/RedocNormalizedOptions.ts
View File

@ -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);
}
}

8
src/theme.ts
View File

@ -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;
}