Theme: added preventStyleOverwriting switches in app and component settings + set priority for comp styling

raheeliftikhar5 · raheeliftikhar5 · commit 8de6657f2053 · 2024-07-01T16:35:03.000+05:00
diff --git a/client/packages/lowcoder/src/api/commonSettingApi.ts b/client/packages/lowcoder/src/api/commonSettingApi.ts
@@ -35,7 +35,6 @@ export interface ThemeType {
   id: string;
   updateTime: number;
   theme: ThemeDetail;
-  overwriteStyles?: boolean;
 }
 
 export interface ThemeDetail {
diff --git a/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx b/client/packages/lowcoder/src/comps/comps/appSettingsComp.tsx
@@ -186,6 +186,7 @@ const childrenMap = {
   showHeaderInPublic: withDefault(BoolControl, true),
   maxWidth: dropdownInputSimpleControl(OPTIONS, USER_DEFINE, "1920"),
   themeId: valueComp<string>(DEFAULT_THEMEID),
+  preventAppStylesOverwriting: withDefault(BoolControl, false),
   customShortcuts: CustomShortcutsComp,
   disableCollision: valueComp<boolean>(false),
 };
@@ -205,6 +206,7 @@ function AppSettingsModal(props: ChildrenInstance) {
     icon,
     category,
     showHeaderInPublic,
+    preventAppStylesOverwriting,
   } = props;
   const THEME_OPTIONS = themeList?.map((theme) => ({
     label: theme.name,
@@ -300,6 +302,11 @@ function AppSettingsModal(props: ChildrenInstance) {
             );
           }}
         />
+        <div style={{ margin: '20px 0'}}>
+          {preventAppStylesOverwriting.propertyView({
+            label: trans("prop.preventOverwriting"),
+          })}
+        </div>
       </DivStyled>
       {props.customShortcuts.getPropertyView()}
     </SettingsStyled>
diff --git a/client/packages/lowcoder/src/comps/comps/rootComp.tsx b/client/packages/lowcoder/src/comps/comps/rootComp.tsx
@@ -65,14 +65,17 @@ function RootView(props: RootViewProps) {
   const appThemeId = comp.children.settings.getView().themeId;
   const { orgCommonSettings } = getGlobalSettings();
   const themeList = orgCommonSettings?.themeList || [];
+  const selectedTheme = getCurrentTheme(themeList, appThemeId);
 
   const theme =
     previewTheme?.previewTheme ||
-    getCurrentTheme(themeList, appThemeId)?.theme ||
+    selectedTheme?.theme ||
     localDefaultTheme;
   
-  const overwriteStyles = Boolean(getCurrentTheme(themeList, appThemeId)?.overwriteStyles);
-  
+  const themeId = selectedTheme ? selectedTheme.id : (
+    previewTheme ? "" : 'default-theme-id'
+  ); 
+
   useEffect(() => {
     const newEditorState = new EditorState(comp, (changeEditorStateFn) => {
       setEditorState((oldState) => (oldState ? changeEditorStateFn(oldState) : undefined));
@@ -92,7 +95,7 @@ function RootView(props: RootViewProps) {
   const themeContextValue = useMemo(
     () => ({
       theme,
-      overwriteStyles,
+      themeId,
     }),
     [theme]
   );
diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx
@@ -83,6 +83,7 @@ import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 import { CompTypeContext } from "../utils/compTypeContext";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
 import { CompContext } from "../utils/compContext";
+import { EditorContext } from "../editorState";
 
 function isSimpleColorConfig(config: SingleColorConfig): config is SimpleColorConfig {
   return config.hasOwnProperty("color");
@@ -358,7 +359,7 @@ function calcColors<ColorMap extends Record<string, string>>(
 ) {
   // let themeWithDefault = (theme || defaultTheme) as unknown as Record<string, string>;
   let themeWithDefault = {
-    ...defaultTheme,
+    // ...defaultTheme,
     ...(theme || {}),
     ...(compTheme || {}),
   } as unknown as Record<string, string>;
@@ -858,21 +859,32 @@ export function styleControl<T extends readonly SingleColorConfig[]>(
     childrenMap as ToConstructor<{ [K in Names<T>]: ColorControl }>,
     (props) => {
       // const compType = useContext(CompTypeContext);
+      const editorState = useContext(EditorContext);
       const {comp, compType} = useContext(CompContext);
       const theme = useContext(ThemeContext);
       const bgColor = useContext(BackgroundColorContext);
-      const { overwriteStyles } = theme || {}; 
-      const compTheme = compType
+
+      const appSettingsComp = editorState.getAppSettingsComp();
+      const { preventAppStylesOverwriting } = appSettingsComp.getView();
+      const { themeId } = theme || {}; 
+      const { appliedThemeId, preventStyleOverwriting } = comp?.comp || {};
+      const appTheme = !preventStyleOverwriting && !preventAppStylesOverwriting
+        ? theme?.theme
+        : undefined;
+      const compTheme = compType && !preventStyleOverwriting && !preventAppStylesOverwriting
         ? {
-            ...(defaultTheme.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>,
             ...(theme?.theme?.components?.[compType]?.[styleKey] || {}) as unknown as Record<string, string>
           }
         : undefined;
+      const styleProps = preventStyleOverwriting || preventAppStylesOverwriting || appliedThemeId === themeId
+        ? props as ColorMap
+        : {} as ColorMap;
+      
 
       return calcColors(
-        overwriteStyles && !Boolean(comp?.comp?.themeApplied) ? {} as ColorMap : props as ColorMap,
+        styleProps,
         colorConfigs,
-        theme?.theme,
+        appTheme,
         bgColor,
         compTheme as Record<string, string> | undefined,
       );
diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -24,12 +24,15 @@ import {
 } from "./withMethodExposing";
 import { Section } from "lowcoder-design";
 import { trans } from "i18n";
+import { BoolControl } from "../controls/boolControl";
+import { valueComp, withDefault } from "./simpleGenerators";
 
 export type NewChildren<ChildrenCompMap extends Record<string, Comp<unknown>>> =
   ChildrenCompMap & {
     hidden: InstanceType<typeof BoolCodeControl>;
     className: InstanceType<typeof StringControl>;
     dataTestId: InstanceType<typeof StringControl>;
+    preventStyleOverwriting: InstanceType<typeof BoolControl>;
   };
 
 export function HidableView(props: {
@@ -67,6 +70,7 @@ export function ExtendedPropertyView<
       <Section name={trans("prop.component")}>
         {props.childrenMap.className?.propertyView({ label: trans("prop.className") })}
         {props.childrenMap.dataTestId?.propertyView({ label: trans("prop.dataTestId") })}
+        {props.childrenMap.preventStyleOverwriting?.propertyView({ label: trans("prop.preventOverwriting") })}
       </Section>
     </>
   );
@@ -81,7 +85,9 @@ export function uiChildren<
     ...childrenMap,
     hidden: BoolCodeControl,
     className: StringControl,
-    dataTestId: StringControl
+    dataTestId: StringControl,
+    preventStyleOverwriting: withDefault(BoolControl, false),
+    appliedThemeId: valueComp<string>(''),
   } as any;
 }
 
@@ -149,7 +155,7 @@ export class UICompBuilder<
   }
 
   build() {
-    const reservedProps = ["hidden", "className", "dataTestId"];
+    const reservedProps = ["hidden", "className", "dataTestId", "preventStyleOverwriting", "appliedThemeId"];
     for (const reservedProp of reservedProps) {
       if (this.childrenMap.hasOwnProperty(reservedProp)) {
         throw new Error(`Property »${reservedProp}« is reserved and must not be implemented in components!`);
diff --git a/client/packages/lowcoder/src/comps/utils/themeContext.tsx b/client/packages/lowcoder/src/comps/utils/themeContext.tsx
@@ -4,6 +4,6 @@ import React from "react";
 export class Theme {
   readonly theme?: ThemeDetail;
   readonly previewTheme?: ThemeDetail;
-  readonly overwriteStyles?: boolean;
+  readonly themeId?: string;
 }
 export const ThemeContext = React.createContext<Theme | undefined>(undefined);
diff --git a/client/packages/lowcoder/src/comps/utils/themeUtil.ts b/client/packages/lowcoder/src/comps/utils/themeUtil.ts
@@ -1,7 +1,7 @@
 import { ThemeType } from "api/commonSettingApi";
 import { getLocalThemeId } from "util/localStorageUtil";
 import { getGlobalSettings } from "./globalSettings";
-import { CompAction, multiChangeAction, changeValueAction } from "lowcoder-core";
+import { CompAction, multiChangeAction, changeValueAction, deferAction } from "lowcoder-core";
 import { JSONObject, JSONValue } from "@lowcoder-ee/util/jsonTypes";
 
 export const DEFAULT_THEMEID = "default";
@@ -27,22 +27,29 @@ export function setInitialCompStyles({
   dispatch,
   compTheme,
   styleProps,
+  themeId,
 }: {
   dispatch: (action: CompAction) => void,
   compTheme?: JSONObject,
   styleProps: Record<string, any>,
+  themeId?: string,
 }) {
   const styleKeys = Object.keys(styleProps);
-  const actions: Record<string, any> = {};
+  const actions: Record<string, any> = {
+    appliedThemeId: changeValueAction(themeId || '', true),
+  };
   styleKeys.forEach(styleKey => {
     actions[styleKey] = changeValueAction({
       ...(compTheme?.[styleKey] as object || {}),
       ...styleProps[styleKey],
-    }, false);
+    }, true);
   })
-  actions['themeApplied'] = changeValueAction(true, false);
 
-  dispatch(
-    multiChangeAction(actions),
-  );
+  setTimeout(() => {
+    dispatch(
+      deferAction(
+        multiChangeAction(actions),
+      )
+    );
+  }, 1000)
 }
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -216,6 +216,7 @@ export const en = {
     "component": "Own Component Identifiers",
     "className": "CSS Class name",
     "dataTestId": "Individual ID",
+    "preventOverwriting": "Prevent overwriting styles",
   },
   "autoHeightProp": {
     "auto": "Auto",
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -444,10 +444,13 @@ class GridLayout extends React.Component<GridLayoutProps, GridLayoutState> {
     const selectable = isSelectable;
     const positionParams = genPositionParams(this.props);
     return (
-      <CompContext.Provider value={{
-        compType: extraItem?.compType,
-        comp: extraItem?.comp?.toJsonValue(),
-      }}>
+      <CompContext.Provider
+        key={item.i}
+        value={{
+          compType: extraItem?.compType,
+          comp: extraItem?.comp?.toJsonValue(),
+        }}
+      >
         <CompTypeContext.Provider value={extraItem?.compType}>
           <GridItem
             compType={extraItem?.compType}
diff --git a/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx b/client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx
@@ -11,7 +11,7 @@ const NoShake = css`
   transform-style: preserve-3d;
 `;
 
-export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: boolean }>`
   ${NoShake};
   padding: 3px;
   background: #ffffff;
@@ -39,6 +39,17 @@ export const CompIconDiv = styled.div<{ $h: number; $w: number }>`
     transform-style: preserve-3d;
     backface-visibility: hidden;
   }
+  
+  ${(props) => props.$isSelected && `
+    ${NoShake};
+    padding: 0;
+    transform: scale(1.05);
+    transition: all 0.2s ease;
+    border: 2px solid #b3c4ff;
+    box-shadow: 0 0 5px 0 rgba(51, 119, 255, 0.15);
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+  `}
 `;
 
 export const RightPanelContentWrapper = styled.div`
diff --git a/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx b/client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx
@@ -11,7 +11,6 @@ import {
   EmptyCompContent,
   RightPanelContentWrapper,
 } from "pages/editor/right/styledComponent";
-import { tableDragClassName } from "pages/tutorials/tutorialsConstant";
 import React, { Fragment, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import {
@@ -68,12 +67,21 @@ const HovDiv = styled.div`
   &:hover + ${CompNameLabel} {
     color: #315efb;
   }
+  
+  &.selected + ${CompNameLabel} {
+    font-weight: 500;
+    color: #315efb;
+  }
 `;
 
-const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
-  const { Icon } = props;
+const IconContain = (props: {
+  Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>,
+  isSelected: boolean,
+}) => {
+  const { Icon, isSelected } = props;
+  console.log(isSelected);
   return (
-    <CompIconDiv $w={64} $h={64}>
+    <CompIconDiv $w={64} $h={64} $isSelected={isSelected}>
       <Icon />
     </CompIconDiv>
   );
@@ -85,6 +93,7 @@ const InsertContain = styled.div`
   padding: 4px 0 0 0;
   box-sizing: border-box;
   gap: 8px;
+  margin: 0 1px;
 `;
 
 const SectionWrapper = styled.div`
@@ -218,11 +227,11 @@ export const ThemeCompPanel = (props: any) => {
         layout: {
           [compKey]: {
             ...compInfo.layoutInfo,
-            w: (compInfo?.layoutInfo?.w || 5) * 1.5,
+            w: (compInfo?.layoutInfo?.w || 5) * 2,
             h: (compInfo?.layoutInfo?.h || 5),
             i: compKey,
-            x: 2,
-            y: 2,
+            x: 1,
+            y: 1,
           }
         }
       }
@@ -256,9 +265,9 @@ export const ThemeCompPanel = (props: any) => {
               >
                 <InsertContain>
                   {infos.map((info) => (
-                    <CompDiv key={info[0]} className={info[0] === "table" ? tableDragClassName : ""} onClick={() => onCompSelect(info)}>
-                      <HovDiv>
-                        <IconContain Icon={info[1].icon}></IconContain>
+                    <CompDiv key={info[0]} onClick={() => onCompSelect(info)}>
+                      <HovDiv className={info[0] === selectedComp ? 'selected' : ''}>
+                        <IconContain isSelected={info[0] === selectedComp} Icon={info[1].icon}></IconContain>
                       </HovDiv>
                       <CompNameLabel>{info[1].name}</CompNameLabel>
                       {language !== "en" && <CompEnNameLabel>{info[1].enName}</CompEnNameLabel>}
@@ -270,7 +279,7 @@ export const ThemeCompPanel = (props: any) => {
           );
         })
         .filter((t) => t != null),
-    [categories, searchValue]
+    [categories, searchValue, selectedComp]
   );
 
   const stylePropertyView = useMemo(() => {
@@ -322,14 +331,17 @@ export const ThemeCompPanel = (props: any) => {
   // )
 
   return (
-    <Card style={{ marginBottom: "20px", minHeight : "200px" }}>
+    <Card
+      style={{ marginBottom: "20px", minHeight : "200px" }}
+      bodyStyle={{ padding: '24px 14px'}}
+    >
       <Flex style={{
         height: "650px",
         overflow: "hidden",
         gap: "middle",
       }}>
         <RightPanelContentWrapper style={{
-          padding: "12px",
+          padding: "0",
           overflow: "auto",
         }}>
           <Input.Search

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,6 @@ export interface ThemeType {`
`35`	`35`	`id: string;`
`36`	`36`	`updateTime: number;`
`37`	`37`	`theme: ThemeDetail;`
`38`		`- overwriteStyles?: boolean;`
`39`	`38`	`}`
`40`	`39`
`41`	`40`	`export interface ThemeDetail {`
Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@ import React from "react";`
`4`	`4`	`export class Theme {`
`5`	`5`	`readonly theme?: ThemeDetail;`
`6`	`6`	`readonly previewTheme?: ThemeDetail;`
`7`		`- readonly overwriteStyles?: boolean;`
	`7`	`+ readonly themeId?: string;`
`8`	`8`	`}`
`9`	`9`	`export const ThemeContext = React.createContext<Theme \| undefined>(undefined);`