Unverified Commit 7e93819e authored by Imran Salam's avatar Imran Salam Committed by GitHub
Browse files

Update zmenu layout in genome browser (#583)

parent 4853a9ec
Pipeline #194530 passed with stages
in 6 minutes and 46 seconds
...@@ -40,20 +40,7 @@ ...@@ -40,20 +40,7 @@
.zmenuAppLinks { .zmenuAppLinks {
display: flex; display: flex;
align-items: center; align-items: center;
} justify-content: space-between;
.zmenuAppButton {
flex: 0 0 auto;
height: 20px;
width: 20px;
margin-left: 16px;
svg {
width: 20px;
height: 20px;
fill: $white;
background-color: $blue;
}
} }
.zmenuToggleFooter { .zmenuToggleFooter {
......
...@@ -21,11 +21,7 @@ import * as urlFor from 'src/shared/helpers/urlHelper'; ...@@ -21,11 +21,7 @@ import * as urlFor from 'src/shared/helpers/urlHelper';
import { parseFeatureId } from 'src/content/app/browser/browserHelper'; import { parseFeatureId } from 'src/content/app/browser/browserHelper';
import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers'; import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers';
import { import { getBrowserActiveGenomeId } from '../browserSelectors';
getBrowserActiveGenomeId,
getBrowserActiveEnsObjectId,
isFocusObjectPositionDefault
} from '../browserSelectors';
import { ToggleButton as ToolboxToggleButton } from 'src/shared/components/toolbox'; import { ToggleButton as ToolboxToggleButton } from 'src/shared/components/toolbox';
import ViewInApp, { UrlObj } from 'src/shared/components/view-in-app/ViewInApp'; import ViewInApp, { UrlObj } from 'src/shared/components/view-in-app/ViewInApp';
...@@ -38,8 +34,6 @@ type Props = { ...@@ -38,8 +34,6 @@ type Props = {
const ZmenuAppLinks = (props: Props) => { const ZmenuAppLinks = (props: Props) => {
const genomeId = useSelector(getBrowserActiveGenomeId); const genomeId = useSelector(getBrowserActiveGenomeId);
const activeFeatureId = useSelector(getBrowserActiveEnsObjectId);
const isInDefaultPosition = useSelector(isFocusObjectPositionDefault);
const parsedFeatureId = parseFeatureId(props.featureId); const parsedFeatureId = parseFeatureId(props.featureId);
...@@ -52,33 +46,26 @@ const ZmenuAppLinks = (props: Props) => { ...@@ -52,33 +46,26 @@ const ZmenuAppLinks = (props: Props) => {
const getBrowserLink = () => const getBrowserLink = () =>
urlFor.browser({ genomeId, focus: featureIdForUrl }); urlFor.browser({ genomeId, focus: featureIdForUrl });
const getEntityViewerLink = () => const links: UrlObj = {
urlFor.entityViewer({ genomeBrowser: {
genomeId,
entityId: featureIdForUrl
});
const shouldShowBrowserButton =
props.featureId !== activeFeatureId || !isInDefaultPosition;
const links: UrlObj = {};
if (shouldShowBrowserButton) {
links['genomeBrowser'] = {
url: getBrowserLink(), url: getBrowserLink(),
replaceState: true replaceState: true
}; },
} entityViewer: {
url: urlFor.entityViewer({
links['entityViewer'] = { url: getEntityViewerLink() }; genomeId,
entityId: featureIdForUrl
})
}
};
return ( return (
<div className={styles.zmenuAppLinks}> <div className={styles.zmenuAppLinks}>
<ViewInApp links={links} />
<ToolboxToggleButton <ToolboxToggleButton
className={styles.zmenuToggleFooter} className={styles.zmenuToggleFooter}
openElement={<span>Download</span>} label="Download"
/> />
<ViewInApp links={links} />
</div> </div>
); );
}; };
......
@import 'src/styles/common'; @import 'src/styles/common';
$toggleButtonHeight: 14px;
.main { .main {
position: relative; position: relative;
} }
.toggleButton {
display: inline-block;
user-select: none;
cursor: pointer;
}
...@@ -25,7 +25,7 @@ import ToolboxExpandableContent, { ...@@ -25,7 +25,7 @@ import ToolboxExpandableContent, {
const MainContent = () => ( const MainContent = () => (
<div data-test-id="main content"> <div data-test-id="main content">
<span>This is main content</span> <span>This is main content</span>
<ToggleButton openElement={<span>Click me!</span>} /> <ToggleButton label="Click me!" />
</div> </div>
); );
const FooterContent = () => ( const FooterContent = () => (
...@@ -51,7 +51,7 @@ describe('<ToolboxExpandableContent />', () => { ...@@ -51,7 +51,7 @@ describe('<ToolboxExpandableContent />', () => {
render(<ToolboxExpandableContent {...minimalProps} />); render(<ToolboxExpandableContent {...minimalProps} />);
const toggleButton = screen.getByText('Click me!'); const toggleButton = screen.getByText('Click me!');
userEvent.click(toggleButton); userEvent.click(toggleButton as HTMLElement);
const footerContent = screen.queryByTestId('footer content'); const footerContent = screen.queryByTestId('footer content');
expect(footerContent).toBeTruthy(); expect(footerContent).toBeTruthy();
......
...@@ -15,10 +15,9 @@ ...@@ -15,10 +15,9 @@
*/ */
import React, { useState, useContext, ReactNode } from 'react'; import React, { useState, useContext, ReactNode } from 'react';
import classNames from 'classnames';
import noop from 'lodash/noop'; import noop from 'lodash/noop';
import CloseButton from 'src/shared/components/close-button/CloseButton'; import ShowHide from 'src/shared/components/show-hide/ShowHide';
import styles from './ToolboxExpandableContent.scss'; import styles from './ToolboxExpandableContent.scss';
...@@ -34,12 +33,11 @@ type ToolboxExpandableContentProps = { ...@@ -34,12 +33,11 @@ type ToolboxExpandableContentProps = {
type ToggleButtonProps = { type ToggleButtonProps = {
className?: string; className?: string;
openElement: ReactNode; label: string;
}; };
const ToolboxExpandableContentContext = React.createContext<ToolboxContext | null>( const ToolboxExpandableContentContext =
null React.createContext<ToolboxContext | null>(null);
);
const ToolboxExpandableContent = (props: ToolboxExpandableContentProps) => { const ToolboxExpandableContent = (props: ToolboxExpandableContentProps) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
...@@ -69,13 +67,12 @@ export const ToggleButton = (props: ToggleButtonProps) => { ...@@ -69,13 +67,12 @@ export const ToggleButton = (props: ToggleButtonProps) => {
toggleExpanded(); toggleExpanded();
}; };
const buttonClasses = classNames(styles.toggleButton, props.className); return (
return isExpanded ? ( <ShowHide
<CloseButton className={buttonClasses} onClick={handleClick} /> label={props.label}
) : ( onClick={handleClick}
<span className={buttonClasses} onClick={handleClick}> isExpanded={isExpanded}
{props.openElement} />
</span>
); );
}; };
......
...@@ -18,10 +18,6 @@ ...@@ -18,10 +18,6 @@
margin-left: 1em; margin-left: 1em;
float: right; float: right;
} }
.download {
color: $blue;
font-size: 12px;
}
} }
.mainToolboxContent, .mainToolboxContent,
......
...@@ -32,15 +32,13 @@ export const DefaultStory = () => { ...@@ -32,15 +32,13 @@ export const DefaultStory = () => {
setIsShowing(!isShowing); setIsShowing(!isShowing);
}; };
const downloadElement = <span className={styles.download}>Download</span>;
const mainToolboxContent = ( const mainToolboxContent = (
<div className={styles.mainToolboxContent}> <div className={styles.mainToolboxContent}>
<p>This is main toolbox content</p> <p>This is main toolbox content</p>
<p> <p>
This is the second paragraph This is the second paragraph
<span className={styles.toggleButton}> <span className={styles.toggleButton}>
<ToolboxToggleButton openElement={downloadElement} /> <ToolboxToggleButton label="Download" />
</span> </span>
</p> </p>
</div> </div>
......
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