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

themable colors

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-11 18:30:44 +01:00
parent 98d7b3c6b9
commit 4ef7f275e6
8 changed files with 84 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/web/src/Screen.js
View File

@@ -99,6 +99,10 @@ const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`
bottom: ${dimensions.statusBar.height}px;
`;
// const StyledRoot = styled.div`
// // color: ${(props) => props.theme.fontColor};
// `;
export default function Screen() {
const theme = useTheme();
const currentWidget = useCurrentWidget();

4
packages/web/src/TabsPanel.js
View File

@@ -47,7 +47,7 @@ const DbNameWrapper = styled.div`
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? props.theme.mainAreaBackground : 'inherit'};
props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
`;
// const DbNameWrapperInner = styled.div`
@@ -71,7 +71,7 @@ const FileTabItem = styled.div`
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? props.theme.mainAreaBackground : 'inherit'};
props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
`;
const FileNameWrapper = styled.span`

12
packages/web/src/datagrid/DataGridCore.js
View File

@@ -29,6 +29,7 @@ import ErrorInfo from '../widgets/ErrorInfo';
import { openNewTab } from '../utility/common';
import { useSetOpenedTabs } from '../utility/globalState';
import { FontIcon } from '../icons';
import useTheme from '../theme/useTheme';
const GridContainer = styled.div`
position: absolute;
@@ -69,7 +70,7 @@ const TableHeaderCell = styled.td`
padding: 0;
// padding: 2px;
margin: 0;
background-color: #f6f7f9;
background-color: ${(props) => props.theme.gridHeaderBackground};
overflow: hidden;
`;
const TableFilterCell = styled.td`
@@ -88,7 +89,7 @@ const FocusField = styled.input`
const RowCountLabel = styled.div`
position: absolute;
background-color: lightgoldenrodyellow;
background-color: ${(props) => props.theme.gridRowCountLabel};
right: 40px;
bottom: 20px;
`;
@@ -269,6 +270,8 @@ export default function DataGridCore(props) {
}
}, [stableStringify(display && display.groupColumns)]);
const theme = useTheme();
const rowCountInfo = React.useMemo(() => {
if (selectedCells.length > 1 && selectedCells.every((x) => _.isNumber(x[0]) && _.isNumber(x[1]))) {
let sum = _.sumBy(selectedCells, (cell) => {
@@ -942,9 +945,10 @@ export default function DataGridCore(props) {
>
<TableHead>
<TableHeaderRow ref={headerRowRef}>
<TableHeaderCell data-row="header" data-col="header" />
<TableHeaderCell data-row="header" data-col="header" theme={theme} />
{visibleRealColumns.map((col) => (
<TableHeaderCell
theme={theme}
data-row="header"
data-col={col.colIndex}
key={col.uniqueName}
@@ -1036,7 +1040,7 @@ export default function DataGridCore(props) {
onScroll={handleRowScroll}
viewportRatio={visibleRowCountUpperBound / grider.rowCount}
/>
{allRowCount && <RowCountLabel>{rowCountInfo}</RowCountLabel>}
{allRowCount && <RowCountLabel theme={theme}>{rowCountInfo}</RowCountLabel>}
{props.toolbarPortalRef &&
props.toolbarPortalRef.current &&
tabVisible &&

46
packages/web/src/datagrid/DataGridRow.js
View File

@@ -3,14 +3,14 @@ import moment from 'moment';
import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
import { findExistingChangeSetItem } from '@dbgate/datalib';
import InplaceEditor from './InplaceEditor';
import { cellIsSelected } from './gridutil';
import { isTypeLogical } from '@dbgate/tools';
import useTheme from '../theme/useTheme';
const TableBodyCell = styled.td`
font-weight: normal;
border: 1px solid #c0c0c0;
border: 1px solid ${(props) => props.theme.border};
// border-collapse: collapse;
padding: 2px;
white-space: nowrap;
@@ -22,22 +22,21 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
`
background: initial;
background-color: deepskyblue;
color: white;`}
background-color: ${props.theme.gridSelectionBackground};
color: ${props.theme.gridSelectionFont};`}
${(props) =>
props.isFrameSelected &&
`
outline: 3px solid cyan;
outline: 3px solid ${props.theme.gridSelectionBackground};
outline-offset: -3px;`}
${(props) =>
props.isAutofillSelected &&
!props.isFocusedColumn &&
`
background: initial;
background-color: magenta;
color: white;`}
outline: 3px solid ${props.theme.gridSelectionBackground};
outline-offset: -3px;`}
${(props) =>
props.isModifiedRow &&
@@ -47,7 +46,7 @@ const TableBodyCell = styled.td`
!props.isModifiedCell &&
!props.isFocusedColumn &&
`
background-color: #FFFFDB;`}
background-color: ${props.theme.gridModifiedRowBackground};`}
${(props) =>
!props.isSelected &&
!props.isAutofillSelected &&
@@ -55,7 +54,7 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isModifiedCell &&
`
background-color: bisque;`}
background-color: ${props.theme.gridModifiedCellBackground};`}
${(props) =>
!props.isSelected &&
@@ -63,7 +62,7 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isInsertedRow &&
`
background-color: #DBFFDB;`}
background-color: ${props.theme.gridInsertedRowBackground};`}
${(props) =>
!props.isSelected &&
@@ -71,13 +70,13 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isDeletedRow &&
`
background-color: #FFDBFF;
background-color: ${props.theme.gridDeletedRowBackground};
`}
${(props) =>
props.isFocusedColumn &&
`
background-color: lightgoldenrodyellow;
background-color: ${props.theme.gridFocusedColumnBackground};
`}
${(props) =>
@@ -100,27 +99,27 @@ const NullSpan = styled.span`
const TableBodyRow = styled.tr`
// height: 35px;
background-color: #ffffff;
background-color: ${(props) => props.theme.gridRowBackground};
&:nth-child(6n + 3) {
background-color: #ebebeb;
background-color: ${(props) => props.theme.gridRowBackground2};
}
&:nth-child(6n + 6) {
background-color: #ebf5ff;
background-color: ${(props) => props.theme.gridRowBackground3};
}
`;
const TableHeaderCell = styled.td`
border: 1px solid #c0c0c0;
border: 1px solid ${(props) => props.theme.border};
text-align: left;
padding: 2px;
background-color: #f6f7f9;
background-color: ${(props) => props.theme.gridHeaderBackground};
overflow: hidden;
`;
const AutoFillPoint = styled.div`
width: 8px;
height: 8px;
background-color: #1a73e8;
background-color: ${(props) => props.theme.gridAutoFillBackground};
position: absolute;
right: 0px;
bottom: 0px;
@@ -201,6 +200,8 @@ function DataGridRow(props) {
// console.log('RENDER ROW', rowIndex);
const theme = useTheme();
const rowData = grider.getRowData(rowIndex);
const rowStatus = grider.getRowStatus(rowIndex);
@@ -215,13 +216,14 @@ function DataGridRow(props) {
if (!rowData) return null;
return (
<TableBodyRow style={{ height: `${rowHeight}px` }}>
<TableHeaderCell data-row={rowIndex} data-col="header">
<TableBodyRow style={{ height: `${rowHeight}px` }} theme={theme}>
<TableHeaderCell data-row={rowIndex} data-col="header" theme={theme}>
{rowIndex + 1}
</TableHeaderCell>
{visibleRealColumns.map((col) => (
<TableBodyCell
key={col.uniqueName}
theme={theme}
style={{
width: col.widthPx,
minWidth: col.widthPx,
@@ -261,7 +263,7 @@ function DataGridRow(props) {
</>
)}
{autofillMarkerCell && autofillMarkerCell[1] == col.colIndex && autofillMarkerCell[0] == rowIndex && (
<AutoFillPoint className="autofillHandleMarker"></AutoFillPoint>
<AutoFillPoint className="autofillHandleMarker" theme={theme}></AutoFillPoint>
)}
</TableBodyCell>
))}

31
packages/web/src/theme/light.js
View File

@@ -1,8 +1,10 @@
export default {
background: '#222',
iconFontColor: '#eee',
backgroundHover: '#555',
backgroundSelected: '#4CAF50',
border: '#ccc',
mainAreaBackground: '#eee',
mainFont: 'black',
mainFontGray: 'gray',
mainFontActive: 'blue',
leftPanelBackground: '#ccc',
@@ -10,11 +12,28 @@ export default {
widgetIconFontColor: '#eee',
widgetBackgroundHover: '#555',
widgetBackgroundSelected: '#4CAF50',
widgetTitleBackground: 'gray',
tabsPanelBackground: '#ccc',
tabsPanelBackground: '#ddd',
tabsPanelBackgroundHover: '#ccc',
tabsPanelBackgroundHoverClick: '#aaa',
tabsPanelSelectedBackground: '#eee',
tabsPanelHoverFont: '#338',
statusBarBackground: '#00c',
toolBarBackground: '#eee',
mainAreaBackground: '#eee',
gridHeaderBackground: '#f6f7f9',
gridRowCountLabel: 'lightgoldenrodyellow',
gridSelectionBackground: 'deepskyblue',
gridSelectionFont: 'white',
gridModifiedRowBackground: '#FFFFDB',
gridModifiedCellBackground: 'bisque',
gridInsertedRowBackground: '#DBFFDB',
gridDeletedRowBackground: '#FFDBFF',
gridFocusedColumnBackground: 'lightgoldenrodyellow',
gridRowBackground: '#ffffff',
gridRowBackground2: '#ebebeb',
gridRowBackground3: '#ebf5ff',
gridAutoFillBackground: '#1a73e8',
};

6
packages/web/src/themes/ThemeHelmet.js
View File

@@ -1,7 +1,9 @@
import React from 'react';
import { Helmet } from 'react-helmet';
import useTheme from '../theme/useTheme';
export default function ThemeHelmet() {
const theme = useTheme();
return (
<Helmet>
<style>{`
@@ -14,6 +16,10 @@ export default function ThemeHelmet() {
.color-magenta-icon { color: #808 }
.color-yellow-icon { color: #880 }
.color-green-icon { color: #0A3; }
body {
color: ${theme.mainFont};
}
`}</style>
</Helmet>
);

17
packages/web/src/widgets/ToolbarButton.js
View File

@@ -3,38 +3,39 @@ import React from 'react';
import styled from 'styled-components';
import { FontIcon } from '../icons';
import dimensions from '../theme/dimensions';
import useTheme from '../theme/useTheme';
const ButtonDiv = styled.div`
padding: 5px 15px;
// margin: 2px;
color: black;
color: ${(props) => props.theme.mainFont};
border: 0;
border-right: 1px solid #ccc;
border-right: 1px solid ${(props) => props.theme.border};
height: ${dimensions.toolBar.height}px;
${(props) =>
!props.disabled &&
`
&:hover {
background-color: #CCC;
background-color: ${props.theme.tabsPanelBackgroundHover} ;
}
&:active:hover {
background-color: #AAA;
background-color: ${props.theme.tabsPanelBackgroundHoverClick};
}
`}
${(props) =>
props.disabled &&
`
color: gray;
color: ${props.theme.mainFontGray};
`}
`;
const StyledIconSpan = styled.span`
margin-right: 5px;
// font-size: 18px;
color: ${(props) => (props.disabled ? 'gray' : 'blue')};
color: ${(props) => (props.disabled ? props.theme.mainFontGray : props.theme.mainFontActive)};
`;
const ButtonDivInner = styled.div`
@@ -44,8 +45,10 @@ const ButtonDivInner = styled.div`
`;
export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
const theme = useTheme();
return (
<ButtonDiv
theme={theme}
onClick={() => {
if (!disabled && onClick) onClick();
}}
@@ -53,7 +56,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
>
<ButtonDivInner patchY={patchY}>
{icon && (
<StyledIconSpan disabled={disabled}>
<StyledIconSpan disabled={disabled} theme={theme}>
<FontIcon icon={icon} />
</StyledIconSpan>
)}

8
packages/web/src/widgets/WidgetStyles.js
View File

@@ -1,6 +1,7 @@
// @ts-nocheck
import React from 'react';
import styled from 'styled-components';
import useTheme from '../theme/useTheme';
// import theme from '../theme';
import { useLeftPanelWidth } from '../utility/globalState';
@@ -62,14 +63,15 @@ const StyledWidgetTitle = styled.div`
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: gray;
border: 1px solid #aaa;
// background-color: #CEC;
background-color: ${(props) => props.theme.widgetTitleBackground};
border: 1px solid ${(props) => props.theme.border};
`;
export function WidgetTitle({ children, inputRef = undefined, onClick = undefined }) {
const theme = useTheme();
return (
<StyledWidgetTitle
theme={theme}
onClick={() => {
if (inputRef && inputRef.current) inputRef.current.focus();
if (onClick) onClick();