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

theme

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-12 09:46:01 +01:00
parent 4ef7f275e6
commit c7b693cfb6
16 changed files with 386 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/package.json
View File

@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@ant-design/colors": "^5.0.0",
"@dbgate/datalib": "^0.1.0",
"@dbgate/engines": "^0.1.0",
"@dbgate/sqltree": "^0.1.0",

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

@@ -22,7 +22,7 @@ const BodyDiv = styled.div`
left: ${(props) => props.contentLeft}px;
bottom: ${dimensions.statusBar.height}px;
right: 0;
background-color: ${(props) => props.theme.mainAreaBackground};
background-color: ${(props) => props.theme.content_background};
`;
const ToolBarDiv = styled.div`
@@ -30,7 +30,7 @@ const ToolBarDiv = styled.div`
top: 0;
left: 0;
right: 0;
background-color: ${(props) => props.theme.toolBarBackground};
background-color: ${(props) => props.theme.toolbar_background};
height: ${dimensions.toolBar.height}px;
`;
@@ -40,7 +40,7 @@ const IconBar = styled.div`
left: 0;
bottom: ${dimensions.statusBar.height}px;
width: ${dimensions.widgetMenu.iconSize}px;
background-color: ${(props) => props.theme.widgetBackground};
background-color: ${(props) => props.theme.widget_background};
`;
const LeftPanel = styled.div`
@@ -48,7 +48,7 @@ const LeftPanel = styled.div`
top: ${dimensions.toolBar.height}px;
left: ${dimensions.widgetMenu.iconSize}px;
bottom: ${dimensions.statusBar.height}px;
background-color: ${(props) => props.theme.leftPanelBackground};
background-color: ${(props) => props.theme.left_background};
display: flex;
`;
@@ -59,7 +59,7 @@ const TabsPanelContainer = styled.div`
left: ${(props) => props.contentLeft}px;
height: ${dimensions.tabsPanel.height}px;
right: 0;
background-color: ${(props) => props.theme.tabsPanelBackground};
background-color: ${(props) => props.theme.tabs_background2};
border-top: 1px solid #ccc;
overflow-x: auto;

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

@@ -8,6 +8,7 @@ import { showMenu } from './modals/DropDownMenu';
import { getConnectionInfo } from './utility/metadataLoaders';
import { FontIcon } from './icons';
import useTheme from './theme/useTheme';
import usePropsCompare from './utility/usePropsCompare';
// const files = [
// { name: 'app.js' },
@@ -43,11 +44,11 @@ const DbNameWrapper = styled.div`
// height: 15px;
&:hover {
background-color: #aaa;
background-color: ${(props) => props.theme.tabs_background3};
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
props.selected ? props.theme.tabs_background1 : 'inherit'};
`;
// const DbNameWrapperInner = styled.div`
@@ -67,11 +68,11 @@ const FileTabItem = styled.div`
cursor: pointer;
user-select: none;
&:hover {
color: ${(props) => props.theme.tabsPanelHoverFont};
color: ${(props) => props.theme.tabs_font_hover};
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? props.theme.tabsPanelSelectedBackground : 'inherit'};
props.selected ? props.theme.tabs_background1 : 'inherit'};
`;
const FileNameWrapper = styled.span`
@@ -82,7 +83,7 @@ const CloseButton = styled(FontIcon)`
margin-left: 5px;
color: gray;
&:hover {
color: ${(props) => props.theme.tabsPanelHoverFont};
color: ${(props) => props.theme.tabs_font2};
}
`;

6
packages/web/src/celldata/CellDataView.js
View File

@@ -5,10 +5,11 @@ import ErrorInfo from '../widgets/ErrorInfo';
import styled from 'styled-components';
import { TextCellViewWrap, TextCellViewNoWrap } from './TextCellView';
import JsonCellView from './JsonCellDataView';
import useTheme from '../theme/useTheme';
const Toolbar = styled.div`
display: flex;
background: #ccc;
background: ${(props) => props.theme.toolbar_background};
align-items: center;
`;
@@ -53,6 +54,7 @@ function autodetect(selection, grider, value) {
export default function CellDataView({ selection, grider }) {
const [selectedFormatType, setSelectedFormatType] = React.useState('autodetect');
const theme = useTheme();
let value = null;
if (grider && selection.length == 1) {
const rowData = grider.getRowData(selection[0].row);
@@ -69,7 +71,7 @@ export default function CellDataView({ selection, grider }) {
return (
<MainWrapper>
<Toolbar>
<Toolbar theme={theme}>
Format:
<SelectField value={selectedFormatType} onChange={(e) => setSelectedFormatType(e.target.value)}>
<option value="autodetect">Autodetect - {autodetectFormat.title}</option>

6
packages/web/src/datagrid/DataGrid.js
View File

@@ -7,9 +7,10 @@ import { HorizontalSplitter } from '../widgets/Splitter';
import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
import CellDataView from '../celldata/CellDataView';
import { FreeTableGridDisplay } from '@dbgate/datalib';
import useTheme from '../theme/useTheme';
const LeftContainer = styled.div`
background-color: white;
background-color: ${(props) => props.theme.manager_background};
display: flex;
flex: 1;
`;
@@ -21,12 +22,13 @@ const DataGridContainer = styled.div`
export default function DataGrid(props) {
const { GridCore } = props;
const theme = useTheme();
const [managerSize, setManagerSize] = React.useState(0);
const [selection, setSelection] = React.useState([]);
const [grider, setGrider] = React.useState(null);
return (
<HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
<LeftContainer>
<LeftContainer theme={theme}>
<WidgetColumnBar>
<WidgetColumnBarItem title="Columns" name="columns" height={props.showReferences ? '40%' : '60%'}>
<ColumnManager {...props} managerSize={managerSize} />

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

@@ -70,7 +70,7 @@ const TableHeaderCell = styled.td`
padding: 0;
// padding: 2px;
margin: 0;
background-color: ${(props) => props.theme.gridHeaderBackground};
background-color: ${(props) => props.theme.gridheader_background};
overflow: hidden;
`;
const TableFilterCell = styled.td`
@@ -89,7 +89,7 @@ const FocusField = styled.input`
const RowCountLabel = styled.div`
position: absolute;
background-color: ${(props) => props.theme.gridRowCountLabel};
background-color: ${(props) => props.theme.gridbody_background_yellow[1]};
right: 40px;
bottom: 20px;
`;

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

@@ -22,20 +22,20 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
`
background: initial;
background-color: ${props.theme.gridSelectionBackground};
color: ${props.theme.gridSelectionFont};`}
background-color: ${props.theme.gridbody_selection[4]};
color: ${props.theme.gridbody_invfont1};`}
${(props) =>
props.isFrameSelected &&
`
outline: 3px solid ${props.theme.gridSelectionBackground};
outline: 3px solid ${props.theme.gridbody_selection[4]};
outline-offset: -3px;`}
${(props) =>
props.isAutofillSelected &&
!props.isFocusedColumn &&
`
outline: 3px solid ${props.theme.gridSelectionBackground};
outline: 3px solid ${props.theme.gridbody_selection[4]};
outline-offset: -3px;`}
${(props) =>
@@ -46,7 +46,7 @@ const TableBodyCell = styled.td`
!props.isModifiedCell &&
!props.isFocusedColumn &&
`
background-color: ${props.theme.gridModifiedRowBackground};`}
background-color: ${props.theme.gridbody_background_gold[1]};`}
${(props) =>
!props.isSelected &&
!props.isAutofillSelected &&
@@ -54,7 +54,7 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isModifiedCell &&
`
background-color: ${props.theme.gridModifiedCellBackground};`}
background-color: ${props.theme.gridbody_background_orange[1]};`}
${(props) =>
!props.isSelected &&
@@ -62,7 +62,7 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isInsertedRow &&
`
background-color: ${props.theme.gridInsertedRowBackground};`}
background-color: ${props.theme.gridbody_background_green[1]};`}
${(props) =>
!props.isSelected &&
@@ -70,13 +70,13 @@ const TableBodyCell = styled.td`
!props.isFocusedColumn &&
props.isDeletedRow &&
`
background-color: ${props.theme.gridDeletedRowBackground};
background-color: ${props.theme.gridbody_background_volcano[1]};
`}
${(props) =>
props.isFocusedColumn &&
`
background-color: ${props.theme.gridFocusedColumnBackground};
background-color: ${props.theme.gridbody_background_yellow[0]};
`}
${(props) =>
@@ -99,12 +99,12 @@ const NullSpan = styled.span`
const TableBodyRow = styled.tr`
// height: 35px;
background-color: ${(props) => props.theme.gridRowBackground};
background-color: ${(props) => props.theme.gridbody_background};
&:nth-child(6n + 3) {
background-color: ${(props) => props.theme.gridRowBackground2};
background-color: ${(props) => props.theme.gridbody_background_alt2};
}
&:nth-child(6n + 6) {
background-color: ${(props) => props.theme.gridRowBackground3};
background-color: ${(props) => props.theme.gridbody_background_alt3};
}
`;
@@ -112,14 +112,14 @@ const TableHeaderCell = styled.td`
border: 1px solid ${(props) => props.theme.border};
text-align: left;
padding: 2px;
background-color: ${(props) => props.theme.gridHeaderBackground};
background-color: ${(props) => props.theme.gridheader_background};
overflow: hidden;
`;
const AutoFillPoint = styled.div`
width: 8px;
height: 8px;
background-color: ${(props) => props.theme.gridAutoFillBackground};
background-color: ${(props) => props.theme.gridbody_selection[6]};
position: absolute;
right: 0px;
bottom: 0px;

152
packages/web/src/theme/colorUtil.js Normal file
View File

@@ -0,0 +1,152 @@
// https://css-tricks.com/using-javascript-to-adjust-saturation-and-brightness-of-rgb-colors/
export function hexToRgb(rgb) {
return (rgb = [rgb.substring(1, 3), rgb.substring(3, 5), rgb.substring(5, 7)].map((x) => parseInt(x, 16)));
}
function componentToHex(c) {
let num = Math.round(c);
if (num < 0) num = 0;
if (num > 255) num = 255;
var hex = num.toString(16);
return hex.length == 1 ? '0' + hex : hex;
}
export function rgbToHex(r, g, b) {
return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
export function getLightnessOfRGB(rgb) {
// First convert to an array of integers by removing the whitespace, taking the 3rd char to the 2nd last then splitting by ','
const rgbIntArray = hexToRgb(rgb);
// Get the highest and lowest out of red green and blue
const highest = Math.max(...rgbIntArray);
const lowest = Math.min(...rgbIntArray);
// Return the average divided by 255
return (highest + lowest) / 2 / 255;
}
export function saturateByTenth(rgb) {
const rgbIntArray = hexToRgb(rgb);
const grayVal = getLightnessOfRGB(rgb) * 255;
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
if (lowest.val === highest.val) {
return rgb;
}
const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
const maxChange = Math.min(255 - highest.val, lowest.val);
const changeAmount = Math.min(saturationRange / 10, maxChange);
const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
const returnArray = [];
returnArray[highest.index] = Math.round(highest.val + changeAmount);
returnArray[lowest.index] = Math.round(lowest.val - changeAmount);
returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
return `rgb(${[returnArray].join()})`;
}
function getLowestMiddleHighest(rgbIntArray) {
let highest = { val: -1, index: -1 };
let lowest = { val: Infinity, index: -1 };
rgbIntArray.map((val, index) => {
if (val > highest.val) {
highest = { val: val, index: index };
}
if (val < lowest.val) {
lowest = { val: val, index: index };
}
});
if (lowest.index === highest.index) {
lowest.index = highest.index + 1;
}
let middle = { index: 3 - highest.index - lowest.index };
middle.val = rgbIntArray[middle.index];
return [lowest, middle, highest];
}
export function lightenByTenth(rgb, ratio = 0.1) {
const rgbIntArray = hexToRgb(rgb);
// Grab the values in order of magnitude
// This uses the getLowestMiddleHighest function from the saturate section
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
if (lowest.val === 255) {
return rgb;
}
const returnArray = [];
// First work out increase on lower value
returnArray[lowest.index] = Math.round(lowest.val + Math.min(255 - lowest.val, 255 * ratio));
// Then apply to the middle and higher values
const increaseFraction = (returnArray[lowest.index] - lowest.val) / (255 - lowest.val);
returnArray[middle.index] = middle.val + (255 - middle.val) * increaseFraction;
returnArray[highest.index] = highest.val + (255 - highest.val) * increaseFraction;
// Convert the array back into an rgb string
return rgbToHex(...returnArray);
}
export function darkenByTenth(rgb, ratio = 0.1) {
// Our rgb to int array function again
const rgbIntArray = hexToRgb(rgb);
//grab the values in order of magnitude
//this uses the function from the saturate function
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
if (highest.val === 0) {
return rgb;
}
const returnArray = [];
returnArray[highest.index] = highest.val - Math.min(highest.val, 255 * ratio);
const decreaseFraction = (highest.val - returnArray[highest.index]) / highest.val;
returnArray[middle.index] = middle.val - middle.val * decreaseFraction;
returnArray[lowest.index] = lowest.val - lowest.val * decreaseFraction;
// Convert the array back into an rgb string
return rgbToHex(...returnArray);
}
export function desaturateByTenth(rgb) {
const rgbIntArray = hexToRgb(rgb);
//grab the values in order of magnitude
//this uses the getLowestMiddleHighest function from the saturate section
const [lowest, middle, highest] = getLowestMiddleHighest(rgbIntArray);
const grayVal = getLightnessOfRGB(rgb) * 255;
if (lowest.val === highest.val) {
return rgb;
}
const saturationRange = Math.round(Math.min(255 - grayVal, grayVal));
const maxChange = grayVal - lowest.val;
const changeAmount = Math.min(saturationRange / 10, maxChange);
const middleValueRatio = (grayVal - middle.val) / (grayVal - highest.val);
const returnArray = [];
returnArray[highest.index] = Math.round(highest.val - changeAmount);
returnArray[lowest.index] = Math.round(lowest.val + changeAmount);
returnArray[middle.index] = Math.round(grayVal + (returnArray[highest.index] - grayVal) * middleValueRatio);
return rgbToHex(...returnArray);
}
export function accentColor(rgb, index, ratio = 0.1) {
const rgbIntArray = hexToRgb(rgb);
const returnArray = rgbIntArray.map((v, i) => {
if (i == index) return v + 255 * ratio;
return v - 128 * ratio;
});
return rgbToHex(...returnArray);
}

90
packages/web/src/theme/fillTheme.js Normal file
View File

@@ -0,0 +1,90 @@
import _ from 'lodash';
import { accentColor, darkenByTenth, lightenByTenth } from './colorUtil';
import { generate, presetPalettes, presetDarkPalettes, presetPrimaryColors } from '@ant-design/colors';
function fillOne(theme, name, type, add, background, fontName, invFontName, changeLightFunc, fontPalettes) {
add[`${name}_font1`] = add[`${fontName}1`];
add[`${name}_font2`] = add[`${fontName}2`];
add[`${name}_font3`] = add[`${fontName}3`];
add[`${name}_invfont1`] = add[`${invFontName}1`];
add[`${name}_invfont2`] = add[`${invFontName}2`];
add[`${name}_invfont3`] = add[`${invFontName}3`];
// add[`${name}_fontDisabled`] = add.fontBlack3;
if (background) {
add[`${name}_background1`] = background;
add[`${name}_background2`] = changeLightFunc(add[`${name}_background1`]);
add[`${name}_background3`] = changeLightFunc(add[`${name}_background2`]);
}
for (const colorName in presetPrimaryColors) {
add[`${name}_font_${colorName}`] = fontPalettes[colorName];
if (background) {
add[`${name}_background_${colorName}`] = generate(presetPrimaryColors[colorName], {
theme: type,
backgroundColor: background,
});
add[`${name}_selection`] = generate(
theme.selectionAntName ? presetPrimaryColors[theme.selectionAntName] : theme.selectionBaseColor,
{
theme: type,
backgroundColor: background,
}
);
}
}
add[`${name}_font_hover`] = add[`${name}_font_geekblue`][8];
add[`${name}_font_link`] = add[`${name}_font_geekblue`][7];
if (background) {
add[`${name}_background_alt2`] = changeLightFunc(add[`${name}_background1`], 0.05);
add[`${name}_background_alt3`] = add[`${name}_background_geekblue`][0];
}
}
export default function fillTheme(theme) {
const add = {};
add.fontWhite1 = theme.fontWhite1 || '#FFFFFF';
add.fontWhite2 = theme.fontWhite2 || darkenByTenth(add.fontWhite1, 0.3);
add.fontWhite3 = theme.fontWhite3 || darkenByTenth(add.fontWhite2, 0.2);
add.fontBlack1 = theme.fontBlack1 || '#000000';
add.fontBlack2 = theme.fontBlack2 || lightenByTenth(add.fontBlack1, 0.3);
add.fontBlack3 = theme.fontBlack3 || lightenByTenth(add.fontBlack2, 0.2);
for (const key of _.keys(theme)) {
const match = key.match(/(.*)_type/);
if (!match) continue;
const name = match[1];
const type = theme[key];
if (type != 'light' && type != 'dark') continue;
const background = theme[`${name}_background`];
if (type == 'light') {
fillOne(theme, name, type, add, background, 'fontBlack', 'fontWhite', darkenByTenth, presetPalettes);
}
if (type == 'dark') {
fillOne(theme, name, type, add, background, 'fontWhite', 'fontBlack', lightenByTenth, presetDarkPalettes);
}
// add[`${name}_fontr`] = accentColor(add[`${name}_font1`], 0, 0.6);
// add[`${name}_fontg`] = accentColor(add[`${name}_font1`], 1, 0.6);
// add[`${name}_fontb`] = accentColor(add[`${name}_font1`], 2, 0.6);
// if (background) {
// add[`${name}_backgroundr`] = accentColor(add[`${name}_background1`], 0);
// add[`${name}_backgroundg`] = accentColor(add[`${name}_background1`], 1);
// add[`${name}_backgroundb`] = accentColor(add[`${name}_background1`], 2);
// }
}
console.log('COLORS', {
...add,
...theme,
});
return {
...add,
...theme,
};
}

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

@@ -1,39 +1,79 @@
export default {
import fillTheme from './fillTheme';
const theme = {
main_type: 'light',
selectionAntName: 'blue',
// main_background:
// fontWhite1: '#FFFFFF',
// fontWhite2: '#CCCCCC',
// fontWhite3: '#AAAAAA',
// fontBlack1: '#000000',
// fontBlack2: '#333333',
// fontBlack3: '#666666',
border: '#ccc',
mainAreaBackground: '#eee',
mainFont: 'black',
mainFontGray: 'gray',
mainFontActive: 'blue',
toolbar_background: '#eeeeee',
toolbar_type: 'light',
leftPanelBackground: '#ccc',
content_background: '#eee',
content_type: 'light',
// mainAreaBackground: '#eee',
// mainFont: 'black',
// mainFontGray: 'gray',
// mainFontActive: 'blue',
widgetBackground: '#222',
widgetIconFontColor: '#eee',
widgetBackgroundHover: '#555',
widgetBackgroundSelected: '#4CAF50',
widgetTitleBackground: 'gray',
left_background: '#cccccc',
left_type: 'light',
tabsPanelBackground: '#ddd',
tabsPanelBackgroundHover: '#ccc',
tabsPanelBackgroundHoverClick: '#aaa',
tabsPanelSelectedBackground: '#eee',
tabsPanelHoverFont: '#338',
// leftPanelBackground: '#ccc',
widget_type: 'dark',
widget_background: '#222222',
// widgetBackground: '#222',
// widgetIconFontColor: '#eee',
// widgetBackgroundHover: '#555',
// widgetBackgroundSelected: '#4CAF50',
// widgetTitleBackground: 'gray',
title_type: 'dark',
title_background: '#888888',
manager_type: 'light',
manager_background: '#ffffff',
tabs_type: 'light',
tabs_background: '#eeeeee',
// tabsPanelBackground: '#ddd',
// tabsPanelBackgroundHover: '#ccc',
// tabsPanelBackgroundHoverClick: '#aaa',
// tabsPanelSelectedBackground: '#eee',
// tabsPanelHoverFont: '#338',
statusBarBackground: '#00c',
toolBarBackground: '#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',
gridheader_background: '#f6f7f9',
gridheader_type: 'light',
gridbody_type: 'light',
gridbody_background: '#ffffff',
// TRADITIONAL ALTERNATIVES:
// gridbody_background_alt2: '#ebebeb',
// gridbody_background_alt3: '#ebf5ff',
// gridHeaderBackground: '#f6f7f9',
// gridRowCountLabel: 'lightgoldenrodyellow',
// gridSelectionBackground: 'deepskyblue',
// gridSelectionFont: 'white',
// gridModifiedRowBackground: '#FFFFDB',
// gridModifiedCellBackground: 'bisque',
// gridInsertedRowBackground: '#DBFFDB',
// gridDeletedRowBackground: '#FFDBFF',
// gridFocusedColumnBackground: 'lightgoldenrodyellow',
// gridAutoFillBackground: '#1a73e8',
};
export default fillTheme(theme);

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

@@ -18,7 +18,7 @@ export default function ThemeHelmet() {
.color-green-icon { color: #0A3; }
body {
color: ${theme.mainFont};
color: ${theme.main_font1};
}
`}</style>
</Helmet>

6
packages/web/src/widgets/TabControl.js
View File

@@ -12,11 +12,11 @@ const TabItem = styled.div`
align-items: center;
cursor: pointer;
&:hover {
color: ${(props) => props.theme.tabsPanelHoverFont};
color: ${(props) => props.theme.tabs_font_hover};
}
background-color: ${(props) =>
// @ts-ignore
props.selected ? props.theme.mainAreaBackground : 'inherit'};
props.selected ? props.theme.tabs_background1 : 'inherit'};
`;
const TabNameWrapper = styled.span`
@@ -44,7 +44,7 @@ const TabsContainer = styled.div`
display: flex;
height: ${dimensions.tabsPanel.height}px;
right: 0;
background-color: ${(props) => props.theme.tabsPanelBackground};
background-color: ${(props) => props.theme.tabs_background2};
`;
const TabContentContainer = styled.div`

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

@@ -8,7 +8,7 @@ import useTheme from '../theme/useTheme';
const ButtonDiv = styled.div`
padding: 5px 15px;
// margin: 2px;
color: ${(props) => props.theme.mainFont};
color: ${(props) => props.theme.main_font1};
border: 0;
border-right: 1px solid ${(props) => props.theme.border};
height: ${dimensions.toolBar.height}px;
@@ -17,25 +17,25 @@ const ButtonDiv = styled.div`
!props.disabled &&
`
&:hover {
background-color: ${props.theme.tabsPanelBackgroundHover} ;
background-color: ${props.theme.toolbar_background2} ;
}
&:active:hover {
background-color: ${props.theme.tabsPanelBackgroundHoverClick};
background-color: ${props.theme.toolbar_background3};
}
`}
${(props) =>
props.disabled &&
`
color: ${props.theme.mainFontGray};
color: ${props.theme.main_font3};
`}
`;
const StyledIconSpan = styled.span`
margin-right: 5px;
// font-size: 18px;
color: ${(props) => (props.disabled ? props.theme.mainFontGray : props.theme.mainFontActive)};
color: ${(props) => (props.disabled ? props.theme.main_font3 : props.theme.main_font_link)};
`;
const ButtonDivInner = styled.div`

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

@@ -6,17 +6,26 @@ import { FontIcon } from '../icons';
import useTheme from '../theme/useTheme';
const IconWrapper = styled.div`
color: ${(props) => props.theme.widgetIconFontColor};
color: ${(props) => props.theme.widget_font2};
font-size: ${dimensions.widgetMenu.iconFontSize};
height: ${dimensions.widgetMenu.iconSize}px;
display: flex;
align-items: center;
justify-content: center;
background-color: ${(props) =>
${(props) =>
// @ts-ignore
props.isSelected ? props.theme.widgetBackgroundSelected : 'inherit'};
props.isSelected &&
`
background-color: ${props.theme.widget_background3};
// position: relative;
// border-left: 3px solid ${props.theme.widget_font1};
// left: -3px;
color: ${props.theme.widget_font1};
`}
&:hover {
background-color: ${(props) => props.theme.widgetBackgroundHover};
color: ${(props) => props.theme.widget_font1};
}
`;

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

@@ -63,7 +63,10 @@ const StyledWidgetTitle = styled.div`
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: ${(props) => props.theme.widgetTitleBackground};
background-color: ${(props) => props.theme.title_background};
&:hover {
background-color: ${(props) => props.theme.title_background2};
}
border: 1px solid ${(props) => props.theme.border};
`;

12
yarn.lock
View File

@@ -2,6 +2,13 @@
# yarn lockfile v1
"@ant-design/colors@^5.0.0":
version "5.0.0"
resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-5.0.0.tgz#46b73b4cc6935b35fc8b84555e8e42c8cfc190e6"
integrity sha512-Pe1rYorgVC1v4f+InDXvIlQH715pO1g7BsOhy/ehX/U6ebPKqojmkYJKU3lF+84Zmvyar7ngZ28hesAa1nWjLg==
dependencies:
"@ctrl/tinycolor" "^3.1.6"
"@azure/ms-rest-azure-env@^1.1.2":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@azure/ms-rest-azure-env/-/ms-rest-azure-env-1.1.2.tgz#8505873afd4a1227ec040894a64fdd736b4a101f"
@@ -962,6 +969,11 @@
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
"@ctrl/tinycolor@^3.1.6":
version "3.1.6"
resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.1.6.tgz#2d0ea7d433a34b1682e2e312e8a04812210fcc60"
integrity sha512-9RUTT3omv+5mSYFVsX143R7cTDQmT1FibCzoUVmO294mRIT0Sc8dk5srN27BTH0JKzQDWKkNCKh6q/+EkNfpkA==
"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
version "10.0.29"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"