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