refactor: removed fixed positioning on form designer

shesha-io · Jul 25, 2023 · 2980fdc · 2980fdc
1 parent 1cc8c0a
commit 2980fdc
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 111 deletions.
diff --git a/shesha-reactjs/src/components/collapsibleSidebarContainer/styles/index.less b/shesha-reactjs/src/components/collapsibleSidebarContainer/styles/index.less
@@ -43,20 +43,6 @@
         }
       }
 
-      &.fixed-position {
-        position: fixed;
-        z-index: 1;
-        top: 156px;
-        bottom: 0;
-        overflow-y: scroll;
-        overflow-x: hidden;
-        min-height: unset;
-      }
-
-      &.fixed-position-right {
-        right: 0;
-      }
-
       background: white;
       .transition();
 
@@ -176,26 +162,6 @@
       &::not(.no-padding) {
         padding: @padding-lg;
       }
-
-      &.fixed-left-open {
-        margin-top: 101px;
-        margin-left: 368px;
-      }
-
-      &.fixed-right-open {
-        margin-top: 101px;
-        margin-right: 350px;
-      }
-
-      &.fixed-left-close {
-        margin-top: 101px;
-        margin-left: 76px;
-      }
-
-      &.fixed-right-close {
-        margin-top: 101px;
-        margin-right: 76px;
-      }
     }
   }
 }

diff --git a/shesha-reactjs/src/components/formDesigner/formDesignerRenderer.tsx b/shesha-reactjs/src/components/formDesigner/formDesignerRenderer.tsx
@@ -6,16 +6,14 @@ import FormDesignerToolbar from './formDesignerToolbar';
 import ComponentPropertiesPanel from './componentPropertiesPanel';
 import ComponentPropertiesTitle from './componentPropertiesTitle';
 import { useForm } from '../../providers/form';
-import { MetadataProvider, useSheshaApplication } from '../../providers';
+import { MetadataProvider } from '../../providers';
 import ConditionalWrap from '../conditionalWrapper';
 import { useFormPersister } from '../../providers/formPersisterProvider';
 import { useFormDesigner } from '../../providers/formDesigner';
 import StatusTag from '../statusTag';
 import { FORM_STATUS_MAPPING } from '../../utils/configurationFramework/models';
 import { getFormFullName } from '../../utils/form';
 import HelpTextPopover from '../helpTextPopover';
-import classNames from 'classnames';
-import { getInitIsExpanded } from './util';
 
 const { Title } = Typography;
 
@@ -24,10 +22,6 @@ export const FormDesignerRenderer: FC = ({}) => {
   const [fieldPropertiesOpen, setFieldPropertiesOpen] = useState(true);
   const { formProps } = useFormPersister();
 
-  const { globalVariables: { isSideBarExpanded } = {} } = useSheshaApplication();
-
-  const isExpanded = typeof isSideBarExpanded == 'boolean' ? isSideBarExpanded : getInitIsExpanded();
-
   const toggleWidgetSidebar = () => setWidgetOpen((widget) => !widget);
 
   const toggleFieldPropertiesSidebar = () => setFieldPropertiesOpen((prop) => !prop);
@@ -40,7 +34,7 @@ export const FormDesignerRenderer: FC = ({}) => {
 
   return (
     <div className="sha-page">
-      <div className="sha-page-heading sha-form-heading-fixed">
+      <div className="sha-page-heading">
         <div className="sha-page-title" style={{ justifyContent: 'left' }}>
           <Space>
             {title && (
@@ -62,9 +56,7 @@ export const FormDesignerRenderer: FC = ({}) => {
             </MetadataProvider>
           )}
         >
-          <FormDesignerToolbar
-            className={classNames('sha-toolbar-fixed', { 'opened-sidebar': isExpanded, 'closed-sidebar': !isExpanded })}
-          />
+          <FormDesignerToolbar />
           <SidebarContainer
             leftSidebarProps={
               readOnly
@@ -76,7 +68,6 @@ export const FormDesignerRenderer: FC = ({}) => {
                     title: 'Builder Widgets',
                     content: () => <Toolbox />,
                     placeholder: 'Builder Widgets',
-                    fixedPositon: true,
                   }
             }
             rightSidebarProps={{
@@ -86,7 +77,6 @@ export const FormDesignerRenderer: FC = ({}) => {
               title: () => <ComponentPropertiesTitle />,
               content: () => <ComponentPropertiesPanel />,
               placeholder: 'Properties',
-              fixedPositon: true,
             }}
           >
             <ConfigurableFormRenderer form={form}>

diff --git a/shesha-reactjs/src/components/formDesigner/formDesignerToolbar.tsx b/shesha-reactjs/src/components/formDesigner/formDesignerToolbar.tsx
@@ -27,13 +27,10 @@ import {
   updateItemStatus,
 } from '../../utils/configurationFramework/actions';
 import { useShaRouting, useSheshaApplication } from '../..';
-import classNames from 'classnames';
 
-export interface IProps {
-  className?: string;
-}
+export interface IProps {}
 
-export const FormDesignerToolbar: FC<IProps> = ({ className }) => {
+export const FormDesignerToolbar: FC<IProps> = () => {
   const { loadForm, saveForm, formProps } = useFormPersister();
   const { backendUrl, httpHeaders, routes } = useSheshaApplication();
   const { router } = useShaRouting(false) ?? {};
@@ -195,7 +192,7 @@ export const FormDesignerToolbar: FC<IProps> = ({ className }) => {
   );
 
   return (
-    <div className={classNames('sha-designer-toolbar', className)}>
+    <div className="sha-designer-toolbar">
       <div className="sha-designer-toolbar-left">
         {!readOnly && (
           <Dropdown.Button icon={<DownOutlined />} overlay={saveMenu} onClick={onSaveClick} type="primary">

diff --git a/shesha-reactjs/src/components/formDesigner/styles/index.less b/shesha-reactjs/src/components/formDesigner/styles/index.less
@@ -44,20 +44,6 @@
     display: flex;
     justify-content: space-between;
 
-    &.sha-toolbar-fixed {
-      position: fixed;
-      z-index: 1;
-      top: 100px;
-
-      &.opened-sidebar {
-        width: calc(100% - 248px);
-      }
-
-      &.closed-sidebar {
-        width: calc(100% - 58px);
-      }
-    }
-
     .sha-designer-toolbar-left {
       float: left;
 

diff --git a/shesha-reactjs/src/components/formDesigner/util.ts b/shesha-reactjs/src/components/formDesigner/util.ts
diff --git a/shesha-reactjs/src/components/page/styles/index.less b/shesha-reactjs/src/components/page/styles/index.less
@@ -15,12 +15,6 @@
   }
 }
 
-.sha-form-heading-fixed {
-  position: fixed;
-  z-index: 1;
-  width: 100%;
-}
-
 .sha-page-heading {
   min-height: @sha-page-heading-height;
   max-height: @sha-page-heading-height;

diff --git a/shesha-reactjs/src/components/sidebarContainer/index.tsx b/shesha-reactjs/src/components/sidebarContainer/index.tsx
@@ -32,11 +32,6 @@ interface ISidebarProps {
   onClose?: () => void;
 
   placeholder?: string;
-
-  /**
-   * Indicates whether the sidebar is in a fixed position
-   */
-  fixedPositon?: boolean;
 }
 
 export interface ISidebarContainerProps extends PropsWithChildren<any> {
@@ -77,22 +72,10 @@ export const SidebarContainer: FC<ISidebarContainerProps> = ({
 
     const rotation = side === 'right' ? (sidebarProps?.open ? 0 : 180) : sidebarProps?.open ? 180 : 0;
 
-    const { open, onOpen, title, onClose, placeholder, content, fixedPositon } = sidebarProps;
-
-    const classFixedPositon = {
-      'fixed-position': fixedPositon,
-      'fixed-position-right': fixedPositon && side === 'right',
-    };
+    const { open, onOpen, title, onClose, placeholder, content } = sidebarProps;
 
     return (
-      <div
-        className={classNames(
-          `sidebar-container-${side}`,
-          { open },
-          { 'allow-full-collapse': allowFullCollapse },
-          classFixedPositon
-        )}
-      >
+      <div className={classNames(`sidebar-container-${side}`, { open }, { 'allow-full-collapse': allowFullCollapse })}>
         <div className="sidebar-header">
           <div className={`sidebar-header-title ${side}`}>{typeof title === 'function' ? title() : title}</div>
           <div className={`sidebar-header-btn ${side}`} onClick={open ? onClose : onOpen}>
@@ -130,12 +113,7 @@ export const SidebarContainer: FC<ISidebarContainerProps> = ({
             { 'right-only-open': rightSidebarProps?.open && !leftSidebarProps?.open },
             { 'no-left-panel': !leftSidebarProps },
             { 'no-right-panel': !rightSidebarProps },
-            { 'allow-full-collapse': allowFullCollapse },
-
-            { 'fixed-left-open': leftSidebarProps?.fixedPositon && leftSidebarProps?.open },
-            { 'fixed-right-open': rightSidebarProps?.fixedPositon && rightSidebarProps?.open },
-            { 'fixed-left-close': leftSidebarProps?.fixedPositon && !leftSidebarProps?.open },
-            { 'fixed-right-close': rightSidebarProps?.fixedPositon && !rightSidebarProps?.open }
+            { 'allow-full-collapse': allowFullCollapse }
           )}
         >
           <div className="sidebar-container-main-area-body">{children}</div>