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