diff options
Diffstat (limited to 'packages')
5 files changed, 58 insertions, 20 deletions
diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx index da05b04f8..3a909db7e 100644 --- a/packages/react-docs/src/components/doc_reference.tsx +++ b/packages/react-docs/src/components/doc_reference.tsx @@ -97,15 +97,15 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc if (!_.isUndefined(markdownFileIfExists)) { // Special-case replace the `introduction` sectionName with the package name const isIntroductionSection = sectionName === 'introduction'; - const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName; const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3; return ( <MarkdownSection key={`markdown-section-${sectionName}`} - sectionName={finalSectionName} + sectionName={sectionName} headerSize={headerSize} markdownContent={markdownFileIfExists} shouldReformatTitle={false} + alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined} /> ); } @@ -196,7 +196,9 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc )} {!_.isEmpty(docSection.functions) && ( <div> - {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>} + {!isExportedFunctionSection && ( + <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div> + )} <div>{functionDefs}</div> </div> )} diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx index 5ec82983a..819311953 100644 --- a/packages/react-docs/src/components/signature_block.tsx +++ b/packages/react-docs/src/components/signature_block.tsx @@ -55,7 +55,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu <div id={`${this.props.sectionName}-${method.name}`} style={{ overflow: 'hidden', width: '100%' }} - className="pb4" + className="pb4 pt2" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > diff --git a/packages/react-shared/src/components/markdown_section.tsx b/packages/react-shared/src/components/markdown_section.tsx index 3dc3efe12..9f5855d16 100644 --- a/packages/react-shared/src/components/markdown_section.tsx +++ b/packages/react-shared/src/components/markdown_section.tsx @@ -20,6 +20,7 @@ export interface MarkdownSectionProps { headerSize?: HeaderSizes; githubLink?: string; shouldReformatTitle?: boolean; + alternativeSectionTitle?: string; } interface DefaultMarkdownSectionProps { @@ -47,22 +48,25 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd const { sectionName, markdownContent, headerSize, githubLink } = this.props as PropsWithDefaults; const id = utils.getIdFromName(sectionName); - const finalSectionName = this.props.shouldReformatTitle + const formattedSectionName = this.props.shouldReformatTitle ? utils.convertCamelCaseToSpaces(sectionName) : sectionName; + const title = !_.isUndefined(this.props.alternativeSectionTitle) + ? this.props.alternativeSectionTitle + : formattedSectionName; return ( <div className="md-px1 sm-px2 overflow-hidden" onMouseOver={this._setAnchorVisibility.bind(this, true)} onMouseOut={this._setAnchorVisibility.bind(this, false)} > - <ScrollElement name={id}> - <Container className="clearfix" marginBottom="20px"> + <ScrollElement name={id} style={{ paddingBottom: 20 }}> + <Container className="clearfix" paddingTop="30px" paddingBottom="20px"> <div className="col lg-col-8 md-col-8 sm-col-12"> <span style={{ color: colors.grey700 }}> <AnchorTitle headerSize={headerSize} - title={_.capitalize(finalSectionName)} + title={_.capitalize(title)} id={id} shouldShowAnchor={this.state.shouldShowAnchor} /> @@ -87,13 +91,7 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd paragraph: MarkdownParagraphBlock, }} /> - <Container - width={'100%'} - height={'1px'} - backgroundColor={colors.grey300} - marginTop={'32px'} - marginBottom={'32px'} - /> + <Container width={'100%'} height={'1px'} backgroundColor={colors.grey300} marginTop={'32px'} /> </ScrollElement> </div> ); diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 1ad61fcca..87622310a 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,9 +14,12 @@ export interface NestedSidebarMenuProps { sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; + parentName?: string; } -export interface NestedSidebarMenuState {} +export interface NestedSidebarMenuState { + scrolledToId: string; +} const styles: Styles = { menuItemWithHeaders: { @@ -40,7 +43,28 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N public static defaultProps: Partial<NestedSidebarMenuProps> = { shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, + parentName: 'default', }; + private _urlIntervalCheckId: number; + constructor(props: NestedSidebarMenuProps) { + super(props); + this.state = { + scrolledToId: '', + }; + } + public componentDidMount(): void { + this._urlIntervalCheckId = window.setInterval(() => { + const scrollId = location.hash.slice(1); + if (scrollId !== this.state.scrolledToId) { + this.setState({ + scrolledToId: scrollId, + }); + } + }, 200); + } + public componentWillUnmount(): void { + window.clearInterval(this._urlIntervalCheckId); + } public render(): React.ReactNode { const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); @@ -48,7 +72,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N // tslint:disable-next-line:no-unused-variable return ( <div key={`section-${sectionName}`} className="py1" style={{ color: colors.greyTheme }}> - <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1"> + <div style={{ fontSize: 14, letterSpacing: 0.5 }} className="py1 pl1"> {finalSectionName.toUpperCase()} </div> {this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N return ( <div> {this.props.sidebarHeader} - <div className="pl1">{navigation}</div> + <div>{navigation}</div> </div> ); } private _renderMenuItems(links: ALink[]): React.ReactNode[] { + const scrolledToId = this.state.scrolledToId; const menuItemStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemWithHeaders : styles.menuItemWithoutHeaders; const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {}; const menuItems = _.map(links, link => { + const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; return ( <div key={`menuItem-${finalMenuItemName}`}> <Link to={link.to} shouldOpenInNewTab={link.shouldOpenInNewTab}> - <MenuItem style={menuItemStyles} innerDivStyle={menuItemInnerDivStyles}> + <MenuItem + style={{ + ...menuItemStyles, + paddingLeft: 8, + borderRadius: 6, + backgroundColor: isScrolledTo ? colors.lightLinkBlue : 'inherit', + }} + innerDivStyle={{ + ...menuItemInnerDivStyles, + color: isScrolledTo ? colors.white : 'inherit', + fontWeight: isScrolledTo ? 'bold' : 'inherit', + }} + > <span style={{ textTransform: this.props.shouldReformatMenuItemNames ? 'capitalize' : 'none', diff --git a/packages/website/ts/pages/documentation/developers_page.tsx b/packages/website/ts/pages/documentation/developers_page.tsx index 042d80c61..e35218a70 100644 --- a/packages/website/ts/pages/documentation/developers_page.tsx +++ b/packages/website/ts/pages/documentation/developers_page.tsx @@ -138,7 +138,7 @@ export class DevelopersPage extends React.Component<DevelopersPageProps, Develop className="absolute" style={{ ...scrollableContainerStyles, - paddingTop: 30, + paddingTop: 0, paddingLeft: mainContentPadding, paddingRight: this.state.isHoveringMainContent ? mainContentPadding - SCROLLER_WIDTH |