Commit ad2f73dc authored by Imran Salam's avatar Imran Salam
Browse files

make styling changes suggested by design review

parent 42d12a15
......@@ -80,7 +80,12 @@ function browserInfo(
case getType(browserActions.toggleGenomeSelector):
return { ...state, genomeSelectorActive: action.payload };
case getType(browserActions.selectBrowserTab):
return { ...state, selectedBrowserTab: action.payload };
return {
...state,
selectedBrowserTab: action.payload,
trackPanelModalOpened: false,
trackPanelModalView: ''
};
default:
return state;
}
......
......@@ -38,10 +38,13 @@
}
.mainDetail {
bottom: 3px;
font-size: 16px;
font-weight: $bold;
position: relative;
}
.secondaryDetail {
font-weight: $light;
margin-left: 10px;
}
}
......
......@@ -30,7 +30,7 @@ const DrawerTranscript: FunctionComponent<DrawerTranscriptProps> = (
<div className={styles.details}>
<p>
<span className={styles.mainDetail}>{transcriptStableId}</span>
<span className={styles.secondaryInfo}>{selectedInfo}</span>
<span className={styles.secondaryDetail}>{selectedInfo}</span>
</p>
</div>
</dd>
......@@ -40,7 +40,7 @@ const DrawerTranscript: FunctionComponent<DrawerTranscriptProps> = (
<div className={styles.details}>
<p>
<span>{geneSymbol}</span>
<span className={styles.secondaryInfo}>{geneStableId}</span>
<span className={styles.secondaryDetail}>{geneStableId}</span>
</p>
</div>
</dd>
......
......@@ -91,6 +91,7 @@ const TrackPanel: FunctionComponent<TrackPanelProps> = (
openTrackPanelModal={props.openTrackPanelModal}
toggleDrawer={props.toggleDrawer}
toggleTrackPanel={props.toggleTrackPanel}
trackPanelModalOpened={props.trackPanelModalOpened}
trackPanelModalView={props.trackPanelModalView}
trackPanelOpened={props.trackPanelOpened}
/>
......
......@@ -16,6 +16,7 @@ type TrackPanelBarProps = {
openTrackPanelModal: (trackPanelModalView: string) => void;
toggleDrawer: (drawerOpened: boolean) => void;
toggleTrackPanel: (trackPanelOpened?: boolean) => void;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
trackPanelOpened: boolean;
};
......@@ -57,6 +58,7 @@ const TrackPanelBar: FunctionComponent<TrackPanelBarProps> = (
iconConfig={item}
closeTrackPanelModal={props.closeTrackPanelModal}
openTrackPanelModal={props.openTrackPanelModal}
trackPanelModalOpened={props.trackPanelModalOpened}
trackPanelModalView={props.trackPanelModalView}
/>
))}
......
import React, { FunctionComponent, memo, useState, useCallback } from 'react';
import React, {
FunctionComponent,
memo,
useState,
useCallback,
useEffect
} from 'react';
import { TrackPanelBarItem } from './trackPanelBarConfig';
import styles from './TrackPanelBarIcon.scss';
......@@ -7,6 +13,7 @@ type TrackPanelBarIconProps = {
closeTrackPanelModal: () => void;
iconConfig: TrackPanelBarItem;
openTrackPanelModal: (trackPanelModalView: string) => void;
trackPanelModalOpened: boolean;
trackPanelModalView: string;
};
......@@ -14,6 +21,12 @@ const TrackPanelBarIcon: FunctionComponent<TrackPanelBarIconProps> = memo(
(props: TrackPanelBarIconProps) => {
const [toggleState, setToggleState] = useState(false);
useEffect(() => {
if (props.trackPanelModalOpened === false) {
setToggleState(false);
}
}, [props.trackPanelModalOpened]);
const toggleModalView = useCallback(() => {
const newToggleState: boolean = !toggleState;
......
......@@ -55,7 +55,7 @@ const Home: FunctionComponent<HomeProps> = (props: HomeProps) => {
<h2>Find</h2>
<p>
<input type="text" placeholder="Name, symbol or ID" />
<button disabled={true}>Go</button>
{/* <button disabled={true}>Go</button> */}
</p>
<div className={styles.filter}>
<h2>Refine results</h2>
......
......@@ -20,4 +20,8 @@
margin-left: 30px;
padding: 6px 18px;
}
a {
font-weight: $bold;
}
}
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