Merge pull request #371 from shesha-io/fix/form-designer-styling-issues

Fix/form designer styling issues
shesha-io · Jul 20, 2023 · bc6df20 · bc6df20
2 parents c1e7308 + c032a44
commit bc6df20
Show file tree

Hide file tree

Showing 12 changed files with 549 additions and 418 deletions.
diff --git a/shesha-reactjs/src/components/dataList/index.tsx b/shesha-reactjs/src/components/dataList/index.tsx
diff --git a/shesha-reactjs/src/components/dataList/styles/index.less b/shesha-reactjs/src/components/dataList/styles/index.less
@@ -0,0 +1,5 @@
+.sha-list-component-body {
+  .sha-list-component-divider {
+    margin: 8px 0 0 0;
+  }
+}
diff --git a/shesha-reactjs/src/components/formDesigner/components/columns/columns.tsx b/shesha-reactjs/src/components/formDesigner/components/columns/columns.tsx
@@ -4,22 +4,25 @@ import { SplitCellsOutlined } from '@ant-design/icons';
 import { Row, Col } from 'antd';
 import ColumnsSettings from './columnsSettings';
 import ComponentsContainer from '../../containers/componentsContainer';
-import { useForm } from '../../../../providers';
+import { useForm, useFormData, useGlobalState } from '../../../../providers';
 import { nanoid } from 'nanoid/non-secure';
 import { IColumnsComponentProps } from './interfaces';
+import { getStyle } from 'utils/publicUtils';
 
 const ColumnsComponent: IToolboxComponent<IColumnsComponentProps> = {
   type: 'columns',
   name: 'Columns',
   icon: <SplitCellsOutlined />,
-  factory: model => {
+  factory: (model) => {
     const { isComponentHidden } = useForm();
+    const { data } = useFormData();
+    const { globalState } = useGlobalState();
     const { columns, gutterX = 0, gutterY = 0 } = model as IColumnsComponentProps;
 
     if (isComponentHidden(model)) return null;
 
     return (
-      <Row gutter={[gutterX, gutterY]}>
+      <Row gutter={[gutterX, gutterY]} style={getStyle(model?.style, data, globalState)}>
         {columns &&
           columns.map((col, index) => (
             <Col
@@ -33,15 +36,15 @@ const ColumnsComponent: IToolboxComponent<IColumnsComponentProps> = {
               <ComponentsContainer
                 containerId={col.id}
                 dynamicComponents={
-                  model?.isDynamic ? col?.components?.map(c => ({ ...c, readOnly: model?.readOnly })) : []
+                  model?.isDynamic ? col?.components?.map((c) => ({ ...c, readOnly: model?.readOnly })) : []
                 }
               />
             </Col>
           ))}
       </Row>
     );
   },
-  initModel: model => {
+  initModel: (model) => {
     const tabsModel: IColumnsComponentProps = {
       ...model,
       name: 'custom Name',

diff --git a/shesha-reactjs/src/components/formDesigner/components/columns/columnsSettings.tsx b/shesha-reactjs/src/components/formDesigner/components/columns/columnsSettings.tsx
@@ -2,6 +2,9 @@ import React from 'react';
 import { Form, Input, InputNumber } from 'antd';
 import { IColumnsComponentProps } from './interfaces';
 import ColumnsList from './columnsList';
+import { EXPOSED_VARIABLES } from './exposedVariables';
+import CodeEditor from '../codeEditor/codeEditor';
+import SectionSeparator from 'components/sectionSeparator';
 
 export interface IProps {
   readOnly: boolean;
@@ -17,23 +20,55 @@ function ColumnsSettings({ readOnly, onSave, model, onValuesChange }: IProps) {
   return (
     <Form form={form} onFinish={onSave} layout="vertical" onValuesChange={onValuesChange}>
       <Form.Item name="name" label="Name" rules={[{ required: true }]} initialValue={model?.name}>
-        <Input readOnly={readOnly}/>
+        <Input readOnly={readOnly} />
       </Form.Item>
 
       <Form.Item name="gutterX" label="Gutter X" initialValue={model?.gutterX}>
-        <InputNumber min={1} max={48} step={4} readOnly={readOnly}/>
+        <InputNumber min={1} max={48} step={4} readOnly={readOnly} />
       </Form.Item>
 
       <Form.Item name="gutterY" label="Gutter Y" initialValue={model?.gutterX}>
-        <InputNumber min={1} max={48} step={4} readOnly={readOnly}/>
+        <InputNumber min={1} max={48} step={4} readOnly={readOnly} />
       </Form.Item>
 
       <Form.Item name="label" label="Label" initialValue={model?.label}>
-        <Input readOnly={readOnly}/>
+        <Input readOnly={readOnly} />
       </Form.Item>
 
       <Form.Item name="columns" label="Columns" initialValue={model?.columns || []}>
-        <ColumnsList readOnly={readOnly}/>
+        <ColumnsList readOnly={readOnly} />
+      </Form.Item>
+
+      <SectionSeparator title="Style" />
+
+      <Form.Item name="style" label="Style" initialValue={model?.style}>
+        <CodeEditor
+          id={''}
+          name="style"
+          readOnly={readOnly}
+          mode="dialog"
+          label="Style"
+          setOptions={{ minLines: 20, maxLines: 500, fixedWidthGutter: true }}
+          type={''}
+          description="A script that returns the style of the element as an object. This should conform to CSSProperties"
+          exposedVariables={EXPOSED_VARIABLES}
+        />
+      </Form.Item>
+
+      <SectionSeparator title="Visibility" />
+
+      <Form.Item name="customVisibility" label="Custom Visibility" initialValue={model?.customVisibility}>
+        <CodeEditor
+          id={''}
+          name="customVisibility"
+          readOnly={readOnly}
+          mode="dialog"
+          label="Custom Visibility"
+          setOptions={{ minLines: 20, maxLines: 500, fixedWidthGutter: true }}
+          type={''}
+          description="Enter custom visibility code.  You must return true to show the component. The global variable data is provided, and allows you to access the data of any form component, by using its API key."
+          exposedVariables={EXPOSED_VARIABLES}
+        />
       </Form.Item>
     </Form>
   );

diff --git a/shesha-reactjs/src/components/formDesigner/components/columns/exposedVariables.ts b/shesha-reactjs/src/components/formDesigner/components/columns/exposedVariables.ts
@@ -0,0 +1,26 @@
+export const EXPOSED_VARIABLES = [
+  {
+    id: 'd430d31c-9360-4b57-96cc-3c322de31e58',
+    name: 'value',
+    description: 'Item value (if this is rendered in a SubForm)',
+    type: 'any',
+  },
+  {
+    id: 'd430d31c-9360-4b57-96cc-3c322de31e57',
+    name: 'formMode',
+    description: 'Selected form values',
+    type: "'edit' | 'readonly' | 'designer'",
+  },
+  {
+    id: 'd430d31c-9360-4b57-96cc-3c322de31e59',
+    name: 'data',
+    description: 'Selected form values',
+    type: 'object',
+  },
+  {
+    id: '5a367dfe-70e4-4521-96ba-bdee1336592a',
+    name: 'globalState',
+    description: 'The global state of the application',
+    type: 'object',
+  },
+];
diff --git a/shesha-reactjs/src/components/formDesigner/components/columns/interfaces.ts b/shesha-reactjs/src/components/formDesigner/components/columns/interfaces.ts
@@ -1,16 +1,18 @@
 import { IConfigurableFormComponent } from '../../../../providers/form/models';
 
 export interface IColumnProps {
-    id: string;
-    flex: number;
-    offset: number;
-    push: number;
-    pull: number;
-    components: IConfigurableFormComponent[];
+  id: string;
+  flex: number;
+  offset: number;
+  push: number;
+  pull: number;
+  components: IConfigurableFormComponent[];
 }
 
 export interface IColumnsComponentProps extends IConfigurableFormComponent {
-    columns: IColumnProps[];
-    gutterX?: number;
-    gutterY?: number;
-}
+  columns: IColumnProps[];
+  gutterX?: number;
+  gutterY?: number;
+  style?: string;
+  customVisibility?: string;
+}
diff --git a/shesha-reactjs/src/components/formDesigner/components/statusTag/index.tsx b/shesha-reactjs/src/components/formDesigner/components/statusTag/index.tsx
@@ -5,7 +5,7 @@ import { useGlobalState, useFormData } from '../../../../providers';
 import { evaluateString, validateConfigurableComponentSettings } from '../../../../formDesignerUtils';
 import { IConfigurableFormComponent, IToolboxComponent } from '../../../../interfaces/formDesigner';
 import { useForm } from '../../../../providers/form';
-import { executeCustomExpression } from '../../../../providers/form/utils';
+import { executeCustomExpression, getStyle } from '../../../../providers/form/utils';
 import StatusTag, { DEFAULT_STATUS_TAG_MAPPINGS, IStatusTagProps as ITagProps } from '../../../statusTag';
 import ConfigurableFormItem from '../formItem';
 import { getSettings } from './settings';
@@ -97,7 +97,7 @@ const StatusTagComponent: IToolboxComponent<IStatusTagProps> = {
         condition={model?.valueSource === 'form'}
         wrap={(children) => <ConfigurableFormItem model={model}>{children}</ConfigurableFormItem>}
       >
-        <StatusTag {...props} />
+        <StatusTag {...props} style={getStyle(model?.style, data, globalState)} />
       </ConditionalWrap>
     );
   },

diff --git a/shesha-reactjs/src/components/formDesigner/components/statusTag/settings.ts b/shesha-reactjs/src/components/formDesigner/components/statusTag/settings.ts
@@ -1,5 +1,5 @@
+import { nanoid } from 'nanoid/non-secure';
 import { DesignerToolbarSettings } from 'interfaces/toolbarSettings';
-import { nanoid } from 'nanoid';
 
 export const getSettings = () =>
   new DesignerToolbarSettings()
@@ -126,6 +126,19 @@ export const getSettings = () =>
       description: 'Enter the JSON object that should match the structure of the default one provided',
       validate: {},
     })
+    .addSectionSeparator({
+      id: '987c3de1-b959-4670-96f6-9b1747189a5e',
+      name: 'sectionStyle',
+      parentId: 'root',
+      label: 'Style',
+    })
+    .addCodeEditor({
+      id: '987c3de1-b959-4670-96f6-9b1747189a6e',
+      name: 'style',
+      label: 'Style',
+      parentId: 'root',
+      mode: 'dialog',
+    })
     .addSectionSeparator({
       id: '6befdd49-41aa-41d6-a29e-76fa00590b74',
       name: 'sectionVisibility',

diff --git a/shesha-reactjs/src/components/statusTag/addImportantFlag.ts b/shesha-reactjs/src/components/statusTag/addImportantFlag.ts
@@ -0,0 +1,20 @@
+import { IAnyObject } from 'interfaces';
+import { CSSProperties } from 'react';
+
+export const addImportant = (styleObj: IAnyObject): CSSProperties => {
+  const newObj = {};
+  for (const prop in styleObj) {
+    if (prop.startsWith('margin') || prop.startsWith('padding')) {
+      let value = styleObj[prop];
+      if (typeof value === 'number') {
+        value = `${value}px !important`;
+      } else {
+        value = `${value} !important`;
+      }
+      newObj[prop] = value;
+    } else {
+      newObj[prop] = styleObj[prop];
+    }
+  }
+  return newObj;
+};
diff --git a/shesha-reactjs/src/components/statusTag/index.tsx b/shesha-reactjs/src/components/statusTag/index.tsx
@@ -39,7 +39,6 @@ export const StatusTag: FC<IStatusTagProps> = ({
   mappings = DEFAULT_STATUS_TAG_MAPPINGS,
   style,
 }) => {
-
   const memoized = useMemo(() => {
     if (!override && !value && !color) {
       return {};

diff --git a/shesha-reactjs/src/components/timeline/styles/styles.less b/shesha-reactjs/src/components/timeline/styles/styles.less
@@ -11,9 +11,27 @@
   .sha-timeline-item {
     margin-left: 10px;
     margin-top: 10px;
+    padding-bottom: 0px;
   }
 
   .sha-timeline-extra {
     color: gray;
   }
+
+  .ant-card {
+    .ant-card-head {
+      padding: 0 12px;
+
+      .ant-card-head-wrapper {
+        .ant-card-head-title,
+        .ant-card-extra {
+          padding: 8px 0;
+        }
+      }
+    }
+
+    .ant-card-body {
+      padding: 8px;
+    }
+  }
 }
diff --git a/shesha-reactjs/src/components/timeline/timelineItem/index.tsx b/shesha-reactjs/src/components/timeline/timelineItem/index.tsx
@@ -25,7 +25,7 @@ export const TimelineItem: FC<ITimelineItemProps> = ({ title, channel, toPerson,
           </div>
         }
       >
-        <p>{body}</p>
+        <div className="timeline-body">{body}</div>
       </Card>
     </Timeline.Item>
   );