feat: 优化样式

winjo · winjo · commit 63e543ff0fd9 · 2021-03-14T23:28:37.000+08:00
diff --git a/packages/alex/src/api/renderEditor.tsx b/packages/alex/src/api/renderEditor.tsx
@@ -5,12 +5,12 @@ import { REPORT_NAME } from '@alipay/alex-core';
 import { createEditor } from './createEditor';
 import { Root } from '../core/Root';
 import { RootProps, LandingProps } from '../core/types';
-import { themeStorage } from '../core/utils';
 import { useConstant } from '../core/hooks';
 import { IConfig, IAppInstance } from './types';
 import { EditorProps } from '../core/editor/types';
 import { Container } from '../core/editor/container';
 import { HIDE_EDITOR_TAB_CLASS_NAME } from '../core/constants';
+import styles from '../core/style.module.less';
 
 interface IRenderProps extends IConfig {
   onLoad?(app: IAppInstance): void;
@@ -22,18 +22,17 @@ export type IEditorRenderProps = IRenderProps & EditorProps;
 export const renderEditor = (domElement: HTMLElement, props: IEditorRenderProps) => {
   const { onLoad, Landing, ...opts } = props;
   const app = createEditor(opts);
-  const themeType = themeStorage.get();
-  ReactDOM.render(<Root status="loading" theme={themeType} Landing={Landing} />, domElement);
+  const className = `alex-editor ${
+    opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : ''
+  }`;
+
+  ReactDOM.render(<Root status="loading" Landing={Landing} className={className} />, domElement);
 
   app
     .start((appElement) => {
       return new Promise((resolve) => {
         ReactDOM.render(
-          <Root
-            status="success"
-            theme={themeType}
-            className={opts.runtimeConfig.hideEditorTab ? HIDE_EDITOR_TAB_CLASS_NAME : ''}
-          >
+          <Root status="success" className={className}>
             {appElement}
           </Root>,
           domElement,
@@ -46,7 +45,11 @@ export const renderEditor = (domElement: HTMLElement, props: IEditorRenderProps)
     })
     .catch((err: Error) => {
       ReactDOM.render(
-        <Root status="error" error={err?.message || localize('error.unknown')} theme={themeType} />,
+        <Root
+          status="error"
+          error={err?.message || localize('error.unknown')}
+          className={className}
+        />,
         domElement
       );
 
@@ -66,7 +69,6 @@ export const renderEditor = (domElement: HTMLElement, props: IEditorRenderProps)
 
 export const EditorRenderer: React.FC<IEditorRenderProps> = ({ onLoad, Landing, ...opts }) => {
   const app = useConstant(() => createEditor(opts));
-  const themeType = useConstant(() => themeStorage.get());
   const appElementRef = useRef<React.ReactElement | null>(null);
 
   const [state, setState] = useState<{
@@ -106,13 +108,13 @@ export const EditorRenderer: React.FC<IEditorRenderProps> = ({ onLoad, Landing,
   }, []);
 
   const rootClassName = useMemo(
-    () => (opts.runtimeConfig.hideEditorTab ? HIDE_EDITOR_TAB_CLASS_NAME : ''),
+    () => (opts.runtimeConfig.hideEditorTab ? styles['hide-editor-tab'] : ''),
     [opts.runtimeConfig.hideEditorTab]
   );
 
   return (
     <Container value={{ documentModel: opts.documentModel }}>
-      <Root {...state} theme={themeType} Landing={Landing} className={rootClassName}>
+      <Root {...state} Landing={Landing} className={`alex-editor ${rootClassName}`}>
         {appElementRef.current}
       </Root>
     </Container>
diff --git a/packages/alex/src/core/editor/editor.module.ts b/packages/alex/src/core/editor/editor.module.ts
@@ -4,13 +4,10 @@ import {
   BrowserModule,
   ClientAppContribution,
   URI,
-  Uri,
   Domain,
-  getPreferenceThemeId,
   CommandService,
   PreferenceProvider,
   PreferenceScope,
-  Emitter,
   CommandContribution,
   CommandRegistry,
   Disposable,
@@ -52,6 +49,7 @@ import { DirtyDiffWidget } from '@ali/ide-scm/lib/browser/dirty-diff/dirty-diff-
 import { IDETheme } from '../../core/extensions';
 import { select, onSelect } from './container';
 import { isCodeDocumentModel, CodeDocumentModel } from './types';
+import styles from '../style.module.less';
 
 // TODO: 此处 diff 的 stage 和 revertChange 应该是 git 注册的，框架中直接添加了按钮，耦合，需要修复实现 scm/change/title
 // @ts-ignore
@@ -395,8 +393,8 @@ class EditorSpecialContribution
                   {
                     range: new monaco.Range(lineNumber, 1, lineNumber, 1),
                     options: {
-                      className: 'alex-line-content',
-                      glyphMarginClassName: `alex-line-glyph-margin}`,
+                      className: styles['line-content'],
+                      glyphMarginClassName: styles['line-glyph-margin'],
                     },
                   },
                 ]);
@@ -410,13 +408,13 @@ class EditorSpecialContribution
         const highlightLine = (lineNumber: number) => {
           // 延迟高亮，否则不居中
           setTimeout(() => {
-            editor.monacoEditor.revealLineInCenter(Number(lineNumber));
+            editor.monacoEditor.revealLineInCenterIfOutsideViewport(Number(lineNumber));
             oldClickDecorations = editor.monacoEditor.deltaDecorations(oldClickDecorations, [
               {
                 range: new monaco.Range(lineNumber, 1, lineNumber, 1),
                 options: {
                   isWholeLine: true,
-                  className: 'alex-line-content',
+                  className: styles['line-content'],
                 },
               },
             ]);
diff --git a/packages/alex/src/core/style.module.less b/packages/alex/src/core/style.module.less
@@ -43,6 +43,34 @@ alex-root {
   }
 }
 
+.hide-editor-tab {
+  [class^='kt_editor_group'] {
+    > [class^='editorGroupHeader'] {
+      display: none !important;
+    }
+    > [class^='kt_editor_body'] {
+      height: 100% !important;
+    }
+  }
+}
+
+.line-glyph-margin {
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='link' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+  background-position: center center;
+}
+
+.line-glyph-margin ~ :global(.line-numbers) {
+  text-decoration: underline;
+}
+
+.line-content {
+  background-color: #F90;
+  opacity: 0.2;
+}
+
 // override kaitian style
 :global {
   // fix image-preview style
@@ -52,33 +80,9 @@ alex-root {
     object-fit: contain;
     width: auto !important;
   }
-  alex-root.alex-hide-editor-tab {
-    [class^='kt_editor_group_'] {
-      > [class^='editorGroupHeader_'] {
-        display: none !important;
-      }
-      > [class^='kt_editor_body_'] {
-        height: 100% !important;
-      }
-    }
-  }
 }
 
-:global {
-  .alex-root {
-    .alex-line-glyph-margin {
-      cursor: pointer;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='64 64 896 896' focusable='false' data-icon='link' width='1em' height='1em' fill='currentColor' aria-hidden='true'%3E%3Cpath d='M574 665.4a8.03 8.03 0 00-11.3 0L446.5 781.6c-53.8 53.8-144.6 59.5-204 0-59.5-59.5-53.8-150.2 0-204l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3l-39.8-39.8a8.03 8.03 0 00-11.3 0L191.4 526.5c-84.6 84.6-84.6 221.5 0 306s221.5 84.6 306 0l116.2-116.2c3.1-3.1 3.1-8.2 0-11.3L574 665.4zm258.6-474c-84.6-84.6-221.5-84.6-306 0L410.3 307.6a8.03 8.03 0 000 11.3l39.7 39.7c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c53.8-53.8 144.6-59.5 204 0 59.5 59.5 53.8 150.2 0 204L665.3 562.6a8.03 8.03 0 000 11.3l39.8 39.8c3.1 3.1 8.2 3.1 11.3 0l116.2-116.2c84.5-84.6 84.5-221.5 0-306.1zM610.1 372.3a8.03 8.03 0 00-11.3 0L372.3 598.7a8.03 8.03 0 000 11.3l39.6 39.6c3.1 3.1 8.2 3.1 11.3 0l226.4-226.4c3.1-3.1 3.1-8.2 0-11.3l-39.5-39.6z'%3E%3C/path%3E%3C/svg%3E");
-      background-repeat: no-repeat;
-      background-size: 12px 12px;
-      background-position: center center;
-    }
-    .alex-line-glyph-margin ~ .line-numbers {
-      text-decoration: underline;
-    }
-    .alex-line-content {
-      background-color: #F90;
-      opacity: 0.2;
-    }
-  }
+:global(.alex-editor) .landing {
+  color: inherit;
+  background-color: inherit;
 }
diff --git a/packages/alex/src/integration/editor/index.tsx b/packages/alex/src/integration/editor/index.tsx
@@ -124,19 +124,6 @@ const App = () => {
             onLoad={(app) => {
               window.app = app;
             }}
-            Landing={() => (
-              <div
-                style={{
-                  width: '100%',
-                  height: '100%',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}
-              >
-                <Spin />
-              </div>
-            )}
             appConfig={{
               workspaceDir: 'editor',
               defaultPreferences: {
diff --git a/packages/core/src/client/editor-empty/editor-empty.module.less b/packages/core/src/client/editor-empty/editor-empty.module.less
@@ -11,7 +11,7 @@
   }
   p {
     font-size: 20px;
-    color: var(--button-foreground);
+    color: var(--foreground);
   }
   i {
     font-style: normal;

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`}`
`12`	`12`	`p {`
`13`	`13`	`font-size: 20px;`
`14`		`- color: var(--button-foreground);`
	`14`	`+ color: var(--foreground);`
`15`	`15`	`}`
`16`	`16`	`i {`
`17`	`17`	`font-style: normal;`