dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-19 23:35:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

theme

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-12 11:04:44 +01:00
parent c7b693cfb6
commit 7658a2838a
10 changed files with 79 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/web/src/widgets/Splitter.js
View File

@@ -3,6 +3,7 @@ import React from 'react';
import styled from 'styled-components';
import useDimensions from '../utility/useDimensions';
import dimensions from '../theme/dimensions';
import useTheme from '../theme/useTheme';
const SplitterMainBase = styled.div`
flex: 1;
@@ -27,20 +28,20 @@ const HorizontalMainContainer = styled(SplitterMainBase)`
`;
export const VerticalSplitHandle = styled.div`
background-color: #ccc;
height: ${dimensions.splitter.thickness}px;
background-color: ${(props) => props.theme.border};
height: ${dimensions.splitter.thickness}px;
cursor: row-resize;
&:hover {
background-color: #AAA;
background-color: #aaa;
}
`;
export const HorizontalSplitHandle = styled.div`
background-color: #ccc;
background-color: ${(props) => props.theme.border};
width: ${dimensions.splitter.thickness}px;
cursor: col-resize;
&:hover {
background-color: #AAA;
background-color: #aaa;
}
`;
@@ -107,6 +108,7 @@ function SplitterCore({
size = undefined,
setSize = undefined,
}) {
const theme = useTheme();
const childrenArray = _.isArray(children) ? children : [children];
if (childrenArray.length !== 1 && childrenArray.length != 2) {
throw new Error('Splitter must have 1 or 2 children');
@@ -130,7 +132,7 @@ function SplitterCore({
return (
<Main ref={refNode}>
<ChildContainer1 style={isSplitter ? { [styleField]: size1 } : { flex: '1' }}>{childrenArray[0]}</ChildContainer1>
{isSplitter && <Handle onMouseDown={handleResizeDown} />}
{isSplitter && <Handle onMouseDown={handleResizeDown} theme={theme} />}
{isSplitter && <ChildContainer2>{childrenArray[1]}</ChildContainer2>}
</Main>
);