Skip to content

Commit c674487

Browse files
author
FalkWolsky
committed
WIP - Changing the Theme Detail View
1 parent e98b82d commit c674487

File tree

2 files changed

+173
-121
lines changed

2 files changed

+173
-121
lines changed

‎client/packages/lowcoder/src/pages/setting/theme/detail/index.tsx

Lines changed: 171 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import { HeaderBack } from "pages/setting/permission/styledComponents";
3232
import dsl from "./previewDsl";
3333
import chartDsl from "./chartPreviewDsl";
3434
import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
35+
import { Collapse, CollapseProps } from 'antd';
3536

3637
const CodeEditor = lazy(
3738
() => import("base/codeEditor/codeEditor")
@@ -148,7 +149,166 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
148149
history.push(THEME_SETTING);
149150
};
150151

152+
153+
151154
render() {
155+
156+
const themeSettings: CollapseProps['items'] = [
157+
{
158+
key: '1',
159+
label: 'Colors',
160+
children:
161+
<div className="common">
162+
<div>
163+
<DetailTitle>{trans("theme.mainColor")}</DetailTitle>
164+
<ColorPicker
165+
colorKey="primary"
166+
name={trans("themeDetail.primary")}
167+
desc={trans("themeDetail.primaryDesc")}
168+
color={this.state.theme.primary}
169+
configChange={(params) => this.configChange(params)}
170+
/>
171+
</div>
172+
<ColorPicker
173+
colorKey="canvas"
174+
name={trans("themeDetail.canvas")}
175+
desc={trans("themeDetail.canvasDesc")}
176+
color={this.state.theme.canvas}
177+
configChange={(params) => this.configChange(params)}
178+
/>
179+
<ColorPicker
180+
colorKey="primarySurface"
181+
name={trans("themeDetail.primarySurface")}
182+
desc={trans("themeDetail.primarySurfaceDesc")}
183+
color={this.state.theme.primarySurface}
184+
configChange={(params) => this.configChange(params)}
185+
/>
186+
<div>
187+
<DetailTitle>{trans("theme.text")}</DetailTitle>
188+
<ColorPicker
189+
colorKey="textLight"
190+
name={trans("themeDetail.textLight")}
191+
desc={trans("themeDetail.textLightDesc")}
192+
color={this.state.theme.textLight}
193+
configChange={(params) => this.configChange(params)}
194+
/>
195+
</div>
196+
<ColorPicker
197+
colorKey="textDark"
198+
name={trans("themeDetail.textDark")}
199+
desc={trans("themeDetail.textDarkDesc")}
200+
color={this.state.theme.textDark}
201+
configChange={(params) => this.configChange(params)}
202+
/>
203+
204+
</div>
205+
},
206+
{
207+
key: '2',
208+
label: 'Text & Fonts',
209+
children: <p>to define...</p>,
210+
},
211+
{
212+
key: '3',
213+
label: 'Layout',
214+
children:
215+
<div className="common">
216+
<div>
217+
<DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
218+
<ColorPicker
219+
colorKey="borderRadius"
220+
name={trans("themeDetail.borderRadius")}
221+
desc={trans("themeDetail.borderRadiusDesc")}
222+
radius={this.state.theme.borderRadius}
223+
configChange={(params) => this.configChange(params)}
224+
/>
225+
</div>
226+
<div>
227+
<DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
228+
<ColorPicker
229+
colorKey="margin"
230+
name={trans("themeDetail.margin")}
231+
desc={trans("themeDetail.marginDesc")}
232+
margin={this.state.theme.margin}
233+
configChange={(params) => {
234+
this.configChange(params);
235+
}}
236+
/>
237+
</div>
238+
<div>
239+
<DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
240+
<ColorPicker
241+
colorKey="padding"
242+
name={trans("themeDetail.padding")}
243+
desc={trans("themeDetail.paddingDesc")}
244+
padding={this.state.theme.padding}
245+
configChange={(params) => {
246+
this.configChange(params);
247+
}}
248+
/>
249+
</div>
250+
<div>
251+
<DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
252+
<ColorPicker
253+
colorKey="gridColumns"
254+
name={trans("themeDetail.gridColumns")}
255+
desc={trans("themeDetail.gridColumnsDesc")}
256+
gridColumns={this.state.theme.gridColumns}
257+
configChange={(params) => {
258+
this.configChange(params);
259+
}}
260+
/>
261+
</div>
262+
</div>,
263+
},
264+
{
265+
key: '4',
266+
label: 'Components',
267+
children: <p>to define...</p>,
268+
},
269+
{
270+
key: '5',
271+
label: 'Theme Preview',
272+
children: <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />,
273+
},
274+
{
275+
key: '6',
276+
label: 'eCharts Definition',
277+
children:
278+
<div className="chart">
279+
{/* <DetailTitle>{trans("themeDetail.chart")}</DetailTitle> */}
280+
<ChartDesc>
281+
{trans("themeDetail.chartDesc")}
282+
<a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
283+
{" "}
284+
{trans("themeDetail.echartsJson")}
285+
</a>
286+
</ChartDesc>
287+
<ChartInput>
288+
<div className="code-editor">
289+
<CodeEditor
290+
value={this.state.theme.chart || ""}
291+
onChange={(value) => this.configChange({
292+
colorKey: "chart",
293+
chart: value.doc.toString() ? value.doc.toString() : undefined,
294+
})}
295+
styleName="higher"
296+
codeType="Function"
297+
showLineNum
298+
bordered
299+
/>
300+
</div>
301+
</ChartInput>
302+
</div>,
303+
},
304+
{
305+
key: '7',
306+
label: 'eCharts Definition Preview',
307+
children: <PreviewApp style={{ height: "600px", margin: "20px 0 8px 0" }} theme={this.state.theme} dsl={chartDsl} />,
308+
},
309+
310+
];
311+
152312
return (
153313
<>
154314
<Prompt
@@ -199,128 +359,20 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
199359
</HeaderBack>
200360
</Header>
201361
<DetailContent>
202-
<div className="common">
203-
<div>
204-
<DetailTitle>{trans("theme.mainColor")}</DetailTitle>
205-
<ColorPicker
206-
colorKey="primary"
207-
name={trans("themeDetail.primary")}
208-
desc={trans("themeDetail.primaryDesc")}
209-
color={this.state.theme.primary}
210-
configChange={(params) => this.configChange(params)}
211-
/>
212-
</div>
213-
<ColorPicker
214-
colorKey="canvas"
215-
name={trans("themeDetail.canvas")}
216-
desc={trans("themeDetail.canvasDesc")}
217-
color={this.state.theme.canvas}
218-
configChange={(params) => this.configChange(params)}
219-
/>
220-
<ColorPicker
221-
colorKey="primarySurface"
222-
name={trans("themeDetail.primarySurface")}
223-
desc={trans("themeDetail.primarySurfaceDesc")}
224-
color={this.state.theme.primarySurface}
225-
configChange={(params) => this.configChange(params)}
226-
/>
227-
<div>
228-
<DetailTitle>{trans("theme.text")}</DetailTitle>
229-
<ColorPicker
230-
colorKey="textLight"
231-
name={trans("themeDetail.textLight")}
232-
desc={trans("themeDetail.textLightDesc")}
233-
color={this.state.theme.textLight}
234-
configChange={(params) => this.configChange(params)}
235-
/>
236-
</div>
237-
<ColorPicker
238-
colorKey="textDark"
239-
name={trans("themeDetail.textDark")}
240-
desc={trans("themeDetail.textDarkDesc")}
241-
color={this.state.theme.textDark}
242-
configChange={(params) => this.configChange(params)}
243-
/>
244-
<div>
245-
<DetailTitle>{trans("themeDetail.borderRadius")}</DetailTitle>
246-
<ColorPicker
247-
colorKey="borderRadius"
248-
name={trans("themeDetail.borderRadius")}
249-
desc={trans("themeDetail.borderRadiusDesc")}
250-
radius={this.state.theme.borderRadius}
251-
configChange={(params) => this.configChange(params)}
252-
/>
253-
</div>
254-
</div>
255-
<div className="common">
256-
<div>
257-
<DetailTitle>{trans("themeDetail.margin")}</DetailTitle>
258-
<ColorPicker
259-
colorKey="margin"
260-
name={trans("themeDetail.margin")}
261-
desc={trans("themeDetail.marginDesc")}
262-
margin={this.state.theme.margin}
263-
configChange={(params) => {
264-
this.configChange(params);
265-
}}
266-
/>
267-
</div>
268-
<div>
269-
<DetailTitle>{trans("themeDetail.padding")}</DetailTitle>
270-
<ColorPicker
271-
colorKey="padding"
272-
name={trans("themeDetail.padding")}
273-
desc={trans("themeDetail.paddingDesc")}
274-
padding={this.state.theme.padding}
275-
configChange={(params) => {
276-
this.configChange(params);
277-
}}
278-
/>
279-
</div>
280-
<div>
281-
<DetailTitle>{trans("themeDetail.gridColumns")}</DetailTitle>
282-
<ColorPicker
283-
colorKey="gridColumns"
284-
name={trans("themeDetail.gridColumns")}
285-
desc={trans("themeDetail.gridColumnsDesc")}
286-
gridColumns={this.state.theme.gridColumns}
287-
configChange={(params) => {
288-
this.configChange(params);
289-
}}
290-
/>
291-
</div>
292-
</div>
293-
<PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} />
294-
<div className="chart">
295-
<DetailTitle>{trans("themeDetail.chart")}</DetailTitle>
296-
<ChartDesc>
297-
{trans("themeDetail.chartDesc")}
298-
<a target="_blank" href="https://echarts.apache.org/en/theme-builder.html" rel="noreferrer">
299-
{" "}
300-
{trans("themeDetail.echartsJson")}
301-
</a>
302-
</ChartDesc>
303-
<ChartInput>
304-
<div className="code-editor">
305-
<CodeEditor
306-
value={this.state.theme.chart || ""}
307-
onChange={(value) => this.configChange({
308-
colorKey: "chart",
309-
chart: value.doc.toString() ? value.doc.toString() : undefined,
310-
})}
311-
styleName="higher"
312-
codeType="Function"
313-
showLineNum
314-
bordered
315-
/>
316-
</div>
317-
</ChartInput>
318-
</div>
319-
<PreviewApp
362+
363+
<Collapse items={themeSettings} defaultActiveKey={['1']} />
364+
365+
366+
367+
{/* <PreviewApp style={{marginTop: '3px'}} theme={this.state.theme} dsl={dsl} /> */}
368+
369+
370+
{/* <PreviewApp
320371
style={{ height: "346px", margin: "20px 0 8px 0" }}
321372
theme={this.state.theme}
322373
dsl={chartDsl}
323-
/>
374+
/> */}
375+
324376
</DetailContent>
325377
<Footer ref={this.footerRef} className="no-bottom">
326378
<ResetButton

‎client/packages/lowcoder/src/pages/setting/theme/styledComponents.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export const ColumnName = styled(InlineFlexAlignCenter)`
8282
`;
8383

8484
export const DetailContent = styled.div`
85-
max-width: 672px;
85+
max-width: 95%;
8686
margin-left: 24px;
8787
padding-bottom: 80px;
8888
.common {
@@ -126,7 +126,7 @@ export const Footer = styled.div`
126126
bottom: 0;
127127
width: calc(100vw - 492px);
128128
background-color: #fff;
129-
z-index: 1;
129+
z-index: 1000;
130130
margin-right: 10px;
131131
&.no-bottom {
132132
box-shadow: 0 -6px 10px -6px rgba(0, 0, 0, 0.1);

0 commit comments

Comments
 (0)