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

feat: theme add sidebar activeBackgroundColor and activeTextColor (#1600)

Browse Source
This commit is contained in:
Loïc Fürhoff 2022-04-07 15:51:52 +02:00 committed by GitHub
parent a160498089
commit 6716b08e88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
README.md
View File

@ -285,21 +285,25 @@ You can use all of the following options with the standalone version of the <red
* `color`: # COMPUTED: colors.primary.main
* `visited`: # COMPUTED: typography.links.color
* `hover`: # COMPUTED: lighten(0.2 typography.links.color)
* `menu`
* `sidebar`
* `width`: '260px'
* `backgroundColor`: '#fafafa'
* `textColor`: '#333333'
* `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main
* `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
* `groupItems` # Group headings
* `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
* `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
* `textTransform`: 'uppercase'
* `level1Items` # Level 1 items like tags or section 1st level items
* `activeBackgroundColor`: # COMPUTED: theme.sidebar.backgroundColor
* `activeTextColor`: # COMPUTED: theme.sidebar.activeTextColor
* `textTransform`: 'none'
* `arrow` # menu arrow
* `arrow` # sidebar arrow
* `size`: '1.5em'
* `color`: # COMPUTED: theme.menu.textColor
* `color`: # COMPUTED: theme.sidebar.textColor
* `logo`
* `maxHeight`: # COMPUTED: menu.width
* `maxWidth`: # COMPUTED: menu.width
* `maxHeight`: # COMPUTED: sidebar.width
* `maxWidth`: # COMPUTED: sidebar.width
* `gutter`: '2px' # logo image padding
* `rightPanel`
* `backgroundColor`: '#263238'

22
src/components/SideMenu/styled.elements.ts
View File

@ -66,11 +66,12 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
}
`;
function menuItemActiveBg(depth, { theme }: { theme: ResolvedThemeInterface }): string {
function menuItemActive(depth, { theme }: { theme: ResolvedThemeInterface }, option: string): string {
if (depth > 1) {
return darken(0.1, theme.sidebar.backgroundColor);
return theme.sidebar.level1Items[option];
} else if (depth === 1) {
return darken(0.05, theme.sidebar.backgroundColor);
return theme.sidebar.groupItems[option];
} else {
return '';
}
@ -102,17 +103,10 @@ export const menuItemDepth = {
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
color: ${props => props.theme.sidebar.textColor};
`,
1: css`
font-size: 0.929em;
text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform};
&:hover {
color: ${props => props.theme.sidebar.activeTextColor};
}
`,
2: css`
color: ${props => props.theme.sidebar.textColor};
`,
};
@ -131,7 +125,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
}))<MenuItemLabelType>`
cursor: pointer;
color: ${props =>
props.active ? props.theme.sidebar.activeTextColor : props.theme.sidebar.textColor};
props.active ? menuItemActive(props.depth, props, 'activeTextColor') : props.theme.sidebar.textColor};
margin: 0;
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
${({ depth, type, theme }) =>
@ -140,12 +134,14 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
justify-content: space-between;
font-family: ${props => props.theme.typography.headings.fontFamily};
${props => menuItemDepth[props.depth]};
background-color: ${props => (props.active ? menuItemActiveBg(props.depth, props) : '')};
background-color: ${props =>
props.active ? menuItemActive(props.depth, props, 'activeBackgroundColor') : props.theme.sidebar.backgroundColor};
${props => (props.deprecated && deprecatedCss) || ''};
&:hover {
background-color: ${props => menuItemActiveBg(props.depth, props)};
color: ${props => menuItemActive(props.depth, props, 'activeTextColor')};
background-color: ${props => menuItemActive(props.depth, props, 'activeBackgroundColor')};
}
${ShelfIcon} {

10
src/theme.ts
View File

@ -139,9 +139,13 @@ const defaultTheme: ThemeInterface = {
? theme.sidebar.textColor
: theme.colors.primary.main,
groupItems: {
textTransform: 'uppercase',
activeBackgroundColor: theme => darken(0.1, theme.sidebar.backgroundColor),
activeTextColor: theme => theme.sidebar.activeTextColor,
textTransform: 'uppercase'
},
level1Items: {
activeBackgroundColor: theme => darken(0.05, theme.sidebar.backgroundColor),
activeTextColor: theme => theme.sidebar.activeTextColor,
textTransform: 'none',
},
arrow: {
@ -319,9 +323,13 @@ export interface ResolvedThemeInterface {
textColor: string;
activeTextColor: string;
groupItems: {
activeBackgroundColor: string;
activeTextColor: string;
textTransform: string;
};
level1Items: {
activeBackgroundColor: string;
activeTextColor: string;
textTransform: string;
};
arrow: {