Remove unused components
This commit is contained in:
fabioberger
@@ -1,164 +0,0 @@
|
||||
import * as _ from 'lodash';
|
||||
import * as React from 'react';
|
||||
import { Container } from 'ts/components/ui/container';
|
||||
import { DropDown } from 'ts/components/ui/drop_down';
|
||||
import { Text } from 'ts/components/ui/text';
|
||||
import { ALink, Deco, Key, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
|
||||
import { colors } from 'ts/utils/colors';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
import { Link } from '../documentation/shared/link';
|
||||
|
||||
const gettingStartedKeyToLinkInfo1: ALink[] = [
|
||||
{
|
||||
title: Key.BuildARelayer,
|
||||
to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
|
||||
},
|
||||
{
|
||||
title: Key.OrderBasics,
|
||||
to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
|
||||
},
|
||||
];
|
||||
const gettingStartedKeyToLinkInfo2: ALink[] = [
|
||||
{
|
||||
title: Key.DevelopOnEthereum,
|
||||
to: `${WebsitePaths.Wiki}#Ethereum-Development`,
|
||||
},
|
||||
{
|
||||
title: Key.UseNetworkedLiquidity,
|
||||
to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
|
||||
},
|
||||
];
|
||||
const popularDocsToLinkInfos: ALink[] = [
|
||||
{
|
||||
title: Key.ZeroExJs,
|
||||
to: WebsiteLegacyPaths.ZeroExJs,
|
||||
},
|
||||
{
|
||||
title: Key.Connect,
|
||||
to: WebsiteLegacyPaths.Connect,
|
||||
},
|
||||
{
|
||||
title: Key.SmartContract,
|
||||
to: WebsitePaths.SmartContracts,
|
||||
},
|
||||
];
|
||||
const usefulLinksToLinkInfo: ALink[] = [
|
||||
{
|
||||
title: Key.Wiki,
|
||||
to: WebsitePaths.Wiki,
|
||||
},
|
||||
{
|
||||
title: Key.Github,
|
||||
to: constants.URL_GITHUB_ORG,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: Key.ProtocolSpecification,
|
||||
to: constants.URL_PROTOCOL_SPECIFICATION,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
];
|
||||
|
||||
interface DevelopersDropDownProps {
|
||||
location: Location;
|
||||
translate: Translate;
|
||||
menuItemStyles: React.CSSProperties;
|
||||
menuIconStyle: React.CSSProperties;
|
||||
}
|
||||
|
||||
interface DevelopersDropDownState {}
|
||||
|
||||
export class DevelopersDropDown extends React.Component<DevelopersDropDownProps, DevelopersDropDownState> {
|
||||
public render(): React.ReactNode {
|
||||
const activeNode = (
|
||||
<Container className="flex relative" paddingRight="10">
|
||||
<Text fontColor={this.props.menuIconStyle.color}>
|
||||
{this.props.translate.get(Key.Developers, Deco.Cap)}
|
||||
</Text>
|
||||
</Container>
|
||||
);
|
||||
return (
|
||||
<DropDown
|
||||
activeNode={activeNode}
|
||||
popoverContent={this._renderDropdownMenu()}
|
||||
anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
|
||||
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
|
||||
style={this.props.menuItemStyles}
|
||||
popoverStyle={{ borderRadius: 4, width: 397, height: 373, marginTop: 0 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
private _renderDropdownMenu(): React.ReactNode {
|
||||
const sectionPadding = '26px';
|
||||
const dropdownMenu = (
|
||||
<Container>
|
||||
<Container className="flex" padding={sectionPadding}>
|
||||
<Container paddingRight="45px">
|
||||
{this._renderLinkSection(gettingStartedKeyToLinkInfo1, 'Getting started')}
|
||||
</Container>
|
||||
<Container>{this._renderLinkSection(gettingStartedKeyToLinkInfo2)}</Container>
|
||||
</Container>
|
||||
<Container width="100%" height="1px" backgroundColor={colors.grey300} />
|
||||
<Container className="flex" padding={sectionPadding}>
|
||||
<Container paddingRight="62px">
|
||||
<Container>{this._renderLinkSection(popularDocsToLinkInfos, 'Popular docs')}</Container>
|
||||
</Container>
|
||||
<Container>
|
||||
<Container>{this._renderLinkSection(usefulLinksToLinkInfo, 'Useful links')}</Container>
|
||||
</Container>
|
||||
</Container>
|
||||
<Link to={WebsitePaths.Docs} fontColor={colors.lightBlueA700}>
|
||||
<Container
|
||||
padding="0.9rem"
|
||||
backgroundColor={colors.lightBgGrey}
|
||||
borderBottomLeftRadius={4}
|
||||
borderBottomRightRadius={4}
|
||||
>
|
||||
<Text fontColor={colors.lightBlueA700} fontWeight="bold" fontSize="14px" textAlign="center">
|
||||
{this.props.translate.get(Key.ViewAllDocumentation, Deco.Upper)}
|
||||
</Text>
|
||||
</Container>
|
||||
</Link>
|
||||
</Container>
|
||||
);
|
||||
return dropdownMenu;
|
||||
}
|
||||
private _renderLinkSection(links: ALink[], title: string = ''): React.ReactNode {
|
||||
const numLinks = links.length;
|
||||
let i = 0;
|
||||
const renderLinks = _.map(links, (link: ALink) => {
|
||||
const isWikiLink = _.startsWith(link.to, WebsitePaths.Wiki) && _.includes(link.to, '#');
|
||||
const isOnWiki = this.props.location.pathname === WebsitePaths.Wiki;
|
||||
let to = link.to;
|
||||
if (isWikiLink && isOnWiki) {
|
||||
to = `${link.to.split('#')[1]}`;
|
||||
}
|
||||
i++;
|
||||
const isLast = i === numLinks;
|
||||
const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
|
||||
return (
|
||||
<Container className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
|
||||
<Link to={to} shouldOpenInNewTab={!!link.shouldOpenInNewTab}>
|
||||
<Text fontFamily="Roboto, Roboto Mono" fontColor={colors.lightBlueA700}>
|
||||
{linkText}
|
||||
</Text>
|
||||
</Link>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<Container>
|
||||
<Container height="33px">
|
||||
{!_.isEmpty(title) && (
|
||||
<Text letterSpacing={1} fontColor={colors.linkSectionGrey} fontSize="14px" fontWeight={600}>
|
||||
{title.toUpperCase()}
|
||||
</Text>
|
||||
)}
|
||||
</Container>
|
||||
{renderLinks}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,230 +0,0 @@
|
||||
import { Link } from 'ts/components/documentation/shared/link';
|
||||
|
||||
import { ObjectMap } from '@0x/types';
|
||||
import * as _ from 'lodash';
|
||||
import DropDownMenu from 'material-ui/DropDownMenu';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import * as React from 'react';
|
||||
import { colors } from 'ts/style/colors';
|
||||
|
||||
import { Dispatcher } from 'ts/redux/dispatcher';
|
||||
import { ALink, Deco, Key, Language, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
|
||||
import { constants } from 'ts/utils/constants';
|
||||
import { Translate } from 'ts/utils/translate';
|
||||
|
||||
const ICON_DIMENSION = 16;
|
||||
|
||||
const languageToMenuTitle = {
|
||||
[Language.English]: 'English',
|
||||
[Language.Russian]: 'Русский',
|
||||
[Language.Spanish]: 'Español',
|
||||
[Language.Korean]: '한국어',
|
||||
[Language.Chinese]: '中文',
|
||||
};
|
||||
|
||||
export interface FooterProps {
|
||||
translate: Translate;
|
||||
dispatcher: Dispatcher;
|
||||
backgroundColor?: string;
|
||||
}
|
||||
|
||||
interface FooterState {
|
||||
selectedLanguage: Language;
|
||||
}
|
||||
|
||||
export class Footer extends React.Component<FooterProps, FooterState> {
|
||||
public static defaultProps = {
|
||||
backgroundColor: colors.darkerGrey,
|
||||
};
|
||||
constructor(props: FooterProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
selectedLanguage: props.translate.getLanguage(),
|
||||
};
|
||||
}
|
||||
public render(): React.ReactNode {
|
||||
const sectionNameToLinks: ObjectMap<ALink[]> = {
|
||||
[Key.Documentation]: [
|
||||
{
|
||||
title: 'Developer Home',
|
||||
to: WebsitePaths.Docs,
|
||||
},
|
||||
{
|
||||
title: '0x.js',
|
||||
to: WebsiteLegacyPaths.ZeroExJs,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
|
||||
to: WebsitePaths.SmartContracts,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Connect, Deco.Cap),
|
||||
to: WebsiteLegacyPaths.Connect,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
|
||||
to: WebsitePaths.Whitepaper,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Wiki, Deco.Cap),
|
||||
to: WebsitePaths.Wiki,
|
||||
},
|
||||
],
|
||||
[Key.Community]: [
|
||||
{
|
||||
title: this.props.translate.get(Key.Discord, Deco.Cap),
|
||||
to: constants.URL_ZEROEX_CHAT,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Blog, Deco.Cap),
|
||||
to: constants.URL_BLOG,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: 'Twitter',
|
||||
to: constants.URL_TWITTER,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: 'Reddit',
|
||||
to: constants.URL_REDDIT,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Forum, Deco.Cap),
|
||||
to: constants.URL_DISCOURSE_FORUM,
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
],
|
||||
[Key.Organization]: [
|
||||
{
|
||||
title: this.props.translate.get(Key.About, Deco.Cap),
|
||||
to: WebsitePaths.About,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Careers, Deco.Cap),
|
||||
to: WebsitePaths.Careers,
|
||||
},
|
||||
{
|
||||
title: this.props.translate.get(Key.Contact, Deco.Cap),
|
||||
to: 'mailto:team@0x.org',
|
||||
shouldOpenInNewTab: true,
|
||||
},
|
||||
],
|
||||
};
|
||||
const languageMenuItems = _.map(languageToMenuTitle, (menuTitle: string, language: Language) => {
|
||||
return <MenuItem key={menuTitle} value={language} primaryText={menuTitle} />;
|
||||
});
|
||||
return (
|
||||
<div className="relative pb4 pt2" style={{ backgroundColor: this.props.backgroundColor }}>
|
||||
<div className="mx-auto max-width-4 md-px2 lg-px0 py4 clearfix" style={{ color: colors.white }}>
|
||||
<div className="col lg-col-4 md-col-4 col-12 left">
|
||||
<div className="sm-mx-auto" style={{ width: 148 }}>
|
||||
<div>
|
||||
<img src="/images/protocol_logo_white.png" height="30" />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: 11,
|
||||
color: colors.grey,
|
||||
paddingLeft: 37,
|
||||
paddingTop: 2,
|
||||
}}
|
||||
>
|
||||
© ZeroEx, Intl.
|
||||
</div>
|
||||
<div className="pt4 center">
|
||||
<DropDownMenu
|
||||
labelStyle={{ color: colors.white }}
|
||||
value={this.state.selectedLanguage}
|
||||
onChange={this._updateLanguage.bind(this)}
|
||||
>
|
||||
{languageMenuItems}
|
||||
</DropDownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col lg-col-8 md-col-8 col-12 lg-pl4 md-pl4">
|
||||
<div className="col lg-col-4 md-col-4 col-12">
|
||||
<div className="lg-right md-right sm-center">
|
||||
{this._renderHeader(Key.Documentation)}
|
||||
{_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
|
||||
<div className="lg-right md-right sm-center">
|
||||
{this._renderHeader(Key.Community)}
|
||||
{_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="col lg-col-4 md-col-4 col-12">
|
||||
<div className="lg-right md-right sm-center">
|
||||
{this._renderHeader(Key.Organization)}
|
||||
{_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderIcon(fileName: string): React.ReactNode {
|
||||
return (
|
||||
<div style={{ height: ICON_DIMENSION, width: ICON_DIMENSION }}>
|
||||
<img src={`/images/social/${fileName}`} style={{ width: ICON_DIMENSION }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderMenuItem(link: ALink): React.ReactNode {
|
||||
const titleToIcon: { [title: string]: string } = {
|
||||
[this.props.translate.get(Key.Discord, Deco.Cap)]: 'discord.png',
|
||||
[this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
|
||||
Twitter: 'twitter.png',
|
||||
Reddit: 'reddit.png',
|
||||
[this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
|
||||
};
|
||||
const iconIfExists = titleToIcon[link.title];
|
||||
return (
|
||||
<div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
|
||||
<Link
|
||||
to={link.to}
|
||||
shouldOpenInNewTab={link.shouldOpenInNewTab}
|
||||
fontColor={colors.white}
|
||||
className="text-decoration-none"
|
||||
>
|
||||
<div>
|
||||
{iconIfExists !== undefined ? (
|
||||
<div className="inline-block">
|
||||
<div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
|
||||
<div className="table-cell">{link.title}</div>
|
||||
</div>
|
||||
) : (
|
||||
link.title
|
||||
)}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _renderHeader(key: Key): React.ReactNode {
|
||||
const headerStyle = {
|
||||
color: colors.grey400,
|
||||
letterSpacing: 2,
|
||||
fontFamily: 'Roboto Mono',
|
||||
fontSize: 13,
|
||||
};
|
||||
return (
|
||||
<div className="lg-pb2 md-pb2 sm-pt4" style={headerStyle}>
|
||||
{this.props.translate.get(key, Deco.Upper)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
private _updateLanguage(_event: any, _index: number, value: Language): void {
|
||||
this.setState({
|
||||
selectedLanguage: value,
|
||||
});
|
||||
this.props.dispatcher.updateSelectedLanguage(value);
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,6 @@ import Drawer from 'material-ui/Drawer';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import * as React from 'react';
|
||||
import { Blockchain } from 'ts/blockchain';
|
||||
import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
|
||||
import { DrawerMenu } from 'ts/components/portal/drawer_menu';
|
||||
import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
|
||||
import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
|
||||
@@ -140,12 +139,6 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
{!this._isViewingPortal() && (
|
||||
<div className={menuClasses}>
|
||||
<div className="flex items-center justify-between">
|
||||
<DevelopersDropDown
|
||||
location={this.props.location}
|
||||
menuItemStyles={{ ...styles.menuItem, paddingBottom: 12, paddingTop: 12 }}
|
||||
translate={this.props.translate}
|
||||
menuIconStyle={menuIconStyle}
|
||||
/>
|
||||
<TopBarMenuItem
|
||||
title={this.props.translate.get(Key.Blog, Deco.Cap)}
|
||||
path={constants.URL_BLOG}
|
||||
|
||||
Reference in New Issue
Block a user