From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 15:54:44 +0200 Subject: Refactor Home so that Dev section chrome is reusable across pages --- .../src/components/nested_sidebar_menu.tsx | 38 ---------------------- 1 file changed, 38 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 5b6076df6..f3ce5f5bf 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; - subsectionNameToLinks?: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; onMenuItemClick?: () => void; @@ -44,7 +43,6 @@ export class NestedSidebarMenu extends React.Component { @@ -108,47 +106,11 @@ export class NestedSidebarMenu extends React.Component - {this._renderMenuItemSubsections(link.title)} ); }); return menuItems; } - private _renderMenuItemSubsections(menuItemName: string): React.ReactNode { - if ( - _.isUndefined(this.props.subsectionNameToLinks) || - _.isUndefined(this.props.subsectionNameToLinks[menuItemName]) - ) { - return null; - } - return this._renderSubsectionLinks(menuItemName, this.props.subsectionNameToLinks[menuItemName]); - } - private _renderSubsectionLinks(menuItemName: string, links: ALink[]): React.ReactNode { - return ( -
    - {_.map(links, link => { - const name = `${menuItemName}-${link.title}`; - return ( -
  • - - - {link.title} - - -
  • - ); - })} -
- ); - } private _onMenuItemClick(): void { if (!_.isUndefined(this.props.onMenuItemClick)) { this.props.onMenuItemClick(); -- cgit v1.2.3 From a5eb346dd18f81b171280291f3d01b900a4aff1d Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Fri, 12 Oct 2018 19:44:51 +0100 Subject: fix: Remove unnecessary onClick prop from NestedSidebar, since one can listen to container element onClick --- .../react-shared/src/components/nested_sidebar_menu.tsx | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index f3ce5f5bf..85206569c 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -14,7 +14,6 @@ export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - onMenuItemClick?: () => void; selectedVersion?: string; versions?: string[]; onVersionSelected?: (semver: string) => void; @@ -41,7 +40,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldDisplaySectionHeaders: true, - onMenuItemClick: _.noop.bind(_), shouldReformatMenuItemNames: true, }; public render(): React.ReactNode { @@ -92,11 +90,7 @@ export class NestedSidebarMenu extends React.Component - + Date: Sat, 13 Oct 2018 16:29:14 +0100 Subject: Implement new version dropdown and remove it from nestedTopBar --- .../react-shared/src/components/nested_sidebar_menu.tsx | 16 ---------------- 1 file changed, 16 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 85206569c..440db4b16 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -8,15 +8,11 @@ import { colors } from '../utils/colors'; import { utils } from '../utils/utils'; import { Link } from './link'; -import { VersionDropDown } from './version_drop_down'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldDisplaySectionHeaders?: boolean; - selectedVersion?: string; - versions?: string[]; - onVersionSelected?: (semver: string) => void; shouldReformatMenuItemNames?: boolean; } @@ -59,21 +55,9 @@ export class NestedSidebarMenu extends React.Component{this._renderMenuItems(links)}; } }); - const maxWidthWithScrollbar = 307; return (
{this.props.sidebarHeader} - {!_.isUndefined(this.props.versions) && - !_.isUndefined(this.props.selectedVersion) && - !_.isUndefined(this.props.onVersionSelected) && ( -
- -
- )}
{navigation}
); -- cgit v1.2.3 From 4298da118f8cb7ca54b255576894bc98b7f7b374 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:23:02 +0100 Subject: chore: improve styling of sidebar --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 440db4b16..853b69976 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -45,7 +45,7 @@ export class NestedSidebarMenu extends React.Component -
+
{finalSectionName.toUpperCase()}
{this._renderMenuItems(links)} -- cgit v1.2.3 From bf9af95654503df94b5b32af74a4cbc8bee7f2ec Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 11:57:16 +0100 Subject: chore: improve colors --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 853b69976..71b9b4d32 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -44,7 +44,7 @@ export class NestedSidebarMenu extends React.Component +
{finalSectionName.toUpperCase()}
-- cgit v1.2.3 From a5e435d8317c7532caa4eb0fcf5bb49cf42c87c7 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 12:58:09 +0100 Subject: fix: menu item overflow issue --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 71b9b4d32..1ad61fcca 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -30,6 +30,9 @@ const styles: Styles = { fontSize: 14, lineHeight: 2, padding: 0, + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }, }; -- cgit v1.2.3 From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Mon, 15 Oct 2018 17:35:40 +0100 Subject: feat: highlighted sidebar as you scroll on doc reference pages --- .../src/components/nested_sidebar_menu.tsx | 46 ++++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') 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 = { 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 -
+
{finalSectionName.toUpperCase()}
{this._renderMenuItems(links)} @@ -61,23 +85,37 @@ export class NestedSidebarMenu extends React.Component {this.props.sidebarHeader} -
{navigation}
+
{navigation}
); } 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 (
- + Date: Tue, 16 Oct 2018 15:35:56 +0100 Subject: chore: get menu onHover darken back --- .../src/components/nested_sidebar_menu.tsx | 64 +++++++++------------- 1 file changed, 27 insertions(+), 37 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 87622310a..70062182b 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -12,7 +12,6 @@ import { Link } from './link'; export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; - shouldDisplaySectionHeaders?: boolean; shouldReformatMenuItemNames?: boolean; parentName?: string; } @@ -22,13 +21,12 @@ export interface NestedSidebarMenuState { } const styles: Styles = { - menuItemWithHeaders: { + menuItem: { minHeight: 0, + paddingLeft: 8, + borderRadius: 6, }, - menuItemWithoutHeaders: { - minHeight: 48, - }, - menuItemInnerDivWithHeaders: { + menuItemInnerDiv: { color: colors.grey800, fontSize: 14, lineHeight: 2, @@ -41,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { - shouldDisplaySectionHeaders: true, shouldReformatMenuItemNames: true, parentName: 'default', }; @@ -68,19 +65,15 @@ export class NestedSidebarMenu extends React.Component { const finalSectionName = utils.convertCamelCaseToSpaces(sectionName); - if (this.props.shouldDisplaySectionHeaders) { - // tslint:disable-next-line:no-unused-variable - return ( -
-
- {finalSectionName.toUpperCase()} -
- {this._renderMenuItems(links)} + // tslint:disable-next-line:no-unused-variable + return ( +
+
+ {finalSectionName.toUpperCase()}
- ); - } else { - return
{this._renderMenuItems(links)}
; - } + {this._renderMenuItems(links)} +
+ ); }); return (
@@ -91,31 +84,28 @@ export class NestedSidebarMenu extends React.Component { - const isScrolledTo = link.to === scrolledToId; const finalMenuItemName = this.props.shouldReformatMenuItemNames ? utils.convertDashesToSpaces(link.title) : link.title; + let menuItemStyle = styles.menuItem; + let menuItemInnerDivStyle = styles.menuItemInnerDiv; + const isScrolledTo = link.to === scrolledToId; + if (isScrolledTo) { + menuItemStyle = { + ...menuItemStyle, + backgroundColor: colors.lightLinkBlue, + }; + menuItemInnerDivStyle = { + ...menuItemInnerDivStyle, + color: colors.white, + fontWeight: 'bold', + }; + } return (
- + Date: Tue, 16 Oct 2018 16:38:59 +0100 Subject: chore: remove unused prop --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 -- 1 file changed, 2 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 70062182b..34f3eb276 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -13,7 +13,6 @@ export interface NestedSidebarMenuProps { sectionNameToLinks: ObjectMap; sidebarHeader?: React.ReactNode; shouldReformatMenuItemNames?: boolean; - parentName?: string; } export interface NestedSidebarMenuState { @@ -40,7 +39,6 @@ const styles: Styles = { export class NestedSidebarMenu extends React.Component { public static defaultProps: Partial = { shouldReformatMenuItemNames: true, - parentName: 'default', }; private _urlIntervalCheckId: number; constructor(props: NestedSidebarMenuProps) { -- cgit v1.2.3 From 9bae3e51d96ee3fc2c9652a373df155421228609 Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Tue, 16 Oct 2018 17:09:17 +0100 Subject: chore: initalize _urlIntervalCheckId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index 34f3eb276..fc5ab95fa 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -40,7 +40,7 @@ export class NestedSidebarMenu extends React.Component = { shouldReformatMenuItemNames: true, }; - private _urlIntervalCheckId: number; + private _urlIntervalCheckId: number | undefined = undefined; constructor(props: NestedSidebarMenuProps) { super(props); this.state = { -- cgit v1.2.3 From 4d275cc5916c2802bd1d0b64766409daff5006db Mon Sep 17 00:00:00 2001 From: Fabio Berger Date: Wed, 17 Oct 2018 15:55:05 +0100 Subject: nit: don't init scrolledToId --- packages/react-shared/src/components/nested_sidebar_menu.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'packages/react-shared/src/components/nested_sidebar_menu.tsx') diff --git a/packages/react-shared/src/components/nested_sidebar_menu.tsx b/packages/react-shared/src/components/nested_sidebar_menu.tsx index fc5ab95fa..f734dc654 100644 --- a/packages/react-shared/src/components/nested_sidebar_menu.tsx +++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx @@ -16,7 +16,7 @@ export interface NestedSidebarMenuProps { } export interface NestedSidebarMenuState { - scrolledToId: string; + scrolledToId?: string; } const styles: Styles = { @@ -43,9 +43,7 @@ export class NestedSidebarMenu extends React.Component { -- cgit v1.2.3