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

add track panel modal view

parent f91b7d0d
......@@ -6,7 +6,7 @@
box-shadow: 0 2px 3px $ens-grey;
padding: 7px 0 3px 0;
position: relative;
z-index: 1;
z-index: 200;
dd {
display: inline-block;
......
......@@ -2,5 +2,5 @@
.trackPanel {
@include flex;
border-left: 1px solid $ens-medium-grey;
position: relative;
}
......@@ -14,14 +14,18 @@ import { RootState } from 'src/rootReducer';
import {
toggleDrawer,
toggleTrackPanel,
changeCurrentTrack
changeCurrentTrack,
closeTrackPanelModal,
openTrackPanelModal
} from '../browserActions';
import {
getCurrentTrack,
getDrawerOpened,
getTrackPanelOpened,
getBrowserActivated
getBrowserActivated,
getTrackPanelModalOpened,
getTrackPanelModalView
} from '../browserSelectors';
import { getLaunchbarExpanded } from 'src/header/headerSelectors';
......@@ -29,6 +33,7 @@ import { getBreakpointWidth } from 'src/globalSelectors';
import { BreakpointWidth } from 'src/globalConfig';
import styles from './TrackPanel.scss';
import TrackPanelModal from './track-panel-modal/TrackPanelModal';
type StateProps = {
browserActivated: boolean;
......@@ -36,11 +41,15 @@ type StateProps = {
drawerOpened: boolean;
breakpointWidth: BreakpointWidth;
launchbarExpanded: boolean;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
trackPanelOpened: boolean;
};
type DispatchProps = {
changeCurrentTrack: (currentTrack: string) => void;
closeTrackPanelModal: () => void;
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
};
......@@ -67,20 +76,32 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
{props.browserActivated && (
<Fragment>
<TrackPanelBar
closeTrackPanelModal={props.closeTrackPanelModal}
drawerOpened={props.drawerOpened}
launchbarExpanded={props.launchbarExpanded}
openTrackPanelModal={props.openTrackPanelModal}
toggleDrawer={props.toggleDrawer}
toggleTrackPanel={props.toggleTrackPanel}
trackPanelModalView={props.trackPanelModalView}
trackPanelOpened={props.trackPanelOpened}
/>
{props.trackPanelOpened ? (
<TrackPanelList
browserRef={props.browserRef}
currentTrack={props.currentTrack}
launchbarExpanded={props.launchbarExpanded}
toggleDrawer={props.toggleDrawer}
updateTrack={props.changeCurrentTrack}
/>
<Fragment>
<TrackPanelList
browserRef={props.browserRef}
currentTrack={props.currentTrack}
launchbarExpanded={props.launchbarExpanded}
toggleDrawer={props.toggleDrawer}
updateTrack={props.changeCurrentTrack}
/>
{props.trackPanelModalOpened ? (
<TrackPanelModal
closeTrackPanelModal={props.closeTrackPanelModal}
launchbarExpanded={props.launchbarExpanded}
trackPanelModalView={props.trackPanelModalView}
/>
) : null}
</Fragment>
) : null}
</Fragment>
)}
......@@ -94,11 +115,15 @@ const mapStateToProps = (state: RootState): StateProps => ({
currentTrack: getCurrentTrack(state),
drawerOpened: getDrawerOpened(state),
launchbarExpanded: getLaunchbarExpanded(state),
trackPanelModalOpened: getTrackPanelModalOpened(state),
trackPanelModalView: getTrackPanelModalView(state),
trackPanelOpened: getTrackPanelOpened(state)
});
const mapDispatchToProps: DispatchProps = {
changeCurrentTrack,
closeTrackPanelModal,
openTrackPanelModal,
toggleDrawer,
toggleTrackPanel
};
......
......@@ -10,11 +10,14 @@ import chevronRightIcon from 'static/img/shared/chevron-right.svg';
import styles from './TrackPanelBar.scss';
type TrackPanelBarProps = {
toggleDrawer: (drawerOpened: boolean) => void;
closeTrackPanelModal: () => void;
drawerOpened: boolean;
launchbarExpanded: boolean;
trackPanelOpened: boolean;
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
trackPanelModalView: string;
trackPanelOpened: boolean;
};
const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
......@@ -49,7 +52,13 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
</button>
</dt>
{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>
</div>
......
import React, { FunctionComponent, memo } from 'react';
import React, { FunctionComponent, memo, useState, useCallback } from 'react';
import { TrackPanelBarItem } from './trackPanelBarConfig';
import styles from './TrackPanelBarIcon.scss';
type TrackPanelBarIconProps = {
closeTrackPanelModal: () => void;
iconConfig: TrackPanelBarItem;
openTrackPanelModal: (trackPanelModalView: string) => void;
trackPanelModalView: string;
};
const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo(
(props: TrackPanelBarIconProps) => (
<dt className={styles.barIcon}>
<button>
<img
src={props.iconConfig.icon.default}
alt={props.iconConfig.description}
/>
</button>
</dt>
)
(props: TrackPanelBarIconProps) => {
const [toggleState, setToggleState] = useState(false);
const toggleModalView = useCallback(() => {
const newToggleState: boolean = !toggleState;
if (newToggleState === true) {
props.openTrackPanelModal(props.iconConfig.name);
} 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;
@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