Unverified Commit 65f06ac2 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Update global layout and fix opening and closing of Launchbar (#230)

parent 53bc1ecd
Pipeline #53749 passed with stages
in 5 minutes and 15 seconds
......@@ -20152,14 +20152,6 @@
"throttle-debounce": "^2.1.0"
}
},
"react-slidedown": {
"version": "2.4.5",
"resolved": "https://registry.npmjs.org/react-slidedown/-/react-slidedown-2.4.5.tgz",
"integrity": "sha512-zFDhgqQ1ZLfRr+rQA7p+13OTT/+zUR/+3v3JnwrnXPM8R+1KHhuTNseYHU8jYN3QfxjJXtqve0rgbWCBiFkpiw==",
"requires": {
"tslib": "^1.9.0"
}
},
"react-spring": {
"version": "8.0.27",
"resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
......
......@@ -66,7 +66,6 @@
"react-redux": "7.1.3",
"react-router": "5.1.2",
"react-router-dom": "5.1.2",
"react-slidedown": "2.4.5",
"react-spring": "8.0.27",
"redux": "4.0.4",
"redux-devtools-extension": "2.13.8",
......
@import 'src/styles/common';
/*
TODO:
Add a global layout component based on CSS grid:
| HEADER |
| CONTENT |
so that the area allotted to content is calculated automatically by the browser,
and not specifically defined as currently is done below
*/
.content {
&.shorter {
height: calc(100% - 79px);
}
&.taller {
height: calc(100% - 25px);
}
}
......@@ -8,8 +8,6 @@ import { getLaunchbarExpanded } from '../header/headerSelectors';
import Home from './home/Home';
import App from './app/App';
import styles from './Content.scss';
type StateProps = {
launchbarExpanded: boolean;
};
......@@ -20,10 +18,6 @@ type OwnProps = {
type ContentProps = StateProps & OwnProps;
const getHeightClass = (launchbarExpanded: boolean): string => {
return launchbarExpanded ? styles.shorter : styles.taller;
};
const ContentRoutes = () => (
<>
<Route path="/" component={Home} exact={true} />
......@@ -34,13 +28,7 @@ const ContentRoutes = () => (
export const Content: FunctionComponent<ContentProps> = (
props: ContentProps
) => {
return (
<main
className={`${styles.content} ${getHeightClass(props.launchbarExpanded)}`}
>
{props.children}
</main>
);
return <main>{props.children}</main>;
};
// helper for making the Content component testable (no need to render the whole component tree nested in Content)
......
......@@ -11,8 +11,6 @@ import homeIcon from 'static/img/header/home.svg';
import styles from './Header.scss';
type HeaderProps = {};
export const HomeLink = () => (
<div className={styles.homeLink}>
<Link to="/">
......
import React, { FunctionComponent, ReactNode } from 'react';
import SlideDown from 'react-slidedown';
import React from 'react';
import { connect } from 'react-redux';
import { RootState } from 'src/store';
......@@ -15,18 +14,12 @@ type OwnProps = {};
type AccountProps = StateProps & OwnProps;
export const Account: FunctionComponent<AccountProps> = (
props: AccountProps
) => {
const AccountChildren: ReactNode = (
export const Account = (props: AccountProps) => {
return props.accountExpanded ? (
<div className={styles.account}>
<h2>Account area placeholder</h2>
</div>
);
return (
<SlideDown>{props.accountExpanded ? AccountChildren : null}</SlideDown>
);
) : null;
};
const mapStateToProps = (state: RootState): StateProps => ({
......
......@@ -5,9 +5,6 @@ import Launchbar from './Launchbar';
import { createSelectedSpecies } from 'tests/fixtures/selected-species';
jest.mock('react-slidedown', () => (props: any) => (
<div className="react-slidedown">{props.children}</div>
));
jest.mock('./LaunchbarButton', () => () => <div>Launchbar Button</div>);
const defaultProps = {
......
import React from 'react';
import SlideDown from 'react-slidedown';
import ensemblIcon from 'static/img/launchbar/ensembl-logo.png'; // <-- note it's a png
......@@ -26,82 +25,78 @@ export const getCategoryClass = (separator: boolean): string => {
return separator ? 'border' : '';
};
const LaunchbarContent = (props: LaunchbarProps) => (
<div className={styles.launchbar}>
<div className={styles.categoriesWrapper}>
<div className={styles.categories}>
<div className={styles.category}>
<LaunchbarButton
app="global-search"
description="Site search"
icon={SearchIcon}
enabled={false}
/>
<LaunchbarButton
app="species-selector"
description="Species selector"
icon={SpeciesSelectorIcon}
enabled={true}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="browser"
description="Genome browser"
icon={BrowserIcon}
enabled={props.committedSpecies.length > 0}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="entity-viewer"
description="Entity Viewer"
icon={EntityViewerIcon}
enabled={
isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) &&
props.committedSpecies.length > 0
}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="custom-download"
description="Downloads"
icon={CustomDownloadIcon}
enabled={
isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) &&
props.committedSpecies.length > 0
}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="help-docs"
description="Help & documentation"
icon={HelpIcon}
enabled={false}
/>
const Launchbar = (props: LaunchbarProps) => {
return props.launchbarExpanded ? (
<div className={styles.launchbar}>
<div className={styles.categoriesWrapper}>
<div className={styles.categories}>
<div className={styles.category}>
<LaunchbarButton
app="global-search"
description="Site search"
icon={SearchIcon}
enabled={false}
/>
<LaunchbarButton
app="species-selector"
description="Species selector"
icon={SpeciesSelectorIcon}
enabled={true}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="browser"
description="Genome browser"
icon={BrowserIcon}
enabled={props.committedSpecies.length > 0}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="entity-viewer"
description="Entity Viewer"
icon={EntityViewerIcon}
enabled={
isEnvironment([Environment.DEVELOPMENT, Environment.INTERNAL]) &&
props.committedSpecies.length > 0
}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="custom-download"
description="Downloads"
icon={CustomDownloadIcon}
enabled={
isEnvironment([
Environment.DEVELOPMENT,
Environment.INTERNAL
]) && props.committedSpecies.length > 0
}
/>
</div>
<div className={styles.category}>
<LaunchbarButton
app="help-docs"
description="Help & documentation"
icon={HelpIcon}
enabled={false}
/>
</div>
</div>
</div>
<div className={styles.about}>
<span className={styles.aboutText}>Genome research database</span>
<LaunchbarButton
app="about"
description="About Ensembl"
icon={ensemblIcon}
enabled={false}
/>
</div>
</div>
<div className={styles.about}>
<span className={styles.aboutText}>Genome research database</span>
<LaunchbarButton
app="about"
description="About Ensembl"
icon={ensemblIcon}
enabled={false}
/>
</div>
</div>
);
const Launchbar = (props: LaunchbarProps) => {
return (
<SlideDown transitionOnAppear={false}>
{props.launchbarExpanded ? <LaunchbarContent {...props} /> : null}
</SlideDown>
);
) : null;
};
export default Launchbar;
import React, { FunctionComponent, memo } from 'react';
import React, { memo } from 'react';
import { connect } from 'react-redux';
import isEqual from 'lodash/isEqual';
......@@ -19,9 +19,10 @@ type OwnProps = {};
type LaunchbarContainerProps = StateProps & OwnProps;
export const LaunchbarContainer: FunctionComponent<
LaunchbarContainerProps
> = memo((props) => <Launchbar {...props} />, isEqual);
export const LaunchbarContainer = memo(
(props: LaunchbarContainerProps) => <Launchbar {...props} />,
isEqual
);
const mapStateToProps = (state: RootState): StateProps => ({
launchbarExpanded: getLaunchbarExpanded(state),
......
.root {
display: grid;
grid-template-rows: auto 1fr;
position: relative;
height: 100%;
}
.react-slidedown {
height: 0;
transition: none 0.5s ease-in;
}
.react-slidedown.transitioning {
overflow-y: hidden;
}
.react-slidedown.closed {
display: none;
}
.reactSlideDrawer {
transition: all 0.5s ease-in;
}
@import 'common';
@import 'normalize';
@import 'fonts';
@import 'animation';
html,
body,
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment