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

fix: make http badges font-based instead of inline png

Browse Source
This commit is contained in:
Roman Hotsiy 2018-08-19 16:50:15 +03:00
parent a87440113b
commit 5d84bd4656
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/SideMenu/MenuItem.tsx
View File

@ -3,6 +3,7 @@ import * as React from 'react';
import { ShelfIcon } from '../../common-elements/shelfs'; import { ShelfIcon } from '../../common-elements/shelfs';
import { IMenuItem, OperationModel } from '../../services'; import { IMenuItem, OperationModel } from '../../services';
import { shortenHTTPVerb } from '../../utils/openapi';
import { MenuItems } from './MenuItems'; import { MenuItems } from './MenuItems';
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements'; import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
@ -93,7 +94,7 @@ class OperationMenuItemContent extends React.Component<OperationMenuItemContentP
active={item.active} active={item.active}
deprecated={item.deprecated} deprecated={item.deprecated}
> >
<OperationBadge type={item.httpVerb} /> <OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
<MenuItemTitle width="calc(100% - 32px)"> <MenuItemTitle width="calc(100% - 32px)">
{item.name} {item.name}
{this.props.children} {this.props.children}

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

@ -8,59 +8,55 @@ export const OperationBadge = withProps<{ type: string }>(styled.span).attrs({
})` })`
width: 26px; width: 26px;
display: inline-block; display: inline-block;
height: ${props => props.theme.typography.code.fontSize};; height: ${props => props.theme.typography.code.fontSize};
line-height: ${props => props.theme.typography.code.fontSize};
background-color: #333; background-color: #333;
border-radius: 3px; border-radius: 3px;
vertical-align: top;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAACgCAMAAADZ0KclAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////////VXz1bAAAAAJ0Uk5T/wDltzBKAAAA80lEQVR42uSWSwLCIAxEX+5/aa2QZBJw5UIt9QMdRqSPEAAw/TyvqzZf150NzdXL49qreXwXjeqz9bqN1tgJl/KLyaVrrL7K7gx+1vlNMqy+helOO4rfBGYZiEkq1ubQ3DeKvc97Et+d+e01vIZlLZZqb1WNJFd8ZKYsmv4Hh3H2fDgjMUI5WSExjiEZs7rEZ5T+/jQn9lhgsw53j/e9MQtxqPsbZY54M5fNl/MY/f1s7NbRSkYlYjc0KPsWMrmhIU9933ywxDiSE+upYNH8TdusUotllNvcAUzfnE/NC4OSYyklQhpdl9E4Tw0Cm4/G9xBgAO7VCkjWLOMfAAAAAElFTkSuQmCC");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 6px 4px; background-position: 6px 4px;
text-indent: -9000px; font-size: 7px;
font-family: Verdana; // web-safe
color: white;
text-transform: uppercase;
text-align: center;
font-weight: bold;
vertical-align: middle;
margin-right: 6px; margin-right: 6px;
margin-top: 2px; margin-top: 2px;
&.get { &.get {
background-position: 8px -12px;
background-color: ${props => props.theme.colors.http.get}; background-color: ${props => props.theme.colors.http.get};
} }
&.post { &.post {
background-position: 6px 4px;
background-color: ${props => props.theme.colors.http.post}; background-color: ${props => props.theme.colors.http.post};
} }
&.put { &.put {
background-position: 8px -28px;
background-color: ${props => props.theme.colors.http.put}; background-color: ${props => props.theme.colors.http.put};
} }
&.options { &.options {
background-position: 4px -148px;
background-color: ${props => props.theme.colors.http.options}; background-color: ${props => props.theme.colors.http.options};
} }
&.patch { &.patch {
background-position: 4px -114px;
background-color: ${props => props.theme.colors.http.patch}; background-color: ${props => props.theme.colors.http.patch};
} }
&.delete { &.delete {
background-position: 4px -44px;
background-color: ${props => props.theme.colors.http.delete}; background-color: ${props => props.theme.colors.http.delete};
} }
&.basic { &.basic {
background-position: 5px -79px;
background-color: ${props => props.theme.colors.http.basic}; background-color: ${props => props.theme.colors.http.basic};
} }
&.link { &.link {
background-position: 4px -131px;
background-color: ${props => props.theme.colors.http.link}; background-color: ${props => props.theme.colors.http.link};
} }
&.head { &.head {
background-position: 6px -102px;
background-color: ${props => props.theme.colors.http.head}; background-color: ${props => props.theme.colors.http.head};
} }
`; `;

6
src/utils/openapi.ts
View File

@ -280,3 +280,9 @@ export let SECURITY_SCHEMES_SECTION_PREFIX = 'section/Authentication/';
export function setSecuritySchemePrefix(prefix: string) { export function setSecuritySchemePrefix(prefix: string) {
SECURITY_SCHEMES_SECTION_PREFIX = prefix; SECURITY_SCHEMES_SECTION_PREFIX = prefix;
} }
export const shortenHTTPVerb = verb =>
({
delete: 'del',
options: 'opts',
}[verb] || verb);