mirror of
https://github.com/Redocly/redoc.git
synced 2025-08-07 21:54:53 +03:00
BDEVEXP-1200 & 1507 - Additional docs link & additional design changes
* Added hover state over 'Additional docs' and restricted the text api heading to 60% width to avoid its overflow. * Added underline for all the headers in the api * Added 'Back to' button. * Modified 'Download' button as per Dev-x global button specs along with its hover state. * Changed background of Sidemenu to white. * Removed Copyright information from bottom of Sidemenu.
This commit is contained in:
akumarsingh
parent
1b4fcb546e
commit
073bfdecb4
31
src/components/ApiBackTo/ApiBackTo.tsx
Normal file
31
src/components/ApiBackTo/ApiBackTo.tsx
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { observer } from 'mobx-react';
|
||||
import * as React from 'react';
|
||||
import { OpenAPIInfo } from '../../types';
|
||||
import { ApiBackToText } from './styled.elements';
|
||||
|
||||
@observer
|
||||
export class ApiBackTo extends React.Component<{ info: OpenAPIInfo }> {
|
||||
state = {
|
||||
backTextColor: '#0084CE'
|
||||
};
|
||||
|
||||
handleHoverState = () => {this.setState({backTextColor: '#339DD8'})};
|
||||
handleActiveState = () => {this.setState({backTextColor: '#00639B'})};
|
||||
handleLeaveState = () => {this.setState({backTextColor: '#0084CE'})};
|
||||
render() {
|
||||
return(
|
||||
<div>
|
||||
<ApiBackToText href={'/apis'}
|
||||
onMouseEnter={this.handleHoverState}
|
||||
onMouseDown={this.handleActiveState}
|
||||
onMouseLeave={this.handleLeaveState}>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.5 22L2 11.5L12.5 1" stroke="#0084CE" strokeWidth="2" strokeLinecap="round"/>
|
||||
</svg>
|
||||
|
||||
<span style={{marginLeft: '-7px', color: this.state.backTextColor}}>OT2 services</span>
|
||||
</ApiBackToText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
12
src/components/ApiBackTo/styled.elements.tsx
Normal file
12
src/components/ApiBackTo/styled.elements.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
import styled from '../../styled-components';
|
||||
|
||||
export const ApiBackToText = styled.a`
|
||||
text-decoration:none
|
||||
padding: 50px 0 37px 15px;
|
||||
color: #0084CE;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
|
|
@ -22,6 +22,16 @@ export interface ApiInfoProps {
|
|||
|
||||
@observer
|
||||
export class ApiInfo extends React.Component<ApiInfoProps> {
|
||||
|
||||
state = {
|
||||
gotoIconColor: '#0084CE',
|
||||
gotoTextColor: '#0084CE'
|
||||
};
|
||||
|
||||
handleHoverState = () => {this.setState({gotoIconColor: '#339DD8', gotoTextColor: '#339DD8'})};
|
||||
handleActiveState = () => {this.setState({gotoIconColor: '#00639B', gotoTextColor: '#00639B'})};
|
||||
handleLeaveState = () => {this.setState({gotoIconColor: '#0084CE', gotoTextColor: '#0084CE'})};
|
||||
|
||||
handleDownloadClick = e => {
|
||||
if (!e.target.href) {
|
||||
e.target.href = this.props.store.spec.info.downloadLink;
|
||||
|
|
@ -76,19 +86,30 @@ export class ApiInfo extends React.Component<ApiInfoProps> {
|
|||
<Row>
|
||||
<MiddlePanel className="api-info">
|
||||
<ApiHeader>
|
||||
{info.title} {version}
|
||||
<AdditionalDocLink
|
||||
target="_blank"
|
||||
href={store.options.additionalDocUrl}
|
||||
>
|
||||
<span style={{zoom: '1.3'}}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.75" d="M8 14C4.6912 14 2 11.3088 2 8C2 4.6912 4.6912 2 8 2C11.3088 2 14 4.6912 14 8C14 11.3088 11.3088 14 8 14Z" fill="#0084CE"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.799805 8.00005C0.799805 11.9716 4.02826 15.2 7.9998 15.2C11.9713 15.2 15.1998 11.9716 15.1998 8.00005C15.1998 4.02851 11.9713 0.800049 7.9998 0.800049C4.02826 0.800049 0.799805 4.02851 0.799805 8.00005ZM3.32386 11.7561C2.49585 10.7273 1.9998 9.42061 1.9998 8.00005C1.9998 4.69125 4.691 2.00005 7.9998 2.00005C11.3086 2.00005 13.9998 4.69125 13.9998 8.00005C13.9998 11.3088 11.3086 14 7.9998 14C6.58686 14 5.28654 13.5093 4.2603 12.6893L9.87799 7.0716L9.87799 10.0776C9.87799 10.4432 10.1734 10.7386 10.5389 10.7386C10.9044 10.7386 11.1998 10.4432 11.1998 10.0776L11.1998 4.80002L5.92218 4.80002C5.55714 4.79956 5.26127 5.09542 5.26127 5.46093C5.26127 5.82644 5.55667 6.12184 5.92218 6.12184L8.95767 6.12231L3.32386 11.7561Z" fill="white"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span style={{paddingLeft: '5px', verticalAlign: 'top'}}>Additional Docs</span>
|
||||
</AdditionalDocLink>
|
||||
<div style={{width: '60%', color: '#111B58', fontWeight: 500}}>
|
||||
{info.title} {version}
|
||||
</div>
|
||||
<div style={{margin: '0 auto'}}
|
||||
onMouseEnter={this.handleHoverState}
|
||||
onMouseDown={this.handleActiveState}
|
||||
onMouseLeave={this.handleLeaveState}>
|
||||
<AdditionalDocLink
|
||||
target="_blank"
|
||||
href={store.options.additionalDocUrl}
|
||||
>
|
||||
<span style={{zoom: '1.3'}}>
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.75" d="M8 14C4.6912 14 2 11.3088 2 8C2 4.6912 4.6912 2 8 2C11.3088 2 14 4.6912 14 8C14 11.3088 11.3088 14 8 14Z"
|
||||
fill={this.state.gotoIconColor}/>
|
||||
<path fillRule="evenodd" clipRule="evenodd" d="M0.799805 8.00005C0.799805 11.9716 4.02826 15.2 7.9998 15.2C11.9713 15.2 15.1998 11.9716 15.1998 8.00005C15.1998 4.02851 11.9713 0.800049 7.9998 0.800049C4.02826 0.800049 0.799805 4.02851 0.799805 8.00005ZM3.32386 11.7561C2.49585 10.7273 1.9998 9.42061 1.9998 8.00005C1.9998 4.69125 4.691 2.00005 7.9998 2.00005C11.3086 2.00005 13.9998 4.69125 13.9998 8.00005C13.9998 11.3088 11.3086 14 7.9998 14C6.58686 14 5.28654 13.5093 4.2603 12.6893L9.87799 7.0716L9.87799 10.0776C9.87799 10.4432 10.1734 10.7386 10.5389 10.7386C10.9044 10.7386 11.1998 10.4432 11.1998 10.0776L11.1998 4.80002L5.92218 4.80002C5.55714 4.79956 5.26127 5.09542 5.26127 5.46093C5.26127 5.82644 5.55667 6.12184 5.92218 6.12184L8.95767 6.12231L3.32386 11.7561Z" fill="white"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span style={{paddingLeft: '5px', verticalAlign: 'top',
|
||||
color: this.state.gotoTextColor}}>
|
||||
Additional Docs
|
||||
</span>
|
||||
</AdditionalDocLink>
|
||||
</div>
|
||||
</ApiHeader>
|
||||
{!hideDownloadButton && (
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -8,25 +8,38 @@ export const ApiInfoWrap = MiddlePanel;
|
|||
export const ApiHeader = styled(H1)`
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
display: flex;
|
||||
|
||||
${extensionsHook('ApiHeader')};
|
||||
`;
|
||||
|
||||
export const AdditionalDocLink = styled.a`
|
||||
padding-left: 100px;
|
||||
text-decoration:none
|
||||
font-size: 16px;
|
||||
color: #0084CE;
|
||||
&:hover {
|
||||
color: #00639B;
|
||||
}
|
||||
`;
|
||||
|
||||
export const DownloadButton = styled.a`
|
||||
border: 1px solid ${props => props.theme.colors.primary.main};
|
||||
color: ${props => props.theme.colors.primary.main};
|
||||
border-radius: 16px;
|
||||
color: #FFFFFF;
|
||||
font-weight: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-left: 0.5em;
|
||||
padding: 4px 8px 4px;
|
||||
padding: 6px 24px;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background: #0084CE;
|
||||
&:hover {
|
||||
background: #339DD8;;
|
||||
}
|
||||
&:active {
|
||||
background: #00639B;;
|
||||
}
|
||||
|
||||
${extensionsHook('DownloadButton')};
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@ export class SectionItem extends React.Component<ContentItemProps> {
|
|||
<>
|
||||
<Row>
|
||||
<MiddlePanel compact={false}>
|
||||
<Header>
|
||||
<Header style={{borderBottom: '1px solid rgba(0, 0, 0, 0.2)', paddingBottom: '12px'}}>
|
||||
<ShareLink to={this.props.item.id} />
|
||||
{name}
|
||||
</Header>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { AppStore } from '../../services';
|
|||
|
||||
import { ThemeProvider } from '../../styled-components';
|
||||
import { ApiInfo } from '../ApiInfo/';
|
||||
import { ApiLogo } from '../ApiLogo/ApiLogo';
|
||||
import { ApiBackTo } from '../ApiBackTo/ApiBackTo';
|
||||
import { OptionsProvider } from '../OptionsProvider';
|
||||
|
||||
import { SearchBox } from '../SearchBox/SearchBox';
|
||||
|
|
@ -43,7 +43,7 @@ export class Redoc extends React.Component<RedocProps> {
|
|||
<OptionsProvider value={options}>
|
||||
<RedocWrap className="redoc-wrap">
|
||||
<StickyResponsiveSidebar menu={menu} className="menu-content">
|
||||
<ApiLogo info={spec.info} />
|
||||
<ApiBackTo info={spec.info} />
|
||||
{(!options.disableSearch && (
|
||||
<SearchBox
|
||||
search={search!}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import { OptionsContext } from '../OptionsProvider';
|
|||
import { MenuItems } from './MenuItems';
|
||||
|
||||
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
|
||||
import { RedocAttribution } from './styled.elements';
|
||||
|
||||
@observer
|
||||
export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
|
||||
|
|
@ -24,11 +23,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
|
|||
}}
|
||||
>
|
||||
<MenuItems items={store.items} onActivate={this.activate} root={true} />
|
||||
<RedocAttribution>
|
||||
<a target="_blank" rel="noopener noreferrer" href="https://www.opentext.com/">
|
||||
© Copyright 2019 OpenText Corp
|
||||
</a>
|
||||
</RedocAttribution>
|
||||
</PerfectScrollbarWrap>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -124,7 +124,7 @@ const defaultTheme: ThemeInterface = {
|
|||
},
|
||||
menu: {
|
||||
width: '260px',
|
||||
backgroundColor: '#F3F6FB',
|
||||
backgroundColor: '#FFFFFF',
|
||||
textColor: '#232E72',
|
||||
activeTextColor: theme =>
|
||||
theme.menu.textColor !== defaultTheme.menu!.textColor
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user