Commit 6c8afba1 authored by Imran Salam's avatar Imran Salam
Browse files

add track panel modal view

parent f91b7d0d
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
box-shadow: 0 2px 3px $ens-grey; box-shadow: 0 2px 3px $ens-grey;
padding: 7px 0 3px 0; padding: 7px 0 3px 0;
position: relative; position: relative;
z-index: 1; z-index: 200;
dd { dd {
display: inline-block; display: inline-block;
......
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
.trackPanel { .trackPanel {
@include flex; @include flex;
border-left: 1px solid $ens-medium-grey; position: relative;
} }
...@@ -14,14 +14,18 @@ import { RootState } from 'src/rootReducer'; ...@@ -14,14 +14,18 @@ import { RootState } from 'src/rootReducer';
import { import {
toggleDrawer, toggleDrawer,
toggleTrackPanel, toggleTrackPanel,
changeCurrentTrack changeCurrentTrack,
closeTrackPanelModal,
openTrackPanelModal
} from '../browserActions'; } from '../browserActions';
import { import {
getCurrentTrack, getCurrentTrack,
getDrawerOpened, getDrawerOpened,
getTrackPanelOpened, getTrackPanelOpened,
getBrowserActivated getBrowserActivated,
getTrackPanelModalOpened,
getTrackPanelModalView
} from '../browserSelectors'; } from '../browserSelectors';
import { getLaunchbarExpanded } from 'src/header/headerSelectors'; import { getLaunchbarExpanded } from 'src/header/headerSelectors';
...@@ -29,6 +33,7 @@ import { getBreakpointWidth } from 'src/globalSelectors'; ...@@ -29,6 +33,7 @@ import { getBreakpointWidth } from 'src/globalSelectors';
import { BreakpointWidth } from 'src/globalConfig'; import { BreakpointWidth } from 'src/globalConfig';
import styles from './TrackPanel.scss'; import styles from './TrackPanel.scss';
import TrackPanelModal from './track-panel-modal/TrackPanelModal';
type StateProps = { type StateProps = {
browserActivated: boolean; browserActivated: boolean;
...@@ -36,11 +41,15 @@ type StateProps = { ...@@ -36,11 +41,15 @@ type StateProps = {
drawerOpened: boolean; drawerOpened: boolean;
breakpointWidth: BreakpointWidth; breakpointWidth: BreakpointWidth;
launchbarExpanded: boolean; launchbarExpanded: boolean;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
trackPanelOpened: boolean; trackPanelOpened: boolean;
}; };
type DispatchProps = { type DispatchProps = {
changeCurrentTrack: (currentTrack: string) => void; changeCurrentTrack: (currentTrack: string) => void;
closeTrackPanelModal: () => void;
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void; toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void; toggleTrackPanel: (trackPanelOpened?: boolean) => void;
}; };
...@@ -67,20 +76,32 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = ( ...@@ -67,20 +76,32 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
{props.browserActivated && ( {props.browserActivated && (
<Fragment> <Fragment>
<TrackPanelBar <TrackPanelBar
closeTrackPanelModal={props.closeTrackPanelModal}
drawerOpened={props.drawerOpened} drawerOpened={props.drawerOpened}
launchbarExpanded={props.launchbarExpanded} launchbarExpanded={props.launchbarExpanded}
openTrackPanelModal={props.openTrackPanelModal}
toggleDrawer={props.toggleDrawer} toggleDrawer={props.toggleDrawer}
toggleTrackPanel={props.toggleTrackPanel} toggleTrackPanel={props.toggleTrackPanel}
trackPanelModalView={props.trackPanelModalView}
trackPanelOpened={props.trackPanelOpened} trackPanelOpened={props.trackPanelOpened}
/> />
{props.trackPanelOpened ? ( {props.trackPanelOpened ? (
<TrackPanelList <Fragment>
browserRef={props.browserRef} <TrackPanelList
currentTrack={props.currentTrack} browserRef={props.browserRef}
launchbarExpanded={props.launchbarExpanded} currentTrack={props.currentTrack}
toggleDrawer={props.toggleDrawer} launchbarExpanded={props.launchbarExpanded}
updateTrack={props.changeCurrentTrack} toggleDrawer={props.toggleDrawer}
/> updateTrack={props.changeCurrentTrack}
/>
{props.trackPanelModalOpened ? (
<TrackPanelModal
closeTrackPanelModal={props.closeTrackPanelModal}
launchbarExpanded={props.launchbarExpanded}
trackPanelModalView={props.trackPanelModalView}
/>
) : null}
</Fragment>
) : null} ) : null}
</Fragment> </Fragment>
)} )}
...@@ -94,11 +115,15 @@ const mapStateToProps = (state: RootState): StateProps => ({ ...@@ -94,11 +115,15 @@ const mapStateToProps = (state: RootState): StateProps => ({
currentTrack: getCurrentTrack(state), currentTrack: getCurrentTrack(state),
drawerOpened: getDrawerOpened(state), drawerOpened: getDrawerOpened(state),
launchbarExpanded: getLaunchbarExpanded(state), launchbarExpanded: getLaunchbarExpanded(state),
trackPanelModalOpened: getTrackPanelModalOpened(state),
trackPanelModalView: getTrackPanelModalView(state),
trackPanelOpened: getTrackPanelOpened(state) trackPanelOpened: getTrackPanelOpened(state)
}); });
const mapDispatchToProps: DispatchProps = { const mapDispatchToProps: DispatchProps = {
changeCurrentTrack, changeCurrentTrack,
closeTrackPanelModal,
openTrackPanelModal,
toggleDrawer, toggleDrawer,
toggleTrackPanel toggleTrackPanel
}; };
......
...@@ -10,11 +10,14 @@ import chevronRightIcon from 'static/img/shared/chevron-right.svg'; ...@@ -10,11 +10,14 @@ import chevronRightIcon from 'static/img/shared/chevron-right.svg';
import styles from './TrackPanelBar.scss'; import styles from './TrackPanelBar.scss';
type TrackPanelBarProps = { type TrackPanelBarProps = {
toggleDrawer: (drawerOpened: boolean) => void; closeTrackPanelModal: () => void;
drawerOpened: boolean; drawerOpened: boolean;
launchbarExpanded: boolean; launchbarExpanded: boolean;
trackPanelOpened: boolean; openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void; toggleTrackPanel: (trackPanelOpened?: boolean) => void;
trackPanelModalView: string;
trackPanelOpened: boolean;
}; };
const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = ( const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
...@@ -49,7 +52,13 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = ( ...@@ -49,7 +52,13 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
</button> </button>
</dt> </dt>
{trackPanelBarConfig.map((item: TrackPanelBarItem) => ( {trackPanelBarConfig.map((item: TrackPanelBarItem) => (
<TrackPanelBarIcon key={item.name} iconConfig={item} /> <TrackPanelBarIcon
key={item.name}
iconConfig={item}
closeTrackPanelModal={props.closeTrackPanelModal}
openTrackPanelModal={props.openTrackPanelModal}
trackPanelModalView={props.trackPanelModalView}
/>
))} ))}
</dl> </dl>
</div> </div>
......
import React, { FunctionComponent, memo } from 'react'; import React, { FunctionComponent, memo, useState, useCallback } from 'react';
import { TrackPanelBarItem } from './trackPanelBarConfig'; import { TrackPanelBarItem } from './trackPanelBarConfig';
import styles from './TrackPanelBarIcon.scss'; import styles from './TrackPanelBarIcon.scss';
type TrackPanelBarIconProps = { type TrackPanelBarIconProps = {
closeTrackPanelModal: () => void;
iconConfig: TrackPanelBarItem; iconConfig: TrackPanelBarItem;
openTrackPanelModal: (trackPanelModalView: string) => void;
trackPanelModalView: string;
}; };
const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo( const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo(
(props: TrackPanelBarIconProps) => ( (props: TrackPanelBarIconProps) => {
<dt className={styles.barIcon}> const [toggleState, setToggleState] = useState(false);
<button>
<img const toggleModalView = useCallback(() => {
src={props.iconConfig.icon.default} const newToggleState: boolean = !toggleState;
alt={props.iconConfig.description}
/> if (newToggleState === true) {
</button> props.openTrackPanelModal(props.iconConfig.name);
</dt> } else {
) props.closeTrackPanelModal();
}
setToggleState(newToggleState);
}, [props.iconConfig.name, toggleState]);
const getViewIcon = () => {
const { iconConfig, trackPanelModalView } = props;
return iconConfig.name === trackPanelModalView
? iconConfig.icon.selected
: iconConfig.icon.default;
};
return (
<dt className={styles.barIcon}>
<button onClick={toggleModalView}>
<img src={getViewIcon()} alt={props.iconConfig.description} />
</button>
</dt>
);
}
); );
export default TrackPanelBarIcon; export default TrackPanelBarIcon;
@import 'src/styles/common';
.trackPanelModal {
background: $ens-white;
font-weight: $light;
left: 36px;
padding: 10px 20px;
position: absolute;
width: 320px;
z-index: 100;
&.shorter {
height: calc(100vh - 177px);
}
&.taller {
height: calc(100vh - 129px);
}
h3 {
font-size: 14px;
}
p {
margin-bottom: 30px;
}
}
.closeButton {
position: absolute;
right: 20px;
top: 10px;
img {
height: 15px;
width: 15px;
}
}
.previouslyViewed {
margin-top: 60px;
dt {
font-size: 12px;
}
dd {
margin: 15px 0 0 15px;
}
}
import React, { FunctionComponent } from 'react';
import closeIcon from 'static/img/track-panel/close.svg';
import TrackPanelSearch from './modal-views/TrackPanelSearch';
import TracksManager from './modal-views/TracksManager';
import TrackPanelBookmarks from './modal-views/TrackPanelBookmarks';
import PersonalData from './modal-views/PersonalData';
import TrackPanelShare from './modal-views/TrackPanelShare';
import TrackPanelDownloads from './modal-views/TrackPanelDownloads';
import styles from './TrackPanelModal.scss';
type TrackPanelModalProps = {
closeTrackPanelModal: () => void;
launchbarExpanded: boolean;
trackPanelModalView: string;
};
const TrackPanelModal: FunctionComponent<TrackPanelModalProps> = (
props: TrackPanelModalProps
) => {
const getTrackPanelModalClasses = () => {
const heightClass: string = props.launchbarExpanded
? styles.shorter
: styles.taller;
return `${styles.trackPanelModal} ${heightClass}`;
};
const getModalView = () => {
switch (props.trackPanelModalView) {
case 'search':
return <TrackPanelSearch />;
case 'tracks-manager':
return <TracksManager />;
case 'bookmarks':
return <TrackPanelBookmarks />;
case 'personal-data':
return <PersonalData />;
case 'share':
return <TrackPanelShare />;
case 'downloads':
return <TrackPanelDownloads />;
default:
return null;
}
};
return (
<section className={getTrackPanelModalClasses()}>
<button
onClick={props.closeTrackPanelModal}
className={styles.closeButton}
>
<img src={closeIcon} alt="Close track panel modal" />
</button>
<div className={styles.trackPanelModalView}>{getModalView()}</div>
</section>
);
};
export default TrackPanelModal;
import React, { FunctionComponent } from 'react';
const PersonalData: FunctionComponent = () => {
return (
<section className="personaData">
<h3>Personal Data</h3>
<p>Upload your own data to be displayed in the browser</p>
<p>Not ready yet &hellip;</p>
</section>
);
};
export default PersonalData;
import React, { FunctionComponent } from 'react';
import { Link } from 'react-router-dom';
import styles from '../TrackPanelModal.scss';
const TrackPanelBookmarks: FunctionComponent = () => {
return (
<section className="trackPanelBookmarks">
<h3>Bookmarks</h3>
<p>Save multiple browser configurations</p>
<p>Not ready yet &hellip;</p>
<dl className={styles.previouslyViewed}>
<dt>Previously viewed</dt>
<dd>
<Link to="/app/browser/human/BRCA2/13:32315474-32400266">
Human gene BRCA2
</Link>
</dd>
<dd>
<Link to="/app/browser/human/TTN/2:178525989-178830802">
Human transcript TTN
</Link>
</dd>
</dl>
</section>
);
};
export default TrackPanelBookmarks;
import React, { FunctionComponent } from 'react';
const TrackPanelDownloads: FunctionComponent = () => {
return (
<section className="trackPanelDownloads">
<h3>Downloads</h3>
<p>Export your browser configurations as images or data</p>
<p>Not ready yet &hellip;</p>
</section>
);
};
export default TrackPanelDownloads;
import React, { FunctionComponent } from 'react';
const TrackPanelSearch: FunctionComponent = () => {
return (
<section className="trackPanelSearch">
<h3>Search</h3>
<p>Quickly find the tracks you want to show or hide in the browser</p>
<p>Not ready yet &hellip;</p>
</section>
);
};
export default TrackPanelSearch;
import React, { FunctionComponent } from 'react';
const TrackPanelShare: FunctionComponent = () => {
return (
<section className="trackPanelShare">
<h3>Share</h3>
<p>Share your browser configurations or your own data views</p>
<p>Not ready yet &hellip;</p>
</section>
);
};
export default TrackPanelShare;
import React, { FunctionComponent } from 'react';
const TracksManager: FunctionComponent = () => {
return (
<section className="tracksManager">
<h3>Tracks Manager</h3>
<p>Save multiple browser configurations</p>
<p>Not ready yet &hellip;</p>
</section>
);
};
export default TracksManager;
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