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

web: components: added styles to custom scrollbars

Browse Source
This commit is contained in:
Andrey Savihin 2019-07-16 12:36:39 +03:00
parent 59d9d723ba
commit 95ee3436d3
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/ASC.Web.Components/src/components/layout/sub-components/nav.js
View File

@ -22,8 +22,15 @@ const StyledNav = styled.nav`
}
`;
const renderNavThumbVertical = ({ style, ...props }) =>
<div {...props} style={{ ...style, backgroundColor: 'rgba(256, 256, 256, 0.2)', width: '2px', marginLeft: '2px', borderRadius: 'inherit'}}/>
const Nav = props => <StyledNav opened={props.opened}>
<Scrollbars style={{ width: props.opened ? 240 : 56 }} {...props}/>
<Scrollbars
renderThumbVertical={renderNavThumbVertical}
style={{ width: props.opened ? 240 : 56 }}
{...props}
/>
</StyledNav>
export default Nav;

10
web/ASC.Web.Components/src/components/page-layout/index.js
View File

@ -125,6 +125,12 @@ const StyledSectionPagingPanel = styled.div`
}
`;
const renderArticleThumbVertical = ({ style, ...props }) =>
<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.1)', width: '2px', marginLeft: '2px', borderRadius: 'inherit'}}/>
const renderSectionThumbVertical = ({ style, ...props }) =>
<div {...props} style={{ ...style, backgroundColor: 'rgba(0, 0, 0, 0.1)', width: '6px', borderRadius: 'inherit'}}/>
class PageLayout extends React.Component {
constructor(props) {
super(props);
@ -224,7 +230,7 @@ class PageLayout extends React.Component {
{
this.state.isArticleBodyAvailable &&
<StyledArticleBody>
<Scrollbars>
<Scrollbars renderThumbVertical={renderArticleThumbVertical}>
{this.state.articleBodyContent}
</Scrollbars>
</StyledArticleBody>
@ -257,7 +263,7 @@ class PageLayout extends React.Component {
{
this.state.isSectionBodyAvailable &&
<StyledSectionBody>
<Scrollbars>
<Scrollbars renderThumbVertical={renderSectionThumbVertical}>
{this.state.sectionBodyContent}
</Scrollbars>
</StyledSectionBody>