Unverified Commit 51c4899d authored by Jyothish's avatar Jyothish Committed by GitHub
Browse files

Reposition download (#498)

parent 4c8132af
Pipeline #159455 passed with stages
in 5 minutes and 35 seconds
......@@ -2,19 +2,19 @@
.listItemInfo {
color: $grey;
line-height: 2;
padding-top: 0;
}
.middle {
display: grid;
grid-template-areas:
'left middle right .'
'. . . downloadLink'
'download download download download';
'left middle right'
'moreinformation . .'
'downloadLink . .'
'download download download';
grid-column-gap: 10px;
background: $soft-black;
padding: 15px 20px;
padding: 15px 30px;
strong {
color: $white;
......@@ -30,40 +30,52 @@
.topLeft {
grid-area: left;
width: 190px;
div {
padding-bottom: 6px;
}
}
.topMiddle {
grid-area: middle;
width: 150px;
div {
padding-bottom: 6px;
}
}
.topRight {
grid-area: right;
width: 210px;
div {
padding-bottom: 6px;
}
}
.moreInformation {
padding-top: 16px;
}
.downloadLink {
grid-area: downloadLink;
color: $blue;
width: 66px;
height: 16px;
text-align: right;
line-height: 1;
span {
cursor: pointer;
}
cursor: pointer;
padding-top: 6px;
}
.download {
grid-area: download;
padding-top: 15px;
margin-top: 15px;
border-top: 1px solid $dark-grey;
padding-top: 6px;
}
.closeButton {
display: inline-block;
.chevron {
margin-left: 10px;
margin-bottom: -3px;
height: 12px;
width: 12px;
transition: transform linear 0.2s;
&Up {
transform: rotate(-180deg);
}
}
.viewInApp {
......
......@@ -64,9 +64,11 @@ describe('<TranscriptsListItemInfo /', () => {
const { container } = renderComponent();
const expectedProteinLength =
defaultProps.transcript.product_generating_contexts[0].product?.length;
expect(container.querySelector('.topMiddle strong')?.textContent).toMatch(
`${expectedProteinLength}`
);
const currentProteinLength = container
.querySelector('.topMiddle strong')
?.textContent?.split(/\s/)[0]
?.replace(/,/g, '');
expect(currentProteinLength).toMatch(`${expectedProteinLength}`);
});
it('contains the download link', () => {
......
......@@ -35,7 +35,6 @@ import { buildFocusIdForUrl } from 'src/shared/state/ens-object/ensObjectHelpers
import { InstantDownloadTranscript } from 'src/shared/components/instant-download';
import ViewInApp from 'src/shared/components/view-in-app/ViewInApp';
import CloseButton from 'src/shared/components/close-button/CloseButton';
import { toggleTranscriptDownload } from 'src/content/app/entity-viewer/state/gene-view/transcripts/geneViewTranscriptsSlice';
import { clearExpandedProteins } from 'src/content/app/entity-viewer/state/gene-view/proteins/geneViewProteinsSlice';
......@@ -49,6 +48,8 @@ import { View } from 'src/content/app/entity-viewer/state/gene-view/view/geneVie
import transcriptsListStyles from '../DefaultTranscriptsList.scss';
import styles from './TranscriptsListItemInfo.scss';
import { ReactComponent as ChevronDown } from 'static/img/shared/chevron-down.svg';
type Gene = Pick<FullGene, 'unversioned_stable_id' | 'stable_id'>;
type Transcript = Pick<
FullTranscript,
......@@ -106,6 +107,10 @@ export const TranscriptsListItemInfo = (
getSplicedRNALength(transcript)
);
const aminoAcidLength = getCommaSeparatedNumber(
getProductAminoAcidLength(transcript)
);
const mainStyles = classNames(transcriptsListStyles.row, styles.listItemInfo);
const midStyles = classNames(transcriptsListStyles.middle, styles.middle);
......@@ -133,6 +138,11 @@ export const TranscriptsListItemInfo = (
const { genomeId } = params;
return urlFor.browser({ genomeId: genomeId, focus: focusIdForUrl });
};
const chevronClassForDownload = classNames(styles.chevron, {
[styles.chevronUp]: props.expandDownload
});
return (
<div className={mainStyles}>
<div className={transcriptsListStyles.left}></div>
......@@ -147,7 +157,7 @@ export const TranscriptsListItemInfo = (
{isProteinCodingTranscript(transcript) && (
<>
<div>
<strong>{getProductAminoAcidLength(transcript)} aa</strong>
<strong>{aminoAcidLength} aa</strong>
</div>
{getLinkToProteinView(
transcript.product_generating_contexts[0]?.product.stable_id
......@@ -164,23 +174,15 @@ export const TranscriptsListItemInfo = (
of {transcript.spliced_exons.length}
</div>
</div>
<div className={styles.downloadLink}>
{props.expandDownload ? (
<CloseButton
className={styles.closeButton}
onClick={() =>
props.toggleTranscriptDownload(transcript.stable_id)
}
/>
) : (
<span
onClick={() =>
props.toggleTranscriptDownload(transcript.stable_id)
}
>
Download
</span>
)}
<div className={styles.moreInformation}>More information</div>
<div
className={styles.downloadLink}
onClick={() => props.toggleTranscriptDownload(transcript.stable_id)}
>
Download
<ChevronDown className={chevronClassForDownload} />
</div>
{props.expandDownload && renderInstantDownload({ ...props, genomeId })}
</div>
......
......@@ -3,7 +3,7 @@
.checkboxGrid {
margin-top: 0.5em;
display: grid;
grid-template-columns: 1.5fr 1fr;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
grid-row-gap: 0.2em;
}
......@@ -15,7 +15,7 @@
.featureId {
margin-left: 0.5em;
font-weight: $bold;
font-weight: $normal;
}
}
......@@ -29,11 +29,6 @@
border-color: $dark-grey;
}
.checkboxLabel {
font-size: 13px;
}
.themeDark{
.label {
color: $white;
......@@ -62,31 +57,34 @@
.layout {
display: grid;
font-size: 13px;
&Horizontal {
grid-template-columns: 1fr 1fr;
grid-column-gap: 24px;
grid-column-gap: 10px;
grid-template-areas:
'transcript gene'
'transcript download';
margin-bottom: 12px;
.transcriptSection {
grid-area: transcript;
width: 393px;
}
.geneSection {
grid-area: gene;
.checkboxWrapper {
margin-top: 13px;
margin-left: 13px;
margin-left: 6px;
}
}
.transcriptVis,
.transcriptVis {
margin-left: 12px;
}
.checkboxGrid {
margin-left: 18px;
padding-left: 6px;
}
button {
......
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