Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4cccfe8

Browse files
apply theme styles on container comps
1 parent 9a72dd5 commit 4cccfe8

File tree

7 files changed

+20
-10
lines changed

7 files changed

+20
-10
lines changed

‎client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
import { PageLayout } from "../pageLayoutComp/pageLayout";
2121
import { AnimationStyle } from "@lowcoder-ee/comps/controls/styleControlConstants";
2222
import { styleControl } from "@lowcoder-ee/comps/controls/styleControl";
23-
import { useMergeCompStyles } from "@lowcoder-ee/util/hooks";
2423

2524
export const ContainerBaseComp = (function () {
2625
const childrenMap = {
@@ -30,8 +29,7 @@ export const ContainerBaseComp = (function () {
3029

3130
return new ContainerCompBuilder(childrenMap, (props, dispatch) => {
3231

33-
const [siderCollapsed, setSiderCollapsed] = useState(false);
34-
useMergeCompStyles(props as Record<string, any>, dispatch);
32+
const [siderCollapsed, setSiderCollapsed] = useState(false);
3533

3634
return (
3735
<DisabledContext.Provider value={props.disabled}>

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const getStyle = (style: ContainerStyleType) => {
2626
return css`
2727
border-color: ${style.border};
2828
border-width: ${style.borderWidth};
29+
border-style: ${style.borderStyle};
2930
border-radius: ${style.radius};
3031
overflow: hidden;
3132
padding: ${style.padding};

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
ContainerFooterStyle,
1111
} from "comps/controls/styleControlConstants";
1212
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
13-
import { migrateOldData } from "comps/generators/simpleGenerators";
13+
import { migrateOldData,valueComp } from "comps/generators/simpleGenerators";
1414
import { NameGenerator } from "comps/utils";
1515
import { fromRecord, Node } from "lowcoder-core";
1616
import { nodeIsRecord } from "lowcoder-core";
@@ -57,6 +57,7 @@ const childrenMap = {
5757
siderStyle: styleControl(ContainerSiderStyle , 'siderStyle'),
5858
bodyStyle: styleControl(ContainerBodyStyle , 'bodyStyle'),
5959
footerStyle: styleControl(ContainerFooterStyle , 'footerStyle'),
60+
appliedThemeId: valueComp<string>(''),
6061
};
6162

6263
// Compatible with old style data 2022年8月15日

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triContainerComp.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
ContainerFooterStyle,
1010
} from "comps/controls/styleControlConstants";
1111
import { MultiCompBuilder, sameTypeMap, withDefault } from "comps/generators";
12-
import { migrateOldData } from "comps/generators/simpleGenerators";
12+
import { migrateOldData,valueComp } from "comps/generators/simpleGenerators";
1313
import { NameGenerator } from "comps/utils";
1414
import { changeValueAction, fromRecord, multiChangeAction, Node } from "lowcoder-core";
1515
import { nodeIsRecord } from "lowcoder-core";
@@ -45,6 +45,7 @@ const childrenMap = {
4545
headerStyle: styleControl(ContainerHeaderStyle, 'headerStyle'),
4646
bodyStyle: styleControl(ContainerBodyStyle, 'bodyStyle'),
4747
footerStyle: styleControl(ContainerFooterStyle, 'footerStyle'),
48+
appliedThemeId: valueComp<string>(''), // for comp containing container, comps's appliedThemeId will always be empty so maintaining here
4849
};
4950

5051
// Compatible with old style data 2022年8月15日

‎client/packages/lowcoder/src/comps/comps/triContainerComp/triFloatTextContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { TriContainerViewProps } from "../triContainerComp/triContainerCompBuild
2020
const getStyle = (style: TextContainerStyleType) => {
2121
return css`
2222
border-radius: ${(style.radius ? style.radius : "4px")};
23-
border: ${(style.borderWidth ? style.borderWidth : "0px")} solid ${style.border};
23+
border: ${(style.borderWidth ? style.borderWidth : "0px")} ${(style.borderStyle ? style.borderStyle : "solid")} ${style.border};
2424
color: ${style.text};
2525
font-size: ${style.textSize} !important;
2626
font-weight: ${style.textWeight} !important;
@@ -76,7 +76,7 @@ ${props=>props.$animationStyle&&props.$animationStyle}
7676
display: flex;
7777
flex-flow: column;
7878
height: 100%;
79-
border: ${(props) => props.$style.borderWidth} solid ${(props) => props.$style.border};
79+
border: ${(props) => props.$style.borderWidth} ${(props)=>(props.$style.borderStyle ? props.$style.borderStyle : "solid")} ${(props) => props.$style.border};
8080
border-radius: ${(props) => props.$style.radius};
8181
background-color: ${(props) => props.$style.background};
8282
padding: ${(props) => props.$style.padding};

‎client/packages/lowcoder/src/comps/controls/styleControl.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -867,7 +867,7 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
867867
const appSettingsComp = editorState?.getAppSettingsComp();
868868
const preventAppStylesOverwriting = appSettingsComp?.getView()?.preventAppStylesOverwriting;
869869
const { themeId } = theme || {};
870-
const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
870+
const { appliedThemeId, preventStyleOverwriting } = comp?.comp?.container||comp?.comp || {};
871871
const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
872872
? theme?.theme
873873
: undefined;
@@ -879,7 +879,6 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
879879
const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
880880
? props as ColorMap
881881
: {} as ColorMap;
882-
883882

884883
return calcColors(
885884
styleProps,

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -273,7 +273,7 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
273273
settingsKey: 'borderStyle',
274274
name: trans('themeDetail.borderStyle'),
275275
desc: trans('themeDetail.borderStyleDesc'),
276-
type: "radius",
276+
type: "borderStyle",
277277
value: this.state.theme.borderStyle,
278278
}
279279
]
@@ -466,6 +466,16 @@ class ThemeDetailPage extends React.Component<ThemeDetailPageProps, ThemeDetailP
466466
}}
467467
/>
468468
}
469+
{layoutSettingsItem.type == "borderStyle" &&
470+
<ThemeSettingsSelector
471+
themeSettingKey={layoutSettingsItem.settingsKey}
472+
name={layoutSettingsItem.name}
473+
borderStyle={layoutSettingsItem.value}
474+
configChange={(params) => {
475+
this.configChange(params);
476+
}}
477+
/>
478+
}
469479
{layoutSettingsItem.type == "margin" &&
470480
<ThemeSettingsSelector
471481
themeSettingKey={layoutSettingsItem.settingsKey}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /