opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-09-24 16:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: solve issues with ag-grid styles

Browse Source
This commit is contained in:
Dmitry Krupenya
2020-05-18 17:01:39 +03:00
parent 9b5e480f93
commit ddcec38a7d
6 changed files with 56 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/ag-grid-plugin/src/AgGridTable/AgGridTable.tsx
+2 -2
View File
@@ -31,7 +31,7 @@ export type AgGridTableProps = PropsWithChildren<
}>
async function loader() {
// const styles = await import('../styles/base.scss');
const styles = await import('../styles/base.scss');
const { AgGridReact } = await import('ag-grid-react');
const { AllCommunityModules } = await import('@ag-grid-community/all-modules');
@@ -60,7 +60,7 @@ export const AgGridTable = observer(function AgGridTable({
{({ AgGridReact, AllCommunityModules }) => (
<Observer>
{() => styled(styles)(
<ag-grid-theme as="div" className={className}>
<ag-grid-theme as="div" className={`cb-ag-grid-theme ${className}`}>
<AgGridReact
key={controller.refreshId}
columnDefs={controller.columns}
webapp/packages/ag-grid-plugin/src/styles/base.scss
+2 -4
View File
@@ -10,11 +10,9 @@
@import "ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-mixin.scss";
@import "ag-grid-community/src/styles/webfont/agGridAlpineFont.scss";
:local(.__ag-grid-theme) {
composes: ag-theme-balham from global;
}
.ag-theme-balham {
.cb-ag-grid-theme {
@include ag-theme-balham();
font-family: inherit;
webapp/packages/ag-grid-plugin/src/styles/styles.ts
+3 -4
View File
@@ -9,17 +9,16 @@
import { ThemeSelector } from '@dbeaver/core/theming';
export const agGridStyles: ThemeSelector = async (theme) => {
const baseStyles = await import('./base.scss');
let styles: any;
switch (theme) {
case 'dark':
styles = await import('./themes/dark.scss');
styles = await import('./themes/dark.module.scss');
break;
default:
styles = await import('./themes/light.scss');
styles = await import('./themes/light.module.scss');
break;
}
return [baseStyles.default, styles.default];
return [styles.default];
};
webapp/packages/ag-grid-plugin/src/styles/themes/_base-ag-grid.scss
+46 -42
View File
@@ -9,54 +9,58 @@
@import "@dbeaver/core/assets/styles/branding";
@mixin base-ag-grid() {
.ag-theme-balham {
.ag-header {
border-bottom: 1px solid;
@include mdc-theme-prop(color, on-surface, false);
@include mdc-theme-prop(border-color, background, false);
}
.ag-header-row {
@include mdc-theme-prop(color, on-surface, false);
}
:global {
.cb-ag-grid-theme {
.ag-header {
border-bottom: 1px solid;
@include mdc-theme-prop(color, on-surface, false);
@include mdc-theme-prop(border-color, background, false);
}
.ag-row {
border-top: none;
border-bottom: solid 1px;
@include mdc-theme-prop(color, on-surface, false);
@include mdc-theme-prop(border-color, background, false);
}
.ag-header-row {
@include mdc-theme-prop(color, on-surface, false);
}
.ag-row-selected {
border-color: #03a9f4;
background-color: transparent;
@include stripes-background($mdc-theme-secondary);
}
.ag-row, .ag-row:not(.ag-row-first) {
border-top: none;
border-bottom: solid 1px;
@include mdc-theme-prop(color, on-surface, false);
@include mdc-theme-prop(border-color, background, false);
}
.ag-cell-range-selected-1 {
background-color: rgba(0, 145, 234, 0.3);
}
.ag-row-selected {
border-color: #03a9f4;
background-color: transparent;
@include stripes-background($mdc-theme-secondary);
}
.ag-row-hover {
background-color: transparent;
@include stripes-background($mdc-theme-secondary);
border-color: $color-positive;
}
.ag-cell-range-selected-1 {
background-color: rgba(0, 145, 234, 0.3);
}
.ag-cell.ag-cell-inline-editing {
border: 0 !important;
border-radius: 0;
@include mdc-theme-prop(background-color, surface, false);
}
.ag-row.ag-row-hover {
background-color: transparent;
@include stripes-background($mdc-theme-secondary);
border-color: $color-positive;
}
.ag-header-cell::after,
.ag-header-group-cell::after {
height: 100%;
top: 0;
@include mdc-theme-prop(background-color, background, false);
}
.ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
.ag-pinned-left-header {
@include mdc-theme-prop(border-right-color, background, false);
.ag-cell.ag-cell-inline-editing {
border: 0 !important;
border-radius: 0;
@include mdc-theme-prop(background-color, surface, false);
}
.ag-header-cell::after,
.ag-header-group-cell::after {
height: 100%;
top: 0;
@include mdc-theme-prop(background-color, background, false);
}
.ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell),
.ag-pinned-left-header {
@include mdc-theme-prop(border-right-color, background, false);
}
}
}
}
webapp/packages/ag-grid-plugin/src/styles/themes/dark.scss → webapp/packages/ag-grid-plugin/src/styles/themes/dark.module.scss
+1 -1
View File
@@ -9,6 +9,6 @@
@import "@dbeaver/core/assets/styles/theme-dark";
@import "base-ag-grid";
.theme-dark {
:global .theme-dark {
@include base-ag-grid;
}
webapp/packages/ag-grid-plugin/src/styles/themes/light.scss → webapp/packages/ag-grid-plugin/src/styles/themes/light.module.scss
+2 -2
View File
@@ -9,6 +9,6 @@
@import '@dbeaver/core/assets/styles/theme-light';
@import "base-ag-grid";
.theme-light {
:global .theme-light {
@include base-ag-grid;
}
}