Modify Right Sidebar layout, due to addition of 'custom css'

aghontpi · Oct 30, 2021 · 3402b46 · 3402b46
1 parent a862fab
commit 3402b46
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 57 deletions.
diff --git a/src/Components/BodyAttributes.tsx b/src/Components/BodyAttributes.tsx
@@ -6,8 +6,6 @@ import { Background } from './Mods/Background';
 import { Width } from './Mods/WidthHeight';
 import { Title as TitleMod } from './Mods/Title';
 import { UNDOREDO } from '../Utils/undoRedo';
-import { AddCustomFonts } from './Mods/AddCustomFonts';
-import { CustomCss } from './Mods/CustomCss';
 
 export const BODY_PATH = 'children[1]';
 
@@ -27,7 +25,6 @@ const BodyContainer = styled.div`
 const BodyAttributes = () => {
   const { mjmlJson } = useEditor();
   const [titleIndex, setTitleIndex] = useState<number>(-1);
-  const [cssIndex, setCssIndex] = useState<number>(-1);
 
   useEffect(() => {
     // taking advantage of the fact that head tag always has a static path
@@ -45,8 +42,6 @@ const BodyAttributes = () => {
           const child = children[i];
           if (child && child.tagName && child.tagName.includes('title')) {
             setTitleIndex(i);
-          } else if (child.tagName.includes('style')) {
-            setCssIndex(i);
           }
         }
       }
@@ -64,24 +59,10 @@ const BodyAttributes = () => {
     >
       <Title title="Body Properties" />
       <div className="props-container">
+        <TitleMod itemIndex={titleIndex} />
         <Width activePath={BODY_PATH} />
         <Background activePath={BODY_PATH} label="Body Background:" />
       </div>
-      <Title title="Head Properties" />
-
-      <div className="props-container">
-        <TitleMod itemIndex={titleIndex} />
-      </div>
-
-      <Title title="Fonts" />
-      <div className="props-container">
-        <AddCustomFonts />
-      </div>
-
-      <Title title="Custom CSS" />
-      <div className="props-container">
-        {cssIndex !== -1 ? <CustomCss itemIndex={cssIndex} /> : <label>something went wrong</label>}
-      </div>
     </BodyContainer>
   );
 };
@@ -96,4 +77,4 @@ const Title = ({ title }: { title: string }) => {
   );
 };
 
-export { BodyAttributes };
+export { BodyAttributes, BodyContainer as SideBarDefaultLayout, Title as SideBarDefaultTitle };
diff --git a/src/Components/Mods/CustomCss.tsx b/src/Components/Mods/CustomCss.tsx
@@ -3,29 +3,26 @@ import _ from 'lodash';
 import { useEffect, useState } from 'react';
 import { useEditor } from '../../Hooks/Editor.hook';
 
-interface CustomCssProps {
-  itemIndex: number;
-}
+const STYLEPATH = `children[0].children[1]`;
 
-const CustomCss = ({ itemIndex: index }: CustomCssProps) => {
-  const STYLEPATH = `children[0].children[${index}]`;
+const CustomCss = () => {
   const { mjmlJson, setMjmlJson } = useEditor();
   const [value, setValue] = useState('');
   const [isActive, setIsActive] = useState(false);
 
   useEffect(() => {
     if (mjmlJson) {
-      const style = mjmlJson.children[0].children[index];
+      const style = mjmlJson.children[0].children[1];
       if (style && style.tagName.includes('style')) {
         const _value = style.content;
         setValue(_value);
       }
     }
-  }, [index]);
+  }, []);
 
   useEffect(() => {
     if (mjmlJson && isActive === false) {
-      const style = mjmlJson.children[0].children[index];
+      const style = mjmlJson.children[0].children[1];
       if (style && style.tagName.includes('style')) {
         const _value = style.content;
         setValue(_value);
@@ -59,9 +56,7 @@ const CustomCss = ({ itemIndex: index }: CustomCssProps) => {
   return (
     <Form.Item>
       <Row gutter={[0, 8]}>
-        <Col span={24}>
-          <span className="ant-form-item-label">Content:</span>
-        </Col>
+        <Col span={24}>{/* <span className="ant-form-item-label">Content:</span> */}</Col>
         <Col span={24}>
           <Input.TextArea
             spellCheck={false}

diff --git a/src/Components/Mods/HeadStyle.ts b/src/Components/Mods/HeadStyle.ts
@@ -1 +1,3 @@
-export const HEADSTYLE = 'a{text-decoration:none!important} .body {} ';
+export const HEADSTYLE = `a{text-decoration:none!important}
+
+.body {} `;
diff --git a/src/Pages/Editor/Attributes.tsx b/src/Pages/Editor/Attributes.tsx
@@ -23,9 +23,11 @@ import { VerticalAlign } from '../../Components/Mods/VerticalAlign';
 import { BackgroundImage } from '../../Components/Mods/BackgroundImage';
 import { ColumnAttributes } from '../../Components/ColumnAttributes';
 import { useHtmlWrapper } from '../../Hooks/Htmlwrapper.hook';
-import { useEffect, useRef, useState } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { LineHeight } from '../../Components/Mods/LineHeight';
-import { BodyAttributes } from '../../Components/BodyAttributes';
+import { BodyAttributes, SideBarDefaultLayout, SideBarDefaultTitle } from '../../Components/BodyAttributes';
+import { CustomCss } from '../../Components/Mods/CustomCss';
+import { AddCustomFonts } from '../../Components/Mods/AddCustomFonts';
 
 const { TabPane } = Tabs;
 
@@ -41,8 +43,22 @@ const CustomTabs = styled(Tabs)`
   }
 `;
 
+const Title = ({ title }: { title: string }) => {
+  return (
+    <>
+      {title.split(' ').map((word, index) => {
+        return (
+          <Fragment key={index + word}>
+            {index !== 0 && <br />}
+            <span style={{ fontSize: '12px' }}>{word}</span>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+};
+
 export const Attributes = () => {
-  const { mjmlJson } = useEditor();
   const { active } = useHtmlWrapper();
   const [isColumn, setIsColumn] = useState(false);
 
@@ -63,41 +79,44 @@ export const Attributes = () => {
       size="small"
       tabBarGutter={1}
     >
-      <TabPane tab={<span style={{ fontSize: '12px' }}>layout</span>} key="2">
+      <TabPane tab={<Title title="layout" />} key="2">
         <Scrollbars style={{ height: '100%' }} autoHide={true}>
           <div className={css.columns}>
             <ColumnSelector />
           </div>
         </Scrollbars>
       </TabPane>
-      <TabPane
-        tab={
-          <>
-            <span style={{ fontSize: '12px' }}>layout</span>
-            <br />
-            <span style={{ fontSize: '12px' }}>config</span>
-          </>
-        }
-        key="3"
-      >
+      <TabPane tab={<Title title="layout config" />} key="3">
         <Scrollbars style={{ height: '100%' }} autoHide={true}>
           <ColumnAttributes />
         </Scrollbars>
       </TabPane>
-      <TabPane
-        tab={
-          <>
-            <span style={{ fontSize: '12px' }}>body</span>
-            <br />
-            <span style={{ fontSize: '12px' }}>config</span>
-          </>
-        }
-        key="4"
-      >
+      <TabPane tab={<Title title="body config" />} key="4">
         <Scrollbars style={{ height: '100%' }} autoHide={true}>
           <BodyAttributes />
         </Scrollbars>
       </TabPane>
+      <TabPane tab={<Title title="fonts config" />} key="5">
+        <Scrollbars style={{ height: '100%' }} autoHide={true}>
+          <SideBarDefaultLayout>
+            <SideBarDefaultTitle title="Fonts" />
+            <div className="props-container">
+              <AddCustomFonts />
+            </div>
+          </SideBarDefaultLayout>
+        </Scrollbars>
+      </TabPane>
+      <TabPane tab={<Title title="custom css" />} key="6">
+        <Scrollbars style={{ height: '100%' }} autoHide={true}>
+          <SideBarDefaultLayout>
+            <SideBarDefaultTitle title="Custom css" />
+
+            <div className="props-container">
+              <CustomCss />
+            </div>
+          </SideBarDefaultLayout>
+        </Scrollbars>
+      </TabPane>
     </CustomTabs>
   );
 };