fix style

packages/editor-core/src/utils/focusing-track.ts

@@ -0,0 +1,48 @@
+
+class FocusingManager {
+  deploy() {
+
+  }
+  send(e: MouseEvent | KeyboardEvent) {
+
+  }
+  addModalCheck() {
+
+  }
+  create(config: FocusableConfig) {
+
+  }
+  activeItem() {
+
+  }
+  suspenceItem() {
+
+  }
+}
+
+export interface FocusableConfig {
+  range: HTMLElement | ((e: MouseEvent) => boolean);
+  modal?: boolean;
+  onEsc?: () => void;
+  onBlur?: () => void;
+}
+
+class Focusable {
+  readonly isModal: boolean;
+  constructor(private manager: FocusingManager, { range, modal }: FocusableConfig) {
+    this.isModal = modal == null ? false : modal;
+
+  }
+  checkRange(e: MouseEvent) {
+
+  }
+  active() {
+    this.manager.activeItem(this);
+  }
+  suspence() {
+    this.manager.suspenceItem(this);
+  }
+  purge() {
+
+  }
+}

packages/editor-skeleton/src/layouts/left-float-pane.tsx

@@ -12,6 +12,8 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
   }
 
   private dispose?: () => void;
+  // private focusing?: FocusingItem;
+  private shell: HTMLElement | null = null;
   componentDidMount() {
     const { area } = this.props;
     const triggerClose = () => area.setVisible(false);
@@ -19,18 +21,44 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
     this.dispose = () => {
       area.skeleton.editor.removeListener('designer.dragstart', triggerClose);
     }
+
+    /*
+    this.focusing = focusingTrack.create(this.shell!, {
+      onEsc: () => {
+        this.props.area.setVisible(false);
+      },
+      onBlur: () => {
+        this.props.area.setVisible(false);
+      },
+      // modal: boolean
+    });
+    */
+
+    this.onEffect();
+  }
+
+  onEffect() {
+    /*
+    const { area } = this.props;
+    if (area.visible) {
+      this.focusing?.active();
+    } else {
+      this.focusing?.suspense();
+    }
+    */
+  }
+
+  componentDidUpdate() {
+    this.onEffect();
   }
 
   componentWillUnmount() {
+    // this.focusing?.purge();
     this.dispose?.();
   }
 
   render() {
     const { area } = this.props;
-    // TODO: add focusingManager
-    // focusin set focus (push|replace)
-    // focusout remove focus
-    // onEsc
     const width = area.current?.config.props?.width;
     const hideTitleBar = area.current?.config.props?.hideTitleBar;
     const style = width ? {
@@ -38,6 +66,7 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
     } : undefined;
     return (
       <div
+        ref={(ref) => { this.shell = ref }}
         className={classNames('lc-left-float-pane', {
           'lc-area-visible': area.visible,
         })}

packages/editor-skeleton/src/layouts/workbench.less

@@ -54,14 +54,11 @@ body {
     display: none;
   }
   .lc-panel-title {
-    height: 48px;
-    font-size: 16px;
     // background-color: var(--pane-title-bg-color,rgba(31,56,88,.04));
     display: flex;
     align-items: center;
     justify-content: flex-start;
     padding: 0 15px;
-    border-bottom: 1px solid var(--color-line-normal,rgba(31,56,88,.1));
 
     .lc-help-tip {
       margin-left: 4px;
@@ -69,6 +66,14 @@ body {
       cursor: pointer;
     }
   }
+  > .lc-panel-title {
+    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;
+  }
 
   .lc-panel-body {
     position: absolute;
@@ -221,23 +226,6 @@ body {
   }
 }
 
-.my-dock {
-  padding: 0px 10px;
-  cursor: pointer;
-  align-self: stretch;
-  display: flex;
-  align-items: center;
-  .my-title-label {
-    user-select: none;
-  }
-  &.actived, &:hover {
-    background-color: var(--pane-title-bg-color);
-    .my-title {
-      color: var(--color-actived);
-    }
-  }
-}
-
 
 .lc-workbench {
   height: 100%;
@@ -306,8 +294,7 @@ body {
         align-items: center;
         // background: rgba(31,56,88,0.04);
         border-bottom: 1px solid #EDEFF3;
-        margin-top: 48px;
-        .lc-tab-title{
+        .lc-tab-title {
           flex: 1;
           height: 32px;
           display: flex;
@@ -315,14 +302,16 @@ body {
           justify-content: center;
           border-bottom: 2px solid transparent;
           cursor: pointer;
-          &.actived{
+          font-size: 12px;
+          &.actived {
+            color: #0079F2;
             border-bottom-color: #0079F2;
           }
         }
       }
       .lc-tabs-content {
         position: absolute;
-        top: 80px;
+        top: 32px;
         bottom: 0;
         left: 0;
         right: 0;
@@ -346,23 +335,23 @@ body {
         flex-direction: column;
         justify-content: flex-start;
         align-items: center;
-        .lc-title{
-          padding: 12px;
+        .lc-title {
           flex-direction: column;
           width: 46px;
           height: 46px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
 
-          svg {
-            // fill: var(--color-icon-normal,rgba(31,56,88,.4));
-          }
-
-          &.has-tip{
+          &.has-tip {
             cursor: pointer;
           }
           &.actived{
             color: #0079F2;
           }
-          .lc-title-icon{
+          .lc-title-icon {
+            height: 20px;
+            width: 20px;
             margin: 0;
             .next-icon:before {
               line-height: 1 !important;

packages/editor-skeleton/src/widget/utils.ts

@@ -19,6 +19,8 @@ export function composeTitle(title?: TitleContent, icon?: IconType, tip?: TipCon
           if (tipAsTitle) {
             title = tip as any;
             tip = null;
+          } else {
+            title = undefined;
           }
         }
       }