Merge pull request #1588 from iamfaran/dev

[FIX] GlobalCSS styles for Modals/Drawers

Author: raheeliftikhar5

.gitignore

@@ -18,3 +18,4 @@ application-dev-localhost.yaml
 server/api-service/lowcoder-server/src/main/resources/application-local-dev.yaml
 translations/locales/node_modules/
 server/api-service/lowcoder-server/src/main/resources/application-local-dev-ee.yaml
+node_modules

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

@@ -3331,7 +3331,7 @@ function styleNamespace(id) {
 function evalStyle(id, css, globalStyle) {
     var _a;
     var styleId = styleNamespace(id);
-    var prefixId = globalStyle ? id : "#".concat(id);
+    var prefixId = globalStyle ? id : ".".concat(id);
     var compiledCSS = "";
     css.forEach(function (i) {
         if (!i.trim()) {

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

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

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

@@ -35,6 +35,7 @@ import { useUserViewMode } from "util/hooks";
 import React from "react";
 import { isEqual } from "lodash";
 import {LoadingBarHideTrigger} from "@lowcoder-ee/util/hideLoading";
+import clsx from "clsx";
 const EditorView = lazy(
   () => import("pages/editor/editorView"),
 );
@@ -130,7 +131,11 @@ const RootView = React.memo((props: RootViewProps) => {
   }
 
   return (
-    <div {...divProps} style={{height: '100%'}}>
+    <div {...divProps}
+          className={clsx(
+            divProps.id, 
+          )} 
+       style={{height: '100%'}}>
       <PropertySectionContext.Provider value={propertySectionContextValue}>
         <ThemeContext.Provider value={themeContextValue}>
           <EditorContext.Provider value={editorState}>

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

@@ -26,6 +26,8 @@ import { isNumeric } from "util/stringUtils";
 import { NameConfig, withExposingConfigs } from "../generators/withExposing";
 import { title } from "process";
 import { SliderControl } from "../controls/sliderControl";
+import clsx from "clsx";
+import { useApplicationId } from "util/hooks";
 
 const EventOptions = [closeEvent] as const;
 
@@ -119,6 +121,7 @@ let TmpDrawerComp = (function () {
       const isTopBom = ["top", "bottom"].includes(props.placement);
       const { items, ...otherContainerProps } = props.container;
       const userViewMode = useUserViewMode();
+      const appID = useApplicationId();
       const resizable = !userViewMode && (!isTopBom || !props.autoHeight);
       const onResizeStop = useCallback(
         (
@@ -172,7 +175,7 @@ let TmpDrawerComp = (function () {
               zIndex={Layers.drawer}
               maskClosable={props.maskClosable}
               mask={props.showMask}
-              className={props.className as string}
+              className={clsx(`app-${appID}`, props.className)}
               data-testid={props.dataTestId as string}
             >
             {props.toggleClose && (

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

@@ -24,6 +24,8 @@ import { BoolControl } from "comps/controls/boolControl";
 import { withDefault } from "comps/generators";
 import { SliderControl } from "../controls/sliderControl";
 import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
+import clsx from "clsx";
+import { useApplicationId } from "util/hooks";
 
 const EventOptions = [
   { label: trans("modalComp.open"), value: "open", description: trans("modalComp.openDesc") },
@@ -113,6 +115,7 @@ let TmpModalComp = (function () {
     },
     (props, dispatch) => {
       const userViewMode = useUserViewMode();
+      const appID = useApplicationId();
       const bodyStyle: CSSProperties = { padding: 0 };
       const width = transToPxSize(props.width || DEFAULT_WIDTH);
       let height = undefined;
@@ -177,7 +180,7 @@ let TmpModalComp = (function () {
               zIndex={Layers.modal}
               modalRender={(node) => <ModalStyled $style={props.style} $modalScrollbar={props.modalScrollbar}>{node}</ModalStyled>}
               mask={props.showMask}
-              className={props.className as string}
+              className={clsx(`app-${appID}`, props.className)}
               data-testid={props.dataTestId as string}
             >
               <InnerGrid