IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: components: added custom scrollbar to layout aside

Browse Source
This commit is contained in:
Andrey Savihin 2019-07-16 13:00:29 +03:00
parent 95ee3436d3
commit b6d9fc3964
2 changed files with 13 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/ASC.Web.Components/src/components/layout/sub-components/aside.js
View File

@ -1,5 +1,6 @@
import React from 'react'
import styled from 'styled-components'
import { Scrollbars } from 'react-custom-scrollbars';
const StyledAside = styled.aside`
background-color: #fff;
@ -15,6 +16,14 @@ const StyledAside = styled.aside`
z-index: 400;
`;
const Aside = props => <StyledAside {...props}/>
const renderAsideThumbVertical = ({ style, ...props }) =>
<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.1)', width: '2px', marginLeft: '2px', borderRadius: 'inherit'}}/>
const Aside = props => <StyledAside visible={props.visible}>
<Scrollbars
renderThumbVertical={renderAsideThumbVertical}
{...props}
/>
</StyledAside>
export default Aside;

6
web/ASC.Web.Storybook/stories/layout/index.stories.js
View File

@ -86,11 +86,11 @@ const currentModuleId = '44444444-4444-4444-4444-444444444444';
const onLogoClick = (e) => {action('Logo Clicked')(e)};
const asideContent = <p style={{padding: 40}}>Aside Content</p>;
const asideContent = <p style={{padding: '200px 40px'}}>Aside Content</p>;
const articleHeaderContent = "Article Header";
const articleBodyContent = <p style={{padding: 40}}>Article Content</p>;
const articleBodyContent = <p style={{padding: '200px 40px'}}>Article Content</p>;
const sectionHeaderContent = "Section Header";
const sectionBodyContent = <p style={{padding: 40}}>Section Content</p>;
const sectionBodyContent = <p style={{padding: '200px 40px'}}>Section Content</p>;
storiesOf('Components|Layout', module)
.add('Layout', () => (