From 073bfdecb429cf3d94c5807dc13aee337ddb742c Mon Sep 17 00:00:00 2001 From: akumarsingh Date: Tue, 31 Mar 2020 16:07:48 -0400 Subject: [PATCH] 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. --- src/components/ApiBackTo/ApiBackTo.tsx | 31 +++++++++++++ src/components/ApiBackTo/styled.elements.tsx | 12 +++++ src/components/ApiInfo/ApiInfo.tsx | 47 ++++++++++++++------ src/components/ApiInfo/styled.elements.ts | 21 +++++++-- src/components/ContentItems/ContentItems.tsx | 2 +- src/components/Redoc/Redoc.tsx | 4 +- src/components/SideMenu/SideMenu.tsx | 6 --- src/theme.ts | 2 +- 8 files changed, 98 insertions(+), 27 deletions(-) create mode 100644 src/components/ApiBackTo/ApiBackTo.tsx create mode 100644 src/components/ApiBackTo/styled.elements.tsx diff --git a/src/components/ApiBackTo/ApiBackTo.tsx b/src/components/ApiBackTo/ApiBackTo.tsx new file mode 100644 index 00000000..1e79183e --- /dev/null +++ b/src/components/ApiBackTo/ApiBackTo.tsx @@ -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( +
+ + + + + + OT2 services + +
+ ); + } +} diff --git a/src/components/ApiBackTo/styled.elements.tsx b/src/components/ApiBackTo/styled.elements.tsx new file mode 100644 index 00000000..45f086c1 --- /dev/null +++ b/src/components/ApiBackTo/styled.elements.tsx @@ -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; +`; diff --git a/src/components/ApiInfo/ApiInfo.tsx b/src/components/ApiInfo/ApiInfo.tsx index ea08e4f4..b3c75d50 100644 --- a/src/components/ApiInfo/ApiInfo.tsx +++ b/src/components/ApiInfo/ApiInfo.tsx @@ -22,6 +22,16 @@ export interface ApiInfoProps { @observer export class ApiInfo extends React.Component { + + 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 { - {info.title} {version} - - - - - - - - Additional Docs - +
+ {info.title} {version} +
+
+ + + + + + + + + Additional Docs + + +
{!hideDownloadButton && (

diff --git a/src/components/ApiInfo/styled.elements.ts b/src/components/ApiInfo/styled.elements.ts index 4621b07c..78edf5a3 100644 --- a/src/components/ApiInfo/styled.elements.ts +++ b/src/components/ApiInfo/styled.elements.ts @@ -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')}; `; diff --git a/src/components/ContentItems/ContentItems.tsx b/src/components/ContentItems/ContentItems.tsx index 7545243f..11d2f753 100644 --- a/src/components/ContentItems/ContentItems.tsx +++ b/src/components/ContentItems/ContentItems.tsx @@ -72,7 +72,7 @@ export class SectionItem extends React.Component { <> -

+
{name}
diff --git a/src/components/Redoc/Redoc.tsx b/src/components/Redoc/Redoc.tsx index d7938067..c7786ec1 100644 --- a/src/components/Redoc/Redoc.tsx +++ b/src/components/Redoc/Redoc.tsx @@ -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 { - + {(!options.disableSearch && ( { @@ -24,11 +23,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str }} > - - - © Copyright 2019 OpenText Corp - - ); } diff --git a/src/theme.ts b/src/theme.ts index 04252dc1..5264612c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -124,7 +124,7 @@ const defaultTheme: ThemeInterface = { }, menu: { width: '260px', - backgroundColor: '#F3F6FB', + backgroundColor: '#FFFFFF', textColor: '#232E72', activeTextColor: theme => theme.menu.textColor !== defaultTheme.menu!.textColor