style: udpate some style for multi theme

alibaba · Aug 31, 2023 · 47804ac · 47804ac
1 parent 81cc5de
commit 47804ac
Show file tree

Hide file tree

Showing 20 changed files with 138 additions and 871 deletions.
diff --git a/packages/designer/src/project/project.less b/packages/designer/src/project/project.less
@@ -14,7 +14,7 @@
   }
 
   .lc-simulator {
-    background: rgb(237, 239, 243);
+    background-color: var(--color-background, rgb(237, 239, 243));
   }
 
   .lc-simulator-shell {

diff --git a/packages/editor-core/src/widgets/tip/style.less b/packages/editor-core/src/widgets/tip/style.less
@@ -147,7 +147,7 @@
   z-index: 2;
   position: fixed;
   box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.7);
+  background: var(--color-layer-tooltip-background);
   max-height: 400px;
   color: var(--color-text-reverse, rgba(255, 255, 255, 0.8));
   left: 0;

diff --git a/packages/editor-skeleton/src/components/settings/style.less b/packages/editor-skeleton/src/components/settings/style.less
@@ -143,7 +143,6 @@
   .lc-outline-pane {
     position: absolute;
     z-index: 100;
-    background-color: white;
     top: 0;
     bottom: 0;
     display: none;

diff --git a/packages/editor-skeleton/src/index.ts b/packages/editor-skeleton/src/index.ts
@@ -8,3 +8,4 @@ export * from './components/popup';
 export * from './context';
 export * from './register-defaults';
 export * from './widget';
+export * from './layouts';
diff --git a/packages/editor-skeleton/src/layouts/index.ts b/packages/editor-skeleton/src/layouts/index.ts
@@ -0,0 +1,7 @@
+export { default as LeftArea } from './left-area';
+export { default as LeftFloatPane } from './left-float-pane';
+export { default as LeftFixedPane } from './left-fixed-pane';
+export { default as MainArea } from './main-area';
+export { default as BottomArea } from './bottom-area';
+export { default as TopArea } from './top-area';
+export { default as SubTopArea } from './sub-top-area';
diff --git a/packages/editor-skeleton/src/layouts/left-area.tsx b/packages/editor-skeleton/src/layouts/left-area.tsx
@@ -4,14 +4,14 @@ import { observer } from '@alilc/lowcode-editor-core';
 import { Area } from '../area';
 
 @observer
-export default class LeftArea extends Component<{ area: Area }> {
+export default class LeftArea extends Component<{ area: Area; className?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, className = 'lc-left-area' } = this.props;
     if (area.isEmpty()) {
       return null;
     }
     return (
-      <div className={classNames('lc-left-area', {
+      <div className={classNames(className, {
         'lc-area-visible': area.visible,
       })}
       >
@@ -21,7 +21,6 @@ export default class LeftArea extends Component<{ area: Area }> {
   }
 }
 
-
 @observer
 class Contents extends Component<{ area: Area }> {
   render() {

diff --git a/...es/workspace/src/layouts/sub-top-area.tsx → ...tor-skeleton/src/layouts/sub-top-area.tsx b/...es/workspace/src/layouts/sub-top-area.tsx → ...tor-skeleton/src/layouts/sub-top-area.tsx
diff --git a/packages/editor-skeleton/src/layouts/theme.less b/packages/editor-skeleton/src/layouts/theme.less
@@ -16,6 +16,7 @@
   --color-icon-hover: @normal-alpha-3;
   --color-icon-active: @brand-color-1;
   --color-icon-reverse: @white-alpha-1;
+  --color-icon-pane: @dark-alpha-3;
 
   --color-line-normal: @normal-alpha-7;
   --color-line-darken: darken(@normal-alpha-7, 10%);
@@ -57,6 +58,7 @@
   --color-block-background-deep-dark: @normal-5;
   --color-layer-mask-background: @dark-alpha-7;
   --color-layer-tooltip-background: rgba(44,47,51,0.8);
+  --color-background: #edeff3;
 
   --pane-title-bg-color: rgba(31,56,88,.04);
 }
diff --git a/packages/editor-skeleton/src/layouts/workbench.less b/packages/editor-skeleton/src/layouts/workbench.less
@@ -38,7 +38,7 @@ body {
   font-family: var(--font-family);
   font-size: var(--font-size-text);
   color: var(--color-text);
-  background-color: #edeff3;
+  background-color: var(--color-background);
 }
 
 * {
@@ -49,13 +49,10 @@ body {
   width: 100%;
   height: 100%;
   position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
   &.hidden {
     display: none;
   }
   .lc-panel-title {
-    // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
     display: flex;
     align-items: center;
     justify-content: flex-start;
@@ -71,7 +68,6 @@ body {
     height: 48px;
     font-size: 16px;
     padding: 0 15px;
-    // border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
     color: #0f1726;
     font-weight: bold;
   }
@@ -125,9 +121,6 @@ body {
   height: 100%;
   width: 100%;
   position: relative;
-  background-color: #fff;
-  background-color: var(--color-pane-background);
-  // overflow: auto;
   &.hidden {
     display: none;
   }
@@ -137,7 +130,7 @@ body {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #edeff3;
+  background-color: var(--color-background);
   position: absolute;
   left: 0;
   top: 0;
@@ -164,47 +157,58 @@ body {
 
     &.active {
       z-index: 999;
-      background: #edeff3;
+      background: var(--color-background);
     }
   }
 }
 
-.lc-workbench {
+.lc-workbench, .lc-workspace-workbench {
   height: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #edeff3;
+  background-color: var(--color-background);
 
   &.engine-main {
     height: 100%;
     display: flex;
     flex-direction: column;
-    background-color: #edeff3;
+    background-color: var(--color-background);
   }
-  .lc-top-area {
-    height: var(--top-area-height);
-    background-color: var(--color-pane-background);
+  .lc-top-area, .lc-sub-top-area {
     width: 100%;
     display: none;
     margin-bottom: 2px;
     padding: 8px 12px 8px 16px;
 
+    &.lc-top-area {
+      background-color: var(--color-top-area-background, var(--color-pane-background));
+      height: var(--top-area-height);
+    }
+
+    &.lc-sub-top-area {
+      background-color: var(--color-sub-top-area-background, var(--color-pane-background));
+      height: var(--sub-top-area-height, var(--top-area-height));
+      margin: var(--sub-top-area-margin, 0px 0px 2px 0px);
+      padding: var(--sub-top-area-padding, 8px 12px 8px 16px);
+    }
+
     &.lc-area-visible {
       display: flex;
     }
 
-    .lc-top-area-left {
+    .lc-top-area-left, .lc-sub-top-area-left {
       display: flex;
       align-items: center;
+      max-width: 100%;
     }
 
-    .lc-top-area-center {
+    .lc-top-area-center, .lc-sub-top-area-center {
       flex: 1;
       display: flex;
       justify-content: center;
       margin: 0 8px;
     }
-    .lc-top-area-right {
+    .lc-top-area-right, .lc-sub-top-area-right {
       display: flex;
       align-items: center;
       > * {
@@ -216,7 +220,7 @@ body {
       }
     }
   }
-  .lc-workbench-body {
+  .lc-workbench-body, .lc-workspace-workbench-body {
     flex: 1;
     display: flex;
     min-height: 0;
@@ -264,7 +268,7 @@ body {
       z-index: 2;
       .next-icon {
         line-height: 1;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--color-icon-pane);
       }
     }
 
@@ -277,7 +281,7 @@ body {
       z-index: 2;
       svg {
         vertical-align: middle;
-        color: rgba(0, 0, 0, 0.6);
+        color: var(--color-icon-pane);
       }
     }
 
@@ -288,7 +292,7 @@ body {
       width: var(--dock-pane-width);
       // min-width: var(--dock-fixed-pane-width);
       left: calc(var(--left-area-width) + 1px);
-      background-color: var(--color-pane-background);
+      background-color: var(--color-left-float-pane-background, var(--color-pane-background));
       box-shadow: 4px 6px 6px 0 rgba(31, 50, 88, 0.08);
       z-index: 820;
       display: none;
@@ -297,15 +301,20 @@ body {
         display: block;
       }
     }
-    .lc-left-area {
+    .lc-left-area, .lc-workspace-left-area {
       height: 100%;
       width: var(--left-area-width);
-      background-color: var(--color-pane-background);
       display: none;
       flex-shrink: 0;
       flex-direction: column;
       justify-content: space-between;
       overflow: hidden;
+      &.lc-left-area {
+        background-color: var(--color-left-area-background, var(--color-pane-background));
+      }
+      &.lc-workspace-left-area {
+        background-color: var(--color-workspace-left-area-background, var(--color-pane-background));
+      }
       &.lc-area-visible {
         display: flex;
       }
@@ -316,6 +325,8 @@ body {
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
+        color: var(--color-text);
+
         .lc-title {
           flex-direction: column;
           width: calc(var(--left-area-width) - 2px);
@@ -325,6 +336,9 @@ body {
           justify-content: center;
           cursor: pointer;
 
+          &.has-tip {
+            cursor: pointer;
+          }
           &.actived {
             color: #0079f2;
           }
@@ -366,6 +380,9 @@ body {
     .lc-left-area.lc-area-visible ~ .lc-workbench-center {
       margin-left: 2px;
     }
+    .lc-workspace-left-area.lc-area-visible ~ .lc-workspace-workbench-center {
+      margin-left: 2px;
+    }
     .lc-outline-pane {
       .lc-outline-tree .tree-node .tree-node-title {
         border-bottom: none;
@@ -390,7 +407,7 @@ body {
       }
       .lc-main-area {
         flex: 1;
-        background-color: #edeff3;
+        background-color: var(--color-background);
       }
       .lc-bottom-area {
         height: var(--bottom-area-height);
@@ -404,13 +421,14 @@ body {
     .lc-right-area {
       height: 100%;
       width: var(--right-area-width);
-      background-color: var(--color-pane-background);
+      background-color: var(--color-right-area-background, var(--color-pane-background));
       display: none;
       flex-shrink: 0;
       margin-left: 2px;
       position: relative;
       > .lc-panel {
         position: absolute;
+        background-color: var(--color-right-area-background, var(--color-pane-background, #fff));
         left: 0;
         top: 0;
       }
@@ -437,4 +455,68 @@ body {
       }
     }
   }
+  .engine-actionitem {
+    max-width: 100%;
+    color: var(--color-text);
+  }
+}
+
+.lc-workspace-workbench {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-background);
+  .lc-workspace-workbench-body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+    position: relative;
+
+    .lc-workspace-workbench-center {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      z-index: 10;
+      position: relative;
+      .lc-toolbar {
+        display: flex;
+        height: var(--toolbar-height);
+        background-color: var(--color-pane-background);
+        padding: 8px 16px;
+        .lc-toolbar-center {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex: 1;
+        }
+      }
+      .lc-main-area {
+        flex: 1;
+      }
+      .lc-bottom-area {
+        height: var(--bottom-area-height);
+        background-color: var(--color-pane-background);
+        display: none;
+        &.lc-area-visible {
+          display: block;
+        }
+      }
+    }
+
+    .lc-workspace-workbench-center-content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      flex-direction: column;
+      display: flex;
+      align-content: stretch;
+    }
+
+    .lc-workspace-workbench-window {
+      position: relative;
+      height: 100%;
+    }
+  }
 }