style(generator): add fixed width to the component area and configura…

…tion area (#213)
jd-opensource · Jun 7, 2022 · 663bc68 · 663bc68
1 parent 12085e5
commit 663bc68
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 29 deletions.
diff --git a/packages/generator/src/components/LeftSideBar/index.module.css b/packages/generator/src/components/LeftSideBar/index.module.css
@@ -1,13 +1,12 @@
 .left {
-  @apply transition-all w-1/5 h-full;
+  @apply transition-all h-full flex-shrink-0 flex-grow-0;
   overflow-y: scroll;
-  min-width: 320px;
+  width: calc(120px + 120px + 3.5rem);
 }
 
 .leftClose {
-  width: 10%;
-  min-width: 160px;
-  @apply transition-all;
+  width: calc(120px + 2.5rem);
+  @apply transition-all flex-shrink-0 flex-grow-0;
 }
 
 .title {
@@ -39,4 +38,4 @@
 
 .componentstyle::-webkit-scrollbar {
   display: none;
-}
+}
diff --git a/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx b/packages/generator/src/components/RightSideBar/PropertyConfig/index.tsx
@@ -14,7 +14,6 @@ import {
   propertyConfigSelector,
 } from '@generator/store'
 import useRightSidebar from '../HeadlessComponents'
-import styles from '../index.module.css'
 import { produce } from 'immer'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import generatorTheme from '@generator/components/GeneratorFormTheme'
@@ -312,16 +311,14 @@ const PropertyConfig = () => {
   }, [uiComponents])
 
   return (
-    <div className={styles.panelConfig}>
-      <DripForm
-        key={selectedFieldKey}
-        formData={formData}
-        parse={onParse}
-        control={onChangeSchema}
-        unitedSchema={unitedSchema}
-        uiComponents={newUiComponents}
-      />
-    </div>
+    <DripForm
+      key={selectedFieldKey}
+      formData={formData}
+      parse={onParse}
+      control={onChangeSchema}
+      unitedSchema={unitedSchema}
+      uiComponents={newUiComponents}
+    />
   )
 }
 

diff --git a/packages/generator/src/components/RightSideBar/index.module.css b/packages/generator/src/components/RightSideBar/index.module.css
@@ -8,17 +8,21 @@
     .array-field--container {
       margin-bottom: 0;
     }
+    .drip-form-root {
+      max-height: calc(100vh - 95px);
+      @apply pb-4 overflow-scroll;
+    }
   }
 }
 
 .container {
-  @apply w-1/4 h-full pt-2 pb-2;
-  min-width: 350px;
-  overflow: hidden scroll;
+  @apply pt-2 pb-2 h-full flex-shrink-0 flex-grow-0 overflow-y-hidden;
+  width:350px;
 }
 
 .containerjson {
-  @apply w-5/12;
+  @apply flex-shrink-0 flex-grow-0;
+  width:calc(350px + 120px + 1rem);
 }
 
 .propertyConfig {
@@ -56,11 +60,4 @@
   @apply cursor-pointer text-gray-500 hover:text-blue-500 mx-2 flex justify-between items-center;
 }
 
-.panelConfig {
-  height: calc(100vh - 160px);
-  @apply pb-4 overflow-scroll;
-}
 
-.panelConfig::-webkit-scrollbar {
-  display: none;
-}
diff --git a/packages/generator/src/components/Viewport/index.module.css b/packages/generator/src/components/Viewport/index.module.css
@@ -1,7 +1,6 @@
 .viewport {
   @apply px-3 flex-grow;
   overflow: hidden scroll;
-  max-width: 55%;
 }
 
 .formstyle {