Unverified Commit a1c40c90 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub

Update StandardAppLayout (#351)

Also, fixed extra width bug in EntityViewer transcripts view
that was caused by moving transcript-wrapping divs via `transform: translate`
parent 6122caa1
Pipeline #100948 passed with stages
in 12 minutes and 38 seconds
......@@ -2,7 +2,6 @@
.browserInnerWrapper {
display: grid;
height: 100%;
grid-template-rows: 80px 1fr;
}
......
......@@ -46,7 +46,6 @@ import GeneViewSidebarTabs from './gene-view/components/gene-view-sidebar-tabs/G
import { RootState } from 'src/store';
import { SidebarStatus } from 'src/content/app/entity-viewer/state/sidebar/entityViewerSidebarState';
import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
import styles from './EntityViewer.scss';
......@@ -101,7 +100,6 @@ const EntityViewer = (props: Props) => {
sidebarContent={<GeneViewSideBar />}
sidebarNavigation={<GeneViewSidebarTabs />}
sidebarToolstripContent={<EntityViewerSidebarToolstrip />}
sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
isSidebarOpen={props.isSidebarOpen}
onSidebarToggle={props.toggleSidebar}
isDrawerOpen={false}
......
......@@ -20,8 +20,7 @@ $backgroundColor: $black;
padding: 60px 20px 10px;
height: 100%; // may need to change this later
width: 100%;
overflow-y: auto;
overflow-x: hidden;
overflow: auto;
}
.featureImage {
......@@ -33,6 +32,7 @@ $backgroundColor: $black;
display: grid;
grid-template-rows: 1fr 1fr;
align-items: end;
padding-right: 30px;
}
.geneViewTabs {
......
......@@ -12,6 +12,14 @@
cursor: pointer;
}
.clickableTranscriptArea {
cursor: pointer;
}
.transcriptWrapper {
display: inline-block;
}
.defaultTranscriptLabel {
display: flex;
justify-content: flex-end;
......
......@@ -67,7 +67,7 @@ describe('<DefaultTranscriptListItem />', () => {
it('toggles transcript item info onClick', () => {
wrapper = renderComponent();
wrapper.find('.middle').simulate('click');
wrapper.find('.clickableTranscriptArea').simulate('click');
expect(toggleTranscriptInfo).toHaveBeenCalledTimes(1);
wrapper.find('.right').simulate('click');
expect(toggleTranscriptInfo).toHaveBeenCalledTimes(2);
......
......@@ -60,10 +60,6 @@ export const DefaultTranscriptListItem = (
);
const transcriptStartX = scale(transcriptStart - geneStart); // FIXME In future, this should be done using relative position of transcript in gene
const transcriptWidth = scale(transcriptEnd - transcriptStart); // FIXME this too should be based on relative coordinates of transcript
const style = {
transform: `translateX(${transcriptStartX}px)`,
cursor: 'pointer'
};
const defaultTranscriptLabelMap = {
selected: {
......@@ -86,16 +82,21 @@ export const DefaultTranscriptListItem = (
/>
</div>
)}
<div
className={transcriptsListStyles.middle}
onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
>
<div style={style}>
<UnsplicedTranscript
transcript={props.transcript}
width={transcriptWidth}
standalone={true}
/>
<div className={transcriptsListStyles.middle}>
<div
className={styles.clickableTranscriptArea}
onClick={() => props.toggleTranscriptInfo(props.transcript.id)}
>
<div
className={styles.transcriptWrapper}
style={{ transform: `translateX(${transcriptStartX}px)` }}
>
<UnsplicedTranscript
transcript={props.transcript}
width={transcriptWidth}
standalone={true}
/>
</div>
</div>
</div>
<div
......
@import 'src/styles/common';
.fullWidthPanel {
width: 100%;
height: 100%;
}
.narrowPanel {
width: calc(100% - 320px);
height: 100%;
.panel {
width: initial;
min-height: 100%;
}
.panelBody {
......
......@@ -124,7 +124,7 @@ const GeneFunction = (props: Props) => {
<Panel
header={<TabWrapper />}
classNames={{
panel: props.isNarrow ? styles.narrowPanel : styles.fullWidthPanel,
panel: styles.panel,
body: styles.panelBody
}}
>
......
@import 'src/styles/common';
.fullWidthPanel {
width: 100%;
height: 100%;
}
.narrowPanel {
width: calc(100% - 320px);
height: 100%;
.panel {
width: initial;
min-height: 100%;
}
.panelBody {
......
......@@ -111,7 +111,7 @@ const GeneRelationships = (props: Props) => {
<Panel
header={<TabWrapper />}
classNames={{
panel: props.isSidebarOpen ? styles.narrowPanel : styles.fullWidthPanel,
panel: styles.panel,
body: styles.panelBody
}}
>
......
......@@ -91,7 +91,7 @@ const UnsplicedTranscript = (props: UnsplicedTranscriptProps) => {
return props.standalone ? (
<svg
className={styles.containerSvg}
width={props.width}
width={scale(length)}
height={BLOCK_HEIGHT}
>
{renderedTranscript}
......
......@@ -29,10 +29,7 @@ import { isSidebarOpen } from 'src/content/app/species/state/sidebar/speciesSide
import { toggleSidebar } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
import SpeciesAppBar from './components/species-app-bar/SpeciesAppBar';
import {
StandardAppLayout,
SidebarBehaviourType
} from 'src/shared/components/layout';
import { StandardAppLayout } from 'src/shared/components/layout';
import SpeciesMainView from 'src/content/app/species/components/species-main-view/SpeciesMainView';
import { RootState } from 'src/store';
......@@ -71,7 +68,6 @@ const SpeciesPage = () => {
sidebarContent={sidebarContent}
sidebarNavigation={sidebarNavigationContent}
topbarContent={topbarContent}
sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
isSidebarOpen={sidebarStatus}
onSidebarToggle={() => {
dispatch(toggleSidebar());
......
@import 'src/styles/common';
$headerHeight: 79px; // launchbar height + topbar height
$appbarHeight: 80px;
$availableScreenHeight: calc(100vh - #{$headerHeight} - #{$appbarHeight});
$sidebarContentWidth: 320px;
$sidebarToolstripWidth: 46px;
$topbarHeight: 38px;
$drawerWindowWidth: 45px;
.standardAppLayout {
height: calc(100vh - 159px);
height: $availableScreenHeight;
min-height: 550px; // based on the current interface of genome browser
overflow: hidden;
}
......@@ -44,6 +47,7 @@ $drawerWindowWidth: 45px;
.main {
height: 100%;
overflow: auto;
&Default {
margin-right: calc(#{$sidebarContentWidth} + #{$sidebarToolstripWidth});
......
......@@ -18,7 +18,7 @@ import React from 'react';
import { mount, render } from 'enzyme';
import faker from 'faker';
import StandardAppLayout, { SidebarBehaviourType } from './StandardAppLayout';
import StandardAppLayout from './StandardAppLayout';
import { BreakpointWidth } from 'src/global/globalConfig';
......@@ -98,13 +98,20 @@ describe('StandardAppLayout', () => {
).toBe(1);
});
it('does not change main area styles when sidebar slides over it', () => {
const props = {
...minimalProps,
sidebarBehaviour: SidebarBehaviourType.SLIDEOVER
};
const wrapper = render(<StandardAppLayout {...props} />);
const mainContent = wrapper.find('.main');
it('applies correct classes to the main section depending on whether sidebar is open', () => {
// sidebar is open; main section is narrower
let wrapper, mainContent;
wrapper = render(<StandardAppLayout {...minimalProps} />);
mainContent = wrapper.find('.main');
expect(mainContent.hasClass('mainDefault')).toBe(true);
expect(mainContent.hasClass('mainFullWidth')).toBe(false);
// sidebar is closed; main section is wider
wrapper = render(
<StandardAppLayout {...minimalProps} isSidebarOpen={false} />
);
mainContent = wrapper.find('.main');
expect(mainContent.hasClass('mainDefault')).toBe(false);
expect(mainContent.hasClass('mainFullWidth')).toBe(true);
});
......
......@@ -31,11 +31,6 @@ enum SidebarModeToggleAction {
CLOSE = 'close'
}
export enum SidebarBehaviourType {
PUSH = 'push',
SLIDEOVER = 'slideover'
}
type SidebarModeToggleProps = {
onClick: () => void;
showAction: SidebarModeToggleAction;
......@@ -47,7 +42,6 @@ type StandardAppLayoutProps = {
sidebarToolstripContent?: ReactNode;
sidebarNavigation: ReactNode;
topbarContent: ReactNode;
sidebarBehaviour: SidebarBehaviourType;
isSidebarOpen: boolean;
onSidebarToggle: () => void;
isDrawerOpen: boolean;
......@@ -67,16 +61,7 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
const mainClassNames = classNames(
styles.main,
{
[styles.mainDefault]:
props.isSidebarOpen &&
props.sidebarBehaviour === SidebarBehaviourType.PUSH
},
{
[styles.mainFullWidth]:
!props.isSidebarOpen ||
props.sidebarBehaviour === SidebarBehaviourType.SLIDEOVER
}
props.isSidebarOpen ? styles.mainDefault : styles.mainFullWidth
);
const shouldShowSidebarNavigation =
......@@ -133,7 +118,6 @@ const StandardAppLayout = (props: StandardAppLayoutProps) => {
StandardAppLayout.defaultProps = {
isDrawerOpen: false,
sidebarBehaviour: SidebarBehaviourType.PUSH,
onDrawerClose: noop
};
......
......@@ -14,7 +14,4 @@
* limitations under the License.
*/
export {
default as StandardAppLayout,
SidebarBehaviourType
} from './StandardAppLayout';
export { default as StandardAppLayout } from './StandardAppLayout';
......@@ -22,6 +22,10 @@ p {
background-color: rgba(0, 0, 0, 0.5);
}
&::-webkit-scrollbar-corner {
background-color: transparent;
}
&::-webkit-scrollbar:vertical {
width: 11px;
}
......
.wrapper {
height: 100vh;
padding: 50px 0 0;
height: calc(100vh - 2rem);
border: 2px solid black;
padding-top: calc(155px - 2rem);
}
.mainContent {
......@@ -40,3 +41,23 @@
background: rgba(255, 192, 203, 0.3);
height: 100%;
}
.overflowingContentWrapper {
width: 3000px;
height: 3000px;
}
.overflowingContentLabel {
padding: 50px;
}
.overflowingContentPlaceholder {
height: 100%;
background: repeating-linear-gradient(
45deg,
#606dbc,
#606dbc 10px,
#465298 10px,
#465298 20px
);
}
......@@ -22,7 +22,6 @@ import { StandardAppLayout } from 'src/shared/components/layout';
import { SecondaryButton } from 'src/shared/components/button/Button';
import styles from './Layout.stories.scss';
import { SidebarBehaviourType } from 'src/shared/components/layout/StandardAppLayout';
const TopbarContent = () => (
<div className={styles.topbarContent}>This is top bar content</div>
......@@ -86,9 +85,9 @@ const DrawerContent = () => (
const Wrapper = (props: {
isSidebarOpen: boolean;
isDrawerOpen?: boolean;
sidebarContent: ReactNode;
sidebarBehaviour?: SidebarBehaviourType;
mainContent?: ReactNode;
isDrawerOpen?: boolean;
drawerContent?: ReactNode;
onSidebarToggle: () => void;
onDrawerClose?: () => void;
......@@ -96,7 +95,7 @@ const Wrapper = (props: {
return (
<div className={styles.wrapper}>
<StandardAppLayout
mainContent={<MainContent />}
mainContent={props.mainContent || <MainContent />}
topbarContent={<TopbarContent />}
sidebarNavigation={<SidebarNavigation />}
sidebarToolstripContent={<SidebarToolstripContent />}
......@@ -156,23 +155,33 @@ export const WithDrawerStory = () => {
WithDrawerStory.storyName = 'with drawer';
export const SlideoveSidebarStory = () => {
export const OverflowingContentStory = () => {
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
const toggleSidebar = () => {
setIsSidebarOpen(!isSidebarOpen);
};
const mainContent = (
<div className={styles.overflowingContentWrapper}>
<div className={styles.overflowingContentLabel}>
Both my width and height are 3000px;
</div>
<div className={styles.overflowingContentPlaceholder} />
</div>
);
return (
<Wrapper
mainContent={mainContent}
isSidebarOpen={isSidebarOpen}
sidebarContent={<SidebarContentSimple />}
sidebarBehaviour={SidebarBehaviourType.SLIDEOVER}
onSidebarToggle={toggleSidebar}
/>
);
};
SlideoveSidebarStory.storyName = 'with slideover sidebar';
OverflowingContentStory.storyName = 'with overflowing content';
export default {
title: 'Components/Shared Components/Layout/StandardAppLayout'
......
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