Skip to content

Commit a6e4c60

Browse files
ukrbublikukrbublik
committed
wip
.
1 parent d735d96 commit a6e4c60

File tree

6 files changed

+188
-86
lines changed

6 files changed

+188
-86
lines changed

‎packages/examples/src/demo/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,13 @@ import { initTreeWithValidation, dispatchHmrUpdate, useHmrUpdate } from "./utils
1414
import type { DemoQueryBuilderState, DemoQueryBuilderMemo } from "./types";
1515
import { emptyTree } from "./init_data";
1616
import { defaultInitFile, initialSkin, validationTranslateOptions, defaultRenderBlocks } from "./options";
17+
import type { LazyStyleModule } from "../skins/utils";
1718
import "./i18n";
1819

20+
// @ts-ignore
21+
import mainStyles from "../skins/styles.scss";
22+
(mainStyles as LazyStyleModule).use();
23+
1924
// Load config and initial tree
2025
const loadedConfig = loadConfig(window._initialSkin || initialSkin);
2126
const {tree: initTree, errors: initErrors} = initTreeWithValidation(window._initFile || defaultInitFile, loadedConfig, validationTranslateOptions);

‎packages/examples/src/skins/styles.scss

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.query-builder {
2+
--rule-border-left: 2px;
3+
--group-border-left: 3px;
4+
--rulegroup-border-left: 3px;
5+
--rulegroupext-border-left: 3px;
6+
--item-radius: 8px;
7+
}

‎packages/mui/modules/widgets/index.jsx

+30-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from "react";
2-
import { ThemeProvider, createTheme } from "@mui/material/styles";
2+
import { ThemeProvider, createTheme, useTheme } from "@mui/material/styles";
33
import { ConfirmProvider, useConfirm } from "material-ui-confirm";
44
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
55
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; // TODO: set moment to dayjs
@@ -56,7 +56,35 @@ const MuiProvider = ({config, children}) => {
5656
adapterLocale: momentLocale,
5757
};
5858

59-
const base = (<div className="mui">{children}</div>);
59+
const UpdCssVars = () => {
60+
const theme = useTheme();
61+
console.log('MUI theme', theme);
62+
const { palette, typography } = theme;
63+
const r = document.querySelector(":root");
64+
65+
const cssVars = {
66+
"--rule-background": palette.mode === "dark" ? palette.grey[800] : palette.background.paper,
67+
"--group-background": palette.mode === "dark" ? palette.grey[900] : palette.grey[50],
68+
"--rulegroup-background": palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
69+
"--rulegroupext-background": palette.mode === "dark" ? palette.grey[900] : palette.grey[100],
70+
"--rule-border-color": palette.primary.main,
71+
"--group-border-color": palette.primary.main,
72+
"--rulegroup-border-color": palette.primary.main,
73+
"--rulegroupext-border-color": palette.primary.main,
74+
"--treeline-color": palette.secondary.main,
75+
'--treeline-disabled-color': palette.action.disabledBackground,
76+
"--main-text-color": palette.text.secondary,
77+
"--main-font-family": typography.fontFamily,
78+
"--main-font-size": typography.fontSize,
79+
};
80+
console.log('MUI cssVars', cssVars);
81+
for (const k in cssVars) {
82+
r.style.setProperty(k, cssVars[k]);
83+
}
84+
return null;
85+
};
86+
87+
const base = (<div className="mui"><UpdCssVars />{children}</div>);
6088
const withProviders = (
6189
<LocalizationProvider dateAdapter={AdapterMoment} {...locProviderProps} >
6290
<ConfirmProvider>

‎packages/ui/styles/styles.scss

+32-84
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,4 @@
1-
// borders
2-
$rule-border: 1px !default;
3-
$group-border: 1px !default;
4-
$case-border: 3px !default;
5-
$rulegroup-border: 1px !default;
6-
$rulegroupext-border: 1px !default;
7-
$item-radius: 5px !default;
8-
// borders for complex nesting
9-
$group-in-rulegroupext-border: $group-border !default;
10-
$rulegroup-in-rulegroupext-border: $rulegroup-border !default;
11-
$rulegroupext-in-rulegroupext-border: $rulegroupext-border !default;
12-
$rulegroup-in-rulegroup-border: $rulegroup-border !default;
13-
$rulegroupext-in-rulegroup-border: $rulegroupext-border !default;
14-
// treeline
15-
$treeline-radius: 4px !default;
16-
$treeline-thick: 2px !default;
17-
$treeline-switch-thick: 3px !default;
18-
$treeline-rulegroup-thick: 1px !default;
19-
$treeline-rulegroupext-thick: 1px !default;
20-
// colors
21-
$treeline-color: #ccc !default;
22-
$treeline-rulegroup-color: $treeline-color !default;
23-
$treeline-rulegroupext-color: $treeline-color !default;
24-
$treeline-switch-color: $treeline-color !default;
25-
$treeline-disabled-color: rgba(128, 128, 128, 0.1) !default;
26-
$group-background: rgba(250, 240, 210, 0.5) !default;
27-
$group-border-color: #DCC896 !default;
28-
$group-with-error-border-color: #e0a1a1 !default;
29-
$rule-background: white !default;
30-
$rule-border-color: transparent !default;
31-
$rule-with-error-border-color: #e0a1a1 !default;
32-
$rule-error-color: red !default;
33-
$rulegroup-background: rgba(255, 252, 242, 0.5) !default;
34-
$rulegroupext-background: rgba(255, 252, 242, 0.5) !default;
35-
$rulegroup-border-color: #f5e4b5 !default;
36-
$rulegroupext-border-color: #f5e4b5 !default;
37-
$placeholder-border-color: gray !default;
38-
$locked-border-color: red !default;
39-
// colors for complex nesting
40-
$rule-in-rulegroup-background: $rule-background !default;
41-
$rulegroup-in-rulegroup-background: $rulegroup-background !default;
42-
$rulegroupext-in-rulegroup-background: $rulegroupext-background !default;
43-
$rule-in-rulegroup-border-color: $rule-border-color !default;
44-
$rulegroup-in-rulegroup-border-color: $rulegroup-border-color !default;
45-
$rulegroupext-in-rulegroup-border-color: $rulegroupext-border-color !default;
46-
$rule-in-rulegroupext-background: $rule-background !default;
47-
$group-in-rulegroupext-background: $group-background !default;
48-
$rulegroupext-in-rulegroupext-background: $rulegroupext-background !default;
49-
$rulegroup-in-rulegroupext-background: $rulegroup-background !default;
50-
$rule-in-rulegroupext-border-color: $rule-border-color !default;
51-
$group-in-rulegroupext-border-color: transparent !default;
52-
$rulegroupext-in-rulegroupext-border-color: $rulegroupext-border-color !default;
53-
$rulegroup-in-rulegroupext-border-color: $rulegroup-border-color !default;
54-
// offsets
55-
$treeline-offset-from-conjs: 20px !default;
56-
$treeline-offset-from-switch: 20px !default;
57-
$item-offset: 10px !default;
58-
$item-offset-left: 24px !default;
59-
$rulegroup-offset: 5px !default;
60-
$rulegroup-offset-left: 18px !default;
61-
$rule-padding: 10px !default;
62-
$rule-parts-distance: 10px !default;
63-
$seps-offset-bottom: 3px !default;
64-
$drag-offset-right: 8px !default;
65-
$group-actions-offset-left: 10px !default;
66-
$group-drag-offset-left: 10px !default;
67-
$rule-group-actions-offset-left: 10px !default;
68-
// other
69-
$custom-select-option-color: lightcoral !default;
70-
71-
1+
@import './vars.scss';
722

733
@mixin clearfix {
744
&:after {
@@ -99,8 +29,9 @@ $custom-select-option-color: lightcoral !default;
9929
.query-builder {
10030
@extend %noselect;
10131
overflow: hidden;
102-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
103-
font-size: 14px;
32+
font-family: $main-font-family;
33+
font-size: $main-font-size;
34+
color: $main-text-color;
10435
line-height: 1.25;
10536
margin: 1rem;
10637
}
@@ -110,11 +41,13 @@ $custom-select-option-color: lightcoral !default;
11041
.group {
11142
background: $group-background;
11243
border: $group-border solid $group-border-color;
44+
border-left: $group-border-left solid $group-border-color;
11345
}
11446

11547
.rule {
11648
background-color: $rule-background;
11749
border: $rule-border solid $rule-border-color;
50+
border-left: $rule-border-left solid $rule-border-color;
11851
padding: $rule-padding;
11952
}
12053

@@ -159,43 +92,52 @@ $custom-select-option-color: lightcoral !default;
15992
.rule_group {
16093
background: $rulegroup-background;
16194
border: $rulegroup-border solid $rulegroup-border-color;
95+
border-left: $rulegroup-border-left solid $rulegroup-border-color;
16296
}
16397

16498
.rule_group_ext {
16599
background: $rulegroupext-background;
166100
border: $rulegroupext-border solid $rulegroupext-border-color;
101+
border-left: $rulegroupext-border-left solid $rulegroupext-border-color;
167102
}
168103

169104
// inside rule_group
170105
.rule_group .rule {
171106
background: $rule-in-rulegroup-background;
172107
border: $rule-border solid $rule-in-rulegroup-border-color;
108+
border-left: $rule-border-left solid $rule-in-rulegroup-border-color;
173109
}
174110
.rule_group .rule_group {
175111
background: $rulegroup-in-rulegroup-background;
176112
border: $rulegroup-in-rulegroup-border solid $rulegroup-in-rulegroup-border-color;
113+
border-left: $rulegroup-in-rulegroup-border-left solid $rulegroup-in-rulegroup-border-color;
177114
}
178115
.rule_group .rule_group_ext {
179116
background: $rulegroupext-in-rulegroup-background;
180117
border: $rulegroupext-in-rulegroup-border solid $rulegroupext-in-rulegroup-border-color;
118+
border-left: $rulegroupext-in-rulegroup-border-left solid $rulegroupext-in-rulegroup-border-color;
181119
}
182120

183121
// inside rule_group_ext
184122
.rule_group_ext .rule {
185123
background: $rule-in-rulegroupext-background;
186124
border: $rule-border solid $rule-in-rulegroupext-border-color;
125+
border-left: $rule-border-left solid $rule-in-rulegroupext-border-color;
187126
}
188127
.rule_group_ext .group {
189128
background: $group-in-rulegroupext-background;
190129
border: $group-in-rulegroupext-border solid $group-in-rulegroupext-border-color;
130+
border-left: $group-in-rulegroupext-border-left solid $group-in-rulegroupext-border-color;
191131
}
192132
.rule_group_ext .rule_group_ext {
193133
background: $rulegroupext-in-rulegroupext-background;
194134
border: $rulegroupext-in-rulegroupext-border solid $rulegroupext-in-rulegroupext-border-color;
135+
border-left: $rulegroupext-in-rulegroupext-border-left solid $rulegroupext-in-rulegroupext-border-color;
195136
}
196137
.rule_group_ext .rule_group {
197138
background: $rulegroup-in-rulegroupext-background;
198139
border: $rulegroup-in-rulegroupext-border solid $rulegroup-in-rulegroupext-border-color;
140+
border-left: $rulegroup-in-rulegroupext-border-left solid $rulegroup-in-rulegroupext-border-color;
199141
}
200142

201143
.locked {
@@ -246,7 +188,7 @@ $custom-select-option-color: lightcoral !default;
246188
/******************************************************************************/
247189

248190

249-
@mixin line_position_for_item($item-border, $item-offset-left, $item-offset, $treeline-thick) {
191+
@mixin line_position_for_item($item-border-left, $item-border, $item-offset-left, $item-offset, $treeline-thick) {
250192
&::before {
251193
border-width: 0 0 $treeline-thick $treeline-thick;
252194
top: calc(-1 * $item-border);
@@ -260,15 +202,16 @@ $custom-select-option-color: lightcoral !default;
260202
}
261203

262204
&::before, &::after {
263-
left: calc(-1 * ($item-offset-left / 2 + $treeline-thick / 2 + $item-border));
205+
left: calc(-1 * ($item-offset-left / 2 + $treeline-thick / 2 + $item-border-left));
264206
width: calc($item-offset-left / 2 + $treeline-thick / 2);
265207
}
266208
}
267209

268210
@mixin line_positions_for_group(
269211
$item-offset-left, $item-offset,
270212
$treeline-thick, $treeline-radius, $treeline-color,
271-
$rule-border, $group-border, $rulegroup-border, $rulegroupext-border
213+
$rule-border, $group-border, $rulegroup-border, $rulegroupext-border,
214+
$rule-border-left, $group-border-left, $rulegroup-border-left, $rulegroupext-border-left
272215
) {
273216
& > .group-or-rule-container:last-child {
274217
& > .group-or-rule {
@@ -282,16 +225,16 @@ $custom-select-option-color: lightcoral !default;
282225
&::before, &::after {
283226
border-color: $treeline-color;
284227
}
285-
@include line_position_for_item($rule-border, $item-offset-left, $item-offset, $treeline-thick);
228+
@include line_position_for_item($rule-border-left, $rule-border, $item-offset-left, $item-offset, $treeline-thick);
286229
}
287230
& > .group {
288-
@include line_position_for_item($group-border, $item-offset-left, $item-offset, $treeline-thick);
231+
@include line_position_for_item($group-border-left, $group-border, $item-offset-left, $item-offset, $treeline-thick);
289232
}
290233
& > .rule_group {
291-
@include line_position_for_item($rulegroup-border, $item-offset-left, $item-offset, $treeline-thick);
234+
@include line_position_for_item($rulegroup-border-left, $rulegroup-border, $item-offset-left, $item-offset, $treeline-thick);
292235
}
293236
& > .rule_group_ext {
294-
@include line_position_for_item($rulegroupext-border, $item-offset-left, $item-offset, $treeline-thick);
237+
@include line_position_for_item($rulegroupext-border-left, $rulegroupext-border, $item-offset-left, $item-offset, $treeline-thick);
295238
}
296239
}
297240
}
@@ -407,7 +350,8 @@ $custom-select-option-color: lightcoral !default;
407350
@include line_positions_for_group(
408351
$item-offset-left, $item-offset,
409352
$treeline-thick, $treeline-radius, $treeline-color,
410-
$rule-border, $group-border, $rulegroup-border, $rulegroupext-border
353+
$rule-border, $group-border, $rulegroup-border, $rulegroupext-border,
354+
$rule-border-left, $group-border-left, $rulegroup-border-left, $rulegroupext-border-left
411355
);
412356
}
413357

@@ -416,7 +360,8 @@ $custom-select-option-color: lightcoral !default;
416360
@include line_positions_for_group(
417361
$rulegroup-offset-left, $rulegroup-offset,
418362
$treeline-rulegroup-thick, $treeline-radius, $treeline-rulegroup-color,
419-
$rule-border, $group-border, $rulegroup-in-rulegroup-border, $rulegroupext-in-rulegroup-border
363+
$rule-border, $group-border, $rulegroup-in-rulegroup-border, $rulegroupext-in-rulegroup-border,
364+
$rule-border-left, $group-border-left, $rulegroup-in-rulegroup-border-left, $rulegroupext-in-rulegroup-border-left
420365
);
421366
&, &.hide--conjs {
422367
@include hide_conjs_for_group(
@@ -432,7 +377,8 @@ $custom-select-option-color: lightcoral !default;
432377
@include line_positions_for_group(
433378
$item-offset-left, $item-offset,
434379
$treeline-rulegroupext-thick, $treeline-radius, $treeline-rulegroupext-color,
435-
$rule-border, $group-in-rulegroupext-border, $rulegroup-in-rulegroupext-border, $rulegroupext-in-rulegroupext-border
380+
$rule-border, $group-in-rulegroupext-border, $rulegroup-in-rulegroupext-border, $rulegroupext-in-rulegroupext-border,
381+
$rule-border-left, $group-in-rulegroupext-border-left, $rulegroup-in-rulegroupext-border-left, $rulegroupext-in-rulegroupext-border-left
436382
);
437383
&.hide--conjs {
438384
@include hide_conjs_for_group(
@@ -447,7 +393,8 @@ $custom-select-option-color: lightcoral !default;
447393
@include line_positions_for_group(
448394
$item-offset-left, $item-offset,
449395
$treeline-switch-thick, $treeline-radius, $treeline-switch-color,
450-
$rule-border, $case-border, $rulegroup-border, $rulegroupext-border
396+
$rule-border, $case-border, $rulegroup-border, $rulegroupext-border,
397+
$rule-border-left, $case-border-left, $rulegroup-border-left, $rulegroupext-border-left
451398
);
452399
}
453400

@@ -575,6 +522,7 @@ $custom-select-option-color: lightcoral !default;
575522

576523
.case_group {
577524
border-width: $case-border;
525+
border-left-width: $case-border-left;
578526

579527
.case_group--body {
580528
display: flex;

0 commit comments

Comments
 (0)