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 0e2f420

Browse files
Merge pull request #1588 from iamfaran/dev
[FIX] GlobalCSS styles for Modals/Drawers
2 parents ddc35a3 + 64bcba6 commit 0e2f420

File tree

6 files changed

+17
-5
lines changed

6 files changed

+17
-5
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@ application-dev-localhost.yaml
1818
server/api-service/lowcoder-server/src/main/resources/application-local-dev.yaml
1919
translations/locales/node_modules/
2020
server/api-service/lowcoder-server/src/main/resources/application-local-dev-ee.yaml
21+
node_modules

‎client/packages/lowcoder-core/lib/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3331,7 +3331,7 @@ function styleNamespace(id) {
33313331
function evalStyle(id, css, globalStyle) {
33323332
var _a;
33333333
var styleId = styleNamespace(id);
3334-
var prefixId = globalStyle ? id : "#".concat(id);
3334+
var prefixId = globalStyle ? id : ".".concat(id);
33353335
var compiledCSS = "";
33363336
css.forEach(function (i) {
33373337
if (!i.trim()) {

‎client/packages/lowcoder-core/src/eval/utils/evalStyle.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ function styleNamespace(id: string) {
66

77
export function evalStyle(id: string, css: string[], globalStyle?: boolean) {
88
const styleId = styleNamespace(id);
9-
const prefixId = globalStyle ? id : `#${id}`
9+
const prefixId = globalStyle ? id : `.${id}`;
1010
let compiledCSS = "";
1111
css.forEach((i) => {
1212
if (!i.trim()) {

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import { useUserViewMode } from "util/hooks";
3535
import React from "react";
3636
import { isEqual } from "lodash";
3737
import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
38+
import clsx from "clsx";
3839
const EditorView = lazy(
3940
() => import("pages/editor/editorView"),
4041
);
@@ -130,7 +131,11 @@ const RootView = React.memo((props: RootViewProps) => {
130131
}
131132

132133
return (
133-
<div {...divProps} style={{height: '100%'}}>
134+
<div {...divProps}
135+
className={clsx(
136+
divProps.id,
137+
)}
138+
style={{height: '100%'}}>
134139
<PropertySectionContext.Provider value={propertySectionContextValue}>
135140
<ThemeContext.Provider value={themeContextValue}>
136141
<EditorContext.Provider value={editorState}>

‎client/packages/lowcoder/src/comps/hooks/drawerComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ import { isNumeric } from "util/stringUtils";
2626
import { NameConfig, withExposingConfigs } from "../generators/withExposing";
2727
import { title } from "process";
2828
import { SliderControl } from "../controls/sliderControl";
29+
import clsx from "clsx";
30+
import { useApplicationId } from "util/hooks";
2931

3032
const EventOptions = [closeEvent] as const;
3133

@@ -119,6 +121,7 @@ let TmpDrawerComp = (function () {
119121
const isTopBom = ["top", "bottom"].includes(props.placement);
120122
const { items, ...otherContainerProps } = props.container;
121123
const userViewMode = useUserViewMode();
124+
const appID = useApplicationId();
122125
const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
123126
const onResizeStop = useCallback(
124127
(
@@ -172,7 +175,7 @@ let TmpDrawerComp = (function () {
172175
zIndex={Layers.drawer}
173176
maskClosable={props.maskClosable}
174177
mask={props.showMask}
175-
className={props.classNameasstring}
178+
className={clsx(`app-${appID}`,props.className)}
176179
data-testid={props.dataTestId as string}
177180
>
178181
{props.toggleClose && (

‎client/packages/lowcoder/src/comps/hooks/modalComp.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ import { BoolControl } from "comps/controls/boolControl";
2424
import { withDefault } from "comps/generators";
2525
import { SliderControl } from "../controls/sliderControl";
2626
import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
27+
import clsx from "clsx";
28+
import { useApplicationId } from "util/hooks";
2729

2830
const EventOptions = [
2931
{ label: trans("modalComp.open"), value: "open", description: trans("modalComp.openDesc") },
@@ -113,6 +115,7 @@ let TmpModalComp = (function () {
113115
},
114116
(props, dispatch) => {
115117
const userViewMode = useUserViewMode();
118+
const appID = useApplicationId();
116119
const bodyStyle: CSSProperties = { padding: 0 };
117120
const width = transToPxSize(props.width || DEFAULT_WIDTH);
118121
let height = undefined;
@@ -177,7 +180,7 @@ let TmpModalComp = (function () {
177180
zIndex={Layers.modal}
178181
modalRender={(node) => <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
179182
mask={props.showMask}
180-
className={props.classNameasstring}
183+
className={clsx(`app-${appID}`,props.className)}
181184
data-testid={props.dataTestId as string}
182185
>
183186
<InnerGrid

0 commit comments

Comments
(0)

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